第五章-浏览器
目前的浏览器有以下几种
IE 6~11: 对W3C支持差, 从IE10开始支持ES6
Chrome: 谷歌的浏览器, Webkit内核, JS引擎是十分强悍的V8, 保持自动升级的模式
Safari: 苹果的浏览器, 同样是Webkit内核
Firefox: Mozilla自己研发的Gecko内核, JS引擎也是自己的OdinMonkey
1 浏览器对象
(1) window
表示全局作用域, 也表示浏览器窗口
window.innerWidth 显示网页的净宽度
window.innerHeight 显示网页的净高度
window.outerWidth 浏览器整个宽度
window.outerHeight 浏览器整个高度
(2) navigator
表示浏览器信息
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
然而navigator的信息很容易就被用户修改, 所以一般不同navigator判断浏览器类型等信息
一般判断不同的属性要抓住JavaScript对不存在的内容不是报错而是返回undefined
var width = window.innerWidth || document.body.clientWidth;
(3) screen
表示屏幕信息
screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。
(4) location
表示当前页面的URL信息
(5) document
表示当前页面, 是整个DOM树的根节点
可以根据document来获取页面的所有标签
可以通过title来修改页面的title
可以通过getElementById()和getElementsByTagName()等来获取标签对象
document对象还有一个十分关键的cookie
Cookie是服务器发送的键值对标识符, 浏览器通过将Cookie发送给服务器, 让服务器认识当前的浏览器, 改善HTTP无状态的情况
由于一般JavaScript也可以读取Cookie, 这样就十分不安全, 为此可以在服务器中设置httpOnly, 这样cookie就不能被JavaScript读取了
(6) history
保存了浏览器的历史记录
可以使用back()和forward()前进和后退
但是这种简单粗暴的方式应该杜绝使用了
2 操作DOM
HTML文档被浏览器解析之后就是一棵DOM树
对DOM节点有基本的四个操作: 增删改查
(1) 常用方法
document.getElementById() 根据Id, 获得唯一元素
document.getElementsByTagName() 返回一组元素
document.getElementsByClassName() CSS选择器, 返回一组元素
(2) 通过selector选择
querySelector() 可以是document调用, 传入选择器参数
querySelectorAll() 可以是获得的元素对象, 传入的同样是选择器参数
2.1 更新DOM
(1) 更改标签内容
更改标签内容有三个值: innerHTML, innerText, textContent
innerHTML是获取标签所有内容, 并且可以给其重新赋值, 赋值的内容可以包含有效标签
innerText获取的是元素对象里面的文本信息, 如果给其重新赋值, 会覆盖原有内容, 不会生成有效的标签
textContent与innerText差不多, 只是返回内容的值全部拼接到了一起
(2) 更新标签的属性
可以直接使用
标签对象.属性名 = "修改后的值"
来直接修改内容, 如果原有内容不符合命名规则, 需要将其转化为驼峰写法
PS: 添加属性使用setAttribute(属性名, 属性值)
2.2 插入DOM
使用innerHTML尽管可以添加一些新的标签进去, 但是会替换原有的内容
插入DOM主要是有两个方法appendChild()和insertBefore(新加入节点, 标志节点)
可以使用document.createElement(标签名字)来创建一个标签
通过setAttribute()和直接操作属性, innerHTML等来修改得到标签
给head添加style标签如下
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
新添加一个元素到python元素之前
//原来的HTML
//<div id="list">
// <p id="java">Java</p>
// <p id="python">Python</p>
// <p id="scheme">Scheme</p>
//</div>
var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
//新增后的HTML
//<div id="list">
// <p id="java">Java</p>
// <p id="haskell">Haskell</p>
// <p id="python">Python</p>
// <p id="scheme">Scheme</p>
//</div>
2.3 删除DOM
删除DOM的办法是, 先获得要删除的节点, 然后获取该节点的父节点, 然后调用父节点的removeChild()删除自身
删除后会有一个返回值, 这个返回值就是被删除的节点, 这个节点会继续保存在内存当中, 因此可以通过这个返回值可以将它放到另一个地方
但是这又有一个十分诡异的情况:
children属性是一个只读属性, 当子节点发生变化的时候会实时更新
也就是说:
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错
因此在删除多个节点的时候, 要注意children时刻都在变化
3 操作表单
表单本身也是一个DOM树, 因此对表单的操作与DOM类似
HTML的输入控件一般有
文本框，对应的
<input type="text">，用于输入文本；口令框，对应的
<input type="password">，用于输入口令；单选框，对应的
<input type="radio">，用于选择一项；复选框，对应的
<input type="checkbox">，用于选择多项；下拉框，对应的
<select>，用于选择一项；隐藏文本，对应的
<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。
(1) 一般对表单的操作是设置和获取标签的值, 一般是获得标签之后使用
标签对象.value;
标签对象.value = 新设置的值;
来获取或设置
但是例如radio这样的, 应该获取checked的值来判断状态, 一般来说勾选为true不勾选为false
(2) 提交表单
方法1: 设置一个提交按钮, 写触发的点击事件, 获取表单, 用 表单对象.submit() 来提交表单
//<form id="test-form">
// <input type="text" name="test">
// <button type="button" onclick="doSubmitForm()">Submit</button>
//</form>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
但是正常情况是使用<button type="submit">或者在某个输入框回车的时候提交表单
方法2: 在表单中添加onsubmit属性, 里面使用"return 检验函数()", 这样在提交函数内部会有一个返回值, 当返回为true时表单提交, 返回为假时表单不提交
//<form id="test-form" onsubmit="return checkForm()">
// <input type="text" name="test">
// <button type="submit">Submit</button>
//</form>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 继续下一步:
return true;
}
表单注意事项:
要提交的表单要写好name属性, 没有name属性是不会提交的, 这可以用于不传输明文密码而把原密码加密后给一个hidden的input
4 操作文件
唯一可以上传文件的控件是<input type="file">
当上传文件的时候, 需要将表单的enctype设置为multipart/form-data, methodno必须设置为post
出于安全性设计, JavaScript是无法获取文件的真实路径的, 也无法赋值, 但是可以使用value来获得假的路径, 文件名是正常的
一般来说都是对上传的文件作一个类型判断
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}
由于JavaScript本身对文件的操作有限, 可以使用File API来获取更多文件信息和一些操作
HTML5的File API提供了File和FileReader两个主要对象, 可以获得文件信息并读取文件
以DataURL的形式读取到的文件是一个字符串, 常用于设置图像, 如果服务器处理, 把字符串base64后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容
JavaScript有一个十分十分十分重要的特点, 就是单线程执行模式
也就是说, 浏览器在执行JS代码的时候总是以单线程模式执行, 任何时候JS代码都不可能同时有多余1个线程在执行
JS处理多任务的方法是使用异步调用, 对于FileReader对象, 就需要先设置一个FileReader对象.onload为一个编写好的回调函数
这个回调函数在FileReader对象完成文件读取之后才会执行, 这就是JS中比较神奇的异步调用了
读入一个图片文件并将图片和图片信息显示的实例代码如下:
var
fileInput = document.getElementById('test-image-file'),//文件获取input
info = document.getElementById('test-file-info'),//文件信息展示div
preview = document.getElementById('test-image-preview');//图片展示div
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
// 设置回调函数
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
5 AJAX
AJAX(Asynchronous JavaScript and XML) JavaScript执行异步网络请求
web运行的原理: 一次HTTP请求对应一个页面
如果需要停留在当前页面中, 并且还发送HTTP请求, 这就需要使用JavaScript来发送这个请求, 就收到数据后, 在用JavaScript更新页面
现代的AJAX主要是依靠XMLHttpRequest对象, 但是对于低版本的IE, 需要使用ActiveXObjective对象
但是判断IE版本不要使用navigator不要使用navigator不要使用navigator, 而要抓住JavaScript中的属性不存在的时候返回undefined
一般地:
获取到一个请求对象, 然后设置对象.onreadystatechange为一个回调函数, 再使用open()函数设置请求, 使用send()函数发送请求
其中回调函数一般先判断 对象.readyState==4 表示请求是否完成, 再用status==200判断是否是成功响应
对于open(), 有三个参数, 分别是发送请求方式(POST/GET), URL地址, 是否使用异步(默认为true)
特别注意, 如果将是否使用异步设置为false, name浏览器会停止相应等待请求完成, 如果超过10秒, 浏览器就会处于一个假死状态
具体的兼容版本代码如下:
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
// 新建XMLHttpRequest或者Microsoft.XMLHTTP对象
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功，通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败，根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');
关于安全限制
对于URL设置, 需要设置为当前页面完全一致的域名的URL, 这是浏览器的同源策略
完全一致包括: 域名相同, 协议相同, 端口相同
解决同源问题有三种办法:
1) 通过Flash插件来发送HTTP请求, 但是与Flash交互不是很方便, 当下用得也少
2) 在同源于域名下, 架设一个代理服务器, 通过该代理服务器来转发请求
'/proxy?url=http://www.sina.com.cn'
3) JSONP, 只能使用GET请求, 并且要求返回JavaScript, 实际上是利用浏览器允许跨域引用JavaScript资源来实现的
具体操作方法为:
用js添加<script>标签, 里面src就是外部的引用地址, 然后根据该js返回的内容, 设置一个回调函数(一般地, 返回值的数据名部分就是回调函数的名字)
CORS(Cross-Origin Resource Sharing) 是HTML5规范定义的如何跨域访问资源
当JavaScript向外域发送请求后, 浏览器会回应请求, 请求中有Access-Control-Allow-Origin字段, 如果该字段中包含了本域(或者为*), 则此次跨域请求成功
由此可见, 跨域请求是否成功还是取决于请求的服务器是否同意此次跨域, 这也就解释了有的使用使用引用外部的字体的时候, 有可能没有引用成功导致字体设置不正常
当然对于POST和DELETE等的POST请求, 在发送AJAX请求之前, 浏览器回先发送一个OPTIONS请求到这个URL上, 询问服务器是否接受, 且服务器相应还会给出允许的Method
6 Promise
JavaScript的单线程的特性也就意味着JS代码只能是异步执行, 异步执行的话就需要使用回调函数来实现具体功能
由于在回调中, 会出现成功失败等各种情况的处理结果, 因此需要写各个情况的处理函数, 这样也不方便重用, 现在有一个类似jq中的链式写法
可以直接在请求之后直接跟上成功和失败的处理函数, 这样就不需要考虑是否成功与失败, 直接自己调用对应的回调函数了
Promise是封装执行代码和处理结果, 将其分离
具体实例如下
// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
logging.removeChild(logging.children[logging.children.length - 1]);
}
// 输出log到页面:
function log(s) {
var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
new Promise(function (resolve, reject) {
log('start new Promise...');
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
}
else {
log('call reject()...');
reject('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
}).then(function (r) {
log('Done: ' + r);
}).catch(function (reason) {
log('Failed: ' + reason);
});
利用Promise可以将多个设置多个异步任务, 当执行任务1之后再执行任务2, 任何一个任务失败都不会继续执行
另外组合使用Promise, 就可以实现异步任务以并行和串行的方式组合起来执行
7 Canvas
Canvas是HTML5新增的组件, 类似于幕布的效果, 可以在Canvas上绘制各种图表, 动画等
可以在Canvas中定义一些HTML标签, 用于在有的浏览器不支持Canvas的时候显示定义好的这些标签
Canvas标签含有属性width和height用于定义尺寸大小
可以通过获得的Canvas对象.getContext()来判断浏览器是不是支持Canvas
获得绘图2d或者3d对象
Canvas对象.getContext("2d")
Canvas对象.getContext("webgl")
Canvas的二维绘图有一个坐标轴, 0点是左上角, 水平向右是x轴, 垂直向下是y轴
具体在Canvas上绘制一个灰色背景的笑脸图像的具体代码如下
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);
绘制文本
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);
