转载来自：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. Maven配置将war包部署到Tomcat（tomcat7-maven-plugin）

    Tomcat7/8: 提示:经过测试Tomcat7的配置和插件在Tomcat8中能正常运行 tomcat7-maven-plugin官方帮助文档:http://tomcat.apache.org/ma ...

  2. maven删除不必要的依赖；优化pom依赖研究

    mvn dependency:copy-dependencies -DoutputDirectory=/home/admin/git/oceanus/test 会把所有依赖的插件版本都拷贝进去,而不是 ...

  3. app具体介绍界面-01

    在我们的上一篇博客中,我们介绍了首页中的app列表界面怎样完毕.这个ListView以及其Adapter会在我们后面的界面中重用,所以这个是比較重要的,在这一篇博客中,我们先完毕app具体介绍界面的一 ...

  4. 软件系统架构 https://www.lanhusoft.com/Article/349.html

    跟蓝狐学习Nop--NopCommerce源码架构详解专题目录 Posted By : 蓝狐 Updated On : 2018-04-16 14:46 我们承接以下nop相关的业务,欢迎联系我们. ...

  5. 我所见过的最简短、最灵活的javascript日期转字符串工具函数

    我们知道javascript的Date对象并没有提供日期格式化函数.将日期对象转换成"2015-7-02 20:35:11"等这样的格式又是项目中非经常常使用的需求.近期在我们项目 ...

  6. mysql 查询 优化

    1.基本原则:优化数据访问 (1)是否想服务器请求了不需要的数据?提取超过需要的列,多表连接时提取所有列,提取所有列都会消耗不必要的资源,提取你所需要的列就可以了. (2)MySQL检查了太多的数据吗 ...

  7. 安装Sublime配合quick-cocos2d-x开发

    下载地址 Sublime下载地址 安装 Package Control 在Sublime中,按Ctrl+~打开控制台,输入: Sublime Text2 import urllib2,os; pf=' ...

  8. js操作文件 HTML5版

    js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...

  9. 使用$.when()解决AJAX异步难题之:多个ajax操作进行逻辑与(and)

    上一篇文章"JQuery.deferred提供的promise解决方式",提到了javascript异步操作的3个问题,以及javascript Promise入门.如今我们看下怎 ...

  10. 【Web前端】清除浮动&amp;css中文字体

    清理浮动有非常多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow.使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用例如以下代 ...