HTML 表單下拉，文字域 label標籤等

阿新 • • 發佈：2022-04-22

1.概述

定義：最流行的指令碼語言
指令碼語言：不用編譯，連結等
為什麼學習：在Web世界裡，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與使用者互動。flash已經被淘汰
別名：ECMAscript

版本：es標準，本筆記是es6

引入:JavaScript程式碼可以直接嵌在網頁的任何地方，不過通常我們都把JavaScript程式碼放到 head 中,由 script 包含的程式碼就是JavaScript程式碼，它將直接被瀏覽器執行。

第二種方法是把JavaScript程式碼放到一個單獨的.js檔案，然後在HTML中通過 <script src="..."></script> 引入這個檔案

IDA:我喜歡用webstorm，當然vscode，sublime text,notepad++,idea,hbuilder也很好

說明：ida裡面不能直接除錯，要用瀏覽器的console

2. 快速入門

2.1 基本語法

每個語句後後面都要加上引號，當然你不寫也是可以的，但是程式碼多了之後，可能會有未知的問題，建議寫上
變數:所有資料型別都是val
'hello,world'可以是一個完整的語句
語句塊｛｝
js不強制要求縮排，但是為了助與程式碼理解，最好這麼做
註釋：/**/,//都支援
==和===,兩個是比較值，三個是絕對等於，比較值和資料型別

2.2 資料型別和變數

number:不區分整數，浮點數，NAN不是一個數，Infinity:無限大

字串：'',""
布林值：true,false 且&& 或|| 非！
null和undefined：空值和未被定義，大多數情況用null
陣列：兩種方式

new Array(1, 2, 3); // 建立了陣列[1, 2, 3]
var arr = [1, 2, 3.14, 'Hello', null, true]
第一種可讀性太差，建議用第二種直接[]

變數名
大小寫英文，數字，$，_，不能數字開頭，不能時js關鍵詞，變數名也可以是中文
不用val宣告的變數會被視為全域性變數，建議用let定義區域性變數
js是動態語言，在JavaScript中，使用等號 = 對變數進行賦值。可以把任意資料型別賦值給變數，同一個變數可以反覆賦值，而且可以是不同型別的變數，但是要注意只能用 var 申明一次
而java是靜態語言,這麼寫會報錯

var a = 123; // a的值是整數123
a = 'ABC'; // a變為字串

2.3 嚴格模式

由於js過於隨意，怎麼寫都不會報錯
於是為了程式碼的規範性和可讀性出現了嚴格模式
啟用strict模式的方法是在JavaScript程式碼的第一行寫上：'use strict';

2.4字串

轉移字元
和別的程式語言差不多

\n
\t
\

還可以用個Unicode字元如：\u4e2d\u6587=中文

多行字串：反引號``
字串連線

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '歲了!';
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

字串函式
如果對字串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果

var s = 'Test';
s[0] = 'X';
alert(s); // s仍然為'Test'

JavaScript為字串提供了一些常用方法，注意，呼叫這些方法本身不會改變原有字串的內容，而是返回一個新字串：

2.5 陣列

長度：對 Array 的索引進行賦值會直接修改這個 Array
索引賦值
對 Array 的索引進行賦值會直接修改這個 Array

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr現在變為['A', 99, 'C']

請注意，如果通過索引賦值時，索引超過了範圍，同樣會引起 Array 大小的變化：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr變為[1, 2, 3, undefined, undefined, 'x']

常用函式

2.5.4多維陣列

2.6物件

js萬物皆可物件

定義一個物件,有點像python裡的字典

var person = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
}

獲取物件屬性：person.name

2.7流程控制

if：和c差不多

var age = 3;
if (age >= 18) {
alert('adult');
} else if (age >= 6) {
alert('teenager');
} else {
alert('kid');
}

for迴圈
基礎語法：

for (i=1; i<=10000; i++) {
x = x + i;
}

for in：和python的for in 差不多，但是js中的是迴圈角標,並且返回字串型別變數/常量

var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}

while

var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500

do while

var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100

2.8Map和Set

Map:字典

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

new：繼承Map的類的一部分方法和值
初始化：兩種
var m = new Map();
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
有很多操作方法：網上現用現查

Set:集合
重複新增不會有效果

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

迭代器（特指map,set）

for of

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
console.log(x);//'A','B','C'
}
for (var x of s) { // 遍歷Set
console.log(x);//'A','B','C'
}
for (var x of m) { // 遍歷Map
console.log(x[0] + '=' + x[1]);//0='A',1='B',2='C'
}

3.函式

不在物件內：函式
在物件內：方法

3.1函式的定義

如果沒有 return 語句，函式執行完畢後也會返回結果，只是結果為 undefined

兩種定義方式

方法一

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

方法二匿名函式

var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};//注意分號

3.2函式的呼叫

引數處理
不給引數：返回NAN
給對應的引數：正常執行
給很多引數：只看前幾個
arguments
arguments ：可以獲得呼叫者傳入的所有引數。也就是說，即使函式不定義任何引數，還是可
以拿到引數的值
rest
獲取額外的引數

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}

rest引數只能寫在最後，前面用 ... 標識,多餘的
引數以陣列形式交給變數 rest ，

3.3變數作用域

函式體外：全域性變數：var
函式體內：區域性變數：let
常量：const//像java靠近了
2. JavaScript的函式在查詢變數時從自身函式定義開始，從“內”向“外”查詢。如果內部函式定義了與外部函式重名的變數，則內部函式的變數將“遮蔽”外部函式的變數。
3. JavaScript的函式定義有個特點，它會先掃描整個函式體的語句，把所有申明的變數“提升”到函式頂部：

var x = 'Hello, ' + y;
console.log(x);
var y = 'Bob';

相當於

var y; // 提升變數y的申明，此時y為undefined
var x = 'Hello, ' + y;
console.log(x);
y = 'Bob';

規範：在一開始就宣告所有變數

全域性作用域
JavaScript預設有一個全域性物件 window ，全域性作用域的變數實際上被繫結到 window 的一個屬性
不同開發者的全域性變數可能會同名，產生衝突
比如說：alert()=window.alert()

解決方法：自定義一個全域性變數

// 唯一的全域性變數MYAPP:
var MYAPP = {};
// 其他變數:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

3.4方法

定義：

var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};

this
它在內部使用了一個 this 關鍵字
在一個方法內部， this 是一個特殊變數，它始終指向當前物件，也就是 xiaoming 這個變數。所
以， this.birth 可以拿到 xiaoming 的 birth 屬性。
拆開寫

function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};

apply
控制 this 的指向
它接收兩個引數，第一個引數,就是需要繫結的 this 變數，第二個引數是 Array ，表示函式本身的引數

function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};
xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 引數為空,否則單獨呼叫，this指向window物件，返回undefined

4.標準物件

4.1檢視物件名

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

4.2Data

時間戳：定義為從格林威治時間1970年01月01日00時00分00秒起至現在的總毫秒數,與時區無關
獲取時間戳
new Date().getTime()
時區：Date 物件表示的時間總是按瀏覽器所在時區顯示的，不過我們既可以顯示本地時間，也可以顯示調整後的UTC時間：

var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22'，本地時間（北京時區+8:00），顯示的字串與作業系統設定的格式有關
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC時間，與本地時間相差8小時

4.3json

定義
JSON(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式，目前使用特別廣
泛。
採用完全獨立於程式語言的文字格式來儲存和表示資料。
簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。
易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率
JSON 鍵值對是用來儲存 JavaScript 物件的一種方式，和 JavaScript 物件的寫法也大同小異，鍵/值對組合中的鍵名寫在前面並用雙引號 "" 包裹，使用冒號 : 分隔，然後緊接著值：

{"name": "QinJiang"}
{"age": "3"}
{"sex": "男"}

從JSON字串轉換為JavaScript 物件，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//結果是 {a: 'Hello', b: 'World'}

從JavaScript 物件轉換為JSON字串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//結果是 '{"a": "Hello", "b": "World"}'

5.面向物件程式設計

5.1. 類：模版，物件：示例

5.2. js中模版叫原型proto

5.3. JavaScript的原型鏈和Java的Class區別就在，它沒有“Class”的概念，所有物件都是例項，所謂繼承關係，不過是把一個物件的原型指向另一個物件而已。

var Bird = {
fly: function () {
console.log(this.name + ' is flying...');
}
};
xiaoming.__proto__ = Bird;

5.4. 上面所說的寫法過於複雜，es6中引入了class

之前：

function Student(name) {
this.name = name;
}
// 現在要給這個Student新增一個方法
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
}

es6

class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}

class 的定義包含了建構函式 constructor 和定義在原型物件上的函式hello() （注意沒有 function 關鍵字），這樣就避免了 Student.prototype.hello =function () {...} 這樣分散的程式碼。

5.5. class繼承

extends繼承
constructor建構函式
super呼叫父類建構函式
建構函式和python有點像

class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 記得用super呼叫父類的構造方法!
this.grade = grade;
}
myGrade() {
alert('I am at grade ' + this.grade);
}
}

6.操作BOM

6.1. BOM瀏覽器，browser

6.2. 主流瀏覽器核心：

ie->edge:chrome核心：windows
chrome：windows
safari：蘋果
firefox：linux自帶
opear:市場佔額太小

其他瀏覽器都是做的殼子，呼叫這幾個核心

6.3. window

含義:瀏覽器視窗
方法：innerWidth 和 innerHeight ，outerWidth 和 outerHeight 獲取內外視窗長寬大小

6.4. navigator

含義：瀏覽器
方法:
navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設定的語言；
navigator.platform：作業系統型別；
navigator.userAgent：瀏覽器設定的 User-Agent 字串。

6.5. screen

含義：螢幕
方法：
screen.width：螢幕寬度，以畫素為單位；
screen.height：螢幕高度，以畫素為單位；

6.6. location

含義：當前頁面的URL資訊，http://www.example.com:8080/path/index.html?a=1&b=2#TOP
方法：
location.reload();
location.assign('https://blog.kuangstudy.com/'); // 設定一個新的URL地址

6.7document.cookie; // 'v=123; remember=true; prefer=zh'//獲取cookie，容易發生cookie劫持，所以很多網站會把這個設定為httponly，只讀模式，不可被獲取

6.8. history

含義:歷史介面
方法：由於現在大量使用ajax和頁面互動，所以程式設計時不推薦使用history
history.back()
history.towards()

7.操作 DOM

7.1. 含義：當前頁面，整個DOM樹的根節點。

7.2. 獲取節點:在操作一個DOM節點前，我們需要通過各種方式先拿到這個DOM節點

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName() 。
document.getElementsByTagName() 和 document.getElementsByClassName() 總是返
回一組DOM節點，是個陣列，例如：body[0]，這樣定位

// 返回ID為'test'的節點：
var test = document.getElementById('test');
// 先定位ID為'test-table'的節點，再返回其內部所有tr節點：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID為'test-div'的節點，再返回其內部所有class包含red的節點：
var reds = document.getElementById('testdiv').getElementsByClassName('red');
// 獲取節點test下的所有直屬子節點:
var cs = test.children;
// 獲取節點test下第一個、最後一個子節點：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二種方法是使用 querySelector() 和 querySelectorAll() :不瞭解

7.3. 更新DOM

p.innerHTML：body內且包含標籤，會覆蓋
p.innerText：body內不包含標籤，會覆蓋
修改css；
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

7.4. 插入DOM

appendChild
html程式碼

<!-- HTML結構 -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>

js程式碼

var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);

html最終

<!-- HTML結構 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>

會從零建立一個新的節點，然後插入到指定位置

var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

7.5. d.setAttribute('type', 'text/css'):新增屬性

7.6. insertbefore

list.insertBefore(haskell, ref):haskell插入到ref之前

7.7. 刪除DOM

parent.removeChild(self);

8.操作表單

8.1. 輸入控制元件

文字框，對應的 <input type="text"> ，用於輸入文字；
口令框，對應的 <input type="password"> ，用於輸入口令；
單選框，對應的 <input type="radio"> ，用於選擇一項；
複選框，對應的 <input type="checkbox"> ，用於選擇多項；
下拉框，對應的 <select> ，用於選擇一項；
隱藏文字，對應的 <input type="hidden"> ，使用者不可見，但表單提交時會把隱藏文字傳送到
伺服器。

8.2. 獲取值

如果我們獲得了一個 <input> 節點的引用，就可以直接呼叫 value 獲得對應的使用者輸入值

這種方式可以應用於 text 、 password 、 hidden 以及 select 。但是，對於單選框和複選
框， value 屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是使用者是否“勾上了”選項，所
以應該用 checked 判斷：
mon.checked; // true或者false
tue.checked; // true或者false

8.3. 設定值

var input = document.getElementById('email');
input.value = '[email protected]'; // 文字框的內容已更新
對於單選框和複選框，設定 checked 為 true 或 false 即可。

8.4. 提交表單

最後，JavaScript可以以兩種方式來處理表單的提交（AJAX方式在後面章節介紹）。
方式一是通過 <form> 元素的 submit() 方法提交一個表單，例如，響應一個 button 的
click 事件，在JavaScript程式碼中提交表單：

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器預設點選 <button type="submit"> 時
提交表單，或者使用者在最後一個輸入框按回車鍵。因此，第二種方式是響應 <form> 本身的
onsubmit 事件，在提交form時作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 繼續下一步:
    return true;
}
</script>

注意要 return true 來告訴瀏覽器繼續提交，如果 return false ，瀏覽器將不會繼續提交
form，這種情況通常對應使用者輸入有誤，提示使用者錯誤資訊後終止提交form。
在檢查和修改\ 時，要充分利用 <input type="hidden"> 來傳遞資料。
例如，很多登入表單希望使用者輸入使用者名稱和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是
口令的MD5。普通JavaScript開發人員會直接修改 <input> ：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
<script>
function checkForm() {
    var pwd = document.getElementById('password');
    // 把使用者輸入的明文變為MD5:
    pwd.value = md5(pwd.value);
    // 繼續下一步:
    return true;
}
</script>

這個做法看上去沒啥問題，但使用者輸入了口令提交時，口令框的顯示會突然從幾個 * 變成32個
* （因為MD5有32個字元）。
要想不改變使用者的輸入，可以利用<input type="hidden"> 實現：

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把使用者輸入的明文變為MD5:
    md5_pwd.value = md5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>