HTML加入JavaScript

twc829發表於2016-05-05
HTMLJavaScript

  • 三種新增JavaScript方法

1 在head或body標籤中新增script標籤，在兩個script標籤之間填寫程式碼

2 新增外部JavaScript檔案，在head或body標籤新增JS連結外部樣式表

3 使用行內指令碼（不推薦）

  • 舉例

1 新增script標籤

1.1 在head標籤內新增script標籤

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
		
		<script>
			alert("Yo, welcome to my website!");
		</script>
		<!...網頁載入時彈出對話方塊...>
		
	</head>

注意：在點選確定前，瀏覽器沒有渲染網頁內容；

1.2 在body標籤內新增script標籤

	<body>
		<!...省略其他程式碼...>
		
		<script>
			alert("Yo, welcome to my website!");
		</script>
	</body>


注意：背景網頁已載入完畢，因為瀏覽器在本網頁末尾的body標籤遇到該指令碼，瀏覽器在處理JS前就已完成網頁載入；

習慣上將JS指令碼新增在body標籤底部，但不是每次都奏效 ；


2 新增外部指令碼檔案


在index.html檔案中，

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
		
		<script src="scripts/main.js"></script>
		
	</head>

注意：也可將script標籤新增在body標籤中，顯示效果與第一種方法相同；

將JS與script連結；將CSS與link連結；

在main.js檔案中，

alert("Yo Wencheng, welcome to my website!");


3 新增行內指令碼

在導航部分a標籤內新增行內文字，當點選該連結時，先彈出警報，點選確定後再跳轉到該連結；

<li><a onclick="alert('Yo Wencheng, welcome to my website!');" href="http://www.163.com" target="_blank">Link to Netease Web</a></li>

注意：需要將提示資訊的雙引號改成單引號，以免對onclick屬性的雙引號造成干擾；

對於行內指令碼，適用於控制網頁上的指定事件；






相關文章