javascriptの循序渐进系列为《javascript高级程序设计》的读书笔记，记录了看书过程中觉得重点的地方和一些总结，为学习javascript打好基础。

------------------------------------------------分割线----------------------------------------------------------------

javascript in html

>使用<script>标签

>内联和外部引用的区别

>文档模型是怎样影响js的

>浏览器不支持js时怎么办

以上围绕这四个方面展开。

一、<script>标签

要在html页面中使用JS，主要方式是通过<script>标签。<script>标签有6个属性：

1)、async—可选。表明脚本立即下载但是不阻止页面的其他行为，比如下载资源或者等待其他脚本的加载。这个属性只对引用外部js文件有效。

2)、charset—可选。用来指定代码的字符集，现在已经很少使用这个属性了。

3)、defer—可选。表明脚本的执行可以安全地延迟直到文档的内容完全解释和展现。仅对引用外部js文件有效。IE7及以下的文档内部的JS也支持。

4)、language—弃用。表明被代码块使用的脚本语言（比如 “JavaScript”, “JavaScript1.2”, or “VBScript”）。大多数浏览器会忽略这个属性，不建议使用。

5)、src—可选。引用外部js文件的地址。

6)、type—可选。取代了language属性；表明被代码块使用的脚本语言的内容类型（也叫MIME类型），一般来说是 “text/javascript”，当被省略时默认为 “text/javascript”。

<script>有两种用法：一种是内嵌脚本，另一种是引用外部的脚本。

内嵌写法：

<script type=”text/javascript”>
    function sayHi(){
       alert(“Hi!”);
    }
</script>

JS是由上到下依次执行。注意在使用内嵌JS时不能在代码中随意使用"</script>"，下面代码将会报错：

<script type=”text/javascript”>
    function sayScript(){
        alert(“</script>”);
    }
</script>

代码里"</script>"会被解释为script标签的结束，避免这个错误需要用转义符：

<script type=”text/javascript”>
    function sayScript(){
       alert(“<\/script>”);
    }
</script>

引用外部JS：

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

注意标签内部不能写代码，如果写了会被浏览器忽略而直接加载外部文件。

引用外部文件时不仅可以引用本地文件，也可以引用其他域下的文件，例如：

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

注意：引用其他域下的文件时注意安全，避免引用恶意文件或不安全的域下文件被篡改。

引用JS文件时应该放在页面结束的下面，避免加载JS时页面要等待JS加载完成才执行渲染，如果引用的JS很多，页面加载速度就会很慢。

<!DOCTYPE html>
<html>
<head>
　　<title>Example HTML Page</title>
</head>
<body>
<!-- content here -->
　　<script type=”text/javascript” src=”example1.js”></script>
　　<script type=”text/javascript” src=”example2.js”></script>
</body>
</html>

用这种方法，在加载JS时页面就已经渲染完成了，减少了页面的等待时间从而加强了用户体验。

Deferred Scripts

延迟脚本：HTML4.01定义了defer属性，脚本执行时不改变页面的结构。设置了defer的脚本告诉浏览器：马上下载可以延迟执行。

<!DOCTYPE html>
<html>
<head>
　　<title>Example HTML Page</title>
　　<script type=”text/javascript” defer src=”example1.js”></script>
　　<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>
　　<!-- content here -->
</body>
</html>

尽管上面的JS写在了head标签里，但是在浏览器接收到</html>之前都不会执行。

Asynchronous Scripts

异步脚本：HTML5引进了async属性。async和defer类似都是改变了处理脚本的方式，async也只能在外部引用JS时可用并且告诉浏览器马上下载。不同的是，异步的脚本并不保证按照它们指定的顺序执行，例如：

<!DOCTYPE html>
<html>
<head>
　　<title>Example HTML Page</title>
　　<script type=”text/javascript” async src=”example1.js”></script>
　　<script type=”text/javascript” async src=”example2.js”></script>

</head>
<body>
　　<!-- content here -->
</body>
</html>

上面代码中，example2可能会比example1先执行，所以这两个脚本不应该有依赖。指定异步脚本的目的是为了页面在加载之前不需要等待脚本加载和执行，也不需要等待其他脚本的加载和执行。

内嵌脚本和外部脚本的区别


虽然可以直接在页面上写JS脚本，但最好是使用外部脚本。

>---维护性：外部脚本更好维护，只需要改相应文件下的脚本，更好地做到了结构和行为的分离。　　

>---缓存：如果两个页面用到了同一个JS文件，那么这个文件只需要下载一次，而不需要在页面上写相同的代码，加快了页面加载的时间。

文档类型

IE5.5通过对文档类型的转换引入了文档模型的概念。最先的两种模式是IE5表现的怪异模式（一些不标准的特征）和IE表现得更加标准化的标准模式。两种模式最主要的区别就是对CSS内容的渲染，也对JS的渲染有副作用。由于IE最先提出文档类型这个概念，其他浏览器也相继跟随，于是乎就有了第三种模式—近乎于标准的模式，这个模式有很多标准模式的特征但是不是严格的，标准模式和近乎于标准的模式最主要的不同在于对待图片周围的间距上（图片运用表格布局时更加明显）。

当在页面的最开始省略文档类型时就会出发文档的怪异模式。以下会运用标准模式：

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!-- HTML5 -->
<!DOCTYPE html>

近乎于标准的模式会由传统和框架文档类型出发，如下：

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

因为大多数近乎于标准的模式和标准模式非常相近，几乎有很小的区别。人们常说的标准模式可能涵盖了这两种，所以大体上会分为怪异模式和标准模式。

THE <NOSCRIPT> ELEMENT

<noscript>标签：当早期的浏览器不支持javascript时就要为页面实现优雅降级。<noscript>就为不支持JS的浏览器提供了可选的内容。当浏览器不支持脚本或者脚本被禁用时，<noscript>里的内容就会显示，否则的话，这里面的内容就不会显示。

<!DOCTYPE html>
<html>
<head>
　　<title>Example HTML Page</title>
　　<script type=”text/javascript” defer=”defer” src=”example1.js”></script>
　　<script type=”text/javascript” defer=”defer” src=”example2.js”></script>
</head>
<body>
　　<noscript>
　　　　<p>This page requires a JavaScript-enabled browser.</p>
　　</noscript>
</body>
</html>

上例中当脚本禁用或者浏览器不支持脚本，p里面的文字就会显示，否则的话p里面的文字永远不会出现。

 

javascriptの循序渐进（一）的更多相关文章

  1. 循序渐进Python3（十一） --2-- web之javascript

      JavaScrip                JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之后 ...

  2. javascript 重难点（原型链 this） 理解总有一个过程，不要急，循序渐进！

    开始补充: 1. 将函数定义作为对象的属性,称之为对象方法.2. this的指向是由它所在函数调用的上下文决定的(语境),而不是由它所在函数定义的上下文决定的.3. 因为当一个函数作为函数而不是方法来 ...

  3. 如何循序渐进地学习Javascript

    javascript入门太容易了,导致几乎人人随便看看就能上手,零基础的人学个三五天都能对外宣称自己掌握了js.可是真正掌握js是一件很难的事情.如果在初学一门语言的时候第一想到的是问别人,是很难取得 ...

  4. 如何循序渐进有效学习 JavaScript？

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:宋学彦链接:http://www.zhihu.com/question/19713563/answer/23068003来源: ...

  5. 大牛教你如何循序渐进，有效的学习JavaScript？

    首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门.谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说! 你叫一个大学生去教小学数学 ...

  6. 如何循序渐进、有效地学习JavaScript？

    转载链接:https://www.zhihu.com/question/19713563/answer/23068003 分享一篇 超毛 的一篇文章<如何学习javascript>(原文链 ...

  7. JavaScript学习总结——我所理解的JavaScript闭包

    一.闭包(Closure) 1.1.什么是闭包? 理解闭包概念: a.闭包是指有权限访问另一个函数作用域的变量的函数,创建闭包的常见方式就是在一个函数内部创建另一个函数,也就是创建一个内部函数,创建一 ...

  8. javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. 前端工程优化：javascript的优化小结

     我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度 ...

随机推荐

  1. postgresql修炼之道学习笔记（1）

    好好学习吧. 本笔记 仅作为摘要记录 前两章,主要是数据库对比和安装等. 对比,就比多说了,总是和别人比较,会显得自己身价低,呵呵. 安装也有很多文章,不多说. 第二章提到了一些简单的配置, 其在 d ...

  2. CallBack实践。

    第一:它的应用场景是什么? if you call me ,i will call back.目前我接触到两种需要回调的需求 1.系统管理平台登录,登录所需要的人员和部门数据都是在另一个基础信息系统中 ...

  3. 为什么要配置sdk-tools/platform-toools?

    为了方便使用Android SDK包含的开发工具,我们在系统环境变量中的Path设置Android SDK的安装目录下的tools目录. Android SDK中: platform-tools里有a ...

  4. paper 126：[转载] 机器学习中的范数规则化之（一）L0、L1与L2范数

    机器学习中的范数规则化之(一)L0.L1与L2范数 zouxy09@qq.com http://blog.csdn.net/zouxy09 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化. ...

  5. java 关键字 assert的学习

    之前在学习java源码时,发现了assert这个不常用的关键字.下面直接来介绍下这个关键字的使用. assert是什么? 它是jdk1.4之后新增加的关键字,没了. assert的作用是什么? ass ...

  6. JS字符串替换函数:Replace(“字符串1″, “字符串2″)，

    JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...

  7. 移动端 iframe的使用

    对于iframe的设定有几个css属性常用 overflow:hidden;width:100%;当这样使用inframe内部中使用overflow,iframe会被撑开,导致width与overfl ...

  8. Hadoop namenode无法启动

    最近遇到了一个问题,执行start-all.sh的时候发现JPS一下namenode没有启动        每次开机都得重新格式化一下namenode才可以        其实问题就出在tmp文件,默 ...

  9. JNI 翻译 转 Delphi 的 经验 方法

    首发在 ①FireMonkey[移动开发] 16523232 欢迎使用 FMX 开发手机程序的高手来访. 注意:如果您看了本文,翻译了 JNI,请发布到本群共享一份.不同意本规定的,请立即删除本文.凡 ...

  10. http 协议集合，超级简单

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...