zoukankan      html  css  js  c++  java
  • JavaScript的加载顺序

    在HTML中,JavaScript可以写到程序的任何地方:<HTML>标签前, <BODY>标签前,<BODY>标签里面, <BODY>标签后, <HTML> 标签后.

    下面,我们通过一个HTML中嵌套Javascript的小程序,来演示一下代码执行过程

    1. 程序代码

    2. 执行结果

    <!DOCTYPE html>
    <script>
    alert("script-before Html");
    document.write("<br>"+"script-before Html"+"<br>");
    document.write("<h2 id ='pp1'> This is an example about HTML load process procedure </h2><h2 id = 'pp2'> This is an example about HTML load process procedure </h2><h2 id = 'pp3'> This is an example about HTML load process procedure </h2>");
    </script>
    <html lang="en">
    <title> Test </title>
    <head>
    <script>
    alert("script-head");
    document.write("script-head"+"<br>");
    </script>
    </head>
    <body onload="alert('html-tag');">
    <script>
    alert("script-body-begin");
    document.write("script-body begin"+"<br>");
    </script>

    <h1> This is a HTML file Process Progress test file </h1>

    <script>
    alert("script-body-end");
    document.write("script-body end"+"<br>");
    </script>

    </body>

    <script>
    alert("script-body-outer");
    document.write("script-body-outer"+"<br>");
    document.getElementById("pp2").innerHTML = "modified by script-body-outer";
    </script>
    </html>

    <script>
    alert("script-html-outer"+"<br>");
    document.write("script-html-outer"+"<br>");
    document.getElementById("pp3").innerHTML = "modified by script-htlm-outer";
    </script>

    2. 执行结果

    下图是执行完<Body>的输出

     

    下面是执行完最终的输出:

     

     3 代码解释

    1. 这个程序文件是顺序执行的,先执行<HTML>标签前==》<head>...</head> ==》<body>...</body> ==》<ody>后==><html>后

    2. 在<HTML执行之前,调用JavaScript 创建了3个段落:

    <h2 id ='pp1'> This is an example about HTML load process procedure </h2>
    <h2 id = 'pp2'> This is an example about HTML load process procedure </h2>
    <h2 id = 'pp3'> This is an example about HTML load process procedure </h2>");

    3. 在<Body>和<html> 执行后,修改<h2>标签id为"pp2"和"pp3"的内容
    </body>

    <script>
    alert("script-body-outer");
    document.write("script-body-outer"+"<br>");
    document.getElementById("pp2").innerHTML = "modified by script-body-outer";
    </script>
    </html>
    <script>
    alert("script-html-outer"+"<br>");
    document.write("script-html-outer"+"<br>");
    document.getElementById("pp3").innerHTML = "modified by script-htlm-outer";
    </script>

    4. 在<Html>标签后的Java语句,类似使用了Ajax机制,在文档加载完成,对部分内容进行了更改。

  • 相关阅读:
    SQLSERVER调用DLL程序
    RAISERROR语句
    SQLSERVER表联结(INNER JOIN,LEFT JOIN,RIGHT JOIN,FULL JOIN,CROSS JOIN,CROSS APPLY,OUTER APPLY)
    SQL Server在存储过程中编写事务处理代码的三种方法
    找出表中缺失的连续数据(如:2,4,7,9;需要找出:1,3,5,6,8的数据)
    sqlserver用于统计表索引情况
    你需要了解的HTTP协议
    自己实现一个类似 jQuery 的函数库
    JS 函数 学习笔记
    JS 数组 学习笔记
  • 原文地址:https://www.cnblogs.com/montai/p/13171777.html
Copyright © 2011-2022 走看看