当前位置： 首页 > news >正文

第2章 HTML中的JavaScript

news 2026/2/10 0:09:14

引言

将JavaScript引入网页，首先要解决它与网页的主导语言HTML的关系问题

script元素

将JavaScript插入HTML的主要方法是使用script元素，script有8个可选属性

  • async：表示异步加载js文件内容，他们之间的顺序不一定按照html顺序
  • charset：指定js文件字符集
  • crossorigin：默认为anonymous配置文件请求不必设置凭据标志。use-credentials设置凭据标志
  • defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效
  • integrity：你可以确保所引用的外部资源在下载和使用时没有被篡改。异常会报错
  • src：加载外部资源的路径
  • type：默认为text/javascript，表示代码块中脚本语言的内容类型

使用方式一

直接写在script标签内部，js代码会从下自下以此执行。js代码被计算完毕之前其他元素不会执行也不会显示

<script>function sayHi() {console.log("Hi! ");}
</script>

在使用script标签内嵌js代码的使用js代码中不能使用</ script>字符串

<script>function sayScript() {console.log("</script>");		// errorconsole.log("<\/script>");		// 使用转移字符可以正常运行}
</script>

使用方式二

要包含外部文件中的JavaScript，就必须使用src属性。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。

注意使用了外部资源就不能再在script标签中内嵌js

<script src="example.js"></script>

scr除了可以是本地的文件外，还可以是url。浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源

在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。

<script src="http://www.somewhere.com/afile.js"></script>

不管包含的是什么代码，浏览器都会按照script在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。

标签位置

早期script元素都是写在head元素中，但这会造成页面延迟加载

<html><head>...<script src="http://www.somewhere.com/afile.js"></script></head>
</html>

最好的做法是写在body元素最后，这样就不会因为先加载js造成的延迟

<html><body>...<script src="http://www.somewhere.com/afile.js"></script>
</body>
</html>

推迟执行脚本

写在head上是最好加上defer属性，推迟js加载顺序。等待html加载完毕后会加载
defer属性只能用于外部的js，并且如果多个script添加defer会自上而下的js加载顺序

<html><head>...<script  defer src="http://www.somewhere.com/afile.js"></script></head>
</html>

异步执行脚本

和defer用法类似，最大的区别是async是那个js先加载完毕会优先加载那个js。

<html><head>...<script  async  src="http://www.somewhere.com/afile.js"></script></head>
</html>

动态加载脚本

在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求

 let script = document.createElement('script');script.src = 'gibberish.js';document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级
要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

<link rel="preload" href="gibberish.js">

行内代码与外部文件

推荐使用外部文件引入js，原因如下

  • 更好的可维护性
  • 缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，多个页面只用下载一次
  • 适应未来

多个js文件引入最好统一放到一个单独的js引入

<scriptsrc="mainB.js"></script>
<scriptsrc="component3.js"></script>
<scriptsrc="component4.js"></script>
<scriptsrc="component5.js"></script>
...

文档模式

文档模式有三种：混杂模式，标准模式，准标准模式
三种模式的区别主要体现在css的使用结果上

标准模式声明

<! -- HTML 4.01 Strict -->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<! -- XHTML 1.0 Strict -->
<! DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<! -- HTML5-->
<! DOCTYPE html>

非标准模式声明

<! -- HTML 4.01 Transitional -->
<! DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<! -- HTML 4.01 Frameset -->
<! DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<! -- XHTML 1.0 Transitional -->
<! DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<! -- XHTML 1.0 Frameset -->
<! DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

noscript元素

主要为了解决游览器不支持/禁用script而出现，被用于给不支持JavaScript的浏览器提供替代内容

当游览器不支持或者禁用script，noscript会被加载可以放在任意位置

<! DOCTYPE html>
<html><head><title>Example HTML Page</title><script defer="defer" src="example1.js"></script><script defer="defer" src="example2.js"></script></head><body><noscript>// 游览器将会展现这句话<p>This page requires a JavaScript-enabled browser.</p></noscript></body>
</html>

相关文章：

第2章 HTML中的JavaScript

引言 将JavaScript引入网页&#xff0c;首先要解决它与网页的主导语言HTML的关系问题 script元素 将JavaScript插入HTML的主要方法是使用script元素&#xff0c;script有8个可选属性 async&#xff1a;表示异步加载js文件内容&#xff0c;他们之间的顺序不一定按照html顺序ch…...

编程日记 2023/8/5 21:39:05

景联文科技高质量成品数据集上新啦！

景联文科技近期上新多个成品数据集&#xff0c;包含图像、视频等多种类型的数据&#xff0c;涵盖丰富的场景&#xff0c;可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型&#xff0c;使得模型能够更加全面和精准地理解和处理任务&#xff0c;更好地应对复…...

编程日记 2023/8/5 21:38:04

flask------请求拓展

flask中也有类似与django中的中间件&#xff0c;只不过是另一种写法&#xff0c;但是他们的作用是一样的&#xff0c;下面我们就一一介绍&#xff1a; 1.before_request 作用 : before_request 相当于 django 中的 process_request&#xff0c;每一个请求在被处理前都会经…...

编程日记 2023/8/5 21:37:03

大数据-玩转数据-FLINK-从kafka消费数据

一、基于前面kafka部署 大数据-玩转数据-Kafka安装 二、FLINK中编写代码 package com.lyh.flink04;import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apa…...

编程日记 2023/8/5 21:35:58

介绍Sping Boot的5个扩展点

1、初始化器ApplicationContextInitializer 我们在启动Spring Boot项目的时候&#xff0c;是执行这样一个方法来启动的 我们一层一层往下点&#xff0c;最终发现执行的是这个方法 所以我们在启动项目的时候也可以这样启动 new SpringApplication(SpringbootExtensionPointAp…...

编程日记 2023/8/5 21:34:58

Linux2.6内核配置说明

maturity level options代码成熟度选项 Prompt for development and/or incomplete code/drivers 显示尚在开发中或尚未完成的代码与驱动.除非你是测试人员或者开发者,否则请勿选择 setup常规设置 Local version - append to kernel release 在内核版本后面加上自定义的…...

编程日记 2023/8/5 21:33:57

Pytest简介及jenkins集成

一、pytest介绍 pytest介绍 - unittest\nose pytest&#xff1a;基于unittest之上的单元测试框架 自动发现测试模块和测试方法 断言使用assert表达式即可 可以设置测试会话级、模块级、类级、函数级的fixtures 数据准备 清理工作 unittest&#xff1a;setUp、teardown、…...

编程日记 2023/8/5 21:32:55

【LeetCode】105. 从前序与中序遍历序列构造二叉树 106. 从中序与后序遍历序列构造二叉树

105. 从前序与中序遍历序列构造二叉树 这道题也是经典的数据结构题了&#xff0c;有时候面试题也会遇到&#xff0c;已知前序与中序的遍历序列&#xff0c;由前序遍历我们可以知道第一个元素就是根节点&#xff0c;而中序遍历的特点就是根节点的左边全部为左子树&#xff0c;右…...

编程日记 2023/8/5 21:31:54

堆内存和一些检测工具

17 堆定义 通过new关键字创建&#xff0c;创建对象都会使用堆内存。 是线程共享的&#xff0c;需要考虑线程安全问题。 有垃圾回收机制。18 堆-内存溢出 当默认情况下&#xff0c;发现执行到26&#xff0c;出现内存溢出。 当我们将堆内存调为8m&#xff0c;继续执行&#xff…...

编程日记 2023/8/5 21:30:53

【JavaScript】元素获取指南

简介 在 JavaScript 中，我们经常需要通过获取元素来进行 DOM 操作和交互。本教程将介绍多种获取元素的方式，包括根据 ID、标签名、类名、选择器、属性和名称等。 通过ID获取元素 使用getElementById方法根据元素的ID属性获取单个元素。 var element = document.getElementB…...

编程日记 2023/8/5 21:29:52

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …...

编程日记 2023/8/5 21:28:51

Java阶段五Day21

Java阶段五Day21 文章目录 Java阶段五Day21问题解析rocketmq清空数据 linux学习背景什么是linux系统虚拟机介绍启动 虚拟机linux虚拟机网络的问题 linux系统的基础命令命令提示符命令格式pwd指令ls指令cd指令mkdirtouch指令cp指令rm指令mv指令cat指令tail指令 文本编辑器vim操作…...

编程日记 2023/8/5 21:27:50

2023，谁在引领实时互动进入高清时代？

实践是检验真理的唯一标准&#xff0c;技术是行业进步的核心动能。在实时互动的新时代里&#xff0c;不断进化的声网已然完成自证。 作者|斗斗 出品|产业家 “一个医疗行业的客户&#xff0c;曾向我们提出一个需求&#xff0c;希望在120急救场景下&#xff0c;可以远程看清…...

编程日记 2023/8/5 21:26:45

STM32(HAL)串口中断接收

目录 1、简介 2 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 串口外设配置 2.3 项目生成 3、KEIL端程序整合 1、简介 本文对HAL串口中断函数进行介绍。 2 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 串口外设配置 2.3 项目生成 3、KEIL端程序整合 首先在main.c文件中进行…...

编程日记 2023/8/5 21:25:44

word转pdf怎么转？几种常用方法分享

word转pdf怎么转&#xff1f;在日常工作和学习中&#xff0c;将Word文档转换为PDF格式是一项必要的任务。不仅可以保证文档的格式不变&#xff0c;还可以防止文档被他人篡改。但是&#xff0c;Word文档并不是所有人都能够轻松打开和编辑的&#xff0c;而PDF文件则可以在各种设备…...

编程日记 2023/8/5 21:24:42

自学（黑客）技术，入门到入狱！

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟入…...

编程日记 2023/8/5 21:23:38

js 函数、闭包及函数对象

js的函数是对象&#xff0c;可以通过程序来操控。比如&#xff0c;可以把函数赋值给变量&#xff0c;然后再传递给其他函数&#xff0c;也可以在函数上设置属性&#xff0c;甚至调用函数的方法。 js函数可以嵌套定义在其他函数里&#xff0c;内嵌函数可以访问定义在函数作用域…...

编程日记 2023/8/5 21:22:37

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]

文章目录 SSM--搭建Vue 前端工程--项目基础界面实现功能02-创建项目基础界面需求分析效果图思路分析 代码实现项目前后端分离情况项目前后端分离情况如图 注意事项和细节 SSM–搭建Vue 前端工程–项目基础界面 实现功能02-创建项目基础界面 需求分析 效果图 思路分析 使用V…...

编程日记 2023/8/5 21:21:36

Android 之 AudioManager ( 音频管理器 )

本节引言&#xff1a; 在多媒体的第一节&#xff0c;我们用SoundPool写了个Duang的示例&#xff0c;小猪点击一个按钮后&#xff0c;突然发出"Duang"的 一声&#xff0c;而且当时的声音很大&#xff0c;吓死宝宝了 &#xff0c;好在不是上班时间&#xff0c;上班时间…...

编程日记 2023/8/5 21:20:34

2023爱分析·超自动化厂商全景报告｜爱分析报告

关键发现 当前的超自动化定义主要从技术组合角度阐述超自动化内涵&#xff0c;较难和业务价值建立链接。爱分析对超自动化作如下新定义&#xff1a;超自动化指利用RPA、iPaaS、AI、低代码、BPM、流程挖掘等自动化技术&#xff0c;实现组织端到端流程自动化以及新业务流程快速编…...

编程日记 2023/8/5 21:19:33

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/9 3:25:41

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/2/4 17:50:55

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17