JavaScript 初认识

雨空集

已于 2024-03-18 09:45:50 修改

阅读量64

点赞数

分类专栏： # JavaScript 文章标签： javascript 开发语言笔记前端

于 2023-10-10 11:17:07 首次发布

本文链接：https://blog.csdn.net/Sakurapaid/article/details/133742720

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. JavaScript是什么？

1.1. 是什么

JavaScript是一种高级的、解释性的编程语言，用于在网页上添加交互性和动态效果。它是一种客户端脚本语言，意味着它在用户的浏览器中执行，而不是在服务器上执行。JavaScript可以与HTML和CSS配合使用，使网页变得更加动态和生动。

通过JavaScript，您可以对网页进行操作和控制，例如表单验证、按钮点击、动画效果、数据交互等等。它还可以与服务器进行通信，通过AJAX技术实现无刷新更新页面内容。JavaScript还支持面向对象的编程范式，使代码更加模块化和可维护。

JavaScript是一种通用的编程语言，不仅可以在网页中使用，还可以在服务器端运行，通过Node.js平台实现。它是一种易学易用的语言，具有广泛的应用领域，包括网页开发、移动应用开发、游戏开发等等。

1.2. 作用

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断
Chrome浏览器运行环
数据交互（获取后台的数据,渲染到前端）
服务端编程 (node.js)

1.3. 组成

ECMAScript: 规定了js基础语法核心知识。

Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

传送门：JavaScript权威网站

2. JavaScript体验代码

<!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>
  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>

效果图：