JavaScript学习笔记第二天

2016-12-05  本文已影响0人  z_love

JavaScript的组成

1.ECMAScript:提供核心语言功能
2.文档对象模型(DOM):提供访问和操作网页内容的方法和接口
3.浏览器对象模型(BOM):提供和浏览器交互的方法和接口

在HTML中使用JavaScript

<script>元素

1.script元素的属性

2.<script>元素的使用

  1. 1直接在页面中嵌入JavaScript代码(只需为<script>指定type属性)
<script type = "text/javascript">
     function sayHi() {
          alert("Hi!");
}
</script>

注意:
a.包含在<script>中的代码将被从上到下依次解释,以上实例,解释器会解释一个函数的定义,然后将该定义保存在自己的环境当中,在解释器对<script>元素内部的所有代码求值完毕以前,页面其他内容都不会被浏览器加载或者显示(意思是浏览器会依次解释代码,所有代码都解释完毕之后才会被加载显示)
b.使用<script>嵌入JavaScript代码时不要在代码任何地方出现"</script>"字符串,否则会被浏览器认为是结束时的标签,可以通过转移字符解决这个问题</script>

  1. 2 通过<script>元素来包含外部JavaScript文件,必须包含src属性
<script type = "text/javascript" src = "example.js"> </script>

注意:
a.在上面的实例中:外部文件通常只需要包含要放在开始<script>和结束</script>之间的那些JavaScript代码即可.与上面解析嵌入式代码一样,在解析外部JavaScript代码(包括下载该文件)时,页面的处理也会停止
b.外部文件一般带有.js扩展名,但不是必须的,使得服务器端动态生成JavaScript代码成为了可能
c.在带有src属性的<script>元素标签中间不应该再包含额外的JavaScript代码,即使包含,也不会执行
d.src属性还可以包含来自外部域的JavaScript文件,即它的src可以指向当前HTML页面所在域之外的某个域中的完整URL

<script type = test/javascript src = "http://www.somewhere.com/afile.js"> </script>

要想包含不同域的代码,要么你是这个域的拥有者,要么域的所有者值得信赖,否则有可能会被恶意修改
f.包含代码时,只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的顺序对它们依次进行解析.通俗的说,在第一个<script>元素包含的代码解析完成后,再解析第二个....

标签的位置

1.传统做法,所有<script>元素都应该放在页面的<head>元素中,

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script type = "text/javascript" src = ""example1.js"></script>
     <script type = "text/javascript" src = ""example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

目的:把所有的外部文件(包括css文件和JavaScript文件)的引用都放在相同的地方,缺点是,必须等到全部JavaScript代码都被下载,解析和执行完成之后,才开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容),必然导致呈现页面出现延迟(即浏览器窗口将一片空白),现代做法是将全部JavaScript引用放在<body>元素中页面内容的后面

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
    <!-- 这里放内容 -->
    <script type = "text/javascript" src = ""example1.js"></script>
     <script type = "text/javascript" src = ""example2.js"></script>
  </body>
</html>

延迟脚本(defer)

作用:表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行.设置此属性相当于告诉浏览器立即下载,但延迟执行.

<!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>
    <!-- 这里放内容 -->
  </body>
</html>

注意:
a.此处虽然放在<head>元素中,但包含的脚本将延迟到浏览器遇到</html>标签后再执行
b.HTML5要求脚本按照出现的先后顺序执行,因此第一个延迟脚本会优于第二个执行,都会优于DOMContentLoaded事件.但是在现实当中,并不一定,最好只包含一个延迟脚本
c.defer属性只适用于外部脚本文件,嵌入的脚本文件会忽略这一属性

异步脚本(async)

作用:只适用于外部脚本文件,并告诉浏览器立即下载文件,async的脚本并不保证按照它们的先后顺序执行

<!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>
    <!-- 这里放内容 -->
  </body>
</html>

注意:不能保证第二个脚本文件在第一个脚本文件之前执行,设置async的目的是为了让页面不必等待两个脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM

总结:
1.async属性,不用等待脚本下载和执行,脚本在下载完成后异步执行,多个脚本执行顺序不确定
2.defer属性,告诉浏览器立即下载,但是脚本会在页面解析完毕之后执行,并且是有顺序的
3.如果两个属性都没有,那么脚本会在页面解析中，停止页面解析，立刻下载并且执行.
4.注意脚本文件的依赖性,哪些文件可以延迟加载,合理选择属性.

嵌入代码和外部文件的比较

最好使用嵌入外部文件,好处如下:
1.可维护性:将JavaScript代码和HTML代码分离开,便于开发
2.可缓存:浏览器可以根据具体的设置缓存链接所有外部JavaScript文件,如果有多个页面都使用了同一个文件,那么文件只需下载一次,加快页面加载的速度
3.适应未来

文档模式

<!-- HTML 5 -->
<!DOCTYPE html>

<noscript>元素

包含在<noscript>中的元素只有在以下情况下会被显示出来
1.浏览器不支持脚本
2.浏览器支持脚本,但脚本被禁用

<!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>
    <noscript>
      <p>本页面需要浏览器支持(启用)JavaScript
    </noscript>
   </body>
</html>

总结

上一篇下一篇

猜你喜欢

热点阅读