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