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. The connection to adb is down, and a severe error has occured.（转）

    启动android模拟器时.有时会报The connection to adb is down, and a severe error has occured.的错误.在网友说在任务管理器上把所有ad ...

  2. linux（centos）用户与权限

    1.用户管理 2.用户组 3.权限分配 一.查看与用户相关文件命令: 1.cat 2.more 3.head /etc/passwd    #查看文件的前十行 4.head -2 /etc/passw ...

  3. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  4. linux下JsonServer启动

    1:进入到JsonServer run.sh目录下; 2:执行"export PATH=.:$PATH"; 3:执行"run.sh start"; 这样便把Js ...

  5. Maximo7自定义实现WebService

    最近很多人在群里聊这个话题,我就也一个hello world来实现一下. 1.自定义一个类,继承于AppService 代码如下:

  6. LoadRunner培训初级教程

    一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive 用来测试应用程序性能的工具  LoadRunner 通过模拟一个 ...

  7. nginx auth

    location / { auth_basic "closed site";##Context:http, server, location, limit_except auth_ ...

  8. MSDTC故障排除，DTCTester用法 (二)

    摘自:https://support.microsoft.com/zh-cn/kb/293799#bookmark-4 ———————————————————————————— 概要 DTCTeste ...

  9. Supervisor重新加载配置

    Supervisor重新加载配置启动新的进程 liaojie 发布于 1年前,共有 0 条评论 一.添加好配置文件后 二.更新新的配置到supervisord supervisorctl update ...

  10. 利用反射+AOP，封装Basehandler

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...