JavaScript高程三之基础

1.1<script>标签

<script>标签有6个属性:

  • async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
  • charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略他的值,因此这个属性很少用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • language:已废弃。
  • src:可选。表示包含要执行代码的外部文件。
  • type:可选。可以看成是language的替代属性,默认是text/javascript。

使用<script>元素的方式有两种:直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。

在使用<script>元素嵌入JavaScript代码时,只须为<script>指定type属性。然后,像下面这样把JavaScript代码直接放在元素内部即可:

1 <script type="text/javascript">
2     function sayHi(){
3         alert("hi");
4     }
5 </script>

注意:不要在代码中的任何地方出现"</script>"字符串,如 alert("</script>"),对于这种情况需要使用转义字符 alert("<\/script>")

如果要通过<script>元素来包含外部JavaScript文件,就需要用到src属性,例如:

<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。与解析嵌入式JavaScript代码一样,在解析外部JavaScript文件(包括下载该文件)时,页面的处理也会暂时停止。

1.2 标签的位置

按照传统的做法,所有的<script>元素都应该放在页面的<head>元素中。这种做法的目的是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面,这样做会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白。

为了避免这个问题,一般将JavaScript放在<body>元素结束之前就行

1.3 延迟脚本

defer属性表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

<script type="text/javascript" defer="defer" src="example.js"></script>

即使脚本放在了<head>元素中,如果声明defer后,仍会在</html>标签之后再执行。

defer属性只适用于外部脚本文件。因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。将延迟脚本放在页面底部仍然是最佳选择。

1.4 异步脚本

HTML5为<script>元素定义了async属性。这个属性与defer属性相似,都用于改变处理脚本的行为。与defer相似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定他们的先后顺序执行,因此确保两个异步的脚本的互不依赖很重要。

指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。

异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。

时间: 2024-10-19 19:22:53

JavaScript高程三之基础的相关文章

3-JavaScript的三种基础弹框

JavaScript中三种基础弹框: 一.基础弹框 语法:alert() 举例: alert("123"); 二.确认框 语法:confirm(); 举例:var b = confirm("aa"); alert(b); 三.警告框 语法:prompt(text,value) 举例:var a = prompt("请输入你的用户名","boss"); alert(a);

跟我学《JavaScript高程3》 第二讲,课程笔记

跟我学<JavaScript高程3> 第二讲:第3章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作 课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 课程回顾 1.静态项目基本结构:html.css.js.images 2.文件的方式引入一个JavaScript脚本文件:引入方式.引入路径 3.变量编写Hello,world:变量的定义,使用变量. 补充:变量在讲

跟我学《JavaScript高程3》第三讲,课程笔记

跟我学<JavaScript高程3> 第三讲:第4章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作    课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 课程回顾 1.数据类型:5种基本类型,1中复杂类型. 2.操作符:需要注意运算优先级,算关逻条赋逗. 3.语句:if-else.for.for-in.while 4.函数:函数定义,目前的两种方法 补充:变量在

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285人阅读 评论(1) 收藏 举报  分类: Webkit(34)  JavascriptCore/JIT(3)  版权声明:本文为博主原创文章,未经博主允许不得转载. 看到HorkeyChen写的文章<[WebKit] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现>

跟我学《JavaScript高程3》第一讲,课程笔记

跟我学<JavaScript高程3> 第一讲:第1~3章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作    课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 回答几个问题 1.为什么要学习前端?JavaScript有哪些用处?为什么要讲这本书? 移动互联网是未来的趋势,移动设备H5开发带动了前端趋势,今后App基本都是Native+H5实现. 页面效果,数据交互

JavaScript 面向对象开发知识基础总结

JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精要 JavaScript 启示录 如果对于 JavaScript 面向对象编程理解不够深的话,第一本书还是强烈推荐的.第二本书比较适合初中级的开发者阅读.对各种知识点都有代码示例.内容中规中矩. 1.JavaScript 中的变量类型和类型检测 C#和Java等编程语言用栈存储原始类型,用堆存储引用

JavaScript的三种工业化玩法

JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScript同样需要软件调试技术,希望本文总结的三种工具会对大家的学习有所帮助. 任何语言的学习都离不开实践,不写代码是永远学不会编程的,当然javascript也不例外,很多人推荐直接浏览器调试,个人觉得这个推荐应该是非常初级的,比如Chrome, Firefox确实提供了实用的前端调试工具,但是个人认为

微信公众平台开发教程(三) 基础框架搭建

微信公众平台开发教程(三) 基础框架搭建 上一章,我们已经初步讲解了微信公众账号开发的基本原理,今天我们来探索设计实现. 首先我们设计了模块层次图,当然图中只是给出一种实现方式,不局限于此.具体见下图. 主要功能介绍如下: 1)请求接口层.处理HTTP请求,及响应 2)分发层.由接口层传入请求,然后具体分析请求类型,分发至不同的处理器 3)业务逻辑层.这里是我们的具体业务逻辑了,根据请求,实现具体的业务逻辑. 4)数据层.我们在实现某个应用时可能需要访问数据,可以是数据库或者是文件.如果是简单应

(三)XML基础(3)

五.XPath:快速定位到节点 5.1 简介 5.2 语法 5.3 案例 XPath对有命名空间的xml文件和没有命名空间的xml定位节点的方法是不一样的,所以再对不同的xml需要进行不同的处理. 使用前提:  导入 Test_Xpath.java package dom; import java.io.File; import java.util.HashMap; import java.util.List; import java.util.Map; import org.dom4j.Doc