web浏览器中的javascript -- 2

web浏览器中的javascript -- 2
在html里嵌入javascript：

在html文档里嵌入客户端javascript代码有4种方式：

1.内联，放置在<script>和</script>标签对之间;

2.放置在由<script>标签的src属性指定的外部文件中;

3.放置在HTML事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定;

4.放在一个URL里，这个URL使用特殊的“javascript：” 协议。

实例：实现一个简单的javascript数字时钟程序：

toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果

语法：dateObject.toLocaleTimeString()

返回值：dateObject 的时间部分的字符串表示，以本地时间区表示，并根据本地规则格式化
```
<div id="clock"></div>
```
```
 //定义一个函数用以显示当前时间
function disTime(){
    //找到id = "clock"元素
    var time = document.getElementById("clock");
    //获取当前时间
    var date = new Date();
    //toLocaleTimeString(); Date对象的时间部分转换为字符串，并返回结果，将返回的结果赋值到time中
    time.innerHTML = date.toLocaleTimeString();
    //在1秒后再次执行（显示秒的跳动）
    setTimeout(disTime,1000)
}
    //当onload事件发生时开始显示时间
window.onload = disTime;
```
脚本类型：

老的浏览器在<script>标记上用language属性代替type属性：
```
<script language="javascript">
 //这里是javascript代码...   
</script>
```
language属性已经废弃，不应该再使用了。

当web浏览器遇到<script>元素，并且这个<script>元素包含其值不被浏览器识别的type属性时，它会解析这个元素但不会尝试显示或执行它的内容，意味着可以使用<script>元素来嵌入任意的文本数据到文档里，只要用type属性为数据声明一个不可执行的类型。

HTML中的事件处理程序：

当脚本所在的HTML文件被载入浏览器时，这个脚本里的javascript代码只会执行一次。为了可交互，javascript程序必须定义事件处理程序。

onchange 事件会在域的内容改变时发生(例如用户选择或取消选择复选框时执行)

URL中的javascript：

javascript：URL可以用在可以使用常规URL的任意地方：比如<a>标记的href属性，<form>的action属性，甚至window.open()方法的参数。超链接里的javascript URL可以是这样：
```
<a href="javascript:new Date().toLocaleString()"></a>
```
如果要确保javascript：URL不会覆盖当前文档，可以用void操作符强制函数调用或给表达式赋予undefined值：
```
<a href="javascript:void window.open('about:blank')">打开一个新窗口</a>
```
如果这个URL里没有void操作符，调用window.open()方法返回的值会(在一些浏览器里)被转化为字符串并显示，而当前文档也会被覆盖为包含该字符串的文档：

[object Window]

同步、异步和延迟的脚本：

展示1996年最先进的javascript的样子，载入时生成文档内容：
```
function factorial(n){
        if(n<=1)return n;
        else return n*factorial(n-1);
    }
    document.write("<table>"); //开始创建HTML表
    document.write("<tr class='ab'><th>n</th><th>n!</th></tr>");  //输出表头
    for(var i = 1;i<=10;++i){   //输出10行
        document.write("<tr class='ab'><td>" + i + "<td></td>" + factorial(i) + "</td></tr>")
    }
    document.write("</table>");   //表格结束
    document.write("Generated at" + new Date());  //输出时间戳
```
创建元素 document.createElement("");

事件驱动的javascript：

addEventListaner()的方法，允许注册多个监听器：
```
window.addEventListener('load',function(){....},false);
```
函数的第一个参数是事件的名称，在IE8以及之前的浏览器中，必须使用一个相似的方法，叫做attachEvent():
```
window.attachEvent('load',function(){....},false);
```
异步脚本禁止使用document.write();

attachEvent()不像addEventListener()一样强大，并且在IE提供的基础上透明地实现整个标准并非真正可行。反之，开发者有时定义一个折中的事件处理方法，通常叫addEvent()，它可以用addEventListener()或attachEvent()来方便地实现绑定事件的功能。然后，它们在所有的代码里用addEvent()来代替addEventListener()或attachEvent()。

document.readyState()

定义和用法：

readyState 属性返回当前文档的状态（载入中……）。

该属性返回以下值:
- uninitialized - 还未开始载入
- loading - 载入中
- interactive - 已加载，文档与用户可以开始交互
- complete - 载入完成
语法：

document.readyState

所有主要浏览器都支持 readyState 属性

事件DOMContentLoaded和load的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为
1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load
在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。
用原生js可以这么写
```
// 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);
```
用jquery这样写：
```
// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load
$(document).load(function() {
    // ...代码...
});
```
原文链接：http://www.jianshu.com/p/d851db5f2f30

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

处理兼容性问题的类库：

canvas：下载网址：http://code.google.com/p/explorercanvas/downloads/list

ie 会看起来像支持<canvas>元素一样（类库）

jQuery兼容所有浏览器

功能测试：
```
 if(element.addEventListener){
        //在使用这个W3C方法之前首先检测它是否可用
        element.addEventListener('keydown',handler,false);
        element.addEventListener('keypress',handler,false)
    }else if(element.attachEvent){
        //在使用该IE方法之前首先检测它
        element.attachEvent('onkeydown',handler);
        element.attachEvent('onkeypress',handler)
    }else{
        //否则，选择普遍支持的技术
        element.onkeydown = element.onkeypress = handler;
    }
```
Internet Explorer里的条件注释：

<!--[if IE 6]><![endif]> 注释后其他浏览器就不会载入它

IE中的javascript条件注释以文本/*@cc_on开头，以文本@*/

/*@cc_on

@if(@_jscript)

//该代码位于一条js注释内但在IE中执行它

@end

@*/

decodeURIComponent

定义和用法：

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
```
decodeURIComponent(URIstring)
```
返回值:URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换

实例：
```
<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1))

</script>

输出：
http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
http://www.w3school.com.cn/My first/
```
window.location
```
window.location 对象在编写时可不使用 window 这个前缀。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL
location.search 从问号开始（？）开始的URL（查询部分）

document.write(location.href);
输出：http://www.w3school.com.cn/js/js_window_location.asp

document.write(location.pathname);
输出：/js/js_window_location.asp

location.assign() 方法加载新的文档
function newDoc()
  {
  window.location.assign("http://www.w3school.com.cn")
  }
<input type="button" value="加载新文档" onclick="newDoc()">
```
JS 脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得，然后通过 split 方法结合循环遍历自由组织数据格式
```
var searchURL = window.location.search;  
searchURL = searchURL.substring(1, searchURL.length);  
var targetPageId = searchURL.split("&")[0].split("=")[1];
```
```
onbeforedeactivate   deactivate 过滤删除
```
```
前者在切换到window的其它程序时会激发，后面不会；光标落到另一个元素后，前者先产生另一个元素的onfocus事件，
再产生本元素的onblur事件，后者则是先本元素的onbeforedeactivate事件，如果返回true后，
然后再另一个元素的onfocus事件，如果返回false，则不会激发另一个元素的事件
（？鼠标右键除外，并且此时另一元素的onfocus对鼠标右键也感冒）；
用onbeforedeactivate可以解决抢焦点的死循环
<input type="text" onblur="alert('OK1');event.srcElement.select();return false;" />
<input type="text" onblur="alert('OK2');event.srcElement.focus();return false;" />
这样会产生死循环，而以下代码则不会
<input type="text" onbeforedeactivate="alert('OK1');event.srcElement.select();return false;" />
<input type="text" onbeforedeactivate="alert('OK2');event.srcElement.focus();return false;" />
```
相关阅读:
架构设计流程：评估和选择备选方案
 架构设计流程:设计备选方案
 架构设计三原则
 迭代器模式(电视机遥控器)
外观模式
 5.组合模式
 完成动物识别，自行拍摄动物图片进行上传并查看结果
 4.桥接模式（毛笔和颜色）
企业沟通机制
 完成植物识别，自行拍摄植物图片进行上传并查看结果
原文地址：https://www.cnblogs.com/JinQing/p/6710038.html

web浏览器中的javascript -- 2

事件DOMContentLoaded和load的区别

定义和用法：