【JavaScript從入門到精通】第二課 初探JavaScript魅力-02
第二課 初探JavaScript魅力-02
變量
說起變量，我們不得不提起我們有一部比較古老的電視劇叫《包青天》。包青天有一把非常厲害的寶劍叫“尚方寶劍”，見到尚方寶劍有如見到皇帝。某種程度來說，變量具有類似于尚方寶劍的特性。
我們對第一課末的代碼進行如下修改：
function toGreen()
{
var oDiv=document.getElementById('div1'); //變量
oDiv.style.width='300px';
oDiv.style.height='300px';
oDiv.style.background='green';
}
我們用var對變量進行定義，告訴計算機我接下來要寫的是一個變量,oDiv是變量的名字，我們用oDiv這個變量把document.getElementById('div1')的值存起來（我們可以簡單理解為變量是給一個東西取了個別名），那么在這個函數里凡是見到Div的地方便如同見到document.getElementById('div1')，就像尚方寶劍一樣。這樣的程序在功能上沒有發生變化，但代碼卻大幅度進行了簡化。
函數的定義與調用
定義和調用是函數的兩個重要概念。 我們來看這么一段簡單的JS代碼：
function show()
{ //定義
alert("abc");
}
show(); //調用
如果一個函數只有定義，而沒調用，無論如何刷新頁面，也沒有任何效果。就像法律雖然存在，但如果沒有人犯法，法律便如同不存在一樣。而如果一個函數只有調用而沒有定義，那么函數也無法執行，并且控制臺會出現函數沒有被定義的報錯。因此，想讓函數執行，函數的定義和調用缺一不可。
網頁換膚
很多網站都擁有網頁換膚這樣類似的方便功能，可以通過點擊改變網頁的背景顏色或圖片等。
上圖為hao123的網頁換膚功能，在點擊換膚后整個網頁所有元素的背景顏色都發生了改變。如果采用上節課的方式，我們可能需要一個一個修改元素的背景顏色，操作量非常大，因此我們有更簡單的方法來完成這件事。
本例通過外鏈樣式表來添加css，在外鏈樣式表中準備兩套不同的皮膚（即兩個不同的css文件）提供網頁變化。
css1的代碼如下：
body{
background:black;
}
input{
width:200px;
height:100px;
background:yellow;
}
css2的代碼如下：
body{
background:#ccc;
}
input{
width:100px;
height:50px;
background:red;
}
在HTML代碼中，我們通過更改link的href屬性便可以加載不同的css文件，所以其實換膚本質上就是更改外鏈的css文件。為了達成這個目的，我們需要操作HTML里的link標簽。同時為了選中link標簽，我們需要給給link標簽加上id并在js函數里用getElementById方法選中，這樣就可以對其href屬性進行操作了。
完整代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />
<script>
function skin1()
{
var oL=document.getElementById('l1');
oL.href='css1.css';
}
function skin2()
{
var oL=document.getElementById('l1');
oL.href='css2.css';
}
</script>
</head>
<body>
<input type="button" value="皮膚1" onclick="skin1()" />
<input type="button" value="皮膚2" onclick="skin2()" />
</body>
</html>
點擊皮膚1和皮膚2就可以對網頁進行換膚啦。
從這個例子里，我們學到以下幾點：
- 任何標簽都可以加id，例如本例的link可以，甚至連body，html也可以。
- 任何標簽的任何屬性都可以通過JS進行修改。
- HTML里的屬性名和JS里保持一致，HTML里面怎么寫，VALUE里面就怎么寫。
if判斷
if語句在JS里用于判斷，其基本格式為
if(條件){
語句1
}
else{
語句2
}
其中else不是必要的。整個語句代表的含義為，如果條件成立，則執行語句1，如果條件不成立，則執行語句2。舉一個生活中最簡單的小例子，如果天氣預報有雨，我們則帶傘，如果不下雨，則不帶傘。這個例子用if語句的話描述如下：
if(預報有雨){
帶傘
}
else{
不帶傘
}
那么if語句在JavaScript里面應該怎么應用呢？我們再舉一個網頁的小例子。
Google上方菜單欄的“更多”選項，當我們點擊的時候，會展開一個菜單欄，再次點擊的時候會收回。這個非常常用的功能就是用if語句完成的。和onmouseout和onmouseover不同，雖然我們每次進行的都是點擊操作，但根據菜單欄展開狀態的不同，每次點擊產生的效果也就不一樣。當菜單欄處于顯示狀態的時候，進行點擊的操作是讓菜單欄隱藏；反之，當菜單欄處于隱藏狀態時，進行點擊的操作是讓菜單欄顯示。用一句簡單的話來描述我們需要干的事情就是：當點擊的時候，如果div是顯示的，將其隱藏掉（將其display屬性改為none）；反之，將其顯示出來（將其display屬性改為block）。
因此，我們可以用if語句進行表達：
if(div是顯示的){
oDiv.style.display='none';
}
else{
oDiv.style.display='block';
}
完整代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:100px; height:200px; background:#CCC; display:none;}
</style>
<script>
function showHide()
{
var oDiv=document.getElementById('div1');
if(oDiv.style.display=='block')
{
oDiv.style.display='none';
}
else
{
oDiv.style.display='block';
}
}
</script>
</head>
<body>
<input type="button" value="顯示隱藏" onclick="showHide()" />
<div id="div1">
</div>
</body>
</html>
效果如下：
這里出現了一個新的符號，==(雙等號)。我們之前講過，在JS里=代表賦值（改變），而雙等號則更接近于數學中的等號，其作用是判斷兩邊是否相等。在本例中，oDiv.style.display=='block'即代表對display的值是否為block進行判斷，如果成立則代表div1是顯示的狀態，執行if語句將其隱藏；反之不成立則代表div1是隱藏狀態，執行else語句將其顯示。
為a鏈接添加JS
HTML中的a鏈接大家應該再熟悉不過了，但是大家知道，a鏈接也是可以添加JS的嗎？通常情況下，我們在a標簽的href屬性里放的值是網址，不過實際上也可以在里面放入JS函數執行。
<a href="javascript:alert('a');">鏈接</a>
使用上述代碼，點擊鏈接同樣可以執行JS函數。冒號前的javascript可以告訴瀏覽器，我們要執行的不是網址而是JS代碼，冒號后的則是執行內容。
不過，一般來講，我們都不會真的在a標簽里放JS代碼，而是讓它空著：
<a href="javascript:;">鏈接</a>
這樣做的目的有兩個。首先，在a標簽里面放代碼非常不好，這一點我們學到事件的時候就會明白。其次，這種寫法比起在href屬性中使用#有一個優勢：點擊后沒有反應，不會直接跳到網頁的頂部。
例外的className
在網頁換膚的時候我們講過，HTML里的屬性名和JS里保持一致，HTML里面怎么寫，VALUE里面就怎么寫——唯一的例外就是className。因為JS里的class是保留字，在JS里有其他作用，如果我們在JS里直接使用HTML里的class屬性，程序是不會執行的，所以JS用className代替了class。當我們想改變一個元素的class時，采用以下寫法：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {
width:100px;
height:100px; border:
1px solid black;
}
.box {
background:red;
}
</style>
<script>
function toRed()
{
var oDiv=document.getElementById('div1');
oDiv.className='box'; //className,而不是class
}
</script>
</head>
<body>
<input type="button" value="變紅" onclick="toRed()" />
<div id="div1">
</div>
</body>
</html>
浙公網安備 33010602011771號