????本學(xué)期又進(jìn)入到了web前端開發(fā)的學(xué)習(xí)當(dāng)中，這一次我們接觸的是JavaScript骗绕，一種原則性不那么強(qiáng)的語言，雖然它不像java語言那么的規(guī)范嚴(yán)謹(jǐn)甚至連創(chuàng)造它的人都嫌棄這門語言但就是這樣一門“毫無原則”可言的一門輕量級(jí)腳本語言在之后的web發(fā)展中起到了一個(gè)里程碑一樣的作用(個(gè)人觀點(diǎn)).
先簡(jiǎn)單的回顧一下本學(xué)期“使用JS&jQuery改善用戶體驗(yàn)”這本書前五章告訴我們的內(nèi)容:
第一章《JavaScript基本語法》
第二章《JavaScript函數(shù)和事件》
第三章《javaScript瀏覽器對(duì)象》
第四章《javaScript對(duì)象》
第五章《指導(dǎo)學(xué)習(xí):JavaScript》
還是按照流程來一章一章的進(jìn)行總結(jié).
第一章:
1.1什么是javaScript?
![]()
image.png
????這是我在百度百科上找到的解釋，用我自己的理解就是JavaScript它是一門為了給原本HTML靜態(tài)的頁面增加一些動(dòng)態(tài)效果以及對(duì)HTML和CSS的一些標(biāo)簽元素進(jìn)行動(dòng)態(tài)的操作(刪除琴昆、修改、等)從而實(shí)現(xiàn)增加用戶的交互馆揉，控制瀏覽器以及動(dòng)態(tài)創(chuàng)建頁面等功能的一種輕量級(jí)腳本語言业舍，使用JavaScript我覺得還有一個(gè)最大的兩個(gè)好處1.是能夠規(guī)范化web開發(fā)的代碼，能夠使得代碼更加的清晰升酣，配合上必要的注釋使得代碼讓人更易理解2.解決了在更早些年帶寬并不那么好的時(shí)期舷暮，表單驗(yàn)證需要非常長(zhǎng)的緩沖時(shí)間的問題JavaScript在引入后很好的改善了這樣一個(gè)問題，實(shí)現(xiàn)了不通過服務(wù)器對(duì)網(wǎng)頁進(jìn)行一些簡(jiǎn)單的表單驗(yàn)證噩茄。這在很大程度上減輕了服務(wù)器端的壓力也讓用戶能夠更加及時(shí)的獲取到反饋信息下面。
1.2 JavaScript的成長(zhǎng)史。
1995年JavaScript誕生于網(wǎng)景公司的一名程序員手中绩聘，他的名字叫做布蘭登·艾奇沥割。
而在開發(fā)初期JavaScript并不叫這個(gè)名字耗啦，最初的名字叫做LiveScript，而當(dāng)時(shí)的網(wǎng)景公司（Netscape）為了蹭一波Java的熱度臨時(shí)把LiveScript改名為JavaScript机杜，所以從本質(zhì)上來說JavaScript和Java沒什么關(guān)系帜讲。
1997年7月，ECMAScript 1.0發(fā)布椒拗。
1998年6月似将，ECMAScript 2.0版發(fā)布。
1999年12月陡叠，ECMAScript 3.0版發(fā)布玩郊，成為JavaScript的通行標(biāo)準(zhǔn)，得到了廣泛支持枉阵。
2007年10月译红，ECMAScript 4.0版草案發(fā)布，對(duì)3.0版做了大幅升級(jí)兴溜，預(yù)計(jì)次年8月發(fā)布正式版本侦厚。草案發(fā)布后，由于4.0版的目標(biāo)過于激進(jìn)拙徽，各方對(duì)于是否通過這個(gè)標(biāo)準(zhǔn)媚赖，發(fā)生了嚴(yán)重分歧烈掠。以Yahoo、Microsoft、Google為首的大公司个唧，反對(duì)JavaScript的大幅升級(jí)俩檬，主張小幅改動(dòng)题画；以JavaScript創(chuàng)造者Brendan Eich為首的Mozilla公司祭隔，則堅(jiān)持當(dāng)前的草案。
2011年6月忘古，ECMAscript 5.1版發(fā)布徘禁，并且成為ISO國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。到了2012年底髓堪，所有主要瀏覽器都支持ECMAScript 5.1版的全部功能送朱。
2013年3月，ECMAScript 6草案凍結(jié)干旁，不再添加新功能驶沼。新的功能設(shè)想將被放到ECMAScript 7。
2013年12月争群，ECMAScript 6草案發(fā)布商乎。然后是12個(gè)月的討論期，聽取各方反饋祭阀。
2015年6月鹉戚，ECMAScript 6正式發(fā)布，并且更名為“ECMAScript 2015”专控。這是因?yàn)門C39委員會(huì)計(jì)劃抹凳，以后每年發(fā)布一個(gè)ECMAScirpt的版本，下一個(gè)版本在2016年發(fā)布伦腐，稱為“ECMAScript 2016”赢底。
除了ECMAScript的版本，很長(zhǎng)一段時(shí)間中柏蘑，Netscape公司（以及繼承它的Mozilla基金會(huì)）在內(nèi)部依然使用自己的版本號(hào)幸冻。這導(dǎo)致了JavaScript有自己不同于ECMAScript的版本號(hào)。1996年3月咳焚，Navigator 2.0內(nèi)置了JavaScript 1.0洽损。JavaScript 1.1版對(duì)應(yīng)ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0革半。JavaScript 1.5版完全兼容ECMAScript 3.0碑定。目前的JavaScript 1.8版完全兼容ECMAScript 5。
1.3 JavaScript的執(zhí)行原理
javaScript的執(zhí)行原理相比Java來說有一個(gè)很明顯的區(qū)別又官，那就是這么語言沒有編譯器延刘，也就是說它不需要被編譯，javaScript是由javascript引擎直接解釋執(zhí)行的六敬，從上至下依次讀取解析HTML或腳本代碼碘赖。
1.4 JavaScript腳本代碼
JavaScript腳本代碼作用嵌入HTML代碼中的方法有三種：
1.4.1 HTML文件混合方式
利用<script></script>這對(duì)標(biāo)簽直接嵌入在html頁面當(dāng)中例如
1.4.2 JS文件引用
在外部定義一個(gè)js文件對(duì)象:
在html代碼中引用:
效果圖:
1.4.3 HTML代碼嵌入方式
點(diǎn)擊圖中的a標(biāo)簽聯(lián)接將會(huì)跳轉(zhuǎn)：
1.5JavaScript語法
1.5.1 變量
JavaScript是一種弱類型的語言，它只有四種變量類型：1.數(shù)字 number 2.字符串 String 3.布爾值 booleam 4.數(shù)組 array
1.5.2 基本數(shù)據(jù)類型
javaScript 中的基本數(shù)據(jù)類型也只有五種:1.undefined 未定義類型 2. null 空類型 3.boolean 布爾值類型 4. number 數(shù)字類型 5.String 字符串類型
1.5.3 運(yùn)算符號(hào)
| 類型 | 運(yùn)算符 |
|---|---|
| 算數(shù)運(yùn)算符 | + - % / ++ -- |
| 賦值運(yùn)算符 | = += -= *= /= %= |
| 比較運(yùn)算符 | > < = >= <= == === != !== |
????JavaScript有四大類型的運(yùn)算符類型,除了這四大類之外還有三類 ：位運(yùn)算符外构、條件運(yùn)算符普泡、字符串運(yùn)算符
1.5.4 控制語句
因?yàn)閖avaScript是基于java而產(chǎn)生的一門腳本語言，所以在很多方面其實(shí)都是相通的典勇，就比如在控制語句方面你會(huì)發(fā)現(xiàn)其實(shí)和java基本一模一樣劫哼。
- while和do...while都能實(shí)現(xiàn)固定次數(shù)和不固定次數(shù)的循環(huán)，但是while和do...while更適合做不固定次數(shù)的循環(huán)割笙。
- while循環(huán)权烧，先進(jìn)行條件判斷，再做代碼的執(zhí)行伤溉。而do...while先執(zhí)行代碼般码，再做條件判斷。因此乱顾，do...while至少會(huì)執(zhí)行一次代碼
- for循環(huán)適用于固定次數(shù)的循環(huán)板祝。
- break和continue可以修改循環(huán)的執(zhí)行次序。
1.5.5 函數(shù)function
javaScript函數(shù)類似于java中的方法走净，它的函數(shù)聲明定義必須通過function關(guān)鍵字券时，具體語法如下
function name(參數(shù) 1, 參數(shù) 2, 參數(shù) 3) {
要執(zhí)行的代碼
}//其中name即代表函數(shù)名孤里，小括號(hào)中的便是形參
1.5.6 css樣式
js可以修改HTML頁面的中的元素，對(duì)元素進(jìn)行動(dòng)態(tài)的操作橘洞，并且也可以通過節(jié)點(diǎn)或者id名class名等找到指定對(duì)像并修改其css樣式.
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>上面的段落已被腳本改變捌袜。</p>
</body>
</html>
1.5.7 事件驅(qū)動(dòng)
javaScript事件驅(qū)動(dòng)原理：當(dāng)用戶在網(wǎng)頁客戶端點(diǎn)擊一個(gè)按鈕或者點(diǎn)擊某一個(gè)文本框，在鍵盤上敲擊某一個(gè)鍵時(shí)炸枣，這些過程便我們的事件源虏等，而被我們點(diǎn)擊的按鈕，文本框适肠，或者按鍵這些具體詳細(xì)的一些信息和值便是我們所說的事件對(duì)象霍衫，與java一樣當(dāng)javaScript引擎監(jiān)聽到這些事件發(fā)生時(shí)便會(huì)調(diào)用對(duì)應(yīng)的事件處理程序.
????而javaScript事件的類型大致我分為了一下四種:
- 鼠標(biāo)事件：
當(dāng)用戶在頁面上用鼠標(biāo)點(diǎn)擊頁面元素時(shí)，對(duì)應(yīng)的dom節(jié)點(diǎn)會(huì)觸發(fā)鼠標(biāo)事件侯养，主要有click敦跌、dblclick、mousedown沸毁、mouseout峰髓、mouseover、mouseup息尺、mousemove等携兵。 - 鍵盤事件：
當(dāng)用戶用鍵盤輸入信息時(shí)，會(huì)觸發(fā)鍵盤操作事件搂誉。主要包括keydown徐紧、keypress、keyup三個(gè)炭懊。 - HTML事件：
在html節(jié)點(diǎn)加載變更等相關(guān)的事件并级，比如window的onload、unload侮腹、abort嘲碧、error，文本框select父阻、change等等愈涩。 - 其它事件：
頁面中一些特殊對(duì)象運(yùn)行過程中產(chǎn)生的事件，比如xml http request對(duì)象的相關(guān)事件加矛。
當(dāng)我們給網(wǎng)頁的body部門添加一個(gè)寬和高履婉，我們事先在html代碼塊中定義標(biāo)簽然后添加對(duì)應(yīng)的事件，再在js代碼塊中創(chuàng)建監(jiān)聽此事件的處理函數(shù)斟览。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件</title>
<script type="text/javascript">
function test(e) {
window.alert("x = "+ e.clientX + " y =" + e.clientY);
}
</script>
</head>
<body style="width: 1000px; height: 800px; border: 1px solid red;" onmousedown="test(event)">
//給body添加一個(gè)寬高并添加onmousedown事件
</body>
</html>
1.5.8 表單驗(yàn)證
????在之前介紹JavaScript時(shí)毁腿，就有提到了js怎樣解決因帶寬問題，用戶不能及時(shí)接收反饋信息的這樣一個(gè)表單驗(yàn)證問題，js在用戶數(shù)據(jù)在傳送至服務(wù)端之前已烤，會(huì)通過自己的一些簡(jiǎn)單的邏輯判斷進(jìn)行先驗(yàn)證鸠窗，而這些邏輯判斷語句就與我們之前Java學(xué)習(xí)到的一樣，通過在腳本中嵌入邏輯驗(yàn)證語句來實(shí)現(xiàn)這樣一個(gè)驗(yàn)證胯究。例如我們驗(yàn)證一個(gè)Email郵箱塌鸯，我們只需要在Script代碼塊中創(chuàng)建這樣一個(gè)驗(yàn)證的函數(shù)，而在HTML頁面里找到我們需要用到驗(yàn)證文本框或者按鈕給它添加一個(gè)事件監(jiān)聽并且調(diào)用我們之前的方法唐片。
<html>
<head>
<script type="text/javascript">
//在Script代碼塊中實(shí)現(xiàn)具體的代碼操作并調(diào)用
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
