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.基本篇演習
看完以上的小夥伴，能夠看兩個例子的結果，試着做一下。
演習一：點擊按鈕，設置方塊大小
演習二：點擊按鈕，增添或減小字體大小
