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

来源：互联网发布：网络销售入门编辑：程序博客网时间：2024/06/05 02:04

在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

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