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

時間 2019-11-06

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

原文原文鏈接

第一課初探JavaScript魅力-01

JavaScript是什麼

現在咱們打開一個大型的網站，都會有不少JS效果的功能和應用。對於學過CSS+HTML的同窗，即便是像淘寶那樣的網站，用一兩天時間也能夠將佈局寫出來。但對於一個網頁來講，除去CSS，HTML這樣描述靜態佈局的元素外，還有諸如彈窗，幻燈，編輯等很難用純粹的CSS+HTML實現的功能，而這些都是經過JavaScript來完成。css

那麼JavaScript到底是什麼呢？對比HTML+CSS這二者只能製做觀看難以交互（雖然能夠經過hover僞類進行交互但功能有限）的靜態網頁而言，咱們給Javascript進行以下定義：html

JavaScript是一門用於給網頁添加功能、交互的腳本語言。chrome

咱們以百度首頁登陸框爲例，實際上咱們打開百度首頁的時候，登陸框就已經包含在了網頁代碼中。在咱們點擊登陸以前，登陸框css的display屬性爲none；而當咱們點擊以後，其display屬性變爲了block，從而就顯示了出來——這個過程即是由JS控制的。淘寶的幻燈效果也是同理，咱們經過鼠標移動到不一樣的元素來改變元素的背景顏色(background-colr)和文字顏色(color)。小程序

第一個JS特效鼠標提示框

如上圖126郵箱十天免登錄的提示，當咱們將鼠標移動到框上時，會出現相應的文字提示，當鼠標移開時，對應的文字提示消失。咱們將模仿它寫一個鼠標提示框。該功能的具體實現是：當鼠標移入到框上的時候，讓該div顯示，鼠標移出框的時候，讓該div隱藏。瀏覽器

到這裏，不得不補充一個JS裏很是重要的一個概念：事件。這裏咱們以第一個JS事件：onclick事件爲例說明。安全

在html中包含如下代碼：函數

<input type="button" value="按鈕" />

這樣會相應生成一個按鈕，但點擊無效，由於按鈕自己並無任何功能，所以咱們要向按鈕增長onclick事件來實現功能。onclick事件所表明的含義是當元素被點擊時，該事件實現。佈局

將上方代碼改成：post

<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>