JavaScript基礎：
一. JavaScript概述
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。
document.write("<h1>這是一個標題</h1>") 在網頁上顯示內容
alert(“你好”) 彈窗，
二. JavaScript變量
var ad = 1; 字母開頭，區分大小寫，不能是關鍵字和保留字
三. JavaScript數據類型 用typeof()查看
JavaScript中的數據類型：Undefined、Null、Boolean、Number、String和Object。
1.字符串 var carname=‘Head teacher‘;
2.Number類型 var x1=34.00; //使用小數點來寫
3.布爾類型 var x=true;
4.數組 var cars=new Array(); 就是Python裏的列表
5.對象 對象由花括號分隔。 在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義
var person={firstname:"John", lastname:"Doe", id:5566};
6.Undefined類型 在使用var聲明變量，但沒有對其初始化時，這個變量的值就是undefined。var box;
7.Null類型 是一個只有一個值的數據類型，即特殊的值null。它表示一個空對象引用(指針)，typeof操作符檢測null會返回object。
四. JavaScript運算符
1.ECMAScript定義了5個算術運算符，加減乘除，取余。遞增++和遞減--
前置和後置的區別:沒有賦值操作時，前置和後置一樣。有賦值操作時，前置的運算符會 先累加或累減 再賦值，後置運算符則 先賦值 再累加或累減。
2.比較運算符：小於(<)、大於(>)、小於等於(<=)、大於等於(>=)、相等(==)(大小相同即可 如true為1)、不等(!=)、全等(恒等)(===)(要求大小和類型都相同)、不全等(不恒等)(!==)。
3.賦值運算符：等於(=) 加等於(+=) 減等於（-=） 乘等於（*=） 除等於（/=） 取余等於（%=）
4.JavaScript邏輯運算符
5.逗號運算符：可以在一條語句中執行多個操作。var box = 100, age = 20, height = 178; //多個變量聲明
6.三元條件運算符：var box = 5 > 4 ? ‘a‘ : ‘b‘; //對，5>4返回true則把‘a‘賦值給box，反之把‘b‘賦值給box。
7. 運算符優先級：
五. JavaScript流程控制語句
1.條件分支語句if () {} else {}
if (條件表達式) {語句;}
else if (條件表達式) {語句;} ...
else {語句;}
2.多重分支語句switch () { case n : ...}; switch語句是多重條件判斷，用於多個值相等的比較。
var box = 1;
switch (box) { //用於判斷box相等的多個值
case 1 :
alert(‘one‘);
break; //break;用於防止語句的穿透
case 2 :
alert(‘two‘);
break;
default : //相當於if語句裏的else，否則的意思
alert(‘error‘); }
3.do...while語句：先運行，後判斷的循環語句。即不管條件是否滿足，至少先運行一次循環體。
var box = 1; //如果是1，執行五次，如果是10，執行1次
do {alert(box);box++;}
while (box <= 5); //先運行一次，再判斷
4. while語句：一種先判斷，後運行的循環語句。必須滿足條件了之後，方可運行循環體。
var box = 1; //如果是1，執行五次，如果是10，不執行
while (box <= 5) //先判斷，再執行
{ alert(box); box++; }
5. for語句：也是一種先判斷，後運行的循環語句。但它具有在執行循環之前 初始化變量和定義循環後要執行代碼的能力。
for (var box = 1; box <= 5 ; box++) { alert(box); }
//第一步，聲明變量var box = 1;
//第二步，判斷box <=5
//第三步，alert(box)
//第四步，box++
//第五步，從第二步再來，直到判斷為false
6. for...in語句：是一種精準的叠代語句，可以用來枚舉對象的屬性。
var box = {‘name‘ : ‘Head Teacher’,‘age‘ : 28,‘height‘ : 178 }; //創建一個對象
for (var p in box)
{ alert(p); } //列舉出對象的所有屬性
break和continue語句用於在循環中精確地控制代碼的執行。
六：JavaScript函數
1.函數是完成某一功能的代碼段 ，2.函數是可重復執行的代碼段， 3.函數方便管理和維護
function 函數名稱（[參數][ 參數][ 參數]）{
代碼段
return 返回值 }
例如：function PeopleNameAge(name,age){
alert(‘你的姓名:‘+name+‘你的年齡:‘+age);
}
函數註意：
1.函數名稱不要包含特殊字符 ，最好遵循駝峰式的命名方法 ，嚴格區分大小寫 ，如果重復會覆蓋
2.函數可以有參數也可以沒有參數，可以有一個參數也可以有多個參數
3.函數通過return返回值，如果沒有默認返回undefined
4.函數不調用不執行
七. JavaScript數組
1.使用new關鍵字創建數組，，var box = new Array(‘曹老師‘,‘web‘,‘學神‘); //創建一個數組並分配好了元素
2.可以省略new關鍵字。
3.使用字面量方式創建數組 var box = [‘曹老師‘,‘web‘,‘學神‘]; //創建包含元素的數組
使用索引下標來讀取數組的值，alert(box[2]); //獲取第三個元素
使用length屬性獲取數組元素量 alert(box.length) //獲取元素個數
box.length = 10; //強制元素個數
box[box.length] = ‘JS技術‘; //通過length給數組增加一個元素
八.JavaScript對象
JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...
1.使用new運算符創建Object
ar people= new Object(); //new方式
people.name=‘Head‘; //創建屬性字段
people.age=18; //創建屬性字段
2.new關鍵字可以省略
3.使用字面量方式創建Object
4.使用字面量及傳統復制方式
var people ={};
people.name=‘head‘; //字面量聲明為空對象
people.age=18; //點符號給屬性復制
6.兩種屬性輸出方式
alert(people.age); //點表示法輸出
alert(people [‘age‘]); //中括號表示法輸出，註意引號
7.給對象創建方法
var people ={
run:function(){
return ‘跑步中！！！‘; }
}
alert(people.run()); //調用對象中的方法
8.使用delete刪除對象屬性
在實際開發過程中，一般我們更加喜歡字面量的聲明方式。
九.JavaScript BOM
瀏覽器對象模型 (BOM)瀏覽器對象模型（Browser Object Model (BOM)）尚無正式標準。
1.警告框 即：Alert(‘aaa’); 當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。用於確保用戶可以得到某些信息。
2.確認框 用於驗證是否接受用戶操作。
當確認卡彈出時，可以點擊 "確認" 或者 "取消" 來確定用戶操作。點擊 "確認", 返回 true；點擊 "取消", 確認框返回 false。
if(confirm("你喜歡我嗎？"))
{ alert(‘喜歡！‘);}
else{ alert(‘不喜歡！‘);}
3.提示框：用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。如果點確認，返回值為輸入的值。如果點取消，返回值為 null。
var name = prompt("請輸入你的名字","");
if(name){alert("歡迎您"+name); }
十.JavaScript DOM （Document Object Model）即文檔對象模型
W3C提供了比較方便簡單的定位節點的方法和屬性，以便我們快速的對節點進行操作。
分別為：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。
1.getElementById()方法
document.getElementById(‘box‘); //獲取id為box的元素節點
2.getElementsByTagName()方法 ；返回一個對象數組HTMLCollection(NodeList)，保存著所有相同元素名的節點列表。
document.getElementsByTagName(‘*‘); //獲取所有元素
document.getElementsByTagName(‘li‘); //獲取所有li元素，返回數組
3.getElementsByName()方法 ；獲取相同名稱(name)的元素，返回一個對象數組HTMLCollection(NodeList)。
document.getElementsByName(‘add‘) //獲取input元素
4.getAttribute()方法 ；獲取元素中某個屬性的值。
document.getElementById(‘box‘).getAttribute(‘id‘); //獲取元素的id值
5.setAttribute()方法 ：設置元素中某個屬性和值。它需要接受兩個參數：屬性名和值。如果屬性本身已存在，那麽就會被覆蓋。
document.getElementById(‘box‘).setAttribute(‘align‘,‘center‘); //設置屬性和值
6.removeAttribute()方法 ：可以移除HTML屬性。
document.getElementById(‘box‘).removeAttribute(‘style‘); //移除屬性
十一.JavaScript事件
事件是 由訪問Web頁面的用戶引起的一系列操作，當用戶執行某些操作的時候，再去執行一系列代碼。 例如：用戶點擊，則執行相應的如下代碼：。
//在HTML中把事件處理函數作為屬性執行JS代碼：
<input type="button" value="按鈕" onclick="alert(‘Lee‘);" /> 等效於：
var input = document.getElementsByTagName(‘input‘)[0]; //得到input對象
input.onclick = function () { //匿名函數執行
alert(‘Lee‘); };
onclick 當用戶單擊對象時 鏈接、按鈕、表單對象、圖像映射區域
onblur 當焦點從對象上移開時 窗口、框架、所有表單對象
ondblclick 當用戶雙擊對象時 鏈接、按鈕、表單對象
onError 當腳本中發生語法錯誤時 腳本
onfocus 當單擊鼠標或者將鼠標移動聚焦到窗口或框架時 窗口、框架、所有表單對象
onkeydown 當按鍵被按下時 文檔、圖像、鏈接、表單
onkeypress 當按鍵被按下然後松開時 文檔、圖像、鏈接、表單
onkeyup 當按鍵被松開時 文檔、圖像、鏈接、表單
onmouseout 當圖標移出鏈接時 鏈接
onmouseover 當鼠標移到鏈接時 鏈接
onreset 單擊表單的reset按鈕 表單復位按鈕
onresize 當選擇一個表單對象時 窗口
onselect 當選擇一個表單對象時 表單元素
onsubmit 當發送表格到服務器時 表單
十二.JavaScript尺寸樣式操作
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.屬性名=新樣式
var box = document.getElementById(‘box‘); //獲取box
box.style.css.style; //CSSStyleDeclaration
box.style.css.style.color; //red
box.style.css.style.fontSize; //20px
註意:如果遇到css樣式具有橫杠例：font-size需要改寫成fontSize，去除橫杠並將首字母大寫
1.通過style內聯獲取元素的大小
var box = document.getElementById(‘box‘); //獲取元素
box.style.width; //200px、空
box.style.height; //200px、空
2.scrollWidth和scrollHeight 這組屬性可以獲取滾動內容的元素大小。
box.scrollWidth; //200
box.scrollWidth; //200
3.offsetWidth和offsetHeight 這組屬性可以返回元素實際大小，包含邊框、內邊距和滾動條。
box.offsetWidth; //200
box.offsetHeight; //200
4.clientLeft和clientTop 這組屬性可以獲取元素設置了左邊框和上邊框的大小。
box.clientLeft; //獲取左邊框的長度
box.clientTop; //獲取上邊框的長度
5.offsetLeft和offsetTop 這組屬性可以獲取當前元素相對於父元素的位置。
box.offsetLeft; //50
box.offsetTop; //50
scrollTop和scrollLeft
6.這組屬性可以獲取滾動條被隱藏的區域大小，也可設置定位到該區域。
box.scrollTop; //獲取滾動內容上方的位置
box.scrollLeft; //獲取滾動內容左方的位置
JavaScript基礎：