当前位置：首页 > news >正文

【JavaScript — 前端快速入门】 JavaScript 引入方式

news 来源：原创 2025/6/21 12:21:02

在这里插入图片描述

JavaScript

1. JavaScript 介绍

1.1 什么是JavaScript?

最初在网景公司，该语言命名为 LiveScript，当时网景公司认为，Java 作为当时最流行的编程语言，带有
“Java” 的名字有助于这门新生语言的传播，将 LiveScript 命名为 JavaScript.

其实 Java 和 JavaScript 之间的语法风格相去甚远，Java 和 JavaScript 的关系，就像雷锋和雷峰塔一样，就像印度和印度尼西亚一样，就像周杰和周杰伦一样，就像张三和张三丰一样，就像黑客和博客一样；

JavaScript 发展历史可以参考阮一峰大神的博客

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

1.2 JavaScript 和 HTML 和 CSS 之间的关系

在这里插入图片描述

HTML：网页的结构(骨)
CSS：网页的表现(皮)
JavaScript：网页的行为(魂)

在这里插入图片描述

2. JavaScript 快速上手

在 HTML 文件中，写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("弹了一个框");
    </script>
</body>
</html>

在这里插入图片描述

可以和用户进行交互，点击确认之后，弹框消失，再次刷新页面，弹框会再次弹出；

3.引入方式

JS 有3种引入方式，语法如下表格所示：

在这里插入图片描述

行内样式在之前的 HTML 的学习中，我们大概了解到，这其实是一个按钮，标签点击属性 onclick 被赋值为弹窗形式；只适合于写简单样式，只针对某个标签生效，缺点是不能写太复杂的 jS.
内部样式的具体表现形式在上文已列举出，这种写法过于冗余，不方便后期的维护，所以不常用；
外部样式，html 和 js 实现了完全的分离，是企业开发常用方式，简单写法如下：

在这里插入图片描述