【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript )

韩曙亮

发布于 2024-03-12 13:04:16

1100

发布于 2024-03-12 13:04:16

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 书写方式

与 CSS 类似 , JavaScrip 有 3 种书写方式 , 分别是 :

内联 ( Inline ) JavaScript 脚本 ;
内嵌 ( Internal ) JavaScript 脚本 ;
外部 ( External ) JavaScript 脚本 ;

1、内联 JavaScript

将单行或少量 JavaScrip 代码直接在 HTML 标签元素中的 onclick / onload / onmouseover 等事件中 , 这种 JavaScrip 书写方式称为 " 内联 JavaScript " ;

内联 JavaScrip 优缺点 :

优点 : 用法比较直观 , 如果只需要进行简单的 JavaScrip 交互 , 适合使用该书写方式 ;
缺点 :
- 可读性差 , 维护难度高 , 当代码量增大时几乎不可维护 ;
- 将 JavaScript 与 HTML 结构混合在一起耦合性很高 ;
- 引号容易出错 , 尤其是多层引号嵌套匹配时 , 需要使用双引号与单引号交错使用 ;

代码示例 : onclick 属性值写在双引号中 , 如果在双引号中写一行 JavaScrip 脚本 , 涉及到字符串内容时 , 使用单引号 ;

<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">
</body>

</html>

执行效果 :

点击按钮后 , 弹出如下对话框 :

2、内嵌 JavaScript

在 HTML 文件的 <head> 或 <body> 标签中 , 可以使用 <script> 标签来包含 JavaScript 代码 , 这种书写方式称为内嵌 JavaScript ;

内嵌 JavaScrip 优缺点 :

优点 : 该书写方式可以在一个位置集中管理 JavaScrip 代码 , 比内联 JavaScript 方式维护性更强 ;
缺点 : JavaScript 脚本代码与 HTML 标签布局结构写在一个 HTML 页面中 , 不利于大型项目或多人协作项目的维护 ;

代码示例 :

<head>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>
</head>

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>

</html>

展示效果 :

刷新页面后 , 即可弹出对话框 :

3、外部 JavaScript

首先 , 将 JavaScript 脚本代码写在一个单独的 .js 源码文件中 ,

// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");

然后 , 在 HTML 文件中使用 <script> 标签的 src 属性来引用它 ,

<script src="my.js"></script>

这种书写方式称为 " 外部 JavaScript " ;

注意 : 引入 js 文件时 , <script src="my.js"></script> , script 标签要空着 , 不能写任何代码内容 ;

外部 JavaScrip 优缺点 :

优点 :
- HTML 文件展示标签结构信息 , JavaScript 脚本代码负责行为信息 , 维护性高 , 代码可重用 ;
- JavaScrip 代码量较大时 , 适合使用 ;
缺点 : 获取 JavaScrip 脚本文件需要进行额外的 HTTP 请求 ;

代码示例 :

JavaScrip 脚本代码 :

// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");

HTML 网页代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        //alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>

    <!-- 3. 引入 外部 ( External ) JavaScript 脚本 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>

</html>

展示效果 :