【JavaScript從入門到精通】第二課初探JavaScript魅力-02

時間 2019-11-06

標籤 javascript 入門精通第二初探魅力欄目 JavaScript 简体版

原文原文鏈接

第二課初探JavaScript魅力-02

變量

提及變量，咱們不得不提起咱們有一部比較古老的電視劇叫《包青天》。包青天有一把很是厲害的寶劍叫「尚方寶劍」，見到尚方寶劍有如見到皇帝。某種程度來講，變量具備相似於尚方寶劍的特性。javascript

咱們對第一課末的代碼進行以下修改：css

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')，就像尚方寶劍同樣。這樣的程序在功能上沒有發生變化，但代碼卻大幅度進行了簡化。html

函數的定義與調用

定義和調用是函數的兩個重要概念。咱們來看這麼一段簡單的JS代碼：java

function show()       
{                        //定義
  alert("abc");
}
show();            //調用

若是一個函數只有定義，而沒調用，不管如何刷新頁面，也沒有任何效果。就像法律雖然存在，但若是沒有人犯法，法律便如同不存在同樣。而若是一個函數只有調用而沒有定義，那麼函數也沒法執行，而且控制檯會出現函數沒有被定義的報錯。所以，想讓函數執行，函數的定義和調用缺一不可。瀏覽器

網頁換膚

不少網站都擁有網頁換膚這樣相似的方便功能，能夠經過點擊改變網頁的背景顏色或圖片等。ide

上圖爲hao123的網頁換膚功能，在點擊換膚後整個網頁全部元素的背景顏色都發生了改變。若是採用上節課的方式，咱們可能須要一個一個修改元素的背景顏色，操做量很是大，所以咱們有更簡單的方法來完成這件事。函數

本例經過外鏈樣式表來添加css，在外鏈樣式表中準備兩套不一樣的皮膚（即兩個不一樣的css文件）提供網頁變化。網站

css1的代碼以下：3d

body{
  background:black;
}
input{
  width:200px;
  height:100px;
  background:yellow;
}

css2的代碼以下：htm

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>