web浏览器中的javascript -- 2

时间：2022-11-08 06:20:52

在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)

web浏览器中的javascript -- 2

返回值: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;" />

相关文章