【读书笔记】JavaScript高级编程（一）

时间 2019-11-12

原文原文链接

书中第2章，在HTML中使用JavaScript摘要总结 javascript

2.1 <script>元素 html

包含在<script>元素内的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的全部代码求值完成之前，页面中的其他内容都不会被浏览器加载或显示。浏览器

在使用<script>嵌入JavaScript代码时，任何地方不能出现"<script>"字符串。
<script type="text/javascript">
function sayScript(){
      alert("</script>"); //此处会报错
    }
</script>
可将"</script>"分开写，避免错误。
<script type="text/javascript">
    function sayScript(){
        alert("</scr" + "ipt>");
    }
</script> less

src属性能够指向当前HTML页面所在域以外的某个域中的URL，例如
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script> spa

2.1.1 标签的位置设计

按照惯例，全部的<script>元素都应该放在页面的<head>元素中，但是，这将意味着必须等到所有JavaScript代码都被下载、解析和执行完成之后，才能呈现页面内容（浏览器在遇到<body>标签时才开始呈现内容）。对于须要不少JavaScript代码的页面来讲，会致使呈现页面时出现的延迟现象。为了不这种现象发生，能够把所有JavaScript引用发在页面的内容后面或增长defer属性，以下例所示：
<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>
htm

2.1.3 在XHTML中的用法 ip

某些JavaScript代码在HTML中是有效的，但在XHTML中则是无效的：
<script type="text/javascript">
function compare(a, b) {
      if (a < b) {
          alert("A is less than B");
        } else if (a > b) {
          alert("A is greater than B");
        } else {
          alert(" A is equal to B");
        }
    }
</script>
代码中的比较语句a < b 中的小于号（<）在XHTML中将被看成开始一个新标签来解析。可是做为标签来说，小于号后面不能跟空格，所以就会致使语法错误。
避免相似语法错误的方法有两个。一是用相应的HTML实体（<）替换小于号（<）,替换后的代码以下：
<script type="text/javascript">
function compare(a, b) {
      if (a < b) {
          alert("A is less than B");
        } else if (a > b) {
          alert("A is greater than B");
        } else {
          alert(" A is equal to B");
        }
    }
</script>
这样虽然能够运行，但不便于理解。所以可用第二种方法，用一个CData片断来包含JavaScript代码。在XHTML（XML）中，CData片断是文档中的一个特殊区域，这个区域中能够包含不须要解析的任意格式的文本内容。
<script type="text/javascript">
//某些浏览器不兼容XHTML，于是不支持CData片断，可使用JavaScript注释将CData标记注释掉
//<![CDATA[
function compare(a, b) {
      if (a < b) {
          alert("A is less than B");
        } else if (a > b) {
          alert("A is greater than B");
        } else {
          alert(" A is equal to B");
        }
    }
//]]>
</script> 文档

2.3 <noscript>元素

这个元素能够包含可以出如今文档<body>中的任何HTML元素——<script>元素除外，包含在<nosript>元素中的内容只有在下列状况下才会显示出来：
1.浏览器不支持脚本
2.浏览器支持脚本，但脚本被禁用。
<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>
<noscript>
          <p>本页面须要浏览器支持（启用）JavaScript</p>
</noscript>
    </body>
</html>

以上全部内容均摘自图书《JavaScript 高级程序设计（第2版）》[美] Nicholas C.Zakas 著李松峰曹力译