目錄

1、什么是JavaScript

1.1、概述

1.2、歷史

2、快速入門

2.1、引入引入JavaScript

2.2、基本語(yǔ)法

2.3、數(shù)據(jù)類型

2.4、嚴(yán)格檢查模式

3、數(shù)據(jù)類型

3.1、字符串

3.2、數(shù)組

3.3、對(duì)象

3.4、流程控制

3.5、Map和Set

3.6 iterator

3.7數(shù)據(jù)類型轉(zhuǎn)換字符串類型

3.8數(shù)據(jù)類型轉(zhuǎn)換數(shù)字型（重點(diǎn)）

3.9標(biāo)識(shí)符、關(guān)鍵字、保留字

1.標(biāo)識(shí)符：就是指開發(fā)人員為變量、屬性、函數(shù)、參數(shù)取的名字。

2.關(guān)鍵字：是指JS本身已經(jīng)使用了的字，不能再用它們充當(dāng)變量名、方法名

3.保留字

4.運(yùn)算符

2.1算數(shù)運(yùn)算符

2.2算數(shù)運(yùn)算符

2.4表達(dá)式和返回值

3.遞增和遞減運(yùn)算符

3.1遞增和遞減運(yùn)算符概念

3.2遞增運(yùn)算符

3.3前置遞增和后置遞增小結(jié)

6.賦值運(yùn)算符

7.運(yùn)算符優(yōu)先級(jí)

4.1流程控制

1.流程控制

2.順序流程控制

3.分支流程控制if語(yǔ)句

3.1分支控制

3.2if語(yǔ)句

3.3 if else語(yǔ)句（雙分支語(yǔ)句）

3.4 if else if 語(yǔ)句（多分支語(yǔ)句）

4.三元表達(dá)式

5.分支流程控制switch語(yǔ)句

5.2switch語(yǔ)句和 if else if 語(yǔ)句的區(qū)別

4.2 for循環(huán)

2.1語(yǔ)句結(jié)構(gòu)

斷點(diǎn)調(diào)試：

2.2for循環(huán)重復(fù)相同代碼

2.3for循環(huán)重復(fù)某些相同操作

課堂案例：求學(xué)生成績(jī)

3.1雙重for循環(huán)概述

5 函數(shù)

4.1 定義函數(shù)

4.比較運(yùn)算符

4.1比較運(yùn)算符概念

4.2=小結(jié)

5.邏輯運(yùn)算符

5.1邏輯運(yùn)算符概述

5.2邏輯與&&

5.3邏輯非！

5.4邏輯中斷（短路操作）

5.4短路運(yùn)算（邏輯中斷）

6.賦值運(yùn)算符

3.7轉(zhuǎn)換為布爾類型

4.2、變量的作用域

4.3、方法

5.內(nèi)部對(duì)象

5.1 Date

5.2 JSON

1解析型語(yǔ)言和編譯語(yǔ)言

5.3 Ajax

6.面向?qū)ο缶幊?/p>

6.1 什么是面向?qū)ο?/p>

6.2創(chuàng)建對(duì)象的三種方式：利用字面量創(chuàng)建對(duì)象

7.操作BOM對(duì)象（重點(diǎn)）

8、操作 Dom對(duì)象（重點(diǎn)）

1、什么是JavaScript

1.1、概述

JavaScript是一門世界上最流行的腳本語(yǔ)言

java、JavaScript

1.2、歷史

Javascript誕生記 - 阮一峰的網(wǎng)絡(luò)日志 (ruanyifeng.com)

ECMAScript它可以理解為是JavaScript的一個(gè)標(biāo)準(zhǔn)

最新版本已經(jīng)到es6版本~

但是大部分瀏覽器還只停留在支持es5代碼上！

開發(fā)環(huán)境---線上環(huán)境，版本不一致

2、快速入門

2.1、引入引入JavaScript

測(cè)試

<!--script標(biāo)簽內(nèi)，寫JavaScript代碼  彈窗-->
<script>
 ? alert("hello,world");
</script>
<!--外部引入-->
 <!--注意：script標(biāo)簽必須成對(duì)出現(xiàn)-->
<script src="js/qj.js"/>
</script>
<!--不用顯示定義type，也默認(rèn)就是javascript-->
<script type="text/javascript"/>
</script>

1.內(nèi)部標(biāo)簽

<script>
 ? //.......
</script>

2.外部引入

abs.js

//、、、

test.html

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

2.2、基本語(yǔ)法

<!--JavaScript嚴(yán)格區(qū)分大小寫-->
<script>
 ? ?//1.定義變量  變量類型  變量名=變量值；
var num=1;
var name="qinjiang";
 ? //alert(num);
 ? //2.條件控制
 ? ?if(2>1){
 ? ? ? ?alert("true");
 ?  }
</script>
<!--JavaScript嚴(yán)格區(qū)分大小寫-->
<script>
 ? ?//1.定義變量  變量類型  變量名=變量值；
var num=1;
 ? //alert(num);
 ? //2.條件控制
 ? ?if(score>60&& score<70){
 ? ? ? alert("60-70")
 ? ? ? }else if(score>70&& score<80){
 ? ? ? ? ? ? ? ?alert("70-80")
 ? ? ? ? }else{
 ? ? ? ? ? ? alert("other")
 ? ? ? ? }
?
//console.log(score)在瀏覽器的控制臺(tái)打印變量；System.out.println()；
?
</script>

瀏覽器必備調(diào)試須知：

Elements:元素，爬網(wǎng)占用。

Console: 控制臺(tái)，測(cè)試，調(diào)試JavaScript。

Soures:源碼調(diào)試，斷點(diǎn)。

Network:網(wǎng)路

Application:存儲(chǔ)一些數(shù)據(jù)保存到網(wǎng)頁(yè)里面。 Local Storage：本地存儲(chǔ)，應(yīng)用。

2.3、數(shù)據(jù)類型

js 中聲明變量統(tǒng)一使用var、let、const

js 在聲明時(shí)沒有數(shù)據(jù)類型。數(shù)據(jù)類型有具體的值來(lái)確定

數(shù)值，文本，圓形，音頻，視頻....

變量

 var 王者榮耀="倔強(qiáng)青銅"
 
 //在瀏覽器控制臺(tái)輸入的代碼
 console.long(王者榮耀) 

var person={
name:"wo"
age=3;
tags:['java','htnl','js','....'] ?
?
//在瀏覽器控制臺(tái)輸入的代碼
person.name ?//查出名字
}

number

js不區(qū)分小數(shù)和整數(shù)，Number

123//整數(shù)
123.1//浮點(diǎn)數(shù)123.1
1.123e3//科學(xué)計(jì)數(shù)法
-99 ?//負(fù)數(shù)
NaN ?//not  a  number翻譯：不是一個(gè)數(shù)字
Infinity //表示無(wú)限大

typeof可以查看莫格變量的數(shù)據(jù)類型

alert(bianliang4==bianliang5)

typeof可以查看莫格變量的數(shù)據(jù)類型

alert(typeof(bianliang1))

var bianliang4;//聲明不附值，類型為undefined。他和null做等值比較為true
bianliang5=null;

字符串

'abc' "abc"

布爾值

true、false

邏輯運(yùn)算符

&& 兩個(gè)都為真，結(jié)果都為真
?
|| ?一個(gè)為真，結(jié)果為真
?
| 真即假，假即真

比較運(yùn)算符! ! ! !重要！

=
==等于(類型一樣，值不一樣，也會(huì)判斷true)
===絕對(duì)等于(類型一樣，值一樣，結(jié)果為true)

這是一個(gè)js的缺陷，堅(jiān)持不要使用===比較

須知：

NaN===NaN,這個(gè)與所有的數(shù)值都不相等，包括自己

只能通過isNaN(NaN)來(lái)判斷這個(gè)數(shù)是否是NaN

浮點(diǎn)數(shù)問題：

<script>
 ? ?console.log((1/3)===(1-2/3))
</script>

盡量避免使用浮點(diǎn)數(shù)進(jìn)行運(yùn)算，存在精度問題！

<script>
 ? ?console.log(1/3-(1-2/3))<0.00000001
</script>

null和 undefined

null 空

undefined未定義

數(shù)組：

java的數(shù)組必須是相同類型的對(duì)象,js中不需要這樣！

<script>
 ? ?//保證代碼的可讀性，盡量使用[]
 ? var arr=[1,2,3,4,5,'hello',null,true]
?
 ? new Array(1,12,3,4,4,5,'hello')
</script>

取數(shù)組下標(biāo);如果越界了，就會(huì)

1.undefied

alert是一個(gè)彈出警告框。他可以展示變量?jī)?nèi)容，并且暫停程序運(yùn)行。特別適合調(diào)試。

對(duì)象

對(duì)象是大括號(hào)，數(shù)組是中括號(hào)--

每個(gè)屬性之間使用逗號(hào)隔開，最后一個(gè)不需要添加

<script>
 ? //Person person =new Person(1,2,3,4,5);
 ? var person={
 ? ? name:"qinjing",
 ? ? age:3,
 ? ? tams:['js','java','wed','...']
 ? }
</script>

取對(duì)象的值

person.name
>"qinjiang"
person.age
>3

2.4、嚴(yán)格檢查模式

<!--
 ? ?'use strict'這個(gè)報(bào)錯(cuò)了。前提：IEDA，需要設(shè)置支持ES6語(yǔ)法。
 ? ?'user strict';嚴(yán)格檢查模式，預(yù)防JavaScript的隨意性導(dǎo)致產(chǎn)生的一些問題
 ? ?必須寫在javascript的第一行！
 ? ?局部變量建議都使用let 取定義
 ? ?-->
<script>
 ? ?'use strict';
 ? //全局變量
 ? ?let i=1;
//ES6 let
</script>

3、數(shù)據(jù)類型

3.1、字符串

1、正常字符串我們使用 單引號(hào)，或者雙引號(hào)

2、注意轉(zhuǎn)移字符\

\’ 字符串
\n 換行
\t
\u4e2d ?編碼 \u### Unicode字符
\x41 ? ? ? ?Ascll字符

<script>
 ‘user strict’
 consle.log('a\'');
 consle.log('a');
</script>

3、多行字符串編寫

<script>
var msg='hello
 ? ? ? ? world
 ? ? ? ? 你好ya
 ? ? ? ? 你好'
</script>

4、模板字符串

<script>
 ?‘user struct’;
 ?//tab 上面  esc鍵下面
 ?let name="qinjiang";
 ?let age=3;
 ?let msg='你好呀，${name}'
</script>

5、字符串長(zhǎng)度

console.log(str.length)

6、字符串的可變性，不可變

console.log(student[0])
s
student[0]=1 ?//賦值為1
console.log(student) //打印
student //輸出

7、大小寫轉(zhuǎn)換

//注意，這里是方法，不是屬性了
console.log(student.toUpperCase())//大寫
console.log(student.toLowerCase()) //小寫

8、獲取下標(biāo)

console.log(student.indexOf("t")) //t字符串

9、截取 substring

console.log(student.substring(1))//從第一個(gè)字符串截取到最后一個(gè)字符串
console.log(student.substring(1,3)
 ? ? ? ? ? )//截取一三的字

3.2、數(shù)組

Array可以包含任意的數(shù)據(jù)類型 （重點(diǎn)練習(xí)）

var arr=[1,2,3,4,5,6]; //通過下標(biāo)取值和賦值 
arr[0]
arr[0]=1

1、長(zhǎng)度

arr.length

注意：加入給arr.length賦值，數(shù)組大小就會(huì)發(fā)生變化~,如果賦值過小，元素就會(huì)就會(huì)丟失

2、indexOf，通過元素獲得下標(biāo)索引。

arr.indexOf(2)
1

字符串的“1”和數(shù)字1是不同的

3.slice () 截取Array 的一部分，返回一個(gè)新的數(shù)組，類似于String中的substring

4、push（），pop（） 尾部 重點(diǎn)練習(xí)

push:添加壓入到尾部
pop:彈出尾部的一個(gè)元素

5、unshift(),shift()頭部 重點(diǎn)練習(xí)

push:添加壓入到頭部
pop:彈出頭部的一個(gè)元素

6、排序sort()

(3)["B","C","A"]
arr,sort()
(3)["A","B","C"]

7、元素反轉(zhuǎn) reverse()

(3)["B","C","A"]
arr,reverse()
(3)["A","B","C"]

8、concat() （重點(diǎn)練習(xí)）

(3)["C","B","A"]
arr.concat([1,2,3])
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

注意：concat()并沒有修改數(shù)組，只是會(huì)返回一個(gè)新的數(shù)組

9、連接符join

打印拼接數(shù)組，使用特定的字符串連接

(3)["C","B","A"]
arr.join('-')
"C-B-A"

10、多維數(shù)組

arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

數(shù)組：存儲(chǔ)數(shù)據(jù)（如何存，如何取，方法都可以自己實(shí)現(xiàn)?。?/p>

3.3、對(duì)象

若干個(gè)鍵值對(duì)

var 對(duì)象名={
 ? ?屬性名： 屬性值，
 ? ?屬性名： 屬性值，
 ? ?屬性名： 屬性值
}
?
?
//定義一個(gè)person對(duì)象，它有四個(gè)屬性
var person={
 ? ?name："wo",
 ? ?age:3,
 ? ?eail:"132546@qq.con",
 ? ?score:0
}

js中的對(duì)象，{......}表示一個(gè)對(duì)象，鍵值對(duì)描述屬性xxxx: xxxx, 多個(gè)屬性之間使用逗號(hào)隔開，最后一屬性不加逗號(hào)。

javascript中的所有的鍵都是字符串，值是任意對(duì)象！

1.對(duì)象賦值

person.name="shi" //賦值
"shi" //執(zhí)行
person.name
"shi" //輸出

2.使用一個(gè)不存在的對(duì)象屬性，不會(huì)報(bào)錯(cuò)！undefined

person.hala
underfined

3.動(dòng)態(tài)的刪除屬性,通過delete刪除對(duì)象的屬性

delete person.name
ture
person

4.動(dòng)態(tài)的添加，直接給新的屬性添加值即可

person.haha="haha"
"haha"
person

5.判斷屬性值是否在這個(gè)對(duì)象中！ xxx in xxx!

'age' in person
true
//繼承
'toString' in person
true

6.判斷一個(gè)屬性是否是這個(gè)對(duì)象自身?yè)碛械膆asOwnProerty()

person.hasOwnProerty('toString')
false
person.hasOwnProperty('age')
true

3.4、流程控制

if判斷

var age=3;
if(age>3){ ?//第一個(gè)判斷
 ? alert("haha");
}else if (age<5){ //第二個(gè)判斷
 ? alert("kuwa");
}else{ ?//否則
 ? alert("kuwa~");
}
while循環(huán),避免程序死循環(huán)

var age=3;
while(age<100){
 ? ?age=age+1;
 ? ?console.long(age)
}
?
?
//死循環(huán)，關(guān)閉不了彈窗
while(true){
 ? ?alert(123)
}
?


for循環(huán)

 var age=3;
 ? for(let i=0;i<100;i++){
 ? ?console.log(i)
 ? }


forEach循環(huán)(重點(diǎn)練習(xí))

var age=[12,3,12,3,12,3,31,23,123]
?
//函數(shù)
age.forEach(fumction (value)){
console.log(value)
})


for....in

var age=[12,3,12,3,12,3,31,23,123]
for(var in age){
if(age.hasOwnProperty(num)){
consolse.log("存在");
consolse.log(age[num])
}
}

3.5、Map和Set

Map:

?

//學(xué)生的成績(jī)，學(xué)生姓名
?
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');//通過key獲得value
map.set('admin',123456); //新增
comsole.log(name);

Set：無(wú)序不重復(fù)的集合

set.add(2); ?//添加
set.delete(1); ?//刪除
console.log(set.has(3)); //是否包含某個(gè)元素

3.6 iterator

作業(yè):使用iterator來(lái)遍歷迭代我們Map,Set !

遍歷數(shù)組

//通過for of/  for in 下標(biāo)
var arr=[3,4,5];
//arr.name ="2133"; 早期的漏洞
for(var x of arr){
console.log(x)
}

遍歷map

var map=new Map([["tom",100],["jack",90],["haha",80]]);
 ? ?for(let x of map){
 ? ? ? ?console.log(x)
 ?  }

遍歷set

var set =new Set([5,6,7]);
 ? ?for(let x of set){
 ? ? ? ?console.log(x)
 ?  }

3.7數(shù)據(jù)類型轉(zhuǎn)換字符串類型

toString()和String()使用方法不一樣。

三種轉(zhuǎn)換方式，我們更喜歡用第三種拼接字符串轉(zhuǎn)換方式，這一種也稱之為隱式準(zhǔn)換。

 //1.把數(shù)字轉(zhuǎn)換為字符串 變量.toString()
 ? ?var num=10;
 ? ?var str=num.toString();
 ? ?console.log(str);
 ? ?console.log(typeof str);
 ? ?//2.我么利用 String(變量) ?
 ? ?console.log(String(num));
 ? ?//3.利用+拼接字符串的方法實(shí)現(xiàn)轉(zhuǎn)換效果  隱式轉(zhuǎn)換
 ? ?console.log(num+'');

3.8數(shù)據(jù)類型轉(zhuǎn)換數(shù)字型（重點(diǎn)）

3.9標(biāo)識(shí)符、關(guān)鍵字、保留字

1.標(biāo)識(shí)符：就是指開發(fā)人員為變量、屬性、函數(shù)、參數(shù)取的名字。

標(biāo)識(shí)符不能是關(guān)鍵字或者保留字。

2.關(guān)鍵字：是指JS本身已經(jīng)使用了的字，不能再用它們充當(dāng)變量名、方法名

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typed、var、void、while、with等。

3.保留字

保留字：實(shí)際上就是預(yù)留的“關(guān)鍵字”，意思是現(xiàn)在居然還不是關(guān)鍵字，但是未來(lái)可能會(huì)成為關(guān)鍵字，同樣不能使用它們當(dāng)變量名或者方法名。

4.運(yùn)算符

1.運(yùn)算符：

運(yùn)算符（operator）也被稱為操作符，是用于實(shí)現(xiàn)賦值，比較和執(zhí)行算數(shù)運(yùn)算等功能的符號(hào)。

javascript中常用的運(yùn)算符有：

算數(shù)運(yùn)算符

遞增和遞減運(yùn)算符

比較運(yùn)算符

邏輯運(yùn)算符

賦值運(yùn)算符

2.1算數(shù)運(yùn)算符

概念：算術(shù)運(yùn)算使用的符號(hào)，用于執(zhí)行兩個(gè)變量或值得算術(shù)運(yùn)算。

2.2浮點(diǎn)數(shù)的精度問題

浮點(diǎn)數(shù)值得最高精度是17位，但是進(jìn)行算術(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)。

//浮點(diǎn)數(shù) 算數(shù)運(yùn)算里面會(huì)有問題
var result=0.1+0.2;//結(jié)果不是0.3，而是0.300000000000000000004
console.log(0.07+100); 結(jié)果不是7，而是：7.00000000000000001
?
//我們不能直接拿著浮點(diǎn)數(shù)來(lái)進(jìn)行比較 是否相等
var num=01+0.2;
console.log(num==0.3);//false

所以：不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等！

2.2算數(shù)運(yùn)算符

2.4表達(dá)式和返回值

表達(dá)式：是由數(shù)字、運(yùn)算符、變量等以能得數(shù)值的有意義排列方法所得的組合，簡(jiǎn)單理解：由數(shù)字、運(yùn)算符、變量等組成的式子。

表達(dá)式最終都會(huì)有一個(gè)結(jié)果，返回給我們，我們成為返回值。

3.遞增和遞減運(yùn)算符

3.1遞增和遞減運(yùn)算符概念

如果需要反復(fù)給數(shù)字變量添加或減去1，可以使用遞增（++）和遞減（--）運(yùn)算符完成。

在javaScript中，遞減（++）和遞減（--）既可以放在變量前面，也可以放在變量的后面，放在變量前面時(shí)，我們可以成為前置遞增（遞減）運(yùn)算符時(shí)，我們可以稱為后置遞增（遞減）運(yùn)算符。

注意：遞增和遞減運(yùn)算符必須和變量配合使用。

3.2遞增運(yùn)算符

1.前置遞增運(yùn)算符

++num前置遞增，就是自加1，類似于 num=num+1，但是 ++num寫起來(lái)簡(jiǎn)單。

使用口訣：先自加，后返回值。

2.后置遞增運(yùn)算符

num++后置遞增，就是自加1，類似于num=num+1,但是num++寫起來(lái)更簡(jiǎn)單。

使用口訣：先返回原值。后自加。

3.3前置遞增和后置遞增小結(jié)

前置遞增和后置遞增運(yùn)算符可以簡(jiǎn)化代碼的編寫，讓變量的值+1比以前寫法更簡(jiǎn)單。

單獨(dú)使用是，運(yùn)行結(jié)果相同

與其他代碼聯(lián)用時(shí)，執(zhí)行結(jié)果不同

后置：先原值運(yùn)算。后自加（先人之已）

前置：先自加，后運(yùn)算（先已后人）

開發(fā)時(shí)，大多數(shù)使用后置遞增/減，并且代碼獨(dú)占一行，例如：num++;或者num--;

6.賦值運(yùn)算符

概念：用來(lái)把數(shù)據(jù)賦值給變量的運(yùn)算符。

var age=10;
age+=5; //相當(dāng)于age=age+5;
age-=5; //相當(dāng)于age= age-5;
age*=10;//相當(dāng)于age=age*10;

7.運(yùn)算符優(yōu)先級(jí)

一元運(yùn)算符里面的邏輯非優(yōu)先級(jí)很高

邏輯與邏輯后優(yōu)先級(jí)高

4.1流程控制

1.流程控制

在一個(gè)程序執(zhí)行的過程中，各條代碼的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的。很多時(shí)候我們要通過控制代碼的執(zhí)行來(lái)實(shí)現(xiàn)我們要完成的功能。

簡(jiǎn)單理解：流程控制就是來(lái)控制我們的代碼按照什么結(jié)構(gòu)順序來(lái)執(zhí)行。

流程控制主要有三個(gè)結(jié)構(gòu)，分別是順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)代表三種代碼執(zhí)行順序。

2.順序流程控制

順序結(jié)構(gòu)式程序中最簡(jiǎn)單、最基本的流程控制，它沒有特定的語(yǔ)法結(jié)構(gòu)。程序會(huì)按照代碼的先后順序，依次執(zhí)行，程序中大多數(shù)的代碼都是這樣執(zhí)行的。

3.分支流程控制if語(yǔ)句

3.1分支控制

由上到下執(zhí)行代碼的過程中，根據(jù)不同的條件，執(zhí)行不同的路徑代碼（執(zhí)行代碼多選一的過程），從而得到不同的結(jié)果。

3.2if語(yǔ)句

1.語(yǔ)句結(jié)構(gòu)

//條件成立執(zhí)行代碼，是否什么也不做
if(條件表達(dá)式){
 ? ? ? ? //條件成立執(zhí)行的代碼語(yǔ)句
?
 ?  }
//2.執(zhí)行思路 如果if 里面的條件表達(dá)式結(jié)果為真true 則執(zhí)行大括號(hào)里面的 執(zhí)行語(yǔ)句
 ? ? //如果if 條件表達(dá)式結(jié)果為假 則不執(zhí)行大括號(hào)里面的語(yǔ)句 則執(zhí)行if 語(yǔ)句后面的代碼

語(yǔ)句可以理解為一個(gè)行為，循環(huán)語(yǔ)句和分支語(yǔ)句就是典型的語(yǔ)句。一個(gè)程序由很多個(gè)語(yǔ)句組成，一般情況下，會(huì)分割成一個(gè)一個(gè)的語(yǔ)句。

3.3 if else語(yǔ)句（雙分支語(yǔ)句）

1.語(yǔ)法結(jié)構(gòu)

//條件成立 執(zhí)行if里面的代碼，否則執(zhí)行else里面的代碼
if(條件表達(dá)式){
//[如果]條件成立執(zhí)行的代碼
}else{
//[否則]執(zhí)行的代碼
}
?
//if里面的語(yǔ)句1 和else 里面的語(yǔ)句2 最終只能有一個(gè)語(yǔ)句執(zhí)行
//else后面直接跟大括號(hào)

3.4 if else if 語(yǔ)句（多分支語(yǔ)句）

1.多分支語(yǔ)句 就是利用多個(gè)條件選擇不同的語(yǔ)句執(zhí)行 得到不同的結(jié)果 多選1 的過程

2.if else if語(yǔ)句是多分支語(yǔ)句

3.語(yǔ)法規(guī)范

//適合于檢查多重條件
if(條件表達(dá)式1){
//語(yǔ)句1；
}else if(條件表達(dá)式2){
//語(yǔ)句2；
}else if(條件表達(dá)式3){
//語(yǔ)句3；
}else{
 //最后的語(yǔ)句；
}

4.執(zhí)行思路

如果條件表達(dá)式1 滿足就執(zhí)行 語(yǔ)句1 執(zhí)行完畢后，退出整個(gè)if 分支語(yǔ)句

如果條件表達(dá)式1 不滿足，則判斷條件表達(dá)式2 滿足的話，執(zhí)行語(yǔ)句2 以此類推

如果上面的所有的條件表達(dá)式都不成立，則執(zhí)行else 里面的語(yǔ)句

5.注意點(diǎn)

一、多分支語(yǔ)句還是多選1 最后只能有一個(gè)語(yǔ)句執(zhí)行

二、else if 里面的條件理論上是可以任意多個(gè)的

三、else if 中間有個(gè)空格

4.三元表達(dá)式

三元表達(dá)式也能做一些簡(jiǎn)單的條件選擇，有三元運(yùn)算符組成的式子稱為三元表達(dá)式。

1.有三元運(yùn)算符組成的式子我們稱為三元表達(dá)式

2.++num 3+5 ?:

3.語(yǔ)法結(jié)構(gòu)

條件表達(dá)式 ？ 表達(dá)式1： 表達(dá)式2

4.執(zhí)行思路

如果條件表達(dá)式結(jié)果為真 則 返回 表達(dá)式1 的值 如果條件表達(dá)式結(jié)果為假 則返回為假 則返回 表達(dá)式 2 的值

5.代碼體驗(yàn)

var num=10;
var result = num >5 ? '是的'： '不是的'；//我們知道表達(dá)式是有返回值的
?
var time =prompt('請(qǐng)您輸入一個(gè)0~59之間的一個(gè)數(shù)字');
 ? ?//三元表達(dá)式  表達(dá)式？ 表達(dá)式1：表達(dá)式2
 ? ?var result = ?time<10 ? '0'+time : time;//把返回值賦值給一個(gè)變量
 ? ?alert(result);

5.分支流程控制switch語(yǔ)句

5.1語(yǔ)法結(jié)構(gòu)

switch語(yǔ)句也是多個(gè)分支語(yǔ)句，它用于基本不同的條件來(lái)執(zhí)行不同代碼。當(dāng)時(shí)針對(duì)變量設(shè)置一系列的特定值的選項(xiàng)是，就可以使用switch.

//switch注意事項(xiàng)
var num=3;
switch(num){
case 1:
 ?console.log(1);
 ?break;
 case 2 :
 ? ?console.log(3);
 ? ? break;
}

//1.我們開發(fā)里面表達(dá)式我們經(jīng)常寫成變量
//2.我們Num的值 和 case 里面的值相匹配的時(shí)候是 全等  必須是值和數(shù)據(jù)類型一致才可以num ===1
//3.break 如果當(dāng)前的case 里面沒有break 則不會(huì)退出swith 是繼續(xù)執(zhí)行下一個(gè)case

switch案例：

var frui=prompt('請(qǐng)輸入你需要的水果');
 ? ?switch (frui){
 ? ? ? ?case '蘋果':
 ? ? ? ? ? ?alert('蘋果的價(jià)格是33.5/斤');
 ? ? ? ? ? ?break;
 ? ? ? ?case '榴蓮':
 ? ? ? ? ? ?alert('榴蓮的價(jià)格是36.5/斤');
 ? ? ? ? ? ?break;
 ? ? ? ? default:
 ? ? ? ? ? ?alert('沒有此水果'); ? 
 ?  }

1.switch語(yǔ)句也是多分支語(yǔ)句 也可以實(shí)現(xiàn)多選1

2.語(yǔ)句結(jié)構(gòu)switch轉(zhuǎn)換、開關(guān) case 小例子或者選項(xiàng)的意思

sitch(表達(dá)式){
 ? case value1:
 ? ?執(zhí)行語(yǔ)句1；
 ? ?break;
 ? ?case value2:
 ? ?執(zhí)行語(yǔ)句2;
 ? ?...
 ? ?default:
 ? ?執(zhí)行最后的語(yǔ)句;
}

3.執(zhí)行思路 利用我們的表達(dá)式的值 和 case后面的選項(xiàng)值項(xiàng)匹配 如果匹配上，就執(zhí)行該case里面的語(yǔ)句 如果都沒有匹配上，那么執(zhí)行default里面的語(yǔ)句。

5.2switch語(yǔ)句和 if else if 語(yǔ)句的區(qū)別

1.一般情況下，他們兩個(gè)語(yǔ)句可以相互替換的。

2.switch..case語(yǔ)句通常處理case為比較確定的情況，而if...else...語(yǔ)句更加靈活，通常用于范圍判斷（大于、等于某個(gè)范圍）

3.switch 語(yǔ)句進(jìn)行條件判斷后直接執(zhí)行到程序的條件語(yǔ)句，效率更高。而f...else語(yǔ)句有幾條件，就得判斷多少次。

4.當(dāng)分支比較少時(shí)，if..else語(yǔ)句的執(zhí)行效率比swtich語(yǔ)句高。

5.當(dāng)分支比較多時(shí)，switch語(yǔ)句的執(zhí)行效率比較高，而且結(jié)構(gòu)更清晰。

4.2 for循環(huán)

在程序中，一組被重復(fù)執(zhí)行的語(yǔ)句被稱為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件，有循環(huán)體及循環(huán)的終止條件的組成的語(yǔ)句，被稱之為循環(huán)語(yǔ)句。

2.1語(yǔ)句結(jié)構(gòu)

for循環(huán)只要用于把某些代碼循環(huán)若干次，通常跟計(jì)數(shù)有關(guān)系。其語(yǔ)法結(jié)構(gòu)如下：

for(初始化變量；條件表達(dá)式；操作表達(dá)式){
//循環(huán)體
}
 ? ?//3.初始化變量 就是用var 聲明的一個(gè)普通變量，通常用于作為計(jì)數(shù)器使用
 ? ?//4.條件表達(dá)式 就是用來(lái)決定每一次是否繼續(xù)執(zhí)行 就是終止的條件
 ? ?//5.操作表達(dá)式 是每次循環(huán)最后執(zhí)行的代碼 經(jīng)常用于我們計(jì)數(shù)器變量進(jìn)行更新（遞增或者遞減）
 ? ?//6.代碼體驗(yàn) 我么重復(fù)打印100局 你好
 ? ?for(var i++;i<=100;i++){
 ? ?console.log('你好嗎？');
}
?
//1.首先執(zhí)行里面的計(jì)數(shù)跟變量 var i=1,但是這句話在for 里面執(zhí)行一次 index
//2.去i<=100 來(lái)判斷是否滿足條件，如果滿足條件 就是 執(zhí)行 循環(huán)體 不滿足條件退出循環(huán)
//3.最后去執(zhí)行 i++  i++是單獨(dú)寫的代碼 遞增  第一輪結(jié)束
//4.接著去執(zhí)行 i<=100如果滿足條件 就去執(zhí)行 循環(huán)體 不滿足條件退出循環(huán) 第二輪

斷點(diǎn)調(diào)試：

斷點(diǎn)調(diào)試是指自己在程序的某一行設(shè)置一個(gè)斷點(diǎn)，調(diào)試時(shí)，程序運(yùn)行到這一行就會(huì)停住，然后你可以一步一步往下調(diào)試，調(diào)試過程中可以看各個(gè)變量當(dāng)前的值，出錯(cuò)的話，調(diào)試到出錯(cuò)的代碼行即顯示錯(cuò)誤，停下。 斷點(diǎn)調(diào)試可以幫我們觀察程序的運(yùn)行過程 瀏覽器中按 F12--> sources-->找到需要調(diào)試的文件-->在程序的某一行設(shè)置斷點(diǎn) Watch:監(jiān)視，通過watch可以監(jiān)視變量的值的變化，非常的常用。 F11:程序單步執(zhí)行，讓程序一行一行的執(zhí)行，這個(gè)時(shí)候，觀察watch中變量的值的變化。 代碼調(diào)試的能力非常重要，只有學(xué)會(huì)了代碼調(diào)試，才能學(xué)會(huì)自己解決bug的能力。初學(xué)者不要覺得調(diào)試代碼麻煩就不去調(diào)試知識(shí)點(diǎn)花點(diǎn)功夫肯定學(xué)的會(huì)，但是代碼調(diào)試這個(gè)東西，自己不去練，永遠(yuǎn)都學(xué)不會(huì)。 今天學(xué)的代碼調(diào)試非常的簡(jiǎn)單，只要求同學(xué)們記住代碼調(diào)試的這幾個(gè)按鈕的作用即可，后面還會(huì)學(xué)到很多的代碼調(diào)試技巧。

2.2for循環(huán)重復(fù)相同代碼

//for循環(huán)可以執(zhí)行相同的代碼
for(var i=1;i<=10;i++){
 ?console.log('我錯(cuò)了');
}
?
?
//我們可以讓用戶控制輸出的次數(shù)
var num=prompt('請(qǐng)輸入次數(shù)');
for(var i=1;i<=num;i++){
 ?console.log('我錯(cuò)了');
}
?
//for循環(huán)可以重復(fù)執(zhí)行不同的代碼 因?yàn)槲覀冇杏?jì)數(shù)器變量 i 的存在 i每次循環(huán)值都會(huì)變化
//我們想要輸出一個(gè) 人 1~100歲
for(var i=0;i<=100;i++){
 ? ?console.log('這個(gè)人今年'+i+'歲了');
}
?
for(var i=0;i<=100;i++){
 ? ?console.log('這個(gè)人今年1歲了，他出生了');
}else if{
 ? ?console.log('這個(gè)人今年100歲了，他死了');
}else}{
 ? ?console.log('這個(gè)人今年'+i+'歲了');
}

2.3for循環(huán)重復(fù)某些相同操作

for循環(huán)因?yàn)橛辛擞?jì)數(shù)器的存在，我們還可以重復(fù)的執(zhí)行某些操作，比如做一些算數(shù)運(yùn)算符。

案例：求1-100之間所有整數(shù)的累加和

案例分析：

1.需要循環(huán)100次，我們需要一個(gè)計(jì)數(shù)器 i

2.我們需要一個(gè)存儲(chǔ)結(jié)果的變量sum,但是初始值一定是0

3.核心算法：1+2+3+4.....，sum=sum+i;

var sun=0;//求和 的變量
for(var i=1;i<=100;i++){
sum=sum+1;
 ? ?sum+=i;
}
console.log(sum);

//1.求1-100之間所有數(shù)的平均值
var sum=0;
var average=0;
for(i=0;i<=100;i++){
 ? ?sum=sum+i;
}
average=sum/100;
console.log(average);
?
//2.求1-100之間所有的偶數(shù)和奇數(shù)的和
var even=0;
var odd=0;
for(var i=0;i<=100;i++){
 ? ?if(i%2==0){
 ? ? ? even=even+i;
 ? ? ? }else{
 ? ? ? ? ? odd=odd+i;
 ? ? ? }
}
console.log('1~100之間所有的偶數(shù)和是'+even);
console.log('1~100之間所有的奇數(shù)和是'+odd);
?
//3.求1-100之間所有能被3整除的數(shù)字的和
var result=0;
for(var i=0;i<=100;i++){
 ? ?if(i%3==0){
 ? ? ? result=result+i;
 ? ? ? }
}
console.log('1~100之間能夠被3整數(shù)的數(shù)字的和是'+result);

課堂案例：求學(xué)生成績(jī)

要求用戶輸入班級(jí)人數(shù)，之后依次輸入每個(gè)學(xué)生的成績(jī)，最后打印出該班級(jí)總的成績(jī)以及平均分的成績(jī)。

案件分析：

1.彈出輸入框總的班級(jí)人數(shù)（num）

2.依次輸入學(xué)生的成績(jī)（保存起來(lái)score），此時(shí)我們需要使用for循環(huán)，彈出的次數(shù)跟班級(jí)總數(shù)的關(guān)系 表達(dá)式：！<=num

3.進(jìn)行業(yè)務(wù)處理：計(jì)算成績(jī)，先求總成績(jī)（sum）,之后求平均成績(jī)（average）

3.彈出結(jié)果

var num=prompt('請(qǐng)輸入班級(jí)的總?cè)藬?shù)：');//num 總得班級(jí)人數(shù)
var num=0;//求和的變量
var average=0;//求平均的變量
for(var i=0; i<=num; i++){
 ? prompt('請(qǐng)輸入第'+i+'個(gè)學(xué)生成績(jī)');
 ? //因?yàn)閺膒rompt取過來(lái)的數(shù)據(jù)是  字符串型的需要轉(zhuǎn)換為字型
 ? sum=sum+parseFloat(score);
}
average=sum/num;
alert('班級(jí)總的成績(jī)是'+sum);
alert('班級(jí)平均分是'+average);

打印一行星星案例

var num=prompt('請(qǐng)輸入星星的個(gè)數(shù)');
var str='';
for(var i=1; i<=num; i++){
 ? str=str+'☆'
}
console.log(str);

3.1雙重for循環(huán)概述

很多情況下，單層for循環(huán)并不能滿足我們的需求，比如我們要打印5行5列的圖形、打印一個(gè)倒直角三角形，此刻就可以通過循環(huán)嵌套來(lái)實(shí)現(xiàn)。

//1.雙重for循環(huán) 語(yǔ)法結(jié)構(gòu)
for(外層的初始化變量；外層的條件表達(dá)式；外層的操作表達(dá)式){
 ? ?for(里層的初始化變量；里層的條件表達(dá)式；里層的操作表達(dá)式){
 ? ?//執(zhí)行語(yǔ)句
 ?  }
}
?
//2.我們可以把里面的循環(huán)看做是外層循環(huán)的語(yǔ)句
//3.外層循環(huán)一次，立面的循環(huán)執(zhí)行全部
//4.代碼驗(yàn)證
for(var i=0;i<=3;i++){
 ? console.log('這是外層循環(huán)第'+i+'次');
 ? for(var j=1;j<=3;j++){
 ? ? console.log('這是里層的循環(huán)第'+i+'次');
 ? }
}

5 函數(shù)

4.1 定義函數(shù)

預(yù)解析：1.會(huì)把全局的變量的“聲明”提前，

2.提前聲明函數(shù)，但是函數(shù)內(nèi)部的代碼是不執(zhí)行的。

局部變量：必須在函數(shù)內(nèi)部使用var\let聲明。如果不使用，則稱為隱式全局變量

隱式全局變量：只有在執(zhí)行后才能使用.

全局變量和局部變量可以重名，使用就近原則。

4.比較運(yùn)算符

4.1比較運(yùn)算符概念

概念：比較運(yùn)算符（關(guān)系運(yùn)算符）是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算，比較運(yùn)算后，會(huì)返回一個(gè)布爾（true/false）作為比較的結(jié)果

4.2=小結(jié)

console.log(18 === '18');//true
console.log(18 ==='18'); //false

5.邏輯運(yùn)算符

5.1邏輯運(yùn)算符概述

1.概念：邏輯運(yùn)算符是用來(lái)進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回也是布爾值。后面開發(fā)中經(jīng)常用于多個(gè)條件的判斷。

2.概念：邏輯運(yùn)算符是用來(lái)進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值，后面開發(fā)中經(jīng)常用于多個(gè)條件的判斷。

5.2邏輯與&&

兩邊都是true 才返回true，否則返回false

5.3邏輯非！

邏輯非（?。┮步凶鋈》捶?，用來(lái)取一個(gè)布爾值相反的值，如true的相反是false。

var isOk=!true;
console.log(isOk)//fasle

5.4邏輯中斷（短路操作）

2.邏輯或

語(yǔ)法：表達(dá)式1||表達(dá)式2

如果第一個(gè)表達(dá)式的值為真，則返回表達(dá)式1

如果第一個(gè)表達(dá)式的值為假，則返回表達(dá)式2

console.log(123 || 456)//123
console.log(0 || 456) //456
console.log(123 || 456 ||789)//123

5.4短路運(yùn)算（邏輯中斷）

//1.用我們的布爾值參與的邏輯運(yùn)算符 true && false  == false
//2.123 && 456 是值 或者是  表達(dá)式 參與邏輯運(yùn)算符？
//3.邏輯運(yùn)算符 如果表達(dá)式1 結(jié)果為真 則返回表達(dá)式2 如果表達(dá)式1為假 那么返回表達(dá)式1
console.log(123 && 456);//456
console.log(0 && 456);//0
console.log(0 && 1+2 && 456 *56789);//0
console.log('' && 1+2 && 456*56789);//''
//如果有空的或者否定的為假，其余是真的 0 '' null undefined NaN

短路運(yùn)算的原理：當(dāng)有多個(gè)表達(dá)式（值）時(shí)，左邊的表達(dá)式可以確定結(jié)果時(shí)，就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值；

1.邏輯與

語(yǔ)法：表達(dá)式1&& 表達(dá)2

如果第一個(gè)表達(dá)式的值為真，則返回表達(dá)式2

如果第一個(gè)表達(dá)式的值為假，則返回表達(dá)式1

2.邏輯或

語(yǔ)法：表達(dá)式1||表達(dá)式2

如果第一個(gè)表達(dá)式的值為真，則返回表達(dá)式1

如果第一個(gè)表達(dá)式的值為假，則返回表達(dá)式2

console.log(123 || 456)//123
console.log(0 || 456)//456
console.log(123 || 456 || 789)//123
var x=10;
function func1(){
 ? ?var y=5;
 ? ?console.log(x);
 ? ?console.log(y);
}
func1();
console.log(x);
console.log(y);

1.在函數(shù)內(nèi)部定義一個(gè)函數(shù)

2.把內(nèi)部函數(shù)作為外部函數(shù)的返回值

原理：利用了內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的變量

function func(){
 ? ? ? ?var num=20;
 ? ? ? ?function func2(){
 ? ? ? ? ? ?alert(num);
 ? ? ?  }
 ? ? ? ?return func2
 ?  }
?
 ? ?var result=func1();
 ? ?result();

定義方式一:

絕對(duì)值函數(shù)

function adc(x){
 ? ? ? ?if(x>=0){
 ? ? ? ? ? ? return x;
 ? ? ?  }else{
 ? ? ? ? ? ?return -x;
 ? ? ?  }
 ?  }

一旦執(zhí)行 return 代表函數(shù)結(jié)束,返回結(jié)果!

如果沒有執(zhí)行return ,函數(shù)執(zhí)行完也不會(huì)返回結(jié)果,結(jié)果就是undefined

定義方式二:

var abs= function(x){
 ?if(x>=0){
 ? ? ? ? ? ? return x;
 ? ? ?  }else{
 ? ? ? ? ? ?return -x;
 ? ? ?  }
}

function(x){.......}這是一個(gè)匿名函數(shù).但是可以把結(jié)果賦值給 abs,通過abc就可以調(diào)用函數(shù)! 方式一和方式二等價(jià)!

調(diào)用函數(shù):

abs(10) //10
abs(-10) ?//-10

參數(shù)問題:javascript可以傳任意一個(gè)參數(shù),也可以不傳遞參數(shù)~

參數(shù)進(jìn)來(lái)是否存在問題?

假設(shè)不存在參數(shù),如果規(guī)避?

var abs =function(x){
//手動(dòng)拋出異常來(lái)判斷
if(typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}

arguments(重點(diǎn))是一個(gè)js免費(fèi)贈(zèng)送的關(guān)鍵字:

代表,傳遞進(jìn)來(lái)的所有的參數(shù),是一個(gè)數(shù)組!

var abs=function(x){
console.log("x=>"+x);
for(var i=0;i<aguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}

問題是:aguments 包含所有的參數(shù),我們有時(shí)候想使用多余的參數(shù)來(lái)進(jìn)行附加操作,需要排除已有參數(shù)~

rest:

以前:

if(arguemnts,length>2){
for(var i=2;i<arguemnts.length;i++){
//.....
}
}

ES6引用的新特性,獲取除了已經(jīng)定義的參數(shù)之外的所有參數(shù)~....

function aaa(a,b....rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}

rest參數(shù)只能寫在最后面,必須用....標(biāo)識(shí)

6.賦值運(yùn)算符

3.7轉(zhuǎn)換為布爾類型

代表空、否定的值會(huì)被轉(zhuǎn)換為false,如‘’、0、NaN/null/undefined

其余值都會(huì)被轉(zhuǎn)換為true.

console.log(Boolean(''))//false
console.log(Boolean(0))//false
console.log(Boolean(NaN)) //false
console.log(Boolean(null))//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'))//true
console.log(Boolean(12)) //true

4.2、變量的作用域

在javascript中，var定義變量實(shí)際是有作用域的。

假設(shè)在函數(shù)中聲明，則在函數(shù)體外不可以使用~（非要想實(shí)現(xiàn)的話，后面可以研究一下閉包）

function qj(){
 ? ? ? ?var x=1;
 ? ? ? ?x=x+1;
 ?  }
?
 ? ?x=x+2;//報(bào)錯(cuò)：Uncaught ReferenceErrow:x is not defined

如果兩個(gè)函數(shù)使用了相同的變量名，只要在函數(shù)內(nèi)部，就不沖突

function qj(){
 ? ? ? ?var x=1;
 ? ? ? ?x=x+1;
 ?  }
 ? ?
 function qj2(){
 ? ? ? ?var x=‘A;
 ? ? ? ?x=x+1;
 ?  }

內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行

function qj(){
 ? ? ? ?var x=1;
?
 ? ? ? ?//內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行
 ? ? ? ?function qj2(){
 ? ? ? ? ? ?var y=x+1;//2
 ? ? ?  }
 ? ? ? ?var z=y+1; //Uncaught ReferenceError:y is not defined
 ?  }

假設(shè)，內(nèi)部函數(shù)變量和外部變量，重名！

function cj(){
 ? ? ? ?var x=1;
 ? ? ? ?function dj(){
 ? ? ? ? ? ?var x='A';
 ? ? ? ? ? ?console.log('inner'+x); //outer
 ? ? ?  }
 ? ? ? ?console.log('outer'+x); //inner A
 ? ? ? ?qj2();
 ?  }

假設(shè)在javascript中 函數(shù)查找變量從自身函數(shù)開始~，由“內(nèi)”向“外”查找.假設(shè)外部存在這個(gè)同名的函數(shù)變量，則內(nèi)部函數(shù)會(huì)屏蔽外部函數(shù)的變量。

提升變量的作用域：

function qj(){
 ?var x="x"+y;
 ?console.log(x);
 ?var y='y';
}

結(jié)果：xundefined

這個(gè)是在javascript建立之初就存在的特性，養(yǎng)成規(guī)范：所有的變量定義都放在函數(shù)的頭部，不要亂放，便于代碼維護(hù)：

funvtion qj2(){
 ?var x=1;
 ?y=x+1,
 ?z,i,a;// undefined
 ?
 ?//之后隨意用
}

全局函數(shù)

//全局變量
x=1;
function f(){
 console.log(x);
}
f();
console.log(x);

全局變量window

var x='xxx';
alert(x);
alelrt(windows.x);

alert()這個(gè)函數(shù)本身也是一個(gè)window變量；（重點(diǎn)練習(xí)）

var x='xxx';
windows,alert(x);
var old_alert=window.alert;
//old_alert(x);
?
window.alert=function(){
?
};
//發(fā)現(xiàn)alert()失效了
widows.alert=old_alert;
widows.alert(456);

?

javascript實(shí)際上只有一個(gè)全局作用域，任何變量（函數(shù)也可以視為變量），假設(shè)沒有函數(shù)作用范圍內(nèi)找到，就會(huì)向外查找，如果在全局作用域都沒有找到，報(bào)錯(cuò)RefrenceError

規(guī)范：

由于我們所有的全局變量都會(huì)綁定到我們window上，如果不同的js文件，使用了相同的全局變量，沖突→如果能夠減少?zèng)_突？

//唯一全局變量
var KuangApp={};
?
//定義全局變量
KuangApp.name='kuang';
KuangApp.add=function(a.b){
return a+b;
}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局變量沖突問題~

jQuery

局部作用域let（重點(diǎn)練習(xí)）

function aaa(){
 for(var i=0;i<100;i++){
 console.log(i)
 }
 console.log(i+1); //問題？ i出了這個(gè)作用域還可以使用
}

ES6 let關(guān)鍵字，解決局部作用域沖突問題！

function aaa(){
 for(let i=0;i<100;i++){
 console.log(i)
 }
 console.log(i+1); ?//報(bào)錯(cuò)：Uncaught ReferenceError； i is not defined
}

建議大家都是用let 去定義局部作用域的變量；

常量const:

在ES6之前，怎么定義常量：只有用全部大寫字母命名的全部就是常量：建議不要修改這樣的值

var PI='3.14';
?
console.log(PI);
PI='123';//可以改變這個(gè)值
console.log(PI)

;

在ES6引用了常量關(guān)鍵字 'const'

const PI='3.14';//只讀常量
console.log(PI);
PI='123';
?
?
const PI='3.14';//只讀常量
console.log(PI);
PI='123'; //報(bào)錯(cuò)：TypeError: Assignment to constant variable. 
console.log(PI);

4.3、方法

定義的方法：

方法就是把函數(shù)放在對(duì)象的里面，對(duì)象只有兩個(gè)東西：屬性和方法

var kuang={
 name:'秦'，
 bitrh:2000,
 //方法
 age:function(){
 ?//今年-出生的年
 ?var now=new Date().getFullYear();
 ?retur now-this.bitrh;
 }
}

5.內(nèi)部對(duì)象

標(biāo)準(zhǔn)對(duì)象:

typeof 11231
'number'
typeof '1213'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1 Date

基本使用

var now =new Date();
 ? now.getFullYear();//年
 ? now.getMonth(); //月
 ? now.getDate(); //日
 ? now.getDay();//星期幾
 ? now.getHours();//時(shí)
 ? now.getMinutes();//分
 ? now.getSeconds();//秒
?
 ? now.getTime();//時(shí)間戳  全世界統(tǒng)一  1970 1.1 0:00:00  毫秒
?
 ? console.log(new Date(1578106175991))

轉(zhuǎn)換

Edge Translation started
now =new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
now.toLocaleString()
'2020/1/4 10:49:35'
now.toLocaleString
? toLocaleString() { [native code] }
now.toGMTString()
'Sat, 04 Jan 2020 02:49:35 GMT'

5.2 JSON

json 是什么

早期,所有數(shù)據(jù)傳輸習(xí)慣使用XML文件!

JSON（JavaScript Object Notation, JS對(duì)象簡(jiǎn)譜）是一種輕量級(jí)的數(shù)據(jù)交換格式。

簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語(yǔ)言。

易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。

在javascript一切皆為對(duì)象,任何js支持的類型都 可以使用JSON來(lái)表示;

格式:

對(duì)象都用{}

數(shù)組都用[]

所有的 鍵值對(duì) 都是用key:value

JSON字符串和JS對(duì)象的轉(zhuǎn)化

var user={
 ? ?name:"qingjiang",
 ? ?age:3,
 ? ?sex:'男'
 ? }
 //對(duì)象轉(zhuǎn)換為json字符串 {"name":"qinjiang":"age":3,"sex":"男"}
 ? var jsonUser =JSON.stringify(user);
 ?//json 字符串轉(zhuǎn)化為對(duì)象  參數(shù)為json 字符串
 ? var obj=JSON.parse('{"name":"qinjiang":"age":3,"sex":"男"}');

很多人搞不清楚,JSON和 JS對(duì)象的區(qū)別

var obj={a:'hello',b:'hellob'};
var json={"a":"hello","b":"hello"};

1解析型語(yǔ)言和編譯語(yǔ)言

1.1概述：計(jì)算機(jī)不能直接理解任何除機(jī)器語(yǔ)言之外的語(yǔ)言，所有必須把程序員所寫的程序語(yǔ)言翻譯成機(jī)器語(yǔ)言才能執(zhí)行程序，程序語(yǔ)言翻譯成語(yǔ)言的工具，被稱為翻譯器。

1.2翻譯器翻譯的方式有兩種：一個(gè)是編譯，另一個(gè)是解釋，兩種方式之間的區(qū)別在于翻譯時(shí)間點(diǎn)不同。

1.3編譯是在代碼執(zhí)行之前進(jìn)行編譯，生成中間代碼文件。

1.4解析器是在運(yùn)行時(shí)進(jìn)行及時(shí)解析，并立即執(zhí)行（當(dāng)編譯器以解釋方式運(yùn)行的時(shí)候，也稱為解釋器）。

類似于請(qǐng)客吃飯：

編譯語(yǔ)言：首先把所有菜做好，才能上桌吃飯。

解析語(yǔ)言：好比吃火鍋，邊吃邊涮，同是進(jìn)行。

5.3 Ajax

原生的js寫法 xhr異步請(qǐng)求

jQuey封裝好的 方法$("#name").ajax("")

axios 請(qǐng)求

6.面向?qū)ο缶幊?/h2>

6.1 什么是面向?qū)ο?/h3>

javascript . java .c# ...面向?qū)ο?javascript 有些區(qū)別!

類:模版

對(duì)象:具體的實(shí)例

在javascript這個(gè)需要大家換一下思想方式!

原型：

 var Student ={
 ? ?name :"qinjing",
 ? ?age:3,
 ? ?run:function(){
 ? ? ? console.log(this.name+"run....");
 ?  }
 ? };
 ?
 ? ?var Bird={
 ? ? ? ?fly:function(){
 ? ? ? ? ? ?console.log(this.name+"fly....")
 ? ? ?  }
 ?  }
 
?
 ? ?var xiaoming={
 ? ? ? ?name:"xiaoming"
 ?  };
?
 ? ?//小明的原型 是Student
 ? ?xiaoming._proto_=Student;
 function Student(name){
 ? ? ? ?this.name=name;
 ?  }
?
 ? ?//給studnet新增一個(gè)方法
 ? ?Student.prototype.hello=function(){
 ? ? ? ?alert("Hello");
 ?  }

class繼承：

class關(guān)鍵字，是在ES6引入的

1、定義一個(gè)類，屬性，方法

 //定義一個(gè)學(xué)生類
 ? ?class Student{
 ? ? ? 
 ? ? ? ?constructor(name){
 ? ? ? ? ? ?this.name=name;
 ? ? ?  }
 ? ? ? ?hello(){
 ? ? ? ? ? ?alert('hello');
 ? ? ?  }
 ?  }
?
var xiaoming=new Student("xiaoming")
var xiaohong=new Student("xiaohong")
xiaoming.hello()

6.2創(chuàng)建對(duì)象的三種方式：利用字面量創(chuàng)建對(duì)象

對(duì)象的調(diào)用：

對(duì)象里面的屬性調(diào)用：對(duì)象，屬性名，這個(gè)小點(diǎn).就理解為“的”

對(duì)象里面屬性的另一種調(diào)用方式：對(duì)象['屬性名']，注意方括號(hào)里面的屬性必須引號(hào)，我們后面會(huì)用。

對(duì)象里面的方法調(diào)用;對(duì)象。方法名（），注意這個(gè)方法名后面一定加括號(hào)

console.log(star.name)//調(diào)用名字屬性
console.log(star['name'])//調(diào)用名字屬性
star.syHi(); ?//調(diào)用sayHi方法，注意，一定不要忘記帶后面的括號(hào)

7.操作BOM對(duì)象（重點(diǎn)）

window代表 瀏覽器窗體

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以調(diào)整瀏覽器窗體試試...

Navigator（不介意使用）:

Navigator,封裝了瀏覽器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47'
navigation.platform
undefined

大多數(shù)時(shí)候，我們不會(huì)使用navigator對(duì)象，因?yàn)闀?huì)被人為修改！

不建議使用這個(gè)屬性來(lái)判斷和編寫代碼

screen:

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location（重要）

location代表當(dāng)前頁(yè)面的URL信息

host:"ww.baidu.com"
href:"https://www.baidu.com/"
protocol:"htpps:"
reload:reload()//網(wǎng)頁(yè)刷新
//設(shè)置新的地址
location.assign('https:blog.kuangstudy.com/')

document代表當(dāng)前的頁(yè)面，HTML DOM文檔樹

documen.title
"百度一下，你就知道"
documen.title='狂神'//改變標(biāo)題
"狂神"

獲取具體的文檔數(shù)節(jié)點(diǎn)

<body>
 ? ?<dl id="app">
 ? ? <dd>JavaSe</dd>
 ? ? <dd>JavaSe</dd>
 ? ? <dd>JavaSe</dd>
 ? ?</dl>
 ? ?<script>
 ? ? ? ?var dl =document.getElementById('app');
 ? ?</script>
</body>

獲取cookie

document.cookie

劫持cookie原理

www.taobao.com

<srcipt src="aa.js"></srcipt>
<!--惡意人員，獲取你的cookie上傳到他的服務(wù)器-->

服務(wù)器端可以設(shè)置cookie：httPOnly

history（不介意使用）:

history代表瀏覽器的歷史記錄

history.back()//后退
history.forward()//前進(jìn)

8、操作 Dom對(duì)象（重點(diǎn)）

核心：瀏覽器頁(yè)面就是一個(gè)Dom樹形結(jié)構(gòu)！

1.更新：更新Dom節(jié)點(diǎn)

2.刪除：刪除一個(gè)Dom節(jié)點(diǎn)

3.添加：添加一個(gè)新的節(jié)點(diǎn)

要操作一個(gè)Dom節(jié)點(diǎn)，就必須要先獲得這個(gè)Dom節(jié)點(diǎn)

獲得dom節(jié)點(diǎn)

<body>
 ? <div id="father">
 ? ?<h1>標(biāo)題</h1>
 ? ?<p id="p1">p1</p>
 ? ?<p class="p2">p2</p>
 ? </div>
 ? ?<script>
 ? ? ? ?var h1=document.getElementsByClassName('h1');
 ? ? ? ?var h1=document.getElementById('p1');
 ? ? ? ?var h1=document.getElementsByClassName('p2');
 ? ? ? ?var father=document.getElementById('father');
?
 ? ? ? ?var childrens=father.childrens;//獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
 ? ? ? ?//father.firsthchild
 ? ? ? ?//father.lastchild
 ? ?</script>

這是原生代碼，之后我們盡量都是用jQuery();

更新節(jié)點(diǎn)：

<body>
 ? ?<div id="id1">
?
 ? ?</div>
</body>
<script>
 ? ?var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText='456' 修改文本值

id1.innerHTML='123'可以解析為HTML文本標(biāo)簽

操作css

id1.style.color='red'; //屬性使用 字符串 包裹
id1.style.fontsize='20px' //-轉(zhuǎn) 駝峰命名
id1.style.oadding='2em'

刪除節(jié)點(diǎn)：

刪除節(jié)點(diǎn)的步驟;先獲取父節(jié)點(diǎn)，在通過父節(jié)點(diǎn)刪除自己

<div>
<h1></h1>
<p id="p1"></p>
<p class="p2"></p>
</div>
<script>
 ? ?var self=document.getElemenByID('P1');
 ? ?var father=p1.parentElement;
 ? ?father.removeChild(p1)
 ? ?
 ? ?
 ? ?//刪除是一個(gè)動(dòng)態(tài)的過程
 ? ?father.removeChile(father.shildren[0])
 ? ?father.removeChile(father.shildren[1])
 ? ?father.removeChile(father.shildren[2])
</script>

注意：刪除多個(gè)節(jié)點(diǎn)的時(shí)候，children是在時(shí)刻變化的，刪除節(jié)點(diǎn)的時(shí)候注意！

插入節(jié)點(diǎn)：

我們獲得Dom節(jié)點(diǎn)，假設(shè)這個(gè)dom節(jié)點(diǎn)是空的，我們通過innerHTML就可以增加一個(gè)元素了，但是這個(gè)DOM節(jié)點(diǎn)已經(jīng)存在元素了，我們就不能這么干了！會(huì)產(chǎn)生覆蓋

追加

<body>
 ? ?<p id="js">JavaScript</p>
 ? ?<div id="list">
 ? ? ?<p id="se">javaSE</p>
 ? ? ?<p id="ee">javaEE</p>
 ? ? ?<p id="me">javaME</p>
 ? ?</div>
</body>
<script>
 ? var js=document.getElementById('js');//已經(jīng)存在的節(jié)點(diǎn)
 ? var list=document.getElementById('list');
 ? list.appendchild(js);//追加到后面
 ? ?//通過JS 創(chuàng)建一個(gè)新的節(jié)點(diǎn)
 ? ?var nweP =document.createElement('p');//創(chuàng)建一個(gè)標(biāo)簽
 ? ?newP.id='newP';
 ? ?newP.innerText='Heelo,Kuang';
 ? ?list.sppendChid(newP);
 ? ?
 ? ?
</script>

創(chuàng)建一個(gè)新的標(biāo)簽，實(shí)現(xiàn)插入

<script>
 ? var js=document.getElementById('js');//已經(jīng)存在的節(jié)點(diǎn)
 ? var list=document.getElementById('list');
 ? list.appendchild(js);//追加到后面
 ? ?//通過JS 創(chuàng)建一個(gè)新的節(jié)點(diǎn)
 ? ?var nweP =document.createElement('p');//創(chuàng)建一個(gè)標(biāo)簽
 ? ?newP.id='newP';
 ? ?newP.innerText='Heelo,Kuang';
 ? ?list.sppendChid(newP);
 ? ?//常創(chuàng)建一個(gè)新的標(biāo)簽節(jié)點(diǎn)（通過這個(gè)屬性，可以設(shè)置任意的值）
 ? ?var myScript=document.createElement('script');
 ? ?myScript.setAttribute('type','text/javascript')
 ? ?var body= document.getElementsByTagName('body');
 ? ?body.style.background='#123'
</script>
insert

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//包含的節(jié)點(diǎn)。insertBefore(newNode,targetNode)
list.merstBerore(js.ee)

結(jié)束語(yǔ)：

首先，恭喜大家已經(jīng)閱讀完整個(gè)JavaScript（簡(jiǎn)單易通），一般而言，不管書籍也好，能夠完整跟下來(lái)的就已經(jīng)很不容易了。所以盡量幫助初學(xué)者減少初級(jí)的困難，其實(shí)一旦掌握了之后，會(huì)發(fā)現(xiàn)它其實(shí)是非常容易。但大道至簡(jiǎn)，知易行難，需要大家之后不斷練習(xí)，在此基礎(chǔ)上加強(qiáng)知識(shí)的認(rèn)知深度。雖然我盡量以通俗易通的形式，將內(nèi)容體現(xiàn)出來(lái)，但水平畢竟有限，望大家海涵。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-783805.html

到了這里，關(guān)于JavaScript 入門(簡(jiǎn)單易懂) 看這一篇就夠了的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！