转载来自: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>

代码分析:

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>
<script type="text/javascript" language="Javascript">
  <!--
    document.write("html代码已经全部载入完成");
  -->
</script> </html>

输出顺序:

  <head>中代码被执行

  

  <body>中代码被执行

  

  html代码已经全部载入完成

  

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之前、后执行顺序

    简介:当页面加载的时候,嵌入html标记的js代码和位于<body></body>之间的js代码将被执行:当调用的时候,位于<head></head>之 ...

  4. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

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

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

  6. 算法笔记_017:递归执行顺序的探讨(Java)

    目录 1 问题描述 2 解决方案 2.1 问题化简 2.2 定位输出测试 2.3 回顾总结 1 问题描述 最近两天在思考如何使用蛮力法解决旅行商问题(此问题,说白了就是如何求解n个不同字母的所有不同排 ...

  7. Javascript加载执行顺序

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

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

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

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

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

随机推荐

  1. Codeforces Round #320 (Div. 2) [Bayan Thanks-Round]

    一部分题解,算是自己SB了 上午的TC 也是这样 写好了代码,却一直没注意细节,然后以为错了. 此处省100字,ps 貌似紫了,作为一个老菜鸡,终于紫了 A,B 都是语文题 C: 给以一个三角形一样的 ...

  2. Java中获取项目根路径和类加载路径的7种方法

    引言 在web项目开发过程中,可能会经常遇到要获取项目根路径的情况,那接下来我就总结一下,java中获取项目根路径的7种方法,主要是通过thisClass和System,线程和request等方法. ...

  3. pinpoint 应用性能管理工具安装部署

    原文:http://www.cnblogs.com/yyhh/p/6106472.html pinpoint 安装部署   阅读目录 1. 环境配置 1.1 获取需要的依赖包 1.2 配置jdk1.7 ...

  4. 快速上传到rackspace cdn工具turbolift swift 安装

    快速上传到rackspace cdn 工具安装,2步即可完成: 1.安装git CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 y ...

  5. 单词number 和 numeral 的区别

    原文: http://blog.sina.com.cn/s/blog_72cd06360100vn7t.html be of 的用法,相当于表征特征或属性的形容词. 简单地说,“of + 名词”等于“ ...

  6. SpringCloud中Rabbitmq的使用

    1.pom配置,添加以来jar包 <dependency> <groupId>org.springframework.cloud</groupId> <art ...

  7. Solidworks 不能生成实体,因为这将导致厚度为零的零件怎么办

    如下图所示,我认为我长出一块东西根本不会对其他零件有什么影响.   去掉合并结果之后就好了.   钣金要比方钢高出1mm,这样焊接上去才方便.              

  8. palindrome-partitioning I&II——回文切割、深度遍历

    I: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...

  9. Linux安装Axis C构建WebService服务

    在安装Axis C++之前有两个组件是必须安装的,分别是Apache HTTP Server以及用于处理XML的程序Xerces:为了编译Axis以及Apache HTTPD,你的Linux机器还应该 ...

  10. openwrt - squashfs-sysupgrade.bin 的生成过程

    squashfs-sysupgrade.bin 生成过程图 路径变量 $(KERNEL_BUILD_DIR)="/home/sam/Projects/openwrt-mt7620n/buil ...