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. ASP.Net中的Web Resource

    http://support.microsoft.com/kb/910442,这是中文的,机器翻译的,不太容易看懂,英文的是:http://support.microsoft.com/kb/91044 ...

  2. HDU 5047 Sawtooth（大数优化+递推公式）

    http://acm.hdu.edu.cn/showproblem.php?pid=5047 题目大意: 给n条样子像“m”的折线,求它们能把二维平面分成的面最多是多少. 解题思路: 我们发现直线1条 ...

  3. AIX 5L 系统管理技术 —— 存储管理——物理卷

    一.向系统中添加一块硬盘 方法一 该方法适用于在配置之前能够重新启动系统的情况.在系统启动时,就会运行cfgmgr命令,它可自动配置系统中的新设备.当完成了系统启动后,以root用户进入系统,用lsp ...

  4. Linux上USB移植错误解决笔记

    在内核目录下先配置支持USB设备,无论你是什么设备,这一步都是必须的,USB驱动和其他的驱动不同,它分为USB设备驱动,另外还有USB-Host主机控制器的驱动,配置如下: Device Driver ...

  5. HTML5--div、span超出部分省略号显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android 资源（resource详解（转）

    本文介绍在Android开发中关于资源文件的存储操作.对于Android资源也是非常重要的,主要包括文本字符串(strings).颜色(colors).数组(arrays).动画(anim).布局(l ...

  7. rdesktop的使用

    整个地球都知道rdesktop,有了它,我们可以从Solaris或者Linux使用Windows,当然Windows要开启Windows Terminal Service.虽然也有基于GTK+的tsc ...

  8. sklearn 增量学习 数据量大

    问题 实际处理和解决机器学习问题过程中,我们会遇到一些"大数据"问题,比如有上百万条数据,上千上万维特征,此时数据存储已经达到10G这种级别.这种情况下,如果还是直接使用传统的方式 ...

  9. scale配合过渡的时候bug

    使用scale的时候注意两点 1:scale(1)的时候尽量图片的 width==naturalWidth bug表现为过渡生效时候图片变模糊 2:scale在过渡前和过渡后的计算后的width和he ...

  10. 响应式内容滑动插件jQuery.bxSlider

    bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...