网页制作怎么添加js

网页制作添加JS的方法有：在HTML文件中内嵌JS代码、在HTML文件的头部或尾部引入外部JS文件、使用模块化的JS代码。推荐使用外部JS文件的方法，便于代码管理和复用。在下面将详细介绍如何在网页制作中添加JS代码。

一、在HTML文件中内嵌JS代码

内嵌JS代码是将JavaScript直接写在HTML文件的<script>标签中。这种方法适合在代码量较少的情况下使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌JS示例</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        document.querySelector('h1').innerText = 'Hello, JavaScript!';
    </script>
</body>
</html>

这种方法的优点是简单直接，适合快速测试和小规模项目，但不利于代码管理和复用。

二、在HTML文件中引入外部JS文件

引入外部JS文件是将JavaScript代码写在独立的.js文件中，然后在HTML文件中通过<script>标签引入。这种方法便于代码的管理和复用，推荐在中大型项目中使用。

1. 在头部引入外部JS文件

将外部JS文件放在<head>标签内。这种方法适用于需要在页面加载前执行的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部引入JS示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

2. 在尾部引入外部JS文件

将外部JS文件放在<body>标签的末尾。这种方法适用于需要在页面加载后执行的脚本，能提高页面的加载速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尾部引入JS示例</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

三、使用模块化的JS代码

模块化的JS代码可以将不同功能的代码分开写在不同的文件中，然后通过import和export语法进行引入和导出。这种方法适用于大型项目，便于代码的组织和管理。

1. 创建一个模块文件

创建一个独立的JS文件，并在其中定义要导出的功能。

// module.js
export function greet(name) {
    return `Hello, ${name}!`;
}

2. 在HTML文件中引入模块文件

在HTML文件中，通过<script type="module">标签引入模块文件，并使用import语法引入模块中的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化JS示例</title>
</head>
<body>
    <h1 id="greeting"></h1>
    <script type="module">
        import { greet } from './module.js';
        document.getElementById('greeting').innerText = greet('JavaScript');
    </script>
</body>
</html>

四、使用异步和延迟加载JS文件

在一些性能优化场景中，可以使用异步和延迟加载JS文件的方法。通过async和defer属性，可以控制脚本的加载和执行时机。

1. 使用`async`属性

async属性使脚本异步加载和执行，适用于不依赖其他脚本的独立功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步加载JS示例</title>
    <script async src="script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

2. 使用`defer`属性

defer属性使脚本延迟加载和执行，直到HTML文档完全解析完成，适用于依赖HTML结构的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延迟加载JS示例</title>
    <script defer src="script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

五、使用现代前端框架和工具

在现代前端开发中，使用框架和工具可以提高开发效率和代码质量。常见的前端框架有React、Vue和Angular，常见的构建工具有Webpack和Rollup。

1. 使用React框架

React是一个用于构建用户界面的JavaScript库。通过JSX语法，可以将HTML和JS代码混合编写。

// App.js
import React from 'react';
function App() {
    return (
        <h1>Hello, React!</h1>
    );
}
export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React示例</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>
</html>

2. 使用Vue框架

Vue是一个用于构建用户界面的渐进式JavaScript框架。通过模板语法，可以将HTML和JS代码分离编写。

<!-- App.vue -->
<template>
  <h1>Hello, Vue!</h1>
</template>
<script>
export default {
  name: 'App'
}
</script>

// main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
  render: h => h(App),
}).$mount('#app');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
</head>
<body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>
</html>

3. 使用Angular框架

Angular是一个用于构建单页面应用的JavaScript框架。通过组件化开发，可以将HTML和JS代码封装在组件中。

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<h1>Hello, Angular!</h1>',
})
export class AppComponent {}

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular示例</title>
</head>
<body>
    <app-root></app-root>
    <script src="main.js"></script>
</body>
</html>

通过上述方法，可以在网页制作中添加JS代码，并选择最合适的方式来管理和优化代码。推荐使用外部JS文件的方法，便于代码管理和复用，同时在大型项目中可以考虑使用模块化的JS代码和现代前端框架。