Web前端开发案例教程——HTML+CSS+JavaScript (10)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实例10-2：采用DOM改变超链接
window 对 象 在 层 次 图 中 位 于 最 高 一 层 ， document 对 象 、 history 对象和 location 对象都是它的子对象， window 对象中 包含的属性是应用于整个窗口的，如在框架集结构中，每个框 架都包含一个window对象。 document对象在层次图中位于最核心地位，页面上的对象都 是document对象的子对象，在document对象中包含的属性是整 个页面的属性，如背景颜色等。 location对象中包含了当前URL地址的信息。 navigator对象中包含了当前使用的浏览器的信息。 history对象中包含了客户端浏览器过去访问的URL地址信息。
10.1 Window 对象
window对象表示一个浏览器窗口或一个框架。每个载入浏 览器的HTML文档都会成为document对象。运用document对 象，可在JavaScript中对HTML页面中的所有元素进行访问。
1.confirm()
confirm（）将弹出一个确认对话框，语法格式为： window.confirm（"对话框中显示的纯文本")；
第十章
DOM编程
学习目标
理解DOM的概念和结构组成 掌握window对象属性、方法及事件的使用 掌握document对象属性和方法的使用
掌握表单对象属性、方法及事件的使用
理解其他DOM对象的常用属性、方法及事件
HTML文档对象模型（HTML DOM）定义了一套标准方法来访 问和操纵HTML文档。 浏览器是用于显示HTML文档内容的应用程序，浏览器还提 供了一些可以在JavaScript脚本中访问和使用的对象。浏 览器对象是一个分层结构，也称为文档对象模型。
2.open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法如下:
window.open("弹出窗口的url"，"窗口名称"，"窗口特征"）
3.close( ) close( )方法用于关闭浏览器窗口,语法格式为: window.close( );
10.1.3常用的事件
常用的window对象
…… /*弹出窗口*/ function open_adv(){ window.open("adv.html");} /*弹出固定大小窗口，并且无菜单栏等*/ function open_fix_adv(){ window.open("adv.html","","height=380,width=320,toolbar=0,sc rollbars=0,location=0,status=0,menubar=0,resizable=0"); } /*全屏显示*/ function fullscreen(){ window.open("10-4.html","","fullscreen=yes");} /*弹出确认消息框*/ function confirm_msg(){ if(confirm("你相信自己是最棒的吗？")){ alert("有信心必定会赢，没信心一定会输！"); }} /*关闭窗口*/ function close_plan(){ window.close(); } ……
实例10-1：采用window对象实现弹出窗口
文档对象模型提供了一组按树状形式结构组织的HTML文档， 树状结构中的每一个对象称为一个节点，每一个对象都有 一个或多个属性和方法。
采用DOM改变超链接。
…… function changeLink(){ document.getElementById("node").innerHTML="<h1>淘 宝</h1>"; document.getElementById("node").href="http://wwww.ta "; } …… <a href="" id="node"><h1>京东 </h1></a> <input name="btn" type="button" value="使用DOM改变链 接" onclick="changeLink();" /> ……
采用window对象实现弹出窗口
…… window.open("adv.html", "广告窗口", "toolbar=0, scrollbars=0, location=0, status=0, menubar=0, resizable=0, width=707, height=275,top=200,left=150"); /* width：弹出窗口的宽度 height：弹出窗口的高度 top：弹出窗口离屏幕顶部距离 left：弹出窗口离屏幕左边距离 */ ……
实例10-4：常用的window对象
…… <input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p> <p><input name="open2" type="button" value="弹出固定大小窗 口，且无菜单栏等" onclick="open_fix_adv()"/></p> <p><input name="full" type="button" value="全屏显示" onclick="fullscreen()"/></p> <p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p> <p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p> ……
…… var flag=confirm("确认要删除此条信息吗?"); if(flag==true){ alert("删除成功!"); } else{ alert("你取消了删除"); } ……
实例10-3：confirm()
alert( )只有一个参数，仅显示警告框的消息，无返回 值，不能对脚本产生任何改变。 prompt()有两个参数，是输入对话框，用来提示用户输 入一些信息，单击“取消”按钮则返回null，单击确认按 钮则返回用户输入的值。 confirm( )只有一个参数，是确认对话框，显示提示框 的消息，“确定”按钮和“取消”按钮，单击“确定”按 钮返回 true ，单击“取消”按钮返回 false ，因此常用于 if－else结构。
window 对 象 在 层 次 图 中 位 于 最 高 一 层 ， document 对 象 、 history 对象和 location 对象都是它的子对象， window 对象中 包含的属性是应用于整个窗口的，如在框架集结构中，每个框 架都包含一个window对象。 document对象在层次图中位于最核心地位，页面上的对象都 是document对象的子对象，在document对象中包含的属性是整 个页面的属性，如背景颜色等。 location对象中包含了当前URL地址的信息。 navigator对象中包含了当前使用的浏览器的信息。 history对象中包含了客户端浏览器过去访问的URL地址信息。
10.1 Window 对象
window对象表示一个浏览器窗口或一个框架。每个载入浏 览器的HTML文档都会成为document对象。运用document对 象，可在JavaScript中对HTML页面中的所有元素进行访问。
1.confirm()
confirm（）将弹出一个确认对话框，语法格式为： window.confirm（"对话框中显示的纯文本")；
第十章
DOM编程
学习目标
理解DOM的概念和结构组成 掌握window对象属性、方法及事件的使用 掌握document对象属性和方法的使用
掌握表单对象属性、方法及事件的使用
理解其他DOM对象的常用属性、方法及事件
HTML文档对象模型（HTML DOM）定义了一套标准方法来访 问和操纵HTML文档。 浏览器是用于显示HTML文档内容的应用程序，浏览器还提 供了一些可以在JavaScript脚本中访问和使用的对象。浏 览器对象是一个分层结构，也称为文档对象模型。
2.open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法如下:
window.open("弹出窗口的url"，"窗口名称"，"窗口特征"）
3.close( ) close( )方法用于关闭浏览器窗口,语法格式为: window.close( );
10.1.3常用的事件
常用的window对象
…… /*弹出窗口*/ function open_adv(){ window.open("adv.html");} /*弹出固定大小窗口，并且无菜单栏等*/ function open_fix_adv(){ window.open("adv.html","","height=380,width=320,toolbar=0,sc rollbars=0,location=0,status=0,menubar=0,resizable=0"); } /*全屏显示*/ function fullscreen(){ window.open("10-4.html","","fullscreen=yes");} /*弹出确认消息框*/ function confirm_msg(){ if(confirm("你相信自己是最棒的吗？")){ alert("有信心必定会赢，没信心一定会输！"); }} /*关闭窗口*/ function close_plan(){ window.close(); } ……
实例10-1：采用window对象实现弹出窗口
文档对象模型提供了一组按树状形式结构组织的HTML文档， 树状结构中的每一个对象称为一个节点，每一个对象都有 一个或多个属性和方法。
采用DOM改变超链接。
…… function changeLink(){ document.getElementById("node").innerHTML="<h1>淘 宝</h1>"; document.getElementById("node").href="http://wwww.ta "; } …… <a href="" id="node"><h1>京东 </h1></a> <input name="btn" type="button" value="使用DOM改变链 接" onclick="changeLink();" /> ……
采用window对象实现弹出窗口
…… window.open("adv.html", "广告窗口", "toolbar=0, scrollbars=0, location=0, status=0, menubar=0, resizable=0, width=707, height=275,top=200,left=150"); /* width：弹出窗口的宽度 height：弹出窗口的高度 top：弹出窗口离屏幕顶部距离 left：弹出窗口离屏幕左边距离 */ ……
实例10-4：常用的window对象
…… <input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p> <p><input name="open2" type="button" value="弹出固定大小窗 口，且无菜单栏等" onclick="open_fix_adv()"/></p> <p><input name="full" type="button" value="全屏显示" onclick="fullscreen()"/></p> <p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p> <p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p> ……
…… var flag=confirm("确认要删除此条信息吗?"); if(flag==true){ alert("删除成功!"); } else{ alert("你取消了删除"); } ……
实例10-3：confirm()
alert( )只有一个参数，仅显示警告框的消息，无返回 值，不能对脚本产生任何改变。 prompt()有两个参数，是输入对话框，用来提示用户输 入一些信息，单击“取消”按钮则返回null，单击确认按 钮则返回用户输入的值。 confirm( )只有一个参数，是确认对话框，显示提示框 的消息，“确定”按钮和“取消”按钮，单击“确定”按 钮返回 true ，单击“取消”按钮返回 false ，因此常用于 if－else结构。