天天看點

web前端之JavaScript

一、JavaScript介紹

1、一個完整的 JavaScript 實作是由以下 3 個不同部分組成的:

(1)核心(ECMAScript)

(2)文檔對象模型(DOM) Document object model (整合js,css,html)

(3)浏覽器對象模型(BOM) Broswer object model(整合js和浏覽器)

2、特點

JavaScript 是腳本語言

JavaScript 是一種輕量級的程式設計語言。

JavaScript 是可插入 HTML 頁面的程式設計代碼。

JavaScript 插入 HTML 頁面後,可由所有的現代浏覽器執行。

JavaScript 很容易學習。

二、JavaScript引入方式及規範

1、引入方式

(1)Script标簽内寫代碼

<script>

  // 這裡寫JS代碼

</script>

(2)引入額外的JS檔案

<script src="myscript.js"></script>

2、規範

// 單行注釋

/*

這是多行注釋

*/

JavaScript中的語句要以分号(;)為結束符

3、變量聲明

(1)JavaScript的變量名可以使用_,數字,字母,$組成,不能以數字開頭。

(2)聲明變量使用 var 變量名; 的格式來進行聲明

注意:

變量名是區分大小寫的。

推薦使用駝峰式命名規則。

保留字不能用做變量名。

(3)保留字

abstract             boolean             byte

char                   class                   const

debugger          double              enum

export               extends             final

float                  goto                  implements

import              int                      interface

long                 native                 package

private             protected           public

short                static                  super

synchronized    throws              transient

volatile

(4)

alert("hello");     //彈窗裡面顯示hello

console.log(123);     //使用F12檢視Console的内容是123,使用typeof在Console裡面檢視資料類型為"number"

三、JavaScript資料類型

1、JavaScript擁有動态類型

2、數字類型

JavaScript不區分整型和浮點型,就隻有一種數字類型。

還有一種NaN,表示不是一個數字(Not a Number)。

常用方法:

3、字元串

(1)常用方法:

.length                  傳回長度

.trim()                     移除空白

.trimLeft()              移除左邊的空白

.trimRight()             移除右邊的空白

.charAt(n)                 傳回第n個字元

.concat(value, ...)         拼接

.indexOf(substring, start) 子序列位置

.substring(from, to)     根據索引擷取子序列

.slice(start, end)         切片

.toLowerCase()          小寫

.toUpperCase()          大寫

.split(delimiter, limit)  分割

(2)substirng()和silce()特點

string.slice(start, stop)和string.substring(start, stop):

兩者的相同點:

如果start等于end,傳回空字元串

如果stop參數省略,則取到字元串末

如果某個參數超過string的長度,這個參數會被替換為string的長度

substirng()的特點:

如果 start > stop ,start和stop将被交換

如果參數是負數或者不是數字,将會被0替換

silce()的特點:

如果 start > stop 不會交換兩者

如果start小于0,則切割從字元串末尾往前數的第abs(start)個的字元開始(包括該位置的字元)

如果stop小于0,則切割在從字元串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)

4、布爾類型

5、數組

類似于Python中的清單。

.length                         數組的大小

.push(ele)                     尾部追加元素

.pop()                         擷取尾部的元素

.unshift(ele)                 頭部插入元素

.shift()                     頭部移除元素

.slice(start, end)             切片

.reverse()                     反轉

.join(seq)                     将數組元素連接配接成字元串

.concat(val, ...)             連接配接數組

.sort()                         排序

(2)sort方法

對一組數字類型的數組排序時,會把裡面的元素轉為字元串然後比較,對其進行逐個字元比較,是以不能真實反映元素的大小

(3)周遊數組中的元素

6、null和undefined

null表示值是空,一般在需要指定或清空一個變量時才會使用,如 name=null;

undefined表示當聲明一個變量但未初始化時,該變量的預設值是undefined。還有就是函數無明确的傳回值時,傳回的也是undefined。

null表示變量的值是空,undefined則表示隻聲明了變量,但還沒有指派。

7、類型查詢

對變量或值調用 typeof 運算符将傳回下列值之一:

        undefined - 如果變量是 Undefined 類型的

        boolean - 如果變量是 Boolean 類型的

        number - 如果變量是 Number 類型的

        string - 如果變量是 String 類型的

        object - 如果變量是一種引用類型或 Null 類型的

四、運算符

1、算數運算符

+ - * / % ++ --

2、比較運算符

> >= < <= != == === !==

        1 == “1”            // true(弱等于)

        1 === "1"            // false(強等于)

強等于: == = 既判斷值相不相等還判斷類型相不相等

弱等于: == 隻判斷值相不相等

3、邏輯運算符

&& || !

4、指派運算符

= += -= *= /=

五、流程控制

1、if-else

2、if-else if-else

3、switch

4、for

5、while

6、三元運算

對應python中的三元運算:

六、函數

1、函數定義

(1)普通函數定義

(2)帶參數的函數

傳的參數和所需要的參數個數不符時不會報錯:

        如果傳的參數多餘需要的,就隻保留需要的,其餘參數無效

        如果傳的參數少于需要的,沒有傳的參數傳回undefined

(3)帶傳回值的函數

(4)匿名函數方式

(5)立即執行函數

2、arguments

3、函數的全局變量和局部變量

局部變量:

在JavaScript函數内部聲明的變量(使用 var)是局部變量,是以隻能在函數内部通路它(該變量的作用域是函數内部)。隻要函數運作完畢,本地變量就會被删除。

全局變量:

在函數外聲明的變量是全局變量,網頁上的所有腳本和函數都能通路它。

變量生存周期:

JavaScript變量的生命期從它們被聲明的時間開始。局部變量會在函數運作以後被删除。全局變量會在頁面關閉後被删除。

4、作用域

首先在函數内部查找變量,找不到則到外層函數查找,逐漸找到最外層。

(1)作用域示例一:

函數分定義階段和執行階段

f()---->找到定義的函數執行---->遇到inner()---->找到定義的inner()函數執行---->var city = "ShenZhen"---->結果傳回ShenZhen

(2)作用域示例二:

ret()---->f()---->執行函數f()---->return Bar---->執行Bar()---->Bar()内沒有聲明city---->找函數外聲明的city---->結果傳回BeiJing

(3)作用域示例三:

ret()---->f()---->執行函數f()---->return inner---->執行inner()---->inner()内沒有聲明city---->閉包函數找函數外聲明的city---->結果傳回ShangHai

七、詞法分析

當函數調用的前一瞬間,會先形成一個激活對象:Avtive Object(AO),并會分析以下3個方面:

1:函數參數,如果有,則将此參數指派給AO,且值為undefined。如果沒有,則不做任何操作。

2:函數局部變量,如果AO上有同名的值,則不做任何操作。如果沒有,則将此變量指派給AO,并且值為undefined。

3:函數聲明,如果AO上有,則會将AO上的對象覆寫。如果沒有,則不做任何操作。

示例一:

示例二:

詞法分析過程:

1、分析參數,有一個參數,形成一個 AO.age=undefine;

2、分析變量聲明,有一個 var age, 發現 AO 上面已經有一個 AO.age,是以不做任何處理

3、分析函數聲明,有一個 function age(){...} 聲明, 則把原有的 age 覆寫成 AO.age=function(){...};

最終,AO上的屬性隻有一個age,并且值為一個函數聲明

執行過程:

1、執行第一個 console.log(age) 時,此時的 AO.age 是一個函數,是以第一個輸出的一個函數

2、這句 var age=22; 是對 AO.age 的屬性指派, 此時AO.age=22 ,是以在第二個輸出的是 2

3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了

八、内置對象和方法

JavaScript中的所有事物都是對象:字元串、數字、數組、日期,等等。在JavaScript中,對象是擁有屬性和方法的資料。

我們在學習基本資料類型的時候已經帶大家了解了,JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的差別:typeof s1 --> string而 typeof s2 --> Object

1、自定義對象

類似于(某方面類似)Python中的字典資料類型

2、Date對象

(1)建立Date對象

(2)Date對象的方法:

var d = new Date();

getDate()                 擷取日

getDay ()                 擷取星期

getMonth ()               擷取月(0-11)

getFullYear ()            擷取完整年份

getYear ()                擷取年

getHours ()               擷取小時

getMinutes ()             擷取分鐘

getSeconds ()             擷取秒

getMilliseconds ()        擷取毫秒

getTime ()                傳回累計毫秒數(從1970/1/1午夜)

3、JSON對象(重要内容)

4、RegExp對象(重要内容)

(1)建立正則對象方式1

         參數1 正規表達式(不能有空格)

         參數2 比對模式:常用g(全局比對;找到所有比對,而不是在第一個比對後停止)和i(忽略大小寫)

使用者名隻能是英文字母、數字和_,并且首字母必須是英文字母。長度最短不能少于6位 最長不能超過12位。

(2)建立方式2

注意事項1:

如果regExpObject帶有全局标志g,test()函數不是從字元串的開頭開始查找,而是從屬性regExpObject.lastIndex所指定的索引處開始查找。

該屬性值預設為0,是以第一次仍然是從字元串的開頭查找。

當找到一個比對時,test()函數會将regExpObject.lastIndex的值改為字元串中本次比對内容的最後一個字元的下一個索引位置。

當再次執行test()函數時,将會從該索引位置處開始查找,進而找到下一個比對。

是以,當我們使用test()函數執行了一次比對之後,如果想要重新使用test()函數從頭開始查找,則需要手動将regExpObject.lastIndex的值重置為 0。

如果test()函數再也找不到可以比對的文本時,該函數會自動把regExpObject.lastIndex屬性重置為 0。

5、Math對象

abs(x)      傳回數的絕對值。

exp(x)      傳回 e 的指數。

floor(x)    對數進行下舍入。

log(x)      傳回數的自然對數(底為e)。

max(x,y)    傳回 x 和 y 中的最高值。

min(x,y)    傳回 x 和 y 中的最低值。

pow(x,y)    傳回 x 的 y 次幂。

random()    傳回 0 ~ 1 之間的随機數。

round(x)    把數四舍五入為最接近的整數。

sin(x)      傳回數的正弦。

sqrt(x)     傳回數的平方根。

tan(x)      傳回角的正切。

繼續閱讀