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机制,在文档加载完成,对部分内容进行了更改。

  • 相关阅读:
    Sprinig.net 双向绑定 Bidirectional data binding and data model management 和 UpdatePanel
    Memcached是什么
    Spring.net 网络示例 codeproject
    jquery.modalbox.show 插件
    UVA 639 Don't Get Rooked
    UVA 539 The Settlers of Catan
    UVA 301 Transportation
    UVA 331 Mapping the Swaps
    UVA 216 Getting in Line
    UVA 10344 23 out of 5
  • 原文地址:https://www.cnblogs.com/montai/p/13171777.html
Copyright © 2011-2022 走看看