JavaScript使用JS的幾種寫法行內(nèi)式的js 直接寫道元素的內(nèi)部 <button type="button" value="須彌" onclick="alert('納西妲')"></button>
內(nèi)嵌式j(luò)s 引入式
<script src="my.js"></script>
JS注釋單行注釋與多行注釋 <script>
// 單行注釋 快捷鍵 CTRL+ /
/*
多行注釋 快捷鍵： shift + alt + a
*/
</script> JS的輸入輸出語(yǔ)句prompt('請(qǐng)輸入你的年齡'); 輸入框
alert('計(jì)算機(jī)結(jié)果是') 彈出框
console.log('程序員可見，在瀏覽器控制臺(tái)'); 瀏覽器控制臺(tái)console可見
doucument.write('要輸出的內(nèi)容'); 向body內(nèi)輸出內(nèi)容，如果輸出內(nèi)容寫的是標(biāo)簽，也會(huì)解析成網(wǎng)頁(yè)元素
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<script>
*//輸入框*
prompt('請(qǐng)輸入你的年齡');
*//彈出警示框*
alert('計(jì)算機(jī)結(jié)果是');
console.log('程序員可見，在瀏覽器控制臺(tái)');
</script>
</head>
<body>
</body>
</html>變量什么是變量？變量在JavaScript中就是用一個(gè)變量名表示，變量名是大小寫英文、數(shù)字、 $ 和 _ 的組合，且不能用數(shù)字開頭。變量名不能是JavaScript的關(guān)鍵字，如 if 、 while 等。 用來存儲(chǔ)數(shù)據(jù)的一個(gè)空間。 變量的使用申明一個(gè)變量用 let 語(yǔ)句。 變量使用分兩步：1. 聲明變量 2. 賦值 如： let age; //聲明變量，age是聲明的變量 變量初始化 let age = 19 ; 注意： let 聲明變量只能聲明一次。var則可以聲明多次，但是不推薦。 案例1： <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
let myname = "nahida";
let address = "須彌";
let age = 500;
let email = 'GenshinImpact@mihoyo.com';
let salary = 2000;
console.log('我的名字是%s,我住在%s,我%s了,我的郵箱是%s,我的工資是%s',myname,address,age,email,salary);
</script>
</head>
<body>
</body>
</html>案例2 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>變量使用</title>
<script>
// 1. 請(qǐng)輸如用戶名字
let myName = prompt('請(qǐng)輸入你的名字');
//2. 彈出
alert(myName);
</script>
</head>
<body>
</body>
</html>變量的語(yǔ)法擴(kuò)展一個(gè)變量被重新賦值后，原先的賦值被覆蓋，一最后一次賦值為準(zhǔn)。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let myname = "Nihida";
alert(myname);
myname = 'Barbatos';
alert(myname);
//同時(shí)聲明多個(gè)變量
let age = 6000, address = '璃月', salary = 0;
//聲明變量的特殊情況
//1. 只聲明不賦值 結(jié)果是 undefined
//2. 不聲明，不賦值 結(jié)果是 Error報(bào)錯(cuò)
//3. 不聲明，直接賦值 結(jié)果是 10 不提倡，會(huì)變成全局變量
</script>
</head>
<body>
</body>
</html> 變量的命名規(guī)范由字母、數(shù)字、下劃線、美元符號(hào)（$）組成 嚴(yán)格區(qū)分大小寫 不能以數(shù)字開頭，可以下劃線、美元符號(hào)開頭，其他符號(hào)不允許 不能是js的保留字、關(guān)鍵字：let、console、name等 變量必須有意義 遵守駝峰命名。首字母小寫，后面的單詞的首字母需要大寫
交換兩個(gè)變量的值<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交換兩個(gè)變量的值</title>
<script>
let nameA = 'Nahida',
nameB = 'Barbatos',
temp ;
alert(nameA);
alert(nameB);
console.log(nameA,nameB)
temp = nameA;
nameA = nameB;
nameB =temp;
console.log(nameA,nameB)
</script>
</head>
<body>
</body>
</html> 數(shù)組的基本使用數(shù)組Array 是一種可以按順序保存多個(gè)數(shù)據(jù) let arr = []; 取值：arr[] 數(shù)組名[下標(biāo)] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ['nahida','barbatos','Morax','Beelzebul'];
console.log(arr);
console.log(arr[0]);
</script>
</body>
</html> 數(shù)據(jù)類型計(jì)算機(jī)顧名思義就是可以做數(shù)學(xué)計(jì)算的機(jī)器，因此，計(jì)算機(jī)程序理所當(dāng)然地可以處理各種數(shù)值。但是，計(jì)算機(jī)能處理的遠(yuǎn)不止數(shù)值，還可以處理文本、圖形、音頻、視頻、網(wǎng)頁(yè)等各種各樣的數(shù)據(jù)，不同的數(shù)據(jù)，需要定義不同的數(shù)據(jù)類型。在JavaScript中定義了以下幾種數(shù)據(jù)類型： Number 字符串 布爾值 比較運(yùn)算符 null和undefifined 數(shù)組 對(duì)象
數(shù)字型NumberJavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示，以下都是合法的Number類型： 123; // 整數(shù)
123 0.456; // 浮點(diǎn)數(shù)
0.456 1.2345e3; // 科學(xué)計(jì)數(shù)法表示1.2345x1000，等同于1234.5
-99; // 負(fù)數(shù)
NaN; // NaN表示Not a Number，當(dāng)無法計(jì)算結(jié)果時(shí)用NaN表示
Infinity; // Infinity表示無限大，當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時(shí)，就 表示為Infinity
-Infinity; //無窮小 計(jì)算機(jī)由于使用二進(jìn)制，所以，有時(shí)候用十六進(jìn)制表示整數(shù)比較方便，十六進(jìn)制用0x前綴和0-9，a-f表示，例如： 0xff00 ， 0xa5b4c3d2 ，等等。八進(jìn)制以0開頭，如 010、012。 初始化： let age = 123； //isNaN() 這個(gè)方法是判斷是否是數(shù)字，是數(shù)字返回true，不是就返回false
let nameC = "ZhongLi"
console.log(isNaN(nameC));
let age = 100;
console.log(isNaN(age)); 字符類型String字符串是以單引號(hào)'或雙引號(hào)"括起來的任意文本，比如 'abc' ， "xyz" 等等。請(qǐng)注意， '' 或 "" 本身只是一種表示方式，不是字符串的一部分，因此，字符串 'abc' 只有a ， b ， c 這3個(gè)字符。 可以單引號(hào)套雙引號(hào)，也可以雙引號(hào)套單引號(hào)：" ' ' " 、 ' " " '，不可以單引號(hào)套單引號(hào)或者雙引號(hào)套雙引號(hào)。 字符串轉(zhuǎn)義字符，都是 \ 開頭，但是這些轉(zhuǎn)義字符都是寫到引號(hào)里面。 案例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert('須彌什么時(shí)候開？ \n 我不知道，"這個(gè)一定是米哈游干的"') // \n 換行
</script>
</head>
<body>
</body>
</html>字符串長(zhǎng)度以及拼接字符串的length屬性可以獲取整個(gè)字符的長(zhǎng)度。 字符串的拼接 + 'str1' + 'str2' 字符串類型 + 任何類型 = 拼接智慧的新字符串 符號(hào) + 數(shù)值是相加，字符是相連 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert('須彌什么時(shí)候開？ \n 我不知道，"這個(gè)一定是米哈游干的"')
let str = '須彌什么時(shí)候開？ \n 我不知道，"這個(gè)一定是米哈游干的"';
console.log(str.length);
console.log(str + '\n ——原神3.0版本開'); // \n 換行
console.log('nahida' + true) // nahidatrue
</script>
</head>
<body>
</body>
</html>字符串拼接加強(qiáng)變量不要寫在字符串里面，可以：字符串+ 變量 + 字符串 let age = 500;
console.log('nahida age is ' + age + 'years');案例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let age = prompt('請(qǐng)輸入你的年齡');
let str = "您今年" + age + '歲了';
alert(str);
</script>
</head>
<body>
</body>
</html>模板字符串符號(hào)： 舉例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let age = prompt('請(qǐng)輸入你的年齡');
let str = `您今年 ${age} 歲了`;
alert(str);
document.write(`大家好，我今年${age}歲了`);
document.write(`
<div>
<p>Beelzebul</p>
</div>
`)
</script>
</head>
<body>
</body>
</html>布爾值Boolean、undefined和null布爾值和布爾代數(shù)的表示完全一致，一個(gè)布爾值只有 true 、 false 兩種值，要么是 true ，要么是 false ，可以直接用 true 、 false 表示布爾值，也可以通過布爾運(yùn)算計(jì)算出來： true; // 這是一個(gè)true值
false; // 這是一個(gè)false值
2 > 1; // 這是一個(gè)true值
2 >= 3; // 這是一個(gè)false值
let flag = true;
ver flag2 = false;
console.log(flag + 1) // 2
console.log(flag + 1) // 1
let letiable = undefined; //undefine 只聲明，不賦值
console.log(letiable + 1); //NaN
console.log(letiable + 'Nahida'); //undefinedNahida
let space = null; //表示為空
console.log(space + 1); //1
console.log(space + 'Nahida'); //nullNahida 獲取變量的類型typeof *
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let age =10,
str = 'Nahida',
flag = true,
leti = undefined,
nulli = null;
console.log(typeof age);
console.log(typeof str);
console.log(typeof flag);
console.log(typeof leti);
console.log(typeof nulli); //object
console.log(typeof age+ '11') //number11 先判斷age的類型，然后和11 組成字符串為number11
</script>
</head>
<body>
</body>
</html> 字面量在源碼中一個(gè)固定值的表示法，通俗來說，就是字面量表示如何表達(dá)這個(gè)值。（不重要） 數(shù)據(jù)類型轉(zhuǎn)換轉(zhuǎn)換為字符串類型toString() ：轉(zhuǎn)換成字符串 let num = 1;
alert(num.toString()); String() 強(qiáng)制轉(zhuǎn)換額為字符串 let num = 1;
alert(String(num)); 加號(hào)拼接 和字符拼接的結(jié)果都是字符串（更喜歡這個(gè)，一般稱為 隱式轉(zhuǎn)換） let num = 1;
alert(num + '字符串');
轉(zhuǎn)化為數(shù)字型（重點(diǎn)）parseInt(String)和parseFloat(String) *（重點(diǎn)）parseInt('87'); //會(huì)得到整數(shù)，向下取整
parseInt('87px'); //只保留數(shù)字，如果非數(shù)字開頭，則NaN
parseFloat('114.514'); //浮點(diǎn)數(shù)
parseFloat('114.514px'); //浮點(diǎn)數(shù)，只保留數(shù)字，如果非數(shù)字開頭，則NaNNumber()強(qiáng)制轉(zhuǎn)換函數(shù) 和隱式轉(zhuǎn)換Number()內(nèi)只能放數(shù)字類型的字符，其他的會(huì)報(bào)錯(cuò) 隱式轉(zhuǎn)換：某些運(yùn)算符被執(zhí)行時(shí)，系統(tǒng)內(nèi)部自動(dòng)將數(shù)據(jù)類型進(jìn)行轉(zhuǎn)換。 利用算數(shù)運(yùn)算 - * / 隱式轉(zhuǎn)換，加號(hào)除外。 補(bǔ)充 + 號(hào)兩邊只要一個(gè)是字符串，就會(huì)把另外一個(gè)轉(zhuǎn)成字符串 + 號(hào)作為正號(hào)解析可以轉(zhuǎn)換為Number類型 //Number(變量)
let num = '114.514'
Number(num) //強(qiáng)制轉(zhuǎn)換函數(shù)
//利用算數(shù)運(yùn)算 - * / 隱式轉(zhuǎn)換
console.log(num - 0); //114.514
console.log('120' - '110'); //10
console.log(num * 1); //114.514
console.log(+num); //114.514
console.log(+'11' + 11) //22計(jì)算年齡案例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let ageA = prompt("輸入你出生年");
let ageB = prompt('今年年數(shù)');
let age = 0;
ageA = parseInt(ageA);
ageB = parseInt(ageB);
age = ageB - ageA;
alert(ageB + '年時(shí)，你' + age + '歲了');
</script>
</head>
<body>
</body>
</html>轉(zhuǎn)型為布爾行Boolean()函數(shù) Boolean('true');
Boolean('false');代表空、否定的值會(huì)被轉(zhuǎn)換為false，如 '' 、 0 、 NaN 、 null 、 undefined。其他非空字符、數(shù)字等類型皆轉(zhuǎn)換為true。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let myname = prompt('請(qǐng)輸入你的姓名');
let age = prompt('請(qǐng)輸入你的年齡');
let sex = prompt('請(qǐng)輸入你的性別');
alert('您的姓名是' + myname
+'\n 您的年齡是' + age
+'\n 您的性別是' + sex);
</script>
</head>
<body>
</body>
</html>案例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let price = +prompt('請(qǐng)輸入商品價(jià)格'),
num = +prompt('數(shù)量'),
address = prompt('輸入你的地址'),
total = price * num;
document.write(`
<table>
<caption>
<h2>訂單確認(rèn)</h2>
</caption>
<tr>
<th>商品名稱</th>
<th>商品價(jià)格</th>
<th>商品數(shù)量</th>
<th>總價(jià)</th>
<th>收貨地址</th>
</tr>
<tr>
<td>小米12 pro </td>
<td>${price} 元</td>
<td>${num} 元</td>
<td>${total} </td>
<td>${address} </td>
</tr>
</table>
`)
</script>
</body>
</html>排錯(cuò)思路運(yùn)算符算數(shù)運(yùn)算符運(yùn)算符號(hào)（加、減、乘、除、取余）： // + - * / %
console.log(0.7 * 10); //7.00000000001
let num = 0.1 + 0.2 ;
console.log(num = 0.3); //false 注意：浮點(diǎn)數(shù)在算數(shù)運(yùn)算里面會(huì)出現(xiàn)問題，不能用浮點(diǎn)數(shù)做對(duì)比。 算數(shù)運(yùn)算符是有優(yōu)先級(jí)的，先乘除后加減，有括號(hào)先算括號(hào)里。 表達(dá)式與返回值：// 是由數(shù)字、運(yùn)算符、變量等組成的式子 為表達(dá)式
console.log(1 + 1); //2 返回值 遞增遞減運(yùn)算符++i i++ 單獨(dú)使用時(shí)候效果一樣的，但直作為 n = i ++ 或者 n = ++i ，效果是不一樣的 //形如：
let n=0, i = 0;
++i // i = i+1
n = ++i //先自加，再賦值
i++ // i = i+1
n = i++ //先賦值，再自加
--i
i--
i +=2 // i = i + 2
i -=2 // i = i - 2 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let i= 0, n= 2;
n = i++;
console.log(n); // n = 0
console.log(i); // i = 1
n = ++i; // n = 2 ; i = 2
console.log(n); // 2
let e = 12;
f = e++ + ++e; // 10 + 12 = 22
console.log(f); // 22
</script>
</head>
<body>
</body>
</html> 比較常見的是 單獨(dú)的使用 i++ 。但是其他也要掌握，面試和考試的時(shí)候?yàn)殡y人的 比較運(yùn)算符當(dāng)我們對(duì)Number做比較時(shí)，可以通過比較運(yùn)算符得到一個(gè)布爾值： 2 > 5; // false
5 >= 2; // true
7 == 7; // true 實(shí)際上，JavaScript允許對(duì)任意數(shù)據(jù)類型做比較： false == 0; // true
false === 0; // false 要特別注意相等運(yùn)算符 == 。JavaScript在設(shè)計(jì)時(shí)，有兩種比較運(yùn)算符： 第一種是 == 比較，它會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型再比較，很多時(shí)候，會(huì)得到非常詭異的結(jié)果； 第二種是 === 比較，它不會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型，如果數(shù)據(jù)類型不一致，返回 false ，如果一致，再比較。 由于JavaScript這個(gè)設(shè)計(jì)缺陷，不要使用== 比較，始終堅(jiān)持使用 === 比較。 因?yàn)?code style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); overflow-wrap: break-word; margin: 0px 3px; padding: 2px 4px; border-radius: 4px; background-color: rgb(239, 240, 241); word-break: inherit;">===是比較同類型的數(shù)值，優(yōu)先使用全等符號(hào)===。 另一個(gè)例外是 NaN 這個(gè)特殊的Number與所有其他值都不相等，包括它自己： NaN === NaN; // false 唯一能判斷 NaN 的方法是通過 isNaN() 函數(shù)： isNaN(NaN); // true 最后要注意浮點(diǎn)數(shù)的相等比較： 1 / 3 === (1 - 2 / 3); // false 這不是JavaScript的設(shè)計(jì)缺陷。浮點(diǎn)數(shù)在運(yùn)算過程中會(huì)產(chǎn)生誤差，因?yàn)橛?jì)算機(jī)無法精確表示無限循環(huán)小數(shù)。要比較兩個(gè)浮點(diǎn)數(shù)是否相等，只能計(jì)算它們之差的絕對(duì)值，看是否小于某個(gè)閾值： Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true 邏輯運(yùn)算符&& 與 || 或 ！ 非 與其他計(jì)算機(jī)語(yǔ)言的使用方法一致。 其他情況：短路運(yùn)算（邏輯中斷）：當(dāng)有多個(gè)表達(dá)式（值）時(shí)，左邊的表達(dá)式可以確定結(jié)果時(shí)，就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值。 邏輯與： 表達(dá)式1 && 表達(dá)式2console.log(123 && 456) //456
console.log(0 && 456) // 0
console.log(0 && 459+2356 && 100*235356) // 0
//如果有空、為0或者否定的，為假.其余的是真的 邏輯或：表達(dá)式1 || 表達(dá)式2如果表達(dá)式1為真，返回表達(dá)式1 如果表達(dá)式1為假，返回表達(dá)式2
console.log(123 || 456) //123
console.log(0 || 456) // 456
console.log(1 || 459+2356 || 100*235356) // 1
console.log(0 || 456 || 456+123) // 456
//如果有空、為0或者否定的，為假.其余的是真的
let num = 0;
console.log(123 || num++); //123 123為真，num++不執(zhí)行
console.log(num); // 0 賦值運(yùn)算符i= 0;
n+=2; // n = n+2
e-=2; // e = e-2
v*=10; // v = v*3
k/=13; // k = k/13
p%=19; // p = p%19 運(yùn)算符的優(yōu)先級(jí)優(yōu)先級(jí)越小越優(yōu)先 
流程控制順序結(jié)構(gòu)、分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu) 順序結(jié)構(gòu)按照代碼的先后順序，依次執(zhí)行 分支結(jié)構(gòu)根據(jù)不同條件，執(zhí)行不同的路徑代碼 if分支//語(yǔ)法結(jié)構(gòu)
if(條件表達(dá)式){
//條件成立時(shí)執(zhí)行的執(zhí)行語(yǔ)句
}
//執(zhí)行思路： 如果if里面的條件表達(dá)式為真，則執(zhí)行大括號(hào)里邊的執(zhí)行語(yǔ)句
//舉例
if(5 > 3){
alert(true);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let age = prompt("請(qǐng)輸入您的年齡")
// age = parseFloat(age);
if (age > 18){
alert('您可以進(jìn)入網(wǎng)吧了')
}else {
alert('您未滿18歲或者輸入年齡有誤')
}
</script>
</head>
<body>
</body>
</html>if-else分支if(條件表達(dá)式){
//條件為真，執(zhí)行的語(yǔ)句
} else{
//條件為假。執(zhí)行的語(yǔ)句
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let year = prompt("輸入年份");
year = parseInt(year);
if (year % 4 ==0 && year%100 !=0 || year%400 ==0){
alert(year + "是閏年");
}else {
alert(year + "不是閏年");
}
</script>
</head>
<body>
</body>
</html>if -else if多分支if(條件一){
//滿足條件一執(zhí)行的語(yǔ)句1
}else if(條件二){
//滿足條件二執(zhí)行的語(yǔ)句2
}else if(條件三){
//滿足條件三執(zhí)行的語(yǔ)句3
}else{
//都不滿足的時(shí)候，執(zhí)行的語(yǔ)句
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let performance = 0
while (true){
performance =prompt("請(qǐng)輸入你的成績(jī)");
performance = parseFloat(performance);
if (performance >= 90){
alert('成績(jī)優(yōu)秀');
}else if (performance >=80 && performance < 90){
alert('成績(jī)良好');
}else if (performance >=60 && performance <80 ){
alert('成績(jī)合格');
}else {
alert('成績(jī)不及格')
}
}
</script>
</head>
<body>
</body>
</html>三元表達(dá)式//三元表達(dá)式
// 條件表達(dá)式 ？表達(dá)式1 ：表達(dá)式2
// 條件表達(dá)式結(jié)果為真，執(zhí)行（返回）表達(dá)式1；如果條件表達(dá)式結(jié)果為假，執(zhí)行（返回）表達(dá)式2
//舉例
let num = 5;
let result = num > 5 ? '是的' : '不是的';
console.log(result); //是的 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let num = prompt("請(qǐng)輸入一個(gè)0~59的數(shù)字");
let time = num<10 ? '0'+num : num; //三元表達(dá)式一定有一個(gè)返回值
alert(time);
</script>
</head>
<body>
</body>
</html>switch分支// 主要針對(duì)特定值，執(zhí)行對(duì)應(yīng)的語(yǔ)句
// switch (判斷表達(dá)式) {
// case value1:
// 執(zhí)行語(yǔ)句一;
// break;
// case value2:
// 執(zhí)行語(yǔ)句一;
// break;
// ...
// default:
// 執(zhí)行最后的語(yǔ)句;
//
// }
//如果表達(dá)式的值與case的value值匹配得上，就執(zhí)行相應(yīng)的語(yǔ)句。如果都沒有匹配得上，就執(zhí)行default里面的語(yǔ)句
//switch的注意事項(xiàng)：
//1. 表達(dá)式里邊一般寫為變量
//2. case的value值與判斷表達(dá)式的值相匹配的時(shí)候是全等關(guān)系（也就是類型和數(shù)據(jù)值是一致的）
//3. break；沒有的話，會(huì)繼續(xù)執(zhí)行接下來的程序語(yǔ)句<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
switch (2) {
case 1:
alert(1);
break;
case 2:
alert(2);
break;
default:
alert(null);
}
</script>
</head>
<body>
</body>
</html>switch的注意事項(xiàng)： 表達(dá)式里邊一般寫為變量 case的value值與判斷表達(dá)式的值相匹配的時(shí)候是全等關(guān)系（也就是類型和數(shù)據(jù)值是一致的） break；沒有的話，會(huì)繼續(xù)執(zhí)行接下來的程序語(yǔ)句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let f = prompt('請(qǐng)輸入一種水果');
switch (f){
case '蘋果':
alert('3.5D/kg');
break;
case '榴蓮':
alert('6356D/kg');
break;
default:
alert(null);
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)易計(jì)算器</title>
</head>
<body>
<script>
let num1 = prompt('輸入第一個(gè)數(shù)');
let num2 = prompt('輸入第二個(gè)數(shù)');
let sp = prompt('輸入 +-*/ 運(yùn)算符');
switch (sp) {
case '+':
alert(`您選擇的是加法，結(jié)果是${+num1 + +num2}`);
break;
case '-':
alert(`您選擇的是減法，結(jié)果是${num1 - num2}`);
break;
case '*':
alert(`您選擇的是乘法，結(jié)果是${num1 * num2}`);
break;
case '/':
alert(`您選擇的是除法，結(jié)果是${num1 / num2}`);
break;
default:
alert('輸入錯(cuò)誤');
}
</script>
</body>
</html>if-if elae -else和switch的區(qū)別 一般情況下，他們兩個(gè)可以相互替換 switch 語(yǔ)句通常處理case的值的情況，而if-else 語(yǔ)句更靈活 switch語(yǔ)句進(jìn)行條件判斷后直接執(zhí)行對(duì)應(yīng)的程序語(yǔ)句，效率更高。而if else if語(yǔ)句會(huì)逐一判斷各個(gè)條件，找到滿足條件為止。 當(dāng)分支比較少時(shí)候，if-else比較好一些 當(dāng)分支比較多的時(shí)候，switch語(yǔ)句的執(zhí)行效率更高一些，且結(jié)構(gòu)清晰
循環(huán)結(jié)構(gòu)可以重復(fù)執(zhí)行某些代碼 循環(huán)退出： continue 和break<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let i = 1;
while (i < 6){
if (i===3){
i++;
continue
}
if (i===4){
i++;
break
}
document.write(`我要吃第${i}個(gè)包子<br>`);
i++;
}
for(let n = 1; n < 5; n++ ){
if(n === 2){
continue;
}
if(n === 4){
break;
}
document.write(n);
}
</script>
</body>
</html>for循環(huán)for(初始化變量;循環(huán)條件;操作表達(dá)式){
//循環(huán)體
}
//初始變量就是用let 聲明的一個(gè)普通變量，通常用于作為計(jì)數(shù)器使用
//條件表達(dá)式 就是用來決定每一次循環(huán)是否繼續(xù)執(zhí)行 就是終止的條件
//操作條件 是每次循環(huán)最后執(zhí)行的代碼 經(jīng)常用于計(jì)數(shù)器變量進(jìn)行更新
for(let i = 0 ; i <10 ; i++){
alert('打印10次');
}
// 先執(zhí)行 let = 0
// 再執(zhí)行 i <100 判斷條件，滿足進(jìn)行下一步
// 執(zhí)行循環(huán)體 alert('打印100次');
// 執(zhí)行 i++
// 回到 執(zhí)行 i <100 判斷條件... 重復(fù)執(zhí)行
// 執(zhí)行到?jīng)]有滿足i <100的判斷條件，退出循環(huán)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//求1-100 之間的偶數(shù)和
let sum = 0;
for (let i = 0; i <= 100; i++) {
if (i % 2 ===0){
sum +=i;
}
}
document.write(sum);
//頁(yè)面中打印5個(gè)小星星
for (let n = 0; n < 5; n++) {
document.write('?');
}
</script>
</body>
</html>循環(huán)遍歷數(shù)組： let arr = ['Nahida','Barbatos','Morax','Beelzebul'];
for (let j = 0; j < arr.length; j++) {
document.write(`${arr[j]} <br>`)
}循環(huán)嵌套for(外部循環(huán)){
for(內(nèi)部循環(huán)){
循環(huán)體;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
document.write(`※`)
}
document.write('<br>');
}
</script>
</body>
</html>案例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
</head>
<body>
<script>
for (let i = 1; i < 6; i++) {
for (let j = 1; j <= i; j++) {
document.write(`★`)
}
document.write('<br>');
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
div{
display: inline-block;
height: 25px;
line-height: 25px;
background-color: aqua;
margin: 5px;
padding: 0 10px;
border: 1px solid #66ccff;
box-shadow: 2px 2px #66ccff;
color: #1f9763;
border-radius: 5px;
}
</style>
</head>
<body>
<script>
for (let i = 1; i < 10; i++) {
for (let j = 1; j <= i; j++) {
document.write(`
<div>${i} x ${j} = ${i * j} </div>
`)
}
document.write('<br>');
}
</script>
</body>
</html>斷點(diǎn)調(diào)試：瀏覽器，快捷鍵F12（鼠標(biāo)右鍵->檢查） 選擇 ”Source“ 選擇想要測(cè)試的代碼，點(diǎn)擊對(duì)應(yīng)的行號(hào)，設(shè)置斷點(diǎn) 刷新瀏覽器 點(diǎn)擊一個(gè) "向下彎曲的箭頭 ，下面有一個(gè)點(diǎn) " 的圖標(biāo)，逐步測(cè)試
while循環(huán)while() 在...區(qū)間
while(循環(huán)條件){
//重復(fù)執(zhí)行（循環(huán)體）
}
//循環(huán)體為真時(shí)，重復(fù)執(zhí)行循環(huán)體<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let i = 1;
while (i <= 10){
document.write(`考研上岸,月薪過萬<br>`);
i+=2;
}
//計(jì)算1~100的累加
let j = 1;
let sum = 0;
while (j <=100){
sum +=j;
j++;
}
document.write(sum)
//計(jì)算1-100之間的偶數(shù)和
let n = 1;
let sumD = 0;
while (n <= 100){
if (n % 2 ===0){
sumD = sumD + n;
}
n++;
}
document.write(sumD)
</script>
</body>
</html>do...while循環(huán)（很少用）練習(xí)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)易ATM</title>
</head>
<body>
<script>
let money = 1000;
while (true){
let str = prompt(`請(qǐng)輸入您的操作：
1. 存錢
2. 取錢
3. 查看余額
4. 退出
`);
if ( str === '4') {
break;
}
switch (str){
case '1':
let store = +prompt('請(qǐng)輸入您存入的金額');
money = money + store;
break;
case '2':
let qu = +prompt('請(qǐng)輸入您存入的金額');
money = money - qu;
break;
case '3':
alert(`您的余額是 ${money}元`);
}
}
</script>
</body>
</html>for和while的區(qū)別數(shù)組聲明語(yǔ)法：let arr = ['nahida','barbatos','Morax','Beelzebul']; let 數(shù)組名 = [元素1 ，元素2，元素3，] 取值：arr[0] 數(shù)組名[下標(biāo)] 案例 數(shù)組求和 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = [2,6,1,7,4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
document.write(`數(shù)組求和：${sum}`);
</script>
</body>
</html>求數(shù)組中的最大值： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = [2,6,1,77,52,25,7];
let max_value = arr[0];
for (let i = 0; i < arr.length; i++) {
if (max_value < arr[i])
max_value = arr[i];
}
document.write(`最大值：${max_value}`);
</script>
</body>
</html>操作數(shù)組增刪查改： 查詢數(shù)組： 數(shù)組[下標(biāo)] 改（重新賦值）：數(shù)組[下標(biāo)] = 新值 增 （添加新數(shù)據(jù)） arr.push (新內(nèi)容） arr.unshift(新增的內(nèi)容) 刪 刪除數(shù)據(jù) arr.pop() arr.shift() arr.splice(操作下標(biāo) ，刪除個(gè)數(shù)) 添加數(shù)組元素這一種方法是從數(shù)組結(jié)尾添加元素，順帶返回?cái)?shù)組長(zhǎng)度
arr.push(元素1，元素2，元素3 ...)
這一種方法是從數(shù)組的開頭添加元素，順帶返回?cái)?shù)組長(zhǎng)度 arr.unshift(元素1，元素2，元素3 ...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arrA = [2,0,6,1,77,0,52,0,25,7];
let arrB = [];
let arrC = [];
for (let i = 0; i < arrA.length; i++) {
if (arrA[i] >= 10){ //將A數(shù)組大于10的元素存入B數(shù)組
arrB.push(arrA[i]);
}
if (arrA[i] !== 0){ //將A數(shù)組非0的元素存入B數(shù)組
arrC.push(arrA[i]);
}
}
document.write(arrA);
document.write(`<br>`)
document.write(arrB);
document.write(`<br>`)
document.write(arrC);
</script>
</body>
</html>刪除數(shù)組元素從數(shù)組結(jié)尾刪除元素：arr.pop() 刪除素組的第一個(gè)元素 ： arr.shift() 指定指定元素（開發(fā)常用） ： arr.splice(數(shù)組下標(biāo) ，刪除個(gè)數(shù)) arr.splice(起始位置 ，刪除個(gè)數(shù)) 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ['nahida','Barbatos','Morax','Beelzebul'];
//查
console.log(arr[0]);
//改
arr[2] = 'ZhongLi';
console.log(arr[2]);
//增
arr.push('雷電將軍', '冰之女皇' );
console.log(arr);
arr.unshift('溫迪', `賣唱的`);
console.log(arr);
//刪
arr.pop();
console.log(arr.pop()); //'雷電將軍' 返回被刪除的值
console.log(arr);
arr.shift();
console.log(arr.shift()); //賣唱的 返回被刪除的值
console.log(arr);
arr.splice(1,1) //刪除
arr.splice(1) //刪除 從數(shù)組下標(biāo)為1開始往后刪
console.log(arr);
</script>
</body>
</html>冒泡排序<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = [2,0,6,1,77,1,52,3,25,7];
let temp = 0;
for (let i = 0; i < arr.length-1; i++) {
for (let j = 0; j < arr.length - i -1 ; j++) {
if (arr[j+1] <arr[j]){
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr)
</script>
</body>
</html>綜合案例用戶輸入4個(gè)季度數(shù)據(jù)，生成4個(gè)季度的柱狀圖 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
width: 700px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div{
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-around;
}
.bax div span{
margin-top: -20px;
}
.box div h4{
margin-top: 70px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let arr = [];
for (let i = 0; i < 4; i++) {
let num = +prompt(`請(qǐng)輸入第${i+1} 個(gè)季度的數(shù)據(jù)`);
arr.push(num);
}
console.log(arr)
document.write(`<div class="box">`)
for (let j = 0; j < arr.length; j++) {
document.write(`
<div style="height: ${arr[j]}px">
<span>${arr[j]}</span>
<h4>第${j+1}個(gè)季度</h4>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html>函數(shù)基本使用精簡(jiǎn)代碼，方便復(fù)用，提高開發(fā)效率。 函數(shù)的聲明語(yǔ)法 function 函數(shù)名(){
函數(shù)體
}函數(shù)的調(diào)用 函數(shù)名() 函數(shù)命名的規(guī)范： 和變量名基本一致 盡量小駝峰式命名法 前綴應(yīng)該為動(dòng)詞 命名建議：常用動(dòng)詞約定 如 function getName(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
div{
display: inline-block;
height: 25px;
line-height: 25px;
background-color: aqua;
margin: 5px;
padding: 0 10px;
border: 1px solid #66ccff;
box-shadow: 2px 2px #66ccff;
color: #1f9763;
border-radius: 5px;
}
</style>
</head>
<body>
<script>
function fn(){
for (let i = 1; i < 10; i++) {
for (let j = 1; j <= i; j++) {
document.write(`
<div>${i} x ${j} = ${i * j} </div>
`)
}
document.write('<br>');
}
}
fn();
fn();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getSum(){
let num = 12;
let num2 = 16;
document.write(num + num2);
}
getSum();
function getSum100(){
let sum = 0;
for (let i = 1; i < 101; i++) {
sum +=i;
}
document.write(sum);
}
getSum100();
</script>
</body>
</html>參數(shù)需要參數(shù)的傳參。使用者可以通過傳入數(shù)據(jù)，那么就需要有參數(shù)的函數(shù)。以提高函數(shù)的靈活性。 開發(fā)種盡量保持形參和實(shí)參個(gè)數(shù)一致。 function 函數(shù)名(參數(shù)列表){
函數(shù)體
}function getSum(num1 , num2){
let sum = num1 + num2;
console.log(sum);
}
getSum(1,2)
// num1和num2是形參
// 1、2 是實(shí)參案例：函數(shù)封裝求和 合理利用邏輯中斷 function getSum(x, y){
x = x || 0;
y = y || 0;
console.log(x+y);
}
getSum(1,2);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getScore(numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum +=numbers[i];
}
document.write(sum);
}
getScore([99,100,93]);
</script>
</body>
</html>返回值、返回多個(gè)值函數(shù)的返回值。當(dāng)調(diào)用某個(gè)函數(shù)值的時(shí)候，函數(shù)返回一個(gè)特定的值。但是有些函數(shù)根據(jù)需求不需要返回值。 很多情況下需要返回值。 返回一個(gè)值如果函數(shù)需要返回?cái)?shù)據(jù)時(shí)候，使用 return關(guān)鍵字修飾 return 數(shù)據(jù) return 20 return 有立即結(jié)束函數(shù)的作用。如果函數(shù)中沒有寫return 則默認(rèn)為為undefined function fn(){
return 20;
}
console.log(fn());
function getSum(x, y){
x = x || 0;
y = y || 0;
return x+y;
}
let sum = getSum(1,2);
console.log(sum);
function fn2(){
}
let i = fn2(); //undefine<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getArrMaxValue(arr){
let Max = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] >= Max){
Max = arr[i];
}
}
return Max;
}
let maxP = getArrMaxValue([65,25,65,94,215,435,45])
document.write(maxP);
</script>
</body>
</html>返回多個(gè)值return只返回一個(gè)值 function fn(x,y){
let jia = x+y;
let jian = x-y;
return [jia , jian];
}
let re = fn(1,2);
document.write(`相加之后的值是${re[0]}，相減之后的值是${re[1]}`);作用域以及作用域鏈作用域限定某個(gè)名字的可用性的代碼范圍（一個(gè)程序代碼中所用到的名字并不是總時(shí)有效的和可用的）就是在那個(gè)位置起作用 作用域有全局作用域（整個(gè)script標(biāo)簽內(nèi)部）、局部作用域（函數(shù)內(nèi)的代碼環(huán)境）、塊級(jí)作用域（由{}包括，if語(yǔ)句和for語(yǔ)句里面的{} 等） let num = 10; //全局變量
function fn(){
console.log(num);
if(true){
console.log(num);
}
}
//=======================
function fn2(){
let num2 = 20; //局部變量
function fn21(){
let num3 = 30;
}
console.log(num3)//報(bào)錯(cuò)
}
console.log(num2); //報(bào)錯(cuò)
//=======================
if(true){
let num5 = 50; //塊級(jí)變量
}
consloe.log(num5); //報(bào)錯(cuò)坑： 如果在內(nèi)部或者塊級(jí)的內(nèi)部直接賦值，則當(dāng)作全局變量。函數(shù)形參是局部變量。 //一般
let sum = 0;
//
max = 100; //全局變量 作用域鏈變量的訪問原則：就近原則,找到最終的值 let num = 10;
function fn(){
let num = 20;
console.log(num); //20
}匿名函數(shù)具名函數(shù) function fn(){}
fn();匿名函數(shù) function(){
//函數(shù)體
}
// 1種寫法
let num = 10;
let fn = function(){
console.log(111);
}
fn();
// 2種寫法
let fn2 = function(x, y){
console.log(x+y);
}
fn2(1,2);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>點(diǎn)擊我</button>
<script>
// let btn = document.querySelector('button')
// btn.onclick = function (){
// alert('月薪過萬');
// }
let btn = document.querySelector('button')
btn.addEventListener('click',function (){
alert('月薪過萬');
})
</script>
</body>
</html>立即執(zhí)行函數(shù)立即執(zhí)行，不用調(diào)用。多個(gè)立即執(zhí)行函數(shù)之間必須有分號(hào)隔開 (function(){ console.log(11) })() //方式一
(function(){console.log(11)}()) //方式二<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>點(diǎn)擊我</button>
<script>
// let btn = document.querySelector('button')
// btn.onclick = function (){
// alert('月薪過萬');
// }
//第一個(gè)小括號(hào)放的是形參，第二個(gè)小括號(hào)里面放的是實(shí)參
(function (){console.log(111);})();
(function (){ console.log(111)}());
(function (x , y){return x+y;})( 1 ,2);
(function (x,y){return x+y;}(1,2));
</script>
</body>
</html>綜合案例：轉(zhuǎn)換時(shí)間<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let time = +prompt('請(qǐng)輸入秒數(shù)');
function getTime(time){
let h = parseInt(time /60 /60 % 24);
let m = parseInt(time /60 % 60);
let s = parseInt(time % 60);
h = h< 10? '0'+h :h;
m = m< 10? '0'+m :m;
s = s< 10? '0'+s :s;
return `${h} 時(shí) ${m} 分 ${s} 秒` ;
}
let str = getTime(time);
document.write(str);
</script>
</body>
</html>實(shí)參個(gè)數(shù)少于形參，返回結(jié)果NaN 實(shí)參個(gè)數(shù)多于形參，實(shí)際只看形參個(gè)數(shù)的多少，剩下的將不被處理 如果不知道實(shí)參個(gè)數(shù)，可以算數(shù)下面的方式
function fn(){
//arguments函數(shù)內(nèi)有效 ，表現(xiàn)形式是偽數(shù)組
//偽數(shù)組 比真數(shù)組 少了一些pop push等方法
console.log(arguments); //[1,2,3]
let sum = 0;
for(let i = 0; i<arrguments.length;i++){
sum += arguments[i];
}
console.log(sum);
}
fn(1,2,3) //6函數(shù)傳參賦值小技巧我怕你傳參不帶參數(shù) 方法一 function fn(x, y){
x = x || 0;
y = y || 0;
console.log(x+y)
}
fn();
fn(1,2)方法二 function fn(x= 0,fn = 0){
console.log(x+y)
}
fn()
fn(1,2) //調(diào)用的時(shí)候會(huì)進(jìn)行內(nèi)部替換對(duì)象，面向?qū)ο缶幊?/h2>啥是對(duì)象？Object：對(duì)象也是一種數(shù)據(jù)類型，一種無序的數(shù)據(jù)集合。 對(duì)象聲明語(yǔ)法： ler 對(duì)象名 = {
屬性名: 屬性值
方法名 : function(){}
}
//例子
let person = {
uname = 'Barbatos',
age = '5000',
sex = 'M'，
sayHi: function(){
document.write('hi~');
}，
mtv: function(x){
console.log(x)
}
}
//屬性訪問
let uname = person.uname; // 訪問屬性一 對(duì)象名.屬性名
person.sayHi(); // 訪問對(duì)象方法
person.mtv('Genshin Impact') // 訪問對(duì)象方法并傳參
let unmae = person['uname'] // 訪問屬性二 對(duì)象名['屬性名']操作和遍歷增刪查改 改：屬性賦值 對(duì)象.屬性 = 值；
對(duì)象.方法 = function(){}增：添加對(duì)象屬性（js 可以非常方便的的動(dòng)態(tài)新增屬性或者方法） 對(duì)象.新屬性 = 值; let person = {
uname = 'Barbatos',
age = '5000',
sex = 'M'，
sayHi: function(){
document.write('hi~');
}，
mtv: function(x){
console.log(x)
}
}
//改
persion.uname = 'Venti';
persion.sayHi = function(){
document.write('欸嘿');
}
//新增
person.aName = '賣唱的';
person.move = function(){};
//刪
delete person.aName;
delete person.move;
//對(duì)象遍歷
for(let key in person){
console.log(key) //屬性名
console.log(person[key]); //屬性值 由于unmae = person['uname']，可以把 key 看作是 'uname’
}對(duì)象遍歷for(let key in 對(duì)象){
//key
//對(duì)象[key]
}案例：學(xué)生信息表 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
width: 700px;
text-align: center;
}
table,
th,
td{
border: 1px solid #ccc;
background-color: #1f9763;
}
caption{
font-size: 18px;
margin-top: 10px;
font-weight: 700;
}
tr{
height: 40px;
cursor: pointer;
}
table tr:nth-child(1){
background-color: #1f9763;
}
table tr:not(fist-child):hover {
background-color: #eee;
}
</style>
<body>
<script>
//數(shù)組 里面可以存放任何數(shù)據(jù)類型，對(duì)象也可以
//對(duì)象數(shù)組
let students= [
{name : 'Barbatos', age:4000, gender : 'm' , hometown : 'MD'},
{name : 'Morax', age:6000, gender : 'm' , hometown : 'LY'},
{name : 'Beelzebul', age:3000, gender : 'w' , hometown : 'DQ'},
{name : 'Nahida', age:500, gender : 'w' , hometown : 'XM'},
];
//遍歷數(shù)組
document.write(`
<table>
<caption>學(xué)生列表</caption>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>家鄉(xiāng)</th>
</tr>
`)
//打印一個(gè)對(duì)象，其實(shí)都是里面每一個(gè)對(duì)象都是 里面的的元素
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${i+1}</td>
`);
for (let k in students[i]) {
document.write(`
<td>${students[i][k]}</td>
`);
}
document.write(`
</tr>
`)
}
document.write(`
</table>
`)
</script>
<table>
<caption>學(xué)生列表</caption>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>家鄉(xiāng)</th>
</tr>
<tr>
<td>1</td>
<td>小米</td>
<td>16</td>
<td>男</td>
<td>河北</td>
</tr>
</table>
</body>
</html>Math 數(shù)學(xué)對(duì)象內(nèi)置對(duì)象：JavaScript一般也會(huì)有一些封裝好的對(duì)象，提供開發(fā)者使用Math對(duì)象方法： console.log(Math.PI) //圓周率 屬性
console.log(Math.random()) //隨機(jī)數(shù) 方法 隨機(jī)數(shù)如何隨機(jī)數(shù) 生成0-10的隨機(jī)數(shù)： Math.floor(Math.random()*10+1); 生成5-10的隨機(jī)數(shù) Math.floor(Math.random()*(5+1)+5); 生成N-M之間的隨機(jī)數(shù) Math.floor(Math.random()*((M - N) + 1 ) + N ); function getRandom(min,max){
return Math.floor(Math.random()*((max - min)+1) + min);
}
let random = getRandom(1,10);案例：隨機(jī)數(shù)點(diǎn)名 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ['Nahida','barbatos','Morax','Beelzebul'];
function getRandom(min,max){
return Math.floor(Math.random()*((max - min)+1) + min);
}
let random = getRandom(0,3);
document.write(arr[random]);
arr.splice(random,1);
document.write(`<br>`)
document.write(arr);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getRandom(min,max){
return Math.floor(Math.random()*((max - min)+1) + min);
}
let random = getRandom(1,10);
while (true){
let num = +prompt("猜一個(gè)數(shù)");
if (num === random){
alert('猜正確了');
document.write(random);
break;
}else if (num > random){
alert(`私密馬賽，猜大了`)
}else {
alert('私密馬賽，猜小了')
}
}
</script>
</body>
</html>綜合案例：學(xué)成在線 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>學(xué)車在線首頁(yè)</title>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.header {
height: 42px;
/* background-color: pink; */
/* 注意此地方會(huì)層疊 w 里面的margin */
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* search搜索模塊 */
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 70px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* 按鈕button默認(rèn)有個(gè)邊框需要我們手動(dòng)去掉 */
border: 0;
background: url(images/btn.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
/* banner區(qū)域 */
.banner {
height: 421px;
background-color: #1c036c;
}
.banner .w {
height: 421px;
background: url(images/banner2.png) no-repeat top center;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background: rgba(0,0,0, 0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
font-size: 14px;
color: #fff;
}
.subnav ul li a span {
float: right;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
/* 浮動(dòng)的盒子不會(huì)有外邊距合并的問題 */
margin-top: 50px;
}
.course h2 {
height: 48px;
background-color: #9bceea;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #fff;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
margin-top: 5px;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-size: 16px;
font-weight: 700;
}
/* 精品推薦模塊 */
.goods {
height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
/* 行高會(huì)繼承， 會(huì)繼承給3個(gè)孩子 */
line-height: 60px;
}
.goods h3 {
float: left;
margin-left: 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
.box {
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
/* 把li 的父親ul 修改的足夠?qū)捯恍心苎b開5個(gè)盒子就不會(huì)換行了 */
.box-bd ul {
width: 1225px;
}
.box-bd ul li {
position: relative;
top: 0;
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
transition: all .3s;
}
.box-bd ul li:hover {
top: -8px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
/* footer 模塊 */
.footer {
height: 415px;
background-color: #fff;
}
.footer .w {
padding-top: 35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
color: #00a4ff;
font-size: 16px;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd a {
color: #333;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 4. box核心內(nèi)容區(qū)域開始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推薦</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 網(wǎng)絡(luò)動(dòng)態(tài)圖片加載實(shí)戰(zhàn)',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城實(shí)戰(zhàn)項(xiàng)目演練',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 實(shí)戰(zhàn)項(xiàng)目演練',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源碼深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首頁(yè)界面切換效果實(shí)戰(zhàn)演練',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 從入門到精通實(shí)戰(zhàn)案例',
num: 888
},
{
src: 'images/course08.png',
title: '我會(huì)變，你呢？',
num: 590
},
{
src: 'images/course08.png',
title: '我會(huì)變，你呢？',
num: 590
}
]
// 根據(jù)數(shù)據(jù)的個(gè)數(shù)來渲染 到底有多少個(gè)小li
// console.log(data.length)
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<img src="${data[i].src}">
<h4>${data[i].title}</h4>
<div class="info">
<span>高級(jí)</span> · <span>${data[i].num}</span>人在學(xué)習(xí)
</div>
</li>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html>不同數(shù)據(jù)類型的存儲(chǔ)方式
|
