Linux中國

編寫你的第一段 JavaScript 代碼

JavaScript 是一種充滿驚喜的編程語言。許多人第一次遇到 JavaScript 時,它通常是作為一種 Web 語言出現的。所有主流瀏覽器都有一個 JavaScript 引擎;並且,還有一些流行的框架,如 JQuery、Cash 和 Bootstrap 等,它們可以幫助簡化網頁設計;甚至還有用 JavaScript 編寫的編程環境。它似乎在互聯網上無處不在,但事實證明,它對於 Electron 等項目來說也是一種有用的語言。Electron 是一個構建跨平台桌面應用程序的開源工具包,它使用的語言就是 JavaScript。

JavaScript 語言的用途多到令人驚訝,它擁有各種各樣的庫,而不僅僅是用於製作網站。它的基礎知識十分容易掌握,因此,它可以作為一個起點,助你跨出構建你想像中的東西的第一步。

安裝 JavaScript

隨著你的 JavaScript 水平不斷提高,你可能會發現自己需要高級的 JavaScript 庫和運行時環境。不過,剛開始學習的時候,你是根本不需要安裝 JavaScript 環境的。因為所有主流的 Web 瀏覽器都包含一個 JavaScript 引擎來運行代碼。你可以使用自己喜歡的文本編輯器編寫 JavaScript,將其載入到 Web 瀏覽器中,接著你就能看到代碼的作用。

上手 JavaScript

要編寫你的第一個 JavaScript 代碼,請打開你喜歡的文本編輯器,例如 AtomVSCode 等。因為它是為 Web 開發的,所以 JavaScript 可以很好地與 HTML 配合使用。因此,我們先來嘗試一些基本的 HTML:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>
  </body>
</html>

保存這個文件,然後在 Web 瀏覽器中打開它。

瀏覽器中顯示的 HTML

要將 JavaScript 添加到這個簡單的 HTML 頁面,你可以創建一個 JavaScript 文件並在頁面的 <head> 中引用它,或者只需使用 <script> 標記將 JavaScript 代碼嵌入 HTML 中。在這個例子中,我嵌入了下面的代碼:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>

  </body>
</html>

在瀏覽器中重新載入頁面。

在瀏覽器中顯示帶有 JavaScript 的 HTML

如你所見,<p> 標籤仍然包含字元串 "Nothing here",但是當它被渲染時,JavaScript 會改變它,使其包含 "Hello world"。是的,JavaScript 具有重建​​(或只是幫助構建)網頁的能力。

這個簡單腳本中的 JavaScript 做了兩件事。首先,它創建一個名為 myvariable 的變數,並將字元串 "Hello world!" 放置其中。然後,它會在當前文檔(瀏覽器呈現的網頁)中搜索 ID 為 example 的所有 HTML 元素。當它找到 example 時,它使用了 innerHTML 屬性將 HTML 元素的內容替換為 myvariable 的內容。

當然,我們也可以不用自定義變數。因為,使用動態創建的內容來填充 HTML 元素也是容易的。例如,你可以使用當前時間戳來填充它:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>

  </body>
</html>

重新載入頁面,你就可以看到在呈現頁面時生成的時間戳。再重新載入幾次,你可以觀察到秒數會不斷增加。

JavaScript 語法

在編程中, 語法 syntax 指的是如何編寫句子(或「行」)的規則。在 JavaScript 中,每行代碼必須以分號(;)結尾,以便運行代碼的 JavaScript 引擎知道何時停止閱讀。(LCTT 譯註:從實用角度看,此處的「必須」其實是不正確的,大多數 JS 引擎都支持不加分號。Vue.js 的作者尤雨溪認為「沒有應該不應該,只有你自己喜歡不喜歡」,他同時表示,「Vue.js 的代碼全部不帶分號」。詳情可以查看他在知乎上對於此問題的 回答。)

單詞(或 字元串 strings )必須用引號(")括起來,而數字(或 整數 integers )則不用。

幾乎所有其他東西都是 JavaScript 語言的約定,例如變數、數組、條件語句、對象、函數等等。

在 JavaScript 中創建變數

變數是數據的容器。你可以將變數視為一個盒子,你在其中放置數據,以便與程序的其他部分共享它。要在 JavaScript 中創建變數,你可以選用關鍵字 letvar 中的一個,請根據你打算如何使用變數來選擇:var 關鍵字用於創建一個供整個程序使用的變數,而 let 只為特定目的創建變數,通常在函數或循環的內部使用。(LCTT 譯註:還有 const 關鍵字,它用於創建一個常量。)

JavaScript 內置的 typeof 函數可以幫助你識別變數包含的數據的類型。使用第一個示例,你可以修改顯示文本,來顯示 myvariable 包含的數據的類型:

<string>
let myvariable = "Hello world!";
document.getElementById("example").innerHTML = typeof(myvariable);
</string>

接著,你就會發現 Web 瀏覽器中顯示出 「string」 字樣,因為該變數包含的數據是 "Hello world!"。在 myvariable 中存儲不同類型的數據(例如整數),瀏覽器就會把不同的數據類型列印到示例網頁上。嘗試將 myvariable 的內容更改為你喜歡的數字,然後重新載入頁面。

在 JavaScript 中創建函數

編程中的函數是獨立的數據處理器。正是它們使編程得以 模塊化。因為函數的存在,程序員可以編寫通用庫,例如​​,調整圖像大小或統計時間花費的庫,以供其他和你一樣的程序員在他們的代碼中使用。

要創建一個函數,你可以為函數提供一個自定義名稱,後面跟著用大括弧括起來的、任意數量的代碼。

下面是一個簡單的網頁,其中包含了一個剪裁過的圖像,還有一個分析圖像並返回真實圖像尺寸的按鈕。在這個示例代碼中,<button> 這個 HTML 元素使用了 JavaScript 的內置函數 onclick 來檢測用戶交互,它會觸發一個名為 get_size 的自定義函數。具體代碼如下:

<html>
  <head>
    <title>Imager</title>
  </head>
  <body>

    <div>
      <button onclick="get_size(document.getElementById(&apos;myimg&apos;))">
        Get image size
    </button>
    </div>

    <div>
      <img style="width: 15%" id="myimg" src="penguin.png" />
    </div>

    <script>
      function get_size(i) {
        let w = i.naturalWidth;
        let h = i.naturalHeight;
        alert(w + " by " + h);
      }
    </script>

  </body>
</html>

保存這個文件,並將其載入到 Web 瀏覽器中以嘗試這段代碼。

自定義的 get_size 函數返回了圖像尺寸

使用 JavaScript 的跨平台應用程序

你可以從代碼示例中看到,JavaScript 和 HTML 緊密協作,從而創建了有凝聚力的用戶體驗。這是 JavaScript 的一大優勢。當你使用 JavaScript 編寫代碼時,你繼承了現代計算中最常見的用戶界面之一,而它與平台無關,那就是 Web 瀏覽器。你的代碼本質上是跨平台的,因此你的應用程序,無論是簡單的圖像大小分析器還是複雜的圖像編輯器、視頻遊戲,或者你夢想的任何其他東西,都可以被所有人使用,無論是通過 Web 瀏覽器,還是桌面(如果你同時提供了一個 Electron 應用)。

學習 JavaScript 既簡單又有趣。網路上有很多網站提供了相關教程,還有超過一百萬個 JavaScript 庫可幫助你與設備、外圍設備、物聯網、伺服器、文件系統等進行交互。在你學習的過程中,請將我們的 JavaScript 備忘單 放在身邊,以便記住語法和結構的細節。

JavaScript 備忘單

via: https://opensource.com/article/21/7/javascript-cheat-sheet

作者:Seth Kenlon 選題:lkxed 譯者:lkxed 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國