2020-4-6 前端達(dá)人
目錄
JavaScript
=== !==
1. JS 發(fā)展歷史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)?Netscape 與 Sun 合作，Netscape 管理層希望它外觀看起來(lái)像 Java，因此取名為 JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與 Self 及 Scheme 較為接近；
歐洲計(jì)算機(jī)制造聯(lián)盟（ECMA）在 1997 制定腳本語(yǔ)言規(guī)范 ECMA Script1 (ES1)，2009 年發(fā)布了 ECMA Script5（ES5），在 2015 年發(fā)布了 ECMA Script 2015（ES6），所有的瀏覽器的都支持 ES6；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩種引入方式</title>
</head>
<body>
<!-- JS兩種引入方式：JS和CSS一樣都需要引入到html頁(yè)面中，瀏覽器才會(huì)解釋執(zhí)行，JS有兩種引入方式：
1.內(nèi)嵌(內(nèi)部)腳本:在script標(biāo)簽中寫(xiě)js代碼,script標(biāo)簽推薦放置在body標(biāo)簽的底部,理論上和style標(biāo)簽一樣可以放置位置任意；
2.外部腳步:使用script標(biāo)簽的src屬性引入外部js文件,使用注意事項(xiàng): script標(biāo)簽使用了src屬性以后內(nèi)部的代碼不再被瀏覽器解釋執(zhí)行，script引入外部腳本時(shí)不能使用自閉合格式 -->
<!--告訴瀏覽器把解析器切換為js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>內(nèi)部腳本</h1>");//向body中追加html內(nèi)容 </script>
<script src="../js/外部腳本.js"></script>
</body>
</html>
b. 三種輸出方式 console.log document.write alert
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三種輸出方式</title>
</head>
<body>
<!-- JS三種輸出方式：
1.輸出到瀏覽器控制臺(tái)；
2.輸出html內(nèi)容到頁(yè)面；
3.瀏覽器彈框輸出字符 -->
<script>
//1.輸出到瀏覽器控制臺(tái)
console.log("1. 輸出到瀏覽器控制臺(tái)");//開(kāi)發(fā)者專(zhuān)用
//2.輸出html內(nèi)容到頁(yè)面
document.write("2. 輸出html內(nèi)容到頁(yè)面");//向body中追加html內(nèi)容
//3.瀏覽器彈框輸出字符
alert("3. 瀏覽器彈框輸出字符");//阻塞執(zhí)行
</script>
</body>
</html>
c. 變量聲明 var let const typeof undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS變量</title>
</head>
<body>
<!-- JS變量用來(lái)存放數(shù)據(jù)；
es5以前變量聲明使用var；
es6之后變量聲明使用let，常量聲明使用const。他們用于替代es6的var聲明方式；
JS是弱類(lèi)型語(yǔ)言:
聲明變量時(shí)不知道變量的類(lèi)型(undefined),只有在賦值之后js變量才確定類(lèi)型；
typeof(a) 或 typeof a 輸出變量的類(lèi)型；
undefined表示變量未賦值,未知類(lèi)型 -->
<script>
//字符串 Java聲明 String str ="張三";
let str ="張三";
console.log(str);
//整數(shù) Java聲明 int k = 5;
let k = 5;
console.log(k);
//小數(shù) Java聲明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java聲明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱類(lèi)型語(yǔ)言
let a;//聲明變量不需要指明類(lèi)型
console.log(typeof a);//undefined 未賦值類(lèi)型,未知類(lèi)型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>
d. 數(shù)據(jù)類(lèi)型簡(jiǎn)介 string number boolean object undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS數(shù)據(jù)類(lèi)型</title>
</head>
<body>
<!-- JS數(shù)據(jù)類(lèi)型,常用數(shù)據(jù)類(lèi)型:
1.string 字符串類(lèi)型;
2.number 數(shù)字.包括整數(shù)和小數(shù)類(lèi)型;
3.boolean 布爾類(lèi)型.值只有true和false兩個(gè);
4 object 對(duì)象類(lèi)型,空對(duì)象使用null表示,有兩種格式:
new Object();
JSON格式.例如:{name:"張三",age:18};
5.undefined 變量未賦值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 數(shù)字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
// 3. boolean 布爾類(lèi)型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 對(duì)象類(lèi)型，空對(duì)象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
// 5. undefined 變量未賦值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//類(lèi)型是undefined
// Object類(lèi)型
let stu = new Object();//創(chuàng)建一個(gè)js對(duì)象,js對(duì)象的屬性想要直接加上
stu.id = 1;
stu.name = "劉一";
stu.age = 18;
console.log(stu);//{id: 1, name: "劉一", age: 18}
console.log(typeof stu);//object
// JS對(duì)象取屬性值有兩種方式:
// 1. obj.key
console.log(stu.name);//劉一
// 2. obj["key"]
console.log(stu["name"]); //劉一 == stu.name
let b = "age";
console.log(stu[b]);//可以取不定屬性的值
</script>
</body>
</html>
e. 運(yùn)算符 + - * / % = < > && || !
i. 全等符與不全等符
=== !==
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS運(yùn)算符</title>
</head>
<body>
<!--
JS運(yùn)算符
js運(yùn)算符和Java運(yùn)算符基本相同
只有一個(gè)特殊的比較運(yùn)算符
=== 判斷js變量的值和類(lèi)型都相等才為true
!== 不全等，判斷js變量的值和類(lèi)型有一個(gè)不等就為true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 運(yùn)算符 ===
console.log(a === b);//false
// 不全等 運(yùn)算符 !==
console.log(a !== b);//true
// 三元(三目)運(yùn)算符 布爾表達(dá)式?真:假
let str = a===b?"全等":"不全等";
console.log(str);//不全等
</script>
</body>
</html>
f. 流程控制語(yǔ)句
i. 條件語(yǔ)句 if else switch case default break
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>條件語(yǔ)句</title>
</head>
<body>
<!-- 條件語(yǔ)句JS的條件語(yǔ)句和Java語(yǔ)法基本一樣,但是對(duì)數(shù)據(jù)類(lèi)型的真假判斷有些區(qū)別 JS中對(duì)各種數(shù)據(jù)類(lèi)型作為布爾值的特點(diǎn):(重點(diǎn)掌握) 1. string 空字符串""為false,其余都為true 2. number 數(shù)字 只有0為false,其余數(shù)字都為true 3. boolean 布爾類(lèi)型 值只有 true和false 兩個(gè)
循環(huán)語(yǔ)句
object 對(duì)象類(lèi)型 空對(duì)象null表示false,其它對(duì)象都是true 5. undefined 變量未賦值 為false 常用語(yǔ)法格式 if ... else if ... else switch case break default -->
<script>
//if ... else
//if(true){
//if(""){// string 只有空字符為假
//if(0){number 只有0為假
//if(false){//boolean false為假 true為真
//if(null){//object null為假
//if(undefined){//undefined永為假
if("undefined"){//undefined永為假
console.log("滿(mǎn)足條件");
}else{
console.log("不滿(mǎn)足條件");
}
//switch case break default
let k =1;
switch (k) {
case 1:
console.log("111");break;
case 2:
console.log("222");break;
default: console.log("其它情況"); }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環(huán)語(yǔ)句</title>
</head>
<body>
<!-- 循環(huán)語(yǔ)句
while，do while，fori 和Java一樣；
forin
1.遍歷出數(shù)組中的索引和元素
2.遍歷出對(duì)象中的屬性和元素
forof
1.遍歷出數(shù)組中的元素
forin 與 forof 區(qū)別:
1.forin可以遍歷對(duì)象,forof不能遍歷對(duì)象
2.forin可以遍歷出數(shù)組中的索引,forof只能遍歷出數(shù)組中的元素 -->
<script>
//while 和Java一樣
let k=1;
while (k<3){
console.log(k++);
}
//do while 和Java一樣
k =1;
do{
console.log(k++);
}while (k<3)
//fori 和Java一樣
for(let i=0;i<3;i++){
console.log(i);
}
//forin 可以遍歷數(shù)組和對(duì)象
let arr = ["劉一","陳二","張三"];//JS數(shù)組使用中括號(hào)[]定義
let stu = {id:5,name:"李四",age:18};//JS對(duì)象使用大括號(hào)定義
//1.forin 遍歷出數(shù)組中的索引
for(let index in arr){
console.log(index);//數(shù)組的索引 0,1,2
console.log(arr[index]);//數(shù)組中的元素
}
//2.forin 遍歷出對(duì)象中的屬性名key
for(let k in stu){
console.log(k);//字符串屬性 id,name,age
console.log(stu[k]);//對(duì)象中的屬性值
}
//forof 可以遍歷數(shù)組
for(let e of arr){
console.log(e);//數(shù)組中的元素
}</script>
</body>
</html>
———————————————— 版權(quán)聲明：本文為CSDN博主「Regino」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn