浅谈JavaScript在Html页面中的位置

最新推荐文章于 2023-01-04 13:38:37 发布

发烧的小龙虾

最新推荐文章于 2023-01-04 13:38:37 发布

阅读量381

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/shijie97/article/details/74084172

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天有一道超级简单的H5+JS的题想了一个上午还不没有结果，晚上看了一下同学的代码中午想明白了，同时也借鉴了一下网上的结论，现分享给大家。

我有疑问的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>Document</title>
    <script type="text/javascript">
    document.getElementById("code").innerHTML=Math.floor(Math.random()*9000)+1000;
    function aa(){
        document.getElementById("code").innerHTML=Math.floor(Math.random()*9000)+1000;
    }
    function bb(){
        if(document.getElementById("code").innerHTML!=f1.name.value){
            alert("Input again!");
            f1.name.focus();
        }
       else
	  f1.submit();
   }
    </script>
</head>
<body>
    <form method="post" action="Questionnaire.html" name="f1">
    请输入验证码 <input type="text" name="name">
    <span id="code" size="10"></span>
    <input type="button" value="change" οnclick="aa()">
    <input type="button" value="submit" οnclick="bb()">
</body>
</html>

我发现，不论怎么改，一开始打开Html页面的时候验证码就是死活不出来，后来通过一个网站和自己的思考想了下，原来是我的js放的位置太靠前了！

改正如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>Document</title>
</head>
<body>
    <form method="post" action="Questionnaire.html" name="f1">
    请输入验证码 <input type="text" name="name">
    <span id="code" size="10"></span>
    <input type="button" value="change" οnclick="aa()">
    <input type="button" value="submit" οnclick="bb()">
    <script type="text/javascript">
    document.getElementById("code").innerHTML=Math.floor(Math.random()*9000)+1000;
    function aa(){
        document.getElementById("code").innerHTML=Math.floor(Math.random()*9000)+1000;
    }
    function bb(){
        if(document.getElementById("code").innerHTML!=f1.name.value){
            alert("Input again!");
            f1.name.focus();
        }
       else
	  f1.submit();
   }
    </script>
</body>
</html>

网上有人说：html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。

我这里属于DOM编程，我把js放在body前面，导致此时dom都无法生成，当然就达不到初始化的目的，希望以后引以为戒！