ACCP5.0 第二学期JavaScript小总结_accp5.0 s2 javascript-优快云博客

第1章 JavaScript的基本语法< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

1. 了解JavaScript

经验：可以将JavaScript语句放置在HTML文档中的任何位置。然而，将核心脚本语言放置在标签<Head>…</Head>之间是一个良好的编程习惯，因为这确保了所有代码在从Body部分调用之前被阅读和执行。

2. JavaScript的基本语法

a) 变量的声明和赋值

语法：

var 合法的变量名；

var 是声明变脸所使用的关键字；

也可以在一行代码中声明多个变量，各变量之间用逗号分隔，例如：
var x,y,z = 10;

在JavaScript中允许不声明变量而直接使用，系统会自动声明该变量。

b) 运算符号

算术运算符：包括+、-、*、/、%、++、--、-（求反）

比较运算符：包括<、>、<=、>=、==、!=

逻辑运算符：包括！、&&、||

赋值运算符：包括=及其扩展赋值运算符

c) 逻辑控制语句

分为3类：条件语句、循环语句、switch语句。

（1）条件语句的基本语法

if（表达式）

{JavaScript语句1；}

else

{ JavaScript语句2；}

（2）循环语句的基本语法

for（初始化；条件；增量或减量）

{JavaScript语句；}

while（条件）

{JavaScript语句；}

（3）switch语句的基本语法

switch（表达式）

{

case 变量值1；JavaScript语句1；

case 变量值2；JavaScript语句2；

case 变量值3；JavaScript语句3；

….

default: JavaScript语句4；

}

3. 注释：

单行注释以 //开始多行注释以/*开始，以*/结束。

4. 类型转换

JavaScript提供了两种数据类型的转换方法：一种是基本数据类型转换，与Java中的数据类型转换相似；另一种是从一个值中提取另一种类型的值，并完成转换工作。

完成数据类型的转换方法有两种：parseInt()和parseFloat();

如果parseFloat()函数发现一个字符，而不是符号数字（0~9）、小数点或指数，它将忽略该字符和紧跟在其后的所有其他字符。如果无法转换第一个字符，此函数将返回“NaN”(Not a Number，非数字)

5. 定义函数

function 函数名（参数列表）

{

//JavaScript语句；

}

function是定义函数的关键字。如果需要返回结果使用return语句。

函数的定义放在<SCRIPT>与</ SCRIPT >之间。

6. 调用函数

事件名=”函数名”

对比

形式参数：定义函数时为函数定义的参数，它代表参数的类型和位置。

实际参数：调用函数时传递给函数的参数值。

进行函数调用时，主调函数将把实参的值传递给形参，供被调用函数使用。

调用函数时如果有参数参数要加“‘’”（单引号）把参数括起来。

在

7. 获取表单数据

语法：

document.表单名.表单元素名.value

document.write（“内容”）

document.getElementById（id号）

第2章 DOM编程-Window对象

1. DOM(Document Object Model)对象

通过使用document对象的getElementById(‘id名称’)方法可以访问文档元素。

ACCP5.0 第二学期JavaScript小总结 - 楿見芣洳懷淰 - 楿見芣洳懷淰的博客

浏览器对象的分层结构

2. window对象常用的属性、方法、事件

window对象的常用属性

名称	说明
status	指定浏览器状态栏中显示的临时消息
screen	有关客户端的屏幕和显示性能的信息
history	有关客户访问过的url的信息
location	有关当前url的信息
document	表示浏览器窗口中的html文档

window对象的常用方法

名称	说明
alert（“提示信息”）	显示一个带有提示信息和确定按钮的对话框
confirm(“提示信息”)	显示一个带有提示信息、确定和取消按钮的对话框
open(“url”,”name”)	打开具有指定名称的新窗口，并加载给定url所指定的文档；如果没有提供url，则打开一个空白文档
close()	关闭当前窗口
showModalDialog()	在一个模式窗口中显示指定的HTML文档

在使用window对象的属性和方法是可以省略window对象的名称。

但是使用层、框架和多个窗口时，就不能省略window对象的名称。

语法：

open(“打开窗口的url”,”窗口名”,”窗口特征”)

窗口特征属性

名称	说明
height	窗口的高度
width	窗口的宽度
toolbars	浏览器工具条，包括“后退”和“前进”按钮等，是否显示工具栏，yes为显示
scrollbars	是否显示滚动条
menubar	表示菜单栏
location	是否显示地址栏，yes或1为是，no或0为否
status	是否显示状态栏内的信息（通常是文件已经打开），yes或1为允许
resizable	是否允许改变窗口的大小，yes为1为是，no或0为否

还可以使用<A href=”javascript:openwindow()”></A> 将文本的超链接href属性，改为调用JavaScript语句openwindow(), 值得注意的是一定要在超链接href属性后加上前缀“javascript：”，否则href属性会解析为超链接的文件名。

通过超链接来调用JavaScript语句，当JavaScript语句较少时，可以直接插入代码，如<A href=”javascript:history.go(1);”>后退</A>；当JavaScript语句较多时，应把语句放在一函数中，然后调用函数，如<A href=”javascript:openwindow()”></A>

语法：

showModalDialog(“打开对话框的url”,”对话框名”,”对话框特征”)

对话框特征属性

名称	说明
dialogheight	对话框的高度，后边要加单位px 用“；”隔开
dialogwidth	对话框的宽度，后边要加单位px 用“；”隔开
scroll	是否显示滚动条

3. Date对象常用的方法

Date对象是内置对象，它包括日期和时间两个信息。

语法：

var 日期对象 = new Date(参数)；

其中，日期对象是存储新Date对象的变量。

参数可以是以下任意一种形式。

（1）没有参数，即如果没有指定参数，则表示当前日期和时间，例如：

var today = new Date();

将当前日期和时间存储在变量today中。

（2）字符串——以格式“MM DD,YYYY,hh:mm:ss”表示日期和时间，例如：

var tdate = new Date(“July 29, 2008,10:30:< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />00”);

Date对象的方法组

方法组	说明
setXxx	这些方法用于设置时间和日期值
getXxx	这些方法用于获取时间和日期值

显示值及其对应的整数

值	整数
Seconds(秒)和minutes(分钟)	0~59
Hours	0~23
Day	0~6（星期中的每一天）
Date	1~31（一个月中的每一天）
Months	0~11（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()	返回Dat对象的年份，其值为4位数
getTime()	返回自某一时刻(1970年1月1日)以来的毫秒数

使用set分组的方法

方法	说明
setDate()	设置Date对象的一个月中的每一天，其值介于1~31之间
setDay()	设置Date对象的星期中的每一天，其值介于0~6之间
setHours()	设置Date对象的小时数，其值介于0~23之间
setMinutes()	设置Date对象的分钟数，其值介于0~59之间
setSeconds()	设置Date对象的秒数，其值介于0~59之间
setMonth()	设置Date对象的月份，其值介于0~11之间
setFullYear()	设置Date对象的年份，其值为4位数
setTime()	设置Date对象中的事件值

4. setTimeout()方法属于window提供的方法。

setTimeout()方法表示每隔多少时间，循环调用某个函数执行。如果每隔一秒调用函数disptime();

语法格式如下：

setTimeout(“disptime()”,1000);

其中，setTimeout为内置函数名，disptime()为被调用的自定义函数，并且是每隔1000毫秒就被调用一次。

注意：setTimeout(“disptime()”,1000)要写在disptime()函数中

如果要打印钟表时不能使用document.write()来打印，应该使用文本框标签来循环显示。

停止计时器用方法clearTimeout(“所停止的函数名”);

setInterval(“循环的函数名称”,1000); 此方法可以放在函数外面

5. history对象

history对象是通过JavaScript运行时引擎自动创建的，并且是由一系列URLs组成的。

history对象的方法

名称	说明
back()	加载history列表中的上一个URL
forward()	加载history列表中的下一个URL
go(“url” or number)	加载history列表中被指定的URL，或要求浏览器移动指定的页面数

6. location对象

location对象是通过JavaScript运行时引擎自动创建的此对象相当于IE浏览器中的地址栏。

location对象的属性

名称	说明
host	设置或返回URL的主机名和端口号
hostname	设置或返回URL的主机名部分
href	设置或返回完整的URL字符串

对比：

location.href属性包含的URL与document.URL属性相同，但document.URL的属性只能返回不能修改，而location.href的属性是可以修改的，因此可以使用location.href来打开新页面。

location对象的方法

名称	说明
assign(“url”)	加载URL指定的新的HTML文档
reload()	重新加载当前页
replace(“url”)	通过加载URL指定的文档来替换当前文档

第3章 DOM编程-document对象

1. document对象常用的属性

document对象常用的属性是bgColor，它用来设置文档的背景颜色。

利用bgColor属性，可以动态改变页面文档的背景色。

2. document对象常用的方法

document对象常用的方法

名称	说明
getElementById()	根据HTML元素指定的ID,获得唯一的一个HTML元素，如访问DIV层对象、图片Img对象等。获取第一个对象
getElementsByName()	根据HTML元素指定的name，获得相同名称的一组元素，如访问表单元素（全选功能）

利用DIV层和JavaScript可以实现浮动的广告图片。

要用到window的onscroll属性移动滚动条时触发事件。

3. 制作带关闭按钮的浮动窗口

要设置层的display属性使其隐藏即none；显示属性为block；

制作带关闭按钮的浮动窗口要用到style的display、pixelTop属性

和body 的scrollTop属性

4. JavaScript写成单独的文件

当将JavaScript脚本放入外部JS文件中时，必须使用document.getElementById()或getElementsByName(),而不能使用document.formName.contolName的办法。

在<script src=”show.js”>调用js文件在同一个文件夹下可以直接进行调用。

5. 制作全选效果

要用到document的getElementsByName属性来获取相同名称的元素。

在传参时true或false 不能加单引号。

第4章 CSS样式特效

1. 制作改变字体大小的样式特效

一般标签都有onMouseOver、onMouseOut等事件。

可以设置style对象的fontSize属性来设置字体的大小。

2. 制作改变按钮背景图片的特效

如果写有css样式

在按钮上要用this.className此属性来设置掉用哪个类样式。

3. 层的属性display

语法：

Object.sytle.display=”value”;

value常用的取值

参数值	说明
block	默认值。按块显示，换行显示，用该值为对象之后添加新行
none	不显示，隐藏对象
inline	按行显示，和其他元素在同一行显示

设置层的z-index属性数值大的显示在最上面。

第5章基本的表单验证技术

1. 表单验证的作用：（1）避免信息无法更新或出现新错误（2）减轻服务器端的压力。

2. 字符串对象引用属性和方法

语法：

字符串对象.属性名或字符串对象.方法名()

创建字符串有以下两种不同的方法。

（1）使用var语句，并根据需要为其赋值例：

var newstr = “这是我写的脚本”

（2）创建字符串对象例：

var newsstr = new String（“这是我写的脚本”）

字符串对象的常用属性只有一个，即length。表示字符串中字符个数，包括所有符号（如空格等）。

String 对象的方法

方法名	说明
indexOf(“子字符串”,起始位置)	查找子字符串的位置，这个位置是要查找的文本出现的第一个位置
charAt(index)	获取位于指定索引位置的字符
substring(index1[,index2])	返回位于指定索引index1和index2之间的字符串，并且包括索引index1所对应的字符，不包括索引index2对应的字符
toLowerCase( )	将字符串转换成小写
toUpperCase()	将字符串转换成大写

最常用的是indexOf()方法，如果找到了，则返回找到的位置，否则返回-1。

3. 文本框控件

文本框对象的事件处理程序

文本框	事件	onBlur	失去焦点事件，当光标离开某个文本框时触发
		onFocus	光标进入某个文本框
		onChange	文本框的内容被修改，即发生了改变
	方法	focus()	获得焦点，即获得鼠标光标
	方法	select()	选中文本内容，突出显示输入区域
	属性	valu	设置或获得一个文本框值属性的值

第6章表单验证的相关事件和辅助特效

1. 制作图片代替按钮的提交效果

用图片代替按钮设置的onClick事件来代替表单标签的onSubmit事件，即可以触发图片按钮的onClick事件来调用与触发onSubmit事件调用的脚本验证函数一样的函数。

由于图片不具备“提交”按钮的提交功能，而提交方法submit()属于form对象的方法，所以可以通过document对象来访问页面中的表单，然后通过表单来调用submit()方法。

例：

if（条件）

{

//条件成立

}else

document.myform.submit();

2. 制作回车切换输入的效果

需要使用键盘输入事件onKeyDown事件，它是当键盘上的一个键被下压时，就会发生onKeyDown事件。因此回车键能够触发onKeyDown事件。

在JavaScript相关函数中，只要能实现把回车键（Unicode码13）的keyCode改为Tab键（Unicode码9）的keyCode，就能实现回车键代替Tab键的功能。

例：

function 函数名(){

if(event.keyCode==13 &&

event.srcElement.type!=’button’ &&

event.srcElement.type!=’submit’ &&

event.srcElement.type!=’reset’ &&

event.srcElement.type!=’textarea’ &&

event.srcElement.type!=’ ’ )

event.keyCode=9;

}

document.onKeyDown=函数名； //后面不要加小括号

“event.srcElement”表示返回触发事件的元素，

“event.srcElement.type”表示捕获的事件元素的类型，对应HTML中元素的type值。

document对象的onKeyDown事件，将接收HTML文档中所有的键盘事件。

对比：

（1）Unicode为任何平台、任何程序和任何语言提供了一种统一的字符编码方法，它是由国际组织设计，并且由16位二进制数组成，可以表示世界上所有国家语言文字的一种编码方案，也包括美国信息互换标准代码ASCII.

（2）ACCII是20世纪60年代美国制定的一套字符编码，是大多数计算机用于表示字符的标准数字代码。它用7个二进制位来表示，可以表示128种字符，例如大写字母A~Z的ASCII值为65~90，小写字母a~z的ASCII值为97~122。

3. 制作输入提示的特效

需要用到onBlur事件也就是失去焦点时发生的事件。和DIV层的内容动态显示或隐藏来实现。

例：

var myDIV = document.getElementById(“loginError”);

myDIV.innerHTML= “”;

var strName=document.userfrm.loginName.value;

if(strName.length==0)

{

myDIV.innerHTML=”<font color=’red’>用户名不能为空</font>”

return；

}

4. 制作内容动态改变的层特效。

需要设置，两个层切换显示和隐藏。

第7章表单验证的高效特效

1. 下拉列表框控件select

下拉列表框使用<select>和<option>两个标签共同创建。<select>标签定义选择列表的特性，<option>标签指定各个列表项。

下拉列表框的常用事件、属性和方法

下拉列表框	事件	onChange	当选项发生改变时产生
	属性	value	下拉列表框中被选选项的值
		options	所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0],第二个即为options[1]，其他以此类推
		selectedIndex	返回被选择的选项的索引号，如果选中第一个则返回0，第二个则返回1，其他类推
		length	返回下拉菜单中的选项个数
		multiple	显示所有项
	方法	add(new,old)	将新的option对象new插入到option对象old前面，如果old为空，那么直接插入到末尾

2. 实现简单的省市级联的效果

使用var newOption = new Option(“列表框中要显示的值”,”option被选中时返回的值”);

使用add()方法为下拉列表添加选项，

如:document.myform.selCity.options.add(newOption) 表示在下拉列表selCity中添加了一项newOption;

3. 使用数组优化省市级联功能

数组时具有相同数据类型的一个或多个值的集合。

（1）创建数组

语法：

var arrayObjectName = new Array(size);

arrayObjectName是数组（对象）的名称，new是用来创建对象的关键字，Array表示数组的关键字，而size 表示arrayObjectName可容纳的元素总数。

（2）为数组元素赋值

var emp;

emp = new Array(“Ryan Dias”,”Graham Browne”,”David Greene”);

也可以分别为数组元素赋值。

例：

var emp = new Array(3);

emp[0]=”aaaaa”;

emp[1]=”aaaaa”;

emp[2]=”aaaaa”;

（3）数组的常用属性和方法

数组的属性：数组的length属性用于返回数组中的元素个数。返回值为整型。

数组的常用方法

方法	说明
join(分隔符)	以指定的分隔符将数组元素一次拼接起来，形成一个字符串并返回
sort()	对数组元素进行排序，按英文字母顺序或汉字的拼音方式排序