js温故而知新8(浏览器)——学习廖雪峰的js教程

charles_paul 发布于2019-08-20 15:07 / 1024人阅读

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。

浏览器

目前主流的浏览器：

IE 6~11：从IE10开始支持ES6标准；

Chrome：基于Webkit内核，内置了非常强悍的JavaScript引擎——V8；

Safari：基于Webkit内核；

Firefox：Gecko内核，JavaScript引擎OdinMonkey;

不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。

1.window

window对象不但充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
兼容性：IE<=8不支持。

2.navigator

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：

var width = window.innerWidth || document.body.clientWidth;

3.screen

screen对象表示屏幕的信息，常用的属性有：

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

4.location

location对象表示当前页面的URL信息。例如，一个完整的URL：

http://www.example.com:8080/p...
可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // "http"
location.host; // "www.example.com"
location.port; // "8080"
location.pathname; // "/path/index.html"
location.search; // "?a=1&b=2"
location.hash; // "TOP"

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

5.document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的xxx读取的，但是可以动态改变：

document.title = "努力学习JavaScript!";

请观察浏览器窗口标题的变化。

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点

document对象还有一个cookie属性，可以获取当前页面的Cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie：

document.cookie; // "v=123; remember=true; prefer=zh"

服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

6.history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

任何情况，你都不应该使用history这个对象了。

GPU云服务器云服务器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82003.html

js温故而知新10(操作表单)——学习廖雪峰的js教程

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种：文本框，对应的，用于输入文本； ...

simon_chen 2019-08-20 15:08 评论0 收藏0
js温故而知新3——学习廖雪峰的js教程

摘要：例如，在一个中，删掉偶数，只保留奇数，可以这么写把一个中的空字符串删掉，可以这么写注意以下的版本没有方法可见用这个高阶函数，关键在于正确实现一个筛选函数。回调函数接收的回调函数，其实可以有多个参数。 1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function po...

zhaot 2019-08-21 11:34 评论0 收藏0
js温故而知新4——学习廖雪峰的js教程

摘要：你可能认为调用，和结果应该是，，，但实际结果是全部都是原因就在于返回的函数引用了变量，但它并非立刻执行。返回闭包时牢记的一点就是返回函数不要引用任何循环变量，或者后续会发生变化的变量。真的是看着很晕那闭包另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 评论0 收藏0
js温故而知新11(AJAX)——学习廖雪峰的js教程

摘要：在回调函数中，通常我们只需通过判断请求是否完成，如果已完成，再根据判断是否是一个成功的响应。因此我们需要首先在页面中准备好回调函数当前价格最后用函数触发表示本域，也就是浏览器当前页面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交，你就会发现，一旦用户点击Submit按钮，表单开始提...

kun_jian 2019-08-20 16:45 评论0 收藏0
js温故而知新6(JSON)——学习廖雪峰的js教程

JSON JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。道格拉斯·克罗克福特（Douglas Crockford）--雅虎的高级架构师--发明了JSON这种超轻量级的数据交换格式. 序列化让我们先把小明这个对象序列化成JSON格式的字符串： var xiaoming = { name: 小明, age: 14, gender...

20171112 2019-08-21 11:36 评论0 收藏0