參考筆記:JavaWeb 速通JavaScript_javascript 速通-CSDN博客
目錄
一、JavaScript快速入門
1. 基本介紹
2. JavaScript特點
3. JavaScript的引入方式(重要)
3.1 寫在script標簽中
?????3.2 以外部文件方式引入
二、JS的數據類型
1. 變量
2. 常用數據類型
3.特殊值
三、JS的運算符
1. 算數運算符
2. 關系運算符
3. 邏輯運算符 || &&
4.三目運算符
四、JS的分支結構和循環結構
1. 分支結構
2. 循環結構
五、JS中的數組
1. 特點
2. 創建方法
3. 遍歷方法
六、JS的函數
1. 簡介
2. 聲明方式
3. 使用的注意事項
七、JS事件
1. 什么是事件
2. 常見事件
3. 事件的綁定
3.1 通過屬性綁定
3.2 通過DOM編程綁定
4. 事件的案例演示
4.1 onclick
4.2 onblur
4.3 onchange
八、JS創建對象的2種方式
九、BOM、DOM編程
一、JavaScript快速入門
1. 基本介紹
① JavaScript 主要用于頁面元素的動態處理,能改變 HTML 的內容和屬性,能改變 HTML 的樣式(CSS),能完成頁面的數據驗證,能控制網頁的行為等等
② 關于 JS 代碼:
JS 代碼通常寫在 <head></head> 內的 <script></script> 標簽中
<script> 標簽中的屬性 type="text/javascript" 可加可不加
JS語句可不寫分號 " ;"
2. JavaScript特點
腳本語言
JavaScript 是一種解釋型的腳本語言。不同于 C、C++、Java 等語言需要先編譯后執行, JavaScript 不會產生編譯出來的字節碼文件( Java 文件編譯后會生成 .class 字節碼文件),而是在程序的運行過程中對源文件逐行進行解釋
基于對象
JavaScript 是一種基于對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。但是面向對象的三大特性:『封裝』、『繼承』、『多態』中,JavaScript 能夠實現封裝,可以模擬繼承(但不是真正的繼承),不支持多態
var i = 10; var str = "小馬"
弱類型
JavaScript 中有明確的數據類型,但是聲明一個變量后它可以接收任何類型的數據,并且會在程序執行過程中根據上下文自動轉換類型
JavaScript 的語法規范性沒有那么強,約束性較弱
3. JavaScript的引入方式(重要)
3.1 寫在script標簽中
雖然可以在 html 文件任意位置嵌入 <script> 標簽,但通常還是寫在 <head> 中,因為 html 文件的執行順序是從上到下
案例演示:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script>function suprise(){alert("Hello,我是驚喜")}</script></head><body><button onclick="suprise()">點我有驚喜</button></body>
</html>
缺陷 + 解決方案:
缺陷:僅能在當前頁面上使用,代碼復用度不高
解決方案:將腳本放在獨立的 js 文件中,通過 script 標簽引入外部腳本文件
?????3.2 以外部文件方式引入
方法:
在 <script></script> 標簽中添加 src 屬性
src 屬性指明 .js 文件的路徑,相對路徑和絕對路徑均可
案例演示:
第 1 步:抽取代碼到獨立的 js 文件中
第 2 步:在 html 文件中,通過 <script> 標簽的 src 屬性引入外部 js 文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="../js/button.js"></script><!--可引入多個外部JS文件--></head><body><button onclick="suprise()">點我有驚喜</button><button onclick="scare()">點我有驚嚇</button></body>
</html>
運行效果:
二、JS的數據類型
1. 變量
變量是用于存儲信息的"容器"。JavaScript 變量可用于存放值(比如 x=5)和表達式(比如 z=x+y)。JS變量對大小寫敏感。
內存指瀏覽器的內核空間。變量指向某一個內存空間
如下圖所示 :
2. 常用數據類型
① number:數值類型。JS 中數值類型統一為 number ,包括整數和小數
② string:字符串類型。和 Java 的 String 相似,但 JS 中不嚴格區分單雙引號,都可以用于表示字符串
③ boolean:布爾類型。在 JS 的 if 語句中,非空字符串會被轉換為 '真',非零數字也會被認為是 '真'
④ Object:引用數據類型。各種對象和數組在 JS 中都是 Object 類型
⑤ function:函數類型。 JS 中的各種函數屬于 function 數據類型
代碼演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">var i = 10console.log(typeof i)//numberi = "asf"console.log(typeof i)//stringi = falseconsole.log(typeof i)//booleani = new Object()console.log(typeof i)//Objecti = [1,2,3];console.log(typeof i)//Objectfunction say(){alert("hello")}console.log(typeof say)//function</script>
</head>
<body>
</body>
</html>
運行效果:
3.特殊值
有 3 個比較特殊的值,如下:
① undefined:只聲明但未作初始化的變量,默認為 undefined 類型,其變量值也為 undefined
② null:在 JS 中,如果給一個變量賦值 null ,其數據類型是 Object ,變量值是 null
③ Nan:非數值,全稱是 Not a Number ,一般進行錯誤的數學運算會導致變量值變為Nan
代碼演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>special value</title><script type="text/javascript">var v1;console.log("v1 = " + v1 + ", v1 type: " + typeof v1);var v2 = null;console.log("v1 = " + v2 + ", v1 type: " + typeof v2);var v3 = 5 * '小馬';console.log("v3 = &#