在Web页面中使用JavaScript

最新推荐文章于 2024-08-17 18:01:29 发布

goodbye road

最新推荐文章于 2024-08-17 18:01:29 发布

阅读量345

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/bll1355/article/details/140353717

版权

一、使用<script>元素

向HTML页面中中插入JavaScript的主要方法，就是使用<script>元素。HTML4.01为<script>定义了6个属性，接下来介绍两个常用的属性：

1.src：可选。表示包含要执行代码的外部文件。

2.type：可选。表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。虽然text/javascript和text/ecmascript都已经不推荐使用，但人们一直以来使用都是text/javascript。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，但在type中设置这个值却可能导致脚本被忽略。考虑到约定俗成和最大限度的浏览器兼容性，目前type属性值依旧是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

二、直接内嵌JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("hello world");
    </script>
</body>
</html>

在使用<script>嵌入JavaScript代码时，记住不要在代码中的任何地方出现"</script>"字符串。例如，浏览器在加载下面所示页面的代码时就会产生一个错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("</script>");
    </script>
</body>
</html>

因为按照嵌入式代码的规则，当浏览器遇到"</script>"时，就会认为那是结束的</script>标签。当然，通过把这个字符串分隔为两部分可以解决这个问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("<\/script>");
    </script>
</body>
</html>

三、引用JavaScript文件

如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="helloworld.js"></script>
</body>
</html>