JavaScript語法詳解：JS簡介&變數

来源:https://www.cnblogs.com/smyhvae/archive/2018/01/17/8303507.html
-Advertisement-
Play Games

JavaScript基礎分為三個部分：ECMAScript（JavaScript的語法標準）、DOM（操作網頁上的元素的API）、BOM（操作瀏覽器部分功能的API） ...


本文最初發表於博客園，併在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

JavaScript簡介

Web前端有三層：

  • HTML：從語義的角度，描述頁面結構

  • CSS：從審美的角度，描述樣式（美化頁面）

  • JavaScript：從交互的角度，描述行為（提升用戶體驗）

JavaScript歷史背景介紹

布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。

一開始JavaScript叫做LiveScript，但是由於當時Java這個語言特別火，所以為了傍大牌，就改名為JavaScript。如同“北大”和“北大青鳥”的關係。“北大青鳥”就是傍“北大”大牌。

同時期還有其他的網頁語言，比如VBScript、JScript等等，但是後來都被JavaScript打敗了，所以現在的瀏覽器中，只運行一種腳本語言就是JavaScript。

JavaScript和ECMAScript的關係

ECMAScript是一種由Ecma國際（前身為歐洲電腦製造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。

JavaScript是由公司開發而成的，問題是不便於其他的公司拓展和使用。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名為ECMAScript。

簡單來說，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程式也就輕而易舉了。

ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了很多新特性）。但是，瀏覽器的廠商不能那麼快去追上這個標準。

JavaScript的發展：蒸蒸日上

2003年之前，JavaScript被認為“牛皮鮮”，用來製作頁面上的廣告，彈窗、漂浮的廣告。什麼東西讓人煩，什麼東西就是JavaScript開發的。所以瀏覽器就推出了屏蔽廣告功能。

2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。並且，那時候人們逐漸開始提升用戶體驗了。Ajax有一些應用場景。比如，當我們在百度搜索框搜文字時，輸入框下方的智能提示，可以通過Ajax實現。比如，當我們註冊網易郵箱時，能夠及時發現用戶名是否被占用，而不用調到另外一個頁面。

2007年喬布斯發佈了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。並且這一年，互聯網開始標準化，按照W3C規則三層分離，JavaScript越來越被重視。

2010年，人們更加瞭解HTML5技術，HTML5推出了一個東西叫做Canvas（畫布），工程師可以在Canvas上進行游戲製作，利用的就是JavaScript。

2011年，Node.js誕生，使JavaScript能夠開發伺服器程式了。

如今，WebApp已經非常流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。比如公司要開發一個“攜程網”App，就需要招聘三隊人馬，比如iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；而且如果要改版，要改3個版本。現在，假設公司都用web技術，用html+css+javascript技術就可以開發App。也易於迭代（網頁一改變，所有的終端都變了）。

雖然目前WebApp在功能和性能上的體驗遠不如Native App，但是“WebApp慢慢取代Native App”很有可能是未來的趨勢。

JavaScript入門易學性

  • JavaScript對初學者比較友好。

  • JavaScript是有界面效果的（比如C語言只有白底黑字）。

  • JavaScript是弱變數類型的語言，變數只需要用var來聲明。而Java中變數的聲明，要根據變數的類型來定義。

比如Java中需要定義如下變數：

    int a;
    float a;
    double a;
    String a;
    boolean a;

而JavaScript中，只用定義一個變數：

    var a;
  • JavaScript不用關心其他的一些事情（比如記憶體的釋放、指針等），更關心自己的業務。

JavaScript是前臺語言

JavaScript是前臺語言，而不是後臺語言。

JavaScript運行在用戶的終端網頁上，而不是伺服器上，所以我們稱為“前臺語言”。JavaScript就是一個簡單的製作頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操作資料庫。

後臺語言是運行在伺服器上的，比如PHP、ASP、JSP等等，這些語言都能夠操作資料庫，都能夠對資料庫進行“增刪改查”操作。Node.js除外。

JavaScript的組成

JavaScript基礎分為三個部分：

  • ECMAScript：JavaScript的語法標準。包括變數、表達式、運算符、函數、if語句、for語句等。

  • DOM：操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。

  • BOM：操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。

PS：JS機械重覆性的勞動幾乎為0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重覆勞動。

JavaScript的特點

（1）簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程式。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變數聲明。

（3）基於對象：內置大量現成對象，編寫少量程式可以完成目標

開始寫第一行JavaScript代碼

寫JavaScript代碼的位置

頁面中，我們可以在<body>標簽里放入<script type=”text/javascript”></script>標簽對兒，併在<script>里書寫JavaScript程式：

        <script type="text/javascript">

        </script>

text表示純文本，因為JavaScript也是一個純文本的語言。

PS：在Sublime Text里，輸入<sc後，按tab鍵，可以自動補齊。

alert語句

我們要學習的第一個語句，就是alert語句。

        <script type="text/javascript">
            alert("生命壹號");
        </script>

alert（英文翻譯為“警報”）的用途：彈出“警告框”。

alert("")警告框的效果如下：

這個警告框，在IE瀏覽器中長這樣：

上面的代碼中，如果寫了兩個alert()語句的話，網頁的效果是：彈出第一個警告框，點擊確定後，繼續彈出第二個警告框。

語法規則

學習程式，是有規律可循的，就是程式是有相同的部分，這些部分就是一種規定，不能更改，我們成為：語法。

（1）JavaScript對換行、縮進、空格不敏感。

也就是說：

代碼一：

        <script type="text/javascript">
            alert("今天藍天白雲");
            alert("我很高興");
        </script>

等價於代碼二：

        <script type="text/javascript">
            alert("今天藍天白雲");alert("我很高興");
        </script>

備註：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程式今後要壓縮，如果不加分號，壓縮之後將不能運行。

（2）所有的符號，都是英語的。比如括弧、引號、分號。

如果你用的是搜狗拼音，建議不要用shift切換中英文（可以在搜狗軟體里進行設置），不然很容易輸入中文的分號；建議用ctrl+space切換中英文輸入法。

註釋

我們不要把html、CSS、JavaScript三者的註釋格式搞混淆了。

（1）html的註釋：

<!-- 我是註釋  -->

（2）CSS的註釋：

<style type="text/css">

    /*
        我是註釋
    */

    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

註意：CSS只有/* */這種註釋，沒有//這種註釋。而且註釋要寫在<style>標簽裡面才算生效哦。

（3）JavaScript的註釋：

單行註釋：

// 我是註釋

多行註釋：

/*
    多行註釋1
    多行註釋2
*/

備註：sublime中，單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+/。

Javascript 網頁中輸出信息的寫法

彈出警告框：alert("")

我們在上一段講到了alert語句，這裡不再贅述。

控制台輸出：console.log("")

console.log("")表示在控制臺中輸出。console表示“控制台”，log表示“輸出”。

控制台在Chrome瀏覽器的F12中。控制台是工程師、程式員調試程式的地方。程式員經常使用這條語句輸出一些東西，來測試程式是否正確。

console.log("")效果如下：

普通人是不會在意控制台的，但是有些網站另藏玄機。有個很有意思的地方是，百度首頁的控制台，悄悄地放了一段招聘信息：

畢竟做前端的人是經常使用控制台的。

接下來，我們開始學習JavaScript語法。

用戶輸入：prompt()語句

prompt()就是專門用來彈出能夠讓用戶輸入的對話框。

JS代碼如下：

            var a = prompt("請隨便輸入點什麼東西吧");
            console.log(a);

上方代碼中，用戶輸入的內容，將被傳遞到變數 a 裡面。

效果如下：

prompt()語句中，用戶不管輸入什麼內容，都是字元串。

alert和prompt的區別：

    alert("從前有座山");                //直接使用，不需要變數
    var a = prompt("請輸入一個數字");   // 必須用一個變數，來接收用戶輸入的值

直接量：數字和字元串

“直接量”即常量，也稱為“字面量”。看見什麼，它就是什麼。

簡單的直接量有2種：數字、字元串。

（1）數值的直接量的表達非常簡單，寫上去就行了，不需要任何的符號。例如：

1   alert(886);  //886是數字，所以不需要加引號。

（2）字元串也很簡單，但一定要加上引號。可以是單詞、句子等。

溫馨提示：100是數字，"100"是字元串。

變數

變數的定義和賦值

變數舉例如下：

    var a = 100;

如下圖所示：

var是英語“variant”變數的縮寫。後面要加一個空格，空格後面的東西就是“變數名”，

  • 定義變數：var就是一個關鍵字，用來定義變數。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面一定要有空格隔開。

  • 變數的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變數。

  • 變數名：我們可以給變數任意的取名字。

PS：在JavaScript中，永遠都是用var來定義變數，這和C、Java等語言不同。

變數要先定義，才能使用。比如，我們不設置變數，直接輸出：

    <script type="text/javascript">
        console.log(a);
    </script>

控制台將會報錯：

正確寫法：

    var a;   // 定義
    a = 100;  //賦值
    console.log(a);  //輸出100

有經驗的程式員，會把定義和賦值寫在一起：

    var a = 100;    //定義，並且賦值100
    console.log(a);  //輸出100

變數的命名規範

變數名有命名規範：只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。

下列的單詞，叫做保留字，就是說不允許當做變數名，不用記：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大寫字母是可以使用的，並且大小寫敏感。也就是說A和a是兩個變數。

    var A = 250;    //變數1
    var a = 888;    //變數2

變數的類型

變數裡面能夠存儲數字、字元串等。變數會自動的根據存儲內容的類型不同，來決定自己的類型。

數值型：number

如果一個變數中，存放了數字，那麼這個變數就是數值型的。

    var a = 100;            //定義了一個變數a，並且賦值100
    console.log(typeof a);  //輸出a變數的類型

上方代碼的輸出結果為：

number

typeof()表示“獲取變數的類型”，語法為：

typeof 變數

在JavaScript中，只要是數，就是數值型(number)的。無論整浮、浮點數（即小數）、無論大小、無論正負，都是number類型的。

字元串型：string

現有如下代碼：

    var a = "abcde";
    var b = "傳智播客";
    var c = "123123";
    var d = "哈哈哈哈哈";
    var e = "";     //空字元串

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);

控制台輸出如下：

    sting
    sting
    sting
    sting
    sting

連字元和加號的區別

鍵盤上的+可能是連字元，也可能是數字的加號。如下：

    console.log("我" + "愛" + "你");   //連字元，把三個獨立的漢字，連接在一起了
    console.log("我+愛+你");           //原樣輸出
    console.log(1+2+3);             //輸出6

輸出：

我愛你
我+愛+你
6

總結：如果加號兩邊都是數值，此時是加。否則，就是連字元（用來連接字元串）。

舉例1：

    var a = "1";
    var b = 2;
    console.log(a + b);

控制台輸出：

    12

舉例2：

    var a = 1;
    var b = 2;
    console.log("a" + b);   //"a"就不是變數了！所以就是"a"+2 輸出a2

控制台輸出：

    a2

於是我們明白了，在變數中加入字元串進行連接，可以被同化為字元串。

變數值的傳遞（賦值）

語句：

    a = b;

把b的值賦給a，b不變。

將等號右邊的值，賦給左邊的變數；等號右邊的變數，值不變。

來做幾個題目。

舉例1：

                            //a     b       c
    var a = 1;              //1
    var b = 2;              //1     2
    var c = 3;              //1     2       3
    a = b + c;              //5     2       3
    b = c - a;              //5     -2      3
    c = a * b;              //5     -2      -10
    console.log(a);
    console.log(b);
    console.log(c);

輸出：

    5
    -2
    -10

舉例2：

                                    //a    b     c
            var a = 1;
            var b = 2;
            var c = 3;              //1     2     3
            a = a + b;              //3     2     3
            b = b + a;              //3     5     3
            c = c + b;              //3     5     8
            console.log(a);  //3
            console.log(b);  //5
            console.log(c);  //8

輸出：

    3
    5
    8

舉例3：

                                //a       b
            var a = "1";
            var b = 2;          //"1"     2
            a = a + b;          //"12"    2
            b = b + a;          //"12"    "212"
            console.log(a);     //輸出12
            console.log(b);     //輸出212

輸出：

    12
    212

舉例4：

                              //a         b
            var a = "1";
            var b = 2;
            a = b + a;       //"21"       2
            b = b + a;       //"21"       "221"
            console.log(a);  //21
            console.log(b)   //221

效果：

    21
    221

舉例5：（這個例子比較特殊，字元串減去數字）

        var a = "3";
        var b = 2;
        console.log(a-b);

效果：（註意，字元串 - 數值 = 數值）

    1

變數格式轉換

用戶的輸入

我們在上面的內容里講過，prompt()就是專門用來彈出能夠讓用戶輸入的對話框。重要的是：用戶不管輸入什麼，都是字元串。

parseInt()：字元串轉數字

parseInt()可以將字元串轉數字。parse表示“轉換”，Int表示“整數”（註意Int的拼寫）。例如：

字元串轉數字的方法：

    parseInt(“5”);

得到的結果是數字5。

parseInt()還具有以下特性：

（1）帶有自動凈化的功能；只保留字元串最開頭的數字，後面的中文自動消失。例如：

    console.log(parseInt("2017年在公眾號上寫了6篇文章");

控制台輸出：

    2017

（2）自動帶有截斷小數的功能：取整，不四捨五入。

例1：

    var a = parseInt(5.8) + parseInt(4.7);
    console.log(a);

控制台輸出：

    9

例2：

    var a = parseInt(5.8 + 4.7);
    console.log(a);

控制台輸出：

    10

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【讀書筆記】iOS-iOS的持續集成
    一，Jenkins http://jenkins-ci.org 二，iOS單元測試的持續集成 在Xcode進入OCUnit作為單元測試框架前，把單元測試分為兩種：Logic Test和Application Test.Logic Test負責測試邏輯部分，一般邏輯部分是沒有UI的。 Applicat ...
  • 字元串方法整理
    字元串方法字元串切割slicestrObj.slice(start[,end])參數為負，將它作為length+end處理，此處length為字元串的長度。 str.slice( 2)可以取字元串後兩位substringstrObj.substring(start[,end])  ...
  • OneAPM大講堂 | 提高JavaScript性能的30個技巧
    文章系國內領先的 ITOM 管理平臺供應商 OneAPM 編譯呈現。 您是網站管理員還是網頁開發人員?想創建超快速的網站嗎? 今天我們來看看 JavaScript，這項神奇而又複雜的技術。它使網站內容更加豐富，但常常出現的運行性能問題又降低了用戶的體驗。事實已經證明，最佳的終端用戶體驗能提升網站的轉 ...
  • JavaScript語法詳解：運算符和表達式
    我們在上一篇文章中講到了JS中變數的概念，本篇文章講一下運算符和表達式。 ...
  • javascript中children,childNodes等節點屬性
    1、children與childNodes children： 獲取子元素節點，無相容問題 childnNodes： IE：獲取子元素節點 非IE（chrome，Firefox等）：獲取子節點，包括元素節點和文本節點 2、firstChild與firstElementChild firstChild ...
  • CSS深入理解學習筆記之absolute
    1、absolute和float 擁有相同的特性表現： ①包裹性（容器應用之後，可以包裹裡面的內容）； ②破壞性（內容應用之後，會破壞父容器） 2、absolute和relative absolute和relative是分離的，對立的。父容器是relative，子元素是absolute，可以限制子元 ...
  • 關於編輯器對<input>標簽報錯提示“表單輸入沒有相關lable”的問題
    相信很多朋友在製作表單的時候，我們的編輯器會有下圖的相關提示吧 我們發現雖然這樣並不影響我們的正常使用，但是看著這樣的報錯提示總是很讓人心煩，那麼這到底是為什麼呢？ 其實，這是因為編輯器建議我們在使用<input>標簽時，用相應的<lable>標簽對其進行標記。不想百度的同學可以繼續往下看嘍： <l ...
  • .29-淺析webpack源碼之Resolver.prototype.resolve
    在上一節中，最後返回了一個resolver，本質上就是一個Resolver對象： 這個對象的構造函數非常簡單，只是簡單的繼承了Tapable，並接收了fileSystem參數： resolve 而在make事件流中，調用的正是該類的原型方法resolve，現在可以進行看一眼了： 需要註意的是，該方法 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類