JavaScript基础（概述、组成、引入方式）

最新推荐文章于 2024-06-24 14:30:19 发布

刘某人...

最新推荐文章于 2024-06-24 14:30:19 发布

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/Battles2/article/details/127058058

版权

1.概述

Javascript 是Web中一种功能强大的脚本语言，常用于给网页添加各式各样的动态功能，它不需要进行编译，直接嵌入HTML页面中就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

2.Javascript 的组成

Javascript 是由ECMAScript 、DOM、BOM 共3个部分组成的。下面对这3个组成部分进行简单介绍。

（1）ECMAScript：Javascript 的核心。ECMAScript 规定了 Javascript 的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套 Javascript 语法工业标准。

（2）DOM （Document Object Model ，文档对象模型）：是W3C组织推荐的处理可扩展置标语言（Extensible Markup Language，XML）的标准编程接口，通过DOM 提供的接口，可以对页面上的各种元素进行操作（例如修改大小、位置、颜色等）。

（3）BOM（Browser Object Model ，浏览器对象模型）：它提供了独立于内容、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行擦欧总（例如弹出框、控制浏览器导航跳转等）。

3.Javascript 代码引入方式

在HTML文档中，引入JavaScript 代码有3种方式，分别是行内式、内嵌式和外链式，下面分别进行介绍：

（1）行内式：

行内式是指将单行或少量的 Javascript 代码写在HTML标签的事件属性中。下面通过代码演示：行内式引入Javascript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘某人...的行内式引入JS网站</title>
</head>
<body>
    <input type="button" value="点击" onclick="alert('刘某人...最帅')" />
</body>
</html>

结果如图所示：

上述代码中，第8行代码的 onclick 属性值就是Javascript 代码。alert（“行内式”）的作用就是当单击结果图中的 “ 点我 ” 按钮时，会自动弹出一个对话框。

实际开发当中，使用行内式需要注意以下4点：

① 注意单引号和双引号的使用。在HTML 中推荐使用双引号，而Javascript 推荐使用单引号

② 行内式可读性较差，尤其是在HTML 中编写大量 Javascript 代码时，不便于阅读。

③ 在遇到多层引号嵌套的情况时，非常容易混淆，导致代码出错。

④ 行内式只有在临时测试或者特殊情况下才使用，一般情况不推荐使用行内式。

（2）内嵌式：

在HTML文档中，可以通过<script>标签及其相关属性引入 Javascript 代码。当浏览器读取到<script>标签时，表示<script>标签中包含的是 Javascript 脚本。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘某人...内嵌式引入JS</title>
    <script type="text/javascript">
        alert('内嵌式');
    </script>
</head>
<body>

</body>
</html>

结果如图：

在上述代码中，第7行代码是JavaScript 代码，末尾的分号 “ ；” 表示该语句结束，后面可以编写下一条 JavaScript 语句。

（3）外链式：

外链式是指将 JavaScript 代码写在一个单独的文件中，一般使用 “ .js ” 作为文件的扩展名，在HTML文件中使用<script>标签进行引入JavaScript 文件。外链式适合JavaScript 代码量比较多的情况。

外链式有利于HTML 页面代码结构化，把大段的 JavaScript 代码独立到HTML 页面之外，既美观，也方便文件级别的代码复用。需要注意的是，外链式的<script>标签内不可以编写JavaScript 代码。

在HTML 文件中使用外链式引入JS 文件的方式如下：

<script type="text/javascript" src="JS文件路径"></script>

接下来先创建一个名叫jsDemo 的JS文件，代码如下：

alert('外链式')

然后创建一个HTML文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘某人...</title>
    <script type="text/javascript" src="jsDemo.js"></script>
</head>
<body>

</body>
</html>

第6行代码通过外链式引入了 jsDemo.js 文件。

运行结果如图：