JAVASCRIPT学习笔记基础(三)

简介:

事件

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 特殊字符

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

插入特殊字符

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

请看下面的 JavaScript 代码:

var txt="We are the so-called "Vikings" from the north."
document.write(txt)

在 JavaScript 中,字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为:We are the so-called。

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

var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)

现在 JavaScript 就可以输出正确的文本字符串了:We are the so-called "Vikings" from the north。

这是另一个例子:

document.write ("You \& me are singing!") 

上面的例子会产生以下输出:

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 对象简介

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

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

面向对象编程

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

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

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

属性

属性指与对象有关的值。

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

<script type="text/javascript">

var txt="Hello World!"
document.write(txt.length)

</script>

上面的代码输出为:

12

方法

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

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

<script type="text/javascript">

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

</script>

上面的代码输出为:

HELLO WORLD!


JavaScript String 对象参考手册

String 对象

String 对象用于处理文本(字符串)。

创建 String 对象的语法:

new String(s);
String(s);

参数

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

返回值

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

当不用 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





目录
相关文章
|
1天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
9 0
|
3天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
11天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
51 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)