`
ralphr
  • 浏览: 143006 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML文件的执行顺序(和javascript混合时)

    博客分类:
  • web
阅读更多

HTML在浏览器端是解释执行的,这在另一方面告诉我们代码是顺序的读取下来的.

我在IE,FireFox分别做过实验:

实验1.(保存为test1.html)

实验的HTML主要代码块是:

<body onload="fun1">

<form action="test1.html" method="get" onsubmit="fun3()">

<input type="text" name="text1" value="text" />

<script type="text/javascript">

window.alert("body中的一个窗口");

function fun1()

{

window.alert("载入中调用的窗口");

}

function fun2()

{

window.alert("普通按钮弹出的窗口");

}

function fun3()

{

window.alert("提交表单时弹出的窗口");

}

</script>

<input type="button" name="btn" value="button1" onclick="fun2()" />

<input type="submit" name="submit" value="submit1" />

</form>

</body>

测试结果是:1 显示输入文本框

                  2 显示弹出窗口 "body中的一个窗口"

                  3 确定弹出窗口后显示另外两个按钮

                  4 调用onload事件显示弹出窗口 "载入中调用的窗口"

                  到这里页面显示完毕.

                  当我们单击"btn"时,弹出窗口 "普通按钮弹出的窗口"

                  当我们单击"submit"时:

                  5 弹出窗口 "提交表单时弹出的窗口"

                  6 重新载入页面,重复1-4步

实验2 保存为test2.html

主要代码

<body>

<a href="test1.html">Link1</a>

<a href="test1.html">Link2</a>

<a href="test1.html">Link3</a>

<script type="text/javascript">

document.write("链接数量: "+ document.all.links.length+"<br/>");

</script>

<a href="test1.html">Link4</a>

<a href="test1.html">Link5</a>

<a href="test1.html">Link6</a>

<script type="text/javascript">

document.write("链接数量: "+ document.all.links.length+"<br/>");

</script>

</body>

实验结果是:

3

6

总结:HTML文件的执行顺序:1.顺序的(包括javascript脚本)

                                      2.onload事件的触发在页面载入完之后

分享到:
评论

相关推荐

    HTML引用JavaScript

    这种方式简单直观,但不推荐用于大型项目,因为它使得HTML和JavaScript混合在一起,不利于代码的组织和维护。例如: ```html function greet() { alert('Hello, World!'); } ``` 在这个例子中,`greet()`...

    HTML5应用开发技术-JavaScript入门.pptx

    这种引入方式方便快捷,但缺点是使得HTML与JavaScript混合,不利于代码的管理和维护,同时也可能增大HTML文件的体积,影响加载速度。 外链式是将JavaScript代码保存在独立的`.js`文件中,然后通过`&lt;script&gt;`标签的`...

    前端高频面试题终结篇 vue面试题

    16. 同步和异步的理解:同步是指程序的执行顺序,异步是指程序的执行顺序不确定。 17. HTTP 状态码:HTTP 状态码是指服务器响应请求的状态码,常见的状态码有 200、404、500 等。 18. 前后端分离:前后端分离是指...

    jvascript 事件 帮助文档

    然而,这种方法不推荐,因为它混合了HTML和JavaScript,不利于代码的组织和维护。更推荐的是使用事件监听器,这可以通过JavaScript代码实现,如`document.getElementById('myButton').addEventListener('click', ...

    jsp js 轮播图多行滚动

    1. **JSP基础**:JSP是Java的一种动态网页技术,它允许开发者将HTML、CSS、JavaScript代码与Java代码混合编写,服务器端执行Java代码,生成HTML响应给客户端。 2. **JavaScript**:JavaScript是一种客户端脚本语言...

    WebGL插件unity.zip

    这通常包括.js文件(包含编译后的代码和Unity引擎的运行时库)、.html文件(用以加载和展示内容)以及.css文件(用于样式控制)。Unitypackage文件则是一个包含了Unity项目的资源、预设、脚本和其他可重用组件的打包...

    TweenMax.js+GSAP实现多彩的油漆流动画效果源码.zip

    9. **源码分析**:解压后的“132689959912103574”文件可能包含了HTML、JavaScript、CSS和其他资源文件,供开发者研究和学习油漆流动动画的实现细节。`使用须知.txt`可能会提供关于如何运行和修改源代码的指导。 综...

    gulp打包项目案例代码

    例如,项目中可能有一个任务用于编译Sass,另一个用于合并JavaScript文件,还有可能包含压缩图片和HTML等任务。Gulp的工作流程是:开发者在项目根目录下创建一个`gulpfile.js`,在这个文件中定义任务,并通过npm安装...

    js的一些特效制作

    11. **时间轴和序列动画**:通过规划和控制一系列动画的执行顺序,可以创建复杂的交互故事或展示。 12. **拖放功能**:使用HTML5的拖放API,可以实现用户友好的拖放操作,如文件上传、模块布局调整等。 13. **音频...

    JavaScrip笔试题.doc

    8. **src属性**:在HTML中,`src`属性用于链接外部JavaScript文件到HTML文档。 9. **表达式计算**:在JavaScript中,`v1.value+v2.value`会计算两个文本框的值,但不会直接执行数学运算,所以不会得到预期的数学...

    2021-2022计算机二级等级考试试题及答案No.931.docx

    20. 浏览器执行的语言:HTML不是被浏览器直接执行的,浏览器主要执行JavaScript和VBScript(在IE中)。 21. 计算机病毒:计算机病毒能够自我复制并传播。 22. 输入设备:输入设备如键盘、鼠标等用于将外部信息输入...

    初学JS部分笔记总结js笔记.docx

    多个`&lt;script&gt;`标签会按照它们在HTML文件中的顺序依次执行。 2. **JS的组成**:JS主要由三部分构成:DOM(Document Object Model,文档对象模型),用于操作HTML或XML文档;BOM(Browser Object Model,浏览器对象...

    tt.rar_依次显示

    6. **颜色操作**:颜色变化可能涉及RGB、HSL等颜色模型,以及颜色的混合和渐变。编程语言通常提供了处理颜色的API,如JavaScript的`Color`对象。 7. **事件驱动编程**:当一个动画完成或用户交互时,可能需要触发下...

    Flash特效制作

    9. **替代技术**:随着HTML5、CSS3和JavaScript的发展,现代Web开发更多地采用这些技术来实现交互式内容,因为它们具有更好的跨平台支持和性能。然而,了解Flash特效制作仍然有助于理解交互设计的历史和技术演进。 ...

    5月最新大厂前端高频核心面试题.pdf

    8. 标签的defer和async属性都可以让脚本异步加载,但async是完全异步加载并在加载完毕后立即执行,而defer则是等整个文档解析完毕后按照在文档中出现的顺序执行。 9. data-属性用于存储页面的自定义数据,可以用于...

    JS:[removed]的使用介绍

    通过使用这些技术,开发者可以确保页面加载顺序与脚本执行顺序一致,为用户提供更加流畅和无误的网页体验。在实际应用中,应根据具体情况选择合适的调用方式,对于较为复杂的页面,推荐使用自定义函数队列的方式来...

    从实验出发的移动端性能优化

    可以采用代码分割(code splitting)、按需加载(on-demand loading)、优化脚本执行顺序等方式来提升性能。 - 网络延迟和稳定性:为了应对网络延迟和稳定性带来的影响,可以优化请求合并、使用CDN、进行合理的资源...

    一些前端面试题.pdf

    ES6引入了许多新特性,极大地改善了JavaScript语言的功能性和可读性。包括但不限于: - **箭头函数** (`=&gt;`):提供了一种更简洁的函数表达式语法。 - **模板字符串** (```\`${}```):提供了一种更方便的方式来构造...

    简单新闻发布系统

    JSP是Java平台上的一个服务器端技术,它允许开发者将HTML代码和Java代码混合编写,以创建动态网页。JSP文件在服务器上执行,生成HTML响应并发送到客户端浏览器。在本系统中,JSP用于处理用户请求、控制页面流程和...

Global site tag (gtag.js) - Google Analytics