如題走馬觀花!
1.變數
有兩種定義方法
1)在為變數的第一次賦值時定義 如: name="姓名";
2)使用關鍵字var定義變數 如: var name=”姓名"; (推薦使用)
命名規則:
1)第一個字母必須是字母、底線、和貨幣符號。
2)其他的字母可以是底線、和貨幣符號或數字字元。
2.原始類型
有5種:Undefined 、Null、Boolean、Number和String。(可以使用typeof運算子來獲得一個變數的類型)
如:
Code:
- var sValue="字串";
- alert(typeof sValue); //輸出string
3.類型轉換
4.類和對象
同Java文法一樣,使用new關鍵字來建立對象。如建立一個數組對象:
Code:
- var array1=new Array();
- array1[0]="v1";
- array1[1]="v2";
if類的構造犯法沒有參數,也可以將括弧省略。
Code:
- var array2=new Array;
1)建立一個對象工廠函數來建立Student對象,代碼如下:
Code:
- function createStudent(id,name,sex){
- //建立對象
- var oStu=new Object;
- //定義屬性
- oStu.id=id;
- oStu.name=name;
- oStu.sex=sex;
- //定義方法
- oStu.display=function(){
- alert(this.name+"begin to study");
- }
- //返回一個對象。
- return oStu;
- }
- //====調用=======
- var oStu1=createStudent("34","楊龍",18);
- oStu1.display();
2)構造方法(類似Factory 方法)
Code:
- function display(){ //類似於全域函數
- alert(this.name+"begin to study js");
- }
- function Stu(id,name,sex){
- this.id=id;
- this.name=name;
- this.sex=sex;
- this.display=display;
- }
-
- var stu2=new Stu("19", "nothing",19);
- stu2.display();
-
3)原型方法
Code:
- //建立一個空的構造方法
- function Stu(){
- }
- //使用prototype為Stu添加屬性
- Stu.prototype.id="44";
- Stu.prototype.name="biao";
- Stu.prototype.sex="girl";
-
- Stu.prototype.display=function(){
- alert=(this.name+"begin to study js");
- }
- //使用原型的好處就是可以為已經存在的類添加新的成員。如
- Stu.prototype.lenB=function(){
- return this.replace(/[^/x0-/xf]/g,"##").length;
- }
-
===**********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:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>JavaScript Test01</title>
- <!-- 開始編寫JavaScript代碼(title之後) -->
-
- <script type="text/javascript">
- function showHead(){
- var oHtml=document.documentElement;//得到html對象
- var oHead=oHtml.firstChild;//得到Head對象
- alert(oHead.outerHTML);
- alert(oHead.innerHTML);
- }
- //顯示body的標籤內容
- function showBody(){
- var oHtml=document.documentElement;//得到html對象
- var oBody=oHtml.childNodes[1];//得到Head對象
- alert(oBody.outerHTML);
- alert(oBody.innerHTML);
- }
- </script>
-
- </head>
- <body>
- <input type="button" onclick="showHead()" value="顯示head標籤"/>
- <input type="button" onclick="showBody()" value="顯示body標籤"/>
- </body>
- </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:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>JavaScript getDom 2</title>
- <script type="text/javascript">
- setInterval("loadImage()",1000);//啟動定時器 3000毫秒
- var images=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];//指定影像檔名
- var i=0; //全域變數i 從第一個影像檔開始顯示
- function loadImage(){
- i++;
- if(i==5) i=0;
- var oImage=document.getElementById('image');//得到Img標籤
- var oLabel=document.getElementById('info');//得到Label標籤
-
- oImage.src='./images/'+images[i]; //為img標籤的屬性賦值
- oLabel.innerText=images[i]; //顯示 當前的影像檔名 插入第一張圖片名。
- }
- </script>
-
- </head>
- <body>
- 當前映像名:<label id="info"></label><p></p>
- <img src="./images/01.jpg" id="image" width="320" height="240"/>
-
- <script type="text/javascript">
- var oLabel=document.getElementById('info');
- //在初始化時顯示第一個影像檔
- oLabel.innerText=images[i];
- </script>
- </body>
- </html>
--Java web 開發大全