JavaScript第三课
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
close ( )
setTimeout(”函数”,毫秒数) clearTimeout(定时器对象)
设置定时器：经过指定毫秒值后执行某个函数 取消setTimeout设置
知知不如好知，好知不如乐知
open（”打开窗口的url”，”窗口名”，”窗口特 征”） 窗口的特征如下，可以任意组合： height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；
alert (a+"+"+b );
alert (eval(a+"+"+b) ); </SCRIPT>
知识回顾
知知不如好知，好知不如乐知
• 代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“>
var s="abcdefg" ; alert ( s.indexOf("cd",0) ) ; alert (s.substr(1,2)) ; alert (Math.round(9.38)) ; var now=new Date( ); alert (now.getMonth( )) ; </SCRIPT>
知识回顾
知知不如好知，好知不如乐知
• JavaScript的对象包含下述3种：
– JavaScript的内置对象： JavaScript已定义了一些对象用 于处理数据。String、Math等
– 浏览器内置对象：不同的浏览器都提供了一组描述其 浏览器结构的内置对象，有丰富的属性和方法，利用 这些对象可以对网页浏览器环境中的事件进行控制并 做出处理
知知不如好知，好知不如乐知
• 思考：如果打开的窗口全屏显示，怎么办？ open(“http://www.baidu.com”, “baidu”, “toolbars=0,scrollbars=0,location=no,statusbars=0,menubars= 0,resizable=0, width=？，height=？"); }
screen. availWidth---屏 screen. availHeight---屏 幕的宽度 (除 Windows 任 幕的高度 (除 Windows 任
务栏之外) 务栏之外)。
也可用：screen.width---显示器屏幕的宽度 screen.height---显示屏幕的高度
案例3：浮动广告
知知不如好知，好知不如乐知
1.插入一个层Layer1， z-index=1； 2.层中插入一幅图片。
定时器函数setTimeout ()的用法： setTimeout（“调用的函数名”，间隔的毫秒数） 表示过多少毫秒，就调用某个函数来执行 清除某个定时器：clearTimeout()方法。 例如：var myclock＝setTimeout（”move( )”,500）; if (…) clearTimeout（myclock）;；
案例4：状态栏和标题文本的滚动显示
知知不如好知，好知不如乐知
<script> var str=" 河北软件职业技术学院CSDN乐知学院！ "; function st(){ str=str.substr(1) + str.charAt(0); status=str; 将文本str在状态栏中显示 document.title=str; 将文本str在标题栏中显示 } setInterval(st, 500); </script> <body> …… </body>
屏幕（screen）对象
知知不如好知，好知不如乐知
• • • • • • • • • • • • • •
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth
Window 对象
知知不如好知，好知不如乐知
方法
名称 alert (“m提示信息") confirm（“提示信息”） prompt（”提示信息“） open ("url","name") 说明 显示包含消息的对话框。 显示一个确认对话框，包含一个确定取消按钮 弹出提示信息框 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则 打开一个空白文档 关闭当前窗口
知知不如好知，好知不如乐知 window.open("google.htm"); 可简写为： open("google.htm");其他方法也是如此。
案例2：弹出广告
知知不如好知，好知不如乐知
我们需要预先制作好广告页面，假设为adv.htm，打开广告窗 口的语句如下 ： open(“adv.htm”, “”, “toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=650, height=150”);
• window对象的常用属性和方法
Window 对象
知知不如好知，好知不如乐知
属性
名称
document history location name status screen
说明
表示给定浏览器窗口中的 HTML 文档。 包含有关客户访问过的URL的信息。 包含有关当前 URL 的信息。 设置或检索窗口或框架的名称。 设置或检索窗口底部的状态栏中的消息。 包含有关客户端的屏幕和显示性能的信息。
案例1：打开和关闭指定链接 因为window是最顶层的根，所以可以省略
var nw; function openWin(){ nw=open(document.getElementById('url').value,"a","toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=650, height=150"); } function closeWin(){ if(nw!=null)nw.close(); window.close(); } <input type="text" id="url" /> <input type="button" value="open" onclick="openWin();" /> <input type="button" value="close" onclick="closeWin();" />
Window 对象
<head> getElementById(“ID名称”) 方法：根据ID名称获取HTML元素， <script language=JavaScript> 这里表示获取层对象 Layer1。 定义层图片移动 function move( ) 的函数move( ) left 和 top 表示层 Layer1 的左边距和上边距，设定为随机的值。 { document.getElementById("Layer1").style.left= Math.random()*500; document.getElementById("Layer1").style.top= Math.random()*500; setTimeout("move()",1000); 每隔1秒调用move( )函数 } 随机改变层的位置，从而 </script> </head> 实现随机漂浮的效果 <body onload="move( )""> <DIV id="Layer1" style="position:absolute; left:14px; top:44px; width:150px; height:102px; z-index:1"> <A href="http://www.mycom.cn"><IMG src="piaofu.jpg" width="150" height="100" border="0"></A> </DIV> <H2>随机漂浮的广告</H2> </BODY>
location 地址对象
浏览器对象的分层结构
document 文档对象
FORM 表单对象
window.document.myform.text1
Leabharlann Baidu
浏览器对象简介
知知不如好知，好知不如乐知
浏览器对象的分层结构
Window 对象
知知不如好知，好知不如乐知
• 窗口对象window是浏览器网页的文档对象模型 结构中的最高级的对象，只要网页的html标记中 包含有<body>或<frameset>标记，该网页就会包 含一个窗口对象。
知知不如好知，好知不如乐知
JavaScript课程第三课
JavaScript语言基础
知识回顾
知知不如好知，好知不如乐知
• 定义数组a，大小为10，存放的数据分别是 1-10，对应的js代码为？ • 希望知道数组的大小，使用哪个属性？ • 代码阅读，请问输出结果是多少？
<SCRIPT language="JavaScript“> var a="3“ , b="4"; alert (isNaN(a));
– 自定义对象
内容摘要
知知不如好知，好知不如乐知
• 理解事件处理程序的概念 • 了解JavaScript 中的常用事件 • 掌握常用的浏览器对象：
– window
– document
– history
浏览器对象简介
知知不如好知，好知不如乐知
Window 窗口对象
http://www.google.com
<HTML> 知知不如好知，好知不如乐知 <HEAD> <SCRIPT language="JavaScript" > 使用 Open 方法 function openwindow( ) 打开广告新窗口 { open("adv.htm", "", "toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=650, height=150"); } 添加页面加载事件 </SCRIPT> </HEAD> <BODY onLoad="openwindow( )"> <H2>看看和我一起打开的广告窗口</H2> </BODY> </HTML>
屏幕（screen）对象
知知不如好知，好知不如乐知
• 屏幕对象是JavaScript运行时自动产生的对象 • 屏幕对象常用属性
– height：返回显示屏幕的高度。 – width ：返回显示器屏幕的宽度。 – availHeight ：返回显示屏幕的高度 (除 Windows 任务栏 之外)。 – availWidth：返回显示屏幕的宽度 (除 Windows 任务栏 之外)。 – colorDepth：返回目标设备或缓冲器上的调色板的比特 深度（每像素中用于颜色的位数，其值为 1,4,8,15,16,24,32）。
知知不如好知，好知不如乐知
定时器的使用：实现延期执行或重复执行
过n毫秒执行一次 知知不如好知，好知不如乐知 每n毫秒执行一次
• window对象提供了两种方法来实现定时器：
– window. setTimeout(表达式[expression],延时时间[n])
– window. setInterval(表达式[expression],延时时间[n]) 注意：expression可以是用引号括起来的代码，也可以是一 个函数名（不能带任何参数的函数） • 如何取消定时器： – 取消setTimeout：window.clearTimeout(id); – 取消setInterval:window.clearInterval(id);