日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

一、JAVAScript的誕生

JavaScript 誕生于 1995 年。由Netscape(網景公司)的程序員Brendan Eich(布蘭登)與Sun公司聯手開發一門腳本語言 名字起源: Mocha->LiveScript->JavaScript

二、js用途

它的主要目的是，驗證發往服務器端的數據、增加 Web互動、加強用戶體驗度等。可用于開發網站、游戲、移動端App等

三、js語言的組成

javascript = ECMAScript + BOM + DOM

0. 核心(ECMAScript)
1. 瀏覽器對象模型(BOM)
2. 文檔對象模型(DOM)

1、關鍵字

breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintry

2、保留字

classenumextendssuperconstexportimport

3、術語

• 返回值：運算后得到的值
• 程序的三大流程控制我們的計算機在執行一個程序的時候，最基本的方式是一條語句接一條語句的執行。但不可能所有的問題都能用順序執行方式就能解決，總會有一些跳轉。采用結構化的程序設計，可以大大提高開發程序的速度、提高程序的可讀性、程序運行的速度和效率順序：從上朝下執行的代碼就是順序分支(選擇)：根據不同的情況，執行對應代碼循環：重復做一件事情

javascript = ECMAScript + BOM + DOM

0. 核心(ECMAScript)
1. 瀏覽器對象模型(BOM)
2. 文檔對象模型(DOM)

四、js代碼的編寫位置

• html屬性 <a href="javascript:alert(100)"></a>
• script標簽<script type="text/javascript">
  alert('你好')
  </script>
• js文件 獨立的js文件需要引入頁面才能執行 <script type="text/javascript" src="js/common.js"><script> script標簽屬性type:類型src :js文件路徑 帶src屬性的script標簽內不能寫js代碼

五、JS變量的定義

• 變量定義(使用var關鍵字)：變量是存儲數據的容器 var age; //var 是關鍵字，age是變量名var obj = / /; 是JavaScript中正則對象的寫法
• 賦值： age = 20;
• 定義的同時賦值： var age=20;
• 可以一次定義多個變量： var name="zhangsan", age=18, weight=108;

1、數組Array

一系列數據的集合，每一項可以保存任何類型的數據，稱為數組的元素，每個元素之間用逗號隔開

數組格式：[1,2,3]

2、數組創建方式

//1)字面量(推薦)var arr = [1,2,3];?//2)使用構造函數創建var arr = new Array();//創建一個空數組var arr = new Array('王大錘',18 ,'普通青年','廣州');//創建數組并同時寫入數據

3、數組訪問與寫入

• 索引（下標）：從0開始var arr = ['html5','css3','javascript'];
  ?
  //訪問
  arr[0]; //=> 'html5'
  arr[2]; //=> 'javascript'
  ?
  //寫入
  arr[3] = 'web前端';
• length：表示數組的長度 arr.length; //=> 3

4、數組遍歷

• for循環格式：for(變量初始化;判斷條件;變量更新){執行語句}var arr = ['html5','css3','javascript'];
  for(var i=0;i<arr.length;i++){
  console.log(arr[i]);
  }

5、數組方法

• push： 往數組尾部添加一個或多個元素，返回數組新的長度
• pop：刪除數組最后一個元素，返回刪除的元素
• unshift：往數組開頭添加一個或多個元素，返回數組新的長度
• shift：刪除數組第一個元素，返回刪除的元素
• splice(start,deleteNum,…items)：在數組中插入、刪除、替換的通用方法start：起始索引位置deleteNum：要刪除的數量items：插入的元素（可以是多個）
• slice(start[,end])：返回數組的片段或子數組，從start開始到end(不包括end所對應的元素)如果省略end參數，則截取到數組的最后一項 支持負數
• sort：將數組中的元素排序，并返回排序后的數組默認以字符串的排列方式（轉換成ASCII碼進行對比）
• reverse：將數組中的元素顛倒順序，返回逆序后的數組
• join(separator) 返回字符串值，其中包含了連接到一起的數組的所有元素separator為分隔符，默認為逗號
• indexOf(keyword)方法返回keyword所在數組中的索引值，如果數組不存在keyword，則返回-1
• forEach(fn) 遍歷方法，for循環沒有太大差別，比for循環方便
• map(fn)返回一個數量相等的數組，內容是什么取決于在fn中返回的值以上方法都對數組中的每一項運行給定函數fn,，函數中有三個形參分別為item：數組中的每一項,index：遍歷過程中對應的索引值,array：對數組的引用

6、對象Object

• 字面量（推薦）：var obj = {name:'小明',age:18}
• 構造函數：var obj = new Object();

7、讀取屬性值

obj.name;//==>小明

如果讀取一個不存在的屬性，返回undefined

8、添加屬性

   obj.sex = '男';   obj.marry = false;   obj['weight'] = 60

9、刪除屬性

   var obj = {name:'laoxie',age:18,gender:'man'}?   //刪除age屬性   delete obj.age;

10、遍歷對象for…in

  var obj = {    name:'laoxie',    age:18    gender:'男'   }?  //遍歷對象  for(var attr in obj){    //遍歷過程把每次把對象屬性賦值給attr    //所以獲取對象屬性值為：obj[attr]    document.write(obj[attr]);//分別輸出：'laoxie',18,'男'   }

11、數組與對象的組合

    [{        id:'001',        name:'iphone7 plugs',        imgurl:'img/ip7.jpg',        price:5899.00,        sale:5888.00,        color:'土豪金'    },{        id:'002',        name:'Note7',        imgurl:'img/note7.jpg',        price:3899.00,        sale:998.00,        color:'黑色'    },{        id:'003',        name:'榮耀7',        imgurl:'img/honor7.jpg',        price:1999.00,        sale:1899.00,        color:'白色'    }]

六、輸出

• alert() 彈窗輸出
• console.log() 輸出到控制臺
• innerHTML 輸出到雙標簽元素內容
• value 輸出到表單元素

七、JS代碼規范:

• JS變量的命名規范變量名必須是數字,字母,下劃線_和美元符$組成;第一個字符不能為數字不能使用關鍵字或保留字
• 代碼可讀性標識符區分大小寫，如：age和Age是不同的變量。但強烈不建議用同一個單詞的大小寫區分兩個變量。變量命名盡量遵守駝峰原則: myStudentScore變量命名盡量見名知意保持代碼縮進JS語句的末尾盡量寫上分號;運算符兩邊都留一個空格, 如 var n = 1 + 2;注釋單行注釋：//注釋內容多行注釋（和CSS注釋一樣）/*注釋內容*/多行注釋不能嵌套

八、JS數據類型

• 基本數據類型Number：數字NaN：是一個特殊的值，即非數值(Not a Number)。數學運算無法得到數字時，就會返回NaN不代表任何值，也不等于任何值，甚至自己都不等于自己任何數據與它運算都返回NaNisNaN(a)：用來判斷a到底是不是非數字,返回布爾值String：字符串 用引號（單/雙引號）括起來的內容Boolean: 布爾類型 Boolean 類型有兩個值：true和false
• 引用數據類型Array：數組Object：對象
• 特殊數據類型Null Null 類型是一個只有一個值的數據類型，即特殊的值 null。它表示一個空對象引用(指針)Undefined Undefined類型只有一個值，即特殊的 undefined，在使用 var 聲明變量，但沒有對其賦值，這個變量的值就是 undefined
• 數據類型判斷typeoftypeof 'html5'; //=>string typeof 100; //=>number typeof true //=>boolean typeof null //=>object
• 數據類型轉換基本數據類型轉換：利用內置函數進行轉換(主動) var str = '10';//string Number(str);//10,number Boolean(str);//true 隱式轉換(被動)如果運算不能進行下去，內部就會嘗試進行數據類型的轉換支持隱式轉換的運算：邏輯運算、關系運算、算術運算

九、運算

1、算術運算：

+, -, *, /, %:加,減,乘,除,取余(取模)

• toFixed(num): 在數字后面調用，num為小數位，有四舍五入的功能，得到一個字符串
• parseInt()：取整:獲取到第一個不為數字的字符為止
• parseFloat()：取小數

+ 的特殊用法：字符串拼接

+號兩側只要有一個是字符串則為字符串拼接

2、賦值操作：

• = var num1=10;//表示把10賦值給num1變量
• +=：在原來的內容基礎上追加內容 str += 'test' <==> str = str + 'test'
• -=： var n=10; n -= 2 <==> n = n - 2
• *=,/=,%=

3、關系運算（返回布爾值）

• ==(等于), !=(不等于)
• <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
• ===、恒等于/全等于，比較的時候要求值和類型都相等（不會進行類型隱式轉換）
• !==、不全等于
• 關系運算符的比較規則: 1. 數字和數字比較, 直接比較大小 2. 數字和字符串比較, 字符串轉換為數字后再比較 3. 字符串和字符串比較, 進行字符的ASCII碼值比較

4、邏輯運算（返回布爾值）

• &&: 邏輯與&&比||優先級高
• ||：邏輯或
• !: 邏輯非!true //=> false !false //=> true

5、一元運算

• ++: 自增1（在原來的數值基礎上加1）
• –：自減1（在原來的數值基礎上加1）
• 前置：var num = 10; ++num;--num; 返回值：返回值是減1（加1）之后的值
• 后置：var num = 10; num++;num-- 返回值：返回值是沒減1（加1）之前的值

十、條件判斷語句

if語句

• if單分支：if(條件){ //條件成立(返回true)時，執行這里的代碼，否則不執行 }
• if雙分支： 當if括號內的表達式結果成立，執行執行語句1，否則執行執行語句2 if(條件){ 語句1 //條件成立(返回true)時，執行這里的代碼，忽略以下代碼 }else{ 語句2 //條件不成立(返回false)時，執行這里的代碼 }
• if多分支： 從上往下，滿足哪個條件就執行其相對應的語句，都不滿足時，執行最后的else的語句，只能進入其中之一if(條件1){ //條件1成立(返回true)時，執行這里的代碼，忽略以下代碼 }else if(條件2){ //條件2成立(返回true)時，執行這里的代碼，忽略以下代碼 }else{ //以上條件都不成立(都返回false)時，執行這里的代碼 }

1、三元運算

格式：條件 ? 條件成立代碼 : 條件不成立代碼

var a=20;var b = 50;var sum = a>b ? a-b : a+b;

2、switch語句

switch(值) {    case value1: //要求value1與值恒等        //如果表達式的值恒等于value1，代碼從這里開始執行        break;    case value2:        //如果表達式的值恒等于value2，代碼從這里開始執行        break;    case value3:         //如果表達式的值恒等于value3，代碼從這里開始執行        break;    case value4:         //如果表達式的值恒等于value4，代碼從這里開始執行        break;    default:         如果以上條件都不成立，默認執行這里的代碼}

• switch語句在比較值時使用的是全等操作符，因此不會發生類型轉換
• case: 當符合條件時，會從符合條件的那一條case語句開始，依次順序向下執行
• break: 跳出switch語句
• default: 當所有的case都不滿足的情況下會執行defalut下面的語句

十一、循環語句

• 循環就是重復做一件事, 在JS中指的是循環執行某部分代碼.
• 循環結構是程序中一種很重要的結構，其特點是在給定條件成立時，反復執行某程序段，直到條件不成立為止

只要條件成立，就會不斷地執行花括號里的語句 編寫條件時，要避免出現死循環

1、while循環

//變量初始化while(條件){    //條件成立就會不斷地執行這里的代碼，直到條件不成立    //所以這里一般會伴隨著條件的更新}

2、do…while

//變量初始化do {    //不管條件是否成立，先執行一次這里的代碼，再進行條件判斷，    如果條件依然成立，則再次執行這里的代碼，依此類推    //所以這里一般會伴隨著條件的更新} while(條件)

3、for循環

for(變量初始化; 條件判斷; 變量更新){    //循環條件成立，則執行這里的代碼}

• 兩個分號必須寫

十二、函數

1、函數的定義

• 關鍵字聲明（聲明式）： 格式：function 函數名(){}function sum(){} 函數的聲明會提前 ==> 解析器會率先讀取函數聲明，并使其在執行任何代碼之前可用（可以訪問）; 函數表達式(賦值式)var sum = function(){}

2、函數的執行

0. 手動調用: sum();
1. 事件驅動: 格式：元素.事件 = 函數名; buton.onclick = sum;事件發生都是一瞬間的

3、常見事件觸發函數

• onclick：點擊事件
• ondblclick：雙擊事件
• onmouseover：鼠標移入事件
• onmouseout:鼠標移開事件
• onchange：內容改變事件（一般用于表單元素）
• onkeyup：鍵盤按鍵彈起事件
• onkeydown: 鍵盤按下時觸發（會連續觸發）

4、作用域

俗稱“使用范圍”，即能夠使用某個變量的范圍，分<全局作用域>和<局部作用域>

• 全局變量與局部變量全局變量：在全局作用域下聲明的變量，可以在任意地方中使用，作用范圍比較大，我們稱為全局變量局部變量：在函數內（局部作用域）聲明的變量，只在函數中可以使用，作用范圍較小，我們稱之為局部變量
• 變量的訪問規則就近原則（如查找變量a）：使用變量a時先從當前函數查找，如果當前函數有變量a則使用;如果當前函數無變量a,則往父級函數查找，如果找到則使用，并停止查找;如果在父級函數還是無法找到，則繼續往上一層函數查找，以此類推，直到最頂層(全局作用域)，如果還是沒找到，則報not defined錯誤;作用域鏈：每個函數在定義時就形成了局部作用域，如果存在多個函數嵌套，他們之間就會建立起某種聯系，直到全局作用域，這種聯系稱之為作用域鏈。當函數訪問變量時，根據就近原則在這個作用域鏈中從內到外查詢變量【聲明提前：提前到當前作用域最頂部】。比如： var name = 'liang'; function show(){ console.log(name); var name = 'xiao'; } 由于js的聲明提前，name會提前到函數show內的最頂部， 執行語句console.log(name)時會輸入undefined。

5、函數的參數

• 形參，就是局部變量
• 形參與實參的區別:形參：聲明函數時圓括號內定義的變量實參：函數執行時傳入的參數形參和實參的數量可以不同
• arguments 函數內部隱藏的對象（是一個類數組），保存著實參的信息length: 實參的數量
• 引用數據類型與基本數據類型的傳參（引用傳遞與值傳遞）函數作為參數傳遞

6、函數返回值

0. 終止函數的執行,return后的代碼不會執行
1. return后如果有值，則把這個值返回到函數執行的地方如果函數沒有return,執行完后返回undefined

7、函數中的this

函數中的this是一個關鍵字，表示當前對象，而當前對象是誰，取決于誰調用了這個函數。

十三、文檔對象模型 DOW

節點操作 * 操作屬性 * 設置css樣式 * 操作內容

• 綁定事件
• 生成document.createElement()
• 插入父級元素.appendChild(添加的元素) : 追加
• 獲取節點:document.getElementById();//nodegetElementsByClassName();//[node,node]getElementsByTagName();//[node,node]獲取元素的捷徑 * html: document.documentElement * body: document.body * a : document.links //[] * image: document.images //[]

<body><h1 class="title">節點操作</h1><div id="list"><a href="#">google</a><a href="#" id="baidu">Baidu</a><a href="#">Yahoo</a></div><a href="#">360</a><script>        var baidu = document.getElementById('baidu');        //node        console.log(baidu);        var title = document.getElementsByClassName('title');        //[node]        console.log(title);        var link = document.getElementsByTagName('a');        console.log(link);        var list = document.getElementById('list');        var list_link = list.getElementsByTagName('a');        console.log(list_link);        // 生節成點        var h2 = document.createElement('h2');        h2.id = 'subTitle';        h2.innerHTML = '人工智能';        // 獲取body     // var body = document.getElementsByTagName('body')[0];     //[body]        var body = document.body;        body.appendChild(h2)</script></body>

十四、瀏覽器對象模型 BOM

• window 可省略不建議省略window的場景事件屬性事件onload 頁面所有元素(包括DOM,圖片等資源文件)加載完成后執行函數(方法)alert() 彈出框parseInt() 字符轉為整型parseFloat() 字符轉為浮點型Number() String()Boolean()瀏覽器可視區域的寬高:window.innerWidthwindow.innerHeight自動:設置定時器:var timer = setInterval(fn,duration)每個duration時間(ms),執行一次fn,返回一個定時器標識clearInterval(timer) :清除定時器 對象document<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02函數的執行</title> <style> #box{width:200px;height:100px;background-color: #f00;} </style> <script> window.onload = function(){ var box = document.getElementById('box');//節點(對象) //節點(對象) function show(){ console.log('laoxie'); } // 手動執行(主動) show(); // 事件驅動執行(被動) box.onclick = show; box.onmouseover = function(){ console.log('over'); } box.onmouseout = function(){ console.log('out') } // document.onkeyup = function(event) {console.log(event.keyCode,event.key) // // 事件對象:event // console.log('upupup') // } // document.onkeydown = function(event){ // // 事件對象:event // if(event.keyCode === 38){ // } // console.log('down') // } // 表單改變事件onchange username.onchange = function(){ console.log(666) } } </script> </head> <body> <div id="box"></div> <input type="text" id="username"> </body> </html>