亚洲精品欧美日韩专区,欧美视频一区二,欧美伦理91

JavaScript 的簡述與基礎(chǔ)語法

2020-4-6 前端達(dá)人

目錄

JavaScript

JS 發(fā)展歷史
JS 的特點(diǎn)
JS 的組成
JS 的基礎(chǔ)語法

a. 兩種引入方式 type src

b. 三種輸出方式 console.log document.write alert

c. 變量聲明 var let const typeof undefined

d. 數(shù)據(jù)類型簡介 string number boolean object undefined

e. 運(yùn)算符 + - * / % = < > && || !

i. 全等符與不全等符 === !==

f. 流程控制語句

i. 條件語句 if else switch case default break

ii. 循環(huán)語句 while dowhile fori forin forof

JavaScript
- JS 用于完成頁面與用戶的交互功能；
1. JS 發(fā)展歷史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)?Netscape 與 Sun 合作，Netscape 管理層希望它外觀看起來像 Java，因此取名為 JavaScript。但實(shí)際上它的語法風(fēng)格與 Self 及 Scheme 較為接近；
歐洲計(jì)算機(jī)制造聯(lián)盟（ECMA）在 1997 制定腳本語言規(guī)范 ECMA Script1 (ES1)，2009 年發(fā)布了 ECMA Script5（ES5），在 2015 年發(fā)布了 ECMA Script 2015（ES6），所有的瀏覽器的都支持 ES6；
JS 的特點(diǎn)

JS 設(shè)計(jì)模仿了 Java 語言，不同如下：

JS 不需要編譯，由瀏覽器直接解釋執(zhí)行；

JS 是弱類型語言，JS 變量聲明不需要指明類型，不同類型的數(shù)據(jù)可以賦值給同一變量；
JS 的組成

ECMA Script 是 JS 的基礎(chǔ)語法；

BOM（Brower Object Model）是瀏覽器對(duì)象模型；

DOM（Document Object Model）是文檔對(duì)象模型；

JS 的基礎(chǔ)語法

a. 兩種引入方式 type src

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩種引入方式</title>
</head>
<body>
<!-- JS兩種引入方式：JS和CSS一樣都需要引入到html頁面中，瀏覽器才會(huì)解釋執(zhí)行，JS有兩種引入方式：
    1.內(nèi)嵌(內(nèi)部)腳本:在script標(biāo)簽中寫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)容到頁面；
    3.瀏覽器彈框輸出字符 -->
<script>
//1.輸出到瀏覽器控制臺(tái)
console.log("1. 輸出到瀏覽器控制臺(tái)");//開發(fā)者專用
//2.輸出html內(nèi)容到頁面
document.write("2. 輸出html內(nèi)容到頁面");//向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變量用來存放數(shù)據(jù)；
    es5以前變量聲明使用var；
    es6之后變量聲明使用let，常量聲明使用const。他們用于替代es6的var聲明方式；
 JS是弱類型語言: 
    聲明變量時(shí)不知道變量的類型(undefined),只有在賦值之后js變量才確定類型；
    typeof(a) 或 typeof a 輸出變量的類型；
    undefined表示變量未賦值,未知類型 -->
<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);
//演示弱類型語言
let a;//聲明變量不需要指明類型
console.log(typeof a);//undefined 未賦值類型,未知類型
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ù)類型簡介 string number boolean object undefined

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS數(shù)據(jù)類型</title>
</head>
<body>
<!-- JS數(shù)據(jù)類型,常用數(shù)據(jù)類型:
    1.string 字符串類型;
    2.number 數(shù)字.包括整數(shù)和小數(shù)類型;
    3.boolean 布爾類型.值只有true和false兩個(gè);
    4 object 對(duì)象類型,空對(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 布爾類型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 對(duì)象類型，空對(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);//類型是undefined
// Object類型
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變量的值和類型都相等才為true
!== 不全等，判斷js變量的值和類型有一個(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. 流程控制語句

i. 條件語句 if else switch case default break

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>條件語句</title>
</head>
<body>
<!-- 條件語句JS的條件語句和Java語法基本一樣,但是對(duì)數(shù)據(jù)類型的真假判斷有些區(qū)別 JS中對(duì)各種數(shù)據(jù)類型作為布爾值的特點(diǎn):(重點(diǎn)掌握) 1. string 空字符串""為false,其余都為true 2. number 數(shù)字 只有0為false,其余數(shù)字都為true 3. boolean 布爾類型 值只有 true和false 兩個(gè)
循環(huán)語句

object 對(duì)象類型空對(duì)象null表示false,其它對(duì)象都是true 5. undefined 變量未賦值為false 常用語法格式 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("滿足條件");
}else{
console.log("不滿足條件");
}

//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>

ii. 循環(huán)語句 while dowhile fori forin forof

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環(huán)語句</title>
</head>
<body>
<!-- 循環(huán)語句
    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

« call、apply、bind 原理實(shí)現(xiàn) 產(chǎn)品簡化改版怎么做？ »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sdgs6788.com

存檔