JavaScript基礎(chǔ)學習目錄

x2it 2023-01-07 發(fā)布于云南

展開全文

一,、JS如何引入及基本語法規(guī)范

1.頁面內(nèi)的script代碼書寫格式

1

2

3

　　code.....

</script>

2.script標簽寫在頁面的哪個位置？

2.1.頁面head里和body后都可以寫
2.2.一般我們建議寫在body之后

3.是否可以引入第三方j(luò)s文件,？

1	<script type='text/javascript' src='/path/to/js文件'></script>

4.JS的注釋方式

1

2

3

4

5

// 這個是單行注釋

/**

這個是多行注釋

**/

快捷鍵：Ctrl + /

5.JS的結(jié)束符號,以分號“,；”為結(jié)束符號，如果沒有的話,，js引擎會自動加上

二,、變量聲明

命名規(guī)范

1.JS的變量名可以使用 _，數(shù)字,，字母,，$ 組成，且不能以數(shù)字開頭
2.聲明變量使用 var 變量名來進行聲明

1

2

3

4

5

6

7

8

9

var a = 34;

var b = 45;

console.log(a+b);

var $ = 'jquery'

alert($);

c = 56;

alert(c);

注意：變量名區(qū)分大小寫str和Str不是一個變量,，也就是js對變量名的大小寫是敏感的

三,、JS變量類型

js的變量類型主要包括：

數(shù)值
字符串
布爾
null
undefined
數(shù)組
對象

1) 數(shù)值類型
js不區(qū)分整型和浮點型

1

2

3

var a = 23;

var b = 34;

console.log(a);

常用的方法

parseInt(..) 將某值轉(zhuǎn)換成數(shù)字，不成功則NAN
parseFloat(..) 將某值轉(zhuǎn)換成浮點數(shù),，不成功則NAN
1
2
parseInt('3.5')
parseFloat('2.3dd')

2) 字符串類型

1

2

3

4

5

var a = 'hello'

var b = 'world'

var str = a + b;

console.log(str);

常用的方法:

obj.length　　　　　　　　　　　　　　長度
obj.trim()　　　　　　　　　　　　　　　移除空白
obj.trimLeft() 移除左側(cè)空白
obj.trimRight() 移除右側(cè)空白
obj.charAt(n)　　　　　　　　　　　　　返回字符串中的第n個字符
obj.concat(value, …)　　　　　　　　拼接
obj.indexOf(substring,start)　　　　子序列位置
obj.substring(from, to)　　　　　　　根據(jù)索引獲取子序列
obj.slice(start, end)　　　　　　　　切片
obj.toLowerCase()　　　　　　　　　　小寫
obj.toUpperCase()　　　　　　　　　　大寫
obj.split(delimiter, limit)　　　　　分割

注意：拼接字符串的操作符：”+”

1

2

3

4

5

6

7

8

9

10

11

console.log(3 + 2 + "hello" + 5 + "world");

```

**3) 布爾類型**

**true和false要求是要小寫的**

```javascript

var a = true;

var b = false;

4) 數(shù)組型
javascript中的數(shù)組類似于我們Python中的列表

1 2	var arr = ['alex','鳳姐','蒼老師']; console.log(arr[2]);

常用的方法:

obj.length 　　數(shù)組的大小
obj.push(ele) 　　尾部追加元素
obj.pop() 　　尾部獲取一個元素
obj.unshift(ele) 　　頭部插入元素
obj.shift() 　　頭部移除元素
obj.slice( ) 　　切片
obj.reverse( ) 　　反轉(zhuǎn)
obj.join(sep) 　　將數(shù)組元素連接起來以構(gòu)建一個字符串
obj.concat(val,..)　　連接數(shù)組
obj.sort( ) 　　對數(shù)組元素進行排序

此時如果我們想要循環(huán)數(shù)組中的內(nèi)容,，我們可以這樣:

1

2

3

4

5

var arr = ['alex','鳳姐','蒼老師'];

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

　　console.log(arr[i]);

}

5) 對象型
javascript中的對象類似于我們Python中的字典,json數(shù)據(jù)格式

1

2

3

var info = {"name":'alex',"age":73}

console.log(info.name);

console.log(info['name']);

此時如果我們想要循環(huán)對象中的內(nèi)容，我們可以這樣:

1

2

3

4

var info = {"name":'alex',"age":73}

for(var i in info){

　　console.log(info[i]);

}

6) null和undefined

1.undefined 表示的是當聲明的變量未初始化時,，該變量的默認值是 undefined
2.null 表示的是值不存在

兩者的區(qū)別在于：

undefined 是聲明了變量但未對其賦予值
null 則用于表示尚未存在的空值

四,、運算符介紹

1) 算數(shù)運算符

1	+ - * / % ++ --

2) 比較運算符

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

=== 比較值和類型

== 比較值

3) 邏輯運算符

1	&&　　 \|\|　　！

4) 賦值運算符

1	=　　 +=　　 -=　　 *= 　　/=

五,、流程控制

1）if–else語句

1

2

3

4

5

if (條件){

　　當條件為 true 時執(zhí)行的代碼

}else{

　　當條件不為 true 時執(zhí)行的代碼

}

2）if–else if–else語句

1

2

3

4

5

6

7

if (條件 1){

　　當條件 1 為 true 時執(zhí)行的代碼

}else if (條件 2){

　　當條件 2 為 true 時執(zhí)行的代碼

}else{

　　當條件 1 和條件 2 都不為 true 時執(zhí)行的代碼

}

3)switch語句

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

var day=new Date().getDay();

switch (day){

case 0:

　　x="Today it's Sunday";

　　break;

case 1:

　　x="Today it's Monday";

　　break;

case 2:

　　x="Today it's Tuesday";

　　break;

case 3:

　　x="Today it's Wednesday";

　　break;

default:

　　x="Looking forward to the Weekend";

}

4）while循環(huán)語句

1

2

3

4

while (i<5){

　　x=x + "The number is " + i + "<br>";

　　i++;

}

5) 三元運算符

1

2

3

4

5

var a = 3;

var b = 5;

c = a > b ? a : b

console.log(c);

六,、函數(shù)

1.函數(shù)的定義
注意：javascript中的函數(shù)和python的中函數(shù)大同小異，唯一不同的是函數(shù)的定義方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1.正常的定義方式 ---- 普通青年

function test(a,b){

　　return a + b;

}

2.匿名函數(shù)的定義方式 ---- 2B青年

var sum = function(a, b){

　　return a + b;

}

3.立即調(diào)用函數(shù)方式 ----- 文藝青年

(function(a, b){

　　return a + b;

})();

2.函數(shù)的全局變量和局部變量

全局變量：定義在函數(shù)外部,，并且推薦使用var進行顯式聲明
局部變量：定義在函數(shù)內(nèi)部,，并且必須使用var進行顯式聲明

1

2

3

4

5

6

7

8

9

10

// 全局變量

age = 73;

function test(){

// 局部變量

var height = 178;

// 默認全局變量

leg = 4;

}

3.函數(shù)作用域
首先在函數(shù)內(nèi)部查找變量，找不到則到外層函數(shù)查找,，逐步找到最外層
即window對象,，并操作window對象上的屬性

1

2

3

4

5

6

console.log(window.a, window.b);

function test(){

　　var a = "local";

　　b = "global";

}

console.log(window.a, window.b);

七、常見的模塊和常用方法

1.日期類Date

var d = new Date();　　　返回當日的日期和時間

getYear() 　　　　　　　從 Date 對象返回一個月中的某一天 (1 ~ 31)
getFullYear()　　　　　從 Date 對象以四位數(shù)字返回年份
getMonth() 　　　　　　從 Date 對象返回月份 (0 ~ 11)
getDate() 　　　　　　　從 Date 對象返回一個月中的某一天 (1 ~ 31)
getDay() 　　　　　　　從 Date 對象返回一周中的某一天 (0 ~ 6)
getHours() 　　　　　返回 Date 對象的小時 (0 ~ 23)
getMinutes()　　　　　返回 Date 對象的分鐘 (0 ~ 59)
getSeconds() 　　　　返回 Date 對象的秒數(shù) (0 ~ 59)

案例 — 時鐘顯示：

1

2

3

4

5

6

7

8

當前時間：<input type='text' value='' id='time'/>

function change(){

　　var time = document.getElementById("time");

　　var d = new Date();

　　time.value = d;

}

setInterval(change, 1000);

2.Math數(shù)學對象

Math.ceil(數(shù)值) 　　　　向上取整
Math.floor(數(shù)值) 　　　向下取整
Math.round(數(shù)值) 　　　把數(shù)四舍五入為最接近的整數(shù)
Math.min(數(shù)值1,數(shù)值2)　　　返回最小值
Math.max(數(shù)值1,數(shù)值2) 　　返回最大值
Math.random() 　　　　　獲得0-1之間的隨機數(shù)

3.常見的其他函數(shù)

在數(shù)據(jù)傳輸流程中,，json是以文本,，即字符串的形式傳遞的，而JS操作的是JSON對象,，所以,，JSON對象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵，例如：

JSON字符串：

var str1 = '{ “name”: “alex”, “sex”: “feng” }’;

JSON對象：

var str2 = { “name”: “alex”, “sex”: “feng” };

JSON字符串轉(zhuǎn)換成JSON對象：

var obj = JSON.parse(str); // 序列化

JSON對象轉(zhuǎn)換成JSON字符串：

var str = JSON.stringify(obj); // 反序列化

eval

python中的eval執(zhí)行的是表達式,，exec執(zhí)行的是代碼,，而js中的eval既能執(zhí)行的表達式,，也能執(zhí)行代碼

4.URI轉(zhuǎn)義

1

2

3

4

5

6

decodeURI() 解碼URI

decodeURIComponent() 解碼URI中的組件部分

encodeURI() 編碼URI

encodeURIComponent() 編碼URI中的組件部分

escape() 對字符串進行轉(zhuǎn)義

unescape() 對字符串進行解碼

八、this的指向問題

javascript中的this有點類似于Python中的self
即哪個對象調(diào)用當前的方法或?qū)傩?，那此時this就是哪個對象，但在js中this的指向總共分為三種：

1.this指向window

1

2

3

4

5

6

7

8

9

10

11

console.log(this);

var a = 10;

var b = 20;

function f1(){

　　var a = 100;

　　var b = 200;

　　console.log(this);

　　console.log(this.a);

　　console.log(this.b);

}

f1();

2.this指向元素節(jié)點對象

1

2

3

4

var mydiv = document.getElementById('info');

mydiv.onclick = function(){

　　console.log(this.innerText);

};

3.this指向當前對象

1

2

3

4

5

6

7

8

9

var name = 'john';

function run(){

　　console.log(this.name + ' is running...');

}

run();

var jim = {'name':'jim', 'leg':4, 'age':28};

jim.walk = run;

jim.walk();

九,、詞法分析

js在調(diào)用函數(shù)的那一瞬間,，會先進行詞法分析

詞法分析的過程：

當函數(shù)調(diào)用的前一瞬間,先形成一個激活對象,叫Active Object, AO,并會分析以下3個方面的東西:
1:函數(shù)參數(shù)，如有,，則將此參數(shù)付給AO上,，并且值為undefined。如沒有,，則不做任何操作
2:函數(shù)局部變量,，如AO上有，則不做任何操作,。如沒有,，則將此變量賦給AO，并且值為undefined
3:函數(shù)聲明,，如AO上有,，則會將AO上的對象覆蓋。如沒有,，則不做任何操作
函數(shù)內(nèi)部無論是使用參數(shù),還是使用局部變量,都到AO上找.

1

2

3

4

5

6

7

8

9

function t(age) {

　　console.log(age);

　　var age = 99;

　　console.log(age);

　　function age() {

}

console.log(age);

}

t(12);

分析過程：
1,、分析參數(shù)，有一個參數(shù),，形成一個 AO.age=undefined;
2,、分析變量聲明，有一個 var age, 發(fā)現(xiàn) AO 上面已經(jīng)有一個 AO.age,，因此不做任何處理
3,、分析函數(shù)聲明，有一個 function age(){} 聲明,，則把原有的 age 覆蓋成 AO.age=function(){};
最終,，AO上的屬性只有一個age，并且值為一個函數(shù)聲明

注意：函數(shù)聲明的優(yōu)先級是最高的,，誰都覆蓋不了這個值

執(zhí)行過程
注意：執(zhí)行過程中所有的值都是從AO對象上去尋找
1,、執(zhí)行第一個 console.log(age) 時，此時的 AO.age 是一個函數(shù),，所以第一個輸出的一個函數(shù)
2,、這句 var age=99; 是對 AO.age 進行賦值，此時AO.age=99 ,，所以在第二個輸出的是 99
3,、同理第三個輸出的是 99, 因為中間沒有改變 age 值的語句了

練習：

1

2

3

4

5

6

7

var str = "global";

function t(){

　　console.log(str);

　　var str = "local";

　　console.log(str);

}

t();

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導購買等信息，謹防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點擊一鍵舉報。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

JavaScript基礎(chǔ)學習目錄

1.日期類Date

2.Math數(shù)學對象

3.常見的其他函數(shù)

4.URI轉(zhuǎn)義

1.this指向window

2.this指向元素節(jié)點對象

3.this指向當前對象