学习js第一天

原创已于 2025-02-26 23:58:40 修改 · 683 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#js #html5 #css #javascript

于 2025-02-26 23:49:55 首次发布

# 学js第一天

从黑马老师的js课程，也就是这个链接开始
JS基础Day1-02-JavaScript简介和体验_哔哩哔哩_bilibili
我才学到了很多以前从来不知道的软件snipaste 这个截图特别好用，免费的，我总结一下，将这个软件打开的时候，f1就是选择截图区间，然后f3啪唧一下就把截图定在屏幕上了，不会被覆盖还可以调整大小，取消点击图片直接esc就取消掉了，非常方便。第二个软件就是xmind，也是免费版，进去可以快速做思维导图，整理笔记非常高效，回车是同级，tab是子级。分分钟就梳理完毕了，哎我去年考研咋没发现这个软件呢。
在这里插入图片描述
第三个是做学习笔记的软件，读的是readme.md文档,这个软件叫typroa，我在csdn上找到的原版图文教程，链接如下。
[link]( | 2024Typora最新版免费激活使用教程（新旧版可用）_typora激活-优快云博客).
然后我发现csdn也可以用写好的readme.md文件可以直接导入（就是用typora工具），让我探索一下下次直接在,md里面写。
暂时没有发现问题，发现问题我会再更新。

第四个呢，是在vscode里面下载live sever,这个可以直接在vs code里面边打，边在右边浏览器实现
在这里插入图片描述

选择这个选项，就可以打开浏览器放到右边啦
在这里插入图片描述

先从简介开始学起

**
在这里插入图片描述

从简介中了解到，js是一门运行在浏览器(也就是客户端）的编程语言，主要就分为两部分，一部分是ecmascript的基础语法，类似c c++等底层语法逻辑很像，都是从变量啊，循环啊等等等等。另一部分就是webapis 里面主要是dom bom，dom主要是对文本的操作比如，留言啊评论啊等等

html css js一起配合做交互效果，有输入有输出，有输入有反馈

在这里插入图片描述
从老师这里看到他用html写了四个按钮，给她css样式设置成了粉色，并且只有第一个按钮引用了样式，本身应该只有第一个是粉的。
然后接下来理解js，老师说第一句话是获取4个按钮，也就是把四个按钮抓过来，对什么做操作总得先获取东西（数据），我总体理解我命名一个变量去接受值（也就是数据，在这里对应就是按钮，那推测let 变量名可能是命名变量的格式。）
第二句就是设置点击事件（用for循环设计）这里我没往下看，暂时我是这么理解:就跟c语言循环访问数组获取数据似的，从数组下标挨个访问获取到四个按钮，长度就是按钮数量。这里还是涉及到了很多ecma的基础语法的知识。让我们获取到的东西可以点击他.
第三步就是function后面的语句，老师说是把pink的这个样式的类获取过来，清除粉色，这下有点一知半解，紧接着最后一句，做到点谁谁变粉色，将他的类名设置成粉色，这里我可以理解成，我们也是先要获取样式，然后再更改或赋值吗。因为他两个document.query的方法是一样的，感觉都是获取。待后续课程解答。
接着我尝试手敲还原，尝试按照我的思路
在这里插入图片描述
没完全还原出来，而且我发现queryselectorall的all的a必须是大写A，不然不认，括号里面的东西必须是单引号，接着就是点击事件不会设置,bts没有理解是什么，还有忘记了类名，紧接看下一课。
最后更改

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

有html css js三者联合才能做出更好的交互页面，前端三件套必须掌握才能入前端。且js这些底层语言的逻辑都很像。用c去理解还是较好理解。
学到了一个知识平台mdn,网站，类似菜鸟驿站了看来，可以查询相关知识。

功能快捷键（这个是原来打开markdown编辑器就有的我顺便记录熟练使用一下）

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
链接: link.