学习JavaScript（一）从这里开始-CSDN博客

本文链接：https://blog.csdn.net/2301_76723323/article/details/132280377

学习JavaScript，从这里开始

1、什么是JavaScript？
2、JavaScript的起源
3、认识JavaScript。
4、JavaScript书写注意事项
5、写JavaScript代码前的一些准备工作（重要）
6、你的第一个JavaScript。

1、什么是JavaScript？

JavaScript是在浏览器上运行的编程语言

2、JavaScript的起源

诞生于1995年，他的出现主要应用于网页中的前端检验

3、认识JavaScript。

JavaScript的实现应该由以下三个部分组成:
①ECMAScript 语言的标准
②DOM 如何通过JS来操作网页
③BOM 如何通过JS来操作浏览器

4、JavaScript书写注意事项

JS内容写在的上边

5、写JavaScript代码前的一些准备工作（重要）

①编辑器

我个人使用的VScode，下载教程网上有很多大致步骤也都一样这里提醒以下一的下载到D盘哦，包括下载成功安装的时候也要记得修改一下路径到D盘
https://blog.csdn.net/weixin_44950987/article/details/128129613?ops_request_misc=&request_id=&biz_id=102&utm_term=vscode%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-128129613.nonecase&spm=1018.2226.3001.4187

②插件

点击图中用红线圈住的地方进项插件安装
需要安装的插件如下

汉化插件

同步修改前后

实时预览运行效果，只要代码有变化保存代码后都会自动刷新

控制vscode中的文件管理树目录显示图标
![在这里插入图片描述](https://img-blog.csdnimg.cn/5989434cd70044ea852dc839f80363f8.png

③出现模板

先输入英文的感叹号，点击Enter键即可。
在这里插入图片描述

④运行你的代码

鼠标右键代码页面空白处出现选择框，点击选择红线框住的选项即可这里上面的插件全部安装完成才可以出现此按钮，并且顺利运行
在这里插入图片描述

6、你的第一个JavaScript。

快点试一下你的第一个JavaScript吧！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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>