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

第2章 HTML中的JavaScript

news 2025/7/25 20:43:55

引言

将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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/7/24 9:08:46

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/7/22 9:13:09

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/6/15 20:37:19

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/7/9 2:51:26

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/7 1:17:02

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/23 16:20:22

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/7/22 13:28:47

Java入门学习详细版（一）

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

编程新知 2025/7/10 17:02:29

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/7/25 18:25:18