感激相遇
你好
我是阿Ken
于2020年10月24日特此創建 JavaScript 專欄以慶祝10.24程式員節
之后將會持續更新
期待與您再次相逢
以學校相關教材為主整理，幫助 CSDN 小伙伴入門及復習
_
每個人都是一座孤島
而弱者扎堆
強者自強
1.1_什么是JavaScript
1.1.1_JavaScript概述
JavaScript是Web開發領域中的一種功能強大的編程語言，主要用于開發互動式的Web頁面，在計算機、手機等設備上瀏覽的網頁上，大多數的互動邏輯幾乎都是由JavaScript實作的，
| 語言 | 作用 及說明 |
|---|---|
| HTML | 結構_決定網頁的結構和內容，相當于人的身體 |
| CSS | 樣式-_決定網頁呈現給用戶的模樣，相當于給人穿衣服，化妝 |
| JavaScript | 行為_實作業務邏輯和頁面控制，相當于人的各種動作 |
JavaScript內嵌于HTML網頁中，通過瀏覽器內置的JavaScript引擎進行解釋執行，把一個原本只用來顯示的頁面轉變成支持用戶互動的頁面程式，
1.1.2_JavaScript的誕生與發展
1995年，Netscape（網景）公司（現在的Mozilla公司）的布蘭登·艾奇在網景導航者瀏覽器上首次設計出了JavaScript，
_
Netscape 最初將這個腳本語言命名為LiveScript，后來Netscape公司與Sun公司（2009年被Oracle公司收購）合作之后將其改名為JavaScript，
_
這是由于當時Sun公司推出的Java語言備受關注，Netscape 公司為了營銷借用了 Java 這個名稱，實際上，JavaScript 與 Java 的關系就像雷峰塔與雷鋒，它們本質上是兩種不同的編程語言，
1.1.3_JavaScript 的特點
- JavaScript 是一種腳本語言
腳本(Script）簡單地說就是一條條的文本命令，這些命令按照程式流程逐條被執行，常見的腳本語言有 JavaScript，TypeScript，PHP，Python 等，非腳本語言(如C、C++）一般需要編譯、鏈接，生成獨立的可執行檔案后才能運行，而腳本語言依賴于解釋器，只在被呼叫時自動進行解釋或編譯，腳本語言通常都有簡單、易學、易用特點，語法規則比較松散，使開發人員能夠快速完成程式的撰寫作業， - JavaScript 可以跨平臺
JavaScript 語言不依賴作業系統，僅需要瀏覽器的支持， - JavaScript 支持面向物件
1.1.4_JavaScript的組成
JavaScript 是由 ECMAScript、DOM、 BOM 三部分組成的，
接下來我們對 JavaScript 的組成進行簡單的介紹，
(1 ) ECMAScript : 是 JavaScript 的核心，ECMAScript 規定了JavaScript 的編程語法和基礎核心內容，是所有瀏覽器廠商共同遵守的一套 JavaScript 語法工業標準，
(2) DOM : 檔案物件模型，是 W3C 組織推薦的處理可擴展標記語言的標準編程介面，通過 DOM 提供的介面，可以對頁面上的各種元素進行操作(如大小、位置、顏色等)，
(3) BOM : 瀏覽器物件模型，它提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，通過 BOM，可以對瀏覽器視窗進行操作 (如彈出框、控制瀏覽器導航跳轉等)，
1.2_常用的開發工具
工欲善其事，必先利其器，一款優秀的開發工具能夠極大提高程式開發效率與體驗，在 Web 前端開發中，常用的開發工具有 Visual Studio Code、Sublime Text、HBuilder 等，接下來我們就來介紹這些開發工具的特點，
- Visual Studio Code
Visual Studio Code (簡稱VS Code) 是一款由微軟公司開發的，功能十分強大的輕量級編輯器，該編輯器提供了豐富的快捷鍵，集成了語法高亮、可定制熱鍵系結、括號匹配以及代碼片段收集的特性，并且支持多種語法和檔案格式的撰寫，
- Sublime Text
Sublime Text 是一個輕量級的代碼編輯器，具有友好的用戶界面，支持拼寫檢查、書簽、自定義按鍵系結等功能，還可以通過靈活的插件機制擴展編輯器的功能，其插件可以利用 Python 語言開發，Sublime Text 是一個跨平 臺的編輯器，支持 Windows、Linux、macOS 等作業系統，
- HBuilder
HBuider 是由 DCloud (數字天堂) 公司推出的一款支持 HTML5 的 Web 開發編輯器，在前端開發、移動開發方面提供了豐富的功能和貼心的用戶體驗，還為基于 HTML5 的移動端 App 開發提供了良好的支持，
- Adobe Dreamweaver
Adobe Dreamweaver 是一個集網頁制作 和網站管理于一身的所見即所得的網頁編輯器，用于幫助網頁設計師提高網頁制作效率，簡化網頁開發的難度和學習HTML5 、CSS 的門檻，但缺點是可視化編輯功能會產生大量冗余代碼，而且不適合開發結構復雜、需要大量動態互動的網頁，
- WebStorm
WebStorm 是 JetBrains 公司推出的一款 Web 前端開發工具，JavaScript、HTML5 開發是其強項，支持許多流行的前端技術，如 jQuery、Prototype、Less 、Sass、AngularJS、 ESLint、webpack等，
1.3_JavaScript 入門 ?
1.3.1_代碼書寫位置
- 行內式
行內式是指將單行或少量的 JavaScript 代碼寫在 HTML 標簽的事件屬性中（也就是以 on 開頭的屬性，如 onclick）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="點我" οnclick="alert('行內式')“>
</body>
</head>
</html>
使用行內式撰寫 JavaScript 代碼，實作：單擊一個按鈕后，彈出一個警告框，顯示一些提示資訊
第四行宣告了網頁的編碼為UTF-8，幫助瀏覽器正確識別網頁的編碼，在宣告編碼后，還需要確保檔案本身的編碼也是UTF-8，目前大多數代碼編輯器新建的檔案，編碼默認都是UTF-8，另外Windows記事本默認的編碼是ANSI，在記事本中撰寫的網頁容易出現亂碼，因此讀者應杜絕使用記事本撰寫代碼檔案，
使用行內式需要注意：
- 注意注意單引號和雙引號的使用，在HTML中使用雙引號，而 Javascript 推薦使用單引號，
- 行內式可讀性較差，尤其是在 HTML 中撰寫大量的JavaScript代碼時，不方便閱讀，
- 在遇到多層引號鑲嵌的情況時非常容易混淆，導致代碼出錯，
- 只有臨時測驗或者特殊情況下再使用行內式，一般情況下不推薦使用行內式
- 內嵌式（嵌入式）
內嵌式是只使用< script >標簽包裹JavaScript代碼，< script >標簽可以把標簽可以寫在< head >或< body >標簽中，通過內嵌式，可以將多行JavaScript代碼寫在< script >標簽中，內嵌式是學習JavaScript最常使用的方式，
<head>
......
<script>
alert('內嵌式');
</script>
</head>
第四行是一條JavaScript陳述句，其末尾的分號表示·該陳述句結束，后面可以撰寫下一條陳述句，< script >標簽還有一個 type 屬性，在HTML5中，該屬性的默認值為" text / JavaScript "，因此在撰寫時可以省略 type 屬性，
- 外部式（外鏈式）
外部式是將JavaScript代碼寫在一個單獨的檔案中，一般使用”js“作為檔案的擴展名，在 html 頁面中使用< script >標簽進行引入，適合JavaScript代碼量比較多的情況，
外部式的是< script >標簽內不可以撰寫JavaScript代碼
<head>
......
<script src="test.js"></script>
</head>
和
alert('外部式');
在html中還有一種嵌入JavaScript代碼的方法，就是使用偽協議，
<a href="javascript:alert('偽協議')">點我</a>
在代碼中，href屬性中的“JavaScript”就表示偽協議，后面一段 JavaScript 代碼，當單擊這個超鏈接后就會彈出 alert 警告框，在實際開發中不推薦使用這種方式，
在撰寫JavaScript代碼時，應注意基本的語法規則，避免程式出錯，具體如下：
- JavaScript 嚴格區分大小寫，在撰寫代碼時一定注意大小寫的正確性，例如：將案例代碼中的 alert 改成大寫的 ALERT，則警告框無法彈出，
- JavaScript 代碼對空格、換行、縮進不敏感，一條陳述句可以分成，能多行書寫，例如，將 alert 后面的“（ ”換到下一行，程式依然正確執行，
- 如果一條陳述句書寫結束后，換行書寫下一條陳述句，前一行陳述句后面的分號可以省略，
1.3.2_注釋
- 單行注釋 “ // ”
<script>
alert('Hello,JavaScript'); //輸出Hello,JavaScript
</script>
- 多行注釋 “ /* */ ”
<script>
alert('Hello,JavaScript');
/* 輸出
Hello,JavaScript
*/
</script>
1.3.3_輸入和輸出陳述句
| 陳述句 | 說明 |
|---|---|
| alert（’msg‘） | 瀏覽器彈出警告框 |
| console.log（’msg‘） | 瀏覽器控制臺輸出資訊 |
| prompt (‘msg’) | 瀏覽器彈出輸出框，用戶可以輸入內容 |
<script>
alert("這是一個警告框");
console.log ('在控制臺輸出資訊');
prompt ('這是一個輸入框');
document.write("輸出陳述句");
</script>
1.3.4_控制臺的使用
在瀏覽器的控制臺中可以直接輸入 JavaScript 代碼來執行，
1.4_JavaScript變數 ?
1.4.1_什么是變數
變數是程式在記憶體中申請的一塊用來存放資料的空間
1.4.2_變數的使用
- 宣告變數
var age; // 宣告變數
- 變數賦值
age = 10; // 為變數賦值
alert(age); // 使用alert()警告框輸出age的值
console.log(age); // 將age的值輸出到控制臺中
- 變數初始化
var age = 10; //宣告變數同時賦值
1.4.3_變數的應用案例
- 使用變數保存個人資訊
<script>
var myName = '小明'; //名稱
var address = 'xx市xx區'; //地址
var age = 18; //年齡
var email = 'xiaoming@localhost'; //電子郵箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email); //輸出相應的值
</script>
- 使用變數保存用戶輸入的值
<script>
var myName = prompt('請輸入您的名字');
alert(myName);
</script>
1.4.4_變數的語法細節
- 更新變數的值
var myName = '小明'; //變數賦初值
console.log (myName); //輸出結果：小明
var myName = '李華'; //更新變數的值
console.log (myName) //輸出結果：小紅
- 同時宣告多個變數
var myName,age,email; //同時宣告多個變數，不賦值
var myName = '小明'，
age = 18,
email = 'xiaoming@localhost';
- 宣告變數的特殊情況
（1）只宣告變數，但不賦值，則輸出變數時，結果為undefined
var age;
console.log (age); //輸出結果：undefined
(2)不宣告變數，直接輸出變數的值，則程式會出錯
console.log (age);
如果前一行代碼出錯，則后面的代碼不會執行，因此，在開發中，如果代碼沒有按照期望的執行，可以打開控制臺看一下是否有錯誤提示，找到具體是哪一行出錯了
（3）不宣告變數，只進行賦值
age1 = 10; //變數age1沒有使用var進行宣告
console.log (age1); //輸出結果：10
從輸出結果可以看出，直接賦值一個未宣告的變數，也可以正確輸出變數的值，這個情況是JavaScript語言的特性，學到全域作用域、window物件的時候就理解了
1.4.5_變數的命名規范
在對變最進行命名時，需要遵循變數的命名規范，從而避免代碼出錯，以及提高代碼的可讀性
①由字母、數字、下劃線和美元符號($)組成，如age、num，
②嚴格區分大小寫，如app和App是兩個變數，
③不能以數字開頭，如18age是錯誤的變數名，
④不能是關鍵字、保留字，如var、for、 while 等是錯誤的變數名，
⑤要盡量做到“見其名知其意”，如age表示年齡，num表示數字，
⑥建議遵循駝峰命名法，首字母小寫，后面的單詞首字母大寫，如myFirsName，
在 JavaScript 中，關鍵字分為“保留關鍵字”和“未來保留關鍵字”，保留關鍵字是指在 JavaScript 語言中被事先定義好并賦予特殊含義的單詞， 不能作為變數名使用，
未來保留關鍵字是指 ECMAScript 規范中預留的關鍵字，目前它們沒有特殊功能，但是在未來的某個時間可能會加上，
未來保留關鍵字建議不要當作變數名來使用，以避免未來它們轉換成關鍵字時出錯，
識別符號
在 JavaScript 中還有一個識別符號的概念，識別符號是指開發人員為變數、函式取的名字，例如，變數名 age 就是一個識別符號，從語法上來說，不能使用關鍵字作為識別符號，否則會出現語法錯誤，
- 要將臉朝向有光的地方
時間長了
你自然學會了和自己相處的訣竅
- 愿這一遭走過
仍能心懷夢想
不丟信仰
_
你好，我是阿Ken
感謝來訪
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/191727.html
標籤：其他
上一篇：筆試模擬面試題一
下一篇：原生JS簡易輪播圖