zoukankan      html  css  js  c++  java
  • 2.在HTML中使用JavaScript

    1. script元素

    向HTML中插入JavaScript的主要方法,就是使用script标签

    HTML 4.01为script标签定义了6个属性

    • async:可选,表示异步,立即下载脚本,但是不妨碍页面中其它操作。只对外部脚本文件有效
    • charset:可选,表示通过src属性指定的代码的字符集。大多数浏览器会忽略他的值
    • defer:可选, 表示脚本可以延迟到文档完全被解析之后再执行,只对外部文件有效
    • language:已废弃,原用来表示编写代码所使用的脚本语言
    • src:可选,表示要执行的代码外部文件
    • type:可选,可以看成是language的代替属性,表示编写代码使用的脚本语言的内容类型。默认为 text/javascript

    使用script标签的方式:直接在页面中嵌入JavaScript代码和包含外部文件

    在使用script标签嵌入JavaScript代码时,需要为该标签指定type属性,然后将JavaScript代码放入即可

    <script>
        function sayHi(){
            alert("Hi~")
        }
    <script>
    

    注意:

    1. 如果要使用外部JavaScript文件,则script标签的src属性就是必须的,这个属性的值就是一个指向外部JavaScript文件的链接

      <script type="text/javascript" src="example.js"></script>
      
    2. 在使用嵌入式JavaScript代码时,切忌不要在任何地方出现“script”字符串,因为浏览器会将其解析为结束标签

    eg:错误的写法(会报错)

    <script>
    	function sayScript(){
            alert("</script>");
        }
    </script>
    

    eg:正确的写法(通过转义字符转义)

    <script>
    	function sayScript(){
            alert("<\/script>");
        }
    </script>
    
    1. 包含在script标签中的代码,将会被从上到下依次解释

    2. 标签的位置

    按照传统的做法,所有的script标签都要放在页面的head标签中。

    这种做法意味着页面要等全部的JavaScript代码都被下载和执行完成以后,才开始呈现页面的内容。这无疑会导致页面页面在加载的时候出现延迟。影响用户体验。为避免这个问题,现代的web应用程序一般把全部的JavaScript放在标签的最后面

    <!DOCTYPE>
    <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>
    

    3.延迟和异步加载

    defer属性:脚本会被延迟到整个页面都解析完成之后再运行,因此,在script标签中设置该属性,等于告诉浏览器,立即下载,延迟执行

    async:只适用于外部脚本文件,并告诉浏览器立即下载文件,但是并不保证按照指定它们的先后顺序执行

    4.嵌入代码与外部代码的区别

    一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码

    外部文件含有如下优点:

    • 可维护性强
    • 可缓存:如果有两个文件使用同一个JavaScript文件,那么该JavaScript文件只会被加载一次,可以加快页面加载速度
    • 适应未来

    5.noscript元素

    包含noscript的元素只有在以下情况下才会显示出来

    • 浏览器不支持脚本
    • 浏览器支持脚本,但是脚本被禁用

    只有符合以上条件,noscript标签中的内容才会显示出来

    <!DOCTYPE>
    <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>
    

    这个页面会在脚本无效的情况下向用户展示一条信息。而在启用了脚本的浏览器中,用户永远也不会看到它,即使它是页面的一部分

    6. 小结

    1. 包含外部的JavaScript文件的时候,script标签必须使用src属性指定外部文件链接
    2. 在不使用异步和延迟加载(async,defer)的情况下,所有script标签中的元素都会按照他们在文件中出现的顺序依次依次加载,只有解析完前面的script标签之后,才会解析后面的
    3. defer属性可以让脚本在文档完全呈现之后再去执行,延迟脚本总是按照他们的顺序执行
    4. async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现,但是不能保证异步脚本按照他们原来的顺序
    5. noscript标签可以指定在不支持脚本的浏览器中显示替代的内容,但是在启用了脚本的浏览器中,浏览器不会显示该标签中的任何内容
  • 相关阅读:
    生日悖论
    定时执行自动化脚本-(一)导入保存jmeter参数至文件的jar包
    Jenkins+Gradle+Docker打docker镜像包上传至s3
    Jenkins与Git持续集成&&Linux上远程部署Java项目
    Jenkins+Gradle+Sonar进行Java项目代码分析
    创建Jenkins构建触发器,代码提交至gitLab即自动触发构建
    centos7安装docker
    Jenkins+docker自动部署
    通过堡垒机连接内网服务器
    idea配置git,查看git代码&拉取git项目至本地
  • 原文地址:https://www.cnblogs.com/mapengfei247/p/11079944.html
Copyright © 2011-2022 走看看