在页面上显示js代码

在网页上显示JavaScript代码，通常有两种主要方法：使用<script>标签和使用<pre>或在网页上显示JavaScript代码，通常有两种主要方法：使用<script>标签和使用<pre>或<code>`标签结合HTML实体。

基础概念

<script>标签：用于在HTML文档中嵌入JavaScript代码。
<pre>标签：用于显示预格式化的文本，保留文本中的空格和换行。
<code>标签：用于表示计算机代码片段。

类型与应用场景

动态执行：使用<script>标签，适用于需要实时交互和动态效果的页面。
静态展示：使用<pre>和<code>标签，适用于教程、文档等需要清晰展示代码的场景。

示例代码

使用`<script>`标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script Tag Example</title>
</head>
<body>
    <h1>Using Script Tag</h1>
    <script>
        console.log("Hello, World!");
    </script>
</body>
</html>

使用`<pre>`和`<code>`标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pre and Code Tag Example</title>
    <style>
        pre {
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Using Pre and Code Tag</h1>
    <pre><code>
function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("World");
    </code></pre>
</body>
</html>

遇到的问题及解决方法

问题1：代码显示不正确（乱码）

原因：可能是字符编码问题，或者使用了特殊字符而没有正确转义。

解决方法：

确保HTML文件的编码为UTF-8。
使用HTML实体转义特殊字符，例如<应写为<，>应写为>。

问题2：JavaScript代码未执行

原因：可能是代码中有语法错误，或者<script>标签的位置不正确。

解决方法：

使用浏览器的开发者工具检查控制台中的错误信息。
确保<script>标签放在正确的位置，通常建议放在<body>标签的底部。

示例代码修正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script Tag Example</title>
</head>
<body>
    <h1>Using Script Tag</h1>
    <script>
        console.log("Hello, World!");
    </script>
</body>
</html>

通过以上方法，可以有效解决在页面上显示JavaScript代码时遇到的常见问题。