首頁 > 易卦

一個適合前端新手輕鬆上手的JavaScript教學

作者:由 艾程式設計 發表于 易卦日期:2022-08-10

html怎麼檢視圖片路徑

JavaScript 是一門程式語言,可為網站新增互動功能(例如:遊戲、動態樣式、動畫以及在按下按鈕或收到表單資料時做出的響應等)。本文介紹了 JavaScript 的精彩之處和主要用途。

JavaScript 到底是什麼?

JavaScript

(縮寫:

JS

)是一門完備的

動態程式語言

)。當應用於

HTML

文件時,可為網站提供動態互動特性。由布蘭登·艾克( Brendan Eich,Mozilla 專案、Mozilla 基金會和 Mozilla 公司的聯合創始人)發明。

JavaScript 的應用場合極其廣泛,

簡單到幻燈片、照片庫、浮動佈局和響應按鈕點選,複雜到遊戲、2D/3D 動畫、大型資料庫驅動程式等等。

JavaScript 相當簡潔,卻非常靈活。開發者們基於 JavaScript 核心編寫了大量實用工具,可以使 開發工作事半功倍。其中包括:

1、瀏覽器應用程式介面(

API

)—— 瀏覽器內建的 API 提供了豐富的功能,比如:動態建立 HTML 和設定 CSS 樣式、從使用者的攝像頭採集處理影片流、生成3D 影象與音訊樣本等等。

2、第三方

API

—— 讓開發者可以在自己的站點中整合其它內容提供者(

Twitter、Facebook

等)提供的功能。

3、第三方框架和庫 —— 用來快速構建網站和應用。

本節是一篇 JavaScript 簡介,因此這個階段不會對 JavaScript 語言和上述工具做過多的介紹。之後可以到 JavaScript 學習區 和 MDN 的其它地方學習更多細節。下面對語言核心做一個不完整介紹,期間還可以接觸到一些瀏覽器 API 特性。

“Hello World!”示例

讀到這裡你一定很激動,誠然 —— JavaScript 是最振奮人心的 Web 技術之一,而且在嫻熟駕馭之後,你的網站在功能和創新力上將達到一個新的維度。

然而,JavaScript 比 HTML 和 CSS 學習起來更加複雜一點,所以必須一步一個腳印地學習。首先,來看看如何在頁面中新增一些基本的 JavaScript 指令碼來建造一個 “Hello world!” 示例

重要:如果你沒有完成之前的課程實踐,可聯絡我獲取資料包繼續跟著練習哦,如果你要實踐,前兩篇筆記就是html和css階段的內容哦。

1、首先,開啟你的測試站點,建立一個名為

scripts

的資料夾。然後在其中建立一個名為 main。js 的檔案。

2、下一步,在

index.html

檔案

</body>

標籤前的新行新增以下程式碼。

一個適合前端新手輕鬆上手的JavaScript教學

3、與 CSS

<link>

的元素類似,它將**

JavaScript

**引入頁面以作用於 HTML(以及 CSS 等頁面上所有內容);

4、現在將以下程式碼新增到

main.js

檔案中:

一個適合前端新手輕鬆上手的JavaScript教學

5、最後,儲存

HTML

JavaScript

檔案,用瀏覽器開啟

index.html

。可以看到如下內容:

一個適合前端新手輕鬆上手的JavaScript教學

注:我們將