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

转载于:https://www.cnblogs.com/BrokenIce/p/5943488.html

Javascript位置 body之前、后执行顺序相关推荐

  1. JavaScript的预编译及执行顺序

    从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序. 如果说,JavaScript引擎的工作机制比较深奥是 ...

  2. C++程序抛出异常后执行顺序

    1 析构函数中是否可以抛出异常 首先我们看一个常见的问题,析构函数中是否可以抛出异常.答案是C++标准指明析构函数不能.也不应该抛出异常! C++异常处理模型是为C++语言量身设计的,更进一步的说,它 ...

  3. Javascript在页面加载时的执行顺序

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  4. Javascript在页面加载时的执行顺序(转载)

    原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...

  5. html js页面加载前执行,Javascript代码在页面加载时的执行顺序介绍

    一.在HTML中嵌入Javasript的方法 1.直接在Javascript代码放在标记对之间 2.由标记的src属性制定外部的js文件 3.放在事件处理程序中,比如: 点击我 4.作为URL的主体, ...

  6. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  7. addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...

    这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...

  8. javascript运行机制之执行顺序详解

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.那么JavaScript是怎么来进行解析的吗?它的执行顺序又 ...

  9. script 放置最佳位置以及 html 执行顺序

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 看到知乎上有很多讨论关于javascript位置的文章.所以特意留意了这方面的问题. 首先要了解到的 ...

  10. var和function谁先优先执行_浅谈JavaScript 的执行顺序

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地 ...

最新文章

  1. 程序员的工资VS普通人的工资...
  2. VS2010 VS2012 的快捷键
  3. power iso linux启动盘,Power ISO Maker/ISO燃烧到磁盘工具 V3.0版
  4. java 三级考试_java三级考试理论题
  5. boost::asio async_write也不能保证一次发完所有数据 二
  6. Java中集合list的add方法添加的不是值COPY而是地址
  7. vscode离线安装vsix插件命令
  8. ubuntu结束进程快捷键_ubuntu快捷键设置大全
  9. 多层陶瓷电容器用处_陶瓷电容器作用详解
  10. 【组合数学】多项式定理 ( 多项式系数 | 多重集全排列 | 对应放球子模型方案数 | 多项式系数相关恒等式 )
  11. [蓝牙 Mesh Zephyr]-[001]-Mesh beacon
  12. android脚本模拟器,android运行模拟器脚本(批处理)
  13. 淘宝网店装修教程模版素材链接
  14. 商务呈现之客户满意度
  15. 直播网站程序源码,搜索框实现快速搜索功能
  16. 7月11号百度测试实习生面试心得
  17. vue实现轮播图(跑马灯、无缝滚动、无限切换效果)
  18. 360㎡现代轻奢别墅,感受典雅与时代的融合。
  19. 2022G3锅炉水处理考试100题模拟考试平台操作
  20. android电源锁

热门文章

  1. asp 文本转时间_ASP.NET Core界面开发,DevExpress v19.2增强富文本编辑器功能
  2. kafka--Struct Streaming--hdfs案例
  3. 【Linux】scp IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
  4. 勒索软件Locky最新传播载体分析——中文版Office危在旦夕
  5. 关于x210开发板和主机、虚拟机ping通问题
  6. NGINX优化之路(一)
  7. MySQL集群之五大常见的MySQL高可用方案(转)
  8. Android:更好的自定义字体方案
  9. CentOS 5.X MySQL5.5.35 编译的bug
  10. VC++开发数字图像处理系统2