JavaScript編程語言:

1.專門在瀏覽器編譯與執(zhí)行的編程語言

2.幫助瀏覽器解決用戶提出簡單需求

3.基于面向?qū)ο蟛捎萌躅愋驼Z法風(fēng)格實(shí)現(xiàn)

JavaScript編程語言學(xué)習(xí)流程:

1.基礎(chǔ)語法

2.應(yīng)用案例

3.核心語法

基礎(chǔ)語法

一、JavaScript命令書寫方式

1.在HTML文件中<script>內(nèi)部進(jìn)行命令書寫

2. 在js文件中書寫命令格式【推薦】

二、JavaScript中變量

1.變量聲明方式:? JavaScript弱類型編程語言，因此禁止使用具體數(shù)據(jù)類型修飾變量

var? 變量名;

var? 變量名1,變量名2；

2.變量賦值方式

var 變量名=值

var 變量名;

變量名=值；

3.變量名命名規(guī)則

1）變量名只能存在字母，數(shù)字，下劃線, 美元符號(hào)($)

2)? 變量名不能以數(shù)字為開始

3) 不能使用JavaScript關(guān)鍵字作為變量名? var var=10; error

三、JavaScript中數(shù)據(jù)類型

1.分類：

1）基本數(shù)據(jù)類型

2)? 高級(jí)引用數(shù)據(jù)類型

2. 基本數(shù)據(jù)類型

1) number類型：數(shù)字類型，整數(shù)，單精度，雙精度都是number類型

2) string類型：? ?字符串類型，字符串既可以包裹在一對雙引號(hào)中也可以包裹在一對單引號(hào)? "abc"? ?'abc'

3) boolean類型： 布爾類型? ? 值true/false

3.高級(jí)引用數(shù)據(jù)類型

1) function類型：函數(shù)類型.相當(dāng)于Java中Method類型。一個(gè)function類型對象用于管理一個(gè)函數(shù)

2) object類型：? ?在JavaScript中所有通過構(gòu)造函數(shù)生成的對象都是object

4. 變量與數(shù)據(jù)類型之間關(guān)系：

JavaScript中根據(jù)變量賦值內(nèi)容判斷變量的數(shù)據(jù)類型

四、JavaScript中特殊值

1. undefined:javascript中變量沒有賦值時(shí)，其默認(rèn)值都是undefined。

? ? 此時(shí)變量數(shù)據(jù)類型也是undefined

2.NaN： 表示非法數(shù)字。此時(shí)變量數(shù)據(jù)類型是number

3.Infinity:表示一個(gè)無窮大數(shù)字.此時(shí)變量數(shù)據(jù)類型是number

4.null：表示當(dāng)前對象指向一個(gè)空內(nèi)存，但是空內(nèi)存不能存儲(chǔ)數(shù)據(jù)

? ? 此時(shí)對象數(shù)據(jù)類型是object

五、JavaScript中控制語句和循環(huán)語句

1.與Java控制語句和循環(huán)語句語法完全一致

2.控制語句? if ,switch

3.循環(huán)語句? for? while,do..while

六、JavaScript中數(shù)組

1.JavaScript中數(shù)組相當(dāng)于Java中List集合

2.JavaScript中數(shù)組一次可以存放任意類型數(shù)據(jù)

3.JavaScript中數(shù)組控制內(nèi)存?zhèn)€數(shù)可以隨意改變

七、JavaScript中函數(shù)

1.函數(shù)聲明格式

??? function? ?函數(shù)名(形參名，形參名){

? ? ? ? ? ? ? ? 命令行；

? ? ? ? ? ? ? ? 命令行；

? ? ? ? ? ? ? ? eturn 返回值

? ?? }

1) 函數(shù)聲明時(shí)，必須使用function修飾進(jìn)行修飾

2) 函數(shù)聲明時(shí)，禁止指定返回?cái)?shù)據(jù)類型

3)函數(shù)聲明時(shí)， 形參只能指定名稱，但是不能指定數(shù)據(jù)類型，也不能使用var進(jìn)行修飾

4）函數(shù)聲明時(shí)，可以通過return指定返回?cái)?shù)據(jù)。

2.函數(shù)調(diào)用：

對象.函數(shù)(實(shí)參)

***window對象中屬性和函數(shù)在調(diào)用時(shí)，可以不寫window

JavaScript應(yīng)用篇（面試）

一、JavaScript中dom對象與document對象

1.dom對象

1) dom對象：document Object model;文檔模型對象

2) 一個(gè)dom對象用于管理一個(gè)HTML標(biāo)簽

3)瀏覽器每加載一個(gè)HTML標(biāo)簽時(shí)，自動(dòng)為這個(gè)HTML標(biāo)簽生成一個(gè)DOM對象

2.document

1)document對象 文檔對象

2) 瀏覽器根據(jù)html標(biāo)簽聲明順序在內(nèi)存中以樹形結(jié)構(gòu)方式存儲(chǔ)DOM對象.

3) document對象由瀏覽器生成 。一個(gè)瀏覽器只有一個(gè)document對象

4）document對象負(fù)責(zé)根據(jù)定位條件定位dom對象

二、dom對象定位方式：

1.根據(jù)標(biāo)簽Id屬性定位關(guān)聯(lián)的DOM對象

var? domObj =? document.getElementById("id屬性")

2.根據(jù)標(biāo)簽name屬性定位關(guān)聯(lián)的DOM對象

var domArray =? ? ? ?document.getElementsByName("name屬性")

3.根據(jù)標(biāo)簽類型定位關(guān)聯(lián)的DOM對象

var domArray =? ? ?document.getElementsByTagName("標(biāo)簽類型")

三、dom對象對標(biāo)簽管理：

1.dom對象作用：用于對管理的標(biāo)簽中屬性進(jìn)行賦值與取值操作

2.dom對象管理標(biāo)簽中value屬性：

? ? var num = dom.value; //讀取

? ? dom.value = num;? ? ? ?//賦值

3.dom對象管理標(biāo)簽狀態(tài)屬性

checked是boolean? checked=true 表示被選中，checked=false 表示未被選中

4.dom對象管理雙目標(biāo)簽提示信息

? ?dom.innerText=值；

? ?var? num = dom.innerText;

5.dom對象管理標(biāo)簽的樣式屬性

? ?dom.style.樣式屬性名=值

? ?var num = dom.style.樣式屬性名

四、監(jiān)聽事件

1. 介紹：

1）HTML標(biāo)簽中一組屬性

2）監(jiān)聽用戶在何時(shí)以何種方式來操作當(dāng)前標(biāo)簽。當(dāng)監(jiān)聽行為發(fā)生時(shí)。

監(jiān)聽事件通知瀏覽器調(diào)用javascript函數(shù)進(jìn)行處理

2.分類：

1）監(jiān)聽用戶使用鼠標(biāo)操作標(biāo)簽---鼠標(biāo)監(jiān)聽事件

2)? 監(jiān)聽用戶使用鍵盤操作標(biāo)簽---鍵盤監(jiān)聽事件

3.鍵盤監(jiān)聽事件

1）onkeydown: 監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽上按下鍵盤

?2）onkeyup:監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽上彈起鍵盤

3）onkeypress：監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽按下一次鍵盤

4.鍵盤監(jiān)聽事件

1）onclick:監(jiān)聽用戶何時(shí)使用鼠標(biāo)單擊當(dāng)前的HTML標(biāo)簽

2)? onblur：監(jiān)聽用戶何時(shí)使用鼠標(biāo)讓當(dāng)前標(biāo)簽丟失光標(biāo)

3）onfocus:監(jiān)聽用戶何時(shí)使用鼠標(biāo)讓當(dāng)前標(biāo)簽獲得光標(biāo)

4)? onmouseover:監(jiān)聽用戶何時(shí)使用鼠標(biāo)懸停在標(biāo)簽上方

5)? onmouseout：監(jiān)聽用戶何時(shí)使用鼠標(biāo)從標(biāo)簽上方移開

6）onchange:監(jiān)聽用戶何時(shí)使用鼠標(biāo)改變下拉列表中選中項(xiàng)

JavaScript核心語法

一、函數(shù)中arguments屬性

1.在JavaScript中，所有函數(shù)內(nèi)部都存在一個(gè)arguments屬性

2.arguments屬性是一個(gè)數(shù)組。接收函數(shù)調(diào)用時(shí)傳入實(shí)參并分配給形參

3.arguments屬性存在導(dǎo)致JavaScript中函數(shù)在調(diào)用時(shí)實(shí)參個(gè)數(shù)與形參個(gè)數(shù)可以不一致

二、函數(shù)對象聲明方式和創(chuàng)建順序

1.函數(shù)對象聲明方式

1) 標(biāo)準(zhǔn)聲明方式

? ? function? 函數(shù)對象名（）{

?

? ? }

2) 匿名式聲明方式/命令行聲明方式

? ? var 函數(shù)對象 = function () {};

2. javascript編譯器編譯流程：自上而下

1) javascript編譯器自上而下將所有以標(biāo)準(zhǔn)形式聲明的函數(shù)對象進(jìn)行創(chuàng)建

2) 編譯完畢后，javascript編譯器自上而下執(zhí)行所有的命令行

三、普通函數(shù)與構(gòu)造函數(shù)區(qū)別

1.普通函數(shù):進(jìn)行功能封裝，返回結(jié)果處理結(jié)果在調(diào)用時(shí)需要通過對象進(jìn)行調(diào)用

2.構(gòu)造函數(shù):創(chuàng)建object對象,返回本次創(chuàng)建的object對象在調(diào)用時(shí)需要通過new進(jìn)行調(diào)用

四、函數(shù)中this指向

1.存在構(gòu)造函數(shù)，? ?指向構(gòu)造函數(shù)生成對象

2.存在于普通函數(shù)，指向調(diào)用函數(shù)的對象

五、object類型對象聲明

1.調(diào)用javascript中內(nèi)置構(gòu)造函數(shù)

2.調(diào)用自定義構(gòu)造函數(shù)

3.調(diào)用JSON數(shù)據(jù)描述格式

六、object類型對象特點(diǎn)

1.特點(diǎn)：根據(jù)實(shí)際需要決定擁有屬性

2.新增屬性：

? ? var obj = {}；

? ? obj.新屬性名=值；

? ? obj[變量名]=值； //將變量的值作為對象的屬性名

3.刪除屬性

? ?delete obj.屬性名

? ?delete obj[變量名]

七、函數(shù)對象call函數(shù)

1.所有函數(shù)對象都擁有call函數(shù)

2.call函數(shù)動(dòng)態(tài)指定函數(shù)對象的調(diào)用方

3.函數(shù)對象名.call(調(diào)用函數(shù)對象,實(shí)參1,實(shí)參2)

4.call函數(shù)類似于java反射機(jī)制invoke? ?method對象.invoke(對象,實(shí)參,實(shí)參)

八、函數(shù)對象prototype屬性

1.所有函數(shù)對象都擁有protoype屬性

2.protoype屬性相當(dāng)于static final屬性

3.prototype指向?qū)傩钥梢员划?dāng)前構(gòu)造函數(shù)生成的所有實(shí)例對象共享

但實(shí)例對象無權(quán)修改。prototype指向?qū)傩苑Q為【原型屬性】

4.prototype指向一個(gè)對象，此時(shí)這個(gè)對象被稱為【原型對象】。

此時(shí)這個(gè)對象中屬性都是【原型屬性】?？梢员划?dāng)前構(gòu)造函數(shù)生成的所有實(shí)例對象共享

九、prototype實(shí)現(xiàn)繼承

十?、call函數(shù)實(shí)現(xiàn)繼承

1.區(qū)分普通函數(shù)和構(gòu)造函數(shù)

2.this指向

3 函數(shù)對象.call（調(diào)用對象,實(shí)參1，實(shí)參2.。）

1.抽象類降低接口實(shí)現(xiàn)難度

???public interface XXXX{

? ?public void method1();//不需要

? ?public void method2();

? ?public void method3(); //不需要

? ?}

?

? public abstract class Father implements XXXX{

? ? ? ? public void method1() {}

? ? ? ? public void method3(){}

? ?}

? ?public class Son extends Father{

? ? ? ? ? public void method2();

?

? ? }

最后奉上視頻教程??，視頻觀看效果更佳?。∽哌^路過別忘素質(zhì)三連哦~~