JavaScript學習第三週

阿新 • • 發佈：2022-04-04

HTML超連結

文法：

    var text = "百度一下，你就知道".link("https://www.baidu,com");
    doucument.write(text);

生成一個可以點選的“百度一下你就知道”，連結到baidu.com

陣列

定義陣列：

//方法一
var names;
names = new Array(4);
//於是就生成了names[0]names[1]names[2]names[3];

//方法二
var names = new Array("曉夢","小夢醬");

//方法三
var names = ["趙東傑","李小安"];

未初始化時，裡面的值是undefined.

sort 排序

接在已經定義好的陣列後面，然後names.sort()即可。裡面的東西會按順序排好，從小到大。
數字是從小到大，字母是從a~z

升序原理：

function compare(a,b){
    return a-b;
}

var ages = new Array(4,6,3,5,4,10,9,7);
ages = ages.sort(compare);
document.write(ages);

當返回值為負時，將a排在前面。當返回值為正時，將b排在前面。

改成降序：

function compare(a,b){
    return b-a;
}

var ages = new Array(4,6,3,5,4,10,9,7);
ages = ages.sort(compare);
document.write(ages.join(">"));//這個join是連結陣列元素的方法

其他用於陣列的方法

join

連結陣列元素的方法。

document.write(ages.join(">"));

輸出：9>7>6>4>3;

concat

var arr1 = ["a","b"];
var arr2 = ["c","d"];
var array = arr1.concat(arr2);

document.write(array);

就會輸出 abcd。把他黏在一起了

pop

取出末尾元素，刪除。

var arr = ['a','b','c'];
document.write(arr.pop());

會輸出一個末尾元素，並且把他從arr裡永遠刪除掉。

push

從末尾塞入一個指定元素。

var arr = ['a','b','c'];
arr.push('d');
document.write(arr);

輸出abcd。因為d被新增進去了

reverse

倒置，逆序，簡單好懂。

shift

刪除開頭的一個元素，類似pop

slice

從指定的位置獲取一個或多個值

var arr = ['a','b','c','d','e'];
var s1 = arr.slice(1,2);//從下標1取到下標2，即b與c
var s2 = arr.slice(1.3);//bcd
document.write(s1,s2);

輸出 bc bcd；

unshift

從開頭新增一個元素，類似push

聯想陣列

用字串來儲存陣列：

//方法一
var members = new Object();
members["A001"] = "小夢醬";
members["A002"] = "曉夢醬";

//方法二
var favorites = {food:"可樂",color:"blue",number:"7"};
//              使用方法：
favorites[number] == favorites.number;
favorites[color] == favorites.color;

聯想陣列與for迴圈

可以運用for~in來把聯想陣列塞進for迴圈。

var colors = new Object();
colors["white"] = "白色";
colors["red"] = "紅色";
colors["green"] = "綠色";
colors["blue"] = "藍色";
colors["yellow"] = "黃色";
//建立了一個下標是英文，值是中文的聯想陣列。

for(var i in colors){
    document.write(i + " " + colors[i] + "<br>");
}

會依次輸出：

white 白色

red 紅色

green 綠色

blue 藍色

yellow 黃色

再舉個例子,使用第二種定義方法。

var student = {小明:80, 小王:70, 小夢:90};
for(var i in student){
    document.write(i + "的得分是：" + student[i] + "<br>");
}

輸出：小明的得分是80 小王的得分是70，小夢的得分是90

。、

瀏覽器上的物件

當瀏覽器開啟HTML時，會自動生成很多物件。

window物件:管理視窗
document物件:管理HTML
image物件:管理影象
button物件:管理按鈕
form物件:管理表單

navigator物件

關於瀏覽器的屬性。

appCodeName：瀏覽器的代號(代號:Mozilla等)
appName：瀏覽器名稱
appVersion：瀏覽器版本
userAgent：使用者代理(瀏覽器傳送的字串)
language：瀏覽器語言(日語，英語)
platform：環境，win32；
cookieEnabled：cookie是否有效

Event 活動

事件處理程式(event handler)

事件(event):當某種狀態發生時所發生的事物事件處理程式是對這個事件給予處理的命令。

The onclick (cases)→對點選事件給予處理

各種event活動：

Event	作用
onblue	焦點偏離時（滑鼠不在上面）
onfocus	焦點得到時（滑鼠在上面）
onclick	點選時
ondbclick	雙擊時
onmousedown	按下滑鼠時
onmouseup	抬起滑鼠時
onmousemove	移動滑鼠的時候
onchange	當輸入文字變更的時候
onsubmit	表單被髮送的時候
onload	當網頁被載入的時候
onunload	當網頁切換時
onselect	當文字被選中時

1.在HTML中設定事件處理程式

<input type="button" value="button1" 
            name="buttonl" onclick=" funcl (' button1');">

與函式結合在一起

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>小夢醬</title>
    
    <script>    
    function func1(str){
        alert(str + "點選了");
    }
    </script>
    </head>

    <body>
        <form id="myForm" name="myForm">
        <input type="button" value="button1" 
            name="buttonl" onclick="func1('button1');">
            // 點選後啟用func1，套用的是button1。
        </form>
        
    </body>
</html>