JavaScript入門

2020-10-16 編程實踐


前端開發的核心技術有三項：HTML、CSS和JavaScript。

這三項技術中，HTML和CSS比較簡單，JavaScript則相對來說複雜得多。所以，前端工程師的學習時間，大部分都花在JavaScript上。

JavaScript技術除了JavaScript語法外，還包括HTML DOM技術，以及jQuery、Angular JS、React、Node.js、Vue.js等衍生技術，目前在前端開發中，建議掌握JavaScript語法、HTML DOM和Vue.js技術。

本文主要講解一些JavaScript的入門知識。

1、什麼是JavaScript

JavaScript發布時，是一款在WEB瀏覽器上運行，由事件驅動的、基於對象的腳本語言。

JavaScript不是一種特殊的Java語言，甚至可以說和Java沒有關係。JavaScript由網景（Netscape）公司開發，最初的名字叫LiveScript，只是在發布的前一刻，改名為JavaScript，改名的原因就是當時Java語言如火如荼，搭搭Java語言的順風車，廣告而已。

JavaScript發布後，使得完全靜態的Java網頁，擁有了和用戶交互的功能，相當於網頁具有了動態效果，因此深受前端程式設計師的喜愛。

目前，JavaScript除了在Web瀏覽器上運行外，還可以用於伺服器開發，Node.js就是將JavaScript用於伺服器開發。

2、JavaScript和Java有什麼不同

下面羅列了JavaScript與Java的一些不同點：

（1）這兩種語言分別是兩個不同公司的產品：JavaScript語言由Netscape公司開發，Java語言由SUN公司開發；

（2）JavaScript程序主要在瀏覽器上運行，Java程序直接在作業系統上運行；

（3）JavaScript程序運行前不需要編譯，Java程序在運行前需要編譯生成字節碼(*.class)文件；

（4）JavaScript是基於對象的程序設計語言，我們可以使用JavaScript對象，開發的JavaScript程序可以不用定義自己的對象；Java是面向對象的程序設計語言，可運行的Java程序必須創建自己的類；

（5）JavaScript是弱類型語言，Java是強類型語言。

3、JavaScript代碼可以在<a>元素的href中提供

下面是一個在<a>元素中包含JavaScript代碼的HTML文檔javascript001.html：

<!DOCTYPE html><html> <head> <title>javascript001</title> <meta charset="utf-8" /> </head> <body> <a href="javascript:alert('您點擊了連結')">通過連結執行JavaScript程序</a> </body></html>

javascript001.html在瀏覽器中展示效果為：



當點擊網頁中的「通過連結執行JavaScript程序」連結後，網頁上彈出提示信息框：



4、JavaScript代碼可以在<script>元素中提供

下面是一個在<script>元素中提供JavaScript代碼的HTML文檔javascript002.html：

<!DOCTYPE html><html> <head> <title>javascript002</title> <meta charset="utf-8" /> <script> alert("您啟動了javascript002.html文件"); </script> </head> <body> <p>一個用於展示JavaScript的例子網頁</p> </body></html>

javascript002.html在網頁中的展示效果為：



5、<script>元素可以是<head>的子元素，也可以是<body>的子元素

上面的<script>元素放在<head>中，下面是將<script>放到<body>中的HTML文檔javascript003.html：

<!DOCTYPE html><html> <head> <title>javascript003</title> <meta charset="utf-8" /> </head> <body> <p>一個用於展示JavaScript的例子網頁</p> <script> alert("您啟動了javascript003.html文件"); </script> </body></html>

javascript003.html在網頁中的展示效果為：



點擊「確定」按鈕後，網頁展示效果為：



可以發現，<script>放在<head>和<body>時，網頁展示效果有所差異，後面會詳細介紹相關的知識，本文檔就不詳細描述了。

6、我們可以把JavaScript代碼單獨保存為js文件，然後在HTML文件的<script>元素中導入該文件

創建一個javascript004.js文件，內容如下：

alert("您啟動了javascript004.html文件");

再創建一個javascript004.html文件，內容如下：

<!DOCTYPE html><html> <head> <title>javascript004</title> <meta charset="utf-8" /> <script src="javascript004.js"> </script> </head> <body> <p>一個用於展示JavaScript的例子網頁</p> </body></html>

javascript004.html在網頁中的展示效果為：



點擊「確定」按鈕後，網頁展示效果為：



JavaScript的入門知識先講到這裡，後面會進一步講述。

相關焦點

  • 七天學會javascript第一天javascript介紹
    前幾周寫了幾篇關於入門php的文章，反響還不錯，之前簡單的提到了JavaScript，這周小編重點介紹JavaScript讓大家可以在一周時間內掌握這門前端語言的基本用法。javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰，js盛行起來。javascript ：客戶端編程。javascript是由客戶端去解釋運行的。
  • JavaScript入門，為什麼要學習JavaScript？
    有些時候你會看到<script>標籤還設置了一個type屬性：<script type="text/javascript"> ...</script>但這是沒有必要的，因為默認的type就是JavaScript，所以不必顯式地把type指定為JavaScript。
  • JavaScript入門教程
    起源javascript前身叫做livescript，sun公司推出java，netspace公司引進java的概念，重新設計livescript，並更名javascript。發明者，布蘭登.艾克，表單驗證原先要經過伺服器，伺服器壓力大，等待時間長，js僅在客戶端就可完成。是什麼是一種腳本語言，是一種輕量級的程式語言。
  • 一篇文章帶你快速入門JavaScript（實操代碼）
    一、前提簡介1.1什麼是javascriptJavaScript是一種動態的計算機程式語言。1.2JavaScript和Java語言的區別Javascript和Java沒有任何關係，它們是不同的兩種語言(java是一種程序設計語言，javascript 是客戶端的腳本語言)，只是名字上都有一個Java而已。
  • 什麼是《現代 JavaScript 教程》?
    入門：主要為 JavaScript 語言方面的內容，包括數據類型，循環，對象，閉包，Class，原型，繼承，Promise，ES Module 等基礎知識；2. 提升：包括 BOM 和 BOM 的相關內容；3. 進階：包括網絡請求，Web Components，正則，動畫，瀏覽器緩存等相關內容。第三大特色：每節內容後，都給出了高質量的課後習題和解析。
  • javaScript入門—函數和document使用方法,新手必看!
    的alert的對話框，如果沒有檢查一下瀏覽器是否啟用了javascript。JavaScript中函數有什麼特點？函數是重複使用腳本的一種方式，可以重複多次成為可能，在javascript中函數不僅能多次運行而且還可以用來控制什麼時候執行引用腳本。
  • github上推薦給小白的手把手javascript教程？
    github上有什麼推薦給小白的手把手javascript入門教程？92.4kfork: 22.2kD3 的全稱是（Data-Driven Documents），該庫提供了各種簡單易用的函數，大大簡化了 javascript
  • javascript入門推薦書籍-授人以魚不如授人以漁
    我們應該把 javascript 當作一門真正的程式語言，而不是玩具語言。1、JavaScript Dom編程藝術推薦：《JavaScript Dom編程藝術》 理由：此書絕對是入門的好書，本人也是在接觸JS一段時間後才看的這本書。此書從JS的歷史 –JS基礎語法知識 – DOM介紹和簡單的使用。
  • javascript在自動化測試項目中的應用「軟體測試開發入門教程」
    比如說我今天分享的主題是javascript在自動化測試中的應用有些朋友說我之前講的自動化測試的東西，需要消化很久，有一定的難度，意思就是說我動不動就講測試框架，測試開發是不是會有這樣的感覺？比如今天分享的javascript，大家做軟體測試有沒有用過？
  • JAVAScript入門案例:網頁定時關閉
    DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> //JS代碼 <script type="text/javascript"> //頁面加載完成後立即執行 window.onload = function() { //獲取
  • javascript入門到進階-js系列六:執行上下文
    javascript代碼在執行時，會進入一個執行上下文中，執行上下文可以理解為當前代碼的運行環境。 javascript中運行環境主要包括以下三種情況 > 1 全局環境：代碼運行起來首先會進入全局環境 > 2 函數環境：當函數被調用執行時，會進入當前函數中執行代碼 > 3 eval函數環境：不建議使用，這裡不做介紹。
  • javascript之常用數據類型及判斷方法
    前端工作者學習之路對於剛開始入門的前端人員來說，javascript中的數據類型是既熟悉又籠統的概念，不論在php，還是c語言抑或java，他們的數據類型都各不相同，大家也千萬不用混淆，今天，我們來具體重新了解下javascript
  • 「GitHub」 JavaScript 趨勢榜項目(第33周)
    11. jonasschmedtmann/complete-javascript-course項目地址：https://github.com/jonasschmedtmann/complete-javascript-course⭐:4,380
  • 初識javascript,JS的歷史_騰訊新聞
    javascript和H5的關關係 什麼是HTML5？ javascript的應用範圍 1.PC端web開發（網站) 2.移動端開發(webApp、混合App)服務端開發(NodeJs) 3.遊戲開發(unity3D-TypeScript，網頁遊戲)在線演示:忍者水果
  • JavaScript快速入門
    2.學會創建第一個輸出Hello Word的js程序創建一個html文件，在html文件的head標籤中創建一個script標籤，並編寫如下代碼：<script type=」text/javascript」>console.log(「Hello Word」);<script>運行編譯測試即可，控制臺輸出數據是我們在編程測試斷點數據時的重要測試工具
  • 146、JavaScript 優缺點
    而使用javascript就可以在客戶端進行數據驗證。javascript方便操縱html對象。javascript可以方便地操縱各種頁面中的對象,用戶可以使用javascript來控制頁面中各個元素的外觀、狀態甚至運行方式，javascript 可以根據用戶的需要"定製" 瀏覽器,從而使網頁更加友好。
  • JavaScript為什麼這麼難?
    只有真正的javascript程式設計師才知道javascript太難了。其他程式設計師都覺得javascript是門玩具語言。javascript太難了。難點javascript的真值表，可以體驗一下。javascript使用一種非主流的對象機制，基於原型鏈的對象繼承機制。這需要我們拋棄很多語言的Class的思想。認真研究下這個原型鏈。
  • javascript的簡介與初學
    1.為何學習 javascript？   1.javascript和java是完全不同的語言，不論是概念還是設計。2.script標記中的使用   script–<script>javascript
  • javascript定時器
    在javascript中，定時器一共有兩個：setTimeout與setInterval例1：使用javascript彈出一個helloworld例2：過3秒後彈出一個helloworld3秒後彈出helloworld，只執行一次，默認情況下setTimeout
  • Web開發的大爆炸:利用JavaScript進行移動
    document.getElementById('myImage').src='https://www.javatpoint.com/images/javascript/javascript_logo.png'所以你的按鈕應該看起來像這樣：<buttononclick="document.getElementById('myImage').src='https