JavaScript -教育 學生 補習 >> 簡介

JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学 。 本教程 希望 教育 学生 JavaScript 的相關知識, 幫 學生 補習 study.

JavaScript -教育 學生 補習 >> 簡介>> Why 學習 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为

本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

如果在此之前您已经使用过 JavaScript，您也可以阅读本教程：

JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。

本章 希望 教育 学生 JavaScript 的相關知識, 幫 學生 補習 study.

JavaScript -教育 学生 補習 >> 簡介>> Java 和 JavaScript 的不同

Java 和 JavaScript 雖然名稱相似，但卻是熱狗和狗的差別。JavaScript 是由 Netscape 工程師 Brendan Eich 於 1995 年僅花 10 天所設計的程式語言，也因為一些歷史因素，JavaScript 成為被誤解最深的程式語言。JavaScript 是一種直譯式、基於原型（prototype based）的物件導向程式語言，但又具有函數式程式設計（Functional programming）的特性。其具備簡單好上手、應用範圍廣泛，容易有成就感，但精通不易等特性。過去一段時間 JavaScript 一直被認為是玩具語言，難登大雅之堂。但隨著版本的演進，再加上 NodeJS 的出現，讓 JavaScript 由黑翻紅成為程式語言的當紅巨星，目前雄據在程式語言排行榜前幾名，除了網頁開發外，在許多的領域都可以看到 JavaScript 的身影。本文將快速帶領大家掌握 JavaScript 重要且核心的觀念。

JavaScript -教育 学生 補習 >> 簡介>> 所以 JavaScript 到底是什麼？

JavaScript 是一個成熟的動態程式語言，應用於 HTML 文件（document）上時，就可以為網頁提供動態的互動功能。JavaScript 是由 Mozilla project、Mozilla Foundation 和 Mozilla Corporation 的創辦人 Brendan Eich 所發明的。

你可以用 JavaScript 實現許多事情。你可以先從簡單的特性開始，如跑馬燈、相簿、動態版型、回應按鈕點擊等。在你熟悉的這個程式語言以後，甚至可以製作遊戲、2D平面以及立體的圖像、資料庫系統等等的應用！

JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，讓各位可以感到事半功倍。這些工具包括：

• 內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。
• 第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。
• 第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。

JavaScript -教育 学生 補習 >> 簡介>> 「Hello world」範例程式

前面所述的功能聽起來令人興奮，而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一，您會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。

但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在您將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中，並且打造一個「hello world!」的範例（這同時也是許多程式語言的標準範例程式）。

注意：如果您還沒有學習過先前的課程，請您下載這個範例程式碼，並以此開始練習。

1. 首先，進入您測試網頁的資料夾中，並建立一個名為 main.js 的檔案，再將她存放於 scripts 資料夾內。
2. 接著，開啟 index.html 檔案，並在 </body> 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：<script src="scripts/main.js"></script>
3. 我們做的事情，基本上跟新增一個 CSS 的 <link> 元素是相同的概念 — 我們將 JavaScript 給導入這個頁面中，讓她來影響 HTML（以及 CSS、還有任何頁面上的東西）。
4. 再來我們把以下的程式碼新增到 main.js 檔案內：var myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';
5. 現在請您將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 index.html。您應該會看”Hello World”.

備註：我們選擇將 <script> 元素放在接近 HTML 檔案底部的原因，是因為瀏覽器是依照程式碼存在檔案中的順序來讀取 HTML 檔案的。如果 JavaScript 先被瀏覽器讀取了，那她應該要去影響她之後的 HTML 程式碼，但有時候卻行不通，因為她比應該產生改變的 HTML 還要早被讀取到。因此，把她放在接近檔案底部的位置，通常都會是一個不錯的策略。

發生什麼事了？

所以您的標題文字已經被 JavaScript 修改成「Hello world!」了。我們先使用了一個叫做 querySelector() 的函式來取得了我們標題參考（Reference），並且將她存在一個叫做 myHeading 的變數裡面。這跟我們在操作 CSS 時使用的選擇器是相似的。當您想要更動某個元素時，首先您要將她選取起來。

之後，我們將變數 myHeading 中 innerHTML 特性的值設為「Hello world!」。

備註：Both of the features you used above are parts of the Document Object Model (DOM) API, which allows you to manipulate documents.

電子計算機 -教育 -IT 電腦班>>Contact US: