一、在HTML中嵌入Javasript的方法
直接在Javascript代码放在标记对<script>和</script>之间
由<script />标记的src属性制定外部的js文件
放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>
作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>
利用javascript本身的document.write()方法写入新的javascript代码
利用Ajax异步获取javascript代码,然后执行
第3种和第4种方法写入的Javascript需要触发才能执行,所以除非特别设置,否则页面加载时不会执行。
二、Javascript在页面的执行顺序
页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。
每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。
变量的调用,必须是前面已经声明,否则获取的变量值是undefined。
<script type="text/javscrpt">//<![CDATA[
alert(tmp); //输出 undefined
var tmp = 1;
alert(tmp); //输出 1
//]]></script>
同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。
<script type="text/javscrpt">//<![CDATA[
aa(); //浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //输出 1
function aa(){alert(1);}
//]]></script>
document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
test.js的内容是:
var tmpStr = 1;
alert(tmpStr);
在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3
在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义
原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,并且执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。
解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理,把代码拆分来实现:
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3。
三、如何改变Javascript在页面的执行顺序
利用onload
<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>
输出值顺序是 2、1。
需要注意的是,如果存在多个winodws.onload的话,只有最有一个生效,解决这个办法是:
window.onload = function(){f();f1();f2();.....}
利用2级DOM事件类型
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
IE中可以利用defer,defer作用是把代码加载下来,并不立即执行,等文档装载完毕之后再执行,有点类似window.onload,但是没有window.onload那样的局限性,可以重复使用,但是只在IE中有效,所以上面的例子可以修改成为
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>
这样IE就不报错了,输出值的顺序变成:1、3、2、我是1
当HTML解析器遇到一个脚本,它必须按常规终止对文档的解析并等待脚本执行。为了解决这个问题HTML4标准定义了defer。通过defer来提示浏览器可以继续解析HTML文档,并延迟执行脚本。这种延迟在脚本从外部文件载入时非常有用,让浏览器不必等待外部文件全部载入之后才继续执行,能有效的提高性能。IE是目前唯一支持defer属性的浏览器,但IE并没有正确的实现了defer属性,因为延迟的脚本总是被延迟,直到文档结束,而不是只延迟到下一个非延迟的脚本。这意味着,IE中延迟的脚本的执行顺序相当混乱,并且不能定义任何后面非延迟脚本并须的函数和变量。在IE中所有的defer的脚本执行时间应该都是HTML文档树建立以后,window.onload之前
- 浏览: 324392 次
- 性别:
文章分类
- 全部博客 (223)
- html (20)
- oracle (18)
- ssh搭建 (6)
- js (26)
- dedecms (7)
- regular (2)
- java (39)
- mysql (15)
- oracle,效率 (1)
- struts1 (1)
- hibernate (3)
- ajax (5)
- iframe (1)
- js重置序号 (1)
- js,身份证验证 (3)
- 截图工具 (1)
- java读取excel (1)
- java导出excel文件 (3)
- jstl (2)
- springMVC (4)
- excel导入 (1)
- java进阶之路 (2)
- java正则 (1)
- 电子邮件 (1)
- emoji (1)
- zip (1)
- linux (4)
- csv (1)
- redis (1)
- 事务管理 (1)
- mybatis (1)
- BigDecimal (1)
- tomcat (1)
- jquery ajax 上传 (1)
- 时间控件 (1)
- json (1)
- nginx,squid,linux (1)
- 笔记 (1)
- 面试整理 (11)
- 工作中问题 (5)
最新评论
-
xinyun99:
在jdk1.8中:JDK1.8的实现已经摒弃了Segment的 ...
ConcurrentHashMap在jdk1.8和1.7中的区别 -
ttlly:
tomcat在eclipse中启动成功,主页却打不开 -
sky_xin:
当排序的字段值相等的时候后面再跟上按住键排序就没有问题了
order by排序的字段的值相等,导致两个sql查询出来的显示结果不一样
发表评论
-
js去除输入框中的特殊字符
2015-08-09 16:28 877//查询的文本框不能输入特殊字符 function cl ... -
showModalDialog通过window.returnValue向父页面传值
2015-04-01 13:46 643父页面: function showValue(){ ... -
热点地图及jquery的ajax中json对象处理
2015-03-31 15:38 615<img src=&quo ... -
iframe和父页面共用一个滚动条
2015-01-20 10:22 1791子页面: <body onload="pa ... -
WEB打印scriptX的使用
2015-01-04 10:32 723引自:http://ajxfxb.blog.163.com/ ... -
js弹出窗口
2014-12-31 15:59 571function printProve(donID){ ... -
a标签中写js的方法
2014-12-31 13:46 447<a>标签中写js通过控制return的返回值来 ... -
网页时钟的实现方式
2014-12-22 15:00 747setInterval()是Window对象的方法,调用此方 ... -
tab.insertRow()如何加背景颜色css样式
2014-12-18 18:07 1056function addAttachment(fileNam ... -
js当回车按下的时候执行登陆操作
2014-12-12 13:15 705<script language="java ... -
ajax中文乱码问题解决办法
2014-12-01 12:49 630在IE环境下,ajax传入中文参数乱码解决办法: $.aj ... -
js实现向表格追加新行
2014-11-26 21:17 721$(document).ready(function(){ ... -
在js中使用jstl表达式
2014-11-26 20:57 3228引自:http://blog.csdn.net/a54898 ... -
验证输入内容的长度(如果含有中文)占两个字节
2014-11-25 14:36 566//去掉字符中前空格function sltrim(tst ... -
正则表达式验证电话号码
2014-11-25 13:06 555//联系电话checkfunction checkTel() ... -
oninput,onpropertychange,onchange的区别和用法
2014-11-24 17:12 5781.判断IE和非IE浏览器 $(document).rea ... -
jquery的ajax使用例子
2014-11-24 12:58 467异步的情况: $.ajax({ type ... -
iframe内如何得到iframe以外的元素
2014-04-18 15:21 674a.jsp <iframe id ... -
IE11以及浏览器的判断
2014-04-02 09:45 916http://www.ithome.com/html ... -
理解JavaScript中的事件处理
2014-03-06 12:05 722什么是事件? 事件(Event)是JavaS ...
相关推荐
2. **外部引用**:使用`<script>`标签的`src`属性指向.js文件,这种方式允许代码分离,提高页面加载效率。 3. **事件处理程序**:将JavaScript代码绑定到HTML元素的事件属性上,如`onclick`。 4. **URL主体**:使用`...
在给定的示例中,JavaScript的执行顺序是:`alert(1)`、`alert(2)`(来自外部文件`a.js`)、`alert(3)`,以及对`<input id="a">`的操作。如果在`<input>`元素之上放置一个`<script>`标签来获取`id="a"`的元素,由于...
首先,JavaScript可以直接写在`<script>`标签内,或者通过`<script>`标签的`src`属性引用外部JS文件。这两种方式都会按照它们在HTML文档中的出现顺序依次执行。例如,在`<head>`部分的脚本会先于`<body>`部分的脚本...
外部JavaScript文件的代码将按照文件中语句出现的顺序执行。 3. 将JavaScript代码放置在事件处理程序中,例如,`onclick`事件。这需要用户进行特定操作(如点击)才能触发代码执行。 4. 利用JavaScript协议,将...
此外,JavaScript还可以通过外部文件引入,使用`<script src="script.js"></script>`,这种方法便于代码管理和维护,且可利用浏览器缓存减少重复下载。为了优化性能,可以使用`async`或`defer`属性来控制脚本的异步...
运算符的优先级对表达式的求值顺序有直接影响。 JavaScript的程序结构主要包括简单语句、控制语句等。简单语句如赋值语句(`变量名 = 表达式`)、注释语句(单行和多行)和输出字符串(使用`document.write()`或`...
一元运算符如`++`和`--`用于对变量进行加1或减1的操作,分为前置和后置两种形式,影响运算的顺序。赋值运算符`=`用于将右侧的值赋给左侧的变量。算术运算符如`+ - * / %`用于数值计算,其中加号还有字符串拼接的用途...
随着AJAX技术的兴起和发展,JavaScript在前端交互中的地位更加稳固,对语言本身的需求也愈发多样化。为了更好地管理和组织代码,提升开发效率及可维护性,将面向对象编程(OOP)的理念引入JavaScript成为了一种趋势。 ...
文档流可以是从上到下、从左到右或从右到左。文档流的顺序可以影响元素的显示顺序和交互行为。 元素浮动后的三大变化 当元素浮动后,会出现三大变化:1. 元素脱离文档流,2. 元素的宽度变为自适应,3. 元素的 ...
### JavaScript核心概念与技术知识点详解 #### 一、JavaScript基础知识 ...以上内容总结了从给定文件中提取的核心JavaScript知识点,涵盖了基本语法、内置对象、浏览器环境等方面的基础知识和技术要点。
在现代Web开发中,加载CSS和JavaScript文件的方式对于网站性能和用户体验有着很大的影响。合理地安排脚本和样式的加载位置可以优化页面的加载速度,减少页面加载时的白屏时间,从而提升用户体验。本文针对Yii2框架中...
14. 关系数据库记录:关系数据库中的记录前后顺序可以任意颠倒,不影响数据之间的关系。 15. 对象的动作:对象可以执行的动作称为方法,可被对象识别的动作称为事件。 16. 第四媒体:网络媒体被称为第四媒体,因为...