前端之JS（二）

標籤：計算   toolbar   一段   數組排序   停止   cep   ddc   術語   時區   

Array對象1 數組建立

建立數組的三種方式：

建立方式1:var arrname = [元素0,元素1,….];          // var arr=[1,2,3];建立方式2:var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);建立方式3:var arrname = new Array(長度);             //  初始化數組對象:                var cnweek=new Array(7);                    cnweek[0]="星期日";                    cnweek[1]="星期一";                    ...                    cnweek[6]="星期六";

建立二維數組：

var cnweek=new Array(7);for (var i=0;i<=6;i++){    cnweek[i]=new Array(2);}cnweek[0][0]="星期日";cnweek[0][1]="Sunday";cnweek[1][0]="星期一";cnweek[1][1]="Monday";...cnweek[6][0]="星期六";cnweek[6][1]="Saturday";

View Code2 數組對象的屬性和方法

join方法：

x.join(bystr)       －－－－將數組元素拼接成字串                            var arr1=[1, 2, 3, 4, 5, 6, 7];                var str1=arr1.join("-");                alert(str1);  //結果為"1-2-3-4-5-6-7" 

View Code

concat方法：

x.concat(value,...)    －－－－                    var a = [1,2,3];                  var b=a.concat(4,5) ;                  alert(a.toString());  //返回結果為1,2,3                              alert(b.toString());  //返回結果為1,2,3,4,5

View Code

數組排序-reverse sort：

//x.reverse()//x.sort()var arr1=[32, 12, 111, 444];//var arr1=["a","d","f","c"];arr1.reverse(); //顛倒數組元素alert(arr1.toString());//結果為444,111,12,32arr1.sort();    //排序數組元素alert(arr1.toString());//結果為111,12,32,444//------------------------------arr=[1,5,2,100];//arr.sort();//alert(arr);//如果就想按著數字比較呢?function intSort(a,b){    if (a>b){        return 1;//-1    }    else if(a<b){        return -1;//1    }    else {        return 0    }}arr.sort(intSort);alert(arr);function IntSort(a,b){    return a-b;}

View Code

數組切片操作：

//x.slice(start, end)////使用註解////x代表數組對象//start表示開始位置索引//end是結束位置下一數組元素索引編號//第一個數組元素索引為0//start、end可為負數，-1代表最後一個數組元素//end省略則相當於從start位置截取以後所有數組元素var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘];var arr2=arr1.slice(2,4);var arr3=arr1.slice(4);var arr4=arr1.slice(2,-1);alert(arr2.toString());//結果為"c,d" alert(arr3.toString());//結果為"e,f,g,h"alert(arr4.toString());//結果為"c,d,e,f,g"

View Code

刪除子數組：

//x. splice(start, deleteCount, value, ...)//使用註解//x代表數組對象//splice的主要用途是對數組指定位置進行刪除和插入//start表示開始位置索引//deleteCount刪除數組元素的個數//value表示在刪除位元置插入的數組元素//value參數可以省略               var a = [1,2,3,4,5,6,7,8];a.splice(1,2);alert(a.toString());//a變為 [1,4,5,6,7,8]a.splice(1,1);alert(a.toString());//a變為[1,5,6,7,8]a.splice(1,0,2,3);alert(a.toString());//a變為[1,2,3,5,6,7,8]

View Code

數組的push和pop：

//push pop這兩個方法類比的是一個棧操作//x.push(value, ...)  壓棧//x.pop()             彈棧      //使用註解////x代表數組對象//value可以為字串、數字、數組等任何值//push是將value值添加到數組x的結尾//pop是將數組x的最後一個元素刪除var arr1=[1,2,3];arr1.push(4,5);alert(arr1);//結果為"1,2,3,4,5"arr1.push([6,7]);alert(arr1)//結果為"1,2,3,4,5,6,7"arr1.pop();alert(arr1);//結果為"1,2,3,4,5"

View Code

數組的shift和unshift：

//x.unshift(value,...)//x.shift()//使用註解//x代表數組對象//value可以為字串、數字、數組等任何值//unshift是將value值插入到數組x的開始//shift是將數組x的第一個元素刪除var arr1=[1,2,3];arr1.unshift(4,5);alert(arr1);  //結果為"4,5,1,2,3"arr1. unshift([6,7]);alert(arr1);  //結果為"6,7,4,5,1,2,3"arr1.shift();alert(arr1);  //結果為"4,5,1,2,3"

View Code

總結js的數組特性：

//  js中數組的特性         //java中數組的特性,  規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.         //js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制.         //js中的數組特性2: js中的數組,長度是隨著下標變化的.用到多長就有多長.         var arr5 = [‘abc‘,123,1.14,true,null,undefined,new String(‘1213‘),new Function(‘a‘,‘b‘,‘alert(a+b)‘)];        /*  alert(arr5.length);//8         arr5[10] = "hahaha";         alert(arr5.length); //11         alert(arr5[9]);// undefined */

View CodeDate對象1 建立Date對象

//方法1：不指定參數var nowd1=new Date();alert(nowd1.toLocaleString( ));//方法2：參數為日期文字var nowd2=new Date("2004/3/20 11:12");alert(nowd2.toLocaleString( ));var nowd3=new Date("04/03/20 11:12");alert(nowd3.toLocaleString( ));//方法3：參數為毫秒數var nowd3=new Date(5000);alert(nowd3.toLocaleString( ));alert(nowd3.toUTCString());//方法4：參數為年月日小時分鐘秒毫秒var nowd4=new Date(2004,2,20,11,12,0,300);alert(nowd4.toLocaleString( ));//毫秒並不直接顯示

Date對象的方法—擷取日期和時間

擷取日期和時間getDate()                 擷取日getDay ()                 擷取星期getMonth ()               擷取月（0-11）getFullYear ()            擷取完整年份getYear ()                擷取年getHours ()               擷取小時getMinutes ()             擷取分鐘getSeconds ()             擷取秒getMilliseconds ()        擷取毫秒getTime ()                返回累計毫秒數(從1970/1/1午夜)

執行個體練習：

function getCurrentDate(){        //1. 建立Date對象        var date = new Date(); //沒有填入任何參數那麼就是目前時間        //2. 獲得當前年份        var year = date.getFullYear();        //3. 獲得當前月份 js中月份是從0到11.        var month = date.getMonth()+1;        //4. 獲得當前日        var day = date.getDate();        //5. 獲得當前小時        var hour = date.getHours();        //6. 獲得當前分鐘        var min = date.getMinutes();        //7. 獲得當前秒        var sec = date.getSeconds();        //8. 獲得當前星期        var week = date.getDay(); //沒有getWeek        // 2014年06月18日 15:40:30 星期三        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);    }alert(getCurrentDate());//解決 自動補齊成兩位元字的方法    function changeNum(num){    if(num < 10){        return "0"+num;    }else{        return num;    }}//將數字 0~6 轉換成 星期日到星期六    function parseWeek(week){    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];    //             0      1      2      3 .............    return arr[week];}

View CodeDate對象的方法—設定日期和時間

//設定日期和時間//setDate(day_of_month)       設定日//setMonth (month)                 設定月//setFullYear (year)               設定年//setHours (hour)         設定小時//setMinutes (minute)     設定分鐘//setSeconds (second)     設定秒//setMillliseconds (ms)       設定毫秒(0-999)//setTime (allms)     設定累計毫秒(從1970/1/1午夜)    var x=new Date();x.setFullYear (1997);    //設定年1997x.setMonth(7);        //設定月7x.setDate(1);        //設定日1x.setHours(5);        //設定小時5x.setMinutes(12);    //設定分鐘12x.setSeconds(54);    //設定秒54x.setMilliseconds(230);        //設定毫秒230document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日5點12分54秒x.setTime(870409430000); //設定累計毫秒數document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日12點23分50秒

View CodeDate對象的方法—日期和時間的轉換

日期和時間的轉換:getTimezoneOffset():8個時區×15度×4分/度=480;返回本地時間與GMT的時間差，以分鐘為單位toUTCString()返回國際標準時間字串toLocalString()返回本地格式時間字串Date.parse(x)返回累計毫秒數(從1970/1/1午夜到本地時間)Date.UTC(x)返回累計毫秒數(從1970/1/1午夜到國際時間)

View Code Math對象

//該對象中的屬性方法 和數學有關.   
abs(x)    返回數的絕對值。exp(x)    返回 e 的指數。floor(x)對數進行下舍入。log(x)    返回數的自然對數（底為e）。max(x,y)    返回 x 和 y 中的最高值。min(x,y)    返回 x 和 y 中的最低值。pow(x,y)    返回 x 的 y 次冪。random()    返回 0 ~ 1 之間的隨機數。round(x)    把數四捨五入為最接近的整數。sin(x)    返回數的正弦。sqrt(x)    返回數的平方根。tan(x)    返回角的正切。//方法練習:        //alert(Math.random()); // 獲得隨機數 0~1 不包括1.        //alert(Math.round(1.5)); // 四捨五入        //練習：擷取1-100的隨機整數，包括1和100             //var num=Math.random();             //num=num*10;             //num=Math.round(num);             //alert(num)        //============max  min=========================        /* alert(Math.max(1,2));// 2        alert(Math.min(1,2));// 1 */        //-------------pow--------------------------------        alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.

Function 對象 1 函數的定義?

123	function 函數名 (參數){?<br>    函數體;    return 傳回值;}

功能說明：

可以使用變數、常量或運算式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
傳回值必須使用return
Function 類可以表示開發人員定義的任何函數。

用 Function 類直接建立函數的文法如下：

?

1	var 函數名 = new Function("參數1","參數n","function_body");

雖然由於字串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種參考型別，它們的行為與用 Function 類明確建立的函數行為是相同的。

樣本：

function func1(name){    alert(‘hello‘+name);    return 8}    ret=func1("yuan");    alert(ret);var func2=new Function("name","alert(\"hello\"+name);")func2("egon")

View Code

注意：js的函數載入執行與python不同，它是整體載入完才會執行，所以執行函數放在函式宣告上面或下面都可以：

<script>    //f(); --->OK    function f(){        console.log("hello")    }    f() //----->OK</script>

View Code 2 Function 對象的屬性

如前所述，函數屬於參考型別，所以它們也有屬性和方法。
比如，ECMAScript 定義的屬性 length 聲明了函數期望的參數個數。

?

1	alert(func1.length)

3 Function 的調用

function func1(a,b){    alert(a+b);}    func1(1,2);  //3    func1(1,2,3);//3    func1(1);    //NaN    func1();     //NaN    //只要函數名寫對即可,參數怎麼填都不報錯.-------------------面試題----------- function a(a,b){    alert(a+b);}   var a=1;   var b=2;   a(a,b)

View Code 4 函數的內建對象arguments

function add(a,b){        console.log(a+b);//3        console.log(arguments.length);//2        console.log(arguments);//[1,2]    }    add(1,2)    ------------------arguments的用處1 ------------------    function nxAdd(){        var result=0;        for (var num in arguments){            result+=arguments[num]        }        alert(result)    }    nxAdd(1,2,3,4,5)//     ------------------arguments的用處2 ------------------    function f(a,b,c){        if (arguments.length!=3){            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")        }        else {            alert("success!")        }    }    f(1,2,3,4,5)

View Code 4 匿名函數

// 匿名函數    var func = function(arg){        return "tony";    }// 匿名函數的應用    (function(){        alert("tony");    } )()    (function(arg){        console.log(arg);    })(‘123‘)

View Code回到頂部 BOM對象

window對象

所有瀏覽器都支援 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器視窗的.
使用上講: window對象不需要建立對象,直接使用即可.

Window 對象方法

alert()            顯示帶有一段訊息和一個確認按鈕的警告框。confirm()          顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。prompt()           顯示可提示使用者輸入的對話方塊。open()             開啟一個新的瀏覽器視窗或尋找一個已命名的視窗。close()            關閉瀏覽器視窗。
setInterval()      按照指定的周期（以毫秒計）來調用函數或計算運算式。clearInterval()    取消由 setInterval() 設定的 timeout。setTimeout()       在指定的毫秒數後調用函數或計算運算式。clearTimeout()     取消由 setTimeout() 方法設定的 timeout。scrollTo()         把內容滾動到指定的座標。

方法使用

1、alert confirm prompt以及open函數

    //----------alert confirm prompt----------------------------    //alert(‘aaa‘);            /* var result = confirm("您確定要刪除嗎?");    alert(result); */    //prompt 參數1 : 提示資訊.   參數2:輸入框的預設值. 傳回值是使用者輸入的內容.    // var result = prompt("請輸入一個數字!","haha");    // alert(result);    方法講解:            //open方法 開啟和一個新的視窗 並 進入指定網址.參數1 : 網址.        //調用方式1            //open("http://www.baidu.com");        //參數1 什麼都不填 就是開啟一個新視窗.  參數2.填入新視窗的名字(一般可以不填). 參數3: 新開啟視窗的參數.            open(‘‘,‘‘,‘width=200,resizable=no,height=100‘); // 新開啟一個寬為200 高為100的視窗        //close方法  將當前文件視窗關閉.            //close();

View Code

樣本：

 var num = Math.round(Math.random()*100);    function acceptInput(){    //2.讓使用者輸入(prompt)    並接受 使用者輸入結果    var userNum = prompt("請輸入一個0~100之間的數字!","0");    //3.將使用者輸入的值與 隨機數進行比較            if(isNaN(+userNum)){                //使用者輸入的無效(重複2,3步驟)                alert("請輸入有效數字!");                acceptInput();            }            else if(userNum > num){            //大了==> 提示使用者大了,讓使用者重新輸入(重複2,3步驟)                alert("您輸入的大了!");                acceptInput();            }else if(userNum < num){            //小了==> 提示使用者小了,讓使用者重新輸入(重複2,3步驟)                alert("您輸入的小了!");                acceptInput();            }else{            //答對了==>提示使用者答對了 , 詢問使用者是否繼續遊戲(confirm).                var result = confirm("恭喜您!答對了,是否繼續遊戲?");                if(result){                    //是 ==> 重複123步驟.                    num = Math.round(Math.random()*100);                    acceptInput();                }else{                    //否==> 關閉視窗(close方法).                    close();                }            }    }

View Code

2、setInterval，clearInterval

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

?

12	文法：<br>     setInterval(code,millisec)其中，code為要調用的函數或要執行的代碼串。millisec周期性執行或調用 code 之間的時間間隔，以毫秒計。

樣本：

<input id="ID1" type="text" onclick="begin()"><button onclick="end()">停止</button><script>    function showTime(){           var nowd2=new Date().toLocaleString();           var temp=document.getElementById("ID1");           temp.value=nowd2;    }    var ID;    function begin(){        if (ID==undefined){             showTime();             ID=setInterval(showTime,1000);        }    }    function end(){        clearInterval(ID);        ID=undefined;    }</script>

View Code回到頂部 DOM對象 什麼是HTML  DOM

•     HTML  Document Object Model（文件物件模型）
•     HTML DOM 定義了訪問和操作HTML文檔的標準方法
•     HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)

DOM樹

 

              

 

 畫dom樹是為了展示文檔中各個對象之間的關係，用於對象的導航。

DOM節點 節點類型

HTML 文檔中的每個成分都是一個節點。

DOM 是這樣規定的：
    整個文檔是一個文檔節點
    每個 HTML 標籤是一個元素節點
    包含在 HTML 元素中的文本是文本節點
    每一個 HTML 屬性是一個屬性節點

 

其中，document與element節點是重點。

節點關係

節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

•     在節點樹中，頂端節點被稱為根（root）
•     每個節點都有父節點、除了根（它沒有父節點）
•     一個節點可擁有任意數量的子
•     同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分，以及節點之間的關係：



訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素。

節點尋找

直接尋找節點

?

1234	document.getElementById(“idname”) document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”)

<div id="div1">    <div class="div2">i am div2</div>    <div name="yuan">i am div2</div>    <div id="div3">i am div2</div>    <p>hello p</p></div><script>   var div1=document.getElementById("div1");////支援;//   var ele= div1.getElementsByTagName("p");//   alert(ele.length);////支援//   var ele2=div1.getElementsByClassName("div2");//   alert(ele2.length);////不支援//   var ele3=div1.getElementById("div3");//   alert(ele3.length);////不支援//   var ele4=div1.getElementsByName("yuan");//   alert(ele4.length)</script>

局部尋找

注意：設計到尋找元素，注意<script>標籤的位置！

瀏覽節點屬性

‘‘‘
parentElement           // 父節點標籤元素
children                // 所有子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素‘‘‘

注意，js中沒有辦法找到所有的兄弟標籤！

前端之JS（二）