怎么使用JavaScript代码？

最新推荐文章于 2024-04-08 19:14:22 发布

Learn-anything

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量626

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html import

本文链接：https://blog.csdn.net/fanlehai/article/details/122156467

版权

JavaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一、简介

HTML 文件使用 JavaScript 代码，有三种方式。

1、直接写入

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>加载 JavaScript 的方法</title>

    <script>

        // 法一：加载 JavaScript 代码
        document.addEventListener("DOMContentLoaded", function () {
            function createParagraph() {
                let para = document.createElement('p');
                para.textContent = '你点击了这个按钮！ from head <script>';
                document.body.appendChild(para);
            }

            const buttons = document.querySelectorAll('button');

            for (let i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', createParagraph);
            }
        });

    </script>
</head>

<body>
    <h1>加载 JavaScript 的方法</h1>
    <button>test</button>
</body>

</html>

2、标签

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>加载 JavaScript 的方法</title>
</head>

<body>
    <h1>加载 JavaScript 的方法</h1>
    <button>test</button>

    <!-- 法二：加载 JavaScript 代码 -->
    <script defer src="script1.js"></script>
</body>

</html>

// script1.js

function createParagraph() {
    let para = document.createElement('p');
    para.textContent = '你点击了这个按钮！';
    document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', createParagraph);
}

defer 和 async

当页面有多个 js 文件需要加载时，并不能确定其先后顺序，也就是异步加载(async)，当js 文件之间有相互依赖时，可以加上 defer 关键字，这样页面会按照代码先后顺序进行加载。

3、import

impot 是 ES6 的新语法，用于导入 js模块代码。详细内容，看这里！

二、参考文档

怎么使用JavaScript代码？

Learn-anything

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎么使用JavaScript代码？

一、简介HTML 文件使用 JavaScript 代码，有三种方式。1、直接写入<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>加载 JavaScript 的方法</title> <script> // 法一：加载 JavaScript 代码 document
复制链接

扫一扫

专栏目录