你的位置:首页 > Java教程

[Java教程]javascriptの循序渐进(一)


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里面的文字永远不会出现。