简介：
当页面加载的时候，嵌入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>

代码分析：

alert("<body>中代码被执行")

引号中内容被显示在对话框中,当您运行这段代码的时候，您将首先看到弹出对话框，关闭对话框后，将在页面显示如下信息：

html代码已经全部载入完成

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>

代码分析：

<script src="yourjsname.js"></script>

通过这段代码就可以引用外部文件，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>
</html>
<script type="text/javascript" language="Javascript">
<!--
document.write("html代码已经全部载入完成");
//-->
</script>

Javascript位置 body之前、后执行顺序的更多相关文章

  1. javascript的预编译和执行顺序

    原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...

  2. JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

    JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...

  3. Javascript位置 body之前、后执行顺序(探讨)!

    转载来自:http://blog.csdn.net/dxnn520/article/details/7927461 简介:当页面加载的时候,嵌入html标记的js代码和位于<body>&l ...

  4. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

  5. Javascript加载执行顺序

    本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...

  6. JS的预编译和执行顺序 详析(及全局与局部变量)

    最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title> ...

  7. JS的预编译和执行顺序 详析

    原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <ht ...

  8. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  9. 【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序

    三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; ...

随机推荐

  1. c++ map 的使用

    1.map是一类关联式容器,它是模板类. 关联的本质在于元素的值与某个特定的键相关联,而并非通过元素在数组中的位置类获取.它的特点是增加和删除节点对迭代器的影响很小,除了操作节点,对其他的节点都没有什 ...

  2. OpenCV 2.4.10 Linux Qt Conifguration

    Download CMake 2.8.12 Extract the file, and run "./bootstrap", then "make", then ...

  3. Java接口、Java抽象类、C++抽象类的区别

    由于这三种数据类型都是为了创建类层次结构的顶层构架,且用法有些许相似之处,这里简单区分一下: 接口: 接口用interface关键字定义, 名字一般使用-able形式的形容词. 接口通常定义抽象方法和 ...

  4. 3种用组策略将域帐号加入本地管理员组的方法_jinifly_新浪博客

    次当前系统域帐号是怎么在第一次登录时,自动加入域客户端本地管理员组的?我猜不外乎就是脚本.计算机策略或虚拟机初始化的自动应答脚本,结果系统的前任同事找到了答案--GPO的用户策略(确切讲是用户首选项) ...

  5. PHP 常用函数库和一些实用小技巧

    PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载   包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等   文件读取函式 //文件读取函式 function ...

  6. SQL--查询相同字段的数据

    select city, statefrom state_county_citywhere city in (select city from state_county_city group by c ...

  7. TeamViewer“试用期已到期”解决方法

    今天打开TeamViewer,显示试用期已到期,不能远程至其它电脑上.软件重装也没用,因为它与你的机器及网卡做了绑定. 查看网上资料,发现需要删除注册信息等操作才能继续使用,步骤如下: 说明:操作前, ...

  8. HTML: margin重疊現象的說明

    2句話: ①相鄰的兩個普通元素,上下邊距,不是簡單的相加,而是取邊距較大的元素(若相邻的两个普通兄弟元素,它们的margin 值是一样的,则各取两个元素的margin 值的一半.)②关系为父子的两个d ...

  9. Flink - Working with State

    All transformations in Flink may look like functions (in the functional processing terminology), but ...

  10. Tuning Spark

    https://spark.apache.org/docs/1.2.1/tuning.html Data Serialization 数据序列化,对于任意分布式系统都是性能的关键点 Spark默认使用 ...