三.JavaScript 高级

1.JavaScript 浏览器检测
navigator
浏览器:navigator.appName
浏览器版本:navigator.appVersion
代码:navigator.appCodeName
平台:navigator.platform
Cookies 启用:navigator.cookieEnabled
浏览器的用户代理报头:navigator.userAgent
以下信息可能找不到
MinorVersion:navigator.appMinorVersion
CPUClass:navigator.cpuClass
OnLine:navigator.onLine
BrowserLanguage::navigator.browserLanguage
SystemLanguage:navigator.systemLanguage
UserLanguage:navigator.userLanguage

重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。
案例: 判断浏览器信息  实际上 判断浏览器、系统、平台都用的navigator.userAgent
function detectBrowser() {
    var browser = navigator.appName
    var b_version = navigator.appVersion
    var version = parseFloat(b_version)

    if ((browser == "Netscape" || browser == "Microsoft Internet Explorer")
            && (version >= 4)) {
        alert("Your browser is good enough!")
    } else {
        alert("It's time to upgrade your browser!")
    }
}


2.JavaScript Cookies
cookie 用来识别用户
每个key都有自己的失效时间,并且设置一个key的value不会影响到其他KEY
escape()方法把字符串按 URL 编码方法来编码
toGMTString()设定 Cookie 的时效日期都是用 GMT 格式的时间的，其它格式的时间是没有作用的。
不指定有效期expires 默认关闭浏览器后失效
function setCookie(key, value, expiredays) {
    var exdate = new Date()
    exdate.setDate(exdate.getDate() + expiredays)
    document.cookie = key + "=" + escape(value)
            + ((expiredays == null) ? "" : "; expires=" + exdate.toGMTString());
}

function getCookie(key) {
    if (document.cookie.length > 0) {
        keyStart = document.cookie.indexOf(key + "=")
        if (keyStart != -1) {
            keyStart = keyStart + key.length + 1
            keyEnd = document.cookie.indexOf(";", keyStart)
            if (keyEnd == -1)
                keyEnd = document.cookie.length
            return unescape(document.cookie.substring(keyStart, keyEnd))
        }
    }
    return ""
}

function delCookie(key) {
    var expires = new Date();
    expires.setTime(expires.getTime() - 1);
    document.cookie = key + '=value;expires=' + expires.toGMTString();
}


3.JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
(1)验证表单通过form标签的onsubmit属性，来调用JS方法实现，如果JS方法返回false，则不提交数据
(2)可以在标签中指定name,并在JS方法中用with语句方便开发。需要注意的是，如果有重名的情况下,请使用tagName[index]
(3)如果判断为false，可以通过tagName.focus获得焦点
案例
<form id="testForm" action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
    Email:
    <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
</form>

function validate_form(thisform) {
    with (thisform) {
        if (email.length > 1) {
            if (validate_required(email[0], "Email must be filled out!") == false) {
                email[0].focus();
                return false
            }
        } else {
            if (validate_required(email, "Email must be filled out!") == false) {
                email.focus();
                return false
            }
        }
    }
}
function validate_required(field, alerttxt) {
    with (field) {
        if (value == null || value == "") {
            alert(alerttxt);
            return false
        } else {
             // return true

            document.testForm.submit();

        }
    }
}


4.JavaScript 动画
我们可以使用 JavaScript 来创建动态的图像。
利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。
窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。比如利用onmouseover和onmouseout
案例:
<a href="/index.html" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"  onmouseover="mouseOver()" onmouseout="mouseOut()" />
</a>
function mouseOver() {
    document.b1.src = "/i/eg_mouse.jpg"
}
function mouseOut() {
    document.b1.src = "/i/eg_mouse2.jpg"
}


5.JavaScript 图像地图
图像地图指的是带有可点击区域的图像。
图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就会到达相关的链接。
我们可向图像地图内部的 <area> 标签添加（能调用JavaScript的）事件。
<area> 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。


6.JavaScript 计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout() 未来的某时执行代码
语法
var t=setTimeout("javascript语句",毫秒)
clearTimeout() 取消setTimeout()
语法
clearTimeout(setTimeout_variable)
案例 计时和消除计时
var c = 0
var t
function timedCount() {
    document.getElementById('txt').value = c
    c = c + 1
    t = setTimeout("timedCount()", 1000)
}
function stopCount() {
    clearTimeout(t)
}


7.创建你自己的 JavaScript 对象
JavaScript 对象
JavaScript 拥有若干内置的对象，比如 String、Date、Array 等等。除了这些对象，你还可以创建自己的对象。
对象仅仅是一种特殊的数据类型而已，并拥有一系列的属性和方法。
让我们用一个例子来理解：一个人就是一个对象。属性是和对象有关的值。人的属性包括其名字、身高、体重、年纪、肤色、眼睛的颜色等等。所有的人都有这些属性，但是每个人的属性的值却各不相同。对象也拥有方法。方法是可施加于对象上的行为。人的方法可能是吃、睡、工作、玩等等。
案例
function person(firstname, lastname, age, eyecolor) {
    var obj = new Object();
    obj.firstname = firstname
    obj.lastname = lastname
    obj.age = age
    obj.eyecolor = eyecolor
    obj.getFirstname = function() {
        alert('1111');
        return this.firstname;
    };
    return obj
}
var person = person("John", "Adams", 35, "black")
document.write(person.getFirstname() + " 的年龄是 " + person.age + " 岁。")