回顾
- 函数预加载:在页面编译的时候就将函数编译到内存中,就可以先调用,再定义。
- 通过arguments关键字可以实现传递的参数个数不一样
- 事件:以on开头的都是事件
- 事件后面肯定有事件处理程序,事件处理程序一般都是函数
-
函数调用
- 方法一:<标签 事件=’函数()’>
- 方法二:对象.事件=函数
- 匿名函数:没有名字的函数
- 匿名函数自调用 (匿名函数)();
-
return
- 作用一:终止函数的执行
- 作用二:从函数内部将值返回到调用处
-
变量的作用域
- 全局变量:供整个页面使用
- 局部变量:在函数内部使用变量,注意在函数内部通过var声明的变量是局部变量,不通过var声明的是全局变量。
-
Js嵌入到页面的方法
- 方法一:直接写在事件处理程序中 <p onclick=’alert(‘锄禾日当午’)’>
- 方法二:通过<script>开头,</script>结束嵌套在页面的内部
- 方法三:写在页面的外部,通过<script>标记引入到页面内部
-
特殊含义的字符
- \r:回车
- \n:换行
- \t:制表位
- 转义字符:\ 将具有特殊含义的字符转成普通字符
-
对象:由属性(变量)和方法(函数)组成的组合。
- 对象.属性
- 对象.方法()
对象的分类
- HTML:就是HTML元素
- 脚本对象
- 浏览器对象
脚本对象
Array(数组)
数组也属于对象
常用的一些方法与属性
<script type=”text/javascript”>
var stu=new Array(‘tom’,’berry’,’ketty’);
document.write(‘排序后:’+stu.sort()+'<br>’); //排序
document.write(‘翻转后:’+stu.reverse()+'<br>’); //反转
document.write(‘连接后:’+stu.join(‘>>>’)+'<br>’) //将数组元素连接起来
document.write(‘数组长度:’+stu.length+'<br>’); //数组的长度
stu.unshift(‘李白’);//在数组的前面插入
document.write(‘unshift:’+stu+'<br>’);
stu.shift(); //将数组的第一个元素删除
document.write(‘shift:’+stu+'<br>’);
stu.push(‘杜甫’); //将元素插入到数组的后面
document.write(‘push:’+stu+'<br>’);
stu.pop(); //删除数组的最后一个元素
document.write(stu);
</script>
String(字符串)
字符串的声明
方法一:把字符串当成基本类型直接赋值
方法二:把字符串当成对象来声明
字符串是基本类型,在字符串运行的时候会在内存中生成一个临时对象,通过临时对象调用属性和方法
- 截取子字符串 语法: 字符串.substr(开始位置,[截取长度])
- 截取子字符串 语法:字符串.substring(起始位置,结束位置)
例题
- indexOf():返回 String 对象内第一次出现子字符串的字符位置
- lastIndexOf():返回字符串最后出现的位置
- toLowerCase():转成小写
- toUpperCase():转成大写
- 字符串长度
多学一招:字符串可以当成字符数组来使用
Math(数学)
例题:产生一个1~100的随机整数
Date(日期)
Date()对象的方法有很多,我们可以把它分为3组
第一组:setXXX:设置时间
第二组:getXXX:获取时间
第三组:toXXX:转化时间格式
例题:获取当前时间
例题:转换时间格式
例题:上月的1号是星期几?
浏览器对象
浏览器的分层结构
window(窗口)
在浏览器对象中最顶层的对象。
脚下留心:由于window是最顶层对象,所以window可以省略。
document(文档)【重点】
- window.document.write(‘’);将字符串输出到浏览器上
- document.bgColor=’#cccccc’; //背景色
- document.fgColor=’#FF0000′; //前景色
- 获取网页标签对象(重点)
例题:标签属性进行取值赋值
<input type=”text” id=”txt”>
<script type=”text/javascript”>
window.onload=function(){
var oTxt=document.getElementById(‘txt’);
oTxt.onblur=function(){
//alert(oTxt.value);
//alert(oTxt.type); //text
oTxt.type=’button’; //给属性赋值
oTxt.value=’确定’; //给属性赋值
}
}
</script>
结果:当文本框失去焦点的时候变成按钮
history(历史)
back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进1页,等价于forward( )方法;
go(-1) 代表后退1页,等价于back( )方法;
第一页
当前是第一页
<a href=”11-history2.html”>跳转到第二页</a>
第二页
<script type=”text/javascript”>
function myforward(){
//history.forward(); //前进一级 等价于
history.go(1);
}
</script>
当前是第二页
<a href=”11-history3.html”>跳转到第三页</a>
<input type=”button” value=”前进一级” onclick=’myforward()’>
第三页
<script type=”text/javascript”>
function myback(){
//history.back(); //返回上一级,等价于下一句
history.go(-1);
}
</script>
这是第三页<br>
<input type=”button” value=”返回一级” onclick=’myback()’><br>
<input type=”button” value=”返回两级” onclick=’history.go(-2)’>
location(地址)
location对象主要用来做页面的跳转
属性:href——设置或检索完整的 URL 字符串
方法:
assign(“url”):跳转到指定页面
reload():重新加载当前页面
replace(“url”) :通过加载 URL 指定的文档来替换当前文档
例题:
<script type=”text/javascript”>
function jump1(){
//通过更改location的属性来跳转
alert(location.href); //当前的url地址
location.href=’4-生成1~100的随机整数.html’;
}
function jump2(){
//通过方法来跳转
location.assign(‘4-生成1~100的随机整数.html’);
}
function jump3(){
//将其他页面加载到当前窗口上来,reload()是用来做刷新的
//location.reload(‘4-生成1~100的随机整数.html’);
location.reload(); //刷新本页面
}
function jump4(){
//跳转完毕后不能点击”后退”按钮
location.replace(‘4-生成1~100的随机整数.html’);
}
</script>
<input type=”button” value=”href属性跳转” onclick=’jump1()’> <br>
<input type=”button” value=”assign()跳转” onclick=’jump2()’> <br>
<input type=”button” value=”reload()【刷新】” onclick=’jump3()’> <br>
<input type=”button” value=”replace()” onclick=’jump4()’>
screen(屏幕)【了解】
包含有关客户端显示屏幕的信息
注意:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。
width:返回显示器屏幕的宽度。
height:返回显示屏幕的高度。
availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)。
availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)。
例题
<script type=”text/javascript”>
document.write(‘屏幕宽度:’+screen.width+'<br>’);
document.write(‘屏幕高度:’+screen.height+'<br>’);
document.write(‘屏幕宽度(不包含任务栏):’+screen.availWidth+'<br>’);
document.write(‘屏幕高度(不包含任务栏):’+screen.availHeight+'<br>’);
</script>
脚下留心:screen对象的属性都是只读属性
navigator(导航)【了解】
navigator 对象包含有关浏览器的信息。
注意:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。
appCodeName:返回浏览器的代码名。
在所有以 Netscape 代码为基础的浏览器中,它的值是 “Mozilla”。为了兼容起见,在 Microsoft 的浏览器中,它的值也是 “Mozilla”。
appName:返回浏览器的名称。
appVersion:返回浏览器的平台和版本信息。
对象操作语句
this语句
this表示当前对象
with语句
with用来执行一组方法和属性,所有的属性和方法都属于with后面的对象
<script type=”text/javascript”>
with(document){
write(‘锄禾日当午<br>’);
write(‘汗滴禾下土<hr>’);
bgColor=’#cccccc’;
fgColor=’#FF0000′;
}
with(Math){
document.write(PI+'<br>’);
document.write(abs(-10)+'<br>’);
}
</script>
eval语句
用来执行字符串表达式
DOM和BOM
DOM:document object model 文档对象模型
BOM:brower object model 浏览器对象模型
DOM由HTMDOM,XMLDOM,CSSDOM组成
CSSDOM的语法结构:对象.style.样式属性
oDiv.style.width
oDiv.style.height
例题
表单验证
难点:
- 验证表单的函数在表单提交的时候调用,表单提交的事件是onsubmit
- Onsubmit事件后面如果return fasle就终止提交,return true就提交
代码
<script type=”text/javascript”>
function check(){
//验证用户名
var oUser=document.getElementById(‘username’); //获取用户名的文本框对象
if(oUser.value==”){
alert(‘用户名不能为空’);
oUser.focus(); //获取焦点
return false;
}
//验证密码
var oPwd=document.getElementById(‘pwd’); //获取密码对象
if(oPwd.value==”){
alert(‘密码不能为空’);
oPwd.focus();
return false
}else{
if(oPwd.value.length!=6 || isNaN(oPwd.value)){
alert(‘密码必须是6位的数字’);
oPwd.select(); //选中文本框的内容
return false;
}
}
return true;
}
</script>
<form action=”” method=’post’ onsubmit=’return check()’>
<table>
<tr>
<td>用户名:</td>
<td><input type=”text” id=”username”></td>
</tr>
<tr>
<td>密码:</td>
<td><input type=”password” id=”pwd”></td>
</tr>
<tr>
<td colspan=’2′ align=’center’>
<input type=”submit” value=”提交”>
</td>
</tr>
</table>
</form>
设置时钟周期
设置定时器
作业
- 打印100以内的6的倍数,一行放7个
- 求一元二次方程的根
- 倒计时