JavaScript学习笔记1:JavaScript学前介绍

原创
2015/07/14 21:19
阅读数 274
主要根据图书《JavaScript高级程序设计(第3版)

1、JavaScript是一种专门与网页交互而设计的脚本语言,由下列三个不同的部分组成:
1)ECMAScript,由ECMA-262定义,提供核心语言功能;
2)文档对象模型(DOM) ,提供访问和操作网页内容的方法和接口;
3)浏览器对象模型(BOM),提供与浏览器交互的方法和接口。

现状:
JavaScript 的这三个组成部分,在当前5个主要浏览器(IE, Firefox, Chrome, Safari 和Opera)中都得到了不同程度的支持。其中,所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错,而对ECMAScript 5 的支持程度越来越高,但对DOM的支持则彼此相差比较多。对已经纳入 HTML5 标准的 BOM 来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异


2、在HTML中使用JavaScript
1)在HTML页面中执行JS的3中方法
嵌入执行(2种方法):
<body>
<a href="javascript:alert('运行JavaScript!');">运行 JavaScript</a>
<script type="text/javascript">
    alert("直接运行的JavaScript!");
</script>
</body>

导入外部js文件:
<script src="test.js" type="text/javascript"></script>
这个时候标签内就不要再嵌入JS代码, 导入外部JS的时候,嵌入的代码会被忽略

3、需要注意的
把JavaScript插入到HTML页面中要使用<script >元素。使用这个元素可以把JavaScript嵌入到页面中,也可以包含外部JS文件。
1)包含外部JavaScript文件时,必须将src属性设置为指向响应文件的URL。而这个文件可以是与它的页面位于同一服务器的文件,也可以是其他任何域中的文件
2)所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不适用 defer 和async 属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
3)由于浏览器会先解析完不适用defer 属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该吧<script>元素放在页面最后,即主要内容后面,</body>标签前面
4)使用 defer 属性可以让脚本在文档完全呈现后再执行。延迟脚本总是按照指定它们的顺序执行
5)使用 async 属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行
另外, 使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

4、<script>元素  HTML4.01为<script>定义了6个属性,全是可选,language已废弃
1)type :考虑到约定俗成和最大限度的浏览器兼容性,还是text/javascript  。其实标准来说有好几个其他值
2)src :表示包含要执行代码的外部文件
3)charset:表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值。
4)language:已废弃,原来用于标识编写代码使用的脚本语言(如JavaScript、JavaScript1.2、VBScript)
5)defer:表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本文件有效。
6)async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,如下载其他资源或等待加载脚本。支队外部脚本有效。

注意1
在<script>嵌入JS代码是,不要在代码中的任何地方出现"</script>"字符串,浏览器加载时会产生错误,会认为那是结束的</script>标签,如下文:
<script type="text/javascript">
    function sayScript(){
         alert("</script>");
    }
</script>

但是通过转义字符"\"可以解决这个问题
<script type="text/javascript">
    function sayScript(){
          alert("<\/script>");
    }
</script>

注意2
XHMTL可以容忍省略</script>,但HTML文档不行。

5、 XHTML代码的规则 比HTML严格得多,如
1)<  和>  直接a < b 会报错,要改写成实体编码&lt; 还可以
2)用 <![CDATA[...这里是不需要的任意格式的文本内容...]]>  语法包裹内容  。有时候还配合注释使用
//<![CDATA[
...这里是不需要的任意格式的文本内容...
//]]>  
3)在XHTML格式中,要把defer属性设置为 defer="defer" ,async也一样

6、<noscript>元素
当浏览器不支持JavaScript时,如何让页面平稳退化。

<!DOCTYPE html>
<html>
<head>
 <title>ceshi</title>
</head>
<body>
 <noscript>
  <p>本页面需要浏览器支持(启用)Javascript</p>
 </noscript>
</body>
</html>

不推荐使用的(为了让不支持 <script> 标签的浏览器能隐藏嵌入的JavaScript代码:
 <script><!--
  alert("Hi");
 //--></script>

Chrome测试代码:
<!DOCTYPE html>
<html>
<head>
 <title>ceshi</title>
</head>
<body>
 <noscript>
  <p>本页面需要浏览器支持(启用)Javascript</p>
 </noscript>
 <script><!--
  alert("Hi");
 //--></script>
</body>
</html>

正常时:

禁用当前页面JS后:

7、文档模式
从IE5.5开始,引入了“文档模式”的概念,这个概念是通过使用文档类型(doctype)切换来实现的,后来其他浏览器也纷纷效仿。
最初的两周文档模式是:混杂模式、标准模式。混杂模式让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。
这两种模式主要影响CSS的呈现,也会影响JS的解释执行。现阶段,开发前端代码,声明文档模式,让浏览器以适当的模式去解析,是有必要的。
详情参见:
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部