专栏首页若是烟花JavaScript 学习(2)

JavaScript 学习(2)

参考: http://www.w3cschool.cc/js/js-window.html


四、浏览器 BOM

浏览器对象模型(BOM)使JavaScript有能力与浏览器“对话”。

(1)Window

浏览器对象模型(Browser Object Model),尚无正式标准。

所有浏览器都支持window对象,它表示浏览器窗口。

// 甚至HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
document.getElementById("header");

var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;

var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
window.open(); // 打开新窗口
window.close(); // 关闭当前窗口
window.moveTo(); // 移动当前窗口
window.resizeTo(); // 调整当前窗口

(2)Window Screen

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

screen.availWidth; // 可用屏幕宽度
screen.availHeight; // 可用屏幕高度
Screen { availWidth: 1366, availHeight: 738, width: 1366, height: 768, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 0, availLeft: 0 }

(3)Window Location

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

location.hostname; // 返回 web 主机的域名
location.pathname; // 返回当前页面的路径和文件名
location.port; // 返回 web 主机的端口 (80 或 443)
location.protocol; // 返回所使用的 web 协议(http:// 或 https://)

(4)Window History

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

history.back(); // 与在浏览器点击后退按钮相同
history.forward(); // 与在浏览器中点击按钮向前相同

(5)Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

(6)弹窗

可以在JavaScript中创建三种消息框:警告框,确认框,提示框。

// 警告框
window.alert(" sometext ");

// 确认框。点击“确认”,返回true。点击“取消”,返回false。
window.confirm(" sometext ");

// 提示框。
window.prompt(" sometext ", "default_value");

(7)计时事件

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

在JavaScript中使用计时事件是很容易的,两个关键方法是:

setInterval(); // 间隔指定的毫秒数不停的执行指定代码
setTimeout(); // 暂停指定的毫秒数后执行指定代码

window.setInterval("javascript function",milliseconds);
window.clearInterval(intervalVariable);

window.setTimeout("javascript 函数",毫秒数);
window.clearTimeout(timeoutVariable);

// 简单时钟
<script>
    setInterval(function(){doTimer()}, 1000);
    function doTimer(){
        var time = new Date();
        var time_str = time.toLocaleTimeString();
        document.getElementById("timer").innerHTML = time_str;
    }
</script>
<div id="timer"></div>

(8)Cookies

在JavaScript中,可以使用document.cookie 属性来创建,读取,删除cookies。

// 创建 cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

// 读取 cookie
var x = document.cookie; // 以字符串的方式返回所有cookies,类型格式:cookie1=value; cookie2=value; cookie3=value;

// 修改 cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

// 删除 cookie, 将expires参数设置为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

五、JavaScript 库

JavaScript 库 - JQuery,Prototype,MooTools。

(1)简介

JavaScript高级程序设计(特别是针对浏览器差异的处理),通常很困难也很耗时。

为了应对这些调整,许多的JavaScript(helper)库应用而生。这些库通常称为 JavaScript框架。

所有这些框架都提供针对常见 JavaScript任务的函数,包括动画、DOM操作、以及AJAX处理。

JQuery目前最受欢迎的JavaScript框架。使用CSS选择器来访问和网页上的HTML元素(DOM对象)。

(2)JQuery

这里只所JQuery吧,至于JQuery,打算重新写篇文章 ... ...


六、

至此,JavaScript算是基本完成了。下面 JQuery ... ...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 七日Python之路--第八天

    说实话七天学完Python,确实有些难度。O(∩_∩)O哈哈~ 七天只是约数。

    lpe234
  • Java代理相关:JDK动态代理、CGLIB动态代理

    代理(Proxy)是一种设计模式,提供了对目标对象另外的一种访问方式。可以在目标对象实现的基础上,增加额外的功能操作,即扩展目标对象的功能。

    lpe234
  • Chrome Headless 尝试

    Slobodin在Google论坛上发帖表示,鉴于Chrome 59推出了Headless浏览特性,他认为没有理由再继续维护Phantom.js。

    lpe234
  • Window对象的判定方法

    /* window对象的判定,由于ECMA是不规范Host对象,window对象属于Host, 所以也没有约定,所以就算是Object.prototype也对它...

    郑小超.
  • js---BOM 的理解方法

    window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本

    小蔚
  • 聊聊flink Table的Group Windows

    flink-table_2.11-1.7.0-sources.jar!/org/apache/flink/table/api/table.scala

    codecraft
  • 聊聊flink Table的Group Windows

    flink-table_2.11-1.7.0-sources.jar!/org/apache/flink/table/api/table.scala

    codecraft
  • JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型 (Browser Object Model)1 Wi

    尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

    JavaEdge
  • JavaScript Window - 浏览器对象模型

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Mod...

    李海彬
  • 设置WPF窗体全屏显示:

    //全屏代码: private void Window_Loaded(object sender, RoutedEventArgs e) { // 设...

    hbbliyong

扫码关注云+社区

领取腾讯云代金券