Javascript位置 body之前、后执行顺序(探讨)!
转载来自:http://blog.csdn.net/dxnn520/article/details/7927461
简介:
当页面加载的时候,嵌入html标记的js代码和位于<body></body>之间的js代码将被执行;当调用的时候,位于<head></head>之间代码和外部js文件代码将被执行
1.根据实际需要放置代码?
有时候,您实际上需要把代码放置在不同地方以符合代码运行要求。比如,您需要在代码全部载入浏览器后再运行代码,那就可以
将<script>标签放在</html>后面去,如果您需要在页面载入的时候运行代码,可以把js代码放入<head></head>之间。
提示:浏览器执行html代码是自上而下的线性过程,<script>作为html代码的一部分同样遵循这个原则!
2.<head>部分js脚本
放入<head>部分js代码将在页面加载完之前被载入,书写如下:
<html>
<head>
<script type="text/javascript">
//js代码放在这儿
</script>
</head>
<body>
</body>
</html>
3.<body>部分js脚本
放入<body>部分js代码将在页面载入的时候被执行,也可以把脚本放入</html>后面,这将在页面载入完成之后被执行,代码如下:
<html>
<head>
</head>
<body>
<script type="text/javascript">
alert("<body>中代码被执行")
</script>
</body>
</html>
<script type="text/javascript" language="Javascript">
<!--
document.write("html代码已经全部载入完成");
-->
</script>
代码分析:
引号中内容被显示在对话框中,当您运行这段代码的时候,您将首先看到弹出对话框,关闭对话框后,将在页面显示如下信息:
4.<body>和<head> 部分脚本
您可以同时在这两个标签部分写入js代码,浏览器将同样遵循代码执行顺序,代码如下:
<html>
<head>
<script type="text/javascript">
alert("<head>中代码被执行");
</script>
</head>
<body>
<script type="text/javascript">
alert("<body>中代码被执行");
</script>
</body>
</html>
代码分析:
您将先看到<head>部分代码对话框被显示,当你关闭这个对话框时,将接着显示<body>部分代码对话框。
5.引用外部javascript文件
当您需要在不同页面调用js代码以执行不同响应的时候,您可以考虑使用外部引用js文件,同时,这样做还能提高代码的维护。
<html>
<head>
<script src="yourjsname.js"></script>
</head>
<body>
</body>
</html>
代码分析:
通过这段代码就可以引用外部文件,src属性用于引用外部文件地址。
提示:在js文件中不需要<script>标签,您可以直接写入js代码。
注意:这里的标记必须写成<script src="yourjsname.js"></script>形式,而不能写成<script src="yourjsname.js"/>
否则浏览器无法正确识别。
----------------------------------------------------------------------------------------------------------------
Javascript 执行顺序
<html>
<meta http-equiv="content-type" content="text;charset=UTF-8" />
<head>
<script type="text/javascript">
alert("<head>中代码被执行")
</script>
</head>
<body>
1234
<script type="text/javascript">
alert("<body>中代码被执行")
</script>
fffff
</body>
<script type="text/javascript" language="Javascript">
<!--
document.write("html代码已经全部载入完成");
-->
</script> </html>
输出顺序:
<head>中代码被执行

<body>中代码被执行

html代码已经全部载入完成

Javascript位置 body之前、后执行顺序(探讨)!的更多相关文章
- javascript的预编译和执行顺序
原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...
- JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载
JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...
- Javascript位置 body之前、后执行顺序
简介:当页面加载的时候,嵌入html标记的js代码和位于<body></body>之间的js代码将被执行:当调用的时候,位于<head></head>之 ...
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...
- 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...
- 算法笔记_017:递归执行顺序的探讨(Java)
目录 1 问题描述 2 解决方案 2.1 问题化简 2.2 定位输出测试 2.3 回顾总结 1 问题描述 最近两天在思考如何使用蛮力法解决旅行商问题(此问题,说白了就是如何求解n个不同字母的所有不同排 ...
- Javascript加载执行顺序
本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...
- JS的预编译和执行顺序 详析(及全局与局部变量)
最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题: <html> <head> <title> ...
- JS的预编译和执行顺序 详析
原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 复制代码 代码一 <ht ...
随机推荐
- Codeforces 451 E Devu and Flowers
Discription Devu wants to decorate his garden with flowers. He has purchased n boxes, where the i-th ...
- Win10激活Office2013的技巧
原文:http://www.xitongzhijia.net/xtjc/20150720/53252.html KMSpico Win10激活工具 是一款能激活Win8/Win8.1/win10/Of ...
- Mysql 性能优化20个原则(4)
16. 垂直分割 “垂直分割”是一种把数据库中的表按列变成几张表的方法,这样可以降低表的复杂度和字段的数目,从而达到优化的目的.(以前,在银行做过项目,见过一张表有100多个字段,很恐怖) 示例一:在 ...
- sqlalchemy的merge使用
1.先看下文档 merge(instance, load=True) Copy the state of a given instance into a corresponding instance ...
- 标准IO函数以及基本知识点总结
什么是标准IO呢?有哪些特点? 标准IO是标准c库提供的对文件操作的函数接口.他的特点是:1 带缓存,2 大部分都调用系统接口函数实现.(c库就是一种实现好的函数接口,作用是屏蔽下层细节.提供上层接口 ...
- tensorflow基础练习:线性模型
TensorFlow是一个面向数值计算的通用平台,可以方便地训练线性模型.下面采用TensorFlow完成Andrew Ng主讲的Deep Learning课程练习题,提供了整套源码. 线性回归 多元 ...
- poj 1659 Frogs' Neighborhood 度序列可图化 贪心
题意: 对一个无向图给出一个度序列,问他是否可简单图化. 分析: 依据Havel定理,直接贪心就可以. 代码: //poj 1659 //sep9 #include <iostream> ...
- PHP中文分词扩展 SCWS
1.scws简单介绍 SCWS 是 Simple Chinese Word Segmentation 的首字母缩写(即:简易中文分词系统). 这是一套基于词频词典的机械式中文分词引擎,它能将一整段的中 ...
- 在OpenStack中绕过或停用security group (iptables)
眼下.OpenStack中默认採用了security group的方式.用系统的iptables来过滤进入vm的流量.这个本意是为了安全,可是往往给调试和开发带来一些困扰. 因此,暂时性的禁用它能够排 ...
- hive:Access denied for user 'root'@'%'
配置hive全分布模式时候,在mysql里面创建用户:create user 'hive' identified by 'hive'; 然后给hive帐号分配全部权限: grant all privi ...