JS初级（五）BOM、 DOM、 定时器、 对象、 时钟周期

回顾

1. 函数预加载：在页面编译的时候就将函数编译到内存中，就可以先调用，再定义。
2. 通过arguments关键字可以实现传递的参数个数不一样
3. 事件：以on开头的都是事件
4. 事件后面肯定有事件处理程序，事件处理程序一般都是函数
5. 函数调用
   1. 方法一：<标签 事件=’函数()’>
   2. 方法二：对象.事件=函数
6. 匿名函数：没有名字的函数
7. 匿名函数自调用 (匿名函数)();
8. return
   1. 作用一：终止函数的执行
   2. 作用二：从函数内部将值返回到调用处
9. 变量的作用域
   1. 全局变量：供整个页面使用
   2. 局部变量：在函数内部使用变量，注意在函数内部通过var声明的变量是局部变量，不通过var声明的是全局变量。
10. Js嵌入到页面的方法
    1. 方法一：直接写在事件处理程序中 <p onclick=’alert(‘锄禾日当午’)’>
    2. 方法二：通过<script>开头，</script>结束嵌套在页面的内部
    3. 方法三：写在页面的外部，通过<script>标记引入到页面内部
11. 特殊含义的字符
    1. \r：回车
    2. \n：换行
    3. \t：制表位
12. 转义字符：\ 将具有特殊含义的字符转成普通字符
13. 对象：由属性（变量）和方法（函数）组成的组合。
    1. 对象.属性
    2. 对象.方法()

对象的分类

1. HTML：就是HTML元素
2. 脚本对象
3. 浏览器对象

脚本对象

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（字符串）

字符串的声明

方法一：把字符串当成基本类型直接赋值

方法二：把字符串当成对象来声明

字符串是基本类型，在字符串运行的时候会在内存中生成一个临时对象，通过临时对象调用属性和方法

1. 截取子字符串 语法： 字符串.substr(开始位置,[截取长度])

1. 截取子字符串 语法：字符串.substring(起始位置，结束位置)

例题

1. indexOf()：返回 String 对象内第一次出现子字符串的字符位置
2. lastIndexOf（）：返回字符串最后出现的位置

1. toLowerCase()：转成小写
2. toUpperCase()：转成大写

1. 字符串长度

多学一招：字符串可以当成字符数组来使用

Math（数学）

例题：产生一个1~100的随机整数

Date（日期）

Date()对象的方法有很多，我们可以把它分为3组

第一组：setXXX：设置时间

第二组：getXXX：获取时间

第三组：toXXX：转化时间格式

例题：获取当前时间

例题：转换时间格式

例题：上月的1号是星期几？

浏览器对象

浏览器的分层结构

window（窗口）

在浏览器对象中最顶层的对象。

脚下留心：由于window是最顶层对象，所以window可以省略。

document（文档）【重点】

1. window.document.write(‘’)；将字符串输出到浏览器上
2. document.bgColor=’#cccccc’; //背景色
3. document.fgColor=’#FF0000′; //前景色
4. 获取网页标签对象（重点）

例题：标签属性进行取值赋值

<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

例题

表单验证

难点：

1. 验证表单的函数在表单提交的时候调用，表单提交的事件是onsubmit
2. 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>

设置时钟周期

设置定时器

作业

1. 打印100以内的6的倍数，一行放7个
2. 求一元二次方程的根
3. 倒计时