文章配套視頻
寫(xiě)在開(kāi)頭
在學(xué)習(xí)JavaScript之前屹篓，我們需要對(duì)以下知識(shí)點(diǎn)有所了解：
編程語(yǔ)言
- 編程語(yǔ)言是人和計(jì)算機(jī)交流的工具抚芦，工程師通過(guò)編程語(yǔ)言基于計(jì)算機(jī)去開(kāi)發(fā)一款款軟件
- 編程語(yǔ)言就是一門(mén)語(yǔ)言附鸽，只不過(guò)語(yǔ)法比較特殊，我們得學(xué)習(xí)之后才能用這門(mén)語(yǔ)言來(lái)開(kāi)發(fā)相應(yīng)的東西
- 編程語(yǔ)言大致可以分為以下幾類(lèi)： 機(jī)器語(yǔ)言吞滞、匯編語(yǔ)言、高級(jí)語(yǔ)言
機(jī)器語(yǔ)言 000000101 000000010 000000000 匯編語(yǔ)言 MOV AX, 1 ADD AX, 1 高級(jí)語(yǔ)言 int a = 10 - JavaScript就是一門(mén)編程語(yǔ)言，屬于高級(jí)語(yǔ)言
JavaScript的誕生
1994 年品洛，網(wǎng)景公司（NetScape）發(fā)布了Navigator瀏覽器0.9版， 這是歷史上第一個(gè)比較成熟的瀏覽器摩桶，引起了廣泛關(guān)注桥状。但是，這個(gè)版本的瀏覽器只能用來(lái)瀏覽硝清，不具備與訪問(wèn)者互動(dòng)的能力辅斟。。芦拿。士飒。網(wǎng)景公司急需要一門(mén)網(wǎng)頁(yè)腳本語(yǔ)言查邢，使得瀏覽器可以與網(wǎng)頁(yè)進(jìn)行互動(dòng)。
1995年5月酵幕，網(wǎng)景公司做出決策扰藕，未來(lái)的網(wǎng)頁(yè)腳本語(yǔ)言必須"看上去與Java足夠相似"，但是比Java簡(jiǎn)單芳撒，使得非專(zhuān)業(yè)的網(wǎng)頁(yè)作者也能很快上手实胸。
1995年4月，網(wǎng)景公司錄用了34歲的系統(tǒng)程序員Brendan Eich, 他只用10天時(shí)間就把Javascript設(shè)計(jì)出來(lái)番官。
JavaScript語(yǔ)言的前世今生
- 1995.2月 Netscape公司發(fā)布LiveScript庐完，后臨時(shí)改為JavaScript，為了蹭上Java的熱浪徘熔。
- 歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA）英文名稱(chēng)是European Computer Manufacturers Association
- 1997 年门躯，以JavaScript 1.1 為基礎(chǔ)。由來(lái)自 Netscape酷师、Sun讶凉、微軟、Borland 和其他一些對(duì)腳本編程感興趣的公司的程序員組成的 TC39（ECMA的小組） 錘煉出了 ECMA-262山孔，也就是ECMAScript1.0懂讯。
- 1998年6月，ECMAScript 2.0版發(fā)布台颠。
- 1999年12月褐望，ECMAScript 3.0版發(fā)布，成為JavaScript的通行標(biāo)準(zhǔn)串前，得到了廣泛支持瘫里。
- 2007年10月，ECMAScript 4.0版草案發(fā)布：分歧太大荡碾，失敗告終谨读。
- 2009年12月，ECMAScript 5.0版正式發(fā)布
- 2015年6月17日坛吁，ECMAScript 6發(fā)布正式版本劳殖，即ECMAScript 2015。
- ...
JavaScript來(lái)源于借鑒
- 借鑒C語(yǔ)言的基本語(yǔ)法拨脉；
- 借鑒Java語(yǔ)言的數(shù)據(jù)類(lèi)型和內(nèi)存管理哆姻；
- 借鑒Scheme語(yǔ)言，將函數(shù)提升到"第一等公民"（first class）的地位女坑；
- 借鑒Self語(yǔ)言填具，使用基于原型（prototype）的繼承機(jī)制。
什么是JavaScript?
- JavaScript是一種腳本語(yǔ)言，其源代碼在發(fā)往客戶(hù)端運(yùn)行之前不需經(jīng)過(guò)編譯劳景，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行誉简。
解釋型語(yǔ)言：程序執(zhí)行之前，不需要編譯盟广，直接運(yùn)行時(shí)邊解析邊執(zhí)行的語(yǔ)言
編譯型語(yǔ)言：程序執(zhí)行之前闷串，需要一個(gè)專(zhuān)門(mén)的編譯過(guò)程，把程序編譯成為機(jī)器語(yǔ)言的文件筋量，比如exe文件
- 簡(jiǎn)單易用
可以使用任何文本編輯工具編寫(xiě)
只需要瀏覽器就可以執(zhí)行程序 - 解釋執(zhí)行（解釋語(yǔ)言）
事先不編譯
逐行執(zhí)行
無(wú)需進(jìn)行嚴(yán)格的變量聲明 - 基于對(duì)象
內(nèi)置大量現(xiàn)成對(duì)象烹吵，編寫(xiě)少量程序可以完成目標(biāo)
JavaScript的組成
- ECMAScript：JavaScript的語(yǔ)法標(biāo)準(zhǔn)
- ECMA是一個(gè)組織，即歐洲計(jì)算機(jī)制造商協(xié)會(huì)
- ECMAScript是ECMA制定的腳本語(yǔ)言的標(biāo)準(zhǔn), 規(guī)定了一種腳本語(yǔ)言實(shí)現(xiàn)應(yīng)該包含的基本內(nèi)容
- JavaScript是腳本語(yǔ)言的一種,所以JavaScript也必須遵守ECMAScript標(biāo)準(zhǔn),包含ECMAScript標(biāo)準(zhǔn)中規(guī)定的基本內(nèi)容
- DOM：JavaScript操作網(wǎng)頁(yè)上的元素的API
- BOM：JavaScript操作瀏覽器的部分功能的API
JavaScript的使用場(chǎng)景
- 隨著JavaScript這門(mén)語(yǔ)言的完善桨武，我們可以用它來(lái)進(jìn)行前端開(kāi)發(fā)肋拔、后端開(kāi)發(fā)和移動(dòng)端開(kāi)發(fā)。當(dāng)然呀酸，學(xué)習(xí)這門(mén)語(yǔ)言最開(kāi)始的突破口在于前端開(kāi)發(fā)凉蜂。我們一起看看在前端領(lǐng)域它能做什么吧！
- 客戶(hù)端數(shù)據(jù)計(jì)算
- 客戶(hù)端表單合法性驗(yàn)證
- 瀏覽器對(duì)象的調(diào)用
- 瀏覽器事件的觸發(fā)
- 網(wǎng)頁(yè)特殊顯示效果制作
- ....
JavaScript和HTML性誉、CSS的關(guān)系
- Html：是用來(lái)制作網(wǎng)頁(yè)窿吩，簡(jiǎn)單來(lái)說(shuō)就是編寫(xiě)網(wǎng)頁(yè)結(jié)構(gòu)
- CSS： 美化網(wǎng)頁(yè)（樣式）
- Javascript: 實(shí)現(xiàn)網(wǎng)頁(yè)與客戶(hù)之間互動(dòng)的橋梁，讓網(wǎng)頁(yè)具有豐富的生命力
JavaScript的語(yǔ)法規(guī)范
- JavaScript有三種書(shū)寫(xiě)格式, 分別是"行內(nèi)式"纫雁、"頁(yè)內(nèi)式"、"外鏈?zhǔn)?
-
行內(nèi)式
<button onclick="alert('今天天氣很好倾哺！');">今天天氣很好轧邪！</button> -
頁(yè)內(nèi)式
</body> ...... <script type="text/javascript"> alert("今天天氣很好！"); </script> </body>- 頁(yè)內(nèi)式注意點(diǎn)
<script></script>標(biāo)簽中的js代碼一半寫(xiě)在文檔的尾部悼粮；
網(wǎng)頁(yè)是從上至下加載, 而js代碼通常是給標(biāo)簽添加交互(操作元素), 所以需要先加載HTML, 否則如果執(zhí)行js代碼時(shí)HTML還未被加載, 那么js代碼將無(wú)法添加交互(操作元素);
HTML頁(yè)面中出現(xiàn)<script>標(biāo)簽后闲勺，就會(huì)讓頁(yè)面暫停等待腳本的解析和執(zhí)行。無(wú)論當(dāng)前腳本是內(nèi)嵌式還是外鏈?zhǔn)娇勖ǎ?yè)面的下載和渲染都必須停下來(lái)等待腳本的執(zhí)行完成才能繼續(xù)。所以如果把js代碼如果寫(xiě)在head中, 那么js代碼執(zhí)行完畢之前后續(xù)網(wǎng)頁(yè)無(wú)法被加載翘地。
- 頁(yè)內(nèi)式注意點(diǎn)
-
外鏈?zhǔn)礁袷?/p>
<script type="text/javascript" src="01-js書(shū)寫(xiě)格式.js"></script>- 外鏈?zhǔn)阶⒁恻c(diǎn)
外鏈?zhǔn)降膕cript代碼塊中不能編寫(xiě)js代碼, 即便寫(xiě)了也不會(huì)執(zhí)行
<script type="text/javascript" src="index.js"> alert("今天天氣很好申尤！"); // 不會(huì)被執(zhí)行 </script>- 由于每次加載外鏈?zhǔn)降膉s文件都會(huì)發(fā)送一次請(qǐng)求, 這樣非常消耗性能, 所以在企業(yè)開(kāi)發(fā)中推薦將多個(gè)JS文件打包成為一個(gè)JS文件,以提升網(wǎng)頁(yè)的性能和加載速度。
- 外鏈?zhǔn)阶⒁恻c(diǎn)
-
Javascript 初體驗(yàn)
-
使用JavaScript在網(wǎng)頁(yè)中輸出一句話(huà)
-
方式一
在網(wǎng)頁(yè)中彈出顯示框衙耕，顯示信息<script> alert("Hello昧穿，JavaScript！"); </script> -
方式二
在控制臺(tái)輸出消息橙喘，一般用來(lái)調(diào)試程序<script> console.log("Hello时鸵，JavaScript！"); console.warn("警告輸出！"); console.error("錯(cuò)誤輸出饰潜！"); </script> -
方式三
在網(wǎng)頁(yè)中彈出輸入框初坠，一般用于接收用戶(hù)輸入的信息<script> prompt("Hello，JavaScript彭雾！"); </script> -
方式四
在網(wǎng)頁(yè)中彈出提示框碟刺，顯示信息，該方法一般與if判斷語(yǔ)句結(jié)合使用<script> comfirm("Hello薯酝，JavaScript半沽！"); </script> -
注意事項(xiàng)
編寫(xiě)Javascript注意語(yǔ)法規(guī)范，一行代碼結(jié)束后必須在代碼最后加上;
如果不寫(xiě)分號(hào)吴菠，瀏覽器會(huì)自動(dòng)添加者填，但是會(huì)消耗一些系統(tǒng)資源；
此外做葵，容易加錯(cuò)分號(hào)占哟，所以在開(kāi)發(fā)中分號(hào)必須要寫(xiě)。-
在JavaScript中是嚴(yán)格區(qū)分大小寫(xiě)的
comfirm("Hello蜂挪，JavaScript重挑！"); // 正確 COMFIRM("Hello，JavaScript棠涮！"); // 錯(cuò)誤 -
JavaScript中會(huì)忽略多個(gè)空格和換行
console.log ( "Hello谬哀，JavaScript！" );
-
-
JavaScript中注釋語(yǔ)法
-
什么是注釋?zhuān)?/p>
- 注釋是就是注解严肪、解釋的意思史煎； 在JavaScript中它可以用來(lái)解釋某一段程序或者某一行代碼是什么意思，方便開(kāi)發(fā)者之間的交流驳糯；
- 注釋可以是任何文字篇梭，包括中文、英文和各種字符酝枢；
- 在開(kāi)發(fā)工具中注釋一般是灰色或者綠色
-
為什么要寫(xiě)注釋?zhuān)?/p>
- 方便自己恬偷，方便他人（便于檢查代碼，排除錯(cuò)誤）
-
如何寫(xiě)注釋?zhuān)?/p>
-
單行注釋
// 單行注釋 var name;使用范圍:任何地方都可以寫(xiě)注釋?zhuān)汉瘮?shù)外面帘睦、里面袍患，每一條語(yǔ)句后面
作用范圍: 從第二個(gè)斜線到這一行末尾
快捷鍵:Ctrl+/ -
多行注釋
/*多行注釋*/ var name;使用范圍:任何地方都可以寫(xiě)注釋?zhuān)汉瘮?shù)外面、里面竣付，每一條語(yǔ)句后面
作用范圍: 從第一個(gè)/到最近的一個(gè)/ 之間
-
-
注釋使用注意
- 單行注釋可以嵌套單行注釋诡延、多行注釋
// 北京
// 北京 // 南京
// /* 北京 */ - 多行注釋可以嵌套單行注釋
/*
// author：jack
// intro：It's good
*/ - 多行注釋不能嵌套多行注釋
- 單行注釋可以嵌套單行注釋诡延、多行注釋
-
