javascript高级程序设计读书笔记（一)

最新推荐文章于 2024-07-20 23:54:17 发布

隽晓风

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量154

点赞数

分类专栏： javascript 文章标签： javascript html 读书笔记

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在HTML中使用Javascript

1、 `<script>`元素

使用javascript，只需要在HTML中引入

1.1 使用方式

使用方式有两种，一种是在页面中嵌入Jascript代码，一种是包含外部Javascript文件，代码如下：
内部引用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<!--直接使用-->
<script type="text/javascript">
    function printMsg(){
        alert("这是外部引用");
    }
</script>
</html>

外部引用 (文件 sourceOuter.html sourceOuter.js)
sourceOuter.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<!--这是外部引用-->
<script type="text/javascript" src="sourceOuter.js">

</script>
</html>

sourceOuter.js

function printMsg(){
  alert("这是外部引用");
}

1.2 `<script>`元素的属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<script async="" charset="UTF-8"  defer="defer" language="" src="" type="">
   //1 async属性 可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作。只对外部脚本有效
   //2 charset属性 可选。指定字符集，一般都为UTF-8
   //3 defer 可选 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效
   //4 language 已废弃
   //5 src 可选。 表示要引用的外部地址路径
   //6 type 可选 表示编写代码使用的脚本语言的内容类型，通常为text/javascript
</script>
</html>

注意：五菱如何包含代码，只要不存在defer和async顺序ing，浏览器都会安装<script> 元素在页面中出现的顺序进行解析

标签的位置

第一种，放在页面中的<head> 元素中，
在文档的<head> 元素中包含所有的Javascript文件，意味着必须等到全部JavaScript代码都被下载、解析、执行完成之后，才能开始呈现页面的内容。这个无疑会导致页面呈现效果的延迟
代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="example01.js"></script>
    <script type="text/javascript" src="example02.js"></script>
</head>
<body>
<!--这里是内容区域-->
</body>
</html>

第二种，放在<body> 元素中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--这里是内容区域-->
<script type="text/javascript" src="example01.js"></script>
<script type="text/javascript" src="example02.js"></script>
</body>
</html>

1.4 延迟脚本

在script元素的里面添加属性defer=”defer”,这个属性的用途是表名脚本在执行是不会影响的页面的构造，示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--defer.js 使用了defer属性，这个脚本不会影响页面的构造，脚背会被延迟到整个页面都解析完毕后再执行 -->
    <script type="text/javascript" defer="defer" src="defer.js"></script>
    <script type="text/javascript" src="outer.js"></script>
</head>
<body>

</body>

</html>

1.5 异步脚本

<script> 元素定义了async属性，此属性只因用于外部脚本文件，并告诉浏览器立即下载文件，但是标记为async的脚本并不保证安装指定他们的先后顺序执行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--两个文件执行不能确保先后顺序，-->
    <!--注意：在xhtml文档中，要把async改成async="async"-->
    <script type="text/javascript" async src="example01.js"></script>
    <script type="text/javascript" async  src="example02.js"></script>
</head>
<body>
<-- content-->
</body>

</html>

。。。待补充

隽晓风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级程序设计读书笔记（一)

在HTML中使用Javascript1、 <script>元素使用javascript，只需要在HTML中引入1.1 使用方式使用方式有两种，一种是在页面中嵌入Jascript代码，一种是包含外部Javascript文件，代码如下：内部引用<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><
复制链接

扫一扫