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

第2章 HTML中的JavaScript

news 2026/2/9 23:53:10

引言

将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

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2026/1/31 4:37:40

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41