JavaScript教程5 - 浏览器

向右看齐 2022-04-02 14:18 235阅读 0赞

## JavaScript教程5 ##

### 05 | 浏览器 ###

#### 浏览器对象 ####

> window

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

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

> navigator

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

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

> screen

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

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

> location

location对象表示当前页面的**URL信息**。可以用location.href获取

例如，一个完整的URL：[http://www.example.com:8080/path/index.html?a=1&b=2\#TOP][http_www.example.com_8080_path_index.html_a_1_b_2_TOP]

*  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()方法非常方便。

> document

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

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

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

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

问题：

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：

解决：

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

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

> history

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

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

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

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

#### 操作DOM ####

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

*  更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
 *  遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
 *  添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
 *  删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，document.getElementsByClassName()以及CSS选择器。

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

// 返回ID为'test'的节点：
    var test = document.getElementById('test');
    
    // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
    var trs = document.getElementById('test-table').getElementsByTagName('tr');
    
    // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
    var reds = document.getElementById('test-div').getElementsByClassName('red');
    
    // 获取节点test下的所有直属子节点:
    var cs = test.children;
    
    // 获取节点test下第一个、最后一个子节点：
    var first = test.firstElementChild;
    var last = test.lastElementChild;
    
    
    // 第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：
    // 通过querySelector获取ID为q1的节点：
    var q1 = document.querySelector('#q1');
    
    // 通过querySelectorAll获取q1节点内的符合条件的所有节点：
    var ps = q1.querySelectorAll('div.highlighted > p');

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA\_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

#### 更新DOM ####

// 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：
    
    
    // 获取<p id="p-id">...</p>
    var p = document.getElementById('p-id');
    // 设置文本为abc:
    p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
    // 设置HTML:
    p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
    // <p>...</p>的内部结构已修改
    
    // 用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。
    
    
    
    
    // 第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：
    
    
    // 获取<p id="p-id">...</p>
    var p = document.getElementById('p-id');
    // 设置文本:
    p.innerText = '<script>alert("Hi")</script>';
    // HTML被自动编码，无法设置一个<script>节点:
    // <p id="p-id"><script>alert("Hi")</script></p>
    
    // 两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
    
    
    
    
    // 修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：
    
    // 获取<p id="p-id">...</p>
    var p = document.getElementById('p-id');
    // 设置CSS:
    p.style.color = '#ff0000';
    p.style.fontSize = '20px';
    p.style.paddingTop = '2em';

#### 插入DOM ####

> 知识点

*  innerHTML: 这个DOM节点是空的，就可以修改DOM节点的内容；这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点
 *  appendChild: 把一个子节点添加到父节点的最后一个子节点
 *  insertBefore: 可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

> 练习

<ol id="test-list">
        <li class="lang">Scheme</li>
        <li class="lang">JavaScript</li>
        <li class="lang">Python</li>
        <li class="lang">Ruby</li>
        <li class="lang">Haskell</li>
    </ol>

按字符串顺序重新排序DOM节点：

// sort list:
    var ol = document.getElementById("test-list");
    var list = ol.getElementsByTagName("li");
    
    var arr = [];
    var i;
    for (i=0;i<list.length;i++){ 
       arr.push(list[i].innerText);
    }
    arr.sort()
    for (i=0;i<list.length;i++){ 
       list[i].innerText = arr[i];
    }

#### 删除DOM ####

*  要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
 *  因此，删除多个节点时，要注意children属性时刻都在变化。

#### 操作表单 ####

> HTML表单的输入控件

*  文本框，对应的，用于输入文本；
 *  口令框，对应的，用于输入口令；
 *  单选框，对应的，用于选择一项；
 *  复选框，对应的，用于选择多项；
 *  下拉框，对应的，用于选择一项；
 *  隐藏文本，对应的，用户不可见，但表单提交时会把隐藏文本发送到服务器。

> 提交表单

方式一是通过元素的submit()方法提交一个表单，例如，响应一个的click事件，在JavaScript代码中提交表单：

<form id="test-form">
        <input type="text" name="test">
        <button type="button" onclick="doSubmitForm()">Submit</button>
    </form>
    
    <script> function doSubmitForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 提交form: form.submit(); } </script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改：

<form id="test-form" onsubmit="return checkForm()">
        <input type="text" name="test">
        <button type="submit">Submit</button>
    </form>
    
    <script> function checkForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 继续下一步: return true; } </script>
    
    // 注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

> 获取值

// <input type="text" id="email">
    var input = document.getElementById('email');
    input.value; // '用户输入的值'
    
    // 这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

> 设置值

// 设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：
    
    // <input type="text" id="email">
    var input = document.getElementById('email');
    input.value = 'test@example.com'; // 文本框的内容已更新
    
    // 对于单选框和复选框，设置checked为true或false即可。

> HTML5控件

// HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签：
    
    <input type="date" value="2015-07-01">
    
    <input type="datetime-local" value="2015-07-01T02:03:04">
    
    <input type="color" value="#ff0000">
    
    // 不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。支持HTML5的浏览器将获得格式化的字符串。例如，type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。

> 提交表单

方式一是通过元素的submit()方法提交一个表单，例如，**响应一个的click事件**，在JavaScript代码中提交表单：

<form id="test-form">
        <input type="text" name="test">
        <button type="button" onclick="doSubmitForm()">Submit</button>
    </form>
    
    <script>
    function doSubmitForm() { 
        var form = document.getElementById('test-form');
        // 可以在此修改form的input...
        // 提交form:
        form.submit();
    }
    </script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。

因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改：

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

> 在检查和修改时，要充分利用来传递数据。

例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。

#### 操作文件 ####

在HTML表单中，可以上传文件的唯一控件就是。

HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

回调

#### AJAX ####

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

对于低版本的IE，需要换一个ActiveXObject对象：

> 安全限制

这是因为浏览器的**同源策略**导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。

解决：

*  一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
 *  二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：’/proxy?url=http://www.sina.com.cn’ ，代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。
 *  第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：

> CORS

CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。

Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（[如sina.com][sina.com]）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。

> Promise

在JavaScript的世界中，所有代码都是单线程执行的。

由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

**异步操作**会在将来的某个时间点触发一个函数调用。

AJAX就是典型的异步操作

链式写法

古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

应用

*  过程与结果分离  
    可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：  
    ![006tNbRwly1fyki2j3mo6j30e807st8l.jpg][]
 *  Promise可以**串行执行异步任务**  
    Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。

job1.then(job2).then(job3).catch(handleError);
    
    // 其中，job1、job2和job3都是Promise对象。

*  Promise还可以**并行执行异步任务**

// 试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：
    
    var p1 = new Promise(function (resolve, reject) { 
        setTimeout(resolve, 500, 'P1');
    });
    var p2 = new Promise(function (resolve, reject) { 
        setTimeout(resolve, 600, 'P2');
    });
    // 同时执行p1和p2，并在它们都完成后执行then:
    Promise.all([p1, p2]).then(function (results) { 
        console.log(results); // 获得一个Array: ['P1', 'P2']
    });

*  有些时候，多个异步任务是为了**容错**。

// 比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：
    
    var p1 = new Promise(function (resolve, reject) { 
        setTimeout(resolve, 500, 'P1');
    });
    var p2 = new Promise(function (resolve, reject) { 
        setTimeout(resolve, 600, 'P2');
    });
    Promise.race([p1, p2]).then(function (result) { 
        console.log(result); // 'P1'
    });

> Canvas

Canvas是HTML5新增的组件，它就像一块**幕布**，可以用JavaScript在上面绘制各种**图表**、**动画**等。

[http_www.example.com_8080_path_index.html_a_1_b_2_TOP]: http://www.example.com:8080/path/index.html?a=1&b=2#TOP
[www.example.com]: http://www.example.com
[sina.com]: http://xn--sina-f96g.com
[006tNbRwly1fyki2j3mo6j30e807st8l.jpg]: https://ws2.sinaimg.cn/large/006tNbRwly1fyki2j3mo6j30e807st8l.jpg