0

我是 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

非常感谢任何帮助。

4

3 回答 3

3

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

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

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

如果要将其保留在head. 但是“最佳实践”说将脚本放在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 后唯一必须运行的部分。

于 2013-01-28T10:36:29.930 回答
1

调用元素演示时尚未加载，document.getElementById("demo").innerHTML=myFunction(4,3);因为它位于其声明之上。

您可以使其正常运行，将 tha 调用包装onload在主体中的 -event 中，如下所示：

<body onload="document.getElementById('demo').innerHTML=myFunction(4,3);">

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

于 2013-01-28T10:40:31.327 回答
1

只要记住 3 个简单的逻辑调用 Javascript，

1) 在标签中调用 javascript<head> ... </head>用于初始化/将另一个库导入到当前页面。

2）标签之间调用javascript<body> ... </body>是为了操作DOM元素。因为代码在页面内容被加载时执行。

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

3) 最好的解决方案是“在其他 .JS 文件中声明 JAVASCRIPT 代码并在任何地方将它们调用到您的 HTML 文件中。使用 <SCRIPT SRC="path" ></SCRIPT>代码。它可以正常工作。

于 2013-01-28T10:48:23.497 回答