
(1)parseInt
parseInt函数将字符串转换为整数。它从字符串的开头开始解析,在第一个非整数位置停止解析并返回前面读到的所有整数。如果字符串不是以整数开头,将返回NaN(Not a Number:非数字值)。
(2)parseFloat
parseFloat()函数和parseInt()函数类似,只不过它是返回一个浮点数
(3)isNaN
isNaN() 函数用于判断参数是否是NaN(不是数字)。如果是 NaN, 那么 isNaN 函数返回 true ,否则返回 false。
计算输入两个文本框的数字之和。在两个文本框都修剪了左右两边的空格,仍输入了数据的前提下,验证输入的是否是数值字符串,如果是,把两个数据之和显示在第三个文本框,反之,则给予错误提示。
function calc(){
var num1=document.getElementById("op1").value;
var num2 = document.getElementById("op2").value;
if (num1.trim()!= "" && num2.trim() != "") {
if (!isNaN(num1) && !isNaN(num2)) {
document.getElementById("result").value = parseFloat(num1) + parseFloat(num2);
} else {
alert("请输入正确的数值");
}
} else {
alert("请输入两个操作数");
}
}
根据id属性获取文本框后,使用其value属性进一步得到内容
trim():修剪空格
弹出消息框
(4)eval()
运行以字符串形式表示的javascript代码串,并返回执行代码串后的结果。
例子:计算用户输入在文本框的表达式的计算结果。
2 事件与处理程序的绑定
(1)在事件源对象所对应的html标签上增加一个要处理的事件属性,让事件属性值等于处理该事件的函数名或程序代码。
当单击段落时,文本的大小改成30px
function changeSize(){
var obj=document.getElementById("txt");
obj.style.fontSize="30px";
}
......
事件与处理程序的绑定
2)用匿名函数来简化,即事件名=function(){…}。
onclick事件
鼠标单击页面元素时触发的事件
function showGender(obj){
alert("您选择的性别是:"+obj.value);
}
......
性别:男
女
onload和onunload事件
onload 事件会在页面加载完成后立即发生
用户关闭或刷新网页时触发onunload事件
设置window对象的status属性表示显示在浏览器状态栏上的文本
onblur事件
onblur事件是指光标或者焦点离开元素后触发的事件
验证用户输入的密码长度是否在6位以上。
请输入密码:
......
function checkPwd(){
var pwd=document.getElementById("txtPwd").value;
if(pwd.length>=6){
alert("密码输入正确");
}else{
alert("密码的长度必须在6位以上");
}
}
onchange事件
onchage事件通常指输入框的值发生了变化或者改变下列列表框的选项会触发onchange事件。
在下拉列表框中选中友情链接后,窗口打开指定的页面。
window对象open方法的功能是打开新窗口并载入给定URL的文档
.......
function changeLink(obj){
var site=obj.value;
if(site!="请选择"){
window.open(site);
}
}
onmouseover和onmouseout事件
onmouseover和onmouseout事件是指鼠标移入、移出页面元素时触发的事件。
当鼠标移入到滚动的图片时,图片停止滚动,当鼠标移出图片时,图片继续滚动。
3浏览器默认的事件处理程序
单击表单元素的“提交按钮“会触发form标签的onsubmit事件,浏览器对这个事件的默认处理方式是提交数据给action属性指定的页面进行处理。如果要让用户在单击“提交按钮”后不提交数据到指定的页面,就需要编写一个事件处理程序,来改变浏览器对form标签的onsubmit事件的默认处理方式
......
浏览器执行完事件处理程序后,还会去执行该事件的默认动作,如onsubmit事件的默认动作是跳转页面。在check函数中,设置event对象的returnValue属性值为false,就表示要取消浏览器对当前事件的默认处理,这里是指让浏览器不再跳转到info.html页面。
要取消浏览器对当前事件默认处理,可以在html标签的事件属性设置中使用return false语句。
–验证用户是否输入了姓名,如果输入了则提交表单。
function check(){
var userName=document.getElementById("name").value;
if(userName==""){
alert("请输入用户名");
return false;
}
return true;
}
......
获取输入在id="name"文本框的内容
4 浏览器对象模型( Browser Object Model )
一个完整的浏览器对象模型主要包括window、history、location和document等对象,其中window对象是整个浏览器对象模型的顶层对象。各个对象所处位置及其关系如下图所示:
window对象
window对象处于对象模型的第一层,对于每个打开的窗口,系统都会自动将其定义为window对象。
window常用的属性
| 属性 | 含义 |
| document | 窗口中当前显示的文档对象 |
| history | History对象保存窗口最近加载的URL |
| location | 当前窗口的URL |
| status | 状态栏文本 |
| 方法 | 说明 |
| prompt | 显示可提示用户输入的对话框 |
| alert | 显示带有一个提示消息和一个确定按钮的警示框 |
| confirm | 显示一个带有提示信息、确定和取消按钮的确认框 |
| close | 关闭浏览器窗口 |
| open | 打开一个新的浏览器窗口,加载给定URL所指定的文档 |
| setTimeout | 在设定的毫秒数后调用函数或计算表达式 |
| setInterval | 按照设定的周期(以毫秒计)来重复调用函数或表达式 |
| clearInterval | 取消重复设置,与setInterval对应 |
利用窗口对象的open、close方法打开、关闭窗口。
open方法的返回值是打开的window的对象。Open方法的第一个参数是新窗口的URL,第二个参数是给新窗口的命名,第三个参数是设置新窗口的特征。常见的特征如下表:
| 名称 | 说明 |
| height、width | 窗口文档显示区的高度、宽度。单位为像素 |
| left、top | 窗口的x坐标、y坐标。单位为像素 |
| toolbar=yes | no |1 | 0 | 是否显示浏览器的工具栏。黙认是yes |
| scrollbars=yes | no |1 | 0 | 是否显示滚动条。黙认是yes |
| location=yes | no |1 | 0 | 是否显示地址地段。黙认是yes |
| status=yes | no |1 | 0 | 是否添加状态栏。黙认是yes |
| menubar=yes | no |1 | 0 | 是否显示菜单栏。黙认是yes |
| resizable=yes | no |1 | 0 | 窗口是否可调节尺寸。黙认是yes |
| titlebar=yes | no |1 | 0 | 是否显示标题栏。黙认是yes |
使用setTimeout方法或者setInterval方法,制作小女孩看书的动画
var i = 1;//保存动画当前播放的静态画面的索引
function change(){
if(i<4){
i++;
}else{
i = 1;//播放到最后一幅时,再从头开始
}
}
var dh;
function play() {
dh = setInterval("change()", 100);;
}
function stop() {
clearInterval(dh); //取消反复执行
}
history对象
–history对象保存了当前浏览器窗口打开文档的一个历史记录列表,使用history对象,可以将当前浏览器页面跳转到某个曾经打开过的页面。获取histroy对象是通过window对象的history属性。history对象有三个方法:
| 方法 | 描述 |
| back() | 后退一个页面,相当于浏览器后退按钮 |
| forward() | 前进一个页面,相对于浏览器前进按钮 |
| go() | 打开一个指定位置的页面 |
•location对象
location对象用于管理当前打开窗口的URL信息,相当于浏览器的地址栏。location对象通过window的location获取属性,location对象的常用属性和方法如下表:
| 名称 | 描述 |
| href属性 | 获取或设置网页地址 |
| reload方法 | 重新加载当前页面,相对于浏览器的刷新按钮 |
function changeURL(){
//获取选择的列表项的值
var url=document.getElementById("sel").value;
//设置当前浏览器窗口的地址栏url
window.location.href=url;
}
......
