在HTML中使用JavaScript

最新推荐文章于 2023-09-07 13:52:03 发布

南张门

最新推荐文章于 2023-09-07 13:52:03 发布

阅读量272

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/haochangdi123/article/details/76252942

版权

Javascript 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

1.JavaScript 用法

在HTML中必须将js代码放在<script type="text/javascript"></script>标签中
<script type="text/javascript"></script>标签可以放置在 HTML 页面的 <body> 和 <head> 部分中

2.关于script元素的属性

属性         值               含义
async       async       规定异步执行脚本,就是立即下载脚本，不妨碍其他的操作（仅适用于外部脚本）。
charset     charset     规定在脚本中使用的字符编码，大部分浏览器会忽略，很少使用（仅适用于外部脚本）。
defer       defer       规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。
src         URL         规定外部脚本的 URL。
type        MIME-type   规定脚本的 MIME 类型。

3.使用

    <script type="text/javascript">
                function say(){
                    alert('hi');
                }
            </script>

    但是如果你想弹出一个</script>标签的字符串，那么浏览器会误解成JS代码已经结束了。解决的方法，就是把字符串分成两个部分，通过连接符‘+’来连接。

            <script type="text/javascript">
                alert('</scr'+'ipt>');
            </script>

    2.外部引入js文件
        一般来说，JS代码越来越庞大的时候，我们最好把他另存为一个.js文件，通过src引入即可。它还具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展的特点。
        <script type="text/javascript" src="script元素.js"></script>
        引用外部文件的好处：
            1.可维护性，将js放在一个文件中，维护起来会很方便
            2.可缓存，浏览器会根据设置缓存链接的所有的外部js文件，也就是说两个页面使用一个js文件，浏览器只用加载一次
            3.适应未来。

4.标签的位置

按照常规，我们会把<script>标签存放到<head>...</head>之间。但有时也会放在body之间。
如果放在head中，就意味着要等js全部加载完后才会加载页面内容，这也就导致会出现一段时间的空白页面。为了避免这种情况将js放在body中.

5. 延迟脚本

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="a1.js" defer="defer"></script>
        <script type="text/javascript" src="a2.js" defer="defer"></script>
</head>

我们将js的引用放在head中，利用defer属性进行延迟加载，但是有两个js都有defer属性时，顺序是不一定的，也就是说可能先加载a2.js，并且defer属性只用于引用外部的js。所以还是放在body中比较好。

6.异步脚本

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="a1.js" defer="defer"></script>
        <script type="text/javascript" src="a2.js" defer="defer"></script>
    </head>

异步加载，是适用于外部引用文件，因为是异步的，所以a2.js是很有可能会在a1.js，所以js之间是不能有依赖的关系的。其实异步的目的是让页面的其他的内容不用等待这两个js的加载完成。

7.标签

使用的情况：
    1.浏览器不支持js脚本
    2.浏览器支持，但是脚本被禁用
<nosciprt>可以平稳退化不支持JavaScript处理：
例如：
    <body>
        <noscript>
            抱歉该浏览器不支持js
        </noscript>
    </body>