JavaScript整合

JavaScript已经学完了，总体感觉良好，但是突然发现原来JS可以做的东西比我想象的还要多！我整理了一些JavaScript的基础知识，这些内容掌握好的话，对我们深入学习JavaScript会有很大的帮助！

《JavaScript客户端验证和页面特效制作》基础知识文档

目 录

第1章 JavaScript的基本语法… 3
第2章 DOM编程—window对象… 4
第3章 DOM编程—document对象… 9
第4章 CSS样式特效… 10
第5章 基本的表单验证技术… 11
第6章 表单验证的相关事件和辅助特效… 14
第7章 表单验证的高级特效… 15

第1章 JavaScript的基本语法

Q/A

1. JS脚本执行原理。

答： 用户通过浏览器提交申请给网站服务器，服务器在接收到正确的请求后，将HTML和JS代码段发送回客户端的浏览器，浏览器通过解析引擎将HTML和JS代码解读成人们可以正常阅读的网页界面。

2. 类型转换的方法。

答： parseInt()方法可以将一个逻辑值转换为整形值；parseFloat()方法可以将一个逻辑值转换为浮点型值；toString()方法可以将一个逻辑值转换为字符串。

 

3. NaN的含义，isNaN的作用。

答： NaN的含义：Not a Number 不是一个数；isNaN的作用是判断当前的值是不是一个数，如果为true则表示不是一个数，如果为false表示是一个数。

 

 

第2章 DOM编程—window对象

Q/A

1. window对象的常用属性及含义

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

 

2. window对象的常用方法及作用（至少写5个）

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

 

3. 简述open方法各参数的含义

答： open(“打开窗口的URL”, “窗口名”, “窗口特征”)，窗口特征包括如下内容：

名 称	说 明
height	窗口高度
width	窗口宽度
toolbars	工具栏
scrollbars	滚动条
menubar	菜单栏
location	地址栏
status	状态栏
resizable	改变窗口大小

上述属性中yes或1为允许或显示，no或0为不允许或不显示。

4. 简述open方法和showModalDialog方法的区别。

答： open是打开一个全新的窗体，并且和之前的窗体已再无关系，而showModalDialog则是打开一个子窗体，该子窗体和之前的父窗体具备父子关系，当子窗体尚未执行完之前，父窗体将无法执行任何操作。

 

5. 简述窗口特征值

名 称	说 明
height	窗口高度
width	窗口宽度
toolbars	工具栏
scrollbars	滚动条
menubar	菜单栏
location	地址栏
status	状态栏
resizable	改变窗口大小

上述属性中yes或1为允许或显示，no或0为不允许或不显示。

 

6. Date对象常用方法

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对象的年份，其值为4位数
getTime()	返回自1970年1月1日依赖的毫秒数

set方法：

方 法	说 明
setDate()	设置Date对象的一个月中的每一天，其值介于1~31之间
setHours()	设置Date对象的小时数，其值介于0~23之间
setMinutes()	设置Date对象的分钟数，其值介于0~59之间
setSeconds()	设置Date对象的描述，其值介于0~59之间
setTime()	设置Date对象内的时间值
setMonth()	设置Date对象中的月份，其值介于0~11之间
setFullYear()	设置Date对象的年份值

 

7. history对象常用方法

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

 

8. location对象常用属性

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

 

9. location对象常用方法

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

 

 

第3章 DOM编程—document对象

1. document对象常用方法和属性

属性：

bgColor：document.bgColor=”#000”;

用于设置背景色的属性

方法：

名 称	说 明
getElementById()	根据HTML元素指定的ID，获得唯一的一个HTML元素
getElementsByName	根据HTML元素指定的name，获得相同名称的一组元素

 

2.带关闭按钮的浮动广告制作方法：①.首先，写好相应的HTML代码；②.然后，编写JS代码使层动起来；③.再新增一个层，并定位到前一个广告层的右上角或右下角并编写同时关闭2个层的代码（即：将2个div层的display属性设置为none）。

3.全选/反选/全不选按钮的制作方法：将复选框的name设置为一组相同的名称，然后使用 getElementsByName方法获取页面中的所有该名称的控件，然后使用for循环遍历整个文档（即：将文档作为数组，通过for循环遍历文 档.length），并将其中的checked属性修改为true或者false，即可实现全选或全不选，如果是反选则在遍历的时候赋值时使用 checked=!checked即可。

第4章 CSS样式特效

1. 简述一下样式的作用：

position, pixelTop, offsetWidth, display, background-image,

border-left-style, z-index, font-style, font-family, text-decoration

答： position：设置HTML容器元素的位置；pixelTop：获取元素距离Window顶部的距离，不包含px后缀；offsetWidth：获取 该元素的宽；display：设置元素的显示方式；background-image：设置背景图片；border-left-style：设置左边框样 式；z-index：设置当前元素Z轴的坐标；font-style：设置字体倾斜；font-family：设置使用何种字体；text- decoration：设置字体下划线。

 

2.简述display的value属性值的含义

答： display的value常用取值

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

 

 

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

1. 表单验证的作用及验证的范围：

作用：①.避免信息无法更新或出现新错误；②.减轻服务器端的压力；

范围：①.检查表单元素是否为空；②.验证是否为数字；③.验证用户输入的邮件地址是否有效；④.检查用户输入的数据是否在某个范围；⑤.验证用户输入的信息长度是否足够；⑥.检查用户输入的出生日期是否有效。

 

2. String对象的属性和常用方法：

属性：length

方法：

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

 

3. 正则表达式常用符号：

基本符号	说 明
.	匹配任意字符
[]	当前位置有且只有限定范围内的一个字符。 例：[abc]
()	当前位置有且只有当前括号中的字符串。 例：(abc)
|	等同于逻辑运算符“或”。 例：(abc|[abc])
^	等同于逻辑运算符“非”。 例：[^0-9]
数量集符号	说 明
*	表示位数从0位到正无穷大位。 例：[0-9]*
+	表示位数从1位到正无穷大位。 例：[0-9]+ (至少有一位数字)
?	重复0次或1次 例：[a-z]?
{n}	重复n次。 例：[a-z]{3}
{n,m}	重复n次到m次，如果m不填写则表示无穷大。例：[A-Z]{2,10}
特殊符号	说 明
w	表示可以使用[_$a-zA-Z0-9]的所有字符
W	表示可以使用[_$a-zA-Z0-9]以外的所有字符
d	表示[0-9]之间的字符
D	表示[0-9]以外的字符
b	表示一个字符串的开头和结尾。 例：b[a-z]+b 表示以a-z字母开头的所有字符串

 

4. 文本框对象的事件处理：

文本框	事件	onBlur	失去焦点事件，当光标离开某个文本框时触发
		onFocus	光标聚焦事件，当光标聚焦某个文本框时触发
		onChange	值更改事件，当文本值更改且失去焦点时触发
	方法	focus()	获得焦点
		select()	选中文本内容
	属性	value	设置或获得一个文本框值属性的值

 

 

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

1．图片按钮提交表单的方法：图片的onclick事件中调用document.myform.submit()方法，onclick不能触发form的onSubmit事件，只有submit按钮可以触发。

 

2．制作回车切换输入框的方法：使用onkeydown事件监视键盘按键的点击事件，当使用event.keyCode捕捉到键盘按键 unicode码传入的是13时，这时就表示敲击的是键盘的回车键。此时，将event.keyCode的值修改为9即可实现回车键换行的效果。与此同 时，我们还需要过滤掉文本框以外的对象出现换行效果，例如A标签、按钮、textarea等。

 

3．event.srcElement、event.fromElement、event.toElement的区别：srcElement获取到 的是来源对象，可以通过.type,.text等属性来获得其中的值；fromElement是从哪个标签来，toElement是到哪个标签去。

 

4．onkeydown、onkeyup、onkeypress的区别和用法：onkeydown和onkeyup是onkeypress的分解动 作，onkeydown是当按下按键时触发的事件，onkeyup是当抬起按键时触发的事件，而onkeypress则是完成这2个动作后触发的事件。 onkeypress只能监控到字符键、空格键、回车键和组合按键，而onkeydown和onkeyup可以监控到所有单个按键但是不能监控到组合按 键。此外，onkeydown触发的事件是在得到按键值之前触发的，所以在使用这3个属性时需要考虑清楚具体应用场合。

5．制作输入提示特效的方法：文本框输入内容后发生onBlur事件时判断输入的内容是否符合要求，如果不符合要求，则在相应的td标签或div标签中给出错误提示即可。

 

 

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

1. 下拉列表框常用事件、属性和方法：

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

 

1.数组的应用：

① .JS的数组仅支持一维数组：但是可以通过将一个数组存入另一个数组的方式模拟出多维数组。且JS的数组是变长的。

②
.
JS数组声明方式：

a)
var
a = new Array(“my”,“you”,“find”,“this”);

b)
var
a = new Array(3);

a[0] = “my”;

a[1] = “you”;

a[2] = “find”;

a[3] = “this”;

c)
var
a = [“my”,“you”,“find”,“this”];

③
.
数组的访问：可以通过数组值的下标或者键值对去访问。

④
．数组的常用属性和方法：

a)
属性：length。length只能够返回具有下标索引的值，如果数组中的某个元素使用了键值对的方式，length将获取不到该位。如果需要遍历带有键值对的数组我们也可以使用for(variable
in object){}循环（类似C#的foreach）来遍历数组中的每一个元素。

b)
方法：

方 法	说 明
join()	将数组拼接为字符串的方法，括号中填写内容: “可以没有内容”
concat()	将2个数组连接成1个数组，连接对象被拆分出来连接到被连接的对象
sort()	排序方法
reverse()	反转方法
pop()	彻底取出最后一位元素，取出后原数组中的值会被删除
push()	往数组的最后一位添加一个元素
shift()	彻底取出第一位元素，取出后原数组中的值会被删除