您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript基礎(chǔ)之語法實(shí)例分析”,在日常操作中,相信很多人在JavaScript基礎(chǔ)之語法實(shí)例分析問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript基礎(chǔ)之語法實(shí)例分析”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
JavaScript是互聯(lián)網(wǎng)上最流行的腳本語言,這門語言可用于 HTML 和 web,更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。
JavaScript特點(diǎn)
JavaScript 是一門腳本語言。
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后,可由所有的現(xiàn)代瀏覽器執(zhí)行。
JavaScript 很容易學(xué)習(xí)。
JavaScript 已經(jīng)由 ECMA(歐洲電腦制造商協(xié)會)通過 ECMAScript 實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化。
年份 | 名稱 | 描述 |
---|---|---|
1997 | ECMAScript 1 | 第一個版本 |
1998 | ECMAScript 2 | 版本變更 |
1999 | ECMAScript 3 | 添加正則表達(dá)式 添加 try/catch |
ECMAScript 4 | 沒有發(fā)布 | |
2009 | ECMAScript 5 | 添加 "strict mode",嚴(yán)格模式 添加 JSON 支持 |
2011 | ECMAScript 5.1 | 版本變更 |
2015 | ECMAScript 6 | 添加類和模塊 |
2016 | ECMAScript 7 | 增加指數(shù)運(yùn)算符 (**) 增加 Array.prototype.includes |
HTML 中的腳本必須位于 <script> 與 </script> 標(biāo)簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
通常,我們需要在某個事件發(fā)生時執(zhí)行代碼,比如當(dāng)用戶點(diǎn)擊按鈕時。如果我們把 JavaScript 代碼放入函數(shù)中,就可以在事件發(fā)生時調(diào)用該函數(shù)。
實(shí)例1:head中的script函數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>head標(biāo)簽中script</title> <script> function myFunction() { document.getElementById("demo").innerHTML = "這是我的函數(shù)"; } </script> </head> <body> <h2>我的函數(shù)</h2> <p id="demo">一段話</p> <button type="button" onclick="myFunction()">這是函數(shù)</button> </body> </html>
實(shí)例2:body中的script函數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>body中的script</title> </head> <body> <h2>我的函數(shù)</h2> <p id="demo">我的函數(shù)</p> <button type="button" onclick="myFunction()">點(diǎn)擊一下</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "這是我的函數(shù)" } </script> </body> </html>
JavaScript也可以放在外部供調(diào)用,注意外部拓展名為.js。
實(shí)例3:外部調(diào)用JavaScript
外部調(diào)用.js
function myFunction() { document.getElementById('demo').innerHTML = "這是我的函數(shù)" }
調(diào)用外部script
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>調(diào)用外部script</title> </head> <body> <p id="demo">一段文字</p> <button type="button" onclick="myFunction()">嘗試一下</button> <script src="外部腳本.js"></script> </body> </html>
JavaScript 可以通過不同的方式來輸出數(shù)據(jù):
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。
實(shí)例1:aler()彈窗輸出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>alert輸出</title> </head> <body> <h2>alert輸出</h2> <script> window.alert(5 + 6) </script> </body> </html>
實(shí)例2:document.write()輸出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document.write輸出</title> </head> <body> <h2>document.write輸出</h2> <script> document.write(Date()); document.write("Hello,Web!"); </script> </body> </html>
實(shí)例3:寫到HTMl文檔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>寫到HTMl文檔</title> </head> <body> <h2>寫到HTMl文檔</h2> <script> function myFunction() { document.write("函數(shù)輸出"); } </script> <button onclick="myFunction()">點(diǎn)擊這里</button> </body> </html>
實(shí)例4:使用 console.log() 寫入到瀏覽器的控制臺
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用console.log()寫入到瀏覽器的控制臺</title> </head> <body> <h2>console.log()寫入到瀏覽器的控制臺</h2> <script > a = 5; b = 6; c = a + b; console.log(c) </script> </body> </html>
JavaScript 是一個腳本語言,它是一個輕量級,但功能強(qiáng)大的編程語言。
字面量
在編程語言中,一般固定值稱為字面量。
數(shù)字(Number)字面量:可以是整數(shù)或者是小數(shù),或者是科學(xué)計(jì)數(shù)(e)。如3.14,5.88等。
字符串(String)字面量:”可以使用單引號或雙引號。如"Hello","Web"等
表達(dá)式字面量:用于計(jì)算的固定值。3 + 2.2,3.14 * 2等。
數(shù)組(Array:字面量:定義一個數(shù)組。如[1,2,3,4,5,6]。
對象(Object:字面量:定義一個對象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
函數(shù)(Function)字面量:定義一個函數(shù)。如function myFunction(a, b) { return a * b;}。
注意,在JavaScript中,語句需要加結(jié)束符“;”。
JavaScrip變量
在編程語言中,變量用于存儲數(shù)據(jù)值。JavaScript 使用關(guān)鍵字var來定義變量, 使用等號來為變量賦值,變量之間可以相互操作:
var y = false // 布爾值 var length = 16; // 數(shù)字 var points = x * 10; // 數(shù)字計(jì)算 var lastName = "Johnson"; // 字符串 var cars = ["Saab", "Volvo", "BMW"]; // 數(shù)組 var person = {firstName:"John", lastName:"Doe"}; // 對象字典
JavaScript函數(shù)
為了能夠重復(fù)引用相同的功能,減少代碼的書寫和維護(hù)的方便,JavaScript提供函數(shù)功能,由關(guān)鍵字function引導(dǎo):
function myFunc(a, b) { return a + b; // 返回a+b結(jié)果 }
JavaScript特點(diǎn)
相對其它語言,JavaScript具有下列特點(diǎn):
JavaScript對大小寫敏感。
JavaScript使用Unicode字符集。
JavaScript推薦使用駝峰命名法定義變量,命名避免關(guān)鍵字。
JavaScript屬于弱類型語言,定義變量都是var關(guān)鍵字。
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
JavaScript注釋(與Java相同)
// 這是代碼:單句注釋,在編輯器一般是ctrl + L鍵。
/* 這是代碼 */:多行注釋,在編輯器一般是ctrl + shift + L鍵。
JavaScript語句向?yàn)g覽器發(fā)出的命令,告訴瀏覽器該做什么。下面的JavaScript語句向id="demo"的 HTML元素輸出文本"Hello World!" :
document.getElementById("demo").innerHTML = "Hello World!";
與Python不同的是,JavaScript代碼塊都是在大括號中的,這點(diǎn)像極了Java。
Java標(biāo)識符
語句 | 描述 |
---|---|
break | 用于跳出循環(huán)。 |
catch | 語句塊,在 try 語句塊執(zhí)行出錯時執(zhí)行 catch 語句塊。 |
continue | 跳過循環(huán)中的一個迭代。 |
do ... while | 執(zhí)行一個語句塊,在條件語句為 true 時繼續(xù)執(zhí)行該語句塊。 |
for | 在條件語句為 true 時,可以將代碼塊執(zhí)行指定的次數(shù)。 |
for ... in | 用于遍歷數(shù)組或者對象的屬性(對數(shù)組或者對象的屬性進(jìn)行循環(huán)操作)。 |
function | 定義一個函數(shù) |
if ... else | 用于基于不同的條件來執(zhí)行不同的動作。 |
return | 退出函數(shù) |
switch | 用于基于不同的條件來執(zhí)行不同的動作。 |
throw | 拋出(生成)錯誤 。 |
try | 實(shí)現(xiàn)錯誤處理,與 catch 一同使用。 |
var | 聲明一個變量。 |
while | 當(dāng)條件語句為 true 時,執(zhí)行語句塊。 |
大部分語言能夠自動補(bǔ)全空格,我們建議在運(yùn)算符兩邊加上空格,這樣清晰美觀,但是要注意在HTML中空格的是要留意用法的,切勿混談。在JavaScript中,下面兩句話是一樣的:
var a = 10; var b=10;
與Python相似,JavaScript也是腳本語言,屬于解釋型。
定義對象
任何事物都是對象,具有相同特點(diǎn)的事物中抽象出來的一個特點(diǎn)實(shí)例。如人類中的小明。
在JavaScript中,對象就是是屬性變量的容器,類似Python中的字典,Java中的哈希映射,其中定義了對象的屬性。
var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student" };
以上就是對象定義,當(dāng)然你也可以寫作一行,我這樣是為了美觀,以后也強(qiáng)烈大家這樣寫。
訪問對象屬性
可以說 "JavaScript 對象是變量的容器"。但是,我們通常認(rèn)為 "JavaScript 對象是鍵值對的容器"。鍵值對通常寫法為key : value(鍵與值以冒號分割),鍵值對在JavaScript對象通常稱為對象屬性。我們訪問屬性也是通過萬能的" . "(大部分語言都是用的這個)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是網(wǎng)站</title> </head> <body> <h2>訪問類屬性</h2> <!--下面語句一定要在script之前--> <p id="demo"></p> <script> var people = { firstName: "Mike", lastName: "Smith", age: "18", address: "Beijing", job: "Student" }; document.getElementById("demo").innerHTML = people["firstName"] + "." + people.lastName; </script> </body> </html>
兩種訪問方式,你可以使用 對象名 .property 或 對象名.["property"] 。
函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。當(dāng)調(diào)用該函數(shù)時,會執(zhí)行函數(shù)內(nèi)的代碼??梢栽谀呈录l(fā)生時直接調(diào)用函數(shù)(比如當(dāng)用戶點(diǎn)擊按鈕時),并且可由 JavaScript 在任何位置進(jìn)行調(diào)用。
參數(shù)與返回值
在調(diào)用函數(shù)時,您可以向其傳遞值,這些值被稱為參數(shù),參數(shù)個數(shù)不限。
function myFunction(var1,var2)
{
代碼
}
參數(shù)在調(diào)用時,應(yīng)該嚴(yán)格按照其順序傳參,如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是一個JavaScript網(wǎng)站</title> </head> <body> <h2>函數(shù)參數(shù)傳遞問題</h2> <p>點(diǎn)擊下面按鈕調(diào)用</p> <button onclick="myFunc('Mike','18','Beijing')">點(diǎn)擊這里</button> <script> function myFunc(name, age, address) { alert("My name is " + name + ", age is " + age + " and my home is in " + address); } </script> </body> </html>
JavaScript函數(shù)允許有返回值,返回關(guān)鍵字為return。當(dāng)函數(shù)返回值后,函數(shù)將停止執(zhí)行,在return后面的語句將不會被執(zhí)行。
實(shí)例:計(jì)算兩個數(shù)的乘積并返回結(jié)果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript網(wǎng)站</title> </head> <body> <h2>計(jì)算兩個數(shù)的值返回</h2> <p id="demo"></p> <script> function myFunc(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunc(3, 4); </script> </body> </html>
變量
JavaScript變量分為兩種:
全局變量:在函數(shù)外聲明的變量是全局變量,網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。
局部變量:在JavaScript函數(shù)內(nèi)部聲明的變量(使用 var)是局部變量,所以只能在函數(shù)內(nèi)部訪問它。
當(dāng)我們向未聲明的JavaScript變量分配值時,該變量將被自動作為window的一個屬性。如下列語句:
name = "Mike";
將聲明window的一個屬性name。非嚴(yán)格模式下給未聲明變量賦值創(chuàng)建的全局變量,是全局對象的可配置屬性,可以刪除。如:
var var1 = 1; // 不可配置全局屬性 var2 = 2; // 沒有使用 var 聲明,可配置全局屬性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 無法刪除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已經(jīng)刪除 報(bào)錯變量未定義
描述
HTML事件是發(fā)生在HTML元素上的事情。當(dāng)在 HTML 頁面中使用JavaScript時, JavaScript可以觸發(fā)這些事件。
HTML事件可以是瀏覽器行為,也可以是用戶行為。以下是HTM 事件的實(shí)例:
HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點(diǎn)擊
通常,當(dāng)事件發(fā)生時,你可以做些事情。在事件觸發(fā)時JavaScript可以執(zhí)行一些代碼。HTML元素中可以添加事件屬性,使用JavaScript代碼來添加HTML元素。
單引號:<some-HTML-element some-event='JavaScript 代碼'>
雙引號:<some-HTML-element some-event="JavaScript 代碼">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript事件</title> </head> <body> <h2>JavaScript事件處理兩種方式</h2> <p id="demoOne"></p> <button onclick="getElementById('demoOne').innerHTML=Date()">點(diǎn)擊查看時間1</button> <p id="demoTwo"></p> <button onclick="this.innerHTML=Date()">點(diǎn)擊查看時間2</button> </body> </html>
JavaScript通常是多行代碼,比較差常見的就是通過事件屬性調(diào)用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript事件</title> </head> <body> <h2>JavaScript事件之屬性調(diào)用</h2> <p>點(diǎn)擊執(zhí)行<em>myFunc()</em>函數(shù)</p> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { document.getElementById("one").innerHTML = Date(); } </script> </body> </html>
事件 | 描述 |
---|---|
onchange | HTML 元素改變 |
onclick | 用戶點(diǎn)擊 HTML 元素 |
onmouseover | 用戶在一個HTML元素上移動鼠標(biāo) |
onmouseout | 用戶從一個HTML元素上移開鼠標(biāo) |
onkeydown | 用戶按下鍵盤按鍵 |
onload | 瀏覽器已完成頁面的加載 |
后續(xù)會繼續(xù)學(xué)習(xí)更多事件。
事件作用
事件可以用于處理表單驗(yàn)證,用戶輸入,用戶行為及瀏覽器動作:
頁面加載時觸發(fā)事件
頁面關(guān)閉時觸發(fā)事件
用戶點(diǎn)擊按鈕執(zhí)行動作
驗(yàn)證用戶輸入內(nèi)容的合法性
可以使用多種方法來執(zhí)行 JavaScript 事件代碼:
HTML 事件屬性可以直接執(zhí)行 JavaScript 代碼
HTML 事件屬性可以調(diào)用 JavaScript 函數(shù)
你可以為 HTML 元素指定自己的事件處理程序
你可以阻止事件的發(fā)生
字符串:一系列字符的集合。
var a = "abc"; var b = "Hello";
與Python類似,可以使用索引來訪問字符串中的每個字符:
var c = b[1]; // e
length
該屬性可以計(jì)算字符串的長度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字符串長度</title> </head> <body> <script> var txtOne = "Hello World!"; document.write("<p>" + txtOne.length + "</p>"); var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write("<p>" + txtTwo.length + "</p>"); </script> </body> </html>
JavaScript也有一些特殊字符,例如當(dāng)我們要打印引號時,需要加上“\”來進(jìn)行轉(zhuǎn)義,否則編譯器無法解析。
代碼 | 輸出 |
---|---|
\' | 單引號 |
\" | 雙引號 |
\\ | 反斜杠 |
\n | 換行 |
\r | 回車 |
\t | tab(制表符) |
\b | 退格符 |
\f | 換頁符 |
字符串作為對象
通常,JavaScript字符串是原始值,可以使用字符創(chuàng)建: var firstName = "Mike",但我們也可以使用new關(guān)鍵字將字符串定義為一個對象:var firstName = new String("Mike"),這點(diǎn)與Java類似。
屬性 | 描述 |
---|---|
constructor | 返回創(chuàng)建字符串屬性的函數(shù) |
length | 返回字符串的長度 |
prototype | 允許您向?qū)ο筇砑訉傩院头椒?/td> |
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 連接兩個或多個字符串,返回連接后的字符串 |
fromCharCode() | 將 Unicode 轉(zhuǎn)換為字符串 |
indexOf() | 返回字符串中檢索指定字符第一次出現(xiàn)的位置 |
lastIndexOf() | 返回字符串中檢索指定字符最后一次出現(xiàn)的位置 |
localeCompare() | 用本地特定的順序來比較兩個字符串 |
match() | 找到一個或多個正則表達(dá)式的匹配 |
replace() | 替換與正則表達(dá)式匹配的子串 |
search() | 檢索與正則表達(dá)式相匹配的值 |
slice() | 提取字符串的片斷,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割為子字符串?dāng)?shù)組 |
substr() | 從起始索引號提取字符串中指定數(shù)目的字符 |
substring() | 提取字符串中兩個指定的索引號之間的字符 |
toLocaleLowerCase() | 根據(jù)主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為小寫,只有幾種語言(如土耳其語)具有地方特有的大小寫映射 |
toLocaleUpperCase() | 根據(jù)主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為大寫,只有幾種語言(如土耳其語)具有地方特有的大小寫映射 |
toLowerCase() | 把字符串轉(zhuǎn)換為小寫 |
toString() | 返回字符串對象值 |
toUpperCase() | 把字符串轉(zhuǎn)換為大寫 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某個字符串對象的原始值 |
==與===區(qū)別
1、對于 string、number 等基礎(chǔ)類型,== 和 === 是有區(qū)別的
a)不同類型間比較,==之比較"轉(zhuǎn)化成同一類型后的值"看"值"是否相等,===如果類型不同,其結(jié)果就是不等。
b)同類型比較,直接進(jìn)行 "值" 比較,兩者結(jié)果一樣。
2、對于 Array,Object 等高級類型,== 和 === 是沒有區(qū)別的
進(jìn)行 "指針地址" 比較
3、基礎(chǔ)類型與高級類型,== 和 === 是有區(qū)別的
a)對于 ==,將高級轉(zhuǎn)化為基礎(chǔ)類型,進(jìn)行 "值" 比較
b)因?yàn)轭愋筒煌?== 結(jié)果為 false
4、!= 為 == 的非運(yùn)算,!== 為 === 的非運(yùn)算
var num=1; var str="1"; var test=1; test == num //true 相同類型 相同值 test === num //true 相同類型 相同值 test !== num //false test與num類型相同,其值也相同, 非運(yùn)算肯定是false num == str //true 把str轉(zhuǎn)換為數(shù)字,檢查其是否相等。 num != str //false == 的 非運(yùn)算 num === str //false 類型不同,直接返回false num !== str //true num 與 str類型不同 意味著其兩者不等 非運(yùn)算自然是true啦
運(yùn)算符 | 描述 | 例子 | x 運(yùn)算結(jié)果 | y 運(yùn)算結(jié)果 |
---|---|---|---|---|
+ | 加法 | x=y+2 | 7 | 5 |
- | 減法 | x=y-2 | 3 | 5 |
* | 乘法 | x=y*2 | 10 | 5 |
/ | 除法 | x=y/2 | 2.5 | 5 |
% | 取模(余數(shù)) | x=y%2 | 1 | 5 |
++ | 自增 | x=++y | 6 | 6 |
x=y++ | 5 | 6 | ||
-- | 自減 | x=--y | 4 | 4 |
x=y-- | 5 | 4 |
運(yùn)算符 | 例子 | 等同于 | 運(yùn)算結(jié)果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
運(yùn)算符 | 描述 | 比較 | 返回值 |
---|---|---|---|
== | 等于 | x==8 | false |
x==5 | true | ||
=== | 絕對等于(值和類型均相等) | x==="5" | false |
x===5 | true | ||
!= | 不等于 | x!=8 | true |
!== | 不絕對等于(值和類型有一個不相等,或兩個都不相等) | x!=="5" | true |
x!==5 | false | ||
> | 大于 | x>8 | false |
< | 小于 | x<8 | true |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | x<=8 | true |
<= | 小于或等于 | x<=8 | true |
運(yùn)算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 為 true |
|| | or | (x==5 || y==5) 為 false |
! | not | !(x==y) 為 true |
JavaScript 還包含了基于某些條件對變量進(jìn)行賦值的條件運(yùn)算符。如:
variablename=(condition)?value1:value2
在 JavaScript 中,我們可使用以下條件語句:
if 語句 - 只有當(dāng)指定條件為 true 時,使用該語句來執(zhí)行代碼
if...else 語句 - 當(dāng)條件為 true 時執(zhí)行代碼,當(dāng)條件為 false 時執(zhí)行其他代碼
if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執(zhí)行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執(zhí)行
if語句
條件為true時才會執(zhí)行代碼。如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript網(wǎng)站</title> </head> <body> <h2>這是if語句</h2> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 20) { x = "Hello, Before 20:00"; } document.getElementById("one").innerHTML = x; } </script> </body> </html>
if...else語句
使用 if....else語句在條件為true時執(zhí)行代碼,在條件為false時執(zhí)行其他代碼。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript網(wǎng)站</title> </head> <body> <h2>這是if...else語句</h2> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 20) { x = "Hello, Before 20:00"; }else { x = "Hello, After 20:00"; } document.getElementById("one").innerHTML = x; } </script> </body> </html>
多重if..else語句
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript網(wǎng)站</title> </head> <body> <h2>多重if...else語句</h2> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { var x = ""; var time = new Date().getHours(); if (time < 12) { x = "上午好"; } else if (time < 14) { x = "中午好"; } else { x = "下午好"; } document.getElementById("one").innerHTML = x; } </script> </body> </html>
switch語句
使用switch語句來選擇要執(zhí)行的多個代碼塊之一。如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>JavaScript網(wǎng)站</title> </head> <body> <h2>switch語句</h2> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { var x = ""; var time = new Date().getMonth(); switch (time) { case 0: x = "January"; break; case 1: x = "February"; break; case 2: x = "March"; break; case 3: x = "April"; break; case 4: x = "May"; break; case 5: x = "Jane"; break; case 6: x = "July"; break; case 7: x = "August"; break; case 8: x = "September"; break; case 9: x = "October"; break; case 10: x = "November"; break; case 11: x = "December"; break; default: x = "ERROR"; } document.getElementById("one").innerHTML = x; } </script> </body> </html>
JavaScript 支持不同類型的循環(huán):
for - 循環(huán)代碼塊一定的次數(shù)
for/in - 循環(huán)遍歷對象的屬性
while - 當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊
do/while - 同樣當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊
for循環(huán)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript循環(huán)</title> </head> <body> <h2>點(diǎn)擊按鈕循環(huán)代碼5次。</h2> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunc() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "該數(shù)字為 " + i + "<br>"; } document.getElementById("demo").innerHTML = x; } </script> </body> </html>
fo /in循環(huán)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>點(diǎn)擊下面的按鈕,遍歷對象person屬性</p> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { let x; let text = ""; const person = { firstName: "Bill", lastName: "Gates", age: 56 }; for (x in person) { text = text + " " + person[x]; } document.getElementById("one").innerHTML = text; } </script> </body> </html>
while循環(huán)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>點(diǎn)擊按鈕,i小于5就會打印輸出</p> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one">顯示在這里</p> <script> function myFunc() { let x = "", i = 0; while (i < 5) { x = x + "這個數(shù)字為" + i + "<br>"; i++; } document.getElementById("one").innerHTML = x } </script> </body> </html>
do/while循環(huán)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>點(diǎn)擊按鈕,打印小于5的數(shù)</p> <button onclick="myFunc()">點(diǎn)擊這里</button> <p id="one"></p> <script> function myFunc() { let x = ""; let i = 0; do { x = x + "該數(shù)字為" + i + "<br>"; i++; } while (i < 5); document.getElementById("one").innerHTML=x; } </script> </body> </html>
for循環(huán)和while循環(huán)比較
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>這是funcOne</p> <button onclick="funcOne()">點(diǎn)擊funcOne</button> <p id="one">funcOne在這里</p> <p>這是funcTwo</p> <button onclick="funcTwo()">點(diǎn)擊funcTwo</button> <p id="two">funcTwo在這里</p> <script> function funcOne() { numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let i = 0; let addRes = 0; while (numbers[i]) { addRes += numbers[i]; i++; } document.getElementById("one").innerHTML = addRes + "<br>"; } function funcTwo() { numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let i = 0; let mulRes = 1; for (; numbers[i];) { mulRes *= numbers[i]; i++; } document.getElementById("two").innerHTML = mulRes + "<br>"; } </script> </body> </html>
Break和Continue
break 語句用于跳出循環(huán)。continue 用于跳過循環(huán)中的一個迭代。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>這是continue和break語句</p> <button onclick="funcOne()">點(diǎn)擊funcOne</button> <p id="one">這是funcOne</p> <br> <br> <br> <br> <br> <br> <button onclick="funcTwo()">點(diǎn)擊funcTwo</button> <p id="two">這是funcTwo</p> <script> function funcOne() { let x = ""; let i = 0; for (i = 0; i < 10; i++) { if (i < 5) { break; } x = x + "該數(shù)字為" + i + "<br>"; } document.getElementById("one").innerHTML = x; } function funcTwo() { let x = ""; let i = 0; for (i = 0; i < 10; i++) { if (i === 8) { continue; } x = x + "該數(shù)字為" + i + "<br>"; } document.getElementById("two").innerHTML = x; } </script> </body> </html>
使用typeof操作符來檢測變量的數(shù)據(jù)類型。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p id="one"></p> <script> document.getElementById("one").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof false + "<br>" + typeof [1, 2, 3, 4] + "<br>" + typeof {name: 'john', age: 34}; </script> </body> </html>
在JavaScript中,數(shù)組是一種特殊的對象類型。 因此 typeof [1,2,3,4] 返回 object。
null表示空,也就是”什么也沒有“。當(dāng)使用typeof 檢測時,返回object。對象可以使用undefined來清空。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>one:</p> <p id="one"></p> <p>two:</p> <p id="two"></p> <script> var person = {firstName: "Bill", lastName: "Gates", age: 50}; var person = null; document.getElementById("one").innerHTML = typeof person; person = undefined document.getElementById("two").innerHTML = typeof person; </script> </body> </html>
constructor屬性返回所有JavaScript變量的構(gòu)造函數(shù)。可以使用constructor屬性來查看對象是否為數(shù)組或者是否為日期 (包含字符串 "Date")等。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>constructor屬性返回變量或者構(gòu)造函數(shù)</p> <p id="one">HRER</p> <script> document.getElementById("one").innerHTML = "Hello".constructor + "<br>" + 3.14.constructor + "<br>" + false.constructor + "<br>" + [1, 2, 3].constructor + "<br>" + {name: "Hello", age: 18}.constructor + "<br>" + new Date().constructor + "<br>" + function () { }.constructor; </script> </body> </html>
JavaScript 變量可以轉(zhuǎn)換為新變量或其他數(shù)據(jù)類型:
通過使用JavaScript函數(shù)
通過JavaScript自身自動轉(zhuǎn)換
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>String()方法可以將數(shù)字轉(zhuǎn)化為字符串</p> <p id="one">HERE</p> <p>toString()方法可以將數(shù)字轉(zhuǎn)化為字符串</p> <p id="two">HERE</p> <script> let x = 123; document.getElementById("one").innerHTML = String(x) + "<br>" + String(123) + "<br>" + String(100 + 23); document.getElementById("two").innerHTML = x.toString() + "<br>" + (123).toString() + "<br>" + (100 + 123.2).toString(); </script> </body> </html>
Operator+可用于將變量轉(zhuǎn)換為數(shù)字:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <P>typeof操作符返回變量或者表達(dá)式類型</P> <button onclick="myFuncOne()">CLICK HERE ONE</button> <p id="one">HERE</p> <button onclick="myFuncTwo()">CLICK HERE TWO</button> <p id="two">HERE</p> <script> function myFuncOne() { let y = "5"; let x = +y; document.getElementById("one").innerHTML = typeof y + "<br>" + x + "<br>" + typeof x; } function myFuncTwo() { let a = "Hello"; let b = +a; document.getElementById("two").innerHTML = typeof a + "<br>" + b + "<br>" + typeof b; } </script> </body> </html>
原始值 | 轉(zhuǎn)換為數(shù)字 | 轉(zhuǎn)換為字符串 | 轉(zhuǎn)換為布爾值 |
---|---|---|---|
false | 0 | "false" | false |
true | 1 | "true" | true |
0 | 0 | "0" | false |
1 | 1 | "1" | true |
"0" | 0 | "0" | true |
"000" | 0 | "000" | true |
"1" | 1 | "1" | true |
NaN | NaN | "NaN" | false |
Infinity | Infinity | "Infinity" | true |
-Infinity | -Infinity | "-Infinity" | true |
"" | 0 | "" | false |
"20" | 20 | "20" | true |
"Runoob" | NaN | "Runoob" | true |
[ ] | 0 | "" | true |
[20] | 20 | "20" | true |
[10,20] | NaN | "10,20" | true |
["Runoob"] | NaN | "Runoob" | true |
["Runoob","Google"] | NaN | "Runoob,Google" | true |
function(){} | NaN | "function(){}" | true |
{ } | NaN | "[object Object]" | true |
null | 0 | "null" | false |
undefined | NaN | "undefined" | false |
正則表達(dá)式(英語:Regular Expression,在代碼中常簡寫為regex、regexp或RE)使用單個字符串來描述、匹配一系列符合某個句法規(guī)則的字符串搜索模式。
search()
用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串,并返回子串的起始位置。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>收索字符串,匹配位置</p> <button onclick="myFuncOne()">CLICK HERE ONE</button> <p id="one">HERE</p> <button onclick="myFuncTwo()">CLICK HERE TWO</button> <p id="two">HERE</p> <script> function myFuncOne() { let str = "Hello,World!"; document.getElementById("one").innerHTML = str.search(/World/i); } function myFuncTwo() { let str = "Welcome to China!"; document.getElementById("two").innerHTML = str.search("China"); } </script> </body> </html>
replace()
用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達(dá)式匹配的子串。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>正則表達(dá)式replace()替換</p> <button onclick="myFuncOne()">CLICK ONE</button> <p id="one">Hello,Java</p> <button onclick="myFuncTwo()">CLICK TWO</button> <p id="two">Hello,Java</p> <script> function myFuncOne() { let str = document.getElementById("one").innerHTML; document.getElementById("one").innerHTML = str.replace(/Java/i, "Python"); } function myFuncTwo() { let str = document.getElementById("two").innerHTML; document.getElementById("two").innerHTML = str.replace("Java","JavaScipt"); } </script> </body> </html>
正則表達(dá)式模式
修飾符 | 描述 |
---|---|
i | 執(zhí)行對大小寫不敏感的匹配。 |
g | 執(zhí)行全局匹配(查找所有匹配而非在找到第一個匹配后停止)。 |
m | 執(zhí)行多行匹配。 |
表達(dá)式 | 描述 |
---|---|
[abc] | 查找方括號之間的任何字符。 |
[0-9] | 查找任何從 0 至 9 的數(shù)字。 |
(x|y) | 查找任何以 | 分隔的選項(xiàng)。 |
量詞 | 描述 |
---|---|
n+ | 匹配任何包含至少一個 n 的字符串。 |
n* | 匹配任何包含零個或多個 n 的字符串。 |
n? | 匹配任何包含零個或一個 n 的字符串。 |
test()
用于檢測一個字符串是否匹配某個模式,如果字符串中含有匹配的文本,則返回true,否則返回false。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <script> let obj = new RegExp("e"); let boolOne = obj.test("Hello,This is JavaScript"); let boolTwo = obj.test("This is JavaScript"); document.write(boolOne + "<br>" + boolTwo); </script> </body> </html>
exec()
用于檢索字符串中的正則表達(dá)式的匹配,該函數(shù)返回一個數(shù)組,其中存放匹配的結(jié)果。如果未找到匹配,則返回值為 null。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <script> let obj = new RegExp(/e/); resOne = obj.exec("Hello,This is JavaScript"); resTwo = obj.exec("This is JavaScript"); /*沒有就是null*/ document.write(resOne + "<br>" + resTwo); </script> </body> </html>
錯誤類型
當(dāng) JavaScript 引擎執(zhí)行 JavaScript 代碼時,會發(fā)生各種錯誤。
可能是語法錯誤,通常是程序員造成的編碼錯誤或錯別字。
可能是拼寫錯誤或語言中缺少的功能(可能由于瀏覽器差異)。
可能是由于來自服務(wù)器或用戶的錯誤輸出而導(dǎo)致的錯誤。
當(dāng)然,也可能是由于許多其他不可預(yù)知的因素。
try...catch
try語句允許我們定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊,catch語句允許我們定義當(dāng)try代碼塊發(fā)生錯誤時,所執(zhí)行的代碼塊。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="button" value="查看消息" onclick="myFunc()"> <script> let txt = ""; function myFunc() { try { alert111("Hello,World!") } catch (err) { txt = "這里有一個錯誤\n\n"; txt += "錯誤描述:" + err.message + "\n\n"; txt += "點(diǎn)擊確定繼續(xù)\n\n"; alert(txt) } } </script> </body> </html>
throw
throw語句允許我們創(chuàng)建自定義錯誤。正確的技術(shù)術(shù)語是:創(chuàng)建或拋出異常(exception)。如果把throw與try和catch一起使用,那么您能夠控制程序流,并生成自定義的錯誤消息。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>請輸入一個5-10之間的數(shù)字</p> <label for="one"></label><input id="one" type="text"> <button type="button" onclick="myFunc()">CLICK</button> <p id="message">HERE</p> <script> function myFunc() { let message; let x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("one").value; try { if (x === "") throw "值為空"; if (isNaN(x)) throw "不是數(shù)字"; x = Number(x); if (x < 5) throw "太小"; if (x > 10) throw "太大"; } catch (error) { message.innerHTML = "錯誤" + error; } } </script> </body> </html>
JavaScript 函數(shù)有 4 種調(diào)用方式,每種方式的不同在于this的初始化。一般而言,在Javascript中,this指向函數(shù)執(zhí)行時的當(dāng)前對象。
調(diào)用1:作為一個函數(shù)調(diào)用
one
function myFunc(a, b) { return a * b; } myFunc(1, 2);
two
function myFunc(a, b) { return a * b; } window.myFunc(1, 2);
調(diào)用2:函數(shù)作為方法調(diào)用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>函數(shù)作為方法調(diào)用</p> <p id="one">HERE</p> <script> let myObject = { firstName: "Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } }; document.getElementById("one").innerHTML = myObject.fullName(); </script> </body> </html>
調(diào)用3:使用構(gòu)造函數(shù)調(diào)用函數(shù)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>該實(shí)例中,myFunc()是函數(shù)的構(gòu)造函數(shù)</p> <p id="one"></p> <script> function myFunc(argOne, argTwo) { this.Name = argOne; this.Number = argTwo; } let x = new myFunc("Hello", 123); document.getElementById("one").innerHTML = x.Name; </script> </body> </html>
調(diào)用4:作為函數(shù)方法調(diào)動函數(shù)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>作為函數(shù)方法調(diào)動函數(shù)</p> <p id="one">HERE</p> <script> let obj, array; function myFunc(a, b) { return a * b; } array = [5, 6]; obj = myFunc.apply(obj, array); document.getElementById("one").innerHTML = obj; </script> </body> </html>
內(nèi)嵌函數(shù)
實(shí)際上,在JavaScript中,所有函數(shù)都能訪問它們上一層的作用域。JavaScript支持嵌套函數(shù),嵌套函數(shù)可以訪問上一層的函數(shù)變量。內(nèi)嵌函數(shù)plus()可以訪問父函數(shù)的counter變量:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>內(nèi)嵌函數(shù)</p> <p id="one">HERE</p> <script> document.getElementById("one").innerHTML = add(); function add() { let counter = 0; function plus() { counter += 1; } plus(); return counter; } </script> </body> </html>
閉包
函數(shù)的自我調(diào)用稱為bibao
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <p>局部計(jì)數(shù)器</p> <button type="button" onclick="myFunc()">計(jì)數(shù)器</button> <p id="one">HERE</p> <script> let add = (function () { let counter = 0; return function () { return counter += 1; } })(); function myFunc() { document.getElementById("one").innerHTML = add(); } </script> </body> </html>
到此,關(guān)于“JavaScript基礎(chǔ)之語法實(shí)例分析”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。