HTML5与CSS3学习笔记【第十九章添加 JavaScript】

第十九章添加 JavaScript

前言
19.1加载外部脚本
19.2添加嵌入脚本

前言

HTML 定义网页的内容，CSS 定义网页的表现，JavaScript 则定义特殊的行为。建立网站不可能脱离 HTML（如果要让网站看起来很吸引人，则离不开 CSS），但 JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由 HTML 和 CSS 构建的核心体验的基础上进行增强。

通过编写简单的 JavaScript 程序，可以显示和隐藏内容；通过编写复杂一些的程序，可以加载数据并动态地更新页面。可以操作定制的 HTML5 audio 和 video 元素控件，使用HTML5 的canvas 元素创建游戏。可以利用地理定位，根据访问者所在的位置定制其体验；可以让访问者通过将文件拖放到浏览器窗口进行上传。可以利用JavaScript和一些强大的HTML5特性及相关技术构建成熟的Web应用程序。

在这里插入图片描述

19.1加载外部脚本

脚本主要有两种类型，一种是从外部文件（使用纯文本格式）加载的脚本，另一种是嵌入在页面中的脚本（这一种将在下一节讲解）。这同外部样式表和嵌入样式表的概念是类似的。

无论是加载外部脚本还是嵌入脚本，均使用 script（脚本）元素。
加载外部脚本的方法
输入，这里的script.js 是外部脚本在服务器上的位
置及文件名。应该尽可能地将脚本元素放在结束标签之前，而不是放在文档的 head 元素里。

DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Loading an External Scripttitle>
 <link rel="stylesheet" 
➝ href="css/global.css" />
head>
<body>
... 所有的HTML内容写在这里 ...
<script src="behavior.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

script 元素的 src 属性引用脚本的URL。在大多数情况下，最好在页面的最末尾加载脚本，即结束标签的前面。也可以在页面的 head 元素中加载脚本，但这样做会影响页面显示的速率。

DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Loading an External Scripttitle>
 
 <link rel="stylesheet" href="css/
➝ global.css" />
<script src="behavior.js">script>
head>
<body>
... 所有的HTML内容写在这里 ...
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个例子中，脚本是在head中加载的。它位于 link 元素的后面，因此不会影响 CSS 文件先于脚本开始加载。关于为什么要尽可能地避免在head 中加载脚本。

19.2添加嵌入脚本

嵌入脚本位于 HTML 文档之内，同嵌入样式表很相似。嵌入的脚本包含在 script 元素内。嵌入脚本并不是首选的方法，但有时必须这样做。

DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Adding an Embedded Scripttitle>
 <link rel="stylesheet" 
➝ href="css/global.css" />
head>
<body>
... 所有HTML内容写在这里 ...
<script>
/*
JavaScript 代码写在这里
*/
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

嵌入脚本没有 src 属性。相反，代码位于页面之内。如果要嵌入脚本，应该尽可能地在结束标签之前这样做。虽然也可以在head中嵌入脚本，但通常出于性能原因而避免这样做

添加嵌入脚本的步骤
(1) 在 HTML 文档中，输入。

DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Loading an External Scripttitle>
 
 <link rel="stylesheet" 
➝ href="global.css" />
<script>
/*
JavaScript代码写在这里
*/
script>
head>
<body>
... 所有的HTML内容写在这里 ...
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个例子中，嵌入脚本位于 head 中。它位于 link 元素的后面，从而让 CSS 文件更快地加载。关于为什么要尽可能地避免在 head中嵌入脚本。

相关阅读:
jquery datatable固定列
一文读懂spring.factories作用
几种预训练模型微调方法和peft包的使用介绍
微信小程序slot插槽的介绍，以及如何通过uniapp使用动态插槽
Jackson公司蛋白质裂解和溶解、裂解缓冲液研究
数据结构和算法：数组和链表
Flink CDC (Mysql为例)
【图像处理】001 Android 中 Bitmap 压缩的几种方法浅析
“AI在未来”公益计划，亚马逊云科技将教育资源带到更多中西部学校
使用spring gateway配置网关服务实现简单的路由转发

原文地址：https://blog.csdn.net/kzpx_1106/article/details/126024619

HTML5与CSS3学习笔记【第十九章添加 JavaScript】

第十九章 添加 JavaScript

前言

19.1加载外部脚本

19.2添加嵌入脚本

第十九章添加 JavaScript