一、JavaScript介紹
如果說網頁的三種基本構成關係的話“畫龍點睛”最爲恰當。HTML視爲繪製龍的形態，CSS視爲龍色彩，那麼JavaScript就是神來之筆“點睛”。HTML把網頁分成多個塊，CSS就能精確的佈局並位置染色再做一些簡單的交互方式，JavaScript就能根據用戶需求做到相應的處理。比如說彈窗，改變內容改變圖片，驗證輸入。
HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
JavaScript特點：
1、是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程中逐行進行解釋。
2、是一種採用事件驅動的腳本語言,它不需要經過Web服務器就可以對用戶的輸入做出響應。
3、採用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
4、不依賴於操作系統,僅需要瀏覽器的支持。JavaScript已被大多數的瀏覽器所支持。
5、是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對
<script> 標籤的作用：
<script>標籤代表了在HTML頁面中插入JavaScript。<script>是成對的其另一半是</script>。
<script>
alert("My First JavaScript");
</script>
擴展：老舊的實例可能會在 <script> 標籤中使用 type="text/javascript"。現在已經不必這樣做了，因爲現在是瀏覽器和HTML5默認的腳本語言。
採用C風格的註釋，包括單行註釋和塊級註釋。
// 單行註釋
/*
* 這是一個多行
* 註釋
*/
每一行的語句結束採用“;”來表示。
外聯式JavaScript：
也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：
實例：
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
二、JavaScript變量與數據結構
變量是存儲信息的容器。數據結構是容器的大小。
(一)、變量
變量聲明注意事項：
變量必須以字母開頭，不能以關鍵子命名。
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）
定義變量時要使用var操作符（var是關鍵），後面跟一個變量名（變量名是標識符）。
以下是定義變量的幾種方法：
聲明（創建） JavaScript 變量：
var carname;
變量賦值：
carname="Volvo";
在聲明變量時對其賦值：
var carname="Volvo";
一條語句聲明多個變量：
var name="Gates", age=56, job="CEO";
聲明也可橫跨多行：
var name="Gates",
age=56,
job="CEO";
無值的變量默認值是undefined
(二)、數據類型
字符串、數字、布爾、數組、對象、Null、Undefined。
1、字符串string：使用單引號或雙引號表示。
var carname="Bill Gates";
var carname='Bill Gates';
2、數字Number：數字可以帶小數點，也可以不帶。
注意：NaN，即非數值(Not a Number)是一個特殊的值，這個數值用於表示一個本來要返回數值的操作數未返回數值的情況。
var box = 0 / 0; //NaN
3、布爾類型boolean：布爾（邏輯）只能有兩個值(true 或 false)。
var x=true;
var y=fals;
4、數組：
創建數組：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或
var cars=new Array("Audi","BMW","Volvo");
或
var cars=["Audi","BMW","Volvo"];
5、對象Object：對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔。
var person={firstname:"John", lastname:"Doe", id:5566};
或
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
6、Undefined與Null：Undefined 這個值表示變量不含有值，可以通過將變量的值設置爲 null 來清空變量。
聲明變量類型"new"
當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
三、JavaScript運算符
1、基本運算符
加、減、乘、除、取餘、遞增、遞減
+ - * / % ++ --
注意：遇到NaN進行運算值都是NaN。
2、比較運算符
小於、大於、小於等於、大於等於、相等、不等、全等(恆等)、不全等(不恆等)
< > <= >= == != === !==
注意："="代表賦值號，不是等號。
全等、不全等————表示類型也是否相等。
"+"號還可以用作連接符。var a = 1+'123abc'; //數值和字符串(字符和字符等)var a =1123abc
"--"與"++"前置和後置的區別(從左往右優先級的問題)
在沒有賦值操作，前置和後置是一樣的。
但在賦值操作時，如果遞增或遞減運算符前置，那麼前置的運算符會先累加或累減再賦值，如果是後置運算符則先賦值再累加或累減。
3、賦值運算符
等於、加等於、減等於、乘等於、除等於、取於等於
= += -= *= /= %=
4、邏輯運算符
1.邏輯與(AND) ：&&
var box = (5 > 4) && (4 > 3); //true，兩邊都爲true，返回true
2.邏輯或(OR)：||
var box = (9 > 7) || (7 > 8); //true，兩邊只要有一邊是true，返回true
3.邏輯非(NOT)：!------單目運算符
!true == fals
5、逗號運算符
逗號運算符可以在一條語句中執行多個操作。
var box = 100, age = 20, height = 178; //多個變量聲明
6、三元運算符
三元條件運算符其實就是if語句的簡寫形式。
var box = 5 > 4 ? '對' : '錯'; //對，5>4返回true則把'對'賦值給box，反之。
運算符優先級：
|
運算符 |
描述 |
|
. [] () |
對象成員存取、數組下標、函數調用等 |
|
++ -- ~ ! delete new typeof void |
一元運算符 |
|
* / % |
乘法、除法、去模 |
|
+ - + |
加法、減法、字符串連接 |
|
< <= > >= instanceof |
關係比較、檢測類實例 |
|
== != === !== |
恆等(全等) |
|
& |
位與 |
|
^ |
位異或 |
|
| |
位或 |
|
&& |
邏輯與 |
|
|| |
邏輯或 |
|
?: |
三元條件 |
|
= x= |
賦值、運算賦值 |
|
, |
多重賦值、數組元素 |
四、JavaScript流程控制語句
1.條件分支語句if () {} else {}
2.多重分支語句switch () {case n : ; case n : ; ...}
3.do {} while循環語句 //至少會先運行一遍
4.while () {}循環語句
5.for () {}循環語句
6.for...in語句 //for...in語句是一種精準的迭代語句，可以用來枚舉對象的屬性。
break和continue在循環中精確地控制代碼的執行。
break語句會立即退出循環，強制繼續執行循環體後面的語句。
continue語句退出當前循環，繼續後面的循環。
五、JavaScript函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
語法格式：
function 函數名稱（[參數][ 參數][ 參數]）{
代碼段
Return 返回值
}
//使用關鍵詞"function"
帶參函數：
function myFunction(var1,var2)
{
這裏是要執行的代碼
}
返回值函數：
function myFunction()
{
var x=5;
return x;
}
//如果沒有返回值，默認返回undefined
例子：(計算兩個數字的乘積，並返回結果。)
function myFunction(a,b)
{
return a*b; //計算兩個傳入的參數並返回值。
}
var a =myFunction(4,3);//調用函數並將返回值賦值給a變量
六、JavaScript對象
所有事物都是對象，對象是擁有屬性和方法的數據。
舉例：汽車就是現實生活中的對象。
汽車的屬性包括名稱、型號、重量、顏色等。
所有汽車都有這些屬性，但是每款車的屬性都不盡相同。
汽車的方法可以是啓動、駕駛、剎車等。
所有汽車都擁有這些方法，但是它們被執行的時間都不盡相同。
1.new關鍵字創建Object對象
var people= new Object(); //創建people對象
people.name="name屬性"; //創建people對象的name屬性
people.age="age屬性"; //創建people對象的age屬性
2.new關鍵字省略創建Object對象
var people = Object(); //創建people對象
people.name="name屬性"; //創建people對象的name屬性
people.age="age屬性"; //創建people對象的age屬性
3.字面量方式創建Object
var people = { //字面量方式
name : "name屬性", //創建屬性字段
age : "age屬性" //最後一個屬性不要加逗號
};
4.字面量及傳統複製方式
var people ={};
people.name="name屬性"; //字面量聲明爲空對象
people.age="age屬性"; //點符號給屬性複製
5.兩種屬性輸出方式
alert(people.age); //點表示法輸出
alert(people ['age']); //中括號表示法輸出，注意引號
6.給對象創建方法
var people ={
run:function(){ //類似於匿名函數。對象中叫方法，獨立出來就叫匿名函數。匿名函數與普通函數的區別有無名字。
return '跑步中！！！'; //對象中的run方法
}
}
alert(people.run()); //調用對象中的方法
7.使用delete刪除對象屬性
delete.people.name; //刪除people對象中的name屬性
七、JavaScript數組
創建數組：
1、使用new關鍵字創建數組(以下三種都可省略new關鍵字)
var box = new Array(); //創建了一個數組
var box = new Array(10); //創建一個包含10個元素的數組
var box = new Array('python','C','彙編'); //創建一個數組並分配好了元素
2、使用字面量方式創建數組
var box = []; //創建一個空的數組
var box = ['python','C','彙編']; //創建包含元素的數組
數組常見使用方法：
1、使用下標索引獲取、改變數組的值(下標索引從零開始)
alert(box[2]); //獲取第三個元素
box[2] = '學生'; //修改第三個元素
box[5] = '計算機編程'; //增加第五個元素
2、使用length屬性獲取數組元素量
alert(box.length); //獲取元素個數
box.length = 10; //強制元素個數
box[box.length] = 'JS技術'; //通過length給數組增加一個元素
3、複雜數組
var box = [
{ //第一個元素是一個對象
name : 'python',
age : 28,
run : function () {
return 'exit';
}
},
['馬雲','李彥宏',new Object()], //第二個元素是數組
'江蘇', //第三個元素是字符串
25+25, //第四個元素是數值，會進行自我運算
new Array(1,2,3) //第五個元素是數組,最後沒有加逗號
];
alert(box[0].name);
alert(box[1][1]);
八、JavaScript BOM(瀏覽器對象模型)---針對瀏覽器
含義：使 JavaScript 有能力與瀏覽器“對話”。採用windows對象，由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認爲是 BOM 的方法和屬性。可以省略windos前綴。如：windows.alert();可以直接寫成alert();
常用的：
1、警告框 如：alert("彈出內容");
2、確認框 如：confirm("判斷內容")
if(confirm("你喜歡我嗎？")){
alert("喜歡");
}else{
alert("不喜歡！");
}
3、提示框 如：prompt("提示內容")
var name = prompt("請輸入你的名字","");
if(name){
alert("歡迎您"+name);
}
計時事件：
通過使用 JavaScript，我們有能力作到在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。
兩個關鍵方法: (注意: 1000 毫秒是一秒。)
setInterval() - 間隔指定的毫秒數不停地執行指定的代碼
如：window.setInterval("function_no()",2000); //每間隔2秒執行一次function_no函數,可以不使用window前綴
setTimeout() - 暫停指定的毫秒數後執行指定的代碼
如：window.setTimeout("function_no()",2000); //兩秒後執行一次funtion_no函數
clearInterval() - 清除定時調用,只能清除setInterval
例子：
function ad(){
var d = new Date()
var t=d.toLocaleTimeString(); //時間獲得
//alert(t);
document.getElementById("clock").value=t;
}
setInterval("ad()",1000);
九、JavaScript DOM(文檔對象模型)--針對HTML頁面
DOM針對HTML和XML文檔的API（應用程序接口）。DOM描繪了一個層次化的節點樹(div、img等html標籤"節點")，運行開發人員添加、移除和修改頁面的某一部分。
注意：font-size(這樣有橫槓的"-",需要把中間"-"去掉後面的"s"大寫"S")
W3C提供了比較方便簡單的定位節點的方法和屬性：
方法 說明
getElementById() 獲取特定ID元素的節點
getElementsByTagName() 獲取相同元素的節點列表
getElementsByName() 獲取相同名稱的節點列表
getAttribute() 獲取特定元素節點屬性的值
setAttribute() 設置特定元素節點屬性的值
removeAttribute() 移除特定元素節點屬性
例子：
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js dom</title>
<style type="text/css">
.qwer{
color:red;
background:red;
}
</style>
</head>
<body>
<div id="qw">
顏色字體效果
</div>
<div></div>
<input type="text" name="user" class="er">
<input type="text" name="user">
<script type="text/javascript" src="./index.js"></script> //因爲html的加載順序，所以寫在這
<body>
</html>
js代碼
/*獲取到id節點名稱*/
var zx = document.getElementById("qw"); //獲取到id節點名稱
zx.style.color="red"; //添加字體顏色效果
/*獲取相同的元素節點列表*/
var zx2 = document.getElementsByTagName("div"); //獲取相同的元素節點列表
alert(typeof(zx2)); //如果有多個相同元素返回的就是數組，用下標訪問
zx2[1].style.color="blue";
/*獲取相同名稱的節點列表*/
var zx3 = document.getElementsByName("user"); //獲取相同名稱的節點列表
zx3[0].style.background="green";
zx3[1].style.background="blue";
/*獲取特定元素節點屬性的值*/
var zx4 = document.getElementsByTagName("input")[0]; //獲取第一個元素節點
alert(zx4.getAttribute("name")); //獲取name屬性的值
/*設置特定元素節點屬性的值*/
zx4.setAttribute("class","qwer"); //zx4[0]的class屬性值改成qwer
/*移除特定元素節點屬性*/
zx4.removeAttribute("class");
十、JavaScript事件
事件是由訪問Web頁面的用戶，引起的一系列操作，例如：用戶點擊。當用戶執行某些操作的時候，再去執行一系列代碼。
事件分爲：鼠標事件、鍵盤事件
事件處理函數 影響的元素 觸發方式
onabort 圖像 當圖像加載被中斷時
onblur 窗口、框架、所有表單對象 當焦點從對象上移開時
onchange 輸入框，選擇框和文本區域 當改變一個元素的值且失去焦點時
onclick 鏈接、按鈕、表單對象、圖像映射區域 當用戶單擊對象時
ondblclick 鏈接、按鈕、表單對象 當用戶雙擊對象時
ondragdrop 窗口 當用戶將一個對象拖放到瀏覽器窗口時
onError 腳本 當腳本中發生語法錯誤時
onfocus 窗口、框架、所有表單對象 當單擊鼠標或者將鼠標移動聚焦到窗口或框架時
onkeydown 文檔、圖像、鏈接、表單 當按鍵被按下時
onkeypress 文檔、圖像、鏈接、表單 當按鍵被按下然後鬆開時
onkeyup 文檔、圖像、鏈接、表單 當按鍵被鬆開時
onload 主題、框架集、圖像 文檔和圖像加載後
onunload 主體、框架集 文檔和框架集卸載後
onmouseout 鏈接 當鼠標移出鏈接時
onmouseover 鏈接 當鼠標移到鏈接時
onmove 窗口 當瀏覽器窗口移動時
onreset 表單復位按鈕 單擊表單的reset按鈕
onresize 窗口 當選擇一個表單對象時
onselect 表單元素 當選擇一個表單對象時
onsubmit 表單 當發送表格到服務器時
例子：
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js 事件</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<button id="ad">普通按鈕</button>
<div>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="200px"> //一張百度的圖片
</div>
<script type="text/javascript" src="./index.js"><script> //因爲html加載順序，所以放在這裏。還可以在js文件內添加onload包裹需要延遲加載的js來解決。
</body>
</html>
js代碼
var ad = document.getElementById("ad");
var div = document.getElementsByTagName("div")[0];
var img = document.getElementsByTagName("img")[0];
//單機事件
ad.onclick=function(){
div.style.background="red";
}
//鼠標進入事件
div.onmouseover=function(){
img.style.opacity=0.6;
}
//鼠標離開事件
div.onmouseout=function(){
img.style.opacity=1.0;
}
//鍵盤事件
windows.document.onkeydown=function(ent){ //可省略"windows."，ent參數代表傳入的按鍵值
alert(ent.keyCode); //keyCode代表鍵盤碼
alert("按了案件");
}
十一、JavaScript尺寸樣式表
改變html元素的樣式：document.getElementById(id).style.屬性名=新樣式
1.通過style內聯獲取元素的大小(無法從css中獲取)
例子：
var box = document.getElementById('box');
alert(box.style.width);
alert(box.style.height);
2.scrollWidth和scrollHeight可以獲取滾動內容的元素大小
3.offsetWidth和offsetHeight可以返回元素實際大小,包含邊框、內邊距和滾動條。
4.clientLeft和clientTop可以獲取元素設置了左邊框和上邊框的大小。
5.offsetLeft和offsetTop可以獲取當前元素相對於父元素的位置。
6.scrollTop和scrollLeft可以獲取滾動條被隱藏的區域大小，也可設置定位到該區域。