前提准备

辉哥大约 2 分钟

JavaScript学习前提

以下为学习过程中的极简提炼笔记，以供重温巩固学习

JavaScript学习准备

准备工作

已完成html5标签学习
已完成css的选择器、技巧与特性、元素属性学习，已熟悉css语法键值
已熟悉使用编译器：vscode

学习目的

认识JavaScript、了解JavaScript组成，学会查技术链文档

认识JavaScript

JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机逻辑交互
作用包括

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

JavaScript 的组成

JavaScript由ECMAScript( 基础语法 )、web APIs （DOM、BOM）组成

ECMAScript: 规定了js基础语法核心知识。包括：变量、常量、分支语句、循环语句、对象等等
Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

学会查阅技术链文档

MDN-JavaScript : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
MDN: https://developer.mozilla.org/zh-CN/

JavaScript体验

语法格式案例

JavaScript体验

<head>
  <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>