JavaScript
JavaScript是運行在瀏覽器端的腳本語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，須要插件)等。javascript
前端三大塊：
一、HTML：頁面結構
二、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
三、JavaScript：頁面行爲：部分動畫效果、頁面與用戶的交互、頁面功能css
JavaScript嵌入頁面的方式
一、內聯JShtml
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="submit" value="點擊收祝福" onclick="alert('老師你真好！');"> 9 </body> 10 </html>
二、頁面script標籤嵌入前端
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a="老師你真好"; 8 alert(a); 9 10 11 12 </script> 13 </head> 14 <body> 15 16 </body> 17 </html>
三、外部引入java
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js.js"></script> 7 8 </head> 9 <body> 10 11 </body> 12 </html>
javascript語句與註釋
1.一條javascript語句應該以「;」結尾小程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = "老師你真好！"; var b = "今每天氣還不錯啊！"; function fn(){ alert(a) }; fn(); </script>
</head>
<body>
2.js的特色與優點數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = "老師你真好！"; var b = "今每天氣還不錯啊！"; function fn(a){ alert(a) }; function fn(b){ alert(b) }; fn(b); fn(a); </script>
</head>
<body>
</body>
</html>
3.javascript註釋瀏覽器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a = "老師你真好！"; 8 // var b = "今每天氣還不錯啊！"; 單行註釋 9 /* function fn(){ 10 11 alert(a) 12 };多行註釋*/ 13 14 15 fn(); 16 17 18 </script> 19 20 </head> 21 <body> 22 23 </body> 24 </html>
變量
JavaScript 是一種弱類型語言（變量類型由值決定），javascript的變量類型由它的值來決定。 定義變量須要用關鍵字 'var'app
var a = 123; var b = 'asd'; //同時定義多個變量能夠用","隔開，公用一個‘var’關鍵字 var c = 45,d='qwe',f='68';
變量類型ide
5種基本數據類型：
number、string、boolean、undefined、null
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a= 123; 8 var b= "你好"; 9 var c= true; 10 var d; 11 12 alert(d); 13 14 </script> 15 </head> 16 <body> 17 18 </body> 19 </html>
1種複合類型：
object
變量、函數、屬性、函數參數命名規範
一、區分大小寫
二、第一個字符必須是字母、下劃線（_）或者美圓符號（$）
三、其餘字符能夠是字母、下劃線、美圓符或數字
獲取元素方法一
可使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素，獲取到的是一個html對象，而後將它賦值給一個變量，好比：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 document.getElementById("box").title="哈哈，我把標題給改了。" 9 10 11 </script> 12 </head> 13 <body> 14 <div id="box" title="我是標題">我是一個div標籤</div> 15 </body> 16 </html>
由於瀏覽器執行代碼渲染的時候是從上往下依次執行的，由於JS放在了頭部裏，因此瀏覽器執行到JS這裏的時候，找不到ID爲box的那個標籤了，因此會報錯。
解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <body> 9 <div id="box" title="我是標題">我是一個div標籤</div> 10 11 12 13 14 <script> 15 16 document.getElementById("box").title="哈哈，我把標題給改了。" 17 18 19 </script> 20 </body> 21 </html>
第二種方法：將javascript語句放到window.onload觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行，就不會出錯了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 document.getElementById("box").title="哈哈，我把標題給改了。" 12 13 14 15 16 17 } 18 19 20 </script> 21 </head> 22 <body> 23 <div id="box" title="我是標題">我是一個div標籤</div> 24 25 26 27 28 29 </body> 30 </html>
操做元素屬性
獲取的頁面元素，就能夠對頁面元素的屬性進行操做，屬性的操做包括屬性的讀和寫。
操做屬性的方法
一、「.」 操做
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 12 document.getElementById("link").href="http://www.baidu.com" 13 14 15 16 17 18 } 19 20 21 </script> 22 </head> 23 <body> 24 25 26 <a href="#" id="link">百度</a> 27 28 29 30 31 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 12 document.getElementById("link").href="http://www.baidu.com" 13 document.getElementById("link").title="這是一個百度的網址跳轉" 14 15 16 17 18 19 } 20 21 22 </script> 23 </head> 24 <body> 25 26 27 <a href="#" id="link">百度</a> 28 29 30 31 32 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oA = document.getElementById("link"); 11 12 oA.href="http://www.baidu.com" 13 oA.title="這是一個百度的網址跳轉" 14 15 16 } 17 18 19 </script> 20 </head> 21 <body> 22 23 <a href="#" id="link">百度</a> 24 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oA = document.getElementById("link"); 11 12 oA.href="http://www.baidu.com" 13 oA.title="這是一個百度的網址跳轉" 14 15 alert(oA.id); 16 alert(oA.href); 17 18 19 20 } 21 22 23 </script> 24 </head> 25 <body> 26 27 28 <a href="#" id="link">百度</a> 29 30 31 32 33 34 </body> 35 </html>
注意：
等於號右邊必定要寫上引號，若是不寫引號的話JS會認爲這個東西是一個變量，可是這個變量又沒有賦值，會致使出錯；若是加上引號以後JS纔會知道我寫的這個東西是一個值。
二、「[ ]」操做（因爲輸入變量）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 9 10 11 </style> 12 13 <script> 14 15 window.onload = function(){ 16 17 18 var oA = document.getElementById("div1"); 19 20 var haha = "background"; 21 22 23 oA.style[haha] = "red"; 24 25 26 27 28 } 29 30 31 32 </script> 33 </head> 34 <body> 35 <div id="div1">春天啊你在哪裏</div> 36 </body> 37 </html>
屬性寫法
一、html的屬性和js裏面屬性寫法同樣
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="beijing"> 7 <script> 8 9 var oA = document.getElementById("beijing"); 10 oA.href = "2.css" 11 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
二、「class」 屬性寫成 「className」
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 } 13 14 15 .box2{ 16 width: 300px; 17 height: 300px; 18 background-color: green; 19 } 20 21 22 </style> 23 24 <script> 25 26 window.onload = function(){ 27 28 29 var oA = document.getElementById("div1"); 30 oA.className = "box2"; 31 32 33 34 35 } 36 37 38 39 </script> 40 </head> 41 <body> 42 <div id="div1" class="box1"></div> 43 </body> 44 </html>
三、「style」 屬性裏面的屬性，有橫槓的改爲駝峯式，好比：「font-size」，改爲」style.fontSize」
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("div1"); 10 oDiv.style.color = "red"; 11 oDiv.style.backgroundColor = "gold"; 12 oDiv.style.fontSize = "30px"; //有-的標籤必定要刪除首字母改爲大寫 13 14 } 15 16 17 </script> 18 </head> 19 <body> 20 <div id="div1">我是一個div</div> 21 </body> 22 </html>
innerHTML
innerHTML能夠讀取或者寫入標籤包裹的內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 var oDiv1 = document.getElementById("div1"); 9 oDiv1.innerHTML = "我是憑空變出來的"; 10 11 12 } 13 </script> 14 </head> 15 <body> 16 <div id="div1"></div> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 var oDiv1 = document.getElementById("div1"); 9 oDiv1.innerHTML = "我是憑空變出來的"; 10 11 var oDiv2 = document.getElementById("div2"); 12 oDiv1.innerHTML = "<a href='http://www.baidu.com'>我是百度呀</a>"; 13 14 } 15 </script> 16 </head> 17 <body> 18 <div id="div1"></div> 19 <div id="div2"></div> 20 21 </body> 22 </html>
函數
函數就是重複執行的代碼片。
函數定義與執行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 // 定義函數 9 function aa(){ 10 11 12 alert("今每天氣真不錯") 13 14 } 15 16 // 執行函數 17 aa(); 18 19 20 21 </script> 22 </head> 23 <body> 24 25 </body> 26 </html>
小案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="pifu"> 7 <script> 8 9 10 function aa(){ 11 12 var pifu = document.getElementById("pifu"); 13 pifu.href = "1.css" 14 15 16 } 17 18 function bb(){ 19 20 var pifu = document.getElementById("pifu"); 21 pifu.href = "2.css" 22 23 24 } 25 26 27 28 29 30 </script> 31 </head> 32 <body> 33 <input type="button" value="換膚1" onclick="aa()"> 34 <input type="button" value="換膚2" onclick="bb()"> 35 </body> 36 </html>
小案例：
將背景換膚中的代碼從HTML中提取出來
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="pifu"> 7 <script> 8 9 10 11 window.onload = function(){ 12 13 var oBtn1 = document.getElementById("anniu1"); 14 var oBtn2 = document.getElementById("anniu2"); 15 16 oBtn1.onclick = aa; //此處這個aa不用寫(),()表明當即執行 17 oBtn2.onclick = bb; 18 19 } 20 21 22 23 function aa(){ 24 25 var pifu = document.getElementById("pifu"); 26 pifu.href = "1.css" 27 28 29 } 30 31 function bb(){ 32 33 var pifu = document.getElementById("pifu"); 34 pifu.href = "2.css" 35 36 37 } 38 39 40 41 42 43 </script> 44 </head> 45 <body> 46 <input type="button" value="換膚1" id="anniu1"> 47 <input type="button" value="換膚2" id="anniu2"> 48 </body> 49 </html>
變量與函數預解析
JavaScript解析過程分爲兩個階段，先是編譯階段，而後執行階段，在編譯階段會將function定義的函數提早，而且將var定義的變量聲明提早，將它賦值爲undefined。
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = 123345; alert(a); </script>
</head>
<body>
</body>
</html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 // 會報錯，undefind 9 alert(a); 10 var a = 123345; 11 12 13 </script> 14 </head> 15 <body> 16 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 var a; 9 10 a = 123345; 11 alert(a); 12 13 14 </script> 15 </head> 16 <body> 17 18 </body> 19 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 aa(); 9 function aa(){ 10 alert("我是一個函數"); 11 } 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
匿名函數
定義的函數能夠不給名稱，這個叫作匿名函數，能夠將匿名函數直接賦值給元素綁定的事件來完成匿名函數的調用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 oDiv.onclick = aa; 12 13 14 function aa(){ 15 16 17 18 19 alert("當心打雷閃電啊") 20 } 21 22 } 23 24 25 26 27 28 </script> 29 </head> 30 <body> 31 <div id="tianqi">今每天氣真不錯</div> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 oDiv.onclick = function(){ 12 13 14 15 16 alert("當心打雷閃電啊"); 17 } 18 19 20 21 22 } 23 24 25 26 27 28 </script> 29 </head> 30 <body> 31 <div id="tianqi">今每天氣真不錯</div> 32 </body> 33 </html>
函數傳參
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 function yangshi(aa){ 12 oDiv.style.color = aa; 13 } 14 15 16 yangshi("green"); 17 18 } 19 20 21 22 23 24 </script> 25 </head> 26 <body> 27 <div id="tianqi">今每天氣真不錯</div> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 function yangshi(styl,aa){ 12 oDiv.style[styl] = aa; 13 } 14 15 16 yangshi("background","green"); 17 yangshi("width","100px"); 18 yangshi("height","100px"); 19 20 21 } 22 23 24 25 26 27 </script> 28 </head> 29 <body> 30 <div id="tianqi">今每天氣真不錯</div> 31 </body> 32 </html>
小案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oInput01 = document.getElementById("input01"); 11 var oInput02 = document.getElementById("input02"); 12 var oBtn = document.getElementById("btn"); 13 14 15 16 // 寫入值： 17 // oInput01.value = 10; 18 // oInput02.value = 20; 19 20 oBtn.onclick =function(){ 21 var a = oInput01.value; 22 var b = oInput02.value; 23 var c = parseInt(a)+parseInt(b); 24 alert(c); 25 } 26 27 28 29 30 31 32 } 33 34 35 </script> 36 </head> 37 <body> 38 <input type="text" id="input01">+ 39 <input type="text" id="input02"> 40 <input type="button" value="等於" id="btn"> 41 42 </body> 43 </html>
條件語句
經過條件來控制程序的走向，就須要用到條件語句。
運算符
一、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
二、賦值運算符：=、 +=、 -=、 *=、 /=、 %=
三、條件運算符：==、===、>、>=、<、<=、!=、&&(並且)、||(或者)、!(否)
求餘（求模）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 var a = 30; 9 var b = 7; 10 var c = a % b; 11 alert(c); 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
if else （若是....不然.....）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> <script> window.onload = function(){ var oBtn = document.getElementById("input01"); var oDiv = document.getElementById("box"); oBtn.onclick = function(){ oDiv.style.display = "none"; } } </script> </head> <body> <input type="button" value="切換" id="input01"> <div id="box"></div> </body> </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 div{ 9 10 width: 200px; 11 height: 200px; 12 background-color: red; 13 } 14 15 16 17 </style> 18 19 20 <script> 21 window.onload = function(){ 22 23 24 var oBtn = document.getElementById("input01"); 25 var oDiv = document.getElementById("box"); 26 oBtn.onclick = function(){ 27 28 if(oDiv.style.display == "none"){ 29 oDiv.style.display = "block"; 30 31 } 32 33 else{ 34 oDiv.style.display = "none"; 35 } 36 37 } 38 } 39 40 41 </script> 42 </head> 43 <body> 44 <input type="button" value="切換" id="input01"> 45 <div id="box"></div> 46 </body> 47 </html>
if else的多重嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var today = 9; if(today == 1 ){ alert("你要補習語文"); } else if(today == 2){ alert("你要補習數學"); } else if(today == 3){ alert("你要補習英語"); } else if(today == 4){ alert("你要補習計算機"); } else if(today == 5){ alert("你要補習項目綜合"); } else{ alert("今天我就不補習了"); } </script>
</head>
<body>
</body>
</html>
switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var today = 9; switch(today){ case 1: alert("補習語文"); break; case 2: alert("補習數學"); break; case 3: alert("補習英語"); break; case 4: alert("補習網站綜合"); break; case 5: alert("補習計算機"); break; default: alert("算了，今天我仍是不補習了"); } </script>
</head>
<body>
</body>
</html>
數組及操做方法
數組就是一組數據的集合，javascript中，數組裏面的數據能夠是不一樣類型的。
建立數組的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第一種建立數組的方式
var aRr = new Array (1,2,3,'你好'); // 第二種建立數組的方式，開發中建議使用第二種建立數組
var aRr01 = [1,2,3,'你好']; </script>
</head>
<body>
</body>
</html>
操做數組中數據的方法
一、獲取數組的長度：aList.length;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第一種建立數組的方式
var aRr = new Array (1,2,3,'你好'); // 第二種建立數組的方式，開發中建議使用第二種建立數組
var aRr01 = [1,2,3,'你好',5]; alert(aRr.length); alert(aRr01.length); </script>
</head>
<body>
</body>
</html>
二、獲取數組某個位置上的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第二種建立數組的方式，開發中建議使用第二種建立數組
var aRr01 = [1,2,3,'你好']; alert(aRr01[3]); </script>
</head>
<body>
</body>
</html>