前言:这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了。。所以还是博客好==


第二章:在HTML中使用JavaScript


2.1 <script>元素:

  即在HTML页面插入JS的主要方法。HTML4.01定义了以下JS属性(主要):

  • async :表示立即下载脚本(只对外部脚本文件有效),但不妨碍页面中的其他操作。
  • defer : 表示脚本可以延迟到文档完全被解析和显示之后再执行(只对外部脚本文件有效)。
  • src : 表示包含要执行代码的外部文件。
  • type :表示编写代码使用的脚本语言的内容类型,如 type="text/javascript",但不写默认也为它。

  使用<script>元素的方式:

  • 页面嵌入JS代码: function.......
  • 外部JS文件: src="example.js"

2. 1.1 <script>元素位置:

  所有<script>元素都应放在页面的<head>元素里,意味着必须的等到全部JS代码都被下载、解析、执行完成以后才能开始呈现页面的内容(遇到<body>才开始呈现)。

  !!!注意,在需要很多JS代码的页面里这样子会延迟页面的呈现,所以下载一般会把全部JS代码放在<body>页面内容的后面!

2.1.2 延迟脚本defer:(HTML4.01)

  defer="defer" 这个属性只适用于外部脚本文件。推荐把延迟脚本放在页面底部!(在几个延迟脚本的情况下,可能可以按照先后顺序执行)

2.1.3 异步脚本aysnc:(HTML5)

  直接写一个async,XHTML中要写async="async",这个属性只适用于外部脚本文件,不让页面等待脚本下载和执行,从而异步加载页面其他内容。(在几个延迟脚本的情况下,不可以保证按照先后顺序执行)

2.1.4 XHTML中的使用:

  XHTML即可以站超文本标语语言,意思就是超级严格!!!用 type="application/xhtml+xml" 才会触发XHTML模式

  例如使用HTML实体(&lt;)代替小于号 <

  但这样子是不是太麻烦?

  所以我们可以在<script> 后加上<![CDATA[JS代码]]>来包含JS代码,这样子可以不用解析了。如果不需要这个CDATA,那就在<![CDATA[JS代码]]>的前后加上 // 就行了。

2.1.5 在不支持JS的浏览器中使用<script>元素会把JS代码内容全部显示在页面,所以我们可以把JS代码包含在一个HTML注释中,即

  <script><!--

    function sayHi () {

      alert ("Hi");

    }

  //--></script> 

2.2 嵌入JS方式的选择:

  最好还是使用外部文件,优点是:

  • 可维护性
  • 可缓存:几个页面需要使用同一个文件,那这个文件只需下载一次~
  • 适应未来:即XHTML和HTML包含外部文件的语法都是相同的。

2.3 文档模式(很重要!面试经常有)

  通过使用文档类型(doctype)切换实现。主要有两种文档模式:(模式主要影响CSS内容的呈现和可能影响到JS的解释执行),还有一个准标准模式,我暂不讨论。

  • 混杂模式:忽略DTD声明,浏览器用自己的方式解析代码。以一种先后兼容的方式显示,会让IE的行为与IE5相同,IE5包含非标准特性,以防止老站点无法工作。
  • 标准模式:DTD声明定义了标准文档的类型后,浏览器按W3C标准解析执行代码。让IE的行为更接近标准行为,IE6及以上都支持标准模式。

  混杂模式写法: 不想写,因为本来就不推荐这种模式!!!

  标准模式写法:

  • HTML 5 :<!DOCTYPE html>
  • HTML 4.01 严格型: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0 严格型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.4 <noscript>元素:

  使用这个元素可以产生以下两种效果:(可以在脚本无效的情况下向用户显示一套消息~)

  • 在浏览器不支持脚本的情况下会显示<noscript>元素中的内容。
  • 在浏览器支持脚本但被禁用的情况下会显示<noscript>元素中的内容。

JS高级程序设计第2章--精简版的更多相关文章

  1. JS高级程序设计第4章--精简版

    前言:纯手打!!!按照自己思路重写!!!这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第四章:变量.作用域和内存问题 4.1 基本类型和引用类 ...

  2. JS高级程序设计第3章--精简版

    前言:纯手打!!!按照自己思路重写!!!这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第三章:基本概念(语法.数据类型.流控制语句.函数) 3 ...

  3. js 高级程序设计 第三章学习笔记——Number数据类型需要注意的事项

    1.浮点数值 虽然小数点前面可以没有整数,但是并不推荐这种写法. 由于保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机地将浮点数值转化为整数数值.显然,如果小数点后面没 ...

  4. 读书笔记 - js高级程序设计 - 第五章 引用类型

      引用类型 和 类 不是一个概念 用typeof来检测属性是否存在 typeof args.name == "string"  需要实验 访问属性的方法 .号和[] 一般情况下要 ...

  5. JS高级程序设计第3章读书笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js 高级程序设计 第四章学习笔记

    问题:怎么才能形象的理解堆栈空间? 1. 声明变量 使用 var 声明的变量会自动被添加到最接近的环境中.在函数内部,最接近的环境就是函数的局部 环境:在 with 语句中,最接近的环境是函数环境.如 ...

  7. 读书笔记 - js高级程序设计 - 第十一章 DOM扩展

      对DOM的两个主要的扩展 Selectors API HTML5  Element Traversal 元素遍历规范 querySelector var body = document.query ...

  8. 读书笔记 - js高级程序设计 - 第七章 函数表达式

      闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...

  9. 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计

      EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value   前三个值的默认值都为false   ...

随机推荐

  1. eclise配置tomcat出现服务Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4 and Java EE 5 Web modules

    当部署项目Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, 1.5 and Java EE 5 Web modules错;解决方案,如下面: 空 ...

  2. Node.js && Angular && TypeScript 环境安装与更新

    安装 Node.js 下载并安装Node.js Angular 执行命令 npm install -g @angular/cli 参考资料: angular quickstart TypeScript ...

  3. x:Static

    用途:访问代码中的变量等 后台定义一个变量 public partial class GetStaticFromBackgroundCode : Window { public static stri ...

  4. 隐藏system窗口你也行(就是那个cmd窗口,好多方法)

    新process的启动,可以通过system(const char*)函数启动另外一个程序,但是有一个小问题,就是每次执行system函数的时候,都会弹出dos窗口(命令行嘛~~~),有没有什么方法能 ...

  5. adb 命令连接指定设备

    试用条件: 当有多个设备online时: 步骤: 1. 通过adb devices命令获取所有online设备的serial number C:\Users\Administrator>adb ...

  6. 加载dll、lib库(例子的代码很全)

    是关于如何加载dll或lib库的.可以看这篇bog   Qt调用dll中的功能函数点击打开链接 **************************************************** ...

  7. Win10《芒果TV》更新v3.8.30流星版:优化稳定性、升级无边框播放体验

    随着暑假到来,大波王牌综艺和青春电视剧热浪来袭,Win10版<芒果TV>全平台同步更新流星版v3.8.30,进一步提升稳定性,巩固播放体验,升级剧场模式和画中画无边框体验,我们在芒果等你. ...

  8. android adb socket 通信

    今天遇到一个问题:pc客户端和android的App通信,心跳通道(心跳包27个字节,是一个业务空包)在部分pc上总是会超时(5秒超时),nagle算法也给禁用了,pc端时按按量发送心跳的,怀疑来怀疑 ...

  9. Windows 10 版本信息

    原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服务模型. 半年频道 ...

  10. 海康SDK编程指南

    转至心澄欲遣 目前使用的海康SDK包括IPC_SDK(硬件设备),Plat_SDK(平台),其中两套SDK都需单独调用海康播放库PlayCtrl.dll来解码视频流,返回视频信息和角度信息.本文仅对视 ...