文档章节

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

slyso
 slyso
发布于 2015/07/14 21:19
字数 1627
阅读 96
收藏 2
主要根据图书《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 是用什么版本编写的。

© 著作权归作者所有

slyso
粉丝 29
博文 28
码字总数 52229
作品 0
美国
个人站长
私信 提问
读《JavaScript高级程序设计》

1、JavaScript学习笔记1:JavaScript学前介绍 http://my.oschina.net/bluefly/blog/478575 2、JavaScript学习笔记2:JavaScript基本概念 http://my.oschina.net/bluefly/blog/484445......

slyso
2015/07/14
182
0
JavaScript入门指南(学习笔记)

本片文章记录一下当时自己学习JavaScript的过程以及一些知识点和注意事项,从基础到中高级的内容都有,会以章节的形式慢慢展示出来 学前准备 学习基础:DIV+CSS基础扎实 开发工具: sublime/web...

番茄炒蛋少放糖
09/13
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
泄露你的JavaScript技术很烂的五个表现

Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让...

i33
2013/01/14
2.9K
19
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部