ACCP5.0 第二学期JavaScript小总结
来源：互联网 发布：bbc知乎 编辑：程序博客网 时间：2024/05/18 17:01
第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名称’)方法可以访问文档元素。
浏览器对象的分层结构
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);
}
- ACCP5.0 第二学期JavaScript小总结
- ACCP5.0 第一学期.NET小总结
- ACCP5.0 第二学期 SQL Server数据库设计和高级查询 小总结
- ACCP5.0 深入.NET平台和C#编程 小总结
- 大二第二学期总结
- 学期小总结
- 学期小总结
- 大三第二学期开学总结
- 大一第二学期五一长假【总结反思】
- 大四下学期小项目实习总结
- accp5.0s1Java内测
- 大一第二学期第2周【总结反思】
- 学期总结!
- 学期总结
- 学期总结
- 学期总结
- 学期总结
- 学期总结
- C/C++ Strict Alias相关的问题(实例)
- DataGard（搭建版）
- ACCP5.0 第二学期 SQL Server数据库设计和高级查询 小总结
- JavaScript获取页面高度（多种浏览器）
- [Qt] postevent emit ----event与signal
- ACCP5.0 第二学期JavaScript小总结
- 跨域请求之JSONP
- 五年后你在何方
- GridPanel中日期列更改显示
- ACCP5.0 第一学期.NET小总结
- DataGard（维护版）
- 70后掌控,80后主导,90后路在方？
- Mongodb安全性初探
- mongodb分布式文档存储数据库
