閱讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

本篇文章成哥繼續帶大家來學習前端教程之JavaScript，網頁的動態事件基本上都是靠它來實現的。下面我們就一起來學習內容吧！

01 JavaScript簡介

JavaScript通常縮寫為 JS，是一種高級的，解釋執行的編程語言。

JavaScript 是一門基于原型、函數先行的語言，是一門多范式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持 I/O，比如網絡、存儲和圖形等，但這些都可以由它的宿主環境提供支持。

它已經由 ECMA(歐洲計算機制造商協會)通過 ECMAScript 實現語言的標準化。

它被世界上的絕大多數網站所使用，也被世界主流瀏覽器(Chrome、IE、Firefox、Safari、Opera)支持。

JavaScript具有如下特點:

1)JavaScript是一種動態語言，用于在客戶端設計網頁。

2)它是區分大小寫的語言。

3)它是非類型語言，即變量可以保存任何類型的值，Python語言也有相同的特點。

02 JavaScript文件

JavaScript的語句可以寫在HTML文件中，也可以單獨寫在.js文件中，其具體如下所示

1)HTML文件

JavaScript寫在HTML文件中時必須寫在HTML文件中的'script'標簽中，下面我們在HTML文件中通過JavaScript輸出"Hello World"，具體示列如下

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ?????11. ??12. ??

2)js文件

現在我們創建一個單獨的js文件，然后在HTML文件中應用具體示列如下：

1. //?js文件??2. document.write("Hello?World?from?JavaScript!
");??3. ??4. //?html文件??5. html>??6. ??7. ??8. ????9. ??JavaScript基礎教程??10. ??11. ??12. ????13. ????14. ??15. ??

03 JavaScript的關鍵字、數據類型、變量與常用操作

(1)JavaScript關鍵字

JavaScript包含了許多關鍵字，我們在編寫語句時要注意避開這些關鍵字，以免引起不必要的錯誤。其常用關鍵字如下表所示：

(2)JavaScript數據類型

JavaScript包含了三種數據類型具體如下：

1)數值類型，如'123，12.1'在JavaScript中所有的數值類型其實都是浮點數

2)字符串類型，如'JavaScript基礎教程'

3)布爾類型，如'true, false'

(3)JavaScript變量

JavaScript的變量一般用var這個關鍵字來定義，在ES6中變量一般用let定義。JavaScript是非類型化語言，即變量可以包含任何數據類型。JavaScript具體變量使用示列如下：

1. //?1.js文件??2. ?//?document會在文章渲染后再執行，所以看到其在js文件中是在前面，但HTML頁面輸出的內容在最后??3. document.write("Hello?World?from?JavaScript!
");??4. ??5. ?//?定義變量your_name與age??6. var?your_name?=?"成哥";??7. var?age?=?30;??8. ??//?在HTML中找到p_name的id標簽，然后在內部插入html內容??9. document.getElementById("p_name").innerHTML=?"Hello?"+?your_name?+?"
Age?:?"?+?age;??10. ??11. //?2.?HTML文件??12. html>??13. ??14. ??15. ????16. ??JavaScript基礎教程??17. ??18. ??19. ??

我們還可以通過prompt方法獲取用戶在頁面的輸入的變量具體示列如下

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????13. ??14. ??

(4)JavaScript運算符

1)算術運算符

2)賦值運算符

3)比較運算符

4)條件運算符

JavaScript的條件運算符為問號加冒號組合(？：)，其規則是問號前面條件是否為true如果為true則執行冒號前面的表達式，如果為false則執行冒號后面的表達式，具體如下：

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????15. ??16. ??

5)邏輯運算符

(5)類型轉換

1)字符串傳數值類型

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????12. ??13. ??

2)整型轉換

浮點的數值類型與字符串的數值類型可以通過parseInt方法轉成整形具體示列如下：

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????13. ??14. ??

3)浮點數轉換

數值型字符串與數值類型可以通過parseFloat方法轉成浮點數，具體示列如下

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????12. ??13. ??

(6)字符串方法

JavaScript內置了好多針對字符串操作的方法，下面我們就演示一些常用的字符串方法具體示列如下：

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????20. ??21. ??

(7)數組

JavaScript的數組類型可以包含不同的數據類型，比如一個數組同時包含字符串與數值類型，其跟Python非常類似，具體使用示例如下：

1. html>??2. ??3. ??4. ????5. ??JavaScript基礎教程??6. ??7. ??8. ????30. ??31. ??

04 總結

至此我們《JavaScript基礎教程上篇》就講完了，下篇內容主要講解JavaScript的控制語句、函數編程及異常處理等相關知識，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

• 程序員都必掌握的前端教程之HTML基礎教程(上)
• 程序員都必掌握的前端教程之CSS基礎教程(上)

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

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