JavaScript入门----10

JavaScript_10

1.JavaScript中的BOM对象
浏览器对象模型–Browser ObjectModel (BOM)
Window 对象
属性
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>window.onload=function(){//确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;window.alert(w+"*"+h);    }</script></head><body></body>
</html>

方法
其他方法：
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
格式:window.open(URL,name,features,replace)

URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值
	true - URL 替换浏览历史中的当前条目。
	false - URL 在浏览历史中创建新的条目

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>打开一个新的浏览器窗口或查找一个已命名的窗口</title><script type="text/javascript">function open_win(){window.open("https://www.baidu.com/");}function open_aboutblank(){window.open("about:blank","空白页","width=200,height=100",false);}</script></head><body><input type="button" name="" id="" value="open百度" onclick="open_win()"/><input type="button" name="" id="" value="open:blank" onclick="open_aboutblank()" /></body>
</html>

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。
close() 方法用于关闭浏览器窗口。
说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var myWindow=null;window.onload=function(){myWindow=window.open("about:blank","","width=200,height=100");myWindow.document.write("This is 'my window'");}function closeWin(){myWindow.close();}</script></head><body><input type="button" name="" id="" value="Close 'myWindow'" onclick="closeWin()" /></body>
</html>

JavaScript 弹窗方法
在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框:window.alert(“sometext”);
确认框:window.confirm(“sometext”);
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
提示框:window.prompt(“sometext”,“defaultvalue”);
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
参数1—提示信息
参数2—提示框的默认值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 25rem;height: 31.25rem;background-color: #FF0000;}</style><script>window.onload=function(){var butObj=document.getElementById("but1");butObj.onclick=function(){var val=window.confirm("确认删除吗？");if(val){var divObj=document.getElementById("div1");var hObj=document.getElementById("h1");divObj.removeChild(hObj);}}var butObj1=document.getElementById("but2");butObj1.onclick=function(){var vall=window.prompt("请输入姓名","");if(vall.length>0){alert(vall);}else{alert("不能为空!");}}}</script></head><body><div id="div1"><h1 id="h1">这是测试</h1></div><input type="button" name="" id="but1" value="删除h1" /><br><input type="button" name="" id="but2" value="测试提示框" /></body>
</htm

子对象
1.Window Screen–屏幕
window.screen 对象包含有关用户屏幕的信息。
1.总宽度和总高度 — screen.width / screen.height
2.可用宽度和可用高度----screen.availWidth / screen.availHeight
3.色彩深度----screen.colorDepth
4.色彩分辨率----screen.pixelDepth

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//1.总宽度和总高度  --- screen.width   /  screen.heightwindow.document.write("<h1>总宽度和总高度:"+window.screen.width+"*"+window.screen.height+"</h1>");//2.可用宽度和可用高度----screen.availWidth  / screen.availHeightwindow.document.write("<h1>可用宽度和可用高度:"+window.screen.availWidth+"*"+window.screen.availHeight+"</h1>");//3.色彩深度----screen.colorDepthwindow.document.write("<h1>色彩深度:"+window.screen.colorDepth+"</h1>");//3.色彩分辨率----screen.pixelDepthwindow.document.write("<h1>色彩分辨率:"+window.screen.colorDepth+"</h1>");</script></head><body></body>
</html>

2.Window Location—页面的地址 (URL)
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户登录</title><script>window.onload=function(){var but1=document.getElementById("but1");var username=document.getElementById("text1");var password=document.getElementById("pass1");var span=document.getElementById("span");but1.onclick=function(){var usernamevalue=username.value;var passwordvalue=password.value;if(usernamevalue=="zhangsan" && passwordvalue=="123456"){//跳转到成功的页面，传递用户名window.location.href="success.html?username="+usernamevalue;}else{//给出错误提示span.innerHTML="<font color='red'>用户名密码错误!</font>";}}//为用户名输入框添加聚焦事件username.onfocus=function(){span.innerHTML="";username.value="";password.value="";}}</script></head><body><center><table border="1px"><tr align="center"><td colspan="2"><h1>用户登录</h1><span id="span"></span></td></tr><tr align="center"><td>用户名:</td><td><input id="text1" type="text" name="username"></td></tr><tr align="center"><td>密码:</td><td><input id="pass1" type="password" name="password"></td></tr><tr align="center"><td colspan="2"><input id="but1" type="button" value="用户登录" /></td></tr></table></center></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>window.onload=function(){var searchvalue=window.location.search;if(searchvalue.length<=0){window.location.href="login.html";}else{//searchvalue===?username=zhangsan//var strarray=searchvalue.split("=");//var username=strarray[1];var username=searchvalue.split("=")[1];var h1obj=document.getElementById("h1");h1obj.innerHTML="欢迎，"+username+"登录成功!";}}</script></head><body><center><h1 id="h1">欢迎，登录成功!</h1></center></body>
</html>

3.Window History—历史对象
4.Window Navigator–浏览器的信息

JavaScript入门----10相关推荐

原版销售累计超过150 000册的经典JavaScript入门书
媒体评论如果你要学习 JavaScript,本书绝对不容错过. --JavaScript.about.com 一本伟大的 JavaScript入门书!适合初级程序员和 Web设计师. --Amazo ...
《JavaScript入门经典（第4版）》上第5章一个实例程序的修正，完善
今日,做<JavaScript入门经典(第4版)>第5章上的一个例题,感觉书上的代码有个小错误. 这是ch5_examp5.html上的一个实例,是计算一个数x保留y小数位后,四舍五入的结 ...
JavaScript入门(part9)--函数
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门函数函数的概念函数的使用函数的参数函数的返回值 arguments的使用函数的两种声明方式 Jav ...
JavaScript入门(part6)--运算符
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门运算符运算符的分类算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符运算符优先级 Jav ...
JavaScript入门(part5)--数据类型转换
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门获取变量数据类型数据类型转换转换为字符串转换为数字型转换为布尔型 JavaScript入门获取变量 ...
JavaScript入门(part4)--简单数据类型
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门简单数据类型数字型number 数字型范围数字型三个特殊值函数isNaN 字符串型string 布尔型 ...
JavaScript入门(part3)--变量
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门变量变量声明赋值变量的初始化变量语法扩展变量命名规范 JavaScript入门变量变量声明语 ...
javascript入门_JavaScript代理快速入门
javascript入门 What is a JavaScript proxy? you might ask. It is one of the features that shipped with ...
javascript入门视频第一天小案例制作零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

JavaScript入门----10

JavaScript_10

JavaScript入门----10相关推荐

最新文章

热门文章