入門學習JavaScript_初識JavaScript-有解無憂

感激相遇
你好
我是阿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/ruanti/192394.html

標籤：其他

上一篇：筆試模擬面試題一

下一篇：原生JS簡易輪播圖