第一課 初探JavaScript魅力-01
JavaScript是什么
如今我們打開一個大型的網站，都會有很多JS效果的功能和應用。對于學過CSS+HTML的同學，即使是像淘寶那樣的網站，用一兩天時間也可以將布局寫出來。但對于一個網頁來說，除去CSS，HTML這樣描述靜態布局的元素外，還有諸如彈窗，幻燈，編輯等很難用純粹的CSS+HTML實現的功能，而這些都是通過JavaScript來完成。
那么JavaScript究竟是什么呢？對比HTML+CSS這兩者只能制作觀看難以交互（雖然可以通過hover偽類進行交互但功能有限）的靜態網頁而言，我們給Javascript進行如下定義：
JavaScript是一門用于給網頁添加功能、交互的腳本語言。
我們以百度首頁登錄框為例，實際上我們打開百度首頁的時候，登錄框就已經包含在了網頁代碼中。在我們點擊登錄之前，登錄框css的display屬性為none；而當我們點擊之后，其display屬性變為了block，從而就顯示了出來——這個過程便是由JS控制的。淘寶的幻燈效果也是同理，我們通過鼠標移動到不同的元素來改變元素的背景顏色(background-colr)和文字顏色(color)。
第一個JS特效 鼠標提示框
如上圖126郵箱十天免登陸的提示，當我們將鼠標移動到框上時，會出現相應的文字提示，當鼠標移開時，對應的文字提示消失。我們將模仿它寫一個鼠標提示框。該功能的具體實現是：當鼠標移入到框上的時候，讓該div顯示，鼠標移出框的時候，讓該div隱藏。
到這里，不得不補充一個JS里非常重要的一個概念：事件。這里我們以第一個JS事件：onclick事件為例說明。
在html中包含以下代碼：
<input type="button" value="按鈕" />
這樣會相應生成一個按鈕，但點擊無效，因為按鈕本身并沒有任何功能，因此我們要向按鈕增加onclick事件來實現功能。onclick事件所代表的含義是當元素被點擊時，該事件實現。
將上方代碼改為：
<input type="button" value="按鈕" onclick="alert('zcvzxcvzx')"/>
當我們再點擊按鈕時，便會激活onclick事件，彈出彈框。
簡單來說，事件就是用戶的操作。用戶操作分為很多，對于按鈕來說有點擊，以及我們待會會用到的鼠標移入，鼠標移出等等。將來我們會遇到更多的事件，這里不再贅述，以后慢慢說。
回到我們的第一個JS特效中來。為了實現：鼠標移入到checkbox的時候，讓div顯示，鼠標移出checkbox的時候，讓div隱藏這樣的效果，我們引入兩個新的事件：onmouseover和onmouseout。如果你懂英文的話，很容易就明白，前者是指鼠標移入元素時觸發的事件，后者是鼠標移開元素時觸發的事件。
現在我們來分析，如何讓鼠標移入到input的時候，讓div1顯示呢？其實就是當鼠標移入到input上時，將其display屬性改為block。那么，這句話應該如何用JS來寫呢？答案是這樣的：
<input type="checkbox" onmouseover="div1.style.display='block';"/>
<div id="div1">
為了您的信息安全。。。。
</div>
我們將div1.style.display='block'這句話拿出來仔細分析。首先，div1是div的id，代表了選擇了該div。其次，.代表的是什么含義呢？.類似于漢語的“的”，表示所屬關系。等號在JS里并不是相等的意思，而是賦值（把等號右邊的東西賦給左邊）。所以這句話的意思就是div1的style（樣式）里的display屬性賦值為block。因此，當我們將鼠標移動到checkbox上后，便會觸發onmouserover事件，將div1顯示出來。同理，通過onmouseout事件可以在鼠標離開時將div1隱藏。
完整的代碼如下：
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
#div1{
width:200px;
height: 100px;
background: #CCC;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';" />
<div id="div1">
為了您的信息安全。。。。
</div>
</body>
</html>
實現的效果如下：
不兼容問題
我們已經學會了寫一個最簡單的JS小程序，但它存在一些小問題。在chrome和IE瀏覽器下，它能很好地運行，但如果使用火狐瀏覽器，你會驚訝的發現程序沒有反應。在錯誤控制臺中我們可以看到，錯誤提示為“div1 is not defined”，即div1沒有被定義。
你或許會覺得奇怪，為什么說div1沒有被定義呢？原因是在JS里，直接使用ID進行元素選擇是不兼容的（火狐或者低版本的chrome），我們應該采用更加兼容的寫法：document.getElementById()。
因此我們可以將上面的代碼進行改寫：
<input type="checkbox" onmouseover="getElementById('div1').style.display='block';" onmouseout="getElementById('div1').style.display='none';" />
getElementById的意思是通過id來獲取元素，在本例中即通過getElementById獲取了div1的元素來使用，這樣在任何瀏覽器下都不會產生兼容性問題了。
初識函數
提起函數大家想到的應該首先是數學里的函數，不過JS里的函數和數學函數的關系并不是很大。我們用一個簡單的小東西來闡述什么是JS里的函數。
現在我們向網頁添加一個框，其寬為200px，高也為200px，背景為紅色。同時我們希望當我們的鼠標移動到框上時，其寬高變為300px，背景變為綠色。利用我們前面所學到的知識我們可以解決這個問題，代碼如下：
<html>
<head>
<meta charset="utf-8" />
<title>
無標題文檔
</title>
<style>
#div1{
width:200px;
height: 200px;
background: red;
}9
</style>
</head>
<body>
<div id="div1" onmouseover="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='green';"onmouseout="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='red';">
</div>
</body>
</html>
實現的效果如下：
顯而易見的是，雖然完成了功能，但這樣的代碼無論編寫還是查看都太惡心了。還記得，我們寫css很少把這么多的樣式寫在行間而是選擇寫在樣式表里，JS也同樣，通常可以通過函數的方式將代碼簡潔化。
JS的函數的最基本格式為：function+函數名+(){},()內為參數(可以不寫，暫時不用管)，{}內為函數體。
因此，我們通過函數將上方的代碼進行改造：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {
width:200px;
height:200px;
background:red;
}
</style>
<script>
function toGreen()
{
document.getElementById('div1').style.width='300px';
document.getElementById('div1').style.height='300px';
document.getElementById('div1').style.background='green';
}
function toRed()
{
document.getElementById('div1').style.width='200px';
document.getElementById('div1').style.height='200px';
document.getElementById('div1').style.background='red';
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
</div>
</body>
</html>
文章列表
留言列表
