Question

我是JavaScript环境的新手。我读过<script> </script>标记可以放在文档的<head> </head>或<body></body>标记中。但是，当我在<script>下放置<head></head>标记时，输出会有所不同。请查看代码： -

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</head>
<body>

<p>This example calls a function which perfoms a calculation, and returns the result:</p>

<p id="demo"></p>

</body>
</html>

输出： - 此示例调用执行计算的函数，并返回结果：

如果<script></script>放在<body></body>下，那么我会得到不同的输出。请找到代码和以下输出： -

<!DOCTYPE html>
<html>
<body>

<p>This example calls a function which perfoms a calculation, and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

输出： -


此示例调用一个执行计算的函数，然后返回     结果：

12

非常感谢任何帮助。

Answer 1

当以下代码行运行时，它会在DOM中搜索具有给定ID的元素：

document.getElementById("demo").innerHTML=myFunction(4,3);

当该代码在head中时，该元素将不存在，因此代码将失败。当代码位于body（之后相关元素）时，它显然确实存在且可以找到。

如果要将其保留在head中，可以在脚本中使用某些描述的DOM ready事件处理程序。但“最佳实践”表示将脚本放在body的底部。

在您的情况下，这是您将看到的效果，具体取决于脚本的位置：

<html>
    <head>
        <!-- Script here fails -->
    </head>
    <body>
        <!--- Script here fails --->
        <p>This example calls a function...</p>
        <!-- Script here fails -->
        <p id="demo"></p>
        <!-- Script here works! --->
    </body>
</html>

但请注意，您的函数声明可以放在任何地方，因为它在调用之前不会执行任何操作。调用是在元素存在于DOM之后必须运行的唯一部分。

Answer 2

当document.getElementById("demo").innerHTML=myFunction(4,3);被调用时，尚未加载Element演示，因为它在声明之上。

你可以让它正常运行，将onload - 身体中的<body onload="document.getElementById('demo').innerHTML=myFunction(4,3);"> - 事件包裹起来，就像那样：

head

而函数声明保留在{{1}}中。这样，一旦页面完全加载，就会调用该函数。这里不是最好的风格（因为长调用，可以包含在一个单独的函数中，使代码更具可读性），但我想你明白了。

Answer 3

记住3个简单逻辑用于调用Javascript，

1）调用<head> ... </head>标记中的javascript用于初始化/   将另一个库导入当前页面。

2）调用<body> ... </body>标记之间的javascript来操纵   DOM元素。因为代码在页面内容存在时执行   加载。

对于最佳实践，DOM事件在页面底部编码。

3）最好的解决方案是＆＃34;在其他时间内解读JAVASCRIPT代码无论如何都要归档并将其发送到您的HTML文件中。使用 <SCRIPT SRC="path" ></SCRIPT>代码。它会很精细。

放入<script> </script>时输出的差异？

3 个答案: