當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

学习笔记（四）——JavaScript（一）

發布時間：2025/3/21 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了学习笔记（四）——JavaScript（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

文章目錄

一、了解 JavaScript
二、JavaScript 基本使用
- 2.1、與html結合
- 2.2、數據類型
- - 2.2.1、定義number類型
  - 2.2.2、定義string類型
  - 2.2.3、定義boolean類型
  - 2.2.4、定義null類型
- 2.3、JS 變量定義
三、JavaScript 運算符
- 3.1、算術運算符
- 3.2、賦值運算符
- 3.3、比較運算符
- 3.4、邏輯運算符
四、JavaScript 流程控制
- 4.1、switch 語句
- 4.2、while 循環
- 4.3、do/while 循環
- 4.4、for 循環

一、了解 JavaScript

JavaScript 是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能，比如響應用戶的各種操作。js 可以增強用戶和 html 頁面的交互過程，可以控制 html 元素，讓頁面有些動態效果。

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

二、JavaScript 基本使用

2.1、與html結合

① 內部 JS
書寫格式：

② 外部 JS
建立一個 js 文件書寫 js 代碼，然后再 html 文件導入：

2.2、數據類型

原始數據類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、NaN。

引用數據類型：對象(Object)、數組(Array)、函數(Function)。

2.2.1、定義number類型

number 類型可以定義的有：整數、小數、NaN

如：

var a = 1 var b = 1.2 var c = NaN

2.2.2、定義string類型

string 類型定義的值記得加" "或' '，如：

var str = "hello"; var str2 = "你好"; var str3 = '你好';

2.2.3、定義boolean類型

boolean 類型的值只有兩種：true 、false，如：

var a = true; var b = false;

2.2.4、定義null類型

null類型的賦值也有兩種類型：null、undefined

var a = null; var b = undefined;

注意：null 類型進行 typeof 操作符后，結果是 object，原因在于，null 類型被當做一個空對象引用

2.3、JS 變量定義

在 JavaScript 中創建變量通常稱為"聲明"變量。

我們使用 var 關鍵詞來聲明變量（有兩種方式）：

方式一-先聲明后賦值：

var name; //變量聲明之后，該變量是空的（它沒有值）。 name="ww"; //為聲明的變量賦值

方式二-在聲明變量時對其賦值：：

var name="ww";

注意：
①每一行完整語句后面加分號

② 可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可：

var name="ww", age=20, sex="man";

③ 在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。
如：

var name; //在執行過以下語句后，變量 name 的值將是 undefined：

④ 如果重新聲明 JavaScript 變量，該變量的值不會丟失。如：

var name="ww"; var name; //這兩條語句執行后，變量 name 的值依然是 "ww"

⑤嚴格區大小寫，并且變量名不能使用關鍵字和保留字。

三、JavaScript 運算符

3.1、算術運算符

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 x=y++	6 5	6 6
–	自減	x=–y x=y–	4 5	4 4

對于算術運算符要注意的是：字符串和數字之間的相加減，以及布爾類型和字符、數字之間的相加減。

示例：

var num = 4; var str1 = '2'; var bol = true;//1、字符串和數字之間的相加減 document.write(num+str1); // 42 document.write(str1+num); //24 document.write(num-str1); //2 document.write(str1-num); //-2//2、布爾類型和字符類型相加減 document.write(str1+bol); //2true document.write(bol+str1); //true2 document.write(bol-str1); //-1 document.write(str1-bol); //1//3、數字和布爾類型相加減布爾值true相當于1 false相當于0 document.write(num+bol); //5 document.write(bol+num); //5 document.write(bol-num); //-3 document.write(num-bol); //3

一元運算符：++ 、--、 +（正號）、 -（負號）

示例 1(自增)：
（自減和自增差不多，這里就不演示了）

var a = 3; a++;//相當于a = a+1; a = 4var b = 4; var c = ++b; //5 var d = b++; //4 //注意到c和d的值不一致,原因: c的話很容易理解b自增1后賦給c; b++后會臨時開辟一塊內存區,該內存區存放值是5，但實際賦值給d的是b的內存區并不是這個臨時內存區。

這里有些人可能會有些疑問：為什么要有正號(+) 有這個必要么？

其實，我們在寫正整數時正號的確是可以省略，但是如果運算數不是運算符所要求的類型呢？如：var a = +'2' 。這時正號的意義就顯現出來了，js會自動進行類型的轉換，接下來看下這幾個示例你就會更明白正號的其他用法了：

// 字符串轉為number，若為數字則按照字面值轉換,若不為數字則為NaN var e = +"222"; //e=222 alert(typeof e); //number var f = +"ww"; //NaN// boolean轉為number:true轉為1 false 轉為0 var flag = +true; //flag=1 var flag2 = +false; //flag2=0

(注意：用負號js一樣會轉換，但相比與正號數字前面會多個-(負號))

3.2、賦值運算符

賦值運算符用于給 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

3.3、比較運算符

比較運算符在邏輯語句中使用，以測定變量或值是否相等。

x=5，下面的表格解釋了比較運算符：

運算符描述比較返回值

==	等于	x==8 x==5	false true
===	絕對等于（值和類型均相等）	x===“5” x===5	false true
!=	不等于	x!=8	true
!==	不絕對等于(值和類型有一個不相等，或兩個都不相等)	x!=="5" x!==5	true false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

3.4、邏輯運算符

邏輯運算符用于測定變量或值之間的邏輯。

給定 x=6 以及 y=3，下表解釋了邏輯運算符：

運算符描述例子

&&	and	(x < 10 && y > 1) 為 true
\| \|	or	(x5\| \| y5) 為 false
!	not	!(x==y) 為 true

注意：

true && false --->false true && true ---->true false && false --->false false && true ---->falsetrue || false --->true true || true --->true false || true --->true false || false --->false

四、JavaScript 流程控制

4.1、switch 語句

switch 語句用于基于不同的條件來執行不同的動作。

語法

switch(n) {case 1:執行代碼塊 1break;case 2:執行代碼塊 2break;default:與 case 1 和 case 2 不同時執行的代碼 }

工作原理：首先設置表達式 n（通常是一個變量）。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。

實例

var d=1; switch (d) { case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; default:alert("默認的");break; }

注意：default 關鍵詞是用來規定匹配不存在時做的事情。比如上面例題，如果d不是0-6那么就會執行 default里的語句。

4.2、while 循環

while 循環會在指定條件為真時循環執行代碼塊。

語法

while (條件) {需要執行的代碼 }

實例

while (i<5) //只要變量i小于 5,循環將繼續運行 {x = x + "The number is " + i + "<br>";i++; }

4.3、do/while 循環

do/while 循環是 while 循環的變體。該循環會在檢查條件是否為真之前執行一次代碼塊，然后如果條件為真的話，就會重復這個循環。

語法

do {需要執行的代碼 } while (條件);

實例

do //該循環至少會執行一次，即使條件為 false 它也會執行一次，因為代碼塊會在條件被測試前執行 {x=x + "The number is " + i + "<br>";i++; } while (i<5);

4.4、for 循環

for 循環是您在希望創建循環時常會用到的工具。

語法

for (語句 1; 語句 2; 語句 3) {被執行的代碼塊 }

注意：
①語句 1(代碼塊)開始前執行；
②語句 2 定義運行循環(代碼塊)的條件；
③語句 3 在循環(代碼塊)已被執行之后執行。

實例

for (var i=0; i<5; i++) {x=x + "該數字為 " + i + "<br>"; }

有想學習 JavaScript 基本運用的可以看看我這幾篇博客：
學習筆記（六）——JavaScript（三）
學習筆記（五）——JavaScript（二）

總結

以上是生活随笔為你收集整理的学习笔记（四）——JavaScript（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：学习笔记——深拷贝与浅拷贝
下一篇：学习笔记（五）——JavaScript（