1.JS存放在程式碼中的位置
1.JS寫在行間
<div style="background-color: red;" onclick="alert(1)" >hello world</div>- 優點：直接，簡單
- 缺點：不方便複用和維護,不符合結構行為分離規範
2.JS寫在script ( 一般寫在body結束標籤之前 )
因為JS的執行順序，需要將元素載入完成，才能獲取到元素，故一般寫在body結束標籤之前。
<body>
<div id="box">hello</div>
<div id="box2">world</div>
<script>
document.getElementById("box").onclick = function(){
alert(1);
};
document.getElementById("box2").onclick = function(){
alert(2);
};
</script>
</body>優點：只要是在這個頁面中就可以使用這段 js。
缺點： 1. 不方便修改維護 2. 不符合規範
3.寫在js檔案中
1.建立一個js檔案,寫入js程式碼
2.讓html檔案 和js檔案產生關聯,通過script標籤的 src 屬性 連結到js檔案。
<body>
<div id="box">miaov</div>
<script src="index.js"></script>
</body>優點：
1.結構 行為 完全分離
2.方便修改維護
3.可複用性強
2.JS執行的順序
針對js的存放位置，如果js放在script標籤中，必須放到body結束標籤之前。原因是js會讀取dom節點，必須等到dom節點都載入完成了，js程式碼才取得到對應節點。
如果JS程式碼非要放在所有節點之前呢？？？
可以將script程式碼寫到head中，用window.onload把程式碼塊包起來放到script中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
window.onload = function(){
document.getElementById("box").onclick = function(){
alert(1);
}
}
</script>
</head>
<body>
<div id="box">miaov</div>
</body>
</html>
以上方法不支援，因為window.onload是等到頁面所有dom節點，圖片資源載入完成才執行的。如果圖片資源很多的話，那麼使用者對頁面的操作就無效了。所以，一般放在body結束標籤之前。
3.註釋
分為單行註釋和多行註釋。
-
//單行註釋 //單行註釋 //單行註釋
-
/* 多行註釋 多行註釋 多行註釋 */
4.變數
- 變數：可變的量。
- 作用：複用資料，儲存資料。
- 申明變數： var 變數名; 以分號結束 。只申明一個變數不賦值的話，那這個變數中預設儲存的是undefined
-
變數命名規範：可以是數字(1234567890) 字母(abcdefg…)下劃線 ( _ )美元符( $ )組成。
禁止：1. 不允許數字開頭 2. 不允許使用關鍵字 3. 不允許使用保留字
推薦：
駝峰式命名法+語義化單詞
駝峰式命名法:從第二個單詞開始，每個單詞的首字母大寫。- 屬性操作 ：
以下三種寫法都可以。
box.style["background-color"] = "green";
box["style"]["background-color"] = valStr;
box.style.backgroundColor = "green";- 如果[ ]中間沒有用引號包起來,那麼會把中間的內容當做變數處理。
- 當需要改變的屬性值是一個變數的時候只能使用[ ],方括號中間如果是變數的話，不需要加引號。
- 當操作屬性的時候屬性名不符合變數命名規範的時候可以使用[ ]。
- 如果一定要使用點( . )的話，需要改變成駝峰式命名法。
5.函式
（一）簡介
- 函式的作用：程式碼塊的複用
-
函式的分類：
1.有名函式
2.匿名函式
（二）使用
1-有名函式
宣告:
function 函式名(){
程式碼塊
}
呼叫:
函式名();
2-匿名函式
宣告:
直接宣告一個匿名函式 會報錯
呼叫:
可以直接通過事件呼叫eg：
案例一：有名函式的宣告和呼叫
案例二：匿名函式直接宣告會報錯，可以通過事件呼叫
案例三：有名函式的錯誤呼叫，btn.onclick = fn();這樣呼叫是錯誤的，只會使函式立刻執行，傳給點選事件的是個null。沒有點選click按鈕，直接開啟就發生變化了。
案例三：有名函式的正確呼叫，btn.onclick = fn;這樣呼叫是正確的。點選click按鈕，紅色方塊才發生變化
6.innerHTML 和 src
innerHTML:修改雙標籤裡面的內容。
innerHTML舉例：以下程式碼的作用是，點選頁面任何位置，修改紅色方塊的內容。
src：需要注意的是，在js中，img.src獲取到的是絕對路徑，很少進行比較。
7.基礎篇練習
看完以上的小夥伴，可以看兩個例子的效果，試著做一下。
練習一：點選按鈕，設定方塊大小
練習二：點選按鈕，增加或減小字型大小