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" οnsubmit="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" οnmοuseοver="mouseOver()" οnmοuseοut="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 + " 岁。")