zoukankan      html  css  js  c++  java
  • JS高级程序设计第2章--精简版

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


     第二章:在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>元素中的内容。

  • 相关阅读:
    小程序官方请求封装
    小程序天/小时/分秒倒计时封装
    小程序不定数量左右滑动中间放大轮播图效果
    小程序换行符检测换行
    小程序点击图片重新排序写法
    基于webuploader.js的单图片上传封装
    VMware Fusion 11 序列号
    Ionic 4 beta + Capacitor beta 尝鲜
    C语言学习笔记之动态分配数组空间
    C语言学习笔记之获取文件长度
  • 原文地址:https://www.cnblogs.com/XiaoYEBLog/p/11167572.html
Copyright © 2011-2022 走看看