国产黄色免费网站_久久天天做天天爱综合色_精品国产一区久久久_成人黄色激情网站_久久成人在线视频_美女一区二区在线观看_亚洲精品免费一区亚洲精品免费精品一区 _91精品国产综合久久精品麻豆

JavaScript 的簡(jiǎn)述與基礎(chǔ)語(yǔ)法

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

目錄

JavaScript

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

a. 兩種引入方式 type src

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

c. 變量聲明 var let const typeof undefined

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

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

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

f. 流程控制語(yǔ)句

i. 條件語(yǔ)句 if else switch case default break

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

JavaScript
- JS 用于完成頁(yè)面與用戶的交互功能；
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；
JS 的特點(diǎn)

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

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

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

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

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

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

JS 的基礎(chǔ)語(yǔ)法

a. 兩種引入方式 type src

<!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)簽中寫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)");//開發(fā)者專用
//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是弱類型語(yǔ)言: 
    聲明變量時(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);
//演示弱類型語(yǔ)言
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ù)類型簡(jiǎn)介 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. 流程控制語(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ù)類型的真假判斷有些區(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)語(yǔ)句

object 對(duì)象類型空對(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("滿足條件");
}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)語(yǔ)句 while dowhile fori forin forof

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

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

日歷

鏈接

個(gè)人資料

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

存檔