您现在的位置是:首页 > Javascript
当前栏目
怎么使用JavaScript代码?
2023-04-18 16:13:52 时间
一、简介
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模块代码。详细内容,看这里!
二、参考文档
相关文章
- Nginx常用屏蔽规则 - 让网站更安全
- 解决在bootstrap模态框modal里使用clipboard.js时复制失效
- 给网站添加 Chatra 在线客服插件
- 使用html和css3给网站添加上春节灯笼挂件代码
- HTTrack - 克隆任意网站
- 开往下一个世界 — 友链接力
- gitlab配置域名并https访问
- Python Django个人网站搭建18-添加网站留言功能
- Python Django个人网站搭建19-网站整体优化
- 学习笔记 | 什么是Node.js
- JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop?
- SAP 电商云 UI 如何知道当前的 breakpoint 是 xl - extremely large?
- Node.js 环境下的 console.log 是同步执行的
- SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理
- 关于 Angular 项目类型为 library 的工程使用 tsconfig.json 的问题
- SAP 产品 UI 里的容器组件的概念和开发概述
- 不使用任何框架,手写纯 JavaScript 实现上传本地文件到 ABAP 服务器
- Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
- SAP 电商云 Spartacus UI 4.1 版本的延迟加载技术介绍
- 各种 SAP 产品的自定义 UI 创建和集成方法一览