1.1JavaScript的概述

1.1.1什么是JavaScript

??JavaScript是web上一種功能強(qiáng)大的編程語(yǔ)言摹量，用于開發(fā)交互式的web頁(yè)面粪牲。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁(yè)面中，由瀏覽器執(zhí)行媚值。

• JavaScript 被設(shè)計(jì)用來(lái)向 HTML 頁(yè)面添加交互行為。
• JavaScript 是一種腳本語(yǔ)言（腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言）护糖。
• JavaScript 由數(shù)行可執(zhí)行計(jì)算機(jī)代碼組成褥芒。
• JavaScript 通常被直接嵌入 HTML 頁(yè)面。
• JavaScript 是一種解釋性語(yǔ)言（就是說(shuō)嫡良，代碼執(zhí)行不進(jìn)行預(yù)編譯）锰扶。
• JavaScript的組成：
  • 核心(ECMAScript)
    • ECMAScript：語(yǔ)法，語(yǔ)句.
  • 文檔對(duì)象模型(DOM)
    • BOM:瀏覽器對(duì)象
  • 瀏覽器對(duì)象模型(BOM)
    • DOM:Document Object Model.操作文檔中的元素和內(nèi)容.

1.1.2 JavaScript的作用

??使用JavaScript添加頁(yè)面動(dòng)畫效果寝受，提供用戶操作體驗(yàn)坷牛。主要應(yīng)用有：嵌入動(dòng)態(tài)文本于HTML頁(yè)面、對(duì)瀏覽器事件做出響應(yīng)很澄、讀寫HTML元素京闰、驗(yàn)證提交數(shù)據(jù)、檢測(cè)訪客的瀏覽器信息等痴怨。

1.1.3 JavaScript的引入

??在HTML文件中引入JavaScript有兩種方式忙干，一種是在HTML文檔直接嵌入JavaScript腳本器予，稱為內(nèi)嵌式浪藻，另一種是鏈接外部JavaScript腳本文件，稱為外聯(lián)式乾翔。對(duì)他們的具體講解如下：

• 內(nèi)嵌式爱葵，在HTML文檔中，通過<script>標(biāo)簽引入反浓，如下

<script type="text/javascript">
    //此處為JavaScript代碼
</script>

• 外聯(lián)式萌丈，在HTML文檔中，通過<script src=””>標(biāo)簽引入.js文件雷则，如下：

<script src="1.js" type="text/javascript" charset="utf-8"></script>

1.2 JavaScript語(yǔ)法及規(guī)則

??JavaScript的語(yǔ)法和Java的語(yǔ)法有很多相似之處辆雾，這里就進(jìn)行簡(jiǎn)明的介紹

1.2.1 注釋

-單行注釋

//
Hbuilder快捷鍵 ctrl+/

• 多行注釋

/* */
Hbuilder快捷鍵 ctrl+shift+/

1.2.2 變量

• 變量簡(jiǎn)述

  • 變量：標(biāo)示內(nèi)存中的一塊空間，用于存儲(chǔ)數(shù)據(jù)月劈，且數(shù)據(jù)是可變的度迂。
  • 變量的聲明：
    • var 變量名; //變量賦予默認(rèn)值，默認(rèn)值為undefined （未定義的）
  • 變量的聲明和賦值：
    • var 變量名=值; //變量賦予對(duì)應(yīng)的值
  • 在聲明JavaScript變量時(shí)猜揪，需要遵循以下命名規(guī)范：
    • 必須以字母或下劃線開頭惭墓，中間可以是數(shù)字、字符或下劃線
    • 變量名不能包含空格等符號(hào)
    • 不能使用JavaScript關(guān)鍵字作為變量名而姐，如：function腊凶、this、class
    • JavaScript嚴(yán)格區(qū)分大小寫。

• 基本數(shù)據(jù)類型

  • 類似于java中的基本數(shù)據(jù)類型
    • string 字符串類型钧萍『植””和’’都是字符串。 JavaScript中沒有單個(gè)字符
    • boolean 布爾類型划煮。 固定值為true和false
    • number 數(shù)字類型送丰。 任意數(shù)字
    • null 空，一個(gè)占位符弛秋。
    • undefined 未定義類型器躏，該類型只有一個(gè)固定值，即undefined蟹略，表示變量聲明卻未 定義具體的值登失。
    • 注：因?yàn)閡ndefined是從null中派生出來(lái)的，所以u(píng)ndefined==null
  • JavaScript區(qū)別于java挖炬，是弱類型語(yǔ)言揽浙，變量的使用不用嚴(yán)格遵循規(guī)范，所以一個(gè)變量聲明好之后意敛，是可以賦予任意類型的值
  • 通過typeof運(yùn)算符可以分辨變量值屬于哪種基本數(shù)據(jù)類型

• 引用數(shù)據(jù)類型

  • 引用類型通常叫做類（class）馅巷，但在JavaScript中，因?yàn)椴淮嬖诰幾g過程草姻，所以沒有類的概念钓猬，所處理的引用數(shù)據(jù)類型都是對(duì)象。
  • 標(biāo)準(zhǔn)創(chuàng)建方式：
    • var str = new String();//和java相同
    • var str = new String; //js獨(dú)有的方式

1.2.3 運(yùn)算符

• 這里就列舉與Java中不同的

• 比較運(yùn)算符

  • == 表示值相等
  • === 表示值相等且數(shù)據(jù)類型相等
  • "10" 和 10 == 為true === 返回 false

• 邏輯運(yùn)算符

  • 有 && || 撩独！
  • 沒有 & |

1.2.4正則對(duì)象

• RegExp對(duì)象的創(chuàng)建方式

  • var reg = new RegExp("表達(dá)式"); （開發(fā)中基本不用）
  • var reg = /^表達(dá)式$/; 直接量（開發(fā)中常用）
  • 直接量中存在邊界敞曹，即^代表開始，$代表結(jié)束
  • 直接量方式的正則是對(duì)象综膀，不是字符串澳迫，別用引號(hào)

• test方法

  • 正則對(duì)象.test(string);
    • 用來(lái)校驗(yàn)字符串是否匹配正則。
    • 全部字符匹配返回true剧劝；有字符不匹配返回false

• 正則對(duì)象使用注意事項(xiàng)

  • /^表達(dá)式$/
    • 只要有無(wú)法成立正則的字符存在橄登，即為false。
    • 全部符合為true（檢查嚴(yán)格讥此，眼睛不揉沙子）
    • 適用于表單校驗(yàn)
  • /表達(dá)式/
    • 只要有成立正則的字符存在拢锹，即為true。
    • 全部不符合為false（檢查不嚴(yán)格暂论，懶人思想）
    • 適用于字符串查找面褐、替換

1.2.5 JS數(shù)組對(duì)象

• JS 數(shù)組的特性
  • JS數(shù)組可以看做 Java中的ArrayList 集合。
    • 數(shù)組中的每一個(gè)成員沒有類型限制取胎，及可以存放任意類型
    • 數(shù)組的長(zhǎng)度可以自動(dòng)修改
• JS 數(shù)組的四種創(chuàng)建方式
  • var arr = [1,2,3,”a”,true]; //常用的JS數(shù)組展哭。 長(zhǎng)度5
  • var arr = new Array();創(chuàng)建一個(gè)數(shù)組對(duì)象湃窍，數(shù)組長(zhǎng)度默認(rèn)為0
  • var arr = new Array(4);
    • 數(shù)組長(zhǎng)度是4，相當(dāng)于開辟了長(zhǎng)度為4的空間匪傍，每個(gè)元素是undefined您市。（僅在顯示數(shù)組時(shí)進(jìn)行處理，undefined為了方便顯示變成了空字符串形式役衡，其值本質(zhì)仍然是undefined）
  • var arr = new Array(“a”,”b”,true); //創(chuàng)建了一個(gè)數(shù)組茵休，長(zhǎng)度3, 數(shù)組元素是”a”,”b”,true
• JS 數(shù)組的常用屬性/方法

物理翻轉(zhuǎn)：就是把元素下標(biāo)進(jìn)行互換

1.2.6全局函數(shù)（global）

• 執(zhí)行
  • eval() 計(jì)算JAVAScript字符串并把它作為腳步來(lái)執(zhí)行
  • 作用：用于增強(qiáng)程序的擴(kuò)展性。
  • 只可以傳遞原始數(shù)據(jù)類型string邮辽，傳遞String對(duì)象無(wú)作用唠雕。
• 編碼和解碼
  • encodeURI() 把字符串編碼為URI
  • decodeURL() 解碼某個(gè)編碼的URI
  • URL/URI編碼：中文及特殊符號(hào) %16進(jìn)制
  • 作用：保證數(shù)據(jù)傳遞的完整性。
• URI和URL的區(qū)別
  • URI是統(tǒng)一資源標(biāo)識(shí)符吨述。 標(biāo)識(shí)資源詳細(xì)名稱岩睁。
  • URL是統(tǒng)一資源定位器。 定位資源的網(wǎng)絡(luò)位置揣云。
  • 資源：可以通過瀏覽器訪問的信息統(tǒng)統(tǒng)稱為資源捕儒。（圖片、文本灵再、HTML肋层、CSS等等亿笤。翎迁。。净薛。）
  • URI標(biāo)識(shí)資源的詳細(xì)名稱汪榔，包含資源名。
  • URL定位資源的網(wǎng)絡(luò)位置肃拜。包含http://

http://www.itcast.cn/           是URL
/a.html                     是URI
http://www.itcast.cn/a.html     既是URL痴腌，也是URI

• 字符串轉(zhuǎn)數(shù)字

  • parseInt(string);

    • string按照字面值轉(zhuǎn)換為整數(shù)類型，小數(shù)點(diǎn)后面部分不關(guān)注燃领。

  • parseFloat(string);

    • string按照字面值轉(zhuǎn)換為小數(shù)類型士聪。

  • 注意事項(xiàng)

    • 如果字符串的某個(gè)字符從字面值上無(wú)法轉(zhuǎn)為數(shù)字，那么從該字符開始停止轉(zhuǎn)換猛蔽，僅返回前面正確的轉(zhuǎn)換值剥悟。（例如：11.5a55灵寺，parseInt結(jié)果11，parseFloat結(jié)果11.5）
    • 如果字符串的第一個(gè)字符就無(wú)法從字面值上轉(zhuǎn)為數(shù)字区岗，那么停止轉(zhuǎn)換略板，返回NaN：
      NaN（Not A Number，一個(gè)數(shù)字類型的標(biāo)識(shí)慈缔，表示不是一個(gè)正確的數(shù)字）

1.2.7 自定義函數(shù)/自定義方法

• 函數(shù)簡(jiǎn)述及作用
  • 如果一段代碼需要被重復(fù)編寫使用叮称，那么我們?yōu)榱朔奖憬y(tǒng)一編寫使用，可以將其封裝進(jìn)一個(gè)函數(shù)（方法）中藐鹤。
  • 作用：增強(qiáng)代碼的復(fù)用性
• 函數(shù)格式
  • JavaScript函數(shù)定義必須用小寫的function瓤檐；
  • JavaScript函數(shù)無(wú)需定義返回值類型，直接在function后面書寫 方法名娱节；
  • 參數(shù)的定義無(wú)需使用var關(guān)鍵字距帅，否則報(bào)錯(cuò)；
  • JavaScript函數(shù)體中括堤，return可以不寫碌秸，也可以return 具體值，或者僅僅寫return悄窃；

function 方法名(參數(shù)列表){
    函數(shù)體
}

• 函數(shù)使用的注意事項(xiàng)
  • JavaScript函數(shù)調(diào)用執(zhí)行完畢一定有返回值讥电，值及類型根據(jù)return決定，如果未return具體值轧抗，返回值為undefined恩敌；
  • JavaScript函數(shù)若同名，則不存在方法重載横媚，只有方法相互覆蓋纠炮，最后定義的函數(shù)覆蓋之前的定義；
  • 因?yàn)镴avaScript不存在函數(shù)重載灯蝴，所以JavaScript僅根據(jù)方法名來(lái)調(diào)用函數(shù)恢口，即使實(shí)參與函數(shù)的形參不匹配，也不會(huì)影響正常調(diào)用穷躁；如果形參未賦值耕肩，就使用默認(rèn)值undefined

1.2.8 自定義對(duì)象（擴(kuò)展）

• function 構(gòu)造函數(shù)
  • 我們知道，JavaScript中的引用數(shù)據(jù)類型都是對(duì)象问潭，而對(duì)象在JavaScript中可以用函數(shù)來(lái)表示猿诸。相當(dāng)于java中創(chuàng)建某個(gè)class類

無(wú)參格式
    function 對(duì)象名(){
        函數(shù)體
    }
    

function Person(){
    alert("hahah")
}

var p = new Person();

帶參數(shù)格式
    function 對(duì)象名(參數(shù)列表){
        函數(shù)體
    }

function Person(a,b){
    alert(a + "--" + b);
}

var p = new Person(1,2);

有屬性格式：
    function 對(duì)象名(){
        this.屬性名1=屬性值1;
        this.屬性名2=屬性值2;
        …….
}
this表示當(dāng)前對(duì)象隙弛。

function Person(){
    this.name = "小米";
    this.age = 18;
}

function Student(a,b){
    this.name = a;
    this.age = b
}

function Person(){
    
}

var p = new Person();
p.name = "aa";
p.age = 16;

應(yīng)用場(chǎng)景：適用于對(duì)象構(gòu)建及代碼復(fù)用文虏。

• 對(duì)象直接量
  • 開發(fā)中可以用一種簡(jiǎn)單的方式直接創(chuàng)建自定義的JavaScript對(duì)象昆庇，這種方式稱為“對(duì)象直接量”槐雾。

格式：
    var 對(duì)象名 = {屬性名1:”屬性值1”, 屬性名2:”屬性值2”, 屬性名3:”屬性值3”……};

注：該方式直接創(chuàng)建出實(shí)例對(duì)象钓瞭，無(wú)需構(gòu)建函數(shù)迂尝，無(wú)需再new創(chuàng)建實(shí)例對(duì)象浅辙，直接使用即可

var p = {name:"小米",age:18}

應(yīng)用場(chǎng)景：適用于快速創(chuàng)建實(shí)例對(duì)象及數(shù)據(jù)封裝裕菠。

1.3 BOM對(duì)象

1.3.1 BOM對(duì)象簡(jiǎn)述

• BOM（Browser Object Model）瀏覽器對(duì)象模型

  • 瀏覽器：IE、火狐竖螃、谷歌等
  • 作用：用來(lái)執(zhí)行瀏覽器的相關(guān)操作淑廊。（例如：瀏覽器的地址、彈出消息等）

• window對(duì)象是JavaScript的內(nèi)置對(duì)象特咆，使用window對(duì)象調(diào)用方法時(shí)可以省略window不寫季惩。

1.3.2 BOM ：Window對(duì)象

• 方法：定時(shí)器

• 定時(shí)器的案例
  • 循環(huán)定時(shí)器的啟動(dòng)和取消
  • 啟動(dòng)循環(huán)定時(shí)器-setInterval()
    循環(huán)定時(shí)器腻格，調(diào)用一次就會(huì)創(chuàng)建并循環(huán)執(zhí)行一個(gè)定時(shí)器画拾。

格式
    setInterval(調(diào)用方法,毫秒值);
    //毫秒值：  循環(huán)周期

function run1(){
    alert("我是run1");
}
//執(zhí)行下句后，每隔1秒就會(huì)調(diào)用一次run1方法
setlnterval("run1()",1000)

• 停止循環(huán)定時(shí)器-clearInterval()

  • etInterval方法在創(chuàng)建一個(gè)定時(shí)器的同時(shí)菜职，還會(huì)返回一個(gè)的定時(shí)器的ID青抛，該ID就代表這個(gè)定時(shí)器。
    此定時(shí)器ID在當(dāng)前頁(yè)面是不重復(fù)的酬核。

  • 我們可以通過clearInterval方法蜜另，指定某個(gè)循環(huán)定時(shí)器 停止

格式：
    clearInterval(定時(shí)器ID);

function run1(){
    alert("我是run1");
}
//設(shè)置一個(gè)定時(shí)器，定時(shí)器ID保存在變量i中
var i = setlnterval("run1()",1000);
//取消這個(gè)ID對(duì)應(yīng)的定時(shí)器
clearInterval(i);

• 一次性定時(shí)器的設(shè)置和取消
  • 啟動(dòng)一次性定時(shí)器-setTimeout()
  • 一次性定時(shí)器嫡意，調(diào)用一次就會(huì)創(chuàng)建并執(zhí)行一個(gè)定時(shí)器一次举瑰。

格式
setTimeout(調(diào)用方法,毫秒值);

function run1(){
    alert("我是run1");
}
//設(shè)置一個(gè)定時(shí)器，定時(shí)器執(zhí)行一次
setTimeout("run1()",1000)

• 停止一次性定時(shí)器clearTimeout()

  • etTimeout方法在創(chuàng)建一個(gè)定時(shí)器的同時(shí)蔬螟，還會(huì)返回一個(gè)的定時(shí)器的ID此迅，該ID就代表這個(gè)定時(shí)器。
  • 此定時(shí)器ID在當(dāng)前頁(yè)面是不重復(fù)的旧巾。
  • 我們可以通過clearTimeout方法耸序，指定某個(gè)一次性定時(shí)器 停止

• 消息框

• 消息框案例
• 警告框，用來(lái)彈出警告消息绳匀。

alert("你好")

alert.png

注：不同瀏覽器顯示的組件樣式不同芋忿，這里我們無(wú)需關(guān)注組件樣式炸客。

• 確認(rèn)框疾棵，用于告知用戶信息并收集用戶的選擇

confirm("確定或者取消");

comfirm.png

該方法有返回值，用戶通過選擇“確定”或者“取消”痹仙，方法結(jié)束會(huì)返回boolean類型的值是尔。

• “確定”返回true；
• “取消”返回false开仰；

1.3.3BOM ：Location對(duì)象

• href屬性：設(shè)置或返回完整的 URL拟枚。

<script type="text/javascript">
    function change(){
        location.;
    }
</script>

<input type="button" value="點(diǎn)我" onclick="change()"/>

1.3.4BOM ：History對(duì)象（了解）

• go() 方法：跳轉(zhuǎn)到指定頁(yè)面
  • go(-1) 加載前一個(gè)連接薪铜，等效back()
  • go(1) 加載后一個(gè)鏈接，等效forward()