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;" />