一、js的簡介

        js(JavaScript的縮寫) 是 Web 指令碼語言，可用於 HTML 和 web。可在web中增加設計效果，校驗表單，辨別瀏覽器，建立cookies等，可適用不同的主流瀏覽器。

二、js的基礎知識

1.js的引入html的兩種方式

(1).直接寫在html中，要寫在<script> 與 </script> 標籤之間。

可寫在head中，確保函式被呼叫前已經載入完成
也可寫在body中，指令碼將伴隨著頁面一起載入

(2).也可以把指令碼儲存到外部檔案中。通常被多個網頁使用的程式碼。

2.js的語言基礎

(1).變數

JavaScript 使用關鍵字 var 來定義變數， 使用等號來為變數賦值。
如：var x=5;           (須以字母或$ 和 _ 符號開頭，大小寫敏感)
 

(2).資料型別

6種;String、Number、Boolean、Object、Null、Undefined

typeof返回的是字串有六種可能:"number","string","boolean","object","function","undefined"
var x;               // x 為 undefined
var x = 5;           //  x 為數字
var x = "John";      // x 為字串
var x = null;   // x 為null  ，表示一個空物件引用
var x = “true”;   // x 為Boolean

1).js的陣列

建立陣列：
var myCars=new Array();  myCars[0]="Saab";    myCars[1]="Volvo";
var myCars=new Array("Saab","Volvo","BMW");
var myCars=["Saab","Volvo","BMW"];
訪問陣列：var name=myCars[0];  myCars[0]="Opel";
     所有的JavaScript變數都是物件。一個數組中可包含物件元素、函式、陣列.


常用的方法：
concat()合併陣列               reverse()反轉                         tostring()轉換成字串
push()末尾新增新元素     pop()刪除最後一個元素     shift()刪除第一個元素
         sort()排升序                         slice()擷取元素                      unshift()開頭新增新元素
join()用陣列的元素組成字串

2).js的物件

建立物件
var dog= {name : 'Tom', age : 21 , eat : function(){  }    }
 

3).字串

var dog= “shenmojiahuo”;           
dog[2]:取第三個元素,下標從0開始
var lenth= dog.lenth;      字串的長度
轉義字元 (\) 可以用於轉義撇號，換行，引號，等其他特殊字元。
字串常用的方法有：
方法                   描述
charAt() 返回指定索引位置的字元
valueOf() 返回某個字串物件的原始值

concat()                連線兩個或多個字串，返回連線後的字串

indexOf() 返回字串中檢索指定字元第一次出現的位置

lastIndexOf() 返回字串中檢索指定字元最後一次出現的位置

match()                找到一個或多個正則表示式的匹配

replace()                替換與正則表示式匹配的子串

search()                檢索與正則表示式相匹配的值

slice()                提取字串的片斷

split()               把字串分割為子字串陣列

substr()               從起始索引號提取字串中指定數目的字元

substring() 提取字串中兩個指定的索引號之間的字元

toLowerCase() 把字串轉換為小寫

toString() 返回字串物件值

toUpperCase() 把字串轉換為大寫

trim()                移除字串首尾空白

4).js的資料型別的轉換

    typeof 操作符，用來檢測變數的型別
typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
null與undefined的區別
null 和 underfined 的值相等，但型別不等：
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

  注意
NaN 的資料型別是 number
陣列(Array)的資料型別是 object
日期(Date)的資料型別為 object
js型別轉換的方法
String()  把其他型別轉換成字串，toString() 也是有同樣的效果
Number() 可以將字串，日期，boolean轉換為數字。
Date() 返回時間的字串。
自動轉換型別：
5 + null    // 返回 5         null 轉換為 0
"5" + null  // 返回"5null"   null 轉換為 "null"
"5" + 1     // 返回 "51"      1 轉換為 "1"  
"5" - 1     // 返回 4         "5" 轉換為 5

(3).js的運算子

+    -    *    /    %    ++    --   =    +=    -=    *=    /=    %=    >    <    >=    <= 
邏輯運算子 
&&    (x < 10 && y > 1) 為 true
||      (x==5 || y==5) 為 false
!        !(x==y) 為 true
條件運算子
variablename=(condition)?value1:value2 
比較
==      表示值相等即可
===    值和型別均要相等

(4).js的方法

方法的定義
function functionname(var1,var2){執行程式碼}
方法內部宣告的變數叫區域性變數，作用域在方法中
方法外部宣告的變數叫全域性變數
區域性變數在方法執行完畢後銷燬。
全域性變數在頁面關閉後銷燬。
var x = function (a, b) {return a * b};
var z = x(4, 3);

(5).js的事件

HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。


事件                              描述
onchange()            HTML 元素改變
onclick()            使用者點選 HTML 元素
onmouseover()            使用者在一個HTML元素上移動滑鼠
onmouseout ()            使用者從一個HTML元素上移開滑鼠
onkeydown()            使用者按下鍵盤按鍵
onload()            瀏覽器已完成頁面的載入

(6).js的語句

條件語句
if(){} 
if(){}else if(){}
switch(n){case 1: 語句1 break;  .......deafult:}
迴圈語句
for - 迴圈程式碼塊一定的次數
for/in - 迴圈遍歷物件的屬性
while - 當指定的條件為 true 時迴圈指定的程式碼塊
do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊
            break 語句用於跳出迴圈。continue 用於跳過一次迴圈。

(7).js的正則表示式

語法：/正則表示式主體/修飾符(可選); 例如：var patt = /runoob/i;
js中正則表示式通常用於兩個字串的方法：search()和replace()
search()用於檢測與正則表示式想匹配的值
replace()用於替換和正則表示式相匹配的值
var str = "wangjie goodman!"; 
var n = str.search(/good/i);   n的結果是8;
var txt = str.replace(/good/i,"bad");  則：txt是"wangjie badman!";
在 js中，RegExp 物件的方法。
test() 用於檢測一個字串是否匹配某個模式。
exec() 用於檢索字串中的正則表示式的匹配。返回一個數組，其中存放匹配的結果。未匹配，則返回null。
var patt = /e/;  
patt.test("The best things in life are free!");     結果為true
patt.exec("The best things in life are free!");    結果是“e”

(8).js的錯誤及除錯

錯誤的處理
try { //程式碼} catch(err) { //處理錯誤}
trow語句丟擲異常
除錯
console.log() //在控制檯列印
設定斷點
谷歌瀏覽器按F12鍵
惠而浦app開發的專案的除錯一般用gapdebug工具

(9).json

JSON 是用於儲存和傳輸資料的格式，是一個文字。
JSON 通常用於服務端向網頁傳遞資料 ，可被任何語言讀取及作為資料格式傳遞。。
一般格式：var sha={"sites":[
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}
var obj=JSON.parse(sha);  //把json轉換成js物件
JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字串。

 3.js的輸出

JavaScript 可以通過不同的方式來輸出資料：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文件中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制檯。

4.js的嚴格模式

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增，在 JavaScript 舊版本中會被忽略。
嚴格模式通過在指令碼或函式的頭部新增 "use strict"; 表示式來宣告。
嚴格模式下你不能使用未宣告的變數。
"use strict";
x = 3.14;       // 報錯 (x 未定義)

三、js的dom操作

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。通過 HTML DOM，可訪問 HTML 文件的所有元素。
訪問html元素的三種方式：
var x=document.getElementById("intro");//通過id
var x=document.getElementById("main");//通過標籤
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");//通過類名

1.如何改變html的內容 及屬性(innerHTML)？

（1）改變 HTML 內容

    document.getElementById(id).innerHTML=新的 HTML

（2）改變 HTML 屬性

    document.getElementById(id).attribute=新屬性值
                  document.getElementById("image").src="landscape.jpg";

2.如何改變 HTML 元素的樣式 (CSS)？

document.getElementById(id).style.property=新樣式;
 document.getElementById("p2").style.color="blue";
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
</button>
 

3.如何新增事件？

addEventListener()用於向指定元素新增事件控制代碼。removeEventListener() 移除
      例：document.getElementById("myBtn").addEventListener("click", displayDate);
語法：element.addEventListener(event, function, useCapture);
event：事件；如：mouseover、click、mouseout，無字首
function方法；
useCapture：布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
事件傳遞的兩種方式
冒泡：子元素的事件先觸發
捕獲：父元素的時間先觸發

4.如何增加和刪除html的元素？

建立新的html元素：

刪除html元素：

四、瀏覽器的Bom

瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

1.window物件

 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
window的尺寸：
 window.innerWidth 
 window.innerHeight 
window的方法：
window.open() - 開啟新視窗
window.close() - 關閉當前視窗
window.moveTo() - 移動當前視窗
window.resizeTo() - 調整當前視窗的尺寸

2.Window Screen

window.screen 物件包含有關使用者螢幕的資訊，可以直接用screen.
screen.availWidth - 可用的螢幕寬度
screen.availHeight - 可用的螢幕高度

3.Window Location

window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和檔名
location.port 返回 web 主機的埠 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
location.href 屬性返回當前頁面的 URL。
location.pathname 屬性返回 URL 的路徑名。
location.assign() 方法載入新的地址。

4.Window History

Window History包含瀏覽器的歷史。
history.back()：返回前一個 URL，與在瀏覽器點選後退按鈕相同
history.forward() - 載入歷史列表中的下一個 URL，與在瀏覽器中點選按鈕向前相同
 

5.Window Navigator 

window.navigator 物件包含有關訪問者瀏覽器的資訊。


瀏覽器代號:  navigator.appCodeName 
瀏覽器名稱:  navigator.appName 
瀏覽器版本:  navigator.appVersion 
啟用Cookies:  navigator.cookieEnabled 
硬體平臺:  navigator.platform  
使用者代理:  navigator.userAgent 
使用者代理語言:  navigator.systemLanguage 

6.Window 彈窗

alert():警告窗
confirm():確認窗
prompt:提示窗
 

7.js計時

setInterval() 和 setTimeout() 是 HTML DOM Window物件的兩個方法。
setInterval() - 間隔指定的毫秒數不停地執行指定的程式碼。
setTimeout() - 暫停指定的毫秒數後執行指定的程式碼
例：
setInterval(function(){alert("Hello")},3000);//每3秒彈出一次hello
clearInterval() 方法用於停止 setInterval() 方法執行的函式程式碼。
setTimeout(function(){alert("Hello")},3000);//3秒後彈出一次hello
clearTimeout() 方法用於停止執行setTimeout()方法的函式程式碼

獲取更多資料,進入QQ群:543592003