• 第2章在HTML中使用JavaScript


    2.1 <script>元素

             六个属性:

    1)       Async 表示应立即下载脚本,不妨碍页面其他操作,只对外部脚本文件有效。

    2)       Charset 表示通过src属性指定的代码的字符集。

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

    4)       Language 已废弃。

    5)       Src 表示包含要执行代码的外部文件。

    6)       Type 表示编写代码使用的脚本语言的内容内型。

    使用<script>元素方式:

    1)       页面嵌入JavaScript代码

    为<script>指定type属性,把JavaScript代码放在元素内部,如:

    <script type=”text/javascript”>

             Function sayHi(){

    alert(“Hi”);:

    }

    </ script>

    a)       JavaScript代码从上至下依次解释。

    b)       解释器对<script>元素内部所有代码求值完毕前,页面中的其余内容不会被浏览器加载或显示。

    c)        代码中任何地方出现</ script>会认为是结束的</ script>标签。可用转义字符“\”解决<\/ script>

    2)       包含外部JavaScript文件

    Src属性是必须的,属性的值是一个指向外部JavaScript文件的链接,如:<script type=”text/javascript” src=”example.js”></ script>

    a)       在解析外部JavaScript文件时,页面的处理也会暂时停止。

    b)       带有src属性的<script>元素不应在<script>和</script>标签之间包含额外的JavaScript代码。若包含嵌入的代码,只会下载并执行外部脚本文件,嵌入的代码会被忽略。

    c)        <script>元素的src可包含来自外部域的JavaScript文件。即它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整的URL,如:<script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></ script>

    d)       如不存在defer、async属性,浏览器会按照<script>元素出现的先后顺序依次进行排序。

    2.1.1标签的位置

    1)       所有的<script>元素放在<head>元素中,如:

    <head>

             <script type=”text/javascript” src=”example.js”>

    </ script>

                      </head>

                      全部的JavaScript代码都下载后,才呈现页面内容(浏览器遇到<body>标签才开始呈现内容),导致浏览器页面出现明显延迟。

    2)       JavaScript引用放在<body>元素中页面内容的后面,如:

    <head>

             </head>

             <body>

                     <script type=”text/javascript” src=”example.js”>

    </ script>

             </body>

    浏览器窗口显示空白页面时间缩短。

    2.1.2延迟脚本

    1)       defer属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer,即浏览器立即下载,但延迟执行。

    <script type=”text/javascript” src=”example.js” defer=”defer”>

    </ script>

    2)       延迟脚本不一定按顺序执行,最好只包含一个延迟脚本。

    3)       Defer属性只适用于外部脚本文件,因此支持HTML5的实现会忽略嵌入脚本设置的defer属性

    2.1.3异步脚本

    1)       async属性只适用于外部脚本,并告诉浏览器立即下载文件,但标记为async的脚本并不保证按照指定顺序执行。

    <script type=”text/javascript” async src=”example.js” >

    </ script>

    2)       指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM。

    3)       异步脚本一定会在页面的load事件前执行,可能会在DOMContentLoaded事件触发之前或之后执行。

    2.2嵌入代码域外部文件

    1)       尽可能使用外部文件来包含JavaScript代码。

    2)       优点:  1.可维护性:能集中精力编辑JavaScript代码。

    2.可缓存:加快页面加载速度。

    3.适应未来。

    2.3文档模式

    2.4<noscript>元素

    1)       1浏览器不支持JavaScript时让页面平稳地退化。

    2)       显示条件:1.浏览器不支持脚本。

       2.浏览器支持脚本,但脚本被禁用。

    3)       启用了脚本,浏览器不显示<noscript>元素中任何内容。

  • 相关阅读:
    HTML<lable for="">标签的for属性。
    Microsoft_Office_Word_遇到问题需要关闭。我们对此引起的不便表示抱歉,问题解决方案
    AnyChart的资料,以后看
    JQquery 鼠标悬浮提示
    如何在SQL Server查询语句(Select)中检索存储过程(Store Procedure)的结果集?
    JQuery UI selectable
    SqlServer 动态添加服务器
    基于CyberGarage库的dlna开发(android)
    自定义实现圆形播放进度条(android,飞一般的感觉)
    Lance老师UI系列教程第一课>QQ设置界面的实现(android)
  • 原文地址:https://www.cnblogs.com/wjw1997/p/6422733.html
Copyright © 2020-2023  润新知