Javascript入門-Day3:環境建置

更新於 發佈於 閱讀時間約 4 分鐘

瀏覽器

瀏覽器是最基本的 JavaScript 執行環境。所有現代瀏覽器都支持 JavaScript,並內置了開發者工具來調試和測試 JavaScript 代碼。

  1. 開發者工具:按 F12Ctrl+Shift+I 打開開發者工具,可以使用控制台(Console)來輸入和執行 JavaScript 代碼。
  2. 編寫 JavaScript
    • 可以直接在 HTML 文件中使用 <script> 標籤嵌入 JavaScript 代碼。
    • 也可以將 JavaScript 代碼放在單獨的 .js 文件中,並在 HTML 文件中通過 <script src="path/to/your/script.js"></script> 引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
console.log('Hello, JavaScript!');
</script>
<script src="script.js"></script>
</body>
</html>

Node.js

Node.js 是一個基於 V8 引擎的 JavaScript 運行環境,使得 JavaScript 可以在服務器端運行。

  1. 安裝 Node.js
    • 下載並安裝 Node.js Node.js 官網
    • 安裝完成後,可以使用命令行工具驗證安裝:node -vnpm -v
  2. 編寫 JavaScript
    • 創建一個新的 .js 文件,例如 app.js
    • 使用命令行運行 JavaScript 文件:node app.js
// app.js
console.log('Hello, Node.js!');
  1. 使用 Node.js 提供本地伺服器
    • 安裝 http-server 模組:npm install -g http-server
    • 在項目目錄中運行:http-server
# 安裝 http-server
npm install -g http-server

# 在項目目錄中運行
http-server

編輯器和 IDE

選擇合適的編輯器或集成開發環境(IDE)可以提高開發效率。以下是一些流行的選擇:

Visual Studio Code (VS Code)

  • 由 Microsoft 開發,免費且開源。
  • 支持豐富的擴展插件,如 ESLint、Prettier、Debugger for Chrome 等。
  • 內置終端,方便運行命令。

架設本地開發伺服器

  • 安裝 Live Server 插件。
  • 打開 HTML 文件,右鍵選擇 "Open with Live Server"。

WebStorm

  • 由 JetBrains 開發,商業軟件,但有免費試用。
  • 強大的 JavaScript 支持和智能代碼補全。
  • 支持版本控制、終端和集成調試。

架設本地開發伺服器

  • 在 WebStorm 中打開你的項目。
  • 在項目的右鍵選單中選擇 "Open in Browser",WebStorm 將自動為你的項目啟動一個本地伺服器。

Sublime Text

  • 輕量級編輯器,支持多種語言。
  • 可以通過安裝 Package Control 添加插件支持。

架設本地開發伺服器

  • 輕量級編輯器,支持多種語言。
  • 可以通過安裝 Package Control 添加插件支持。
  • Sublime Text 提供了多種編碼功能,包括語法高亮、代碼摺疊、自動完成和代碼導航等。
  • 可以通過安裝第三方插件來擴展其功能,例如安裝 Emmet 可以提高 HTML 和 CSS 的編寫速度,安裝 SublimeLinter 和 JSHint 可以對 JavaScript 代碼進行靜態檢查。
avatar-img
15會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Michael楊 的其他內容
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
本章講述了C#開發中的程序集,命名空間和 NuGet 包管理器。程序集是 .NET 應用的基礎,命名空間用於組織和預防命名衝突,而 NuGet 用於管理 .NET 的外部庫和依賴項。
本章節介紹C#的「例外處理」,包括使用try-catch語法處理錯誤,finally關鍵字的使用,以及如何主動引發和自定義異常。
本章節的目的是讓讀者瞭解C#的物件導向特性,包括類別、繼承、多型、封裝等基本概念,以及介面、抽象類別、靜態類別等進階主題。此外,本章節也將介紹如何使用列舉、委派、Lambda表達式、泛型及反射,這些都是C#中常見的強大功能。
本章節旨在介紹 C# 中函數的基本結構,包括訪問修飾符、返回類型、方法名稱、參數列表和方法體。同時,也介紹了函數的各種呼叫方式、參數傳遞方式和返回值類型。讀者可以通過本章節,深入理解 C# 中函數的使用和應用。
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
本章講述了C#開發中的程序集,命名空間和 NuGet 包管理器。程序集是 .NET 應用的基礎,命名空間用於組織和預防命名衝突,而 NuGet 用於管理 .NET 的外部庫和依賴項。
本章節介紹C#的「例外處理」,包括使用try-catch語法處理錯誤,finally關鍵字的使用,以及如何主動引發和自定義異常。
本章節的目的是讓讀者瞭解C#的物件導向特性,包括類別、繼承、多型、封裝等基本概念,以及介面、抽象類別、靜態類別等進階主題。此外,本章節也將介紹如何使用列舉、委派、Lambda表達式、泛型及反射,這些都是C#中常見的強大功能。
本章節旨在介紹 C# 中函數的基本結構,包括訪問修飾符、返回類型、方法名稱、參數列表和方法體。同時,也介紹了函數的各種呼叫方式、參數傳遞方式和返回值類型。讀者可以通過本章節,深入理解 C# 中函數的使用和應用。
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
Thumbnail
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
Thumbnail
學習JavaScript的理由有很多,包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外,文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。