JavaScript基礎之語法實例分析

發布時間：2022-08-04 09:39:08 來源：億速云閱讀：195 作者：iii 欄目：web開發

這篇文章主要介紹“JavaScript基礎之語法實例分析”，在日常操作中，相信很多人在JavaScript基礎之語法實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript基礎之語法實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

JavaScript基礎之語法實例分析

介紹

JavaScript是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。

JavaScript特點

JavaScript 是一門腳本語言。
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。
JavaScript 很容易學習。

JavaScript 已經由 ECMA（歐洲電腦制造商協會）通過 ECMAScript 實現語言的標準化。

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達式添加 try/catch
	ECMAScript 4	沒有發布
2009	ECMAScript 5	添加 "strict mode"，嚴格模式添加 JSON 支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增加指數運算符 (**) 增加 Array.prototype.includes

用法

HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。

實例1：head中的script函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head標簽中script</title>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "這是我的函數";
        }
    </script>
</head>
<body>
<h2>我的函數</h2>
<p id="demo">一段話</p>
<button type="button" onclick="myFunction()">這是函數</button>
</body>
</html>

實例2：body中的script函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body中的script</title>
</head>
<body>
<h2>我的函數</h2>
<p id="demo">我的函數</p>
<button type="button" onclick="myFunction()">點擊一下</button>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "這是我的函數"
    }
</script>
</body>
</html>

JavaScript也可以放在外部供調用，注意外部拓展名為.js。

實例3：外部調用JavaScript

外部調用.js

function myFunction() {
    document.getElementById('demo').innerHTML = "這是我的函數"
}

調用外部script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>調用外部script</title>
</head>
<body>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
<script src="外部腳本.js"></script>
</body>
</html>

輸出

JavaScript 可以通過不同的方式來輸出數據：

使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。

實例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>

實例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>

實例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("函數輸出");
    }
</script>
<button onclick="myFunction()">點擊這里</button>
</body>
</html>

實例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 是一個腳本語言，它是一個輕量級，但功能強大的編程語言。

字面量

在編程語言中，一般固定值稱為字面量。

數字（Number）字面量：可以是整數或者是小數，或者是科學計數(e)。如3.14，5.88等。
字符串（String）字面量：”可以使用單引號或雙引號。如"Hello"，"Web"等
表達式字面量：用于計算的固定值。3 + 2.2,3.14 * 2等。
數組（Array：字面量：定義一個數組。如[1,2,3,4,5,6]。
對象（Object：字面量：定義一個對象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
函數（Function）字面量：定義一個函數。如function myFunction(a, b) { return a * b;}。

注意，在JavaScript中，語句需要加結束符“；”。

JavaScrip變量

在編程語言中，變量用于存儲數據值。JavaScript 使用關鍵字var來定義變量，使用等號來為變量賦值，變量之間可以相互操作：

var y = false                                     // 布爾值
var length = 16;                                  // 數字
var points = x * 10;                              // 數字計算
var lastName = "Johnson";                         // 字符串
var cars = ["Saab", "Volvo", "BMW"];              // 數組
var person = {firstName:"John", lastName:"Doe"};  // 對象字典

JavaScript函數

為了能夠重復引用相同的功能，減少代碼的書寫和維護的方便，JavaScript提供函數功能，由關鍵字function引導：

function myFunc(a, b) {
    return a + b; // 返回a+b結果
}

JavaScript特點

相對其它語言，JavaScript具有下列特點：

JavaScript對大小寫敏感。
JavaScript使用Unicode字符集。
JavaScript推薦使用駝峰命名法定義變量，命名避免關鍵字。
JavaScript屬于弱類型語言，定義變量都是var關鍵字。

JavaScript關鍵字（按字母序）
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語句向瀏覽器發出的命令，告訴瀏覽器該做什么。下面的JavaScript語句向id="demo"的 HTML元素輸出文本"Hello World!" ：

document.getElementById("demo").innerHTML = "Hello World!";

與Python不同的是，JavaScript代碼塊都是在大括號中的，這點像極了Java。

Java標識符

常見JavaScript標識符
語句	描述
break	用于跳出循環。
catch	語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。
continue	跳過循環中的一個迭代。
do ... while	執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。
for	在條件語句為 true 時，可以將代碼塊執行指定的次數。
for ... in	用于遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。
function	定義一個函數
if ... else	用于基于不同的條件來執行不同的動作。
return	退出函數
switch	用于基于不同的條件來執行不同的動作。
throw	拋出（生成）錯誤。
try	實現錯誤處理，與 catch 一同使用。
var	聲明一個變量。
while	當條件語句為 true 時，執行語句塊。

大部分語言能夠自動補全空格，我們建議在運算符兩邊加上空格，這樣清晰美觀，但是要注意在HTML中空格的是要留意用法的，切勿混談。在JavaScript中，下面兩句話是一樣的：

var a = 10;
var b=10;

與Python相似，JavaScript也是腳本語言，屬于解釋型。

對象

定義對象

任何事物都是對象，具有相同特點的事物中抽象出來的一個特點實例。如人類中的小明。

在JavaScript中，對象就是是屬性變量的容器，類似Python中的字典，Java中的哈希映射，其中定義了對象的屬性。

var people = {
    firstName: "Mike",
    lastName: "Smith",
    age: "18",
    address: "Beijing",
    job: "Student"
};

以上就是對象定義，當然你也可以寫作一行，我這樣是為了美觀，以后也強烈大家這樣寫。

訪問對象屬性

可以說 "JavaScript 對象是變量的容器"。但是，我們通常認為 "JavaScript 對象是鍵值對的容器"。鍵值對通常寫法為key : value(鍵與值以冒號分割)，鍵值對在JavaScript對象通常稱為對象屬性。我們訪問屬性也是通過萬能的" . "（大部分語言都是用的這個）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是網站</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"] 。

函數

函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。當調用該函數時，會執行函數內的代碼。可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調用。

參數與返回值

在調用函數時，您可以向其傳遞值，這些值被稱為參數，參數個數不限。

function myFunction(var1,var2)
{
代碼
}

參數在調用時，應該嚴格按照其順序傳參，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>這是一個JavaScript網站</title>
</head>
<body>
<h2>函數參數傳遞問題</h2>
<p>點擊下面按鈕調用</p>
<button onclick="myFunc('Mike','18','Beijing')">點擊這里</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函數允許有返回值，返回關鍵字為return。當函數返回值后，函數將停止執行，在return后面的語句將不會被執行。

實例：計算兩個數的乘積并返回結果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript網站</title>
</head>
<body>
<h2>計算兩個數的值返回</h2>
<p id="demo"></p>
<script>
    function myFunc(a, b) {
        return a * b;
    }

    document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>

變量

JavaScript變量分為兩種：

全局變量：在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
局部變量：在JavaScript函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。

當我們向未聲明的JavaScript變量分配值時，該變量將被自動作為window的一個屬性。如下列語句：

name = "Mike";

將聲明window的一個屬性name。非嚴格模式下給未聲明變量賦值創建的全局變量，是全局對象的可配置屬性，可以刪除。如：

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); // 已經刪除 報錯變量未定義

事件

描述

HTML事件是發生在HTML元素上的事情。當在 HTML 頁面中使用JavaScript時， JavaScript可以觸發這些事件。

HTML事件可以是瀏覽器行為，也可以是用戶行為。以下是HTM 事件的實例：

HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊

通常，當事件發生時，你可以做些事情。在事件觸發時JavaScript可以執行一些代碼。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()">點擊查看時間1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">點擊查看時間2</button>
</body>
</html>

JavaScript通常是多行代碼，比較差常見的就是通過事件屬性調用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<h2>JavaScript事件之屬性調用</h2>
<p>點擊執行<em>myFunc()</em>函數</p>
<button onclick="myFunc()">點擊這里</button>
<p id="one"></p>
<script>
    function myFunc() {
        document.getElementById("one").innerHTML = Date();
    }
</script>
</body>
</html>

常見HTML事件
事件	描述
onchange	HTML 元素改變
onclick	用戶點擊 HTML 元素
onmouseover	用戶在一個HTML元素上移動鼠標
onmouseout	用戶從一個HTML元素上移開鼠標
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載

后續會繼續學習更多事件。

事件作用

事件可以用于處理表單驗證，用戶輸入，用戶行為及瀏覽器動作：

頁面加載時觸發事件
頁面關閉時觸發事件
用戶點擊按鈕執行動作
驗證用戶輸入內容的合法性

可以使用多種方法來執行 JavaScript 事件代碼：

HTML 事件屬性可以直接執行 JavaScript 代碼
HTML 事件屬性可以調用 JavaScript 函數
你可以為 HTML 元素指定自己的事件處理程序
你可以阻止事件的發生

字符串

字符串：一系列字符的集合。

var a = "abc";
var b = "Hello";

與Python類似，可以使用索引來訪問字符串中的每個字符：

var c = b[1];           // e

length

該屬性可以計算字符串的長度。

<!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也有一些特殊字符，例如當我們要打印引號時，需要加上“\”來進行轉義，否則編譯器無法解析。

JavaScript常見特殊字符
代碼	輸出
\'	單引號
\"	雙引號
\\	反斜杠
\n	換行
\r	回車
\t	tab(制表符)
\b	退格符
\f	換頁符

字符串作為對象

通常，JavaScript字符串是原始值，可以使用字符創建： var firstName = "Mike"，但我們也可以使用new關鍵字將字符串定義為一個對象：var firstName = new String("Mike")，這點與Java類似。

字符串常見屬性
屬性	描述
constructor	返回創建字符串屬性的函數
length	返回字符串的長度
prototype	允許您向對象添加屬性和方法

字符串常見方法
方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	連接兩個或多個字符串，返回連接后的字符串
fromCharCode()	將 Unicode 轉換為字符串
indexOf()	返回字符串中檢索指定字符第一次出現的位置
lastIndexOf()	返回字符串中檢索指定字符最后一次出現的位置
localeCompare()	用本地特定的順序來比較兩個字符串
match()	找到一個或多個正則表達式的匹配
replace()	替換與正則表達式匹配的子串
search()	檢索與正則表達式相匹配的值
slice()	提取字符串的片斷，并在新的字符串中返回被提取的部分
split()	把字符串分割為子字符串數組
substr()	從起始索引號提取字符串中指定數目的字符
substring()	提取字符串中兩個指定的索引號之間的字符
toLocaleLowerCase()	根據主機的語言環境把字符串轉換為小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLocaleUpperCase()	根據主機的語言環境把字符串轉換為大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLowerCase()	把字符串轉換為小寫
toString()	返回字符串對象值
toUpperCase()	把字符串轉換為大寫
trim()	移除字符串首尾空白
valueOf()	返回某個字符串對象的原始值

==與===區別

1、對于 string、number 等基礎類型，== 和 === 是有區別的

a）不同類型間比較，==之比較"轉化成同一類型后的值"看"值"是否相等，===如果類型不同，其結果就是不等。
b）同類型比較，直接進行 "值" 比較，兩者結果一樣。

2、對于 Array,Object 等高級類型，== 和 === 是沒有區別的

進行 "指針地址" 比較

3、基礎類型與高級類型，== 和 === 是有區別的

a）對于 ==，將高級轉化為基礎類型，進行 "值" 比較
b）因為類型不同，=== 結果為 false

4、!= 為 == 的非運算，!== 為 === 的非運算

var num=1；

var str="1"；

var test=1；

test == num   //true　相同類型　相同值 

test === num  //true　相同類型　相同值 

test !== num  //false test與num類型相同，其值也相同,　非運算肯定是false 

num == str   //true 　把str轉換為數字，檢查其是否相等。 

num != str   //false  == 的 非運算 

num === str  //false  類型不同，直接返回false 

num !== str  //true   num 與 str類型不同 意味著其兩者不等　非運算自然是true啦

運算符

JavaScript常見運算符（y=5）
運算符	描述	例子	x 運算結果	y 運算結果
+	加法	x=y+2	7	5
-	減法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余數）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
--	自減	x=--y	4	4
--	自減	x=y--	5	4

JavaScript常見賦值運算符（x=10，y=5）
運算符	例子	等同于	運算結果
=	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

JavaScript常見比較運算符（x=5）
運算符	描述	比較	返回值
==	等于	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

JavaScript常用邏輯運算符（x=6，y=3）
運算符	描述	例子
&&	and	(x < 10 && y > 1) 為 true
\|\|	or	(x==5 \|\| y==5) 為 false
!	not	!(x==y) 為 true

JavaScript 還包含了基于某些條件對變量進行賦值的條件運算符。如：

variablename=(condition)?value1:value2

條件判斷

在 JavaScript 中，我們可使用以下條件語句：

if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

if語句

條件為true時才會執行代碼。如：

<!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網站</title>
</head>
<body>
<h2>這是if語句</h2>
<button onclick="myFunc()">點擊這里</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時執行代碼，在條件為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>JavaScript網站</title>
</head>
<body>
<h2>這是if...else語句</h2>
<button onclick="myFunc()">點擊這里</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網站</title>
</head>
<body>
<h2>多重if...else語句</h2>
<button onclick="myFunc()">點擊這里</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語句來選擇要執行的多個代碼塊之一。如：

<!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網站</title>
</head>
<body>
<h2>switch語句</h2>
<button onclick="myFunc()">點擊這里</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 支持不同類型的循環：

for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

for循環

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript循環</title>
</head>
<body>
<h2>點擊按鈕循環代碼5次。</h2>
<button onclick="myFunc()">點擊這里</button>
<p id="demo"></p>
<script>
    function myFunc() {
        var x = "";
        for (var i = 0; i < 5; i++) {
            x = x + "該數字為 " + i + "<br>";
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>
</body>
</html>

fo /in循環

<!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>點擊下面的按鈕，遍歷對象person屬性</p>
<button onclick="myFunc()">點擊這里</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循環

<!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>點擊按鈕，i小于5就會打印輸出</p>
<button onclick="myFunc()">點擊這里</button>
<p id="one">顯示在這里</p>
<script>
    function myFunc() {
        let x = "", i = 0;
        while (i < 5) {
            x = x + "這個數字為" + i + "<br>";
            i++;
        }
        document.getElementById("one").innerHTML = x
    }
</script>
</body>
</html>

do/while循環

<!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的數</p>
<button onclick="myFunc()">點擊這里</button>
<p id="one"></p>
<script>
    function myFunc() {
        let x = "";
        let i = 0;
        do {
            x = x + "該數字為" + i + "<br>";
            i++;
        }
        while (i < 5);
        document.getElementById("one").innerHTML=x;
    }
</script>
</body>
</html>

for循環和while循環比較

<!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()">點擊funcOne</button>
<p id="one">funcOne在這里</p>

<p>這是funcTwo</p>
<button onclick="funcTwo()">點擊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 語句用于跳出循環。continue 用于跳過循環中的一個迭代。

<!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()">點擊funcOne</button>
<p id="one">這是funcOne</p>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="funcTwo()">點擊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 + "該數字為" + 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 + "該數字為" + i + "<br>";
        }
        document.getElementById("two").innerHTML = x;
    }
</script>

</body>
</html>

typeof、null和undefined

使用typeof操作符來檢測變量的數據類型。

<!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中，數組是一種特殊的對象類型。因此 typeof [1,2,3,4] 返回 object。

null表示空，也就是”什么也沒有“。當使用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屬性

constructor屬性返回所有JavaScript變量的構造函數。可以使用constructor屬性來查看對象是否為數組或者是否為日期 (包含字符串 "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屬性返回變量或者構造函數</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 變量可以轉換為新變量或其他數據類型：

通過使用JavaScript函數
通過JavaScript自身自動轉換

<!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()方法可以將數字轉化為字符串</p>
<p id="one">HERE</p>
<p>toString()方法可以將數字轉化為字符串</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+可用于將變量轉換為數字：

<!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操作符返回變量或者表達式類型</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>

JavaScript類型轉換
原始值	轉換為數字	轉換為字符串	轉換為布爾值
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

正則表達式

正則表達式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。

search()

用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。

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

用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

<!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>正則表達式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>

正則表達式模式

正則表達式修飾符
修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。
m	執行多行匹配。

正則表達式特殊字符
表達式	描述
[abc]	查找方括號之間的任何字符。
[0-9]	查找任何從 0 至 9 的數字。
(x\|y)	查找任何以 \| 分隔的選項。

正則表達式量詞
量詞	描述
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()

用于檢索字符串中的正則表達式的匹配，該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 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>

錯誤異常

錯誤類型

當 JavaScript 引擎執行 JavaScript 代碼時，會發生各種錯誤。
可能是語法錯誤，通常是程序員造成的編碼錯誤或錯別字。
可能是拼寫錯誤或語言中缺少的功能（可能由于瀏覽器差異）。
可能是由于來自服務器或用戶的錯誤輸出而導致的錯誤。
當然，也可能是由于許多其他不可預知的因素。

try...catch

try語句允許我們定義在執行時進行錯誤測試的代碼塊，catch語句允許我們定義當try代碼塊發生錯誤時，所執行的代碼塊。

<!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 += "點擊確定繼續\n\n";
            alert(txt)
        }
    }
</script>

</body>
</html>

throw

throw語句允許我們創建自定義錯誤。正確的技術術語是：創建或拋出異常（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之間的數字</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 "不是數字";
            x = Number(x);
            if (x < 5)
                throw "太小";
            if (x > 10)
                throw "太大";
        } catch (error) {
            message.innerHTML = "錯誤" + error;
        }
    }
</script>

</body>
</html>

函數調用

JavaScript 函數有 4 種調用方式，每種方式的不同在于this的初始化。一般而言，在Javascript中，this指向函數執行時的當前對象。

調用1：作為一個函數調用

one

function myFunc(a, b) {
    return a * b;
}

myFunc(1, 2);

two

function myFunc(a, b) {
    return a * b;
}

window.myFunc(1, 2);

調用2：函數作為方法調用

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

調用3：使用構造函數調用函數

<!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>該實例中，myFunc()是函數的構造函數</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>

調用4：作為函數方法調動函數

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

閉包

內嵌函數

實際上，在JavaScript中，所有函數都能訪問它們上一層的作用域。JavaScript支持嵌套函數，嵌套函數可以訪問上一層的函數變量。內嵌函數plus()可以訪問父函數的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>內嵌函數</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>

閉包

函數的自我調用稱為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>局部計數器</p>
<button type="button" onclick="myFunc()">計數器</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>

到此，關于“JavaScript基礎之語法實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JavaScript基礎之語法實例分析

介紹

用法

輸出

語法介紹

語句

對象

函數

事件

字符串

運算符

條件判斷

循環

typeof、null和undefined

constructor屬性

類型轉換

一元運算符+

正則表達式

錯誤異常

函數調用

閉包

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

JavaScript基礎之語法實例分析

介紹

用法

輸出

語法介紹

語句

對象

函數

事件

字符串

運算符

條件判斷

循環

typeof、null和undefined

constructor屬性

類型轉換

一元運算符+

正則表達式

錯誤異常

函數調用

閉包

猜你喜歡

最新資訊

相關推薦

相關標簽