《JS高级程序设计》笔记

第一章 简介

JS实现由三部分组成

ECMAScript（核心）

DOM（文档对象模型）

BOM（浏览器对象模型）

 

ECMAScripe

  1. 主要是定义基本的语法，浏览器提供基本的ECMAScripe实现，同时也会提供语言的扩展，以便语言与环境之间对接交互。

  1. ECMAScripe与Web浏览器没有依赖关系。

 

DOM（文档对象模型）

  1. DOM是针对XML，但经过扩展用于HTML的应用程序编程接口。

  2. DOM把整个页面映射为一个多层节点结构，HTML和XML页面中的每个组成部分都是某种类型的节点。

  3. 通过DOM开发人员获得了控制页面和结构的主动权。

  4. 借助DOM提供的API开发人员可以轻松自如的删除、添加、替换或修改任何节点。

 

 

第二章 在HTML中使用JavaScript

<Script>元素

向HTML中插入JavaScript的主要方法就是使用<Script>元素

Script元素的属性

src（可选） : 表示包含要执行代码的外部文件

type (可选) : 表示编写代码使用的脚本语言 js基本都用。text/javascript

async (可选) ：表示应该立即下载脚本，但不妨碍页面中的其他操作

defer (可选) : 表示脚本可以延迟到文档完全被解析和显示之后再执行。 只对外部脚本文件有效

charset (可选): 表示通过src属性指定的代码的字符集

 

使用<scrpit>元素的方式：

  1. 直接在页面中嵌入JavaScript代码

    包含在<script>元素内部的JavaScript代码将被从上到下依次解释
    在解释器对<Script>元素内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载显示

    eg：

    <script type="text/javascript">
      function sayHi(){
        alert("Hi!");
      }
    </script>

  2. 引入外部的JavaScript文件

    如果使用外部JavaScript文件那么src属性就是必须的，这个属性的值是一个指向外部JavaScript文件的链接
    <script type="text/javascript" src="example.js"></script>
    不存在defer和async属性，浏览器就会按照<script>元素在页面出现的先后顺序对他们进行解析
    带有src属性的<script>元素不应该在<script>之间包含额外的JavaScript代码</script>
    与嵌入式代码一样，在解释外部JavaScript文件时，页面处理也会暂时停止

 

标签的位置

现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中，因此用户也会因为浏览器缩短了窗口空白的时间，感觉打开页面加快了

 

延迟脚本

将defer属性设置为 defer="defer" 只适用于外部脚本

这个属性的用途是表明脚本在执行时不会影响页面的构造，就是脚本会被推迟到整个页面都解析完了再执行

 

异步脚本

把 async属性设置为async="async" 只适用于外部脚本

标记为async的脚本不保证按照指定先后顺序执行

在使用 async 属性时候，确保两者之间互不依赖的重要性

 

嵌入代码与外部文件优点

可维护性

把所有的JavaScript文件都放在一个文件夹中，维护起来就轻松很多

可缓存

浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件

适应未来

 

<noscript>元素

这个元素可以包含能够出现在<body>中的任何HTML元素

<noscript>元素中的内容在以下情况出现

  1. 浏览器不支持脚本

  2. 浏览器支持脚本，但脚本被禁用了

posted @ 2020-08-17 09:17  呦啊哈  阅读(108)  评论(0)    收藏  举报