JavaScript高级程序设计第二章 --- 在HTML中使用JavaScript

最新推荐文章于 2024-07-09 18:13:44 发布

CherishLyf

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量530

点赞数

分类专栏： Javascript高级程序设计 --- 读书笔记文章标签： javascript html

本文链接：https://blog.csdn.net/CherishLyf/article/details/47667209

版权

Javascript高级程序设计 --- 读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在HTML中使用 JavaScript

在HTML中使用 JavaScript

`<script>`元素

使用<scritp>元素的方式有两种：

直接在页面中嵌入Javascritpt

<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

包含在外部Javascript

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

标签的位置

现代Web应用程序一般都把全部Javascript引用放到<body>元素中页面内容的后面
有利于加快用户打开浏览器窗口.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这里放内容 -->
    <script src="example.js"></script>
</body>

延迟脚本

defer属性：这个属性只适用于外部脚本文件，脚本会被延迟到整个页面都解析完毕后再运行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

嵌入代码与外部文件

一般尽可能的使用外部文件来包含Javascript代码，他有如下优点：

可维护性强：把所有JavaScript戴安放到一个文件夹，维护比较轻松
可缓存：如果有两个页面使用同一个文件，那么这个文件只需加载一次，最终加快页面加载速度
适应未来

`<noscript>`元素

<noscript>元素中的内容只有在下列情况下显示：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

比如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <noscript>
        <p>本页面需要浏览器支持JavaScript</p>
    </noscript>
</body>
</html>

小结

在包含外部文件时，必须将src属性设成相应文件的URL。
所有<script>元素会按照他们在页面上面的先后顺序被解析(不使用 defer和 async 的情况下）。

CherishLyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计第二章 --- 在HTML中使用JavaScript

在HTML中使用 JavaScriptscript元素标签的位置延迟脚本嵌入代码与外部文件noscript元素小结在HTML中使用 JavaScript<script>元素使用<scritp>元素的方式有两种：直接在页面中嵌入Javascritpt<script type="text/javascript"> function sayHi(){ alert("
复制链接

扫一扫