Web前端JavaScript教程-零基礎(chǔ)學(xué)JavaScript
Javascript，從“最被誤解的語言”，最后神奇地轉(zhuǎn)變成為“最流行的語言”，證明它經(jīng)受得起時(shí)間的考驗(yàn)。雖然單獨(dú)來看，它的交互設(shè)計(jì)有些失敗，但是加上Ajax的完美配合，javascript就成了一款輕便并且又實(shí)用的好語法。
如果您想要更高效、更系統(tǒng)地學(xué)會(huì)javascript，您最好采用邊學(xué)邊練的學(xué)習(xí)模式。
如果您覺得javascript的學(xué)習(xí)難度較高，不易理解，建議您采用視頻教程進(jìn)行學(xué)習(xí)??：
學(xué)完本教程之后，建議您進(jìn)行Javascript實(shí)戰(zhàn)來鞏固您學(xué)到的知識(shí)。
什么是JavaScript？
JavaScript是動(dòng)態(tài)實(shí)現(xiàn)Web頁面效果的腳本語言，是Web前端必須掌握的三種語言之一。
用于定義網(wǎng)頁內(nèi)容的HTML
CSS指定網(wǎng)頁的布局
用于編程網(wǎng)頁行為的JavaScript
JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。
?HTML、CSS和Javascript之間的關(guān)系：
1、首先它們都可以采用普通的文本編輯器開發(fā)，然后使用瀏覽器軟件打開并解釋執(zhí)行；
2、html是一種超文本標(biāo)記語言，主要是做頁面展示，W3C制定了html規(guī)范與標(biāo)準(zhǔn)；
3、css是一種層疊樣式表語言，主要用來輔助修飾html，讓html網(wǎng)頁看起來更加的豐富與漂亮；
4、javascript是一種編程語言，它可以用來操作html中的節(jié)點(diǎn)以及css樣式，進(jìn)而達(dá)到網(wǎng)頁的動(dòng)態(tài)效果，增強(qiáng)網(wǎng)頁與用戶的交互度。?
JavaScript和Java
JavaScript是網(wǎng)景公司的布蘭登艾奇開發(fā)的，Java是SUN公司詹姆斯高斯林帶領(lǐng)團(tuán)隊(duì)開發(fā)的，JavaScript程序被內(nèi)置在瀏覽器軟件當(dāng)中的JavaScript解釋器解釋執(zhí)行，而Java語言必須運(yùn)行在Java虛擬機(jī)當(dāng)中，所以JavaScript和Java沒有任何關(guān)系。只是名字當(dāng)中都帶有Java字眼，這也許只是一種市場營銷策略。
JS和JSP
JavaScript被程序員簡稱為JS，運(yùn)行在瀏覽器客戶端當(dāng)中；JavaServer Pages簡稱為JSP，是一種基于Java語言實(shí)現(xiàn)的服務(wù)器端頁面，JSP屬于Java語言，運(yùn)行在Java虛擬機(jī)當(dāng)中。
JavaScript語言特點(diǎn)
基于對(duì)象的編程語言
JavaScript是一種基于對(duì)象的編程語言而不能說是面向?qū)ο蟮木幊陶Z言，因?yàn)閷?duì)象性的特征在JavaScript中并不像Java語言中那樣純正。在JavaScript中有內(nèi)置的對(duì)象，同時(shí)用戶也可以創(chuàng)建并使用自己的對(duì)象。
弱類型語
JavaScript編程語言沒有編譯階段，文本編輯器開發(fā)完畢之后，直接使用瀏覽器打開即可解釋執(zhí)行，所以JavaScript中的變量在定義的時(shí)候不需要指定數(shù)據(jù)類型，并且變量賦值的時(shí)候可以隨意賦值，具體賦值的時(shí)候，值決定變量的數(shù)據(jù)類型。
JavaScript在變量約束方面非常弱，所以稱為弱類型語言。Java語言存在編譯階段，在Java語言當(dāng)中聲明變量i為int類型，那么變量i只能接收int類型的字面值，如果字面值的數(shù)據(jù)類型和變量的數(shù)據(jù)類型不同，程序是無法編譯通過的，并且從int類型的變量i開始聲明到最終程序執(zhí)行結(jié)束，i變量的數(shù)據(jù)類型永遠(yuǎn)都是int類型，占用4個(gè)字節(jié)，像Java這種對(duì)變量約束較強(qiáng)的編程語言被稱為強(qiáng)類型編程語言。
解釋執(zhí)行的腳本語言
JavaScript是一種腳本語言，腳本語言是一種解釋性的語言，以普通文本形式保存，不需要編譯生成目標(biāo)程序，可以直接用文本編輯器打開查看。它不象c\c++等可以編譯成二進(jìn)制代碼以可執(zhí)行文件的形式存在。JavaScript腳本語言可直接使用JavaScript解釋器解釋執(zhí)行，可能在解釋的過程當(dāng)中進(jìn)行編譯。
簡單性
JavaScript基于Java的基本語法和語句流程，而Java是從C++語言發(fā)展而來，因此有過C語言開發(fā)經(jīng)驗(yàn)的人員學(xué)習(xí)JavaScript十分容易。此外，JavaScript是一種弱類型語言，其變量并沒有嚴(yán)格的數(shù)據(jù)類型，免去了許多麻煩。
動(dòng)態(tài)性
JavaScript是基于事件驅(qū)動(dòng)的，所謂事件驅(qū)動(dòng)就是觸發(fā)一定的操作而引起某些動(dòng)作。例如，鼠標(biāo)單擊按鈕，頁面加載完畢等等這些都是事件。可以根據(jù)不同的事件創(chuàng)建相應(yīng)的響應(yīng)代碼，這樣就可以實(shí)現(xiàn)和用戶的動(dòng)態(tài)交互。
平臺(tái)無關(guān)性
前面提到JavaScript代碼在瀏覽器中解釋執(zhí)行，并沒有利用具體平臺(tái)的特性，所以只要有支持JavaScript的瀏覽器，無論在什么平臺(tái)上代碼都能得到執(zhí)行。開發(fā)人員在編寫JavaScript腳本過程中就無需考慮具體平臺(tái)的限制。只需要考慮瀏覽器兼容問題即可。
安全性
JavaScript是安全的，其不允許訪問本地硬盤，也不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失和破壞。
JavaScript組成
ECMAScript
Netscape（網(wǎng)景）公司推出JavaScript不久，不甘落后的微軟也推出了微軟版的JavaScript-JScript，微軟主要將其用于自己的瀏覽器Internet Explorer。最初兩家公司各自為政，分別執(zhí)行自己的標(biāo)準(zhǔn)。那個(gè)時(shí)候的web程序員是很痛苦的，通常需要將相同的功能編寫兩份不同語法的程序。
1999年，歐洲計(jì)算機(jī)協(xié)會(huì)（ECMA）依據(jù)JavaScript制定了ECMAScript的ECMA-262規(guī)范，ECMAScript成為JavaScript的標(biāo)準(zhǔn)。之后兩家公司都遵循了該規(guī)范，所以JavaScript和Jscript大部分是相同的，但也有小部分不同之處。
?
DOM
Document Object Model（文檔對(duì)象模型），在JavaScript當(dāng)中，把html文檔當(dāng)做一棵樹，這棵樹有一個(gè)根節(jié)點(diǎn)<html></html>，根節(jié)點(diǎn)下有很多子節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都可以看做是一個(gè)DOM對(duì)象，JavaScript通過操作DOM對(duì)象完成重構(gòu)整個(gè)HTML文檔、添加、移除、改變或重排頁面上的項(xiàng)目。從而達(dá)到網(wǎng)頁動(dòng)態(tài)效果，提高與用戶的交互度。
JavaScript對(duì)DOM元素的操作又可以稱為“html dom編程”。HTML DOM是HTML Document Object Model(文檔對(duì)象模型)的縮寫，HTML DOM則是專門適用于HTML/XHTML的文檔對(duì)象模型。熟悉軟件開發(fā)的人員可以將HTML DOM理解為網(wǎng)頁的API。它將網(wǎng)頁中的各個(gè)元素都看作一個(gè)個(gè)對(duì)象，從而使網(wǎng)頁中的元素也可以被計(jì)算機(jī)語言獲取或者編輯。?例如Javascript就可以利用HTML DOM動(dòng)態(tài)地修改網(wǎng)頁。
根據(jù)W3C DOM規(guī)范,DOM是一種與瀏覽器，平臺(tái)，語言無關(guān)的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，DOM解決了Netscape的JavaScript和?Microsoft的JavaScript之間的沖突，給予web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。
?
BOM
Browser Object Model（瀏覽器對(duì)象模型），使JavaScript能夠與瀏覽器進(jìn)行“對(duì)話”，獲取瀏覽器信息，操作瀏覽器。雖然W3C并沒有對(duì)BOM作出規(guī)范，但是所有瀏覽器都支持BOM，有一些事實(shí)上的標(biāo)準(zhǔn)。
JavaScript中BOM和DOM之間的關(guān)系及主流瀏覽器
JavaScript中BOM和DOM之間的關(guān)系
主流瀏覽器
JavaScript腳本語言最終被瀏覽器當(dāng)中的JS解釋器解釋執(zhí)行，所以不同的瀏覽器執(zhí)行相同的JS代碼可能結(jié)果不盡相同，所以對(duì)于WEB前端開發(fā)人員來說，解決瀏覽器兼容問題是一件很頭疼的事情。通常一個(gè)WEB前端開發(fā)人員需要在自己的電腦中安裝不同廠商的瀏覽器，有可能相同廠商的瀏覽器也需要安裝不同的版本。下面我們來看一看世界主流的5大瀏覽器都有誰？
左上角位置：谷歌公司的Chrome瀏覽器。
左下角位置：safari瀏覽器，蘋果公司旗下瀏覽器。
右上角位置：微軟公司的IE瀏覽器。
右下角位置：FireFox瀏覽器，簡稱FF瀏覽器，mozilla公司旗下瀏覽器
中間位置：opera瀏覽器，挪威廠商opera旗下瀏覽器。
我們在講課的過程中安裝的瀏覽器有：FF/Chrome/IE。
JavaScript開發(fā)工具
文本編輯器EditPlus
我們講課的過程中，第一天的知識(shí)點(diǎn)采用普通的文本編輯器開發(fā)，這種開發(fā)方式還是比較適合JavaScript初學(xué)者的。建議初學(xué)者開始的時(shí)候使用文本編輯器。
?
集成開發(fā)工具WebStorm
在實(shí)際的Web前端開發(fā)過程中，為了提高開發(fā)效率，可以借助某些集成開發(fā)環(huán)境，例如Web前端開發(fā)利器：WebStorm，這個(gè)名字就夠氣派的吧：Web風(fēng)暴。該集成開發(fā)工具是Intellij IDEA開發(fā)工具中的一個(gè)插件，Intellij IDEA開發(fā)工具是一個(gè)非常棒的Java開發(fā)環(huán)境。我們在后期的課程中將使用WebStorm進(jìn)行開發(fā)。
使用WebStorm將會(huì)體驗(yàn)到豐富的JS代碼提示功能。它不僅僅對(duì)JS代碼提供了豐富了提示，包括HTML、CSS提示也是非常全面的。
?
JavaScript幫助文檔
http://www.w3school.com.cn/?全球最大的中文?Web 技術(shù)教程。我們給大家提供的幫助文檔是w3shool的離線幫助文檔。
