JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model）尚无正式标准
由于现代浏览器几乎实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
全局变量是 window 对象的属性
全局函数是 window 对象的方法

甚至 HTML DOM 的 document 也是 window 对象的属性之一

window.document.getElementById("header")
等价
document.getElementById("header")

Window 尺寸

    有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）对于Internet Explorer、Chrome、Firefox、Opera 以及 Safariwindow.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 8、7、6、5document.documentElement.clientHeightdocument.documentElement.clientWidth或者document.body.clientHeightdocument.body.clientWidth实例var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;其他 Window 方法window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

    window.screen 对象包含有关用户屏幕的信息

Window Screen

        window.screen 对象在编写时可以不使用 window 这个前缀screen.availWidth - 可用的屏幕宽度screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度

        screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏<script>document.write("可用宽度：" + screen.availWidth);</script>

Window Screen 可用高度

        screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。<script>document.write("可用高度：" + screen.availHeight);</script>

JavaScript Window Location

    window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

Window Location

        window.location 对象在编写时可不使用 window 这个前缀location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 （80 或 443）location.protocol 返回所使用的 web 协议（http:// 或 https://）

Window Location Href

        location.href 属性返回当前页面的 URL<script>document.write(location.href); // http://www.w3school.com.cn/js/js_window_location.asp</script>

Window Location Pathname

        location.pathname 属性返回 URL 的路径名<script>document.write(location.pathname); // /js/js_window_location.asp</script>

Window Location Assign

        location.assign() 方法加载新的文档<script>function newDoc() {window.location.assign("http://www.w3school.com.cn")}</script>

JavaScript Window History

        window.history 对象包含浏览器的历史

Window History

            window.history 对象在编写时可不使用 window 这个前缀为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击按钮向前相同

Window History Back

            <script>function goBack() {window.history.back()}</script>

Window History Forward

            <script>function goForward() {window.history.forward()}</script>

JavaScript Window Navigator

        window.navigator 对象包含有关访问者浏览器的信息window.navigator 对象在编写时可不使用 window 这个前缀<div id="example"></div><script>txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";txt+= "<p>Browser Name: " + navigator.appName + "</p>";txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";txt+= "<p>Platform: " + navigator.platform + "</p>";txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";document.getElementById("example").innerHTML=txt;</script>来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：navigator 数据可被浏览器使用者更改浏览器无法报告晚于浏览器发布的新操作系统浏览器检测由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。例子：if (window.opera) {...some action...}

JavaScript 消息框

    可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框

警告框

        <head><script>function disp_alert() {alert("我是警告框！！")}</script></head><body><input type="button" onclick="disp_alert()" value="显示警告框" /></body>

确认框

        <head><script>function show_confirm() {var r=confirm("Press a button!");if (r==true) {alert("You pressed OK!");} else {alert("You pressed Cancel!");}}</script></head><body><input type="button" onclick="show_confirm()" value="Show a confirm box" /></body>

提示框

        <head><script type="text/javascript">function disp_prompt() {var name=prompt("请输入您的名字","Bill Gates")if (name!=null && name!="") {document.write("你好！" + name + " 今天过得怎么样？")}}</script></head><body><input type="button" onclick="disp_prompt()" value="显示提示框" /></body>

JavaScript 计时

    通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

单击本例中的按钮后，会在 5 秒后弹出一个警告框

        <script>function timedMsg() {var t=setTimeout("alert('5 秒！')",5000)}</script><head><script>function timedText() {var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)}</script></head>

本例中的程序会执行 2 秒、4 秒和 6 秒的计时

        <body><form><input type="button" value="显示计时的文本" onClick="timedText()"><input type="text" id="txt"></form><p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p></body>

单击开始计时按钮后，程序开始从 0 以秒计时

        <head><script>var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}</script></head><body><form><input type="button" value="开始计时！" onClick="timedCount()"><input type="text" id="txt"></form><p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p></body>

点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时

        <head><script>var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}function stopCount(){c=0;setTimeout("document.getElementById('txt').value=0",0);clearTimeout(t);}</script></head><body><form><input type="button" value="开始计时！" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="停止计时！" onClick="stopCount()"></form><p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p></body>

使用计时事件制作的钟表

        <head><script type="text/javascript">function startTime() {var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i) {if (i<10) {i="0" + i}return i}</script></head><body onload="startTime()"><div id="txt"></div></body>JavaScript 计时事件setTimeout()clearTimeout()

JavaScript Cookies

    cookie 用来识别用户

        <html><head><script type="text/javascript">function getCookie(c_name) {if (document.cookie.length > 0) { c_start=document.cookie.indexOf(c_name + "=")if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start)if (c_end==-1)c_end=document.cookie.lengthreturn unescape(document.cookie.substring(c_start,c_end))} }return ""}function setCookie(c_name, value, expiredays) {var exdate=new Date()exdate.setDate(exdate.getDate() + expiredays)document.cookie = c_name + "=" + escape(value)+((expiredays==null) ? "" : "; expires=" + exdate.toGMTString())}function checkCookie() {username=getCookie('username')if (username != null && username != "") {alert('Welcome again ' + username + '!')} else  {username = prompt('Please enter your name:',"")if (username != null && username != "") {setCookie('username',username,365)}}}</script></head><body onLoad="checkCookie()"></body></html>

什么是cookie?

    cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

    当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

    当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

    在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

JavaScript 库

JavaScript 库 - jQuery、Prototype、MooTools

JavaScript 框架（库）

    JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生。这些 JavaScript 库常被称为 JavaScript 框架。在本教程中，我们将了解到一些广受欢迎的 JavaScript 框架：jQueryPrototypeMooTools所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

CDN - 内容分发网络

    您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。Google 为一系列 JavaScript 库提供了免费的 CDN，包括：jQueryPrototypeMooToolsDojoYahoo! YUI如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库即可：引用 jQuery<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

JavaScript - 测试 jQuery

    <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>function myFunction() {$("#h01").html("Hello jQuery")}$(document).ready(myFunction);// 等价于原生JavaScript// function myFunction() // var obj=document.getElementById("h01");// obj.innerHTML="Hello jQuery";// }// onload=myFunction;</script></head><body><h1 id="h01"></h1></body></html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Windows下查找各类游戏存档路径
我算是个比较爱打单机游戏的人，同时也是个半吊子的编程爱好者，有的时候会去干一些修改存档的事儿。不过这篇博文不讲存档修改技术，只讲第一步：去哪找存档？目标：在windows10系统下搜索到游戏的存档路径实现原理：几乎所有的游戏在创建新存档的时候都会产生一个新的存档…...
2024/4/27 0:00:58
JavaScript技术
● &运算符_1.htm● JavaScript的脆弱性_1.htm● JavaScript技巧环绕三维文字_1.htm● JavaScript时间显示三大心法_1.htm● Javascript特效欣赏(一)飘雪_1.htm● Java技巧（一）会变色的超链接_1.htm● 弹出式说明窗口---JavaScript的使用_1.htm● 第八讲WEB页面信息交互_…...
2024/4/28 11:46:52
高数习题8.3
应用格林公式计算下列曲线积分： (1) ∮L+(xy2+y3)dy−(x3+x2y)dx\oint_{L^+}(xy^2+y^3)dy-(x^3+x^2y)dx∮...
2024/4/27 17:49:35
CityMaker学习教程10 示例代码的使用Javascript
示例代码中的CS版本和BS版本是对应的，基本都是一对一的，不过BS有些代码跑起来比较困难，比如说这里用到的获取文件位置的代码 var skyboxPath = getSamplesRelatePath(“/Media/skybox”);这个函数调用内容如下：var flag = unescape(location.pathname).lastIndexOf("…...
2024/4/28 7:49:10
如何学习数学分析
如何学习数学分析数学分析的研究定位一直以来都是书到用时方恨少，刚毕业那会学的是计算机，从事算法工程师岗位，然后基础人工智能算法，在遗传BP，神经网络，旅行商问题上接触了很多数学知识，到后来的机器人导航工程师又做了路径规划，设计到视觉SLAM，里面又穿插了李代数和…...
2024/4/27 8:50:01
JavaScript 参考手册
JavaScript 参考手册本部分提供完整的 JavaScript 参考手册：JavaScript 本地对象和内置对象Browser 对象（BOM）HTML DOM 对象JavaScript 对象参考手册本参考手册描述每个对象的属性和方法，并提供实例。ArrayBooleanDateMathNumberStringRegExpGlobalBrowser 对象参考手册本参…...
2024/4/27 9:54:01
第二章：2.1 微分方程、差分方程求解（举例）
微分方程求解举例举第一个例子，和高等数学解法并无区别差分方程求解举例下面我们举一个差分方程的例子我们要注意求解差分方程的起始条件要从0处开始选取，因为0处才对应的是系统的真正起始条件我们再举一个例子如图所示，通过这个图，我们观察发现，对于离散序列求它的差分方…...
2024/4/27 17:52:09
HTML5视频教程，HTML5项目实战，HTML5中文指南，HTML5使用手册
HTML5视频教程，HTML5项目实战，HTML5中文指南，HTML5使用手册。超过2G 的 HTML5 视频教程免费分享，免费下载！尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖HTML基础、标签、CSS …...
2024/4/28 10:10:58
使用最大似然法来求解线性模型（4）-最大化似然函数背后的数学原理
在使用最大似然法来求解线性模型（3）-求解似然函数文章中，我们让 logL 对 w 求一阶偏导数，让偏导数等于0，解出 w，这个 w 就是使logL取最大值的w 那为什么令一阶偏导数等于0，求得的w就能够使 logL 取最大值呢？在高等数学中，对于一元可导函数f(x)而言，一阶导数f′(x)=…...
2024/4/27 9:30:51
JavaScript 文件上传详解
本文为 Qunar 技术沙龙投稿，版权归原作者所有，未经允许，请勿转载。原文地址：http://mp.weixin.qq.com/s/KWFyJa06CNXrU8zhSzzQFQ 作者：梁志，2015年加入 Qunar，目前在去哪儿网大住宿 UED 中心担任前端工程师，喜欢捣鼓操作系统、系统工具，擅长分析开源程序和网络协议。…...
2024/4/28 12:57:00
MATLAB混合编程视频教程下载 SIMULINK系统仿真视频
下载链接：http://item.taobao.com/item.htm?id=43401674106精通MATLAB混合编程视频讲解MATLAB各类函数视频讲解基于MATLAB的高等数学问题求解 MATLAB函数速查视频讲解面向对象C++视频教程五朵金花，带你轻松搞定MATLAB金花详情：精通MATLAB混合编程视频讲解MATLAB各类函数视频…...
2024/4/28 12:24:01
图像的等距变换，相似变换，仿射变换，射影变换及其matlab实现
图像的等距变换，相似变换，仿射变换，射影变换及其matlab实现第二次写CSDN文档，上一篇的排版实在太烂了，于是决定认真学习一下markdown的语法。好了，废话不多说，今天，我们学习一下图像（2维平面）到图像（2维平面）的四种变换，等距变换，相似变换，仿射变换，投影变换首…...
2024/4/27 19:03:59
想学JS的原型和闭包吗？COME ON（4）
注意：本文不是javascript基础教程，如果你没有接触过原型的基本知识，应该先去了解一下，推荐看《javascript高级程序设计（第三版）》第6章：面向对象的程序设计。上节已经提到，每个函数function都有一个prototype，即原型。这里再加一句话——每个对象都有一个_ _proto…...
2024/4/28 4:36:24
《MATLAB 7.0从入门到精通（修订版）》——第1章 MATLAB概述 1.1 MATLAB 7.0简介
本节书摘来自异步社区《MATLAB 7.0从入门到精通（修订版）》一书中的第1章，第1.1节，作者刘保柱，苏彦华，张宏林，更多章节内容可以访问云栖社区“异步社区”公众号查看。第1章 MATLAB概述 MATLAB是一种高效的工程计算语言，它将计算、可视化和编程等功能集于一个易于使用…...
2024/4/27 7:50:29
学习HTML、CSS、Javascript必看书
第一本，入门《Head first HTML&CSS》最好的入门书。看两遍就对HTML & CSS 有个大概印象了。此时把w3cschool作为备查手册收藏起来第二本《CSS权威指南（第三版）》最权威的CSS书籍，除了阅读W3C的文档外的不二选择（就是翻译有点操蛋，遇到感到难理解的地方可能还…...
2024/4/27 18:32:43
数据分析师进阶必备6大数学利器
呆鸟说：“数学，让我头痛，翻译本文让我头疼欲裂。不过，数据分析师不懂点数学，也实在说不过去，所以就有了这篇文章。”介绍数学是现代科学的基石，几乎所有现代科学都与数学密不可分，尤其是数据科学与机器学习。要想成为资深数据分析师，必须具备一定的数学知识，熟练应用…...
2024/4/28 15:51:36
21天学通HTML+CSS+JavaScript Web开发(第7版) 中文完整pdf扫描版
21天学通HTML CSS JavaScript Web开发（第7版）是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本，作者在本书囊括了新的HTML5与CSS3技术，并采用易于理解的步骤式教程讲解了这些技术的实用技巧和注意事项。通过本书的学习，读者可以开发出交互性的动态Web站点…...
2024/4/27 10:14:48
变分法入门介绍
文章目录变分法入门介绍泛函和变分法变分法求泛函极值变分的定义拉格朗日函数欧拉方程案例分析--两点之间直线最短在Mathematica中使用变分法参考文献变分法入门介绍读完这篇博文你可以了解变分的基本概念，以及使用变分法求解最简泛函的极值。本文没有严密的数学证明，只是感…...
2024/4/28 3:14:40
使用JavaScript制作SVG动画
本文摘自使用JavaScript制作SVG动画 – 静华网-一个有气质的网站更多信息请访问原文↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑在JavaScript中，使用CSS3或Web Animations API的浏览器本身可以实现的功能非常多。简单的动画和转换非常适合CSS3–而更复杂的动画需要使用Ja…...
2024/4/27 20:19:51
高等数学：第三章微分中值定理与导数的应用（3）泰勒公式
3.3 泰勒公式常用近似公式，将复杂函数用简单的一次多项式函数近似地表示，这是一个进步。当然这种近似表示式还较粗糙（尤其当较大时），从下图可看出。上述近似表达式至少可在下述两个方面进行改进：1、提高近似程度，其可能的途径是提高多项式的次数。2、任何一种近似，应告…...
2024/4/27 4:08:59

JavaScript Window - 浏览器对象模型

JavaScript Window - 浏览器对象模型

Window 对象

Window 尺寸

JavaScript Window Screen

Window Screen

Window Screen 可用宽度

Window Screen 可用高度

JavaScript Window Location

Window Location

Window Location Href

Window Location Pathname

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript Window Navigator

JavaScript 消息框

警告框

确认框

提示框

JavaScript 计时

单击本例中的按钮后，会在 5 秒后弹出一个警告框

本例中的程序会执行 2 秒、4 秒和 6 秒的计时

单击开始计时按钮后，程序开始从 0 以秒计时

点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时

使用计时事件制作的钟表

JavaScript Cookies

什么是cookie?

JavaScript 库

JavaScript 框架（库）

CDN - 内容分发网络

JavaScript - 测试 jQuery

相关文章

最新文章

JavaScript Window - 浏览器对象模型

JavaScript Window - 浏览器对象模型

Window 对象

Window 尺寸

JavaScript Window Screen

Window Screen

Window Screen 可用宽度

Window Screen 可用高度

JavaScript Window Location

Window Location

Window Location Href

Window Location Pathname

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript Window Navigator

JavaScript 消息框

警告框

确认框

提示框

JavaScript 计时

单击本例中的按钮后，会在 5 秒后弹出一个警告框

本例中的程序会执行 2 秒、4 秒和 6 秒的计时

单击开始计时按钮后，程序开始从 0 以秒计时

点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时

使用计时事件制作的钟表

JavaScript Cookies

创建一个欢迎 cookie

什么是cookie?

名字 cookie

日期 cookie

创建和存储 cookie

JavaScript 库

JavaScript 框架（库）

CDN - 内容分发网络

JavaScript - 测试 jQuery

相关文章

最新文章