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

javascript

JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】

發布時間：2024/9/30 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

w3school 在線教程：https://www.w3school.com.cn

JavaScript學習筆記01【基礎——簡介、基礎語法、運算符、特殊語法、流程控制語句】【day01】

JavaScript學習筆記02【基礎——對象（Function、Array、Date、Math、RegExp、Global）】【day01】

JavaScript學習筆記03【基礎——對象（RegExp、Global）】【day01】

JavaScript學習筆記04【高級——DOM和事件的簡單學習、BOM對象】【day02】

JavaScript學習筆記05【高級——DOM對象、JavaScript中的事件】【day02】

01 JavaScript 簡介

今日內容

JavaScript_簡介

JavaScript_發展史

02 JavaScript 基礎語法

JavaScript_語法_與html結合方式

JavaScript_語法_注釋&數據類型

JavaScript_語法_變量

JavaScript_語法_變量_typeof

w3school 在線教程

03 JavaScript 運算符

JavaScript_語法_一元運算符

JavaScript_語法_算數&比較運算符

JavaScript_語法_邏輯運算符

JavaScript_語法_三元運算符

04 JavaScript 特殊語法

05 JavaScript 語法_流程控制語句

JavaScript_語法_流程控制語句

JavaScript_語法_練習_99乘法表

01 JavaScript 簡介

今日內容

JavaScript基礎

JavaScript_簡介

* 概念：一門客戶端腳本語言。
?? ?* 運行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎。
?? ?* 腳本語言：不需要編譯，直接就可以被瀏覽器解析執行了。

* 功能：
?? ?* 可以來增強用戶和html頁面的交互過程，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗。

JavaScript_發展史

* JavaScript發展史：
?? ?1. 1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用于表單的校驗。命名為： C--?? ?，后來更名為：ScriptEase。
?? ?2. 1995年，Netscape(網景)公司，開發了一門客戶端腳本語言：LiveScript。后來，請來SUN公司的專家，修改LiveScript，命名為JavaScript。
?? ?3. 1996年，微軟抄襲JavaScript開發出JScript語言。
?? ?4. 1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，就是統一了所有客戶端腳本語言的編碼方式。

?? ?* JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

02 JavaScript 基礎語法

JavaScript_語法_與html結合方式

JavaScript_語法_注釋&數據類型

* ECMAScript：客戶端腳本語言的標準。
?? ?1. 基本語法：
?? ??? ?1. 與html結合方式
?? ??? ?2. 注釋
?? ??? ??? ?1. 單行注釋：// 注釋內容
?? ??? ??? ?2. 多行注釋：/* 注釋內容 */
?? ??? ?3. 數據類型：
?? ??? ??? ?1. 原始數據類型(基本數據類型)：
?? ??? ??? ??? ?1. number：數字。整數/小數/NaN(not a number，一個不是數字的數字類型)
?? ??? ??? ??? ?2. string：字符串。字符串 ?"abc"、"a"、'abc'
?? ??? ??? ??? ?3. boolean：true和false
?? ??? ??? ??? ?4. null：一個對象為空的占位符
?? ??? ??? ??? ?5. undefined：未定義。如果一個變量沒有給初始化值，則會被默認賦值為undefined
?? ??? ??? ?2. 引用數據類型：對象

JavaScript_語法_變量

?? ??? ?4. 變量
?? ??? ??? ?* 變量：一小塊存儲數據的內存空間
?? ??? ??? ?* Java語言是強類型語言，而JavaScript是弱類型語言。
?? ??? ??? ??? ?* 強類型：在開辟變量存儲空間時，定義了空間將來存儲的數據的數據類型，只能存儲固定類型的數據
?? ??? ??? ??? ?* 弱類型：在開辟變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。
?? ??? ??? ?* 語法：
?? ??? ??? ??? ?* var 變量名 = 初始化值;

JavaScript_語法_變量_typeof

?? ??? ?4. 變量
?? ??? ??? ?* 變量：一小塊存儲數據的內存空間
?? ??? ??? ?* Java語言是強類型語言，而JavaScript是弱類型語言。
?? ??? ??? ??? ?* 強類型：在開辟變量存儲空間時，定義了空間將來存儲的數據的數據類型。只能存儲固定類型的數據
?? ??? ??? ??? ?* 弱類型：在開辟變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。
?? ??? ??? ?* 語法：
?? ??? ??? ??? ?* var 變量名 = 初始化值;
?? ??? ??? ?
?? ??? ??? ?* typeof運算符：獲取變量的類型。
?? ??? ??? ??? ?* 注：null運算后得到的是object

w3school 在線教程

w3school 在線教程：https://www.w3school.com.cn/

03 JavaScript 運算符

JavaScript_語法_一元運算符

?? ??? ?5. 運算符
?? ??? ??? ?1. 一元運算符：只有一個運算數的運算符
?? ??? ??? ??? ?++、-- 、 +(正號)? 、-(負號)
? ? ? ? ? ? ? ? * ++ --：自增(自減)
?? ??? ??? ??? ??? ?* ++(--) 在前，先自增(自減)，再運算
?? ??? ??? ??? ??? ?* ++(--) 在后，先運算，再自增(自減)
?? ??? ??? ??? ?* +(-)：正負號
?? ??? ??? ? ? ?* 注意：在JS中，如果運算數不是運算符所要求的類型，那么js引擎會自動的將運算數進行類型轉換。
? ? ? ? ? ? ? ? ? ? * 其他類型轉number：
? ? ? ? ? ? ? ? ? ? ? ? * string轉number：按照字面值轉換，如果字面值不是數字，則轉為NaN（不是數字的數字）。
? ? ? ? ? ? ? ? ? ? ? ? * boolean轉number：true轉為1，false轉為0。
?? ??? ??? ?2. 算數運算符
?? ??? ??? ??? ?+ - * / % ...

?? ??? ??? ?3. 賦值運算符
?? ??? ??? ??? ?= += -+....

?? ??? ??? ?4. 比較運算符
?? ??? ??? ??? ?> < >= <= == ===(全等于)

?? ??? ??? ?5. 邏輯運算符
?? ??? ??? ??? ?&& || !? ? ? ? ? ??
?? ??? ??? ?6. 三元運算符
?? ??? ??? ??? ?? : 表達式

JavaScript_語法_算數&比較運算符

算數運算符：+ - * / % ...

比較運算符：>、<、>=、<=、==、===(全等于)
? * 比較方式
? ? ? ? 1. 類型相同：直接比較
? ? ? ? ? ? ? ? * 字符串：按照字典順序比較。按位逐一比較，直到得出大小為止。
? ? ? ? 2. 類型不同：先進行類型轉換，再比較，例："123" == 123，先字符串轉數字，再比較。
? ? ? ? ? ? ? ? * ===：全等于。在比較之前，先判斷類型，如果類型不一樣，則直接返回false。

JavaScript_語法_邏輯運算符

邏輯運算符：&&、||、!
? ? &&：與（短路）
? ? ||：或 (短路)
? ? !：非
? ? ? * 其他類型轉boolean：
? ? ? ? ? 1. number：0或NaN為假，其他為真
? ? ? ? ? 2. string：除了空字符串("")，其他都是true
? ? ? ? ? 3. null&undefined：都是false
? ? ? ? ? 4. 對象：所有對象都為true

JavaScript_語法_三元運算符

6. 三元運算符——? : 表達式
? ? 語法：
? ? ? * 表達式? 值1:值2;
? ? ? * 判斷表達式的值，如果是true則取值1，如果是false則取值2。

04 JavaScript 特殊語法

語句以“;”結尾，如果一行只有一條語句，則“;”可以省略 (不建議)。

變量的定義使用var關鍵字，也可以不使用（作用范圍不同）。
* 用? ?：定義的變量是局部變量。
* 不用：定義的變量是全局變量(不建議)。

js語句結束標志：回車or分號。

05 JavaScript 語法_流程控制語句

JavaScript_語法_流程控制語句

6. 流程控制語句：
? ? 1. if...else...
? ? 2. switch
? ? ? ? * 在java中，switch語句可以接受的數據類型：byte、int、short、char、枚舉(1.5)、String(1.7)
? ? ? ? ? ? * switch(變量):
? ? ? ? ? ? ? ? ? case 值:
? ? ? ? * 在JS中，switch語句可以接受任意的原始數據類型。
? ? 3. while
? ? 4. do...while
? ? 5. for

JavaScript_語法_練習_99乘法表

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>8. 練習：99乘法表</title><style>td {border: 1px solid;}</style><script>document.write("<table align='center'>");//1.完成基本的for循環嵌套，展示乘法表for (var i = 1; i <= 9; i++) {document.write("<tr>");for (var j = 1; j <= i; j++) {document.write("<td>");//輸出 1 * 1 = 1document.write(i + " * " + j + " = " + (i * j) + "   ");document.write("</td>");}// document.write("<br>"); // 輸出換行document.write("</tr>");}//2.完成表格的嵌套document.write("</table>");</script></head><body></body> </html>

多靜坐以收心，寡酒色以清心。去嗜念以養心，通古訓以警心。悟至理以明心，常布施以善心。

總結

以上是生活随笔為你收集整理的JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： HTML/CSS学习笔记03【CSS概述
下一篇： JavaScript学习笔记02【基础—