<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > javascript學習入門教程(超詳細版)

1.javascript簡介

JavaScript 最初由網景公司開發的一種腳本語言,被大量地應用于網頁中,用以實現網頁和瀏覽者的動態交互。目前幾乎所有的瀏覽器都可以很好地支持 JavaScript。由于 JavaScript 可以及時響應瀏覽者的操作,控制頁面的行為表現,提高用戶體驗,因而已經成為前端開發人員必須掌握的語言之一。


JavaScript 是為滿足制作動態網頁的需要而誕生的一種編程語言,在 HTML 基礎上,使用 JavaScript 可以開發交互式(網頁)Web。JavaScript 的出現使得網頁和用戶之間實現了實時、動態和交互的關系。


2.JavaScript的組成部分

標準化后的 JavaScript 包含了 3 個組成部分:


1.ECMAScript


腳本語言的核心內容,定義了腳本語言的基本語法和基本對象?,F在每種瀏覽器都有對ECMAScript標準的實現。


2.DOM(Document Object Model)


文檔對象模型,瀏覽器中的DOM把整個網頁規劃成由節點層級構成的樹狀結構的文檔,用DOM API可以輕松地刪除、添加和替換文檔樹結構中的節點。


3.BOM(Browser Object Model)


瀏覽器對象模型,描述了對瀏覽器窗口進行訪問和操作的方法和接口。


3.JavaScript的特點

JavaScript 是一種運行在瀏覽器中的主要用于增強網頁的動態效果、提高與用戶的交互性的編程語言。相比于其他編程語言,它具有許多特點,主要包括以下幾方面。


1) 解釋性


JavaScript 不同于一些編譯性的程序語言,它是一種解釋性的程序語言,它的源代碼不需要經過編譯,直接在瀏覽器中運行時進行解釋。


2) 動態性


JavaScript 是一種基于事件驅動的腳本語言,它不需要經過 Web 服務器就可以對用戶的輸入直接做出響應。


3) 跨平臺性


JavaScript 依賴于瀏覽器本身,與操作環境無關。任何瀏覽器,只要具有JavaScript腳本引擎,就可以執行JavaScript。目前,幾乎所有用戶使用的瀏覽器都內置了JavaScript腳本引擎。


4) 安全性


JavaScript 是一種安全性語言,它不允許訪問本地的硬盤,同時不能將數據存到服務器上,不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互。這樣可有效地防止數據丟失。


5) 基于對象


JavaScript 是一種基于對象的語言,同時也可以被看作是一種面向對象的語言。這意味著它能運用自己已經創建的對象。因此,許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。


4.JavaScript的使用方式

1.行內式( 直接將js代碼寫在標簽的內部)


<a href="javascript:alert('hello javascript');">點一下試試</a>

<button type="button" onclick="javascript:alert('hello javascript');">點一下</button>

2.內嵌式(將js代碼寫在script標簽中)


推薦

<head>

    <script type="text/javascript">

        alert('hello javascript');

    </script>

</head>

script標簽可以放在body中,也可以放在head中(推薦)


3.外鏈式(將js代碼寫在外部獨立的文件中)


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

5.JavaScript中的輸入和輸出方式

5.1輸入方式

使用window對象提供的prompt對象可以實現用戶數據的輸入


window.prompt('請輸入數據');

5.2輸出方式

使用警告窗口實現數據的輸出


window.alert('hello javascript');

輸出數據到控制臺


console.log('hello javascript');

輸出數據到頁面


document.write('hello javascript');

6.JavaScript注釋

JavaScript的注釋分為兩種類型:


1.單行注釋


 //單行注釋

2.多行注釋


 /* 多行注釋*/

7.JavaScript變量

1.什么是變量


通俗的講,變量類似與一個存放東西的容器,從計算機的角度講,變量指代的是計算機內存中的一段內存空間,用于存數據


2.JavaScript中如何定義一個變量


1.使用var關鍵字聲明變量


var age ;//程序執行到這一步時,會在內存中開辟一段內存空間

age=18;  //將數字18放入剛剛開辟的空間中

 

var age=18; //定義變量的同時,賦值

2.變量命名規則


1.變量可以由數字,字母、英文下劃線,美元$組成


2.不能以數字開頭 a1 1a


3.不能使用關鍵字或者保留字 var for while ......


4.嚴格區分大小寫 age Age 是不同的變量


5.變量名字要見名知意


6.使用駝峰命名法 (首字母小寫,后面單詞的首字母大寫 myName)


8.JavaScript數據類型

JavaScript中數據的類型大體可以分為兩種,簡單類型和復雜類型


簡單類型


數值型 number

字符型 string

布爾型 boolean

未初始化 undefined

空值 null

復雜類型包含數組和對象等


js中的變量是一種動態數據類型,也就是變量本身是沒有數據類型的,只有賦值以后才有了類型。


var a="張三";

    a=25;

    a=true;

如何判定數據的類型?


在js中判斷一個變量的數據類型可以使用 typeof 運算符


var num = 20;

console.log(typeof num); //number

var name="張三";

console.log(typeof name); //string

var blen = true;

console.log(typeof blen); //boolean

var age;

console.log(typeof age) //undefined

var n = null;

console.log(typeof n) //object

數據類型的轉換


1.其他類型轉化成字符串類型


//數字類型轉換成字符串  

var num  =10;

var temp = num.toString();

console.log(typeof temp);

console.log(String(num));

//使用 + 實現隱式轉換

console.log(num+'');

//布爾類型轉換成字符串

var b = true;

var temp =b.toString();

console.log(typeof temp);

2.其他類型轉化成數字類型


//字符型轉化為數字型

var age  = prompt('請輸入您的年齡');

console.log( typeof age);

age = parseInt(age);

console.log( typeof age);

var p = '20px';

console.log(parseInt(p));

var price =prompt('請輸入單價');

console.log( typeof price);

price = parseInt(price);//取整 不會四舍五入

console.log(price);

//小數的轉換

price = parseFloat(price);

console.log(price);

//使用 Number(變量名)轉換

var p = '120';

p = Number(p);

console.log(p);

console.log( typeof p);

//使用 - * / 實現隱式轉換

var num = '10';

num = num -0;

console.log( num);

console.log( typeof num);


3.其他類型轉換為布爾類型


console.log(Boolean('')); //false

console.log(Boolean(0)); //false

console.log(Boolean(NaN));//false

console.log(Boolean(null));//false

console.log(Boolean(undefined));//false

9.JavaScript 運算符

9.1JavaScript 算數運算符

算數運算符用于對數字執行算數運算:


運算符 描述

+ 加法

- 減法

* 乘法

/ 除法

% 系數(取余)

++ 遞加

-- 遞減

//加法

var x = 7;

var y = 8;

var z = x + y;

console.log(z);

//除法

x = 3;

y = 2;

console.log(3/2);

console.log(3%2);

/*  ++ --

        

    1:后置++ 是將自身的值賦給變量,之后自身再加1;

    2:前置++ 是將自身+1 后的值賦給變量,同時自身加1;

*/

var a = 1;

b = a ++;

console.log('a=' + a + '   ' +'b='+ b); //  a = 2 , b = 1

var a = 1 ;

b = ++a ;

console.log('a=' + a + '   ' +'b='+ b)//a = 2 b=2


9.2JavaScript 賦值運算符

賦值運算符向 JavaScript 變量賦值


運算符 例子 等同于

= x = y x = y

+= x += y x = x + y

-= x -= y x = x - y

*= x *= y x = x * y

/= x /= y x = x / y

%= x %= y x = x % y

var x=2;

var y=3;

x+=2;

y-=1;

console.log(x);

console.log(y);

9.3JavaScript 比較運算符

運算符 描述

== 等于

=== 等值等型

!= 不相等

!== 不等值或不等型

> 大于

< 小于

>= 大于或等于

<= 小于或等于

? 三元運算符

var a=1;

var b=2;

console.log(a==b);

var a=1;

var b='1';

console.log(a==b);  //true

console.log(a===b); //false

console.log(a!=b);  //false

console.log(a!==b); //true

// 三元運算符

var a=1;

var b=2;

var str = a>b ? "a大于b":"a小于b"; //當條件為真時 執行前面的表達式  否則執行后面的表達式

console.log(str);


9.4JavaScript 邏輯運算符

運算符 描述

&& 邏輯與

|| 邏輯或

! 邏輯非

var b = true;

var c= false;

console.log(b&&c); //false

console.log(b||c);

console.log(!b);//false

9.5JavaScript 類型運算符

運算符 描述

typeof 返回變量的類型。

instanceof 返回 true,如果對象是對象類型的實例。

9.6JavaScript 位運算符

位運算符處理 32 位數。


該運算中的任何數值運算數都會被轉換為 32 位的數。結果會被轉換回 JavaScript 數值。


運算符 描述 例子 等同于 結果 十進制

& 與 5 & 1 0101 & 0001 0001 1

| 或 5 | 1 0101 | 0001 0101 5

~ 非 ~ 5 ~0101 1010 10

^ 異或 5 ^ 1 0101 ^ 0001 0100 4

10.JavaScript 流程控制

10.1分支結構

根據不同的條件,執行不同路徑的代碼(代碼多選一),得到不同的結果


if分支:


語法結構:


//單分支

if(條件表達式){

    //條件滿足時執行的代碼

  }

//根據年齡判斷是否成年

//雙分支

if(條件表達式){

    //條件滿足時執行的代碼

  }else{

    //條件不滿足時執行的代碼

  }

//判斷年份是否是閏年 能被4整除且不能被100整除  能被400整除

//多分支

if(條件表達式1){

    //條件滿足時執行的代碼

  }else if(條件表達式2){

    //條件滿足時執行的代碼

  }else if(條件表達式3){

    //條件滿足時執行的代碼

  }......

   else{

      //以上條件都不滿足時執行的代碼 

  }

//根據分數 給出成績等級

switch分支


語法結構:


switch(表達式){

   case value1:

      //滿足條件執行代碼

       break;

    case value2:

      //滿足條件執行代碼

       break;

    case value3:

      //滿足條件執行代碼

       break;

    ....

    default:

        //以上條件都不滿足執行代碼  

  }  

//樓層查詢案例

switch 注意事項:


1.表達式一般是一個變量 方便進行值的替換


2.表達式和case里面的值在匹配的時候 ,是做的全等運算 ===


3.如果當前的case沒有break,則不會退出,會繼續執行下一個case


10.2循環結構

循環是反復不斷的執行某些代碼塊


需求:打印輸出100次hello world


for 循環


/*

    for循環語法結構 一般使用在已知循環次數的情況下

    初始化變量:用于計數

    條件表達式:循環的終止條件

    操作表達式:更新計數器

*/

for(初始化變量;條件表達式;操作表達式){

    

    //需要循環執行的代碼

    

}

//for循環的執行過程

for(var i=1;i<=100;i++){

    

    console.log('hello');

}

while循環


//while循環語法結構  一般使用在未知循環次數的情況下

while(條件表達式){

    //需要循環執行的代碼

}

do...while 循環


//do  while循環語法結構  一般使用在要先執行在判定的條件下

do{

    

    //需要循環執行的代碼

    

}while(條件表達式)

break continue的使用


break用于終止整個循環


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

    if (i==3){

        break;

    }

    console.log(i)

}

//結束離其最近的循環體

 for (var j = 0; j <5 ; j++) {

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

         if (i==3){

             break;

         }

         console.log(i)

     }

 }

continue用于終止某一次循環


 for (var i = 0; i <5 ; i++) {

     if (i==3){

         continue;

     }

     console.log(i)

 }

11.JavaScript 數組

1.數組可以用一個變量名存儲所有的值,并且可以用變量名訪問任何一個值


2.數組中的每個元素都有自己的的ID(index 下標),以便它可以很容易地被訪問到


1、數組的創建

1.創建一個數組


var myCars=new Array()

myCars[0]="Saab"; 

myCars[1]="Volvo" 

myCars[2]="BMW"

2.創建一個數組并指定長度,注意不是上限,是長度


var array = new Array([size]);

3.創建一個數組并賦值


var myCars=new Array("Saab","Volvo","BMW");

4.字面形式


var myCars=["Saab","Volvo","BMW"];

2.數組的元素的訪問

通過指定數組名以及索引號碼,你可以訪問某個特定的元素。


var name=myCars[0];

 

myCars[0]="Opel";

3.數組的遍歷

使用for循環實現數組的遍歷


var array = [23, 12, 5, 19, 3];

 

for (var i = 0; i < array.length; i++) {

    console.log(array[i])

}

4.數組元素的添加、刪除、截取、合并、拷貝

1.將一個或多個新元素添加到數組結尾,并返回數組新長度


arrayObj. push();


var array3 =[1,2,3,4,5];

//添加元素到數組的最后  返回新數組的長度

var len =  array3.push(12)

console.log(array3)

console.log(len)

2.將一個或多個新元素添加到數組開始,數組中的元素自動后移,返回數組新長度


arrayObj.unshift();


//添加元素到數組的最前面  返回新數組的長度

len =  array3.unshift(0);

console.log(array3)

console.log(len)

3.將一個或多個新元素插入到數組的指定位置,插入位置的元素自動后移,返回刪除后的元素。


arrayObj.splice(start,deleteNum,insert);


/*

 插入元素到數組指定的位置

 第一個參數 start  從哪里開始

 第二個參數 delNum 刪除元素的個數

 第三個參數 insert  插入的新元素

 

 1.只寫一個參數 會從指定開始的位置開始刪除直到數組的末尾  以數組的形式返回刪除的元素

 2.寫兩個參數  會從指定的位置 刪除指定個數的元素 并以數組的形式返回

 3.寫三個參數  從指定位置開始 刪除指定的元素,并將新元素從指定開始的位置添加   返回刪除的元素

*/

 

var arr = array3.splice(0)

console.log(arr)

console.log(array3)

 

 

 

 

console.log(array3.toString())

var arr = array3.splice(1,2)

console.log(arr)

console.log(array3.toString())

 

 

console.log(array3.toString())

var arr = array3.splice(1,2,28)

console.log(arr)

console.log(array3.toString())


4.移除最后一個元素并返回該元素值


arrayObj.pop();


var array = [23, 12, 5, 19, 3];

var temp = array.pop();

console.log(temp)

console.log(array.toString())

5.移除最前一個元素并返回該元素值,數組中元素自動前移


arrayObj.shift();


var array = [23, 12, 5, 19, 3];

var temp = array.shift();

console.log(temp)

console.log(array.toString())

6.刪除從指定位置deletePos開始的指定數量deleteCount的元素,數組形式返回所移除的元素


arrayObj.splice(deletePos,deleteCount);


var array = [23, 12, 5, 19, 3];

var temp = array.splice(1,4);

console.log(temp)

console.log(array.toString())

7.以數組的形式返回數組的一部分,注意不包括 end對應的元素,如果省略 end 將復制start 之后的所有元素


arrayObj.slice(start, [end]);


var array = [23, 12, 5, 19, 3];

var temp = array.slice(1,3)

console.log(temp)

console.log(array.toString())

8.將多個數組(也可以是字符串,或者是數組和字符串的混合)連接為一個數組,返回連接好的新的數組


arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);


9.返回數組的拷貝數組,注意是一個新的數組,不是指向


arrayObj.concat();


var array4 = [10,11,13,14]

var a = array4.concat()

console.log(array4)

console.log(a)

數組的深淺拷貝:


1.使用以上的concat()和 slice()方法對一維數組可實現新舊數組互不影響的拷貝,但是在元素是對象時,仍然還是會影響,因此這兩種方法均是淺拷貝


2.使用JSON.parse(JSON.stringify(array));可實現數組的深拷貝;


5.數組的排序和翻轉

反轉元素(最前的排到最后、最后的排到最前),返回數組地址


arrayObj.reverse();


var array4 = [10,11,13,14]

array4.reverse();

console.log(array4)

對數組元素排序,返回數組地址


arrayObj.sort();


var array4 = [10,11,13,14,100,21]

console.log(array4)

array4.sort()

console.log(array4)

 

 

 

var array4 = [10,11,13,14,100,21]

console.log(array4)

array4.sort(function(a,b){return a-b})

console.log(array4)

sort()默認的排列方式是按照字符的unicode碼進行排列的,在排列數值的時候會出現問題,因此需要依賴一個比值函數function(a,b){return a-b}


編寫代碼實現數組的排序


var array = [10,2,16,30,8]

console.log(array)

//冒泡排序法

for (let i = 0; i <array.length-1 ; i++) {

    for (let j = 0; j <array.length-i-1 ; j++){

        if(array[j]>array[j+1]){

            var temp = array[j]

            array[j] = array[j+1]

            array[j+1] = temp

        }

    }

}

 

//選擇排序

for (var i = 0; i < array.length-1; i++) {

    var index = i;

    for (var j = i+1; j < array.length ; j++) {

        if(array[index]>array[j]){

            index = j;

        }

    }

    if(index!=i){

        var temp = array[i];

        array[i] = array[index];

        array[index] = temp;

 

    }

}


6.獲取數組的長度

length 屬性


//1.判斷數組中元素的個數

var array3 = [10,11,13,14,100,21]

console.log(array3.length)

12.JavaScript 函數

JavaScript 函數是被設計為執行特定任務的代碼塊,會在某代碼調用它時被執行


為何使用函數?


能夠對代碼進行復用:只要定義一次代碼,就可以多次使用它。


能夠多次向同一函數傳遞不同的參數,以產生不同的結果。


JavaScript 函數語法


JavaScript 函數通過 function 關鍵詞進行定義,其后是函數名和括號 (),函數名規則與變量名相同,圓括號可包括由逗號分隔的參數:(參數 1, 參數 2, ...),由函數執行的代碼被放置在花括號中:{}


function name(參數 1, 參數 2, 參數 3) {

    要執行的代碼

}

案例:


1.計算兩個數字的和


 //計算兩個數字的和

    var num1 = 1;

    var num2 = 2;

    var result = num1+num2;

/*

以上代碼的寫法無法實現代碼的復用,如果后續還需要計算兩個數字的和 

以上代碼還需要再寫一次 造成代碼的冗余,這時可以考慮將代碼進行封裝

寫成函數的形式  因為使用函數可以實現代碼的復用

*/

 

function add(num1,num2){

    var res = num1+num2

    console.log(res)

}

 

//調用函數  函數不會再頁面加載后自動執行  需要手動的調用

 add(1,2);

 

//為了后續能使用計算的結果 可以使用return將結果返回

 

function add(num1,num2){

    var res = num1+num2

    return res

}

 

var a = add2(1,2);

console.log(a+2); //5

 

//利用函數 實現簡易計算器

 

function add(num1,num2){

 

    return num1/1+num2/1;

 

}

function sub(num1,num2){

 

    return num1-num2;

 

}

function mult(num1,num2){

 

    return num1*num2;

 

}

function div(num1,num2){

 

    return num1/num2;

 

}

 

let num1 = prompt('請輸入第一個數')

let num2 = prompt('請輸入第二個數')

let operator = prompt('請輸入運算符')

 

 

switch(operator){

    case  '+':

        alert(add(num1,num2))  

        break;

    case  '-':

        alert(sub(num1,num2))

        break;

    case  '*':

         alert(mult(num1,num2))

        break;

    case  '/':

         alert(div(num1,num2))

        break;

    default:

        console.log('請輸入正確的運算符!')

}

遞歸


函數的內部自己調用自己本身,默認是一個死循環,因此在使用遞歸的時候需要添加限制條件


function say(){

    alert('hello')

    say()

}

say()

 

var i = 0

function say(){

    i++

    alert('hello')

    if(i===3){

       return; //結束函數體的執行 

    }

    say()

}

say();

使用函數實現數組排序代碼的復用


案例:


1.提示用戶輸入一個數組的長度


2.用戶輸入數組中的數值 ,要保證用戶輸入的值是數值


3.將用戶輸入值組成的數組排序


//獲取數組

 

 var len = prompt('請輸入數組的長度')

 var array = new Array();

do{

    var num = prompt('請輸入數字')

    if(isNaN(num)){

        continue

    }

    array.push(num);

}while (array.length<len)

    

//函數實現代碼復用

function getArray(length){

    var array = new Array();

    do{

        var num = prompt('請輸入數字')

        if(isNaN(num)){

            continue

        }

        num = num*1;

        array.push(num);

    }while (array.length<length)

 

        return array;

}

 

//數組排序

 

function sortArray(ary){

    var array = ary

    for (var i = 0; i <array.length-1 ; i++) {

        for (var j = 0; j <array.length-i-1; j++){

            if(array[j]>array[j+1]){

                var temp = array[j]

                array[j] = array[j+1]

                array[j+1] = temp

            }

        }

    return array;

}

2.編寫函數實現能創建x行y列的表格輸出到頁面


3.計算1-5之間所有整數的和


function getSum(num){

    if(num==1){

        return   1

    }

    return num+getSum(num-1)

}

4.菲波那切數列


function fb(n){

    if(n==1 || n==2){

        return 1;

    }

    return fb(n-1)+fb(n-2)  

}

13.JavaScript 作用域

作用域:


變量或者函數可以訪問的范圍,分為兩種:


1.全局作用域:在全局使用var關鍵字聲明的變量 ,可以再任意的范圍訪問


2.函數作用域: 在函數內使用var關鍵字聲明的變量,只能在函數內部訪問


var a = 10

console.log(a) //10

 

/*

js程序執行前 會將使用var關鍵字聲明的變量提升所在作用域的最前面,

但是賦值還是在原來的位置

*/

 

console.log(a) //undefined

var a = 10

//以上代碼作用域提升后 可以改寫為

var a;

console.log(a) //undefined

a=10

 

 

function fn(){

    //局部變量作用域提升

    console.log(b) //undefined

    var b = 10;

}

 

var a = 10; //全局作用域下的變量  全局變量

function fn(){

    var b = 2  //函數作用域下使用var關鍵字聲明的變量 局部變量

    // console.log(a)

    console.log(b)

}

 

console.log(a)

fn() //調用函數  執行函數體內的代碼

console.log(b); //b是在函數內部定義的 在外部無法訪問

 

var n = 10

 

function fn(){

    console.log(n//undefined

    var n = 5

}

console.log(n) 

var m =1

function fn3(m){ //參數在函數中相當于一個局部變量

    m=m+3 

}

console.log(m)

 

function fn4(){

    var a=b=c=2;

}

fn4();

console.log(a) //a is not defined

console.log(b) //2

console.log(c) //2

14.JavaScript自定義對象

什么是對象


現實世界的萬物皆對象,對象是看得見,摸得著的事物,比如一個水杯, 一個人


創建對象的三種方式


1.利用字面量創建對象


使用大括號,括號里包含了對象的屬性和方法


var obj = {}  //空對象

 

var ob = {

    name:‘張三’,

    age:20,

    sex:'男'

    say:function(){

       console.log('hello')

    }

    

}

 

//使用對象  訪問對象的屬性 對象名.屬性名  對象名['屬性名']

ob.name

 

//調用對象的方法  對象名.方法名()

ob.say()

2.利用new Object創建對象


var obj = new Object()

 o.name = "zs"

 o.age =20

 o.say = function(){

    alert('123')

 }

 

alert(o.name)

alert(o.age)

o.say()

3.利用構造函數創建對象


構造函數是一種特殊的函數,只要是用來初始化對象,即為對象的成員變量賦初始值,它總與new關鍵字一起使用,可以把對象中的一些公共的屬性和方法抽取出來,然后封裝到函數里。


//構造函數的語法格式

 

function 函數名(){

    this.屬性名=值,

    this.方法名 = function(){}

}

 

new  構造函數名()

 

 

function Person(name,age,sex) {

    this.sex = sex,

    this.name = name,

    this.age = age

    this.say = function () {

        alert('345')

    }

}

 

var person =   new Person('zsan',25,'nan');

alert(person.age)

person.say()

 

 

//遍歷對象

for(key in person){

    alert(key)

    alert(person[key])

}

15.JavaScript 常用內置對象

15.1 String(字符串)對象

length 屬性返回字符串的長度


var txt = "ABCDEF";

var sln = txt.length;

indexOf() 方法返回字符串中指定文本首次出現的索引(位置):0 是字符串中的第一個位置,1 是第二個,2 是第三個 ...


var str = "The full name of China is the People's Republic of China";

var pos = str.indexOf("China");

lastIndexOf() 方法返回指定文本在字符串中最后一次出現的索引


var str = "The full name of China is the People's Republic of China.";

var pos = str.indexOf("China");

如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1


var str = "The full name of China is the People's Republic of China.";

var pos = str.indexOf("USA");

兩種方法都接受作為檢索起始位置的第二個參數


var str = "The full name of China is the People's Republic of China.";

var pos = str.indexOf("China", 18);

var pos = str.lastIndexOf("China", 50);

search() 方法搜索特定值的字符串,并返回匹配的位置:


var str = "The full name of China is the People's Republic of China.";

var pos = str.search("locate");

提取部分字符串


有三種提取部分字符串的方法:


slice(start, end)


substring(start, end)


substr(start, length)


slice() 方法


slice() 提取字符串的某個部分并在新字符串中返回被提取的部分。


該方法設置兩個參數:起始索引(開始位置),終止索引(結束位置)。


這個例子裁剪字符串中位置 7 到位置 13 的片段:


var str = "Apple, Banana, Mango";

var res = str.slice(7,13); //Banana

如果某個參數為負,則從字符串的結尾開始計數。這個例子裁剪字符串中位置 -12 到位置 -6 的片段:


var str = "Apple, Banana, Mango";

var res = str.slice(-13,-7); //Banana

如果省略第二個參數,則該方法將裁剪字符串的剩余部分:


var res = str.slice(7);

或者從結尾計數:


var res = str.slice(-13);

substring() 類似于 slice()


不同之處在于 substring() 無法接受負的索引。


var str = "Apple, Banana, Mango";

var res = str.substring(7,13);

res 的結果是:


Banana

如果省略第二個參數,則該 substring() 將裁剪字符串的剩余部分。


substr() 類似于 slice()


不同之處在于第二個參數規定被提取部分的長度。


var str = "Apple, Banana, Mango";

var res = str.substr(7,6);

res 的結果是:


Banana

如果省略第二個參數,則該 substr() 將裁剪字符串的剩余部分


var str = "Apple, Banana, Mango";

var res = str.substr(7);

res 的結果是:


Banana, Mango

如果首個參數為負,則從字符串的結尾計算位置。


var str = "Apple, Banana, Mango";

var res = str.substr(-5);

res 的結果是:


Mango

第二個參數不能為負,因為它定義的是長度


replace() 方法用另一個值替換在字符串中指定的值,默認地,replace() 只替換首個匹配


str = "Please visit Microsoft and Microsoft!";

var n = str.replace("Microsoft", "W3School");

replace() 對大小寫敏感。因此不對匹配 MICROSOFT


str = "Please visit Microsoft!";

var n = str.replace("MICROSOFT", "W3School");

如需執行大小寫不敏感的替換,請使用正則表達式 /i(大小寫不敏感)


str = "Please visit Microsoft!";

var n = str.replace(/MICROSOFT/i, "W3School");

如需替換所有匹配,請使用正則表達式的 g 標志(用于全局搜索)


str = "Please visit Microsoft and Microsoft!";

var n = str.replace(/Microsoft/g, "W3School");

toUpperCase() 把字符串轉換為大寫,toLowerCase() 把字符串轉換為小寫


var text1 = "Hello World!";

var text2 = text1.toLowerCase();

    text2 = text1.toUpperCase();

concat() 連接兩個或多個字符串


var text1 = "Hello";

var text2 = "World";

text3 = text1.concat(" ",text2);

concat() 方法可用于代替加運算符,下面兩行是等效的


var text = "Hello" + " " + "World!";

var text = "Hello".concat(" ","World!");

trim() 方法刪除字符串兩端的空白符


var str = "       Hello World!        ";

alert(str.trim());

提取字符串字符的方法


charAt() 方法返回字符串中指定下標(位置)的字符串


var str = "HELLO WORLD";

str.charAt(0);   // 返回 H

 

/*charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼*/

 

var str = "HELLO WORLD";

str.charCodeAt(0); 

可以通過 split() 將字符串轉換為數組


var txt = "a,b,c,d,e";   // 字符串

txt.split(",");          // 用逗號分隔

txt.split(" ");          // 用空格分隔

txt.split("|");          // 用豎線分隔

15.2數字對象 Math

Math.PI; //3.1415

Math.round()


Math.round(x) 的返回值是 x 四舍五入為最接近的整數:


Math.round(6.8);    // 返回 7

Math.round(2.3);    // 返回 2

Math.pow(x, y) 的返回值是 x 的 y 次冪:


Math.pow(8, 2); // 返回 64

Math.sqrt(x) 返回 x 的平方根:


Math.sqrt(64);      // 返回 8

Math.abs(x) 返回 x 的絕對(正)值:


Math.abs(-4.7);     // 返回 4.7

Math.ceil(x) 的返回值是 x 上舍入最接近的整數:


Math.ceil(6.4);     // 返回 7

Math.floor(x) 的返回值是 x 下舍入最接近的整數:


Math.floor(2.7);    // 返回 2

Math.min() 和 Math.max() 可用于查找參數列表中的最低或最高值:


Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300

 

 

Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.random() 返回介于 0(包括) 與 1(不包括) 之間的隨機數:


Math.random();     // 返回隨機數

Math.random() 與 Math.floor() 一起使用用于返回隨機整數。


Math.floor(Math.random() * 10); // 返回 0 至 9 之間的數

 

Math.floor(Math.random() * 11); // 返回 0 至 10 之間的數

 

Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之間的數

 

//JavaScript 函數始終返回介于 min(包括)和 max(不包括)之間的隨機數:

Math.random() * (max - min) ) + min

 

//JavaScript 函數始終返回介于 min 和 max(都包括)之間的隨機數

Math.random() * (max - min + 1) ) + min

15.3日期對象

日期對象的創建方式


new Date()


new Date(year, month, day, hours, minutes, seconds, milliseconds)


new Date(milliseconds) 1970年1月1日 格林威治時間


new Date(date string)


new Date() 用當前日期和時間創建新的日期對象:


var d = new Date();

new Date(year, month, ...)


new Date(year, month, ...) 用指定日期和時間創建新的日期對象。7個數字分別指定年、月、日、小時、分鐘、秒和毫秒(按此順序):


var d = new Date(2018, 11, 24, 10, 33, 30, 0);

JavaScript 從 0 到 11 計算月份。一月是 0,十二月是11,6個數字指定年、月、日、小時、分鐘、秒:


var d = new Date(2018, 11, 24, 10, 33, 30);

2個數字指定年份和月份:


var d = new Date(2018, 11);

您不能省略月份。如果只提供一個參數,則將其視為毫秒


var d = new Date(2018)

日期獲取方法


獲取方法用于獲取日期的某個部分(來自日期對象的信息)。下面是最常用的方法(以字母順序排序):


方法 描述

getDate() 以數值返回天(1-31)

getDay() 以數值獲取周名(0-6)

getFullYear() 獲取四位的年(yyyy)

getHours() 獲取小時(0-23)

getMilliseconds() 獲取毫秒(0-999)

getMinutes() 獲取分(0-59)

getMonth() 獲取月(0-11)

getSeconds() 獲取秒(0-59)

getTime() 獲取時間(從 1970 年 1 月 1 日至今)

設置方法用于設置日期的某個部分。下面是最常用的方法(按照字母順序排序):


方法 描述

setDate() 以數值(1-31)設置日

setFullYear() 設置年(可選月和日)

setHours() 設置小時(0-23)

setMilliseconds() 設置毫秒(0-999)

setMinutes() 設置分(0-59)

setMonth() 設置月(0-11)

setSeconds() 設置秒(0-59)

setTime() 設置時間(從 1970 年 1 月 1 日至今的毫秒數)

JS獲取當前毫秒數(時間戳)匯總


new Date().getTime()


new Date().valueOf()


+new Date()


案例:


實現小米搶購倒計時


var second = parseInt(SysSecond % 60);            // 計算秒     

var minite =parseInt((SysSecond / 60) % 60);      //計算分 

var hour =parseInt((SysSecond / 3600) % 24);      //計算小時

var day = parseInt((SysSecond / 3600) / 24);       //計算天 

16.JavaScript DOM

DOM 節點 根據 W3C 的 HTML DOM 標準,HTML 文檔中的所有內容都是節點:


1.整個文檔是一個文檔節點 2.每個 HTML 元素是元素節點 3.HTML 元素內的文本是文本節點 4.每個 HTML 屬性是屬性節點 5.注釋是注釋節點


通過 HTML DOM,樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素(節點)均可被修改,也可以創建或刪除節點。


訪問 HTML 元素(節點)

您能夠以不同的方式來訪問 HTML 元素:


通過使用 getElementById() 方法


通過使用 getElementsByTagName() 方法


通過使用H5新增 getElementsByClassName() 方法


通過使用H5新增的方法document.querySelectorAll()


通過使用H5新增的方法document.querySelector()


特殊節點的獲取


獲取body元素


document.body

獲取html元素


document.documentElement

改變/獲取節點的內容

innerText 不能識別html標簽


innerHTML 能識別html標簽


value 表單


改變/獲取節點的屬性值

href


src


title


alt


表單元素的屬性操作

type


value


checked


selected


disabled(表單被禁用 true)


修改節點樣式屬性

element.style 行內樣式


element.className 類名樣式


ie10 及以上 document.getElementsByClassName('t1').classList.add('t2')


全兼容 document.getElementsByClassName('t1')[0].className='t2'


ie8 及以上 document.getElementsByClassName('t1')[0].setAttribute('class','t2')


通過節點關系獲取節點對象

父(parent)


子(child)


同胞(sibling)


父節點擁有子節點,同級的子節點被稱為同胞


創建和刪除節點

1.創建節點


2.添加節點


3.刪除節點


元素注冊事件

事件的執行步驟:


獲取事件源


注冊事件


編寫事件處理邏輯


事件 描述

onchange HTML 元素改變

onclick 用戶點擊 HTML 元素

onmouseover 用戶在一個HTML元素上移動鼠標

onmouseout 用戶從一個HTML元素上移開鼠標

onkeydown 用戶按下鍵盤按鍵

onkeyup 用戶彈起鍵盤按鍵

onload 瀏覽器已完成頁面的加載

注冊事件的兩種方式:


1.element.onclick = function(){}


2.element.addEventListener('click',function(){})


移除事件


1.element.onclick = null


2.select1.removeEventListener('click',fn)


事件的傳播方式:


1.捕獲階段 document -> html - >body ->目標節點


2.目標階段


3.冒泡階段 目標節點 ->body->html->document


事件對象


事件對象的屬性和方法 說明

e.target 返回觸發的事件的對象

e.srcElement 返回觸發的事件的對象

e.type 返回事件類型(比如:click、mouseover不帶on)

e.cancelBubble 該屬性阻止冒泡

e.returnValue 該屬性阻止默認事件(默認行為

e.preventDefault() 該方法阻止默認事件(默認行為)

e.stopPropagation 阻止冒泡

案例:


1.輪播圖的小圓點 鼠標滑過 以及點擊事件效果


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

ul{

width: 200px;

list-style-type: none;

margin: 100px auto;

}

ul>li{

width: 20px;

height: 20px;

border-radius: 10px;

border: 1px solid red;

float: left;

margin-left: 10px;

}

ul>li:hover{

background-color: #FF6700;

}

.active{

background-color: #5F9EA0;

}

</style>

<script type="text/javascript">

window.onload = function(){

var lis = document.querySelector("ul").children

for (var i = 0; i < lis.length; i++) {

lis[i].onclick = function(){

//排它思想

for (var j = 0; j < lis.length; j++) {

lis[j].removeAttribute('class')

}

this.classList.add('active')

}

}

}

</script>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>


2.表單的全選和取消全選


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<input type="checkbox" name="" id="ck_header" />

<hr>

<input type="checkbox" class="ck_child"  /><br>

<input type="checkbox"class="ck_child" /><br>

<input type="checkbox" class="ck_child"  />

<script type="text/javascript">

var ck_header = document.querySelector('#ck_header')

var cks = document.getElementsByClassName('ck_child')

ck_header.onclick = function(){

if(this.checked){

for (var i = 0; i < cks.length; i++) {

cks[i].checked = 'checked'

}

}else{

for (var i = 0; i < cks.length; i++) {

cks[i].checked = ''

}

}

}

//通過子節點實現全選和取消全選 綁定單擊事件

for (var i = 0; i < cks.length; i++) {

cks[i].onclick = function(){

var flag = true;

for (var j = 0; j < cks.length; j++) {

if(!cks[j].checked){

flag = false;

break;

}

}

console.log("flag:"+flag);

if(flag){

ck_header.checked = 'checked'

}else{

ck_header.checked = ''

}

}

}

</script>

</body>

</html>


3.簡易圖片輪播


5.隨機點名小程序


17.JavaScript BOM

BOM:Browser Object Model 是瀏覽器對象模型,瀏覽器對象模型提供了獨立與內容的、可以與瀏覽器窗口進行互動的對象結構,BOM由多個對象構成,其中代表瀏覽器窗口的window對象是BOM的頂層對象,其他對象都是該對象的子對象。


BOM對象

1.核心對象window,是瀏覽器對象模型的頂級對象,同時也是一個全局對象,在全局作用域下定義的變量和函數都會變為window對象的屬性和方法


window常見的事件


1.窗口加載事件 onload 頁面加載完畢觸發事件


window.onload = function(){

    let btn = document.querySelector("button")

    btn.addEventListener('click',function(){

        console.log('btn');

    })

}

window.onload = function(){

    console.log(123);

}

window.addEventListener('load',function(){

    console.log(123);

})

2.窗口尺寸事件


window.onresize = function(){

    console.log("窗口尺寸改變了");

}

 

window.addEventListener('resize',function(){

console.log("窗口尺寸改變了");

})

3.定時器


3.1一次性定時器


window.setTimeout(function(){

    console.log("一次性定時器");

},1000) // 時間單位ms

//清除定時器

window.clearTimeout(index)

3.2.循環定時器


let index = window.setInterval(function(){

    console.log("循環性定時器");

},1000)

 

window.clearInterval(index)//定時器的標識符

JavaScript執行機制


javascript是一門單線程語言,在最新的HTML5中提出了Web-Worker,但javascript是單線程這一核心仍未改變。所以一切javascript版的"多線程"都是用單線程模擬出來的


單線程就意味著,所有任務需要排隊,前一個任務結束,才會執行后一個任務。如果前一個任務耗時很長,后一個任務就不得不一直等著,因此執行的效率比較低。


于是,將所有任務可以分成兩種,一種是同步任務(synchronous),另一種是異步任務(asynchronous)。同步任務指的是,在主線程上排隊執行的任務,只有前一個任務執行完畢,才能執行后一個任務;異步任務指的是,不進入主線程、而進入"任務隊列"(task queue)的任務,只有"任務隊列"通知主線程,某個異步任務可以執行了,該任務才會進入主線程執行


實例演示


同步


console.log(1);

console.log(2);

console.log(3);

/*

    執行結果:1、2、3

    同步任務,按照順序一步一步執行

*/

同步和異步


console.log(1);

setTimeout(function() {

    console.log(2);

},1000)

console.log(3);

/*

    執行結果:1、3、2

    同步任務,按照順序一步一步執行

    異步任務,放入消息隊列中,等待同步任務執行結束,讀取消息隊列執行

*/

異步進一步分析


console.log(1);

setTimeout(function() {

    console.log(2);

},1000)

setTimeout(function() {

    console.log(3);

},0)

console.log(4);

/*

    猜測是:1、4、2、3   但實際上是:1、4、3、2

    分析:

        同步任務,按照順序一步一步執行

        異步任務,當讀取到異步任務的時候,將異步任務放置到Event table(事件表格)

中,當滿足某種條件或者說指定事情完成了(這里的是時間分別是達到了0ms和1000ms)當指定

事件完成了才從Event table中注冊到Event Queue(事件隊列),當同步事件完成了,便從

Event Queue中讀取事件執行。(因為3的事情先完成了,所以先從Event table中注冊到

Event Queue中,所以先執行的是3而不是在前面的2)

*/


4.location對象


location是window對象中的一個屬性,而該屬性的值是一個對象,因此一般把location稱之為location對象


重點屬性:


4.1.href :獲取頁面的url地址


window.onload = function(){

    let btn = document.querySelector("button")

    btn.addEventListener('click',function(){

        console.log(location.href);

        setInterval(function(){

            location.href = "http://www.baidu.com"

        },3000)

    })

4.2.search:獲取請求的參數


//location.href = "http://www.baidu.com?name=lisi&age=12"

console.log(location.search);

4.3.對象中常見的方法


assign()實現頁面的跳轉,跟href一樣 記錄歷史,因此能后退頁面


replace()替換當前頁面,不記錄歷史,因此不能后退頁面


reload()重新加載頁面,實現頁面的刷新,相當于F5


5.navigator對象


console.log(window.navigator.userAgent);

6.history對象


6.1back()


6.2 forward()


6.3 go()


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>詳情頁</title>

</head>

<body>

<a href="index.html">跳轉主頁面</a>

<button type="button">后退</button>

<script type="text/javascript">

document.querySelector("button").addEventListener("click",function(){

// history.back();

history.go(-1)

})

</script>

</body>

</html>


7.screen對象


Screen 對象包含有關客戶端顯示屏幕的信息。


8.元素偏移量offset


offset系列只能讀,不能改變值,而且返回的值是數字,不帶單位。


offsetTop 返回元素距離帶有定位的父級頂部的距離,不帶單位


offsetLeft 返回元素距離帶有定位的父級左側的距離,不帶單位


offsetWidth 返回元素自身的寬度,包括padding、border、width,不帶單位


offsetHeight 返回元素自身的高度,包括padding、border、width,不帶單位


offsetParent 返回帶有定位的父親,沒有則返回body


9.元素的可視區client


clientWidth:元素內容區寬度加上左右內邊距寬度。


clientHeight:元素內容區高度加上上下內邊距高度。


clientLeft 元素左邊框的大小


clientTop 元素上邊框的大小


10.元素的滾動scroll


指的是包含滾動內容的元素的大小。


scrollHeight:在沒有滾動條的情況下,元素內容的總高度。


scrollWidth:在沒有滾動條的情況下,元素內容的總寬度。


scrollLeft:被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。


scrollTop:被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。


11.動畫函數


1.動畫原理


獲取目標節點對象


獲取節點對象的位置


通過定時器設置對象的位置 (移動的元素需要添加定位)


結束定時器


<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

*{margin: 0;

padding: 0;}

#corcle{

width: 50px;

height: 50px;

border: 1px solid red;

background-color: #ff6700;

border-radius: 50%;

text-align: center;

line-height: 50px;

position: relative;

}

</style>

</head>

<body>

<div id="corcle">圓</div>

<script type="text/javascript">

var left;

var timeId = setInterval(function(){

if(left>200){

clearInterval(timeId)

}

left =   document.querySelector("#corcle").offsetLeft

document.querySelector("#corcle").style.left = (left+2)+"px";

},50)

</script>

</body>

</html>

函數封裝


function move(object,target){

    var timeId = setInterval(function(){

        var left =object.offsetLeft

        if(left>target){

            clearInterval(timeId)

        }

        object.style.left = (left+1)+"px";

    },50)

    }

緩動動畫


step = (目標位置-現在位置)/10


function move(object, target) {

    var timeId = setInterval(function() {

        var left = object.offsetLeft

        var step = (target - left) / 10

        if (left > target) {

            clearInterval(timeId)

        }

        object.style.left = (left + step) + "px";

    }, 30)

    }

12.本地存儲


localStorage


在HTML5中,新加入了一個localStorage特性,這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k),localStorage中一般瀏覽器支持的是5M大小,這個在不同的瀏覽器中localStorage會有所不同。


sessionStorage


sessionStorage存儲的數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产