JS_高程2.在HTML中使用Javascript（1）
1.使用<script>元素向HTML页面中插入Javascript
HTML4.01中<script>标签有6个属性：
（1）async：可选。表示立即下载脚本，不影响页面中其他资源的下载。只对外部脚本文件有效。
（2）charset：可选。表示通过scr属性指定的代码的字符集。（因为大多数浏览器会忽略它，所以很少人用）
（3）defer：可选。表示脚本会延迟到文档完全被解析和显示之后在执行。只对外部脚本有效。IE7及更早的嵌入式脚本也支持该属性。
（4）language：已废弃。原来表示编写代码使用的脚本语言。
（5）scr：可选。表示包含要执行代码的外部文件。
（6）type：可选。表示编写代码使用的脚本语言的内容类型（MIME类型）
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
注：实际上服务器在传送Javascript文件时使用的MIME类型通常是application/x-javascript,但是在type中设置这个值可能导致脚本被忽略。
在非IE浏览器还可以使用：application/javascript和application/ecmascript。
考虑到浏览器的兼容性问题，目前的type属性用text/javascript，但是这个属性并不是必需的，没有指定时，其默认值仍是text/javascript。
2.使用<script>元素的两种方式：
（1）直接在HTML页面中嵌入Javascript代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
6 <script type="text/javascript">
function sayHi(){
alert("Hi !");
}
</script>
</head>
<body>
<button type="button" onclick="sayHi()">Try it</button>
</body>
</html>
包含在<script>元素内部的Javascript将从从上到下依次解释，在解释器对<script>元素内部的所有内代码求值完毕以前，页面中的其余内容都不会被浏览器加载或是显示。
在使用<script>嵌入Javascript代码时，不能再代码中的任何地方出现</script>字符串。
eg：<script type="text/javascript">
function sayHi(){
alert("</script>");
}
</script>
出现错误的原因：按照解析嵌入式代码的规则，当浏览器遇到字符串“</script>”时，会认为是结束的</script>标签。通过加转义字符“\”可以解决这个问题
<script type="text/javascript">
function sayHi(){
alert("<\/script>");
}
</script>
（2）使用src引用外部文件
<script type="text/javascript" src="example.js"></script>
与解析嵌入式Javascript代码一样，在解析外部Javascript文件，包括下载该文件时，页面的处理也会暂时停止。
（在XHTML中可以写成<script type="text/javascript" src="example.js"/>）
注：
（1）在带有src属性的<script>元素不应该在其<script>和<script/>标签之间在包含有额外的Javascript代码。如果包含了嵌入式代码，则只会下载并执行外部脚本文件，嵌入式的代码会被忽略。
（2）<script>元素的src属性还可以包含来自外部域的Javascript文件。
eg：
<script type="text/javascript" src="http://www.some.com/li.js"></script>
（3）无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。
3.<script>标签的位置
传统的做法是吧script标签放在head头部内，这意味着必须等全部的Javascript代码都被下载，解析和执行完成以后，才开始呈现页面的内容，即body标签里的内容，所以当需要很多的Javascript代码时，会导致浏览器页面加载会出现明显的延迟情况，导致浏览器窗口将是一片空白。为了避免这样的情况，现代web应用程序一般都把Javascript引用放在body元素中页面内容的后面。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样，在解析包含Javascript代码之前，页面的内容将完全呈现在浏览器中。用户也会因为浏览器显示空白页面的时间缩短而感到打开页面的速度加快了。
JS_高程2.在HTML中使用Javascript（1）的更多相关文章
- JS_高程2.在HTML中使用Javascript（2）
1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...
- JS高程2.在HTML中使用Javascript（1）
1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...
- JS高程2.在HTML中使用Javascript（2）
1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...
- JavaScript高级程序设计-(1)html中使用JavaScript
html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...
- 在HTML中使用JavaScript元素
script属性<script async = async charset="utf-8" defer="defer" src="index.h ...
- 2在HTML中使用JavaScript
像HTML页面中插入JavaScrip的主要方法,就是使用<script>元素.HTML4.01为<script>定义了6个属性:async:可选,表示应该立即下载脚本,当不妨 ...
- javascript高级编程3第二章：在html中使用javascript
2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...
- 在Swift中使用JavaScript的方法和技巧
本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...
- js002-在HTML中使用JavaScript
js002-在HTML中使用JavaScript 2.1 <script>元素 定义了以下6个属性 async: 可选.表示应该立即下载脚本,但不妨碍页面中的 ...
随机推荐
- zTree的使用教程
1.首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo 2.之后引入: <script src="js/jquery.ztree.all ...
- python全栈开发day68-ORM操作：一般操作、ForeignKey操作、ManyToManyField、聚合查询和分组查询、F查询和Q查询等
ORM操作 https://www.cnblogs.com/maple-shaw/articles/9403501.html 一.一般操作 1. 必知必会13条 <1> all(): 查询 ...
- Codeforces 513E2 Subarray Cuts dp (看题解)
我们肯定要一大一小间隔开来所以 把式子拆出来就是类似这样的形式 s1 - 2 * s2 + 2 * s3 + ...... + sn 然后把状态开成四个, 分别表示在顶部, 在底部, 在顶部到底部的中 ...
- Codeforces 915G Coprime Arrays 莫比乌斯反演 (看题解)
Coprime Arrays 啊,我感觉我更本不会莫比乌斯啊啊啊, 感觉每次都学不会, 我好菜啊. #include<bits/stdc++.h> #define LL long long ...
- 基于Kubernetes集群部署skyDNS服务
目录贴:Kubernetes学习系列 在之前几篇文章的基础,(Centos7部署Kubernetes集群.基于kubernetes集群部署DashBoard.为Kubernetes集群部署本地镜像仓库 ...
- BZOJ3796 Mushroom追妹纸 字符串 SA KMP
原文链接https://www.cnblogs.com/zhouzhendong/p/9253173.html 题目传送门 - BZOJ3796 题意 找一个串 $w$ 满足: 1.$w$ 是 $s_ ...
- sql 把一个用逗号分隔的多个数据字符串变成一个表的一列
USE [tms]GO/****** Object: UserDefinedFunction [dbo].[StrToTable] Script Date: 2017/4/26 9:06:20 *** ...
- ajax请求后台，response.sendRedirect失效，无法重定向
今天在写项目的时候,想加一个切换用户,需要清除session并且跳转到登录页面,发起一个ajax请求后,执行完发现无法跳转. 原因在于: (从网上摘录) Ajax只是利用脚本访问对应url获取数据而已 ...
- pip软件包安装 + Anaconda软件库安装 教程
PIP软件包安装(适用于Ubuntu和Windows10): 下载pip的安装包,官网链接如下:https://pypi.python.org/pypi/pip 我选择了Source源的安装方式,单击 ...
- 使用 PySide2 开发 Maya 插件系列 总览
使用 PySide2 开发 Maya 插件系列 总览 使用 PySide2 开发 Maya 插件系列一:QT Designer 设计GUI, pyside-uic 把 .ui 文件转为 .py 文件 ...