-
一直以來都想寫點(diǎn)編程語言和算法思想的學(xué)習(xí)筆記，只是，都被懶惰的自己找借口支開了，趁著在回家之前，我要好好總結(jié)自己這一年來學(xué)習(xí)編程（特別是前端開發(fā)）的所獲所得，要細(xì)到每個(gè)點(diǎn)，每個(gè)案例的代碼都要親手敲上去運(yùn)行，并記錄在筆記里，以便加深記憶和理解，同時(shí)也要積極借鑒和學(xué)習(xí)各個(gè)博客論壇大牛的筆記，將其汲取為自己的知識(shí)養(yǎng)分，廢話少說，開始?。。?/h5>
首先，在學(xué)習(xí)JS之前，你應(yīng)該掌握HTML和CSS3，它們是構(gòu)建一個(gè)網(wǎng)頁的基礎(chǔ)，只有熟練運(yùn)用它們，才能更深層次地去學(xué)習(xí)WEB開發(fā)，關(guān)于HTML和CSS3,我會(huì)在后續(xù)的時(shí)間內(nèi)再進(jìn)行更新。(笑，明明是學(xué)習(xí)筆記，為什么要寫用教程的口吻，哈哈，因?yàn)檫@樣更有帶入感嘛~)
學(xué)習(xí)完HTML和CSS3之后，我們只能做出一個(gè)靜態(tài)網(wǎng)頁，要真正要進(jìn)行前端開發(fā)，這是遠(yuǎn)遠(yuǎn)不夠的，我們還需要學(xué)習(xí)一門編程語言，JavaScript就是因WEB而產(chǎn)生的，關(guān)于JS的介紹，網(wǎng)上有很多，我翻閱了一些，
下面的三段，引用前端大牛阮一峰的《JavaScript 標(biāo)準(zhǔn)參考教程》的開篇：
JavaScript 是一種輕量級(jí)的腳本語言。所謂“腳本語言”，指的是它不具備開發(fā)操作系統(tǒng)的能力，而是只用來編寫控制其他大型應(yīng)用程序的“腳本”。
JavaScript 是一種嵌入式（embedded）語言。它本身提供的核心語法不算很多，只能用來做一些數(shù)學(xué)和邏輯運(yùn)算。JavaScript 本身不提供任何與 I/O（輸入/輸出）相關(guān)的 API，都要靠宿主環(huán)境（host）提供，所以 JavaScript 只合適嵌入更大型的應(yīng)用程序環(huán)境，去調(diào)用宿主環(huán)境提供的底層 API。
目前，已經(jīng)嵌入 JavaScript 的宿主環(huán)境有多種，最常見的環(huán)境就是瀏覽器，另外還有服務(wù)器環(huán)境，也就是 Node 項(xiàng)目。從語法角度看，JavaScript語言是一種“對(duì)象模型”語言。各種宿主環(huán)境通過這個(gè)模型，描述自己的功能和操作接口，從而通過 JavaScript 控制這些功能。但是，JavaScript 并不是純粹的“面向?qū)ο笳Z言”，還支持其他編程范式（比如函數(shù)式編程）。
通過這三句話，我們從概念上初步認(rèn)識(shí)了JS，在最開始學(xué)習(xí)JS的時(shí)候，我是這樣理解它的：JS，不就是給靜態(tài)網(wǎng)頁添加動(dòng)態(tài)效果和功能嘛，哈哈，其實(shí)在基礎(chǔ)學(xué)習(xí)階段，的確是這樣的，隨著后面的學(xué)習(xí)，JS也許會(huì)給我們帶來不一樣的東西，不過等到學(xué)到那個(gè)程度再說吧！
我們大家都有登錄郵箱的時(shí)候吧，在登錄上方有一個(gè)復(fù)選框（input元素的checkbox屬性） 右邊寫著十天內(nèi)免登錄,當(dāng)我們把鼠標(biāo)移上復(fù)選框的時(shí)候，會(huì)有文字提示：為了您的信息安全，不要在網(wǎng)吧等公眾場(chǎng)合勾選等等... 鼠標(biāo)移除后，文字又會(huì)消失：
我們的第一個(gè)示例代碼要實(shí)現(xiàn)的就是這個(gè)小功能，在這里我并沒有像我自己在本子上記筆記一樣，從JS的語法啊數(shù)據(jù)結(jié)構(gòu)講起，因?yàn)檫@樣未免顯得很枯燥，來看我的實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個(gè)JS特效</title>
<style type="text/css">
#err{
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px solid #ddd;
display: none;
}
</style>
</head>
<body>
郵箱:<input type="text"/><br/><br/>
密碼:<input type="password"/><br/><br/>
<input type="checkbox"
onmouseover="document.getElementById('err').style.display='block';"
onmouseout="document.getElementById('err').style.display='none';"/>
<span>十天內(nèi)免密登錄</span>
<div id="err">
為了您的信息安全,請(qǐng)不要在網(wǎng)吧等公眾場(chǎng)合使用該功能！
</div>
</body>
</html>
運(yùn)行結(jié)果:
來分析下，要實(shí)現(xiàn)這個(gè)功能，我們的思路是什么呢？思路是：
1.在復(fù)選框下事先布局好了一個(gè)div 并把提示文字寫好；
2.最開始的時(shí)候，我們還得讓div隱藏，這個(gè)用display:none；
3.然后鼠標(biāo)移上去就顯示，哈哈，是不是想到了，這個(gè)時(shí)候，讓display變成block不就可以了，答案就是如此；
4.然后鼠標(biāo)移除之后又變成display:none。
onmouseover="document.getElementById('err').style.display='block';"
onmouseout="document.getElementById('err').style.display='none';"
上面這2行加粗的代碼就使用了我們的JavaScript，我來稍作說明一下，onmouseover和onmouseout是JS里的內(nèi)置事件，所謂的事件，就是用戶或者瀏覽器對(duì)網(wǎng)頁進(jìn)行操作時(shí)的動(dòng)作，onmouseover是鼠標(biāo)移入，onmouseout是鼠標(biāo)移出，document.getElementById（'err'）這句話就是告訴瀏覽器我要操作一個(gè)id為err的html元素了，相當(dāng)于是一個(gè)儀式（也就是DOM操作，后續(xù)會(huì)講），至于.符號(hào)，它是一個(gè)從屬操作符（我自己瞎定義的），含義就是什么什么的,比如我的書，可以說成“我.書”,大概就是這個(gè)意思，至于=也就是賦值運(yùn)算符，意為把右邊的東西賦給左邊，這就是JS在HTML里的第一種使用方法，即元素行內(nèi)使用。
小節(jié)：感覺自己很廢話啊，希望看的人能夠聽懂把，下一節(jié)開始正式講JS的語法、變量和標(biāo)識(shí)符。
