物件

JavaScript 的物件可分三類：

內建的物件（如日期、數學等物件）
根據網頁的內容所建立的文件物件模型（Document Object Model ，簡稱 DOM）
使用者自訂的物件

本節討論「使用者自訂的物件」。

假設 car 物件已經存在, 且含有 seats, engine 以及 theradio 屬性。則可透過點運算子".", 存取物件的屬性, 例如：

    var cstype = car.seats;

物件的建立

命名

基本上其命名規則與變數和函式相同:

名稱所用的字母,大小寫不同
名稱必須使用合法的字元:
避免使用保留字扣或其他物件名稱

物件結構

JavaScript 的函式，也是物件的「建構函式」（Constructor），例如：

    function car(seats, engine, theradio)
    {
        this.seats=seats;
        this.engine=engine;
        this.theradio=theradio;
    }

this 代表目前使用的物件。

建立物件實体, 使用 new , 例如：

    var work_car = new car("cloth", "V-6", "CD" );

範例

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    function car(seats, engine, theradio)
    {
        this.seats=seats;
        this.engine=engine;
        this.theradio=theradio;
    }
    var work_car = new car("cloth", "V-6", "Tape Deck" );
    var fun_car = new car("leather", "V-8", "CD Player" );
    var seat_type = fun_car.seats;
    var engine_type = work_car.engine;
    var radio_type = fun_car.theradio;
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write("I want a car with " + seat_type + " seats.");
    document.write("It also needs a " + engine_type + " engine.");
    document.write("Oh, and I would like a " + radio_type + " radio also.");
//-->
</SCRIPT>
</BODY>
</HTML>

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    function car(seats, engine, theradio)
    {
        this.seats=seats;
        this.engine=engine;
        this.theradio=theradio;
    }
    var work_car = new car("cloth", "V-6", "Tape Deck" );
    var fun_car = new car("leather", "V-8", "CD Player" );
    var custom_car = new car(fun_car.seats, work_car.engine, fun_car.theradio );
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write("I want a car with " + custom_car.seats + " seats.");
    document.write("It also needs a " + custom_car.engine + " engine.");
    document.write("Oh, and I would like a " + custom_car.theradio + " radio also.");
//-->
</SCRIPT>
</BODY>
</HTML>

看效果

屬性值

    work_car.engine = "V-4";

物件初始子

<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
<!--
    work_car = {seats:"cloth", engine:"V-6", theradio:"Tape Deck" };
    fun_car = {seats:"leather", engine:"V-8", theradio:"CD Player" };
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write("I want a car with " + fun_car.seats + " seats.");
    document.write("It also needs a " + work_car.engine + " engine.");
    document.write("Oh, and I would like a " + fun_car.theradio + " radio also.");
//-->
</SCRIPT>
</BODY>
</HTML>

加入方法

function get_payment()
{
    var payment = 250;
    if (this.seats=="leather")
        payment += 100;
    else
        payment += 50;
    if (this.engine=="V-8")
        payment += 150;
    else
        payment += 75;
    if (this.theradio=="CD Player")
        payment += 35;
    else
        payment += 10;
    return payment;
}

function car(seats, engine, theradio)
{
    this.seats=seats;
    this.engine=engine;
    this.theradio=theradio;
    this.payment=get_payment;
}

內建的物件

navigator 物件

屬性

appCodeName 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("You are using " + navigator.appCodeName);
//-->
</SCRIPT>

appName 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("You are using " + navigator.appName);
//-->
</SCRIPT>

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    if (navigator.appName=="Netscape")
    {
        window.alert("Netscape is a cool browser. You rule!");
        }
    else
    {
        if (navigator.appName=="Microsoft Internet Explorer")
            window.alert("Internet Explorer is cool. You rule!");
        else
            window.alert("What browser is this? You have to be kidding!");
    }
//-->
</SCRIPT>
</HEAD>
<BODY>
Hi, and welcome!
</BODY>
</HTML>

appVersion 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("The browser version is " + navigator.appVersion);
//-->
</SCRIPT>

language 屬性

<SCRIPT language="JavaScript">
<!--
    if (navigator.appName=="Netscape")
        window.alert("Hi, your language code is " + navigator.language);
    else
        window.alert("Hi, there!");
//-->
</SCRIPT>

mimeTypes 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("The mime Type is " + navigator.mimeTypes);
//-->
</SCRIPT>

plateform 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("Your machine is a " + navigator.plateform + " machine.");
//-->
</SCRIPT>

plugins 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("The browser version is " + navigator.plugins);
//-->
</SCRIPT>

userAgent 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("The browser version is " + navigator.userAgent);
//-->
</SCRIPT>

例題

<html>
<head>
<meta charset="big-5">
<title>navigator</title>
</head>

<body>
<div id="example"></div>
<script language="JavaScript">
<!--
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
//-->
</script>
</body>
</html>

看效果

方法

javaEnabled()方法

<SCRIPT language="JavaScript">
<!--
    var hasJava=navigator.javaEnabled()
    if (hasJava==true)
        window.alert("Cool, you have Java! ");
    else
        window.alert("Java disabled? You cannot see my Java Applet!");
//-->
</SCRIPT>

plugins.refresh()方法

<SCRIPT language="JavaScript">
<!--
    navigator.plugins.refresh(true);
//-->
</SCRIPT>

物件