码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript - 简介、在HTMl中使用JavaScript、基本概念

时间:2015-03-08 22:51:32      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

1. JavaScript简介

JavaScript历史回顾

JavaScript是什么

JavaScript与ECMAScript的关系

JavaScript的不同版本

一言概之,略。

2. 在HTML中使用JavaScript

    要把JavaScript放到网页中,就得涉及Web的核心语言 -- HTML。当初开发JavaScript的时候,要解决的一个重要问题就是让JavaScript与HTML页面共存,并且不影响页面在浏览器中的呈现效果。最终决定为Web增加统一的脚本支持。

2.1 <script>元素

<script>元素既可以包含脚本语句,也可通过src属性指向外部脚本文件。

<script>定义了6个属性:

  • async:[可选]。表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或是等待加载其他脚本。该属性只对外部脚本文件有效。
  • charset:[可选]。表示通过src属性指定的代码的字符集,该属性很少使用。
  • defer:[可选]。表示脚本可以延迟到文档完全被解析完成之后在执行,该属性只对外部脚本文件有效。
  • language:已废弃。
  • src:[可选]。表示要包含执行代码的外部文件。
  • type:[可选]。可以看成是language的替代属性。表示编写代码使用的脚本语言的内容类型,也称MIME类型。虽然text/javascript和text/ecmascript都已经不被推荐使用,但是人们一直以来使用的都是text/javascript。实际上,服务器在传送javascript文件时使用的是MIME类型是application/x-javascript,但在type中设置这个值却可能导致脚本被忽略。另外,在非IE浏览器中还可以使用application/javascript 和application/ecmascript.考虑到约定俗成和最大限度的浏览器兼容性,目前type属性的值依旧还是text/javascript。不过这个属性并不是必须的,其默认值依然是text/javascript。

[注意]

  • 解析嵌入式JavaScript代码或外部JavaScript文件(包括下载该文件)时,页面的处理会暂时停止。
  • 不要在代码的任何地方出现”<script>”字符串,浏览器会认为那是结束标签。通过转义字符”\”解决这个问题(“<\/script>”)。
  • 带有src属性的<script>标签之间如果包含JavaScript代码,则只会下载并执行外部脚本文件,嵌入的代码会忽略。
  • 只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的顺序对它们依次进行解析。
2.1.1 标签的位置

    通常,所有<script>元素放在<head>元素中,这同时也意味着全部JavaScript文件被下载、解析、执行完成之后,才会开始呈现页面内容(浏览器在遇到<body>元素才开始呈现内容),在有些时候非常影响观感。

    怎么破?把JavaScript引用放在<body>元素中页面内容的后面:

    <head></head>

    <body>

        <!-- 页面内容 –>

        <script type=”” src=””></script>

    </body>

2.1.2 延迟脚本

    <script defer=”defer” type=”” src=””></script>中设置了defer属性,表明脚本在执行时不会影响页面的构造,也即,立即下载脚本,但是整个页面解析完成之后再执行(延迟执行)。

    虽然上面的做法可以把<script>元素放在<head>元素中并将其中包含的脚本延迟到浏览器遇到</html>标签后再执行。HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。

    考虑到各浏览器的不同处理方式,把延迟脚本放在页面底部仍然是最佳选择。

2.1.3 异步脚本

    HTML5为<script>定义了async属性,与defer类似,都用于改变脚本的行为,同样也只适用于外部脚本文件,并告诉浏览器立即下载文件。但不同于defer的是,标记为async的脚本并不保证按照指定的先后顺序执行。因此,确定各脚本文件间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。

2.2 <noscript>元素

    如果 浏览器不支持脚本 或 浏览器支持脚本但脚本被禁用,浏览器就会显示<noscript>中的内容。

    如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。

    无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,应当在注释标签中隐藏脚本。老式的(无法识别 <script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中。

3. 基本概念

各语言类似。

严格模式:ECMAScript引入了严格模式的概念,要在整个脚本中启用严格模式,需在顶部添加: “use strict”; 没错,就只是字符串!严格模式下,JavaScript的执行结果会有很大不同。支持严格模式的浏览器包括IE10+、Firefox4+、Safari5.1+、Opera12+、Chrome。

数据类型:Undefined、Null、Boolean、Number、String、Object(本质由一组无需的名值对组成)。

    关于Number类型,需要说明:

  • 八进制第一位表示为零,如果数值超出范围(出现比7大的数字)会导致首位0被忽略,当作十进制解析。eg: 070 = 56, 079 = 79, 08 = 8。八进制字面值的使用在严格模式下是无效的,会导致该模式的JavaScript引擎抛出错误。
  • 十六进制字面值的前两位为0x。
  • 0.1+0.2=0.30000000000000004
  • isNaN(true) = false, Number(true) = 1
  • ECMAScript3下parseInt("070")=56,ECMAScript5下为70,为防如此,可以使用parseInt("070",8),第二个参数为进制。

JavaScript - 简介、在HTMl中使用JavaScript、基本概念

标签:

原文地址:http://www.cnblogs.com/sduzhangxin/p/4322402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!