怎么使用JavaScript代码?

怎么使用JavaScript代码?一 简介 HTML 文件使用 JavaScript 代码 有三种方式 1 直接写入 DOCTYPE tml htmllang zh CN head metacharset utf 8 title 加载 JavaScript 的方法 title script 法一 加载 JavaScript 代码 document script metacharset utf 8 head htmllang zh CN

一、简介

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 ; 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>  
           <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代码?
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/220258.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午8:53
下一篇 2026年3月17日 下午8:53


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号