1. 程式人生 > >javascript基礎語法

javascript基礎語法

換行符 document 生活 布爾值 ken 移除 有關 face 函數名

0X00: 起因

首先闡述下本人學javascript的初衷,本人目前從事安全行業,目前能挖掘些基礎的XSS漏洞,但是想深入理解XSS,需有javascript基礎,例如理解DOM型XSS等,於是就有了這麽一出,下面就是記錄自己的學習筆記。
javascript是一門簡單的語言,也是一門復雜的語言。說它簡單,是因為學會使用它只需片刻功夫;而說它復雜,是因為要真正掌握它則需要數年時間。實際上,前端工程師很大程度上就是指javascript工程師。前端入門容易精通難,說的是前端,更指的是javascript。本文是javascript基礎語法的第一篇——詞法結構。詞法結構是一套基礎性規則,用來描述如何使用javascript來編寫程序

0X01: 與java關系

  關於javascript有這樣一個說法,java和javascript的關系是雷鋒和雷鋒塔的關系。那到底有沒有關系呢

  javascript最開始的名字是LiveScript,後來選擇javascript作為其正式名稱的原因,大概是想讓它聽起來有系出名門的感覺。除了語法看起來和java類似之外,javascript和java是完全不同的兩種編程語言

  程序設計語言分為解釋型和編譯型兩大類。java或C++等語言需要一個編譯器。編譯器是一種程序,能夠把用java等高級語言編寫出來的源代碼翻譯為直接在計算機上執行的文件。解釋型程序設計語言不需要編譯器——它們僅需要解釋器,瀏覽器中的javascript解釋器將直接讀入源代碼並執行

  java在理論上幾乎可以部署在任何環境,但javascript卻傾向於只應用在web瀏覽器。而且,在javascript語言中,函數是一種獨立的數據類型,采用基於原型對象(prototype)的繼承鏈,javascript語法要比Java自由得多

  基本上,JavaScript這個名字的原意是“很像Java的腳本語言”

定義
  javascript是一門動態的、弱類型的解釋型編程語言,非常適合面向對象和函數式的編程風格。javascript的語法源自java,它的一等函數來自scheme,它的基於原型的繼承來自self

  javascript用來增強頁面動態效果,實現頁面與用戶之間的實時、動態交互

  javascript由三部分組成:ECMAScript、DOM和BOM

  [1]ECMAScript由ECMA-262定義,提供核心語言功能(ECMA是歐洲計算機制造商協會)

  [2]DOM(Document Object Model)文檔對象模型,提供訪問和操作網頁內容的方法和接口

  [3]BOM(Browser Object Model)瀏覽器對象模型,提供與瀏覽器交互的方法和接口

技術分享圖片

0x02:大小寫敏感

  關於javascript這門語言,再怎麽強調都不為過的特性是大小寫敏感。javascript中的關鍵字、變量、函數名和所有的標識符都必須采取一致的大小寫形式

`//‘online‘、‘Online‘、‘OnLine‘、‘ONLINE‘是四個不同的變量名`

 [註意]HTML並不區分大小寫(盡管XHTML區分大小寫)。許多客戶端javascript對象和屬性與它們表示的HTML標簽和屬性同名。在HTML中,這些標簽和屬性名可以使用大寫也可以使用小寫,而在javascript中則必須是小寫。例如,在HTML中設置事件處理程序時,onclick屬性可以寫成onClick,但在javascript代碼中,必須使用小寫的onclick

0x03:保留字(ReservedWord)

  和其他任何編程語言一樣,javascript保留了一些標識符為自己所用。這些保留字不能用做普通的標識符。由於好多參考書的誤導,貌似保留字和關鍵字是分開的,其實並不是,關鍵字只是保留字的一部分。保留字包括關鍵字、未來保留字、空字面量和布爾值字面量

保留字

 ReservedWord ::
         Keyword
         FutureReservedWord
         NullLiteral
         BooleanLiteral`
**
關鍵字**

    break      do         instanceof        typeof
    case       else       new               var
    catch      finally    return            void
    continue   for        switch            while
    debugger   function   this              with
    default    if         throw             delete
    in         try

**未來保留字**

  下列詞被用作建議擴展關鍵字,因此保留,以便未來可能采用這些擴展

    class      enum       extends       super
    const      export     import

**ECMAScript3版本**

  以上是ECMAScript5的保留字,但在ECMAScript3版本中的保留字並不一樣,若希望代碼能在基於ECMAScript3實現的解釋器上運行的話,應該避免使用以下保留字作為標識符

abstract boolean byte char class constdouble enum export extends final float
goto implements import int interfacelong native package private protected
public short  static super synchronized throw transient volatile 

# 0x04:預定義變量和函數

  javascript預定義了很多全局變量和函數,應該避免把它們的名字用做標識符名

`arguments Array Boolean Date decodeURI decodeURIComponent encodeURI
encodeURIComponent Error eval EvalError Function Infinity isFinite
 isNaN JSON Math NaN Number Object parseFloat parseInt RangeErro
ReferenceError RegExp String SyntaxError TypeError undefined URIError`

# 0x05:註釋(Comment)
  不是所有語句都需要javascript解釋器去解釋並執行。有時需要在腳本中寫一些僅供自己參考或提醒自己的信息,並希望javascript解釋器能直接忽略掉這些信息,這類信息就是註釋

  註釋能有效幫助了解代碼流程,在代碼中它們扮演生活中便條的角色,可以幫助我們弄清楚腳本到底幹了什麽

  [註意]註釋一定要精確地描述代碼,沒有用的註釋比沒有註釋還要糟糕

  有多種方式可以在javascript腳本中插入註釋,包括單行註釋、多行註釋和HTML風格的註釋

【1】單行註釋以兩個斜杠開頭``

//單行註釋

【2】多行註釋又叫塊級註釋,以一個斜杠和一個星號/*開頭,以一個星號和一個斜杠*/結尾

/
這是一個多行註釋
/

  [註意]塊級註釋/**/可以跨行書寫,但不能嵌套,否則會報錯

//報錯
/
註釋1
/

註釋1.1
/
/


[註意]塊級註釋/**/中的那些字符也可能出現在正則表達式字面量裏,所以塊級註釋對於被註釋的代碼塊來說是不安全的

/*
    var rm_a = /a*/.match(s);
*/
【3】HTML風格的註釋僅僅適用於單行註釋,其實javascript解釋器對<!--的處理和對//的處理是一樣的

<!-- 這是javascript中的註釋
  如果在HTML文檔中,還需要以-->來結束註釋

`<!-- 這是HTML中的註釋 -->`
  但javascript不要求這麽做,它會把-->視為註釋內容的一部分

  [註意]HTML允許上面這樣的註釋跨越多行,但這種註釋的每行都必須在開頭加上"<!--"來作為標誌

`<!-- 我是註釋1
<!-- 我是註釋2
<!-- 我是註釋3`
  因為javascript解釋器在處理這種風格的註釋時與HTML做法不同,為避免發生混淆,最好不要在javascript腳本中使用HTML風格的註釋

**空白(WhiteSpace)**
  空白通常沒有意義,有時候必須要用它來分隔字符序列,否則它們就會被合並成一個符號

var that = this;
  var和that之間的空白是不能移除的,但其他的空白可以移除

  javascript會忽略程序中標識(token)之間的空格。多數情況下,javascript同樣會忽略換行符。由於可以在代碼中隨意使用空格和換行,因此可以采用整齊、一致的縮進來形成統一的編碼風格,從而提高代碼的可讀性

//通過增加空白字符,提高代碼可讀性
for(var i = 1; i < 10; i++){
    //
}
  javascript將如下這些識別為空白字符WhiteSpace

\u0009 水平制表符 <TAB>
\u000B 垂直制表符 <VT>
\u000C 換頁符 <FF>
\u0020 空格符 <SP>
\u00A0 非中斷空格符 <NBSP>
\uFEFF 字符序標記



  javascript將如下字符識別為行終止符LineTerminator

\u000A    換行符        <LF>
\u000D    回車符        <CR>
\u2028    行分隔符      <LS>
\u2029    段落分割符     <PS>

可選的分號
  javascript使用分號;將語句分隔開,這對增強代碼的可讀性和整潔性是非常重要的

  有些地方可以省略分號,有些地方則不能省略分號

//兩條語句用兩行書寫,第一個分號可以省略
a = 3;
b = 4;
//兩條語句用一行書寫,第一個分號不能省略
a = 3; b = 4;
  但javascript並不是在所有換行處都填補分號,只有在缺少了分號就無法正確解析代碼時,javascript才會填補分號。換句話說,如果當前語句和隨後的非空格字符不能當成一個整體來解析的話,javascript就在當前語句行結束處填補分號

var a
a
=
3
console.log(a)
  javascript將其解析為:

var a;
a = 3;
console.log(a);
  這種語句的分隔規則會導致一些意想不到的情形

var y = x + f
(a+b).toString
  javascript將其解析為:

var y = x + f(a+b).toString
  因此,為了能讓上述代碼解析成兩條不同的語句,必須手動填寫行尾的顯式分號

  通常來講,如果一條語句以‘(‘、‘[‘、‘/‘、‘+‘、‘-‘等符號開始,那麽它極有可能和前一條語句合一起解析

兩個例外

  如果當前語句和下一行語句無法合並解析,javascript會在第一行後填補分號,這是通用規則,但有兩個例外

  【1】第一個例外是涉及return、break、continue、throw語句的場景中。如果這四個關鍵字後緊跟著換行,javascript會在換行處填補分號

return
true;
  javascript將其解析為:

return;true;
  而代碼的本意是:

return true;
  【2】第二個例外是在涉及++和--運算符時,如果將其用作後綴表達式,它和表達式應該同一行。否則,行尾將填補分號,同時++或--將作為下一行代碼的前綴操作符並與之一起解析

x
++
y
  javascript將其解析為:

x;++y;
  而代碼的本意是:

x++;y;
  雖然分號不是必須的,但最好不要省略它,因為加上分號可以避免很多錯誤,代碼行結尾處沒有分號會導致壓縮錯誤。加上分號也會在某些情況下增進代碼的性能,因為這樣解析器就不必再花時間推測應該在哪裏插入分號了

參考資料

【1】 ES5/詞法 https://www.w3.org/html/ig/zh/wiki/ES5/lexical
【2】 阮一峰Javascript標準參考教程——語法概述 http://javascript.ruanyifeng.com/grammar/basic.html
【3】 W3School-Javascript高級教程——ECMAScript語法 http://www.w3school.com.cn/js/pro_js_syntax.asp
【4】《javascript權威指南(第6版)》第2章 詞法結構
【5】《javascript高級程序設計(第3版)》第3章 基本概念
【6】《javascript語言精粹(修訂版)》第2章 語法
【7】《javascript DOM編程藝術(第2版)》第2章 Javascript語法

javascript基礎語法