溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
前面的話
javascript是一門簡(jiǎn)單的語言,也是一門復(fù)雜的語言。說它簡(jiǎn)單,是因?yàn)閷W(xué)會(huì)使用它只需片刻功夫;而說它復(fù)雜,是因?yàn)橐嬲莆账鼊t需要數(shù)年時(shí)間。實(shí)際上,前端工程師很大程度上就是指javascript工程師。前端入門容易精通難,說的是前端,更指的是javascript。本文是javascript基礎(chǔ)語法的第一篇——詞法結(jié)構(gòu)
與java關(guān)系
關(guān)于javascript有這樣一個(gè)說法,java和javascript的關(guān)系是雷鋒和雷鋒塔的關(guān)系。那到底有沒有關(guān)系呢
javascript最開始的名字是LiveScript,后來選擇javascript作為其正式名稱的原因,大概是想讓它聽起來有系出名門的感覺。除了語法看起來和java類似之外,javascript和java是完全不同的兩種編程語言
程序設(shè)計(jì)語言分為解釋型和編譯型兩大類。java或C++等語言需要一個(gè)編譯器。編譯器是一種程序,能夠把用java等高級(jí)語言編寫出來的源代碼翻譯為直接在計(jì)算機(jī)上執(zhí)行的文件。解釋型程序設(shè)計(jì)語言不需要編譯器——它們僅需要解釋器,瀏覽器中的javascript解釋器將直接讀入源代碼并執(zhí)行
java在理論上幾乎可以部署在任何環(huán)境,但javascript卻傾向于只應(yīng)用在web瀏覽器。而且,在JavaScript語言中,函數(shù)是一種獨(dú)立的數(shù)據(jù)類型,采用基于原型對(duì)象(prototype)的繼承鏈,JavaScript語法要比Java自由得多
基本上,JavaScript這個(gè)名字的原意是“很像Java的腳本語言”
定義
javascript是一門動(dòng)態(tài)的、弱類型的解釋型編程語言,非常適合面向?qū)ο蠛秃瘮?shù)式的編程風(fēng)格。javascript的語法源自java,它的一等函數(shù)來自scheme,它的基于原型的繼承來自self
javascript用來增強(qiáng)頁面動(dòng)態(tài)效果,實(shí)現(xiàn)頁面與用戶之間的實(shí)時(shí)、動(dòng)態(tài)交互
javascript由三部分組成:ECMAScript、DOM和BOM
[1]ECMAScript由ECMA-262定義,提供核心語言功能(ECMA是歐洲計(jì)算機(jī)制造商協(xié)會(huì))
[2]DOM(Document Object Model)文檔對(duì)象模型,提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口
[3]BOM(Browser Object Model)瀏覽器對(duì)象模型,提供與瀏覽器交互的方法和接口
大小寫敏感
關(guān)于javascript這門語言,再怎么強(qiáng)調(diào)都不為過的特性是大小寫敏感。javascript中的關(guān)鍵字、變量、函數(shù)名和所有的標(biāo)識(shí)符都必須采取一致的大小寫形式。
//'online'、'Online'、'OnLine'、'ONLINE'是四個(gè)不同的變量名
[注意]HTML并不區(qū)分大小寫
保留字(ReservedWord)
和其他任何編程語言一樣,javascript保留了一些標(biāo)識(shí)符為自己所用。這些保留字不能用做普通的標(biāo)識(shí)符。由于好多參考書的誤導(dǎo),貌似保留字和關(guān)鍵字是分開的,其實(shí)并不是,關(guān)鍵字只是保留字的一部分。保留字包括關(guān)鍵字、未來保留字、空字面量和布爾值字面量
保留字 ReservedWord ::
Keyword
FutureReservedWord
NullLiteral
BooleanLiteral
關(guān)鍵字
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
未來保留字
下列詞被用作建議擴(kuò)展關(guān)鍵字,因此保留,以便未來可能采用這些擴(kuò)展
class enum extends super
const export import
ECMAScript3版本
以上是ECMAScript5的保留字,但在ECMAScript3版本中的保留字并不一樣,若希望代碼能在基于ECMAScript3實(shí)現(xiàn)的解釋器上運(yùn)行的話,應(yīng)該避免使用以下保留字作為標(biāo)識(shí)符
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
預(yù)定義變量和函數(shù)
此外,javascript預(yù)定義了很多全局變量和函數(shù),應(yīng)該避免把它們的名字用做標(biāo)識(shí)符名
arguments Array Boolean Date decodeURI decodeURIComponent encodeURIencodeURIComponent Error eval EvalError Function Infinity isFinite
isNaN JSON Math NaN Number Object parseFloat parseInt RangeError
ReferenceError RegExp String SyntaxError TypeError undefined URIError
注釋(Comment)
不是所有語句都需要javascript解釋器去解釋并執(zhí)行。有時(shí)需要在腳本中寫一些僅供自己參考或提醒自己的信息,并希望javascript解釋器能直接忽略掉這些信息,這類信息就是注釋
注釋能有效幫助了解代碼流程,在代碼中它們扮演生活中便條的角色,可以幫助我們弄清楚腳本到底干了什么
[注意]注釋一定要精確地描述代碼,沒有用的注釋比沒有注釋還要糟糕
有多種方式可以在javascript腳本中插入注釋,包括單行注釋、多行注釋和HTML風(fēng)格的注釋
【1】單行注釋以兩個(gè)斜杠開頭
//單行注釋
【2】多行注釋又叫塊級(jí)注釋,以一個(gè)斜杠和一個(gè)星號(hào)/*開頭,以一個(gè)星號(hào)和一個(gè)斜杠*/結(jié)尾
/*
這是一個(gè)多行注釋
*/
[注意]塊級(jí)注釋/**/中的那些字符也可能出現(xiàn)在正則表達(dá)式字面量里,所以塊級(jí)注釋對(duì)于被注釋的代碼塊來說是不安全的
/*
var rm_a = /a*/.match(s);
*/
【3】HTML風(fēng)格的注釋僅僅適用于單行注釋,其實(shí)javascript解釋器對(duì)<!--的處理和對(duì)//的處理是一樣的
<!-- 這是javascript中的注釋
如果在HTML文檔中,還需要以-->來結(jié)束注釋
<!-- 這是HTML中的注釋 -->
但javascript不要求這么做,它會(huì)把-->視為注釋內(nèi)容的一部分
[注意]HTML允許上面這樣的注釋跨越多行,但這種注釋的每行都必須在開頭加上"<!--"來作為標(biāo)志
<!-- 我是注釋1
<!-- 我是注釋2
<!-- 我是注釋3
因?yàn)閖avascript解釋器在處理這種風(fēng)格的注釋時(shí)與HTML做法不同,為避免發(fā)生混淆,最好不要在Javascript腳本中使用
HTML風(fēng)格的注釋
空白(WhiteSpace)
空白通常沒有意義,有時(shí)候必須要用它來分隔字符序列,否則它們就會(huì)被合并成一個(gè)符號(hào)
var that = this;
var和that之間的空白是不能移除的,但其他的空白可以移除
javascript會(huì)忽略程序中標(biāo)識(shí)(token)之間的空格。多數(shù)情況下,javascript同樣會(huì)忽略換行符。由于可以在代碼中隨意使用空格和換行,因此可以采用整齊、一致的縮進(jìn)來形成統(tǒng)一的編碼風(fēng)格,從而提高代碼的可讀性
//通過增加空白字符,提高代碼可讀性 for(var i = 1; i < 10; i++){ // }
javascript將如下這些識(shí)別為空白字符WhiteSpace
\u0009 水平制表符 <TAB>
\u000B 垂直制表符 <VT>
\u000C 換頁符 <FF>
\u0020 空格符 <SP>
\u00A0 非中斷空格符 <NBSP>
\uFEFF 字符序標(biāo)記
javascript將如下字符識(shí)別為行終止符LineTerminator
\u000A 換行符 <LF>
\u000D 回車符 <CR>
\u2028 行分隔符 <LS>
\u2029 段落分割符 <PS>
可選的分號(hào)
javascript使用分號(hào);將語句分隔開,這對(duì)增強(qiáng)代碼的可讀性和整潔性是非常重要的。但javascript并不是在所有換行處都填補(bǔ)分號(hào),只有在缺少了分號(hào)就無法正確解析代碼時(shí),javascript才會(huì)填補(bǔ)分號(hào)
var a
a
=
3
console.log(a)
javascript將其解析為:
var a;
a = 3;
console.log(a);
這種語句的分隔規(guī)則會(huì)導(dǎo)致一些意想不到的情形
var y = x + f
(a+b).toString
javascript將其解析為:
var y = x + f(a+b).toString
因此,為了能讓上述代碼解析成兩條不同的語句,必須手動(dòng)填寫行尾的顯式分號(hào)
兩個(gè)例外
如果當(dāng)前語句和下一行語句無法合并解析,javascript會(huì)在第一行后填補(bǔ)分號(hào),這是通用規(guī)則,但有兩個(gè)例外
【1】第一個(gè)例外是涉及return、break、continue、throw語句的場(chǎng)景中。如果這四個(gè)關(guān)鍵字后緊跟著換行,javascript會(huì)在換行處填補(bǔ)分號(hào)
return
true;
javascript將其解析為:
return;true;
而代碼的本意是:
return true;
【2】第二個(gè)例外是在涉及++和--運(yùn)算符時(shí),如果將其用作后綴表達(dá)式,它和表達(dá)式應(yīng)該同一行。否則,行尾將填補(bǔ)分號(hào),同時(shí)++或--將作為下一行代碼的前綴操作符并與之一起解析
x
++
y
javascript將其解析為:
x;++y;
而代碼的本意是:
x++;y;
雖然分號(hào)不是必須的,但最好不要省略它,因?yàn)榧由戏痔?hào)可以避免很多錯(cuò)誤,代碼行結(jié)尾處沒有分號(hào)會(huì)導(dǎo)致壓縮錯(cuò)誤。加上分號(hào)也會(huì)在某些情況下增進(jìn)代碼的性能,因?yàn)檫@樣解析器就不必再花時(shí)間推測(cè)應(yīng)該在哪里插入分號(hào)了
- JavaScript語法約定和程序調(diào)試原理解析
- javascript中正則表達(dá)式語法詳解
- javascript 高級(jí)語法之繼承的基本使用方法示例
- 詳解JavaScript 新語法之Class 的私有屬性與私有方法
- JSON基本語法及與JavaScript的異同實(shí)例分析
- NodeJS模塊與ES6模塊系統(tǒng)語法及注意點(diǎn)詳解
- JavaScript ES6中的簡(jiǎn)寫語法總結(jié)與使用技巧
- js es6系列教程 - 新的類語法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
- 關(guān)于javascript事件響應(yīng)的基礎(chǔ)語法總結(jié)(必看篇)
- 深入理解JavaScript中的語法和代碼結(jié)構(gòu)
相關(guān)文章
快速解決select2在bootstrap模態(tài)框中下拉框隱藏的問題
今天小編就為大家分享一篇快速解決select2在bootstrap模態(tài)框中下拉框隱藏的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08js控制當(dāng)再次點(diǎn)擊按鈕時(shí)的間隔時(shí)間
這篇文章主要介紹通過js如何控制當(dāng)再次點(diǎn)擊按鈕是的間隔時(shí)間,需要的朋友可以參考下2014-06-06javascript獲取select值的方法完整實(shí)例
這篇文章主要介紹了javascript獲取select值的方法,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)遍歷與操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06javascript實(shí)現(xiàn)超好看的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超好看的3D煙花特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript Scoping and Hoisting 翻譯
希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫的全面,以免引起更多的困惑。如果我寫錯(cuò)了或是漏掉了某些重要的東西,請(qǐng)一定讓我知道2012-07-07javascript中方便增刪改cookie的一個(gè)類
把jquery.cookie.js改了一下,改成了純javascript版本,以備我以后項(xiàng)目只需,增加了一個(gè)得到頁面全部cookie鍵值的功能2012-10-10js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12