javascript有下列三个不同的部分组成:

  • ECMAScript,由ECMA-262定义,提供核心语言功能
  • 文档对象模型(DOM),提供访问和操作网页内容的方法和接口
  • 浏览器对象模型(BOM),提供与浏览器交互的方法和接口

<script>定义了下列6个属性

  • async: 可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
  • charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对潜入脚本也支持这个属性。
  • language:已废弃。原来用于表示编写代码使用的脚本语言(如JavaScript、JavaScript1.2或VBScirpt)。大多数浏览器会忽略这个属性,因此也没有必要在用。
  • src:可选。表示包含要执行代码的外部文件。
  • type:可选。可以看成是language的替代属性;表示编写代码使用脚本语言的内容类型(也称为MIME类型)。
    text/javascript和text/ecmascript都已经不被推荐使用,但习惯用的还是text/javascript。实际上服务器在传送JavaScript时使用的MIME类型通常是application/x-javascript,但在type中设置这个值却可能导致脚本被忽略。在非IE浏览器还可以使用以下值:application/javascript和application/ecmascript。目前type值依旧还是text/javascript,如果没有指定,默认值仍为text/javascript。

<script>标签的位置

按照管理,所有<script>元素都应该放在页面的元素中,这样的目的是把所有外部文件(包含css,js)的引用都放在相同的地方。可是,在文档的元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成后,才能开始呈现页面的内容(浏览器在遇到标签时才开始呈现内容)。对于那些大型网站,有很多JavaScript代码的页面,这无疑会导致浏览器呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现在一般将JavaScript引用放在元素中,放在页面内容后面,这样用户会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

引用外部文件的好处

  • 可维护性:把所有的JavaScript文件都放在一个文件夹中,维护起来轻松许多。而且开发人员也能够在不触及HTML标记的情况下,集中精力编辑JavaScript代码。
  • 可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说,如果有两个页面都是用同一个文件,那么这个文件只需下载一次。因此可以加快页面加载的速度。
  • 适应未来:通过外部文件包含JavaScript无须使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

文档模式

  • 最初的两种文档模式是:混杂模式(quirks mode)和标准模式(standards mode)。混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。
  • IE提出一种所谓的准标准模式(almost standards mode)。这种模式下的浏览器特性有很多是符合标准的,但也不尽然。不标准的地方主要表现在处理图片间隙的时候(在表格中使用图片时问题最明显)。
  • 对于标准模式可以采用以下任何一种文档类型来开启:
    1. <!-- HTML 4.01 严格型 -->
      <!DOCTYPE HTML PUBLIC
      "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    2. <!-- XHTML 1.0 严格型 -->
      <!DOCTYPE html PUBLIC
      "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <!-- HTML 5 -->
      <!DOCTYPE html>
  • 对于准标准模式,则可以通过使用过渡型(transitional)或框架集型(frameset)文档类型来触发。
    1. <!-- HTML 4.01 过渡型 -->
      <!DOCTYPE HTML PUBLIC
      "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    2. <!-- HTML 4.01 框架集型 -->
      <!DOCTYPE HTML PUBLIC
      "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
    3. <!-- XHTML 1.0 过渡型 -->
      <!DOCTYPE html PUBLIC
      "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4. <!-- XHTML 1.0 框架集型 -->
      <!DOCTYPE html PUBLIC
      "-//W3C//DTD XHTML 1.0 Frameset//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • 准标准模式和标准模式非常接近,他们差异几乎可以忽略不急。因此,当有人提到“标准模式”时,有可能是指这两种模式中的任何一种。

<noscript>元素

在不支持JavaScript的浏览器中显示替代的内容,这个元素可以包含能够出现在文档中的任何HTML元素(<script>元素除外)。包含在<noscript>元素中的内容只有在下列情况下才会显示出来:

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

符合上述任何一个条件,浏览器都会显示<noscript>中的内容,除此之外,浏览器不会呈现<noscript>中的内容。
 

<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
</head>
<body>
<noscript>
<p>
本页面需要浏览器支持(启用)JavaScript。
</p>
</noscript>
</body>
</html>


这个页面会在脚本无效的情况下向用户显示“本页面需要浏览器支持(启用)JavaScript。”而在启用了脚本的浏览器中,用户永远不会看到它—-尽管它是页面的一部分。

小结

  • 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
  • 所有<script>元素都会按照它们在页面中出现的先后顺序依次进行解析。在不使用defer和async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
  • 由于浏览器会先解析完不实用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,变迁前面。
  • 使用defer属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。
  • 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

《javascript高级程序设计(第3版)》-1的更多相关文章

  1. 1<<33这种写法是错的!!!

    1<<33不能这么写,1默认int类型,应该改为(long long)1<<33

  2. mysql 5.6.33 重置密码后报错

    [root@ Desktop]# mysql -uroot -p Enter password: Welcome to the MySQL monitor. Commands end with ; o ...

  3. 【C语言】++(a++)的写法是错的

    http://bbs.csdn.net/topics/390764053 a++得到的是一个右值,++操作需要的是一个左值. ------------------------------------- ...

  4. [C语言]易错知识点、小知识点复习(1)

    1. 计算机只能识别由0和1组成的二进制指令,需要将用高级语言(如C.C++)编写的源程序(.c..cpp)编译成二进制目标文件(.obj).一个程序可以根据需要写在不同的文件里,编译是以文件为单位进 ...

  5. js自执行函数的几种不同写法的比较

    经常需要一个函数自执行,可惜这一种写法是错的: function(){alert(1);}();  原因是前半段“function(){alert(1);}”被当成了函数声明,而不是一个函数表达式,从 ...

  6. 菜鸟的Xamarin.Forms前行之路——从新建项目到APP上架各种报错问题解决方法合集(不定时更新)

    出自:博客园-半路独行 原文地址:http://www.cnblogs.com/banluduxing/p/7425791.html 本文出自于http://www.cnblogs.com/banlu ...

  7. django migrate报错:1005 - Can't create table xxx (errno: 150 "Foreign key constraint is incorrectly formed")

    自从mysql升级,以及使用mariaDB以来,很多不曾更新django中model的外键, 今天,按以前的思路写完外键之后, migrate命令报错: 1005 - Can't create tab ...

  8. 《C++primer》v5 第2章 变量和基本类型 读书笔记 习题答案

    2.1 int,long long ,short 可表示范围和占用内存空间不同.具体与计算机有关. 无符号类型只能表示0和正数,带符号类型可以表示负数,0,正数. float是单精度,一般占用4个字节 ...

  9. Go第七篇之规范的接口

    接口本身是调用方和实现方均需要遵守的一种协议,大家按照统一的方法命名参数类型和数量来协调逻辑处理的过程. Go 语言中使用组合实现对象特性的描述.对象的内部使用结构体内嵌组合对象应该具有的特性,对外通 ...

  10. 作为一个新手的Oracle(DBA)学习笔记【转】

    一.Oracle的使用 1).启动 *DQL:数据查询语言 *DML:数据操作语言 *DDL:数据定义语言 DCL:数据控制语言 TPL:事务处理语言 CCL:指针控制语言 1.登录 Win+R—cm ...

随机推荐

  1. NO.08--VUE之自定义组件添加原生事件

    前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...

  2. 240. 搜索二维矩阵 II

    二维数组搜索 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 ...

  3. Laxcus大数据操作系统单机集群版

    Laxcus大数据管理系统是我们Laxcus大数据实验室历时5年,全体系全功能设计研发的大数据产品,目前的最新版本是2.1版本.从三年前的1.0版本开始,Laxcus大数据系统投入到多个大数据和云计算 ...

  4. kubernetes nfs-client-provisioner外部存储控制器

    介绍: nfs-client-provisione是一个专门用于NFS外部目录挂载的控制器,当多个副本创建时,他们的命名方式如下: pv provisioned as ${namespace}-${p ...

  5. 关于SQL 语句常用的一些查询收藏

    create database xuesheng go use xuesheng go /*学生表*/ create table Student ( S# ,) primary key, Sname ...

  6. 一个简单的rest_framework demo

    models.py from django.db import models class UserInfo(models.Model): username = models.CharField(max ...

  7. Full Binary Tree(二叉树找规律)

    Description In computer science, a binary tree is a tree data structure in which each node has at mo ...

  8. 【探路者】团队互评Alpha版本

    [探路者]组互评连接: 1互评作品:SkyHunter http://www.cnblogs.com/zej87/p/7802000.html 2互评作品:爱阅app http://www.cnblo ...

  9. HDU 5200 Trees 二分

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5200 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  10. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...