js基础
JavaScript
"""
JavaScript（JS）是腳本編程語(yǔ)言，JS語(yǔ)言開(kāi)發(fā)的文件是以.js為后綴，通過(guò)在html文件中引入該js文件來(lái)控制html代碼的交互功能以及前臺(tái)數(shù)據(jù)處理的業(yè)務(wù)邏輯（js語(yǔ)言代碼也可以直接寫(xiě)在html文件中），采用的ECMAScript語(yǔ)法，屬于編程語(yǔ)言。
ECMAScript目前普遍使用的存在ES5與ES6兩個(gè)版本，我們也會(huì)基于這兩個(gè)版本來(lái)介紹JS這么應(yīng)用的學(xué)習(xí)
ES5:基于對(duì)象語(yǔ)言(沒(méi)有class)，通常學(xué)的多。
ES6:面向?qū)ο笳Z(yǔ)言，有新特性，新框架。
"""
"""
學(xué)習(xí)方向：從JS代碼書(shū)寫(xiě)位置、JS基礎(chǔ)語(yǔ)法、JS選擇器和JS頁(yè)面操作四部分進(jìn)行學(xué)習(xí)
學(xué)習(xí)目的：完成頁(yè)面標(biāo)簽與用戶的人機(jī)交互及前臺(tái)數(shù)據(jù)處理的業(yè)務(wù)邏輯
"""
腳本語(yǔ)言
腳本語(yǔ)言：通過(guò)這門語(yǔ)言，可以去寫(xiě)一些代碼片段，這些代碼片段可以嵌入到其他語(yǔ)言中，只要給予一個(gè)執(zhí)行的入口，就可以執(zhí)行代碼。如c，java，這些語(yǔ)言必須要有明確的入口，也就是main函數(shù)，從main函數(shù)入，從main函數(shù)出。python則處處是入口處處是出口，沒(méi)有所謂的main函數(shù)，這就是腳本語(yǔ)言的特點(diǎn)，也就是說(shuō)只要給一個(gè)執(zhí)行的入口，我就能夠讓代碼跑起來(lái)。
腳本：像python可以直接用解釋器運(yùn)行，不管文件中有沒(méi)有main函數(shù)，甚至是空的，也可以跑起來(lái)，只是沒(méi)結(jié)果，也就是說(shuō)可以通過(guò)代碼塊來(lái)執(zhí)行，那么我就可以把這些代碼塊嵌入到其他語(yǔ)言中，這就是腳本。如果利用了其他語(yǔ)言的bug，那么就成了外掛。如果把程序中一些不好的點(diǎn)，補(bǔ)齊了，那么就成了補(bǔ)丁。
腳本語(yǔ)言就可以用來(lái)給其他東西拓展功能。如javascript就可以用來(lái)給網(wǎng)頁(yè)拓展功能
項(xiàng)目重構(gòu)(代碼重構(gòu))
為了節(jié)約開(kāi)發(fā)成本，或者對(duì)數(shù)據(jù)進(jìn)行一些更高層次的維護(hù)，就會(huì)往程序中加入一些腳本。而一種語(yǔ)言編寫(xiě)的程序，功能開(kāi)始慢慢的向另一種語(yǔ)言上遷移。直到徹底遷移完成，這個(gè)過(guò)程就叫項(xiàng)目重構(gòu)。換語(yǔ)言，最大的目的就是提高效率，如果一次性修改，會(huì)帶來(lái)巨大的損失，所以在這種把損失降低到最小的基礎(chǔ)上，進(jìn)行代碼的功能遷移。
js的引入方式
鉤子事件：提前寫(xiě)一個(gè)代碼塊，設(shè)置了一個(gè)激活條件(相當(dāng)于放了一個(gè)鉤子)，一旦條件達(dá)到，方法就會(huì)被調(diào)用，滿足條件才會(huì)激活的方法就叫鉤子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入</title>
<style>
#box {
200px;
height: 200px;
background-color: orange;
}
/*#box:active {*/
/*background-color: red;*/
/*}*/
</style>
</head>
<body>
<!--行間式：js代碼直接書(shū)寫(xiě)在標(biāo)簽的鉤子事件中-->
<!--<div id="box" onclick="this.style.backgroundColor = 'red'"></div>-->
<div id="box"></div>
</body>
<!--內(nèi)聯(lián)式：js代碼書(shū)寫(xiě)在script標(biāo)簽中，script需要放置在body的最下方-->
<!--<script>-->
<!--box.style.backgroundColor = 'pink'-->
<!--</script>-->
<script src="js/外聯(lián).js">
// 鏈接了外部js的script標(biāo)簽，就相當(dāng)于單標(biāo)簽，內(nèi)部代碼塊會(huì)自動(dòng)屏蔽
box.style.borderRadius = '50%'
</script>
</html>
js/外聯(lián).js
box.style.background = 'blue'
js的基礎(chǔ)語(yǔ)法
變量
沒(méi)有解壓縮
// 關(guān)鍵字 變量名 = 變量值
// 關(guān)鍵字四種：不寫(xiě) | var | let | const
n1 = 10; // 全局變量
// console.log(n1);
var n2 = 20; // 局部變量
// alert(n2);
let n3 = 30; // 塊級(jí)變量
// document.write(n3);
const N4 = 40; // 常量
// console.log(N4);
// N4 = 50; // 報(bào)錯(cuò)，常量值不能修改
數(shù)據(jù)類型
// 值類型
// 1) 數(shù)字類型：number
var num1 = 10;
var num2 = 3.14;
console.log(num1, num2);
console.log(typeof(num1), typeof num2);
// 2) 字符串類型：string
var s1 = '單引號(hào)的字符串';
var s2 = "雙引號(hào)的字符串";
console.log(s1, s2);
console.log(typeof s1, typeof s2);
var s3 = `多行字符串：
再來(lái)一行`;
console.log(typeof s3, s3);
// 3) 布爾類型：boolean
var b1 = true;
var b2 = false;
console.log(b1, b2);
console.log(typeof b1, typeof b2);
// console.log(true + true); // 1+1
// 4) 未定義類型：undefined
// 不報(bào)錯(cuò)是因?yàn)閜ython中直接與內(nèi)存交互，而js是和頁(yè)面交互，而頁(yè)面會(huì)給予一個(gè)undefined這個(gè)值
var owen;
console.log(owen);
var nick = undefined;
console.log(nick);
// 引用類型
// 5) 對(duì)象類型
var obj = new Object();
console.log(typeof obj, obj);
var obj2 = {};
console.log(typeof obj2, obj2);
// 6) 函數(shù)類型
var fn = function () {};
console.log(typeof fn, fn);
// 其它
// 7) 空類型
var jerry = null;
console.log(typeof jerry, jerry);
// 8) 數(shù)組
var arr = [1, 3, 2, 5, 4];
console.log(typeof arr, arr);
// 9) 時(shí)間
var date = new Date();
console.log(typeof date, date);
隨機(jī)數(shù)
// 隨機(jī)數(shù): Math.random() - (0, 1)
// console.log(Math.random());
// 正整數(shù)區(qū)間[m, n]
// parseInt：向下取整
// (0, 1) * 10 => (0, 10) 取值parseInt() => [0, 9] + 5 => [5, 14]
// parseInt(Math.random() * 11) + 5 => [5, 15]
// [m, n] => +的值就是m，*的值 n - m + 1
// parseInt(Math.random() * (n - m + 1)) + m => [m, n]
var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;
console.log(r_num);
// (0, 1) * 超大的數(shù) 取整
// 一個(gè)正整數(shù) % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1
// 一個(gè)正整數(shù) % (n-m+1) + m => [m, n]
var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;
console.log(random_num)
運(yùn)算符：詳情見(jiàn)課件
? 弱語(yǔ)言類型：允許將一塊內(nèi)存看做多種類型。比如直接將整型變量與字符變量相加。c、c++、php、js等都是若語(yǔ)言類型。
? 強(qiáng)語(yǔ)言類型：在沒(méi)有強(qiáng)制類型轉(zhuǎn)化前，不允許兩種不同類型的變量相互操作。Java、C# 和 Python 等都是強(qiáng)類型語(yǔ)言。
NaN：not a number 不是一個(gè)數(shù)字，一般出現(xiàn)在數(shù)字類型和一些無(wú)法進(jìn)行計(jì)算的數(shù)據(jù)進(jìn)行計(jì)算時(shí)，得到的結(jié)果就是NaN
// 1）算術(shù)運(yùn)算符：+ - * / % ++ -- | += ...
console.log(5 / 2); // 2.5
console.log(parseInt(5 / 2)); // 地板除取整 2
console.log(parseFloat(5 / 2)); // 2.5
// parseInt | parseFloat 可以完成 string => number
res = parseInt('3.14.15abc');
console.log(res); // 從頭往后找整數(shù)部分
res = parseFloat('3.14.15abc');
console.log(res); // 從頭往后找小數(shù)部分(最多只識(shí)別一個(gè)小數(shù)點(diǎn))
res = parseInt('a3.14.15abc');
console.log(typeof res, res); // number, NaN
// 2) 弱語(yǔ)言類型的js
res = 10 + '5';
console.log(res); // 字符串：105
res = 10 - '5';
console.log(res); // 數(shù)字：5
// 數(shù)字 => 字符串
res = '' + 5;
console.log(typeof res, res);
// 字符串 => 數(shù)字
res = +'5'; // '5' - 0 也是可以的
console.log(typeof res, res);
// 3) 自增自減
num = 10;
num += 1;
console.log(num);
num++;
console.log(num);
num--;
console.log(num);
// 了解：符號(hào) 在前優(yōu)先級(jí)高于一切運(yùn)算符，在后優(yōu)先級(jí)比賦值符還低
// ++在前先自增再運(yùn)算；++在后先運(yùn)算再自增，意義不大，想要調(diào)整優(yōu)先級(jí)就用括號(hào)
num = 10;
res = num++;
console.log(num, res);
num = 10;
res = ++num;
console.log(num, res);
// 4) 比較運(yùn)算符的比較
console.log(5 == '5'); // true，只做值比較
console.log(5 === '5'); // false，做值與類型比較
console.log(5 != '5'); // false，只做值比較
console.log(5 !== '5'); // true，做值與類型比較
// 5）邏輯運(yùn)算符 && || !
console.log(true && true);
console.log(false || false);
console.log(!true);
// 短路現(xiàn)象
// &&: 有假則假，前為假，后不用判斷
// ||: 有真則真，前為真，后不用判斷
num = 10;
console.log(false && ++num); // num++ | ++num 都被短路不會(huì)被執(zhí)行
console.log(num);
console.log(true || ++num); // num++ | ++num 都被短路不會(huì)被執(zhí)行
console.log(num);
// 6）三元運(yùn)算符（三目運(yùn)算符）
// 條件 ? 結(jié)果1 : 結(jié)果2
res = 5 == '5' ? '值相等':'值不等';
console.log(res);
分支結(jié)構(gòu)
// 1）if分支結(jié)構(gòu)
/* python
* if 條件:
* 代碼塊1
* elif 條件:
* 代碼塊2
* else:
* 代碼塊3
* */
/** js
* if (條件) {
* 代碼塊1
* }
* else if (條件) {
* 代碼塊2
* }
* else {
* 代碼塊3
* }
*/
var num = parseInt(Math.random() * 16);
console.log(num);
if (num > 10) {
console.log("產(chǎn)生的數(shù)超過(guò)10")
} else if (5 <= num && num <= 10) {
console.log("產(chǎn)生的數(shù)間于5~10")
} else {
console.log("產(chǎn)生的數(shù)不超過(guò)5")
}
// 2）switch分支結(jié)構(gòu)
/* 只會(huì)走case或者default，不會(huì)走普通的代碼
month = parseInt(Math.random() * (2 - 0 + 1)) + 0;
console.log(month);
switch (month) {
case 1:
console.log('1月31天');
break; // 用來(lái)結(jié)束case，跳出switch分支結(jié)構(gòu)
case 2:
console.log('2月28天');
break;
default: // 沒(méi)有走任何case，會(huì)進(jìn)入default分支
console.log('月份參數(shù)有誤');
}
*/
month = parseInt(Math.random() * (12 - 1 + 1)) + 1;
console.log(month);
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log('%s月31天', month);
break; // 用來(lái)結(jié)束case，跳出switch分支結(jié)構(gòu)，多個(gè)分支可以共享一個(gè)break
case 2:
console.log('2月28天');
break;
case 4:
case 6:
case 9:
case 11:
console.log('%s月30天', month);
break;
default: // 沒(méi)有走任何case，會(huì)進(jìn)入default分支，沒(méi)有錯(cuò)誤的情況可以省略
console.log('月份參數(shù)有誤');
}
循環(huán)結(jié)構(gòu)
如果死循環(huán)，頁(yè)面就會(huì)卡住
// 1) for循環(huán)
/*
for (循環(huán)變量①; 條件表達(dá)式②; 增量③) { 循環(huán)體④ }
生命周期：① ②④③...②④③ ②
*/
// 1~10之間的偶數(shù)
for (var i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i);
}
}
// 定義變量可以寫(xiě)在外面，增量可以寫(xiě)在里面
var i = 1;
for (i; i <= 10; ) {
if (i % 2 === 0) {
console.log(i);
}
i++;
}
// continue | break
// 輸出1 2 4 5
for (var i = 1; i <= 5; i++) {
if (i === 3) continue; // if只有一條語(yǔ)句，可以省略大括號(hào)
console.log(i)
}
// 輸出1 2 3
for (var i = 1; i <= 5; i++) {
if (i > 3) break;
console.log(i)
}
// 2）while循環(huán)
var i = 1;
while (i <= 5) {
console.log(i);
i++;
}
// 3）do...while循環(huán)：先執(zhí)行一次循環(huán)體，再判斷條件
var num = 90;
do {
console.log(num);
num++;
} while (num <= 100);
// for：解決知道循環(huán)次數(shù)的循環(huán)
// while：
// 解決一切for與do...while能解決的問(wèn)題(結(jié)合函數(shù)的思想)
// 解決不知道循環(huán)次數(shù)的循環(huán)(循環(huán)用break結(jié)合)
// do...while：完成循環(huán)體必須要提前執(zhí)行一次的循環(huán)
函數(shù)
函數(shù)概況
/* 函數(shù)
定義：
關(guān)鍵字 函數(shù)名(參數(shù)列表) {
函數(shù)體;
返回值
}
var 函數(shù)名 = 關(guān)鍵字(參數(shù)列表) {
函數(shù)體;
返回值
}
var 函數(shù)名 = (參數(shù)列表) => {
函數(shù)體;
返回值
}
函數(shù)成員：
函數(shù)名：存放函數(shù)的地址
通過(guò) 函數(shù)名() 調(diào)用函數(shù)
參數(shù)列表：將外界資源傳給內(nèi)部的橋梁
你傳你的，我收我的，用...接收可變長(zhǎng)
函數(shù)體：功能代碼塊
返回值：將內(nèi)部數(shù)據(jù)反饋給外部
只能返回一個(gè)值，不寫(xiě)或空return返回undefined，寫(xiě)多個(gè)只會(huì)返回最后一個(gè)
匿名函數(shù)：
沒(méi)有聲明名字的函數(shù)
產(chǎn)生一個(gè)局部作用域
資源回收快
*/
有名函數(shù)
// 定義
function add(n1, n2) {
return n1 + n2
}
// 使用
res = add(10, 20);
console.log(res);
// 函數(shù)名的運(yùn)用
my_add = add;
console.log(my_add(100, 200));
// 參數(shù)列表：你傳你的，我收我的，用...接收可變長(zhǎng)
// 少傳未接收到的形參賦值為undefined，多傳的實(shí)參自動(dòng)被丟棄
function fn(n1, n2) {
console.log('傳輸?shù)膎1：%s | n2：%s', n1, n2)
}
fn(10, 20);
fn();
fn(100);
fn(1000, 2000, 3000);
// 可變長(zhǎng)參數(shù)
function func(...num) {
console.log(num)
}
func(1, 2, 5, 3, 4);
匿名函數(shù)
// 匿名函數(shù)
// 匿名函數(shù)的自調(diào)用 - 調(diào)用一次后就會(huì)被回收資源
// 放不了參數(shù)
(function () {
console.log('匿名函數(shù)')
})();
// 用變量接收 - 函數(shù)的第二種聲明方式
var fun = function () {
console.log('函數(shù)的第二種聲明方式')
};
fun();
// 函數(shù)的第三種聲明方式
var fun2 = (n1, n2) => { // 有函數(shù)體標(biāo)明{}
console.log('n1:%s | n2:%s', n1, n2);
return n1 + n2
};
console.log(fun2(222, 444));
var fun3 = (n1, n2) => n1 + n2; // 只有返回值可以省略{}
console.log(fun3(222, 444));
//js補(bǔ)充分號(hào)，但不會(huì)在括號(hào)中間加分號(hào)
匿名函數(shù)的局部作用域作用
// 匿名函數(shù)自調(diào)用，可以產(chǎn)生局部作用域與外界隔離
(function () {
let number = 888
})();
// console.log(number) // 外界不可以直接訪問(wèn)
四種變量分析
function fn() {
n1 = 10; // 只有全局變量外界才能訪問(wèn)
var n2 = 20;
let n3 = 30;
const n4 = 40;
}
fn();
console.log(n1);
if (true) { // 塊級(jí)作用域
n1 = 10;
var n2 = 20;
let n3 = 30; // let與const聲明的變量有塊級(jí)作用域
const n4 = 40; // 常量
}
console.log(n1);
console.log(n2);
{
let aaa = 10
}
// 同一塊級(jí)，let關(guān)鍵字定義的變量名不能重復(fù)，否則會(huì)報(bào)錯(cuò)
數(shù)據(jù)類型的使用
字符串
// string => str
// 1）聲明
// 單引號(hào) | 雙引號(hào) | 反引號(hào)
// 2）字符串拼接
res = 'you are' + ' ' + 'good man!';
console.log(res);
// 3）字符串的切片
s = 'you are good man!';
n_s = s.slice(8, 12);
console.log(n_s); // good
// 4）字符串替換
s = 'you are good man!';
n_s = s.replace('man', 'woman');
console.log(n_s);
// 5）字符串拆分
s = 'you are good man!';
res = s.split(' ');
console.log(res);
// 6）字符串迭代
s = 'abcdef';
for (num of s) {
console.log(num)
}
數(shù)組
既有返回值，又會(huì)改變?cè)斜?/p>
// array => list
// 1）聲明
arr = [1, 4, 2, 3, 5];
console.log(arr);
// 2）反轉(zhuǎn)
arr.reverse();
console.log(arr);
// 3）組合
str = arr.join('@');
console.log(str);
// 4）切片
new_arr = arr.slice(1, 4);
console.log(new_arr);
// 5）排序
arr.sort();
console.log(arr);
// 6）增刪改查
// 查:只有正向索引
console.log(arr[2]);
// 增
arr.push(888); // 尾增
console.log(arr);
arr.unshift(666); // 首增
console.log(arr);
// 刪
res = arr.pop(); // 尾刪
console.log(arr, res);
res = arr.shift(); // 首刪
console.log(arr, res);
// 增刪改 綜合方法：splice
// 萬(wàn)能方法，學(xué)了這個(gè)上面無(wú)視
// 三個(gè)參數(shù)：開(kāi)始操作的索引 操作的位數(shù) 操作的結(jié)果(可變長(zhǎng))
arr = [1, 2, 3, 4, 5];
// 操作的位數(shù)為0，就是添加
// 操作的結(jié)果為空，就是刪除
// 數(shù)組長(zhǎng)度：arr.length
arr.splice(arr.length, 0, 666, 888);
console.log(arr);
字典
// object => dict
// 1）定義
height = 180;
dic = {
'name': 'Owen', // 本質(zhì)是對(duì)象
age: 18, // 所有的key(屬性名)都是字符串類型，所以可以省略引號(hào)
height, // 當(dāng)value為變量，且變量名與key同名，可以省略value
};
console.log(dic);
// 2）訪問(wèn)
console.log(dic.name);
console.log(dic['age']);
// 3）增刪改
// 增
dic.sex = '男';
console.log(dic);
// 刪
delete dic.sex;
console.log(dic);
// 改
dic.name = 'Nick';
console.log(dic);
總結(jié)
- 上一篇： 怎样用手机设置路由器手机在家里如何自己设
- 下一篇： 华硕路由器怎么连接极路由器华硕xd4如何