《寶可夢朱紫》各獎章獲取教程

阿新 • • 發佈：2022-11-29

JavaScript

JavaScript

一.JavaScript簡介

1.ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。次年，ECMA釋出262號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，但是沒有稱其為JavaScript，有兩個方面的原因。一是商標，JavaScript本身已被Netscape註冊為商標。而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

因此ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

2.JavaScript語言

JavaScript 是指令碼語言

JavaScript 是一種輕量級的程式語言。

JavaScript 是可插入 HTML 頁面的程式設計程式碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript 很容易學習。

JavaScript 在剛誕生的時候，它的名字叫 “LiveScript”。但是因為當時 Java 很流行，所以決定將一種新語言定位為 Java 的“弟弟”會有助於它的流行。

隨著 JavaScript 的發展，它已經成為了一門完全獨立的語言，並且也擁有了自己的語言規範 ECMAScript。現在，它和 Java 之間沒有任何關係。

可以在網頁上實現複雜的功能，網頁展現給你的不再是簡單的靜態資訊，而是實時的內容更新，互動式的地圖，2D/3D 動畫，滾動播放的視訊等等

3.HTML、CSS、JavaScript

HTML是一種標記語言，用來結構化我們的網頁內容並賦予內容含義，例如定義段落、標題和資料表，或在頁面嵌入圖片和視訊。
CSS是一門樣式規則語言，可將樣式應用於HTML內容，例如設定背景顏色和字型，在多個列中佈局內容。
JavaScript是一種指令碼語言，可以用來建立動態更新的內容，控制多媒體，製作影象動畫，還有很多。

二.JavaScript基礎之語言規範

1.如何使用？

head內script標籤內編寫
head內script標籤src屬性引入外部js資源
body內最底部通過script標籤src屬性引入外部js資源(最常用)

2.註釋語法

// 單行註釋
/*多行註釋*/

3.結束符

JavaScript中的語句要以分號；為結束符

三.JavaScript基礎

JavaScript也是一門面向物件的程式語言，即一切皆物件！！！

name = 'jason'
name = 123
name = [1, 2, 3, 4]

name可以指向任意的資料型別
但是又一些語言中，變數名之間指向一種後續不能更改

1.變數與常量

1).變數宣告

在js中，首次定義一個變數名的時候需要用關鍵字宣告

1.關鍵字var
	var name = 'jason' // 全部都是全域性變數
    
2.關鍵字let
	let name = 'tony'  // 可以宣告區域性變數

他們倆的區別：
	var在for迴圈裡面定義也會影響到全域性
    let在區域性定義只會在區域性生效
    
"""
ps：let是ECMA6新語法，可以在全域性定義變數，不影響全域性
"""

2.常量

python中沒有真正意義上的常量，預設全大寫就是表示常量
js中有真正意義上的常量，需要使用關鍵字const宣告，這個常量不允許更改，一旦進行更改就會報錯

const pi = 3.14
pi = 3.44  // 報錯

2.變數的命名規範

變數名是區分大小寫的
JavaScript推薦使用駝峰式命名規範。

1.變數名命名規範(比python多一個&)
	數字、字母、下劃線、&
2.變數名命名規範(不遵循也可以)
	1.js中推薦使用駝峰式命名
    	userName
        dataOfDb
    2.python推薦使用下劃線的方式
    	user_name
        data_of_db
3.不能使用關鍵字作為變數名

3.支援編寫js程式碼的地方

1.可以單獨開設js檔案書寫
2.也可以直接在瀏覽器提供的console介面書寫
再用瀏覽器書寫js的時候，左上方的清空按鈕只是清空當前介面，程式碼其實還在，如果你想要重新來，重新整理或者重新開設一個頁面
	(在使用瀏覽器書寫你自己的js
	程式碼的時候推薦你在自己的html頁面開啟)

4.基本資料型別

如何檢視當前資料型別>>>:typeof 變數名;

js、python是一門動態型別，變數名繫結的資料值型別不固定

var name = 'jason'
name = 123
name = [11, 22, 33]

1).資料型別之數值型別(關鍵字number)

在js中不分整型、浮點型，統稱之為數值型別

var a = 11;
var b = 11.11;
typeof a;
typeof b;

'number'
整型、浮點型都是number型別

2).資料型別之型別轉換

parseInt()		轉換整型
perseFloat()	轉換浮點型

parseInt('123')
123
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('11adasdasdasd11')
11
parseInt('asddsad11')
NaN  // 屬於數值型別 表示的意思是 不是一個數字

為了與前端迎合，js做到了儘量避免報錯

3).資料型別之字元型別(string)

var a = "Hello";
var b = "world";
var c = a + b;
console.log(c);  // 得到Helloworld
var s = 'jason';
typeof s
'string'
var s1 = 'jason'
typeof s1;
'string'
var s2 = '''body'''
VM1243:1 Uncaught SyntaxError: Unexpected string  // 不支援三引號

1.模板字串

模板字串除了可以定義多行文字外還可以實現格式化字串操作

var s3 = `asadsadsad`  // 數字1左邊的那個符號`
undefined
typeof s3
'string'
模板字串替換
書寫${}會自動去前面找大括號裡面的變數名對應的值
如果沒有定義直接報錯
案例：
var name = 'jason'
var age = 18
var sss = `
my name is ${name} and my age is ${age}
`
sss
'my name is jason and my age is 18'

2.字串的拼接(內建方法)

在python中不推薦使用 + 做拼接，使用join
在JavaScript中推薦使用 + 做拼接，並且支援不同型別直接的拼接，它會自動儘自己最大的可能去進行型別轉換然後拼接
var name = jason
var age = 18
name + jason
jason18

4).js常見內建方法

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字元
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

5).布林型別(Boolean)

JS裡面的布林值與Python不同，JS是純小寫的(true，false)，Python是首字母大寫(True，False)

6).null與undefined

null表示值為空(曾經擁有過)，undefined表示沒有定義(從來沒有過)

7).物件(object)

物件之陣列(Array)>>>:類似於python中的列表
	let l1 = []
物件之自定義物件(object)>>>:類似於python的字典
	let d1 = {'name':'jason'}
    let d2 = new object()

5.運算子

1).算術運算子

+ - * / % ++(自增1) --(自減1)
var x=10;
var res1=x++;	加號在後面	先賦值後自增
var res2=++x;	加號在前面	先自增後賦值

2).比較運算子

!=(值不等 弱) ==(值相等 弱) ===(值相等 強) !==(值不等 強)

$\textcolor{red}{注意:}$

1 == “1”  // true  弱等於
1 === "1"  // false 強等於
//上面這張情況出現的原因在於JS是一門弱型別語言(會自動轉換資料型別)，所以當你用兩個等號進行比較時，JS內部會自動先將
//數值型別的1轉換成字串型別的1再進行比較，所以我們以後寫JS涉及到比較時儘量用三等號來強制限制類型，防止斷錯誤

3).邏輯運算子

&&(與)	||(或)  !(非)

4).賦值運算子

= += -= *= /=

6.流程控制

單if分支

if (條件){
    條件成立執行的程式碼
}

if-else分支

if(條件){
    條件成立執行的程式碼
}else{
    條件不成立執行的程式碼
}

if-else if-else分支

if(條件1){
    條件成立執行的程式碼
}else if(條件2){
    條件1不成立條件2執行的程式碼
}else{
    條件1和2都不成立執行的程式碼
}

switch語法

如果分支結構中else if很多可以考慮使用switch語法

switch(條件){
    case 條件1:
        條件1成立執行的程式碼;
        break;	//如果沒有break會基於某個case一直執行下去
    case 條件2:
        條件2成立執行的程式碼;
        break;
    case 條件3:
        條件3成立執行的程式碼;
        break;
    case 條件4:
        條件4成立執行的程式碼;
        break;
    default:
  		條件都不滿足執行的程式碼
}

for迴圈

for(起始條件;迴圈條件;條件處理){
    迴圈體程式碼 
}
實操：
for(let i=0;i<10;i++){
    console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
    console.log(k)
}

while迴圈

while(迴圈條件){
    迴圈體程式碼
}

三元運算

python：值1 if條件 else 值2
JS中：條件?值1:值2

7.函式

function 函式名(形參){
    // 函式註釋
    函式體程式碼
    return 返回值
}
// 匿名函式
var s1 = function(a, b){
    return a + b;
}

//箭頭函式
var f = v => v;
var f = function(v){
    return v;
}

var f = () => 5;
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
    return num1 + num2;
}

$\textcolor{red}{注意:}$

1.JS中函式的形參與實參個數可以不對應
	傳少了就是undefined，傳多了不要
2.函式體程式碼中有一個關鍵字arguments用來接收所有的實參
3.函式的返回值如果有多個需要自己處理成一個整體

8.內建物件

Date物件

建立Date物件

//方法1：不指定引數
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：引數為日期字串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());

//方法3：引數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：引數為年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

Data物件的方法

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完整年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON物件

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字串轉換成物件（反序列化）
var obj = JSON.parse(str1); 
// 物件轉換成JSON字串（序列化）
var str = JSON.stringify(obj1);

RegExp物件

應用正則表示式的物件

定義正則表示式的兩種方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗資料
reg1.test('jason666')
reg2.test('jason666')

$\textcolor{red}{注意事項:}$

1.正則表示式中不能有空格

2.全域性匹配時有一個lastIndex屬性

// 全域性匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
//使用match進行匹配的時候，返回的是一個物件，如果有值就會在前面顯示出來

var s1 = 'asfdasddfasf aqgwefqwef asdfae'

s1.match(/s/)
結果：['s', index: 1, input: 'asfdasddfasf aqgwefqwef asdfae', groups: undefined]
s1.match(/s/g)
結果：(4) ['s', 's', 's', 's']

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;

當我們在正則表示式的後面寫上一個g的時候表示全域性匹配，這時候游標的移動跟檔案的讀取相似，當讀取到末尾的時候會出現沒有資料可讀的情況，這時候就會返回false，並且重置游標到開頭，我們可以使用lastIndex方法來檢視游標目前所在的位置。

注意事項三：test匹配資料不傳預設傳undefined

// 校驗時不傳引數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();