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 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類