欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript的理解及經(jīng)典案例分析

 更新時(shí)間：2016年05月20日 09:31:20   投稿：jingxian  
下面小編就為大家?guī)硪黄猨avascript的理解及經(jīng)典案例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

js的簡介：

JavaScript是一種能讓你的網(wǎng)頁更加生動活潑的程式語言，也是目前網(wǎng)頁中設(shè)計(jì)中最容易學(xué)又最方便的語言。

你可以利用JavaScript輕易的做出親切的歡迎訊息、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡易的選舉，還可以顯示瀏覽器停留的時(shí)間。讓這些特殊效果提高網(wǎng)頁的可觀性。

javascript現(xiàn)在可以再網(wǎng)頁上做很多很多事情，網(wǎng)頁特效，操作dom，html5游戲（基于html5和JavaScript的結(jié)合），動畫等等特效，還可以實(shí)現(xiàn)拉去后臺數(shù)據(jù)（通過ajax）,不僅可以做前臺還可以做后臺，

比如node.js等等，再比如一些桌面引擎node-webkit可以將JavaScript渲染成桌面應(yīng)用，在比如unity3d可以使用JavaScript寫游戲（unity3d使用的JavaScript的語法，特性等等）

JavaScript語言的特點(diǎn)：

1）.JavaScript主要用來向HTML頁面中添加交互行為。

2）.JavaScript是一種腳本語言，語法和Java相似。

3）.JavaScript一般用來編寫客戶端的腳本。

4）.JavaScript是一種解釋型語言，邊執(zhí)行邊解釋。

JavaScript知識點(diǎn)解釋：

1、運(yùn)算符

運(yùn)算符就是完成操作的一系列符號，它有七類： 賦值運(yùn)算符、算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、條件運(yùn)算、位操作運(yùn)算符和字符串運(yùn)算符。

2、表達(dá)式

運(yùn)算符和操作數(shù)的組合稱為表達(dá)式，通常分為四類：賦值表達(dá)式、算術(shù)表達(dá)式、布爾表達(dá)式和字符串表達(dá)式。

3、語句

Javascript程序是由若干語句組成的，語句是編寫程序的指令。Javascript提供了完整的基本編程語句，它們是： if~else,賦值語句、switch選擇語句、while循環(huán)語句、for循環(huán)語句、do while循環(huán)語句、break循環(huán)中止語句和continue循環(huán)中斷語句。

注意：在判斷的時(shí)候，只有這幾種結(jié)果為false:即

如果邏輯對象無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN，那么對象的值為 false。否則，其值為 true（即使當(dāng)自變量為字符串 "false" 時(shí)）！

4、函數(shù)

函數(shù)是命名的語句段，這個語句段可以被當(dāng)作一個整體來引用不著和執(zhí)行。使用函數(shù)要注意以下幾點(diǎn)：

1）函數(shù)由關(guān)鍵字function定義；

2）函數(shù)必須先定義后使用，否則將出錯；

3）函數(shù)名是調(diào)用函數(shù)時(shí)引用的名稱，它對大小寫是敏感的，調(diào)用函數(shù)時(shí)不可寫錯函數(shù)名；

4）參數(shù)表示傳遞給函數(shù)使用或操作的值，它可以是常量，也可以是變量；

5）return語句用于返回表達(dá)式的值，也可以沒有。

5、對象

Javascript的一個重要功能就是基于對象的功能，通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)。 一組包含數(shù)據(jù)的屬性和對屬性中包含數(shù)據(jù)進(jìn)行操作的方法，稱為對象。比如要設(shè)定網(wǎng)頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的顏色為藍(lán)色。

6、事件

用戶與網(wǎng)頁交互時(shí)產(chǎn)生的操作，稱為事件。絕大部分事都由用戶的動作所引發(fā)，如：用戶按鼠標(biāo)的按鍵，就產(chǎn)生onclick事件，若鼠標(biāo)的指針在鏈接上移動，就產(chǎn)生onmouseover事件等等。在Javascript中，事件往往與事件處理程序配套使用。

7、變量

如 var myVariable = "some value";

經(jīng)典案例：

js抽獎

包含的知識點(diǎn)：計(jì)時(shí)器的使用，document對象的方法的使用，js數(shù)組的使用，js內(nèi)置對象的使用，js系統(tǒng)函數(shù)的使用，注冊事件。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"
    var alldataarr = alldata.split(",");
    var num = alldataarr.length - 1;
    var timer;   
    function start() {
      clearInterval(timer);h
      timer = setInterval('change()', 10);
    }
    function change() {
      document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
    }
    function GetRnd(min, max) {
      return parseInt(Math.random() * (max - min + 1));
    }   
    function ok() {
      clearInterval(timer);
      document.getElementById("showresult").value = document.getElementById("oknum").innerText;
    }   
</script> 
</head>
<body>
 
<div id="oknum" name="oknum" >請單擊開始</div> 
  <button onclick="start()" accesskey="s">開始</button>  <!--//accesskey 屬性規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵。-->
<button onclick="ok()" accesskey="o">停止</button> 
您的選擇是： 
<input type="text" id="showresult" value=""/>
</body>
</html

背景圖片的切換

包含的知識點(diǎn)：計(jì)時(shí)器的使用，document對象的方法的使用

<script type="text/javascript">
        window.onload = function () {
      
      setInterval(step, 1000);
    }
    var num = 1;
    function step() {
      if (num < 5) {
        num++;
      } else {
        num = 1;
      }
      var dom = document.getElementById("imgId");
      //更改它images的src屬性
      dom.src = 'images/' + num + '.jpg';
    }
   
  </script>
</head>
<body>
  <img src="images/1.jpg" width="500" height="500" id="imgId"/>
</body>
</html>

跑馬燈：

包含的知識點(diǎn)：計(jì)時(shí)器的使用，document對象的方法的使用，系統(tǒng)函數(shù)的使用，鼠標(biāo)事件的使用，節(jié)點(diǎn)操作的使用，循環(huán)語句，判斷語句

<script src="js/jquery-1.8.3.min.js"></script>
  <script type="text/JavaScript">     
    ( function ($) {
      $.fn.extend({
        RollTitle: function (opt, callback) {
          if (!opt) var opt = {};
          var _this = this;
          _this.timer = null;
          _this.lineH = _this.find("li:first").height();
          _this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10);
          _this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000, 
          _this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000; 
          if (_this.line == 0) this.line = 1;
          _this.upHeight = 0 - _this.line * _this.lineH;
          _this.scrollUp = function () {
            _this.animate({
              marginTop: _this.upHeight
            }, _this.speed, function () {
              for (i = 1; i <= _this.line; i++) {
                _this.find("li:first").appendTo(_this);
              }
              _this.css({ marginTop: 0 });
            });
          }
          _this.hover(function () {
            clearInterval(_this.timer);
          }, function () {
            _this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan);
          }).mouseout();
        }
      })})(jQuery);
</script>
</head>
<body>
  <ul id="RunTopic" style="list-style:none ;background:#0ff ;border:2px dashed blue;width:100px;" >
<li style="color:red">i love you</li>
<li style="color:pink">I LOVE YOU</li>
<li style="color:blue">I LOVE you</li>
<li style="color:green">i LOVE YOU</li>
<li style="color:yellowgreen">I love YOU</li>
</ul>
<br/>
<input  type="button" onclick="test();" value="跑馬燈" >
   <script type="text/javascript">
     function test()
     {
       $("#RunTopic").find("li:first").appendTo($("#RunTopic"));
     }    
</script> 
</body>
</html>

javascript的一番理解，就到這了，以后有關(guān)于js的案例會放到這里。希望能幫到大家！??！

以上這篇javascript的理解及經(jīng)典案例分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論