JavaScript基礎筆記

2020-08-08 13:01:48

1.JS概述

1.1.JS是幹什麼的
指定網頁行爲
1.2.JS歷史
1995年5月,網景公司, Brendan Eich(布蘭登·艾奇)花了10天時間寫出來的,剛開始的JS叫做:LiveScript。
1995年12月,改名爲JavaScript
1.3.JS特點
指令碼語言,無需編譯(讀一行執行一行)
基於物件,弱型別語言
互動性,可以與使用者互動
安全性,只能在瀏覽器內執行
跨平臺,只要有瀏覽器即可,與平臺無關

2.HTML中引入
(1)通過Script標籤引入JS
(2)引入外部的JS檔案
通過Script標籤引入外部的JS檔案,注意,此標籤不要自閉,也不要寫其他JS內容

3.語法

3.1.註釋
//單行註釋
/多行註釋/

3.2.數據型別

基本數據型別

    數值型別(number)
      在JS中,所有的數值底層都是浮點型,在需要時,整型和浮點型會自動轉換。
         例如:2.4+3.6=6     在java中等於6.0
         NaN(not a number)非數位,NaN和任何值都不相等,可以通過isNaN(xxx)判斷是否是非數位。
         提供了包裝類Number

     字串型別(string)
         字串是基本數據型別,通常用單引號或者雙引號引起來。
          提供了包裝類String

     布爾型別(boolean)
        值爲true和false
        提供了包裝型別Boolean

     undefined
        未定義,如果宣告瞭一個變數,但是沒有初始化,該變數就是undefined


     Null
     表示空,通常作爲返回值使用

3.3.變數的定義
在JS中,變數不區分型別,所有的變數都是通過var關鍵字宣告的,因此,JS是一門弱類語言。

3.4.運算子

JS的大部分運算子和java類似
不同之處:

比較運算子:「==」 和「===」

「==」:再比較時,如果兩端數據;型別不同,則先轉換數據型別在比較

「===」:在比較時,如果兩端數據型別不同,則直接返回false

Typeof:用來檢視數據型別的
delete:刪除陣列中的元素或者物件屬性

3.5.語句
JS語句和java基本一致
If條件語句
回圈語句:while()、do{}while()、for(){},注意JS不支援增強for回圈

3.6.函數
函數的定義:
function 函數名(形參列表){
Alert()
}
函數的呼叫:函數名(實參列表)

3.7.陣列

建立:
Var arr1=new Array(10)//表示建立一個長度爲10的空陣列
Var arr2=[「abc」,123,true]//表示建立一個指定初始值得陣列

注意:
(1)陣列可以存放任意型別的數據
(2)如果一個位置沒有元素,該位置的值爲undefined
(3)陣列的長度可以任意改變

3.8.API

String物件

match(regexp) 返回正則表達式匹配的值。
replace(regexp,replaceStr) 根據正則表達式匹配並替換。
search(regexp) 查詢第一次匹配到正則的位置

正則物件:
建立:
Var reg1= new RsgExp(「java」,「ig」)
Var reg2=/java/ig

識別符號:

     I:ignoreCase,忽略大小寫
    g:global,全域性查詢
    ^:從頭匹配
    $:從尾部開始匹配

方法:

   test(str):檢查字串是否符合如下正則

Array物件

   Length屬性:返回或設定陣列長度
   Sort()排序:字典排序

Date物件

建立:

Var date1=new Date()//建立當前時間
Var date2=new Date(年,月,日,時,分,秒)//指定時間
例如:var date=new Date(2008,7,8,20,0,0)//2008年8月8日晚上8點

Math物件

Math物件無需建立,可以直接呼叫身上的方法
ceil():向上取整
floor():鄉下取證
random():生成0-1的亂數
round():四捨五入

全域性物件

全域性物件沒有語法,直接呼叫方法即可
isNAN(xxx):判斷是否是非數位
eval(codeStr):可以執行一個字串型別的程式碼

3.9.自定義物件

格式:
var person = {
「name」:」張三」,
「age」:18,

}

物件中取值:person.name或者person[「name」]

**

4.DHTML

**

4.1.DHTML概述

DHTML:動態的HTML
DHTML並非一門新技術,而是將現有的HTML、CSS、JS整合在一起的結果

DHTML分爲BOM和DOM

BOM:瀏覽器物件模型,其中封裝了和瀏覽器相關的操作
DOM:文件物件模型

BOM

window物件
window物件爲全域性物件,可以直接呼叫身上的方法

常用的事件:

onclck:點選事件
onfocus:獲得焦點事件
onblur:失去焦點事件
onload:文件就緒事件

常用的方法:

alert():彈出提示框
confirm():彈出確認框,返回boolean

**

DOM

**
獲取元素
getElementById(「id值」):根據id值獲取一個元素
getElementsByName(「name屬性值」):根據name屬性值獲取多個元素組成的陣列
getElementsByTagName(「標籤名」):根據標籤名獲取多個元素組成的陣列
value:可以獲取或者設定value屬性的值
innerText:可以獲取或者設定標籤的文字內容(部分瀏覽器不支援)
innerHTML:可以獲取或者設定標籤的html內容

**

元素的操作

**
createElement(「div」):建立一個div元素
appendChild(Element):追加一個子元素
removeChild(Element):刪除子元素
replaceChild(newElement,oldElement):用新元素替換舊元素
insertBefore(newElement,oldElement):在舊元素之前插入新元素
clnoeNode(boolean):克隆元素,參數預設爲false,表示只克隆元素本身,不克隆子元素,如果爲true,連同子元素一起克隆

**

修飾符

**
修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全域性匹配(查詢所有匹配而非在找到第一個匹配後停止)。
m 執行多行匹配。
方括號
方括號用於查詢某個範圍內的字元:
表達式 描述
[abc] 查詢方括號之間的任何字元。
[^abc] 查詢任何不在方括號之間的字元。
[0-9] 查詢任何從 0 至 9 的數位。
[a-z] 查詢任何從小寫 a 到小寫 z 的字元。
[A-Z] 查詢任何從大寫 A 到大寫 Z 的字元。
[A-z] 查詢任何從大寫 A 到小寫 z 的字元。
[adgk] 查詢給定集合內的任何字元。
[^adgk] 查詢給定集合外的任何字元。
(red|blue|green) 查詢任何指定的選項。

**

元字元

**
元字元(Metacharacter)是擁有特殊含義的字元:
元字元 描述
. 查詢單個字元,除了換行和行結束符。
\w 查詢單詞字元。
\W 查詢非單詞字元。
\d 查詢數位。
\D 查詢非數位字元。
\s 查詢空白字元。
\S 查詢非空白字元。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查詢 NUL 字元。
\n 查詢換行符。
\f 查詢換頁符。
\r 查詢回車符。
\t 查詢製表符。
\v 查詢垂直製表符。
\xxx 查詢以八進制數 xxx 規定的字元。
\xdd 查詢以十六進制數 dd 規定的字元。
\uxxxx 查詢以十六進制數 xxxx 規定的 Unicode 字元。