当前位置： 首页 > news >正文

JS第一课简单看看这是啥东西

news 2026/3/27 9:58:13

1.什么是JavaScript

JS是一门编程语言，是一种运行在客户端(浏览器)的编程语言，主要是让前端的画面动起来，注意HTML和CSS不是编程语言，他俩是一种标记语言。JS只要有浏览器就能运行不用跟Python或者Java一样上来装一个jdk或者Python解释器

2.JS是干啥的

  1. 网页特效，比方说用户鼠标移入了这个区域我给他显示啥，移出了区域不现实这种，随着用户操作让画面动起来
  2. 表单验证，主要是对表单的数据进行各种校验，比方说我注册账号，你这个账号或者密码是不是符合规范的
  3. 数据交互，主要是发送请求到后端然后从后端拿到数据在配合HTML和CSS渲染到前端画面上
  4. 服务端编程，node.js，这也就是我作为后端总是调侃前端开发人员，我把数据库信息全都给你，你自己连接数据库自己看着玩吧，我下班了哈哈哈，你们js是世界上最好的编程语言你加油

JS由哪些部分组成

这个图是B站来的

  1. ECMAScript 就是一些语法规范，就是一些什么变量声明啊完了for循环咋写，咋新建对象啊啥的
  2. 这个web apis里面的dom和bom是啥目前还不清楚以后回来补充
  3. 查询知识小网站
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 这个网站是比较权威的，可以直接搜索js的相关知识。

小练习 点击画面上的按钮点击哪一个哪一个变色

<!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>迟测试</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(){// 如果有一个按钮被点击了那就把别的按钮的pink颜色变成空让他没有颜色document.querySelector('.pink').className = ''// 把被点击的按钮的pink颜色变成 pinkthis.className = 'pink'})}</script>
</body></html>

结果

在这里插入图片描述

相关文章：

JS第一课简单看看这是啥东西

1.什么是JavaScript JS是一门编程语言&#xff0c;是一种运行在客户端(浏览器)的编程语言&#xff0c;主要是让前端的画面动起来&#xff0c;注意HTML和CSS不是编程语言&#xff0c;他俩是一种标记语言。JS只要有浏览器就能运行不用跟Python或者Java一样上来装一个jdk或者Pyth…...

编程日记 2024/2/2 19:47:40

2023年常用网络安全政策标准整合

文章目录 前言一、政策篇（一）等级保护（二）关键信息基础设施保护（三）数据安全（四）数据出境安全评估（五）网络信息安全（六）应急响应（七）网络安全专用产品检测认证制度（八）个人信息保护（九）商用密码二、标准篇前言 2023年，国家网络安全政策和标准密集发布，逐渐…...

编程日记 2024/2/2 19:45:37

Redis -- 背景知识

“知识就是力量” -- 弗朗西斯培根 目录 特性 为啥Redis快? 应用场景 Redis不能做什么&#xff1f; Redis是在内存中存储数据的一个中间件&#xff0c;用作为数据库&#xff0c;也可以用作为缓存&#xff0c;在分布式中有很高的威望。 特性 In-memory data structures&…...

编程日记 2024/2/2 19:43:36

如何在Shopee平台上进行手机类目选品？

在Shopee平台上进行手机类目的选品是一个关键而复杂的任务。卖家需要经过一系列的策略和步骤&#xff0c;以确保选品的成功和销售业绩的提升。下面将介绍一些有效的策略&#xff0c;帮助卖家在Shopee平台上进行手机类目选品。 先给大家推荐一款shopee知虾数据运营工具知虾免费…...

编程日记 2024/2/2 19:42:35

班级管理神器，教师在线发布系统

现如今&#xff0c;班级管理也需要与时俱进。传统的管理方式不仅效率低下&#xff0c;而且容易出错。为了更好地管理班级&#xff0c;教师需要一个强大的工具来帮助他们发布信息和管理学生。 发布系统是一款专门为教师设计的数字化管理工具。通过系统&#xff0c;老师们就可以…...

编程日记 2024/2/2 19:41:34

【Spring Boot 3】异步线程任务

【Spring Boot 3】异步线程任务 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总是要花费或多或…...

编程日记 2024/2/2 19:40:33

JAVA斗地主逻辑-控制台版

未排序版&#xff1a; 准备牌->洗牌 -> 发牌 -> 看牌: App程序入口&#xff1a; package doudihzu01;public class App {public static void main(String[] args) {/*作为斗地主程序入口这里不写代码逻辑*///无参创建对象&#xff0c;作为程序启动new PokerGame();…...

编程日记 2024/2/2 19:39:32

Harmony的自定义组件和Page的数据同步

在开发过程中会经常使用自定义组件，就会遇到一个问题，在页面中引入组件后，如何把改变的值传递到自定义组件中呢，这就用到了装饰器，在这是单向传递的，用的装饰器是@State和@Prop @State在page页面中监听数据的变化 @Prop在自定义组件中监听page页面传递过来的变化值，并赋…...

编程日记 2024/2/2 19:38:31

【Vue3+Vite】路由机制router 快速学习 第四期

文章目录 路由简介路由是什么路由的作用 一、路由入门案例1. 创建项目 导入路由依赖2. 准备页面和组件3. 准备路由配置4. main.js引入router配置 二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结 路由简介 路由是什么 路由就是根据不同的 URL…...

编程日记 2024/2/2 19:35:27

python脚本实现浏览器驱动chromedriver的版本自动升级

chromedriver的版本号与chrome浏览器版本不匹配时在运行程序时就会报错 用下面的脚本可以自动安装chromedriver的最新版本到指定路径 from webdriver_manager.utils import get_browser_version_from_os from webdriver_manager.chrome import ChromeDriverManager import re…...

编程日记 2024/2/2 19:32:24

npm使用国内淘宝镜像

一、命令配置 1、设置淘宝镜像源 npm config set registry https://registry.npmmirror.com2、查看镜像使用状态 npm config get registry如果返回https://registry.npmmirror.com/，说明配置的是淘宝镜像。 如果返回https://registry.npmjs.org/，说明配置的是官网镜像。 二…...

编程日记 2024/2/2 19:28:21

# Redis 分布式锁如何自动续期

Redis 分布式锁如何自动续期 何为分布式 分布式&#xff0c;从狭义上理解&#xff0c;也与集群差不多&#xff0c;但是它的组织比较松散&#xff0c;不像集群&#xff0c;有一定组织性&#xff0c;一台服务器宕了&#xff0c;其他的服务器可以顶上来。分布式的每一个节点&…...

编程日记 2024/2/2 19:27:20

数据结构 归并排序详解

1.基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide andConquer&#xff09;的一个非常典型的应用。 将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff0c;即先使每个子序列有序…...

编程日记 2024/2/2 19:25:18

服务器C盘突然满了，是什么问题

随着时代的发展、互联网的普及&#xff0c;加上近几年云计算服务的诞生以及大规模普及&#xff0c;对于服务器的使用目前是非常普遍的&#xff0c;用户运维的主要对象一般也主要是服务器方面。在日常使用服务器的过程中&#xff0c;我们也会遇到各式各样的问题。最近就有遇到用…...

编程日记 2024/2/2 19:24:17

【深度学习】ND4J-科学计算库

目录 简介 基础用法 基础信息 数组创建 打印数组 变更维度&堆叠 加减乘除 累加/最大/最小 转换操作 矩陈乘法 索引/迭代 深拷贝/引用传递/视图 引用传递 视图 深拷贝 其它 简介 ND4J主要是JVM的科学计算库&#xff0c;内置了很多计算方法&#xff0c;目的…...

编程日记 2024/2/2 19:23:16

2024-01-29 ubuntu 用脚本设置安装交叉编译工具链路径方法，设置PATH环境变量

一、设置PATH环境变量的方法,建议用~/.bash_profile的方法&#xff0c;不然在ssh登录的时候可能没有设置PATH. 二、下面的完整的脚本&#xff0c;里面的echo "export PATH$build_toolchain_path:\$PATH" >> $HOME/.bashrc 就是把交叉编译路径写写到.bashrc设置…...

编程日记 2024/2/2 19:22:16

今年春节很多年轻人选择不买战袍，减少年货置办，「极简过年」，如何看待此现象？

​近年来&#xff0c;春节期间出现了一种新的现象&#xff0c;越来越多的年轻人选择不买战袍&#xff0c;减少年货置办&#xff0c;采用“极简过年”的方式度过春节。对于这一现象&#xff0c;不同人有不同的看法。 首先&#xff0c;这种极简过年的方式符合当前社会的一些价值观…...

编程日记 2024/2/2 19:20:14

C语言·贪吃蛇游戏（下）

上节我们将要完成贪吃蛇游戏所需的前置知识都学完了&#xff0c;那么这节我们就开始动手写代码了 1. 程序规划 首先我们应该规划好我们的代码文件&#xff0c;设置3个文件&#xff1a;snack.h 用来声明游戏中实现各种功能的函数&#xff0c;snack.c 用来实现函数&#xff0c;t…...

编程日记 2024/2/2 19:15:10

Flask 入门2：路由

1. 前言 在上一节中&#xff0c;我们使用到了静态路由&#xff0c;即一个路由规则对应一个 URL。而在实际应用中&#xff0c;更多使用的则是动态路由&#xff0c;它的 URL是可变的。 2. 定义一个很常见的路由地址 app.route(/user/<username>) def user(username):ret…...

编程日记 2024/2/2 19:11:05

【C++】 C++入门— 基于范围的 for 循环

C 基于范围的for循环1 使用样例2 使用条件3 完善措施 Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 基于范围的for循环 1 使用样例 使用for循环遍历数组&#xff0c;我们通常这么写&#xff1a; …...

编程日记 2024/2/2 19:10:04

图表数据提取的智能转换革命：从像素到数据点的精准跨越

图表数据提取的智能转换革命&#xff1a;从像素到数据点的精准跨越 【免费下载链接】WebPlotDigitizer WebPlotDigitizer: 一个基于 Web 的工具&#xff0c;用于从图形图像中提取数值数据&#xff0c;支持 XY、极地、三角图和地图。 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/3/27 9:37:05

新手避坑指南：用MATLAB复现TI IWR1443雷达的距离与速度FFT处理（附完整代码）

新手避坑指南&#xff1a;用MATLAB复现TI IWR1443雷达的距离与速度FFT处理&#xff08;附完整代码&#xff09; 第一次拿到IWR1443毫米波雷达开发板时&#xff0c;看着官方文档里密密麻麻的英文术语和零散的代码片段&#xff0c;我对着电脑屏幕发呆了整整半小时。作为电子工程专…...

编程新知 2026/3/27 8:46:40

Java初学者项目需要哪些技术？

对于Java初学者&#xff0c;以下技术栈组合既能满足学习需求&#xff0c;又能完成完整项目开发&#xff1a;核心基础Java语法基础掌握变量、循环、条件语句面向对象三大特性&#xff1a;封装、继承、多态集合框架&#xff1a;$ArrayList$、$HashMap$等异常处理机制开发工具IDE&…...

编程新知 2026/3/27 7:58:18

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测：对比Claude Code的轻量化替代方案

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测&#xff1a;对比Claude Code的轻量化替代方案 1. 评测背景与模型特点 在当今AI辅助编程领域&#xff0c;大型语言模型已经成为开发者日常工作的得力助手。然而&#xff0c;许多高性能模型往往需要云端部署或强大的计算资源&#x…...

编程新知 2026/3/27 7:28:13

SDMatte镜像结构解析：/opt/sdmatte-web与模型目录映射关系

SDMatte镜像结构解析&#xff1a;/opt/sdmatte-web与模型目录映射关系 1. SDMatte简介 SDMatte 是一款面向高质量图像抠图场景的 AI 模型&#xff0c;特别适合处理以下任务&#xff1a; 主体分离与提取透明物体抠图&#xff08;玻璃、薄纱等&#xff09;复杂边缘精修&#x…...

编程新知 2026/3/27 6:49:22

毫米波雷达测速的“火眼金睛”：从汽车ACC到手势识别，Doppler FFT如何分辨不同速度的目标？

毫米波雷达测速的“火眼金睛”&#xff1a;从汽车ACC到手势识别&#xff0c;Doppler FFT如何分辨不同速度的目标&#xff1f; 在自动驾驶汽车的前方&#xff0c;一辆卡车突然减速&#xff0c;而右侧车道有摩托车正在加速超车——毫米波雷达如何在这复杂的场景中&#xff0c;准确…...

编程新知 2026/3/27 5:59:00

多层PCB结构与设计技术详解

多层PCB内部结构解析与设计指南1. 多层PCB概述1.1 多层PCB的基本概念现代电子设备对电路板的要求越来越高&#xff0c;多层PCB已成为复杂电子系统的标准配置。与单层或双层PCB相比&#xff0c;多层PCB通过在绝缘基材上叠加多个导电层&#xff0c;实现了更高的布线密度和更优的信…...

编程新知 2026/3/27 5:16:44

League-Toolkit：提升英雄联盟游戏体验的开源工具集

League-Toolkit&#xff1a;提升英雄联盟游戏体验的开源工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是基…...

编程新知 2026/3/27 5:08:43

想给西安碑林、雁塔等区旧房装修？知名靠谱装修公司在哪找？

在西安碑林、雁塔等区拥有一套旧房&#xff0c;想要进行装修&#xff0c;却不知道如何找到知名靠谱的装修公司&#xff1f;别担心&#xff0c;本文将为你详细介绍选择装修公司的方法&#xff0c;并重点推荐西安王师傅装修工程有限公司&#xff0c;为你的旧房装修之旅提供可靠的…...

编程新知 2026/3/27 4:25:56

OpenClaw多模型切换实战：百川2-13B量化版与Qwen3-32B对比测试

OpenClaw多模型切换实战&#xff1a;百川2-13B量化版与Qwen3-32B对比测试 1. 为什么需要多模型切换&#xff1f; 去年夏天&#xff0c;当我第一次尝试用OpenClaw自动化处理日常工作时&#xff0c;发现一个有趣的现象&#xff1a;80%的简单任务&#xff08;如文件重命名、邮件…...

编程新知 2026/3/27 4:17:48