iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0
JavaScript

JavaScript 基礎:端開發的第一步系列 第 1

JavaScript 介紹與基本設置

  • 分享至 

  • xImage
  •  

JavaScript 是一種高級、解釋型的程式語言,用於開發動態和互動的網頁。它最初是在 1995 年由 Brendan Eich 開發,並迅速成為現代網頁開發的核心技術之一。JavaScript 與 HTML、CSS 一起構成了網頁開發的三大基石,分別負責網頁的結構、樣式和行為。

JavaScript 的強大之處在於它可以運行在瀏覽器中,不需要額外的編譯。這使得網頁不僅僅是靜態的資訊展示頁面,還可以根據用戶行為進行即時更新和交互。

JavaScript 的特點:
動態:JavaScript 可以根據用戶的動作即時修改網頁內容,提升用戶體驗。
跨平台:它可以在不同的操作系統和瀏覽器中運行,具有良好的兼容性。
物件導向:JavaScript 支持物件導向的程式設計,使得代碼更加模組化和易於維護。

JavaScript 基本設置

在開始編寫 JavaScript 之前,我們需要設置基本的開發環境。下面是幾個必要的步驟,幫助你準備好進行 JavaScript 開發。

1. 安裝程式碼編輯器

首先,你需要一個工具來編寫和測試 JavaScript 代碼。我們推薦使用 Visual Studio Code (VS Code),它是一款功能強大、免費且廣泛使用的編輯器,並支持各種程式語言,包括 JavaScript。

安裝步驟

  • 進入 VS Code 官網 並下載適用於你操作系統的版本(Windows, macOS 或 Linux)。
  • 安裝完成後,打開 VS Code,這將是你用來編寫 JavaScript 代碼的主要工具。

2. 創建一個 HTML 文件來運行 JavaScript

JavaScript 通常與 HTML 結合使用,讓我們創建一個基本的 HTML 文件,並嵌入 JavaScript 代碼。

步驟

  1. 打開 VS Code,選擇 檔案 > 新建檔案
  2. 保存這個文件為 index.html,並確保文件類型選擇為 HTML
  3. index.html 文件中,輸入以下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 基本設置</title>
</head>
<body>
  <h1>Hello, JavaScript!</h1>

  <script>
    console.log('Hello, World from JavaScript!');
  </script>
</body>
</html>

3. 在瀏覽器中運行 HTML 和 JavaScript

JavaScript 是通過瀏覽器執行的。保存好 index.html 文件後,用以下方法運行你的程式:

  1. 打開瀏覽器(如 Google Chrome)。
  2. 拖放 index.html 文件到瀏覽器的空白頁上,或右鍵文件,選擇 "在瀏覽器中打開"。

4. 查看結果

你將在瀏覽器頁面上看到 "Hello, JavaScript!",這來自於 <h1> 標籤的內容。

接著,打開瀏覽器的 開發者工具(通常按 F12 或右鍵選擇 "檢查"),進入 Console(控制台),你將看到 "Hello, World from JavaScript!" 的訊息,這是來自 <script> 標籤中 JavaScript 程式的輸出。


下一篇
基本語法:變量與數據類型
系列文
JavaScript 基礎:端開發的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言