第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小总结 - 楿見芣洳懷淰 - 楿見芣洳懷淰的博客](http://img763.ph.126.net/SNTDzbeDTUlccY-UkMh85Q==/1627769790319276265.png)
浏览器对象的分层结构
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() | 对数组元素进行排序,按英文字母顺序或汉字的拼音方式排序 |
经验:在JavaScript中,数组的成员可以是任何对象,如布尔值、字符串、函数甚至其他数组,还可以是不同类型的数据。
例:
var cityList = new Array();
cityList[‘ddd’]=[‘aa’,’aaa’,’bb’,’dd’];
cityList[‘eee’]=[‘aa’,’aaa’,’bb’,’dd’];
cityList[‘ffff’]=[‘aa’,’aaa’,’bb’,’dd’];
var pindex=document.myform.seleProvince.value; //省级下拉列表中的值
var newOption;
document.myform.selCity.options.length=0; //清空“城市”下拉框内容
for(var j in cityList[pindex])
{
newOption = new Option(cityList[pindex][j],cityList[pindex][j]);
document.myform.selCity.options.add(newOption);
}