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

    第十九章 添加 JavaScript

    前言

    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中嵌入脚本。

  • 相关阅读:
    redis为什么快，消息队列，单线程
    vue 搜索后让搜索的关键字高亮
    《Python数据科学项目实战》：开启数据科学之旅的实战指南！
    dropwizard中上传和下载文件
    node.js如何解析get请求和post请求？以及对JSON.stringify与JSON.parse 的具体介绍？
    【Linux】 yum —— Linux 的软件包管理器
    数据结构：6、栈
    如何用 ESP-AT 进行多种场景下的 UDP 透传
    画家怎么创建自己的百度百科词条，有哪些前提
    [模拟][stl]账户安全预警 2021RoboCom决赛C
  • 原文地址：https://blog.csdn.net/kzpx_1106/article/details/126024619