怎么运行原生js

运行原生JS的方法包括在HTML中嵌入、通过浏览器控制台、使用独立的JS文件、通过Node.js运行等，其中最常见和方便的方法是在HTML中嵌入和使用独立的JS文件。嵌入方法适合小型脚本，独立文件更适合大型项目。下面我们将详细介绍这些方法，并探讨如何在不同的环境中运行原生JS。

一、在HTML中嵌入JavaScript

1、在HTML文件的`<head>`或`<body>`标签中嵌入JS代码

嵌入JavaScript代码最直接的方法是在HTML文件的<head>或<body>标签中使用<script>标签。这种方法非常适合较小的脚本和简单的项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
    <script>
        // JavaScript code here
        console.log('Hello, World!');
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

2、在HTML文件的`<body>`标签底部嵌入JS代码

将JavaScript代码放在<body>标签的底部可以确保HTML内容在JavaScript代码执行之前完全加载。这是一个常见的最佳实践，尤其是在处理DOM操作时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <script>
        // JavaScript code here
        console.log('Hello, World!');
    </script>
</body>
</html>

二、使用独立的JavaScript文件

1、创建独立的JavaScript文件

对于大型项目和复杂的代码，将JavaScript代码放在独立的文件中更为合适。首先，创建一个.js文件，例如script.js：

// script.js
console.log('Hello, World!');

2、在HTML文件中引入JavaScript文件

在HTML文件中使用<script>标签引入JavaScript文件。这种方法不仅保持了代码的组织性，还提高了代码的可维护性和可读性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

三、通过浏览器控制台运行JavaScript

1、打开浏览器控制台

几乎所有现代浏览器都内置了开发者工具，可以通过快捷键或菜单打开。例如，在Google Chrome中，可以使用Ctrl+Shift+I或右键点击页面选择“检查”。

2、在控制台中输入并执行JavaScript代码

在控制台中输入JavaScript代码并按回车键执行。例如，输入console.log('Hello, World!');并按下回车键，控制台会输出“Hello, World!”。

四、使用Node.js运行JavaScript

1、安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时，可以在服务器端运行JavaScript代码。首先，需要从Node.js官方网站下载并安装Node.js。

2、创建JavaScript文件并运行

创建一个.js文件，例如app.js：

// app.js
console.log('Hello, World!');

然后在命令行中导航到文件所在的目录，运行以下命令：

node app.js

这将输出“Hello, World!”到命令行。

五、通过在线编译器运行JavaScript

1、使用JSFiddle、CodePen等在线工具

如果不想在本地环境中设置JavaScript，可以使用在线编译器和沙盒环境，例如JSFiddle、CodePen、JSBin等。这些工具提供了一个交互式的在线环境，可以立即编写和运行JavaScript代码。

2、示例代码

在JSFiddle中，可以创建一个新的Fiddle，输入以下代码并点击“Run”按钮：

// JSFiddle example
console.log('Hello, World!');

在线工具会立即显示输出结果，非常适合快速测试和原型开发。

六、总结

运行原生JavaScript有多种方法，选择哪一种方法取决于具体需求和环境。在HTML中嵌入、使用独立的JS文件、通过浏览器控制台、使用Node.js运行、通过在线编译器运行是最常见的方法。在HTML中嵌入和使用独立文件适合前端开发，Node.js适合服务器端运行，在线编译器非常适合快速测试和分享代码。掌握这些方法可以帮助开发者在不同的场景中灵活运行和调试JavaScript代码。