JavaScript走馬觀花記(一)

來源:互聯網
上載者:User

  如題走馬觀花!

1.變數
有兩種定義方法
1)在為變數的第一次賦值時定義     如: name="姓名";
2)使用關鍵字var定義變數             如:  var name=”姓名";  (推薦使用)
   命名規則:
        1)第一個字母必須是字母、底線、和貨幣符號。
        2)其他的字母可以是底線、和貨幣符號或數字字元。
2.原始類型
   有5種:Undefined 、Null、Boolean、Number和String。(可以使用typeof運算子來獲得一個變數的類型)
   如: 

Code:
  1. var sValue="字串";     
  2.  alert(typeof sValue);   //輸出string   

3.類型轉換

4.類和對象
     同Java文法一樣,使用new關鍵字來建立對象。如建立一個數組對象:

Code:
  1. var array1=new Array();   
  2. array1[0]="v1";   
  3. array1[1]="v2";  


   if類的構造犯法沒有參數,也可以將括弧省略。

Code:
  1. var array2=new Array;  

   1)建立一個對象工廠函數來建立Student對象,代碼如下:

Code:
  1.   function createStudent(id,name,sex){   
  2. //建立對象   
  3. var oStu=new Object;   
  4. //定義屬性   
  5. oStu.id=id;   
  6. oStu.name=name;   
  7. oStu.sex=sex;   
  8. //定義方法   
  9. oStu.display=function(){   
  10.  alert(this.name+"begin to study");   
  11. }   
  12. //返回一個對象。   
  13. return oStu;   
  14.   }   
  15. //====調用=======   
  16. var oStu1=createStudent("34","楊龍",18);   
  17. oStu1.display();  

  2)構造方法(類似Factory 方法)
     

Code:
  1. function display(){  //類似於全域函數   
  2. alert(this.name+"begin to study js");   
  3. }   
  4.  function Stu(id,name,sex){   
  5. this.id=id;   
  6. this.name=name;   
  7. this.sex=sex;   
  8. this.display=display;   
  9. }   
  10.   
  11. var stu2=new Stu("19", "nothing",19);   
  12. stu2.display();   
  13.   

  3)原型方法

Code:
  1. //建立一個空的構造方法   
  2. function Stu(){   
  3. }   
  4. //使用prototype為Stu添加屬性   
  5. Stu.prototype.id="44";   
  6. Stu.prototype.name="biao";   
  7. Stu.prototype.sex="girl";   
  8.   
  9. Stu.prototype.display=function(){   
  10. alert=(this.name+"begin to study js");   
  11. }   
  12. //使用原型的好處就是可以為已經存在的類添加新的成員。如   
  13. Stu.prototype.lenB=function(){   
  14. return this.replace(/[^/x0-/xf]/g,"##").length;   
  15. }   
  16.   

===**********JavaScript進階技術**********===
1.DOM技術概述
   DOM是為了方便處理層次型文檔(如XML、HTML)的一種技術。DOM還提供了一套API,使開發人員可以用物件導向的方式來處理這些文檔。對於XML文檔來說,有專門處理XML文檔的XML DOM,但是下面所說的DOM值得是HTML DOM。
     DOM主要的功能是獲得HTML教程語言中的各個元素(如div、form)等,從而可以很容易地獲得這些元素的資訊,或動態向這些元素中添加新的元素。
     操作DOM的對象實際上也需要使用Javascript,也就是說調用DOM API也要編寫JavaScript代碼。
     在JavaScript中描述DOM的對象是document,其實document不僅是HTML DOM,它也是XML DOM。
    如果要直接操作HTML文檔,可以用documentElement屬性。代碼如:
var oHtml=document.documentElement;//獲得html對象

執行個體:

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3.     <head>   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5.         <title>JavaScript Test01</title>   
  6.         <!-- 開始編寫JavaScript代碼(title之後) -->   
  7.            
  8.         <script type="text/javascript">   
  9.         function showHead(){   
  10.          var oHtml=document.documentElement;//得到html對象   
  11.          var oHead=oHtml.firstChild;//得到Head對象   
  12.          alert(oHead.outerHTML);   
  13.          alert(oHead.innerHTML);   
  14.         }   
  15.           //顯示body的標籤內容   
  16.          function showBody(){   
  17.          var oHtml=document.documentElement;//得到html對象   
  18.          var oBody=oHtml.childNodes[1];//得到Head對象   
  19.          alert(oBody.outerHTML);   
  20.          alert(oBody.innerHTML);   
  21.         }   
  22.         </script>   
  23.            
  24.     </head>   
  25.     <body>   
  26.           <input type="button" onclick="showHead()" value="顯示head標籤"/>   
  27.           <input type="button" onclick="showBody()" value="顯示body標籤"/>   
  28.     </body>   
  29. </html>  


2.獲得html元素的3種方法
 在DOM中有3種方法可以獲得當前html文檔中的任意一個html元素,實際上也就是html document的3個方法:
   getElementById:id屬性值是唯一的
   getElementByName:name的屬性值不唯一。for(var i=0;i<otests.length;i++)遍曆
   getElementByTagName:獲得HTML元素的範圍最大

執行個體:映像自動切換

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3.     <head>   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5.         <title>JavaScript getDom 2</title>   
  6.         <script type="text/javascript">   
  7.          setInterval("loadImage()",1000);//啟動定時器  3000毫秒   
  8.          var images=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];//指定影像檔名   
  9.          var i=0; //全域變數i  從第一個影像檔開始顯示   
  10.           function loadImage(){   
  11.            i++;   
  12.            if(i==5) i=0;   
  13.            var oImage=document.getElementById('image');//得到Img標籤   
  14.            var oLabel=document.getElementById('info');//得到Label標籤   
  15.               
  16.            oImage.src='./images/'+images[i]; //為img標籤的屬性賦值   
  17.            oLabel.innerText=images[i]; //顯示 當前的影像檔名  插入第一張圖片名。   
  18.           }   
  19.         </script>   
  20.   
  21.     </head>   
  22.     <body>   
  23.         當前映像名:<label id="info"></label><p></p>   
  24.         <img src="./images/01.jpg" id="image" width="320" height="240"/>   
  25.            
  26.         <script type="text/javascript">   
  27.         var oLabel=document.getElementById('info');   
  28.         //在初始化時顯示第一個影像檔   
  29.         oLabel.innerText=images[i];   
  30.         </script>   
  31.     </body>   
  32. </html>  

                                                                                          --Java web 開發大全

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.