JavaScript
JavaScript与Java不同
• JS是Netscape公司的产品，Java是Sun公司的产品。
• JS是基于对象，Java是面向对象。
• JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
• JS是弱类型，Java是强类型。
• JavaScript的特点
• 解释性：由浏览器直接解释执行
• 用于客户端
• 安全性:不允许直接访问本地硬盘
• 简单易用：脚本式语言最大的优点是易学易用，是一种轻量级的程序语言
• 动态性:他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的。
• 跨平台性:只要是可以解释Js的浏览器都可以执行，和操作系统无关
JavaScript的局限性：浏览器有很多种，每种对JavaScript的支持程度是不一样的，效果会有一定的差距。
• JavaScript的作用
– 校验用户输入的内容：用户输入内容的校验常分为两种
• 格式性校验：JavaScript
• 功能性校验
– 有效地组织网页内容
– 动态地显示网页内容：时钟显示等
– 动画显示
当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（
• 注意：
– JavaScript程序内容必须置于<script></script>标签中，type=“text/javascript”用于区别其他脚本程序语言。
– 对于不支持javascript程序的浏览器，标记<!-- //-->之间的内容就会被隐藏起来，否则就会被当做html的内容显示出来，而对于支持javascript程序的浏览器，这对标签不起任何作用。
– Javascript程序对大小写字母是敏感的，即在同一个程序语句中如果使用大写或小写字母将代表不同的意义。
– 使用注释/*多行注释*/ //单行注释
– Javascript程序在html文件中的位置没有严格的规定，但根据Javascript程序的功能和作用，一般将其置于3种位置：
• 在html<body>标记中的任何位置。如果所编写的Javascript程序用于输出网页内容的，应该将Javascript程序置于html文件中需要显示该内容的位置。
• 在html<head>标记。如果所编写的Javascript程序需要在某一个html文件中多次使用，那就应该编写Javascript函数，并将函数置于html文件的<head>标记中。
• 在一个单独的js文件中。如果编写的Javascript程序需要在多个html文件中使用，或Javascript程序内容很长时。
• JavaScript主要包括3种数据类型：简单数据类型、特殊数据类型、复合数据类型。
• 简单数据类型：数值型、字符型、布尔型
• 复合数据类型：对象、数组、函数
• 特殊数据类型：null、undefined
转义字符
|
字 符 |
说 明 |
示 例 |
|
\b |
退格符 |
alert(“这是第一句 \b 这是第二句”) |
|
\f |
换页符 |
alert(“这是第一句\f 这是第二句”) |
|
\n |
换行符 |
alert(“这是第一句\n 这是第二句”) |
|
\r |
回车符 |
alert(“这是第一句\r 这是第二句”) |
|
\t |
制表符 |
alert(“这是第一句\t 这是第二句”) |
常量和变量
• 常量：不能改变的数据。可以为整型、逻辑型、字符串型等。
• 变量：在计算机内存中暂时保存数据的地方。用关键字var声明或用赋值的形式。var i；i=10；var count=10；var i，j；
• 变量命名规则
– 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;
– 后续字符可以是字母、数字、下划线或美元符；
– 变量名称不能是保留字；
– 字符大小写敏感；
• 变量可以不声明直接使用 k=100；（k没定义就直接用）
• 变量弱类型检查，且可随时改变数据类型
运算符和表达式
• 运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值
• 根据所执行的运算，运算符可分为以下类别：
– 算术运算符
– 比较运算符
– 逻辑运算符
– 赋值运算符=、+=、-=、*=、/=、%=
– 位运算符（很少用）
算术运算符
|
|
说 明 |
示 例 |
|
|
+ |
加 |
a = 5 + 8 |
|
|
- |
减 |
a = 8 - 5 |
|
|
/ |
除 |
a = 20 / 5 |
|
|
* |
乘 |
a = 5*19 |
|
|
% |
取模－两个数相除的余数 |
10 % 3 = 1 |
|
|
++ |
一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面 |
|
++x将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值 |
|
- - |
一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面 |
--x 将返回 x 自减运算后的值。 x-- 将返回 x 自减运算前的值 |
|
比较运算符
|
运算符 |
说 明 |
示 例 |
|
= = |
等于。如果两个操作数相等，则返回真。 |
a = = b |
|
!= |
不等于。如果两个操作数不相等，则返回真。 |
Var2 != 5 |
|
> |
大于。如果左边的操作数大于右边的操作数，则返回真。 |
Var1 > var2 |
|
< |
小于。如果左边的操作数小于右边的操作数，则返回真。 |
Var2 < var1 |
|
<= |
小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。 |
Var2 <= 4 Var2 <= var1 |
|
>= |
大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。 |
Var1 >= 5 Var1 >= var2 |
逻辑运算符
|
运算符 |
值 |
说 明 |
|
与 ( &&) |
expr1 && expr2 |
只有当 expr1 和 expr2 同为真时，才返回真。否则，返回假。 |
|
或 ( || ) |
expr1 || expr2 |
如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。 |
|
非 (!) |
!expr |
如果表达式为真，则返回假。如果为假，则返回真。 |
流程控制
• 所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：
– 顺序结构：一条接一条，自上而下
– 选择结构：判断给定条件，根据不同情况做不同处理
– 循环结构：多次重复执行同一系列命令
if 语句
if(条件)
{
JavaScript代码;
}
switch 语句
switch (表达式)
{
case 常量1 :
JavaScript语句;
break;
case 常量2 :
JavaScript语句;
break;
...
default :
JavaScript语句;
}
q for循环
例：
var i;
for (i=0; i<10; i++)
{
// 语句;
}
q while循环
while(循环条件)
{
//语句；
}
q do－while循环
do
{
//语句；
}while(循环条件);
JavaScript 函数
• 函数实际上就是一段有名字的程序，这样，在整个程序的任何位置，只要使用该名字，就会执行由这段名字命名的程序。
• JavaScript使用函数的目的有两个
– 为了更好地组织程序，当需要重复地使用一段程序时，就应该将这段程序写成函数。
– 用于网页中的事件处理。
内置函数
• eval 函数： 用于计算字符串表达式的值
该函数可以对以字符串形式表示的任意有效的 JavaScript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。
isNaN 函数：用于验证参数是否为 NaN（非数字）
isNaN(numValue)
返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。
如果值是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
自定义函数
• 定义函数：
function 函数名([参数1,参数2，…]){
语句;
}
• 调用函数：
函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名” ;
函数的参数
参数是由函数的使用方传递到函数体中的变量，用于为函数中的操作提供相应的信息和数据。
• 参数的传递
– 按值传递：传递的只是原变量的一份拷贝，因此，如果在函数中改变了这个参数的值，原变量不会跟着改变，它将保留原有的值。
– 按地址传递：这时传递的是原变量的内存地址，即函数中的参数和原变量是同一个变量。因此在函数中改变了参数值，原变量也会随之改变。
注意：如果参数的数据类型是对象，其传递方式按地址传递的
变量的作用域
JavaScript的变量分为全局变量和局部变量。全局变量是作用在全程序范围内的变量，它声明在函数体外；局部变量是定义在函数体内的变量，它仅仅在函数体内起作用。
JavaScript 对象简介
• 内置对象
• 浏览器对象
• 自定义对象
• 注意：一个对象在被引用之前，必须存在。另外在JavaScript中对于对象属性和方法的引用，有两种情况：
– 该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例；
– 在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。
String 对象
创建字符串有两种不同方法 ：
• 使用 var 语句 var newstr = “这是我的字符串"
• 创建 String 对象
var newstr = new String (“这是我的字符串")
• 字符串相加：+或+= （字符串的连接）
• 在字符串中使用特殊字符
“sdfg’ × “她说：’今天不出门’” √ 或使用转义字符 “她说：\”今天不出门\”” “\n”
• 比较字符串是否相等 == != user==null|| user==“”
• 数字字符串和数值的相互转换
String相关函数
• 属性：length
• 方法：
– charAt(index): 返回指定索引位置处的字符。
– indexOf(subString[,startIndex]): 返回 String 对象内第一次出现子字符串的字符位置。
– substr(start [, length ]):返回一个从指定位置开始的指定长度的子字符串。
– substring(start, end):返回位于 String 对象中指定位置的子字符串。
– toLowerCase:返回一个字符串，该字符串中的字母被转换为小写字母。
Math 对象
|
|
名称 |
说 明 |
|
属性 |
PI |
∏ 的值， 约等于 3.1415 |
|
LN10 |
10 的自然对数的值，约等于 2.302 |
|
|
E |
Euler 的常量的值，约等于 2.718。Euler 的常量用作自然对数的底数 |
|
|
|
abs(y) |
返回 y 的绝对值 |
|
sin (y) |
返回 y 的正弦，返回值以弧度为单位。 |
|
|
cos (y) |
返回 y 的余弦，返回值以弧度为单位 |
|
|
tan (y) |
返回 y 的正切，返回值以弧度为单位 |
|
|
min (x, y) |
返回 x 和 y 两个数中较小的数 |
|
|
max (x, y) |
返回 x 和 y 两个数中较大的数 |
|
|
random |
返回0-1的随机数 |
|
|
方法 |
round (y) |
四舍五入取整 |
|
sqrt (y) |
返回 y 的平方根 |
Math.random( ) ：产生0－1的随机小数
Math.round( )：四舍五入取整，如9.34 取整为9
数学运算 Math对象
• Math.ceil(x)返回>=x的最小整数
• Math.floor(x) 返回<=x的最大整数
• Math.pow(x,y)返回x的y次方
• Math.random()返回0-1之间的随机小数
• Math.round(x)返回x的四舍五入的整数
Date 对象
Data 方法的分组：
|
方法分组 |
说 明 |
|
setxxx |
这些方法用于设置时间和日期值 |
|
getxxx |
这些方法用于获取时间和日期值 |
|
Toxxx |
这些方法用于从 Date 对象返回字符串值 |
|
parsexxx & UTCxx |
这些方法用于解析字符串 |
用作 Date 方法的参数的整数：
|
值 |
整 数 |
|
Seconds 和 minutes |
0 至 59 |
|
Hours |
0 至 23 |
|
Day |
0 至 6（星期几） |
|
Date |
1 至 31（月份中的天数） |
|
Months |
0 至 11（一月至十二月） |
Set 方法：
|
方法 |
说明 |
|
setDate |
设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。 |
|
setHours |
设置 Date 对象中的小时数，其值介于 0 至 23 之间。 |
|
setMinutes |
设置 Date 对象中的分钟数，其值介于 0 至 59 之间。 |
|
setSeconds |
设置 Date 对象中的秒数，其值介于 0 至 59 之间。 |
|
setTime |
设置 Date 对象中的时间值。 |
|
setMonth |
设置 Date 对象中的月份，其值介于 1 至 12 之间。 |
Get 方法：
|
方法 |
说明 |
|
getDate |
返回 Date 对象中月份中的天数，其值介于 1 至 31 之间 |
|
getDay |
返回 Date 对象中的星期几，其值介于 0 至 6 之间 |
|
getHours |
返回 Date 对象中的小时数，其值介于 0 至 23 之间 |
|
getMinutes |
返回 Date 对象中的分钟数，其值介于 0 至 59 之间 |
|
getSeconds |
返回 Date 对象中的秒数，其值介于 0 至 59 之间 |
|
getMonth |
返回 Date 对象中的月份，其值介于 0 至11 之间 |
|
getFullYear |
返回 Date 对象中的年份，其值为四位数 |
|
getTime |
返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数 |
To 方法：
|
方 法 |
说 明 |
|
ToGMTString |
使用格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示 |
|
ToLocaleString |
使用当地时间格式将 Date 对象转换成字符串表示 |
Parse 方法和 UTC 方法
|
方 法 |
说 明 |
|
Date.parse (date string ) |
用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数 |
|
Date.UTC (year, month, day, hours, min., secs. ) |
Date 对象中自 1970 年 1 月 1 日以来的毫秒数 |
数组
• 声明数组
var 数组名 = new Array(数组大小);
• 常用属性
length：返回数组中元素的个数
• 常用方法
|
方 法 |
说 明 |
|
join |
将数组中的元素组合成字符串 |
|
reverse |
颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个 |
|
sort |
对数组元素进行排序 |
• Array对象常用的属性是length，排序方法：sort
• 循环语句分为：for 循环、while循环、do-while循环
• Eval( )函数可以计算某个计算表达式的值，
isNaN( )函数可用于判断是否是一个数字
• String对象的indexOf( )方法用于查找子字符串
• Math对象的random( )方法可以产生0－1的随机数
• Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间
Window 对象
• 窗口对象window是浏览器网页的文档对象模型结构中的最高级的对象，只要网页的html标记中包含有<body>或<frameset>标记，该网页就会包含一个窗口对象。
• window对象的常用属性和方法
属性
|
名称 |
说明 |
|
document |
表示给定浏览器窗口中的 HTML 文档。 |
|
history |
包含有关客户访问过的URL的信息。 |
|
location |
包含有关当前 URL 的信息。 |
|
name |
设置或检索窗口或框架的名称。 |
|
status |
设置或检索窗口底部的状态栏中的消息。 |
|
screen |
包含有关客户端的屏幕和显示性能的信息。 |
方法
|
名称 |
说明 |
|
alert (“m提示信息") |
显示包含消息的对话框。 |
|
confirm（“提示信息”） |
显示一个确认对话框，包含一个确定取消按钮 |
|
prompt（”提示信息“） |
弹出提示信息框 |
|
open ("url","name") |
打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档 |
|
close ( ) |
关闭当前窗口 |
|
setTimeout(”函数”,毫秒数) |
设置定时器：经过指定毫秒值后执行某个函数 |
|
clearTimeout(定时器对象) |
取消setTimeout设置 |
定时器的使用：实现延期执行或重复执行
• window对象提供了两种方法来实现定时器：
– window. setTimeout(表达式[expression],延时时间[n])
– window. setInterval(表达式[expression],延时时间[n])
注意：expression可以是用引号括起来的代码，也可以是一个函数名（不能带任何参数的函数）
• 如何取消定时器：
– 取消setTimeout：window.clearTimeout(id);
– 取消setInterval:window.clearInterval(id);
屏幕（screen）对象
• 屏幕对象是JavaScript运行时自动产生的对象
• 屏幕对象常用属性
– height：返回显示屏幕的高度。
– width ：返回显示器屏幕的宽度。
– availHeight ：返回显示屏幕的高度 (除 Windows 任务栏之外)。
– availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。
– colorDepth：返回目标设备或缓冲器上的调色板的比特深度（每像素中用于颜色的位数，其值为1,4,8,15,16,24,32）。
• 网页可见区域宽：document.body.clientWidth
• 网页可见区域高：document.body.clientHeight
• 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
• 网页可见区域高：document.body.offsetHeight (包括边线的宽)
• 网页正文全文宽：document.body.scrollWidth
• 网页正文全文高：document.body.scrollHeight
• 网页被卷去的高：document.body.scrollTop
• 网页被卷去的左：document.body.scrollLeft
• 网页正文部分上：window.screenTop
• 网页正文部分左：window.screenLeft
• 屏幕分辨率的高：window.screen.height
• 屏幕分辨率的宽：window.screen.width
• 屏幕可用工作区高度：window.screen.availHeight
• 屏幕可用工作区宽度：window.screen.availWidth
Location对象
• 处理地址栏信息：location对象
– Location对象是wodow对象的子对象，包含了窗口对象的网页地址内容，即URL。例如：
• window.location=“http://www.sohu.com”;//跳转到页面
• window.loaction.href=“http://www.sohu.com”;//同上
• window.location.reload();//刷新页面
• Window.location.replace(url);//用url刷新当前网页
Location 对象属性
|
名称 |
说明 |
|
host |
设置或检索位置或 URL 的主机名和端口号 |
|
hostname |
设置或检索位置或 URL 的主机名部分 |
|
href |
设置或检索完整的 URL 字符串 |
方法
|
名称 |
说明 |
|
assign("url") |
加载 URL 指定的新的 HTML 文档。 |
|
reload() |
重新加载当前页 |
|
replace("url") |
通过加载 URL 指定的文档来替换当前文档 |
历史记录（history）对象
• 历史记录对象是窗口对象下的一个子对象。它实际上是一个对象数组，包含了一系列的用户访问过的url地址，用于浏览器工具栏中的“前进”和“后退”按钮。
• 常用属性和方法
– history.length：历史对象的个数
– history.back();显示浏览器历史列表中后退一个网址的网页
– history.go(n)或者history.go(网址)：显示浏览器的历史列表中第n个网址的网页，n>0 前进 n<0 后退
– history.forward()；//显示浏览器历史列表中前进一个网址的网页
注意：如果参数n超过了历史列表中的网址个数，或者参数网址不在浏览器的历史列表中，这时不会出现任何错误，只是当前网页没有发生变化。
Document对象
• document文档对象是window对象的一个主要部分，它包含了网页显示的各个元素对象。
– document.write(str);//输出一行
– document.writeln(str);//输出一行，并回车
• 常用属性
|
名称 |
说明 |
|
alinkColor |
设置或检索文档中所有活动链接的颜色 |
|
bgColor |
设置或检索 Document 对象的背景色 |
|
body |
指定文档正文的开始和结束 |
|
linkColor |
设置或检索文档链接的颜色 |
|
location |
包含关于当前 URL 的信息 |
|
title |
包含文档的标题 |
|
url |
设置或检索当前文档的 URL |
|
vlinkColor |
设置或检索用户访问过的链接的颜色 |
常用方法
|
名称 |
说明 |
|
clear ( ) |
清除当前文档 |
|
close ( ) |
关闭输出流并强制显示发送的数据 |
|
write ("text") |
将文本写入文档 |
课堂重点
• JavaScript 程序是事件驱动程序
• onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反
• 浏览器对象是一个分层次的结构，window是顶层根对象
• 打开窗口使用window对象的open( )方法
• 设置定时器，使用window对象的setTimeout()方法
• history对象的back( )和forward( )方法等同于前进、后退按钮
Form对象及其元素对象
• Form对象：是文档对象的一个主要元素。Form对象中包含有许多用于收集用户输入内容的元素对象，例如，文本框、按钮等，通过这些元素对象，form将用户输入的数据传递到服务器端进行处理。
• 引用form对象
– 使用form标记中的name属性值
document.form1 document.form2
– 使用forms数组对象
document.forms[0] document.forms[1]
document.forms[“form1”]
• Form对象的常用属性、方法和事件
JavaScript 事件
|
事件名 |
说明 |
|
onClick |
鼠标单击 |
|
onChange |
文本内容或下拉菜单中的选项发生改变 |
|
onFocus |
获得焦点，表示文本框等获得鼠标光标。 |
|
onBlur |
失去焦点，表示文本框等失去鼠标光标。 |
|
onMouseOver |
鼠标悬停，即鼠标停留在图片等的上方 |
|
onMouseOut |
鼠标移出，即离开图片等所在的区域 |
|
onMouseMove |
鼠标移动，表示在<DIV>层等上方移动 |
|
onLoad |
网页文档加载事件 |
|
onSubmit |
表单提交事件 |
|
onMouseDown |
鼠标按下 |
|
onMouseUp |
鼠标弹起 |
文本框对象
• 文本框元素用于在表单中输入字、词或一系列数字
• 可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素
|
文 本 框 |
事件 |
onBlur |
文本框失去焦点 |
|
onChange |
文本框的值被修改 |
||
|
onFocus |
光标进入文本框中 |
||
|
方法 |
focus( ) |
获得焦点，即获得鼠标光标 |
|
|
select( ) |
选中文本内容，突出显示输入区域 |
||
|
属性 |
readOnly |
只读，文本框中的内容不能修改 |
按钮 - 事件处理程序
|
表单元素 |
事件处理程序 |
说明 |
|
命令按钮 |
onSubmit |
表单提交事件，单击“提交”按钮时产生，此事件属于<FORM>元素，不属于提交按钮 |
|
onClick |
按钮单击事件 |
复选框 - 事件处理程序
|
复选框 |
事件 |
onBlur |
复选框失去焦点 |
|
onFocus |
复选框获得焦点 |
||
|
onClick |
复选框被选定或取消选定 |
||
|
属性 |
checked |
复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 |
|
|
value |
设置或获取复选框的值 |
单选按钮 - 事件和属性
|
单选按钮 |
事件 |
onBlur |
单选按钮失去焦点 |
|
onFocus |
单选按钮获得焦点 |
||
|
onClick |
单选按钮被选定或取消选定 |
||
|
属性 |
checked |
单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 |
|
|
value |
设置或获取单选按钮的值 |
下拉列表框-事件和属性
|
下拉列表框 |
事件 |
onBlur |
下拉列表框失去焦点 |
|
onChange |
当选项发生改变时产生 |
||
|
onFocus |
下拉列表框获得焦点 |
||
|
属性 |
value |
下拉列表框中，被选选项的值 |
|
|
options |
所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推 |
||
|
selectedIndex |
返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推 |
课堂重点
• OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序
• 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序
• 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序
• 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序
• JavaScript的主要功能之一是用于表单验证
