第一讲_JavaScript概述及三种使用方式

最新推荐文章于 2024-07-18 10:24:18 发布

文大奇Quiin

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量395

点赞数 6

分类专栏： JavaScript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/wenqi1992/article/details/135892249

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

JavaScript概述及三种使用方式

1. JavaScript概述
- 1.1 JavaScript 的作用
2 JavaScript使用方式

1. JavaScript概述

JavaScript主页由三部分组成：

ECMAScript：规定 JavaScript 核心，定义了语言的基本语法和数据类型。
DOM（文档对象模型）：用于操作文档元素。
BOM（浏览器对象模型）：用于操作浏览器本身的功能。

1.1 JavaScript 的作用

数据校验：数据合法性的检查
数据交互：前后端数据交互
页面特效：根据用户的行为，呈现特定的响应
开发服务端：采用node.js开发服务端应用

2 JavaScript使用方式

2.1 行内使用

将JavaScript代码写在html的标签里，实际开发中基本不用。

<html>
  <style>
    div {
      background-color: palevioletred;
    }
  </style>
  <div class="outer" onclick="alert('hello, 我是行内JavaScript')">
    行内JavaScript
  </div>
</html>

2.2 内部使用

将JavaScript代码写在html文件里，放在script标签中，实际开发中使用较多。

<html>
  <style>
    div {
      background-color: palevioletred;
    }
  </style>
  <div class="outer">
    内部JavaScript
  </div>

  <script>
    let element = document.querySelector('.outer');
    element.addEventListener('click', () => {alert('hello, 我是内部JavaScript')});
  </script>
</html>

2.3 外部使用

将JavaScript代码单独写在js文件中，在html文件中通过script标签引入，实际开发中使用最多。

新建一个.js后缀的文件

let element = document.querySelector('.outer');
element.addEventListener('click', () => {alert('hello, 我是外部JavaScript')});

在html文件中，通过script标签引入js文件

<html>
  <style>
    div {
      background-color: palevioletred;
    }
  </style>
  <div class="outer">
    外部JavaScript
  </div>

  <script src="./test.js" type="text/javascript"></script>
</html>