您的位置：首页 > Web前端 > JavaScript

JAVASCRIPT学习笔记基础（三）

2012-01-16 17:56 639 查看

事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

事件句柄

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

FF: Firefox, N: Netscape, IE: Internet Explorer

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

try...catch..

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
addlert("Welcome  guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="错误描述："+err.description+"\n\n"
txt+="点击‘确定’继续。\n\n"
alert(txt)
}
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()"/>
</body>
</html>

下一个例子会显示一个确认框，让用户来选择在发生错误时点击确定按钮来继续浏览网页，还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false，代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true，那么代码什么也不会做。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
addlert("欢迎用户");
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页，\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt))
{
document.location.href="http://www.baidu.com"
}
}
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

Throw 声明

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。

语法：

throw(exception)

exception 可以是字符串、整数、逻辑值或者对象。

注意：使用小写字母编写 throw。使用大写字母会出错！

实例 1

下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

<html>
<body>
<script>
var x=prompt("请输入0至10之间的数","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er)
{
if(er=="Err1")
alert("错误！该值太大！")
if(er=="Err2")
alert("错误！该值太小！")
if(er=="Err3")
alert("错误！该值不是数字！")
}
</script>
</body>
</html>

onerror 事件

我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。

只要页面中出现脚本错误，就会产生 onerror 事件。

如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

语法：

onerror=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

JavaScript 特殊字符

Previous Page
Next Page

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。

插入特殊字符

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

请看下面的 JavaScript 代码：

var txt="We are the so-called [code]"Vikings"

from the north."
document.write(txt)[/code]
在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为：We are the so-called。

要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠 (\)。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called [code]\"Vikings\"

from the north."
document.write(txt)[/code]
现在 JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。

这是另一个例子：

document.write ("You [code]\&

me are singing!") [/code]
上面的例子会产生以下输出：

You & me are singing!

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

代码	输出
\'	单引号
\"	双引号
\&	和号
\\	反斜杠
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

本节的内容是：在使用 JavaScript 进行编码的过程中，其他一些需要了解的重要事项。

JavaScript 对大小写敏感

名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。

JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

空格

JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：

name="Hege"
name = "Hege"

换行

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：

document.write("Hello \
World!")

但是不能像这样折行：

document.write \
("Hello World!")

JavaScript 对象简介

Previous Page
Next Page

JavaScript 是面向对象的编程语言 (OOP)。

OOP 语言使我们有能力自定义对象和变量类型。

面向对象编程

JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。

别着急，我们会在高级 JavaScript 的部分讲解如何创建自己的对象。现在，我们要开始学习内建的 JavaScript 对象，以及如何使用它们。从下一节开始，我们将具体地依次讲解的这些内建的 JavaScript 对象。

注意：对象只是一种特殊的数据。对象拥有属性和方法。

属性

属性指与对象有关的值。

在下面的例子中，我们使用字符串对象的长度属性来计算字符串中的字符数目。

<script type="text/javascript">

var txt="Hello World!"
document.write(txt.[code]length

)

</script>[/code]
上面的代码输出为：

方法

方法指对象可以执行的行为（或者可以完成的功能）。

在下面的例子中，我们使用字符串对象的 toUpperCase() 方法来显示大写字母文本。

<script type="text/javascript">

var str="Hello world!"
document.write(str.[code]toUpperCase()

)

</script>[/code]
上面的代码输出为：

HELLO WORLD!

JavaScript String 对象参考手册

String 对象

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);
String(s);

参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

String 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
constructor	对创建该对象的函数的引用	1	4
length	字符串的长度	1	3
prototype	允许您向对象添加属性和方法	1	4

String 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
anchor()	创建 HTML 锚。	1	3
big()	用大号字体显示字符串。	1	3
blink()	显示闪动字符串。	1
bold()	使用粗体显示字符串。	1	3
charAt()	返回在指定位置的字符。	1	3
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。	1	4
concat()	连接字符串。	1	4
fixed()	以打字机文本显示字符串。	1	3
fontcolor()	使用指定的颜色来显示字符串。	1	3
fontsize()	使用指定的尺寸来显示字符串。	1	3
fromCharCode()	从字符编码创建一个字符串。	1	4
indexOf()	检索字符串。	1	3
italics()	使用斜体显示字符串。	1	3
lastIndexOf()	从后向前搜索字符串。	1	3
link()	将字符串显示为链接。	1	3
localeCompare()	用本地特定的顺序来比较两个字符串。	1	4
match()	找到一个或多个正在表达式的匹配。	1	4
replace()	替换与正则表达式匹配的子串。	1	4
search()	检索与正则表达式相匹配的值。	1	4
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。	1	4
small()	使用小字号来显示字符串。	1	3
split()	把字符串分割为字符串数组。	1	4
strike()	使用删除线来显示字符串。	1	3
sub()	把字符串显示为下标。	1	3
substr()	从起始索引号提取字符串中指定数目的字符。	1	4
substring()	提取字符串中两个指定的索引号之间的字符。	1	3
sup()	把字符串显示为上标。	1	3
toLocaleLowerCase()	把字符串转换为小写。	-	-
toLocaleUpperCase()	把字符串转换为大写。	-	-
toLowerCase()	把字符串转换为小写。	1	3
toUpperCase()	把字符串转换为大写。	1	3
toSource()	代表对象的源代码。	1	-
toString()	返回字符串。	-	-
valueOf()	返回某个字符串对象的原始值。	1	4

String 对象描述

字符串是 JavaScript 的一种基本的数据类型。

String 对象的 length 属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。

JavaScript Date 对象参考手册

Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
constructor	返回对创建此对象的 Date 函数的引用。	1	4
prototype	使您有能力向对象添加属性和方法。	1	4

Date 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
Date()	返回当日的日期和时间。	1	3
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。	1	3
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。	1	3
getMonth()	从 Date 对象返回月份 (0 ~ 11)。	1	3
getFullYear()	从 Date 对象以四位数字返回年份。	1	4
getYear()	请使用 getFullYear() 方法代替。	1	3
getHours()	返回 Date 对象的小时 (0 ~ 23)。	1	3
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。	1	3
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。	1	3
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。	1	4
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。	1	3
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。	1	3
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。	1	4
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。	1	4
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。	1	4
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。	1	4
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。	1	4
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。	1	4
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。	1	4
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。	1	4
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。	1	3
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。	1	3
setMonth()	设置 Date 对象中月份 (0 ~ 11)。	1	3
setFullYear()	设置 Date 对象中的年份（四位数字）。	1	4
setYear()	请使用 setFullYear() 方法代替。	1	3
setHours()	设置 Date 对象中的小时 (0 ~ 23)。	1	3
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。	1	3
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。	1	3
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
setTime()	以毫秒设置 Date 对象。	1	3
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。	1	4
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。	1	4
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。	1	4
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。	1	4
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。	1	4
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。	1	4
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
toSource()	返回该对象的源代码。	1	-
toString()	把 Date 对象转换为字符串。	1	4
toTimeString()	把 Date 对象的时间部分转换为字符串。	1	4
toDateString()	把 Date 对象的日期部分转换为字符串。	1	4
toGMTString()	请使用 toUTCString() 方法代替。	1	3
toUTCString()	根据世界时，把 Date 对象转换为字符串。	1	4
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。	1	3
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。	1	3
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。	1	3
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。	1	3
valueOf()	返回 Date 对象的原始值。	1	4

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航