JavaScript基礎使用

JavaScript簡介

JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言。是一種屬於網絡的高級腳本語言,已經被廣泛用於Web應用開發,常用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

組成部分：
ECMAScript：描述了該語言的語法和基本對象。
文檔對象模型（DOM）：描述處理網頁內容的方法和接口。
瀏覽器對象模型（BOM）：描述與瀏覽器進行交互的方法和接口。

ECMAScript

入門程序

三種輸出顯示方式：
1、alert();彈窗輸出顯示
2、document.write();頁面輸出顯示
3、console.log();控制檯輸出顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>javascrit入門</title>
	</head>
	<body>
        <script type="text/javascript">
            //alert("hello world");//彈出窗口顯示
            document.write("hello world");//頁面中顯示
            console.log("hello world");//控制檯顯示
        </script>
     </body>
</html>

JavaScript中的註釋有兩種：

單行註釋//
多行註釋/* ... */

JavaScript的三種使用方式

第一種方式：在script標籤中，script可以放在網頁中任何位置。

<script type="text/javascript">
  	var num=10;
	var d=new Date();
	document.write(num);
</script>

第二種方式：使用外部JavaScript文件，把js代碼放入單獨的文件中，這個文件的擴展名.js，原則上放body底部，流式加載失敗不會影響網頁展示樣式，讓頁面樣式先加載提高頁面打開速度。

<script type="text/javascript" src="js/myjs.js"></script>

第三種方式：放在標籤中的事件屬性中,常見事件 ,onclick，一般用於簡單的事件

<input type="button" value="我點我點我點" onclick="alert('好痛啊！')" />

變量聲明

在JavaScript中，任何變量都用var關鍵字來聲明，var是variable的縮寫。

var num; //聲明變量
num=10;//賦值

var s="zhangsan";//聲明的同時賦值

var是聲明關鍵字，語句以分號結尾，分號可以省略。

這裏值得注意的是，JavaScript中的關鍵字，不可以作爲變量名。就像在Java中你不可以寫"int int=1;"一樣。

JavaScript的關鍵字和保留字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

數據類型

基本數據類型

變量的基本類型有number、string、boolean、undefined、null五種。

定義數字Number類型

var a=1;

定義字符串string類型

var a="字符串";

定義布爾boolean類型

var a=false;

undefined類型：當一個變量未被初始化的時候，它的值爲undefined

var a;

在Java中，當一個變量未被初始化的時候，Java中是null或者基本數據類型的默認值。

null類型：當一個引用不存在時，它爲Null

引用（對象）類型

Object ，數組，自定義對象，function

創建引用類型對象：

    //創建對象
    var person = new Object();
    //動態添加類型
    person.name="jack";
    person.show = function(){
        document.write(this.name);
    }
    person.show();//jack
    document.write("<br />");
    var num = new Number(100);
    document.write(num);//100
    document.write("<br />");
    document.write(typeof(num));//object
    document.write("<br />");
    document.write(num instanceof Number);//true
    document.write("<br />");

創建自定義對象

function student(){
        this.stuNo;
        this.stuName;
        this.show=function(){
            document.write(this.stuNo+"----"+this.stuName);
        }
    }
    var stu = new student();
    stu.stuNo="001";
    stu.stuName="bom";
    stu.show();//001----bom

自定義對象json寫法：

    var stu2 = {id:'002',name:'binry',age:20};
    document.write(stu2.id+"----"+stu2.name+"----"+stu2.age);//002----binry----20

數組類型

js中的數組長度是動態不固定的，預先可設定長度，也可不設定長度
數組先定義再賦值

var cities=new Array(3);
cities[0]="jack";
cities[1]="bin";
cities[2]="booy";

數組直接定義賦值

var a=[1,2,3,4];

運算符

算術運算符

+、-、*、/、%、++、–

var a=1;
var b=2;
a+b;//相加
a-b;//相減
a*b;//相乘
a/b;//相除
a%b;//求餘

a++;//自增
b--;//自減
//上述規則和Java一樣。

賦值運算符

=、+=、-=、/=、*=、%=

var a=10;
var b=20;
a=b;//賦值
a+=b;//相加後賦值
a-=b;//相減後賦值
a/=b;//相除後賦值
a*=b;//相乘後賦值
a%=b;//求餘後賦值

邏輯運算符

與、或、非

&&、||、!

對於真假的boolean值可以進行三種邏輯命題的運算。

var a=false;
var b=true;
//非的邏輯
//!a->true;
//!b->false;
//與的邏輯
//a&&a->false;
//a&&b->false;
//b&&a->false;
//b&&b->true;
//或的邏輯
//a||a->false;
//a||b->true;
//b||a->true;
//b||b->true;

關係運算符

==相等

<小於

<=小於或等於

>大於

>=大於或等於

!=不等於

===全相等

var a=1;
var b=2;
//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false
//這裏三個等於“===”和兩個等於“==”區別：
//前者相當於比較兩個引用，後者相當於比較兩個值。
//當比較兩個值得時候，不考慮數據類型。
//也就是說1=="1"是true的。

字符串連接運算符

三目運算符

分支結構

if-else

if(true){    
}else{
}

1 if(條件表達式) 關係運算符邏輯運算符
2 if(變量) 直接寫變量，不用運算符，如果變量值爲undefined,null 表示false，否則true
3 如果變量沒有定義,則出現異常。

switch

switch(定值){
  case 1:
    break;
  case n:
    break;
  default:
     ;
}

循環結構

for循環

var a=0;
for(var i=0;i<=10;i++){
    a+=i;
}

while循環

var a=0;
var i=1;
while(i<=10){
   a+=i;
   i++;
}

do…while循環

var a=0;
var i=1;
do{
    a+=i;
  	i++;
}while(i<=10);

break與continue

可以使用break結束循環，用continue來結束本次循環。

增強for循環
注意： i不是arr中的元素，而是下標

for(var i in arr){
}

函數和事件

函數

包含一段功能的代碼。目的：重複使用

函數定義
用function關鍵字來聲明，後面是函數名字，參數列表裏不寫var。整個方法不寫返回值類型。

function functionName(parameters){
    //執行的代碼
}

匿名函數

var method1=function(){
document.write("這是一個匿名函數");
}
method1();

自執行匿名函數

(function(s){
document.write("這是一個自執行匿名函數"+s);
})("hahaha");

全局變量和局部變量

函數內部聲明的變量是局部變量,所以只能在函數內部訪問它。
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它

閉包（Closure）

閉包就是能夠讀取其他函數內部局部變量的函數; 閉包可以理解成“定義在一個函數內部的函數“。

閉包三個條件：
1、閉包是一個內部函數
2、閉包能夠讀取其他（外部）函數的局部變量
3、閉包和局部變量在同一個作用域。

使用形式：
1、閉包作爲函數的返回值；
2、閉包作爲函數的參數。

閉包好處：
1、使局部變量常駐內存，
2、避免污染全局變量
3、提高封裝性保護局部變量

系統函數

提示框 alert();

alert("HelloWord");

alert方法沒有返回值，也就是說如果用一個變量去接受返回值，將會得到undefined。無論你點擊“確定”還是右上角的那個“X“關閉。

確認框 confirm();
這是一個你可以點擊確定或者取消的彈窗

confirm("HelloWord");

confirm方法與alert不同，他的返回值是boolean，當你點擊“確定”時，返回true，無論你點擊“取消”還是右上角的那個“X“關閉，都返回false。

輸入框 prompt()

這是一個你可以輸入文本內容的彈窗

prompt("helloworld","hello");

第一個參數是提示信息，第二個參數是用戶輸入的默認值。

其他系統函數

parseInt(); 字符串轉換整數
parseFloat(); 字符串轉成小數
isNaN(); 判斷數字是不是不是一個數字。

事件

事件	描述
onchange	HTML 元素內容改變(離開光標觸發)
onclick	用戶點擊 HTML 元素
onmouseover	光標移動到HTML元素
onmouseout	光標離開HTML元素
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載
onsubmit	提交表單時執行的事件

正則表達式

正則表達式 Regular Expression ，是描述字符模式的對象。
正則表達式用於對字符串模式匹配及檢索替換，是對字符串執行模式匹配的強大工具。

語法：

var patt=new RegExp(pattern,modifiers);

或者更簡單的方式:

var patt=/pattern/modifiers;

如：

var re1 = new RegExp("^1[3589]\\d{9}$");
var re2 = /^1[3589]\d{9}$/;

修飾符

修飾符用於執行區分大小寫和全局匹配:

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m	執行多行匹配。

方括號

方括號用於查找某個範圍內的字符：

表達式	描述
[abc]	查找方括號之間的任何字符。
[^abc]	查找任何不在方括號之間的字符。
[0-9]	查找任何從 0 至 9 的數字。
[a-z]	查找任何從小寫 a 到小寫 z 的字符。
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符。
[A-z]	查找任何從大寫 A 到小寫 z 的字符。
(red\|blue\|green)	查找任何指定的選項。

元字符

元字符（Metacharacter）是擁有特殊含義的字符：

元字符	描述
.	查找單個字符，除了換行和行結束符。
\w	查找單詞字符。[a-zA-Z0-9_]
\W	查找非單詞字符。
\d	查找數字。[0-9]
\D	查找非數字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配單詞邊界。

量詞

量詞	描述
n+	匹配任何包含至少一個 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零個或多個 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零個或一個 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 個 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的兩個 “a”，且匹配 “caaandy.” 中的前兩個 “a”。
n{X,}	X 是一個正整數。前面的模式 n 連續出現至少 X 次時匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 爲正整數。前面的模式 n 連續出現至少 X 次，至多 Y 次時匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的兩個 “a”，匹配 “caaaaaaandy” 中的前面三個 “a”。注意，當匹配 “caaaaaaandy” 時，即使原始字符串擁有更多的 “a”，匹配項也是 “aaa”。
n$	匹配任何結尾爲 n 的字符串。
^n	匹配任何開頭爲 n 的字符串。

RegExp 對象方法

方法	描述	FF	IE
exec	檢索字符串中指定的值。返回找到的值，並確定其位置。	1	4
test	檢索字符串中指定的值。返回 true 或 false。	1	4

支持正則表達式的 String 對象的方法

方法	描述	FF	IE
match	找到一個或多個正則表達式的匹配。	1	4
replace	替換與正則表達式匹配的子串。	1	4
split	把字符串分割爲字符串數組。	1	4

正則表達式的使用

test()方法：

test()方法搜索字符串指定的值，根據結果並返回真或假。

var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true

exec() 方法：

exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配，則返回 null。

var reg=/java/ig;
var str="hello java,java是最好的編程語言，我愛Java";
var s=null;
while(s=reg.exec(str)){
  document.write(s);
  document.write("<br/>")
}

字符串match()方法

var reg=/java/ig;
var str="hello java,java是最後的語言，我愛Java";
var arr=str.match(reg);
for(var i=0;i<arr.length;i++){
	document.write(arr[i]+"<br/>");
}

字符串replace()方法

var reg=/java/ig;
var str="hello java,java是最後的語言，我愛Java";
var str2=str.replace(reg,"JAVA");
document.write(str2+"<br/>");

字符串split()方法

var str="hello world,java best language";
var arr=str.split(/[ ,]/);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}

DOM

DOM概述

通過 HTML DOM,使用 JavaScript訪問 HTML 文檔的所有元素。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹：

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素。
JavaScript 能夠改變頁面中的所有 HTML 屬性。
JavaScript 能夠改變頁面中的所有 CSS 樣式。
JavaScript 能夠對頁面中的所有事件做出反應。

獲取HTML元素

通常，通過 JavaScript三種方法獲取HTML元素進行操作。通過id找到的是對象，可以直接修改操作，通過class和標籤名找到的是集合對象，需要遍歷修改
方法一：id找到HTML元素
在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。
示例：

var x=document.getElementById("intro");

如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null。

方法二：標籤名找到 HTML 元素

var y=x.getElementsByTagName("p");

方法三：類名找到HTML 元素

var x=document.getElementsByClassName("intro");

修改HTML
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML="abcd";
document.getElementById(id).innerText="xxxx";

改變HTML屬性

改變 HTML 元素的屬性值：

document.getElementById(id).attribute=新屬性值

修改CSS樣式

修改 HTML 元素的樣式：

document.getElementById(id).style.property=新樣式

創建新元素
添加新元素，必須首先創建該元素（元素節點），然後向一個已存在的元素追加該元素。
創建元素並追加內容

var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
//找到id並添加進去
var element=document.getElementById("div1");
element.appendChild(para);

刪除已有的 HTML 元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

DOM事件

HTML DOM 允許我們通過觸發事件來執行代碼。

比如以下事件：

元素被點擊。
頁面加載完成。
輸入框被修改。

示例：當用戶點擊按鈕時，改變文字顏色爲紅色

<h1 id="id1">myH1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
button</button>

示例：當用戶點擊按鈕時，改變文字內容

<h1 onclick="this.innerHTML='改變內容!'">點擊文本!</h1>

通過從事件處理器調用一個函數實現點擊事件

<script>
function changetext(id)
{
    id.innerHTML="改變內容!";
}
</script>
<h1 onclick="changetext(this)">點擊文本!</h1>

使用 JavaScript 來向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){
    document.getElementById("myhead2").style.color='blue';
};
</script>

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

<body onload="alert('頁面加載完畢')">

onchange 事件常結合對輸入字段的驗證來使用。

下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

EventListener

addEventListener() 方法

在用戶點擊按鈕時觸發監聽事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用於向指定元素添加事件句柄。添加的事件句柄不會覆蓋已存在的事件句柄。可以向一個元素添加多個事件句柄。

使用 removeEventListener() 方法來移除事件的監聽。

語法：

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 “click” 或 “mousedown”). 把on去掉

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

注意:不要使用 “on” 前綴。例如，使用 “click” ,而不是使用 “onclick”。

當用戶點擊元素時彈出 “Hello World!” :

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

事件冒泡或事件捕獲

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。如果你將 p元素插入到 div 元素中，用戶點擊 p 元素, 哪個元素的 “click” 事件先被觸發呢？

在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： p 元素的點擊事件先觸發，然後會觸發 div元素的點擊事件。

在捕獲中，外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： div元素的點擊事件先觸發，然後再觸發 p 元素的點擊事件。

addEventListener() 方法可以指定 “useCapture” 參數來設置傳遞類型：

addEventListener(event, function, useCapture);

默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

BOM

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。
瀏覽器對象模型 (BOM):(Browser Object Model)尚無正式標準。
由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認爲是 BOM 的方法和屬性。

window

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

window.document.getElementById("header");

與此相同：

document.getElementById("header");

window尺寸

有三種方法能夠確定瀏覽器窗口的尺寸。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度(不包括滾動條、菜單欄、工具欄)
window.innerWidth - 瀏覽器窗口的內部寬度(不包括滾動條、菜單欄、工具欄)

對於 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

window方法

window.open() - 打開新窗口
window.close() - 關閉當前窗口

screen

可用寬度：screen.availWidth 屬性返回訪問者屏幕的寬度(像素)，減去界面特性，比如窗口任務欄。

document.write("可用寬度: " + screen.availWidth);

可用高度：screen.availHeight 屬性返回訪問者屏幕的高度

document.write("可用高度: " + screen.availHeight);

location

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

- location.href 屬性返回當前頁面的 URL。
- location.hostname 返回 web 主機的域名
- location.pathname 返回當前頁面的路徑和文件名
- location.port 返回 web 主機的端口 （80 或 443）
- location.protocol 返回所使用的 web 協議（http:// 或 https://）

location.assign() 方法加載新的文檔。

<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
<input type="button" value="Load new document" onclick="newDoc()">

history

window.history 對象包含瀏覽器的歷史
history.back() 與在瀏覽器點擊後退按鈕相同

<script>
function goBack()
  {
  window.history.back()
  }
</script>
<input type="button" value="Back" onclick="goBack()">

history.forward() 與在瀏覽器中點擊按鈕向前相同

<script>
function goForward()
  {
  window.history.forward()
  }
</script>
<input type="button" value="Forward" onclick="goForward()">