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

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>

结果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/656557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12306提示人证核验失败问题解决方案

问题环境&#xff1a;手机已经 Root 并且安装了其他软件 认证时提示 官方客服回复: 可能是我的人脸发生了太大变化导致&#xff0c;建议我去身份证的公安部门更新人脸信息&#xff0c;但是想一想又不对&#xff0c;如果发生了大变化所有 App 使用的都是统一的公安部的人脸信息…

探索数字经济:从基础到前沿的奇妙旅程

新一轮技术革命方兴未艾&#xff0c;特别是以人工智能、大数据、物联网等为代表的数字技术革命&#xff0c;催生了一系列新技术、新产业、新模式&#xff0c;深刻改变着世界经济面貌。数字经济已成为重组全球要素资源、重塑全球经济结构、改变全球竞争格局的关键力量。预估到20…

关于maven项目构建的解释

在Idea中使用模块化构建项目 项目介绍&#xff1a; sky-server依赖sky-pojo和sky-common&#xff0c;继承sky-take-outsky-pojo继承sky-take-outsky-common继承sky-take-out 由于Idea编译器自动识别引入的模块&#xff0c;所以在Idea中可以运行项目。 在Idea中使用maven打包…

Redis -- 背景知识

目录 特性 为啥Redis快? 应用场景 Redis不能做什么&#xff1f; Redis是在内存中存储数据的一个中间件&#xff0c;用作为数据库&#xff0c;也可以用作为缓存&#xff0c;在分布式中有很高的威望。 特性 In-memory data structures&#xff1a;在内存中存储数据key-val…

设计模式——职责链模式(Chain of Responsibility Pattern)

概述 职责链模式(Chain of Responsibility Pattern)&#xff1a;避免请求发送者与接收者耦合在一起&#xff0c;让多个对象都有可能接收请求&#xff0c;将这些对象连接成一条链&#xff0c;并且沿着这条链传递请求&#xff0c;直到有对象处理它为止。职责链模式是一种对象行为…

少儿编程 中国电子学会图形化编程2021年3月等级考试Scratch三级真题解析(选择题、判断题)

1.在《采矿》游戏中&#xff0c;当角色捡到黄金时财富值加1分&#xff0c;捡到钻石时财富值加2分&#xff0c;下面哪个程序实现这个功能&#xff1f; A&#xff1a; B&#xff1a; C&#xff1a; D&#xff1a; 2.设计一个和在20以内&#xff08;包括20&#xff09;的整数加法…

通过docker构建基于LNMP的WordPress项目

计划通过自定义网络模式&#xff0c;创建一个172.18.0.0/16网段 nginx&#xff1a;172.18.0.2:80 php&#xff1a;172.18.0.3:9000 mysql&#xff1a;172.18.0.4:3306 创建nginx的镜像 准备好nginx的安装包 准备nginx的网页目录和wordpress网站目录以及nginx.conf文件 编…

中国地区cetos7.9 install kubeadmin

第 1 步&#xff1a;禁用 SELinux&#xff08;可选但推荐&#xff09; 如何在 CentOS 7 上查找 SELinux 状态 sestatus另一种选择是运行以下 cat 命令&#xff1a; vi /etc/selinux/config SELINUXdisabled rebootcentos7 linux 安装k8s前下面操作的作用是&#xff1f; cat…

用Python库pillow处理图像

入门知识 颜色。如果你有使用颜料画画的经历&#xff0c;那么一定知道混合红、黄、蓝三种颜料可以得到其他的颜色&#xff0c;事实上这三种颜色就是美术中的三原色&#xff0c;它们是不能再分解的基本颜色。在计算机中&#xff0c;我们可以将红、绿、蓝三种色光以不同的比例叠加…

腾讯云云监控实践:使用云审计 CloudAudit SDK 精准管理腾讯云资源

文章目录 一、什么是腾讯云的操作审计 CloudAudit二、CloudAudit 有哪些优势三、CloudAudit 应用场景举例3.1 安全分析3.2 资源变更跟踪3.3 合规性审计 四、使用云审计 SDK 进行云监控4.1 安装环境包 PHP4.2 下载并解压云审计 PHP SDK4.3 创建的腾讯云持久证书&#xff08;如果…

【添加公众号】CSDN官方指定推广功能

一、场景 二、说明 三、要求&#xff08;其中之一&#xff09; 三、实战 Stage 1&#xff1a;进入推广管理 Stage 2&#xff1a;申请推广 1、微信公众号推广 2、微信号推广 Stage 3&#xff1a;提交审核 Stage 4&#xff1a;查看结果 Stage 5&#xff1a;开启推广 S…

深度学习与神经网络pytorch版 2.3 线性代数

深度学习与神经网络pytorch版 2.3 线性代数 目录 深度学习与神经网络pytorch版 2.3 线性代数 1. 简介 2. 线性代数 2.3.1 标量 ​编辑2.3.2 向量 2.3.3 矩阵 2.3.4 张量及其性质 2.3.5 降维 2.3.6 非降维求和 2.3.7 点积 2.3.8 矩阵-向量积 2.3.9 矩阵-矩阵乘法 …

linux平台 LED情报板网关项目总结

LED情报板目前已经基本稳定 主要存在两个版本LED1.5 和LED2 两个版本的主要差别是 &#xff1a; 1.1.5的配置文件存在本地 2.0的存在平台 需要通过接口从平台获取 2.1.5的下发消息的时候需要同步返回 2.0的是异步返回&#xff0c;所以1.5的要尽可能完成 不然会导致发 布平台…

境外投资企业备案结果公开名录列表数据

境外投资企业备案结果公开名录列表数据 1、时间&#xff1a;更新至2023年10月16日 2、指标&#xff1a;境外投资企业_机构、境内投资者名称、投资国别地区 3、来源&#xff1a;商务部 4、指标解释 境外投资企业&#xff08;机构&#xff09;备案结果公开名录列表&#xff…

SpringBoot 结合 liteflow 规则引擎使用

1、前言 在日常的开发过程中&#xff0c;经常会遇到一些串行或者并行的业务流程问题&#xff0c;而业务之间不必存在相关性。 在这样的场景下&#xff0c;使用策略和模板模式的结合可以很好的解决这个问题&#xff0c;但是使用编码的方式会使得文件太多,在业务的部分环节可以…

LabVIEW扫频阻抗测试系统

实现扫频阻抗法用于检测变压器绕组变形&#xff0c;结合了短路阻抗法和频响法的优点&#xff0c;但受限于硬件精度&#xff0c;尤其是50 Hz短路阻抗测试存在稳定性和准确性的问题。通过LabVIEW编程&#xff0c;控制宽频带信号发生器和高速采集卡&#xff0c;提高测试结果的稳定…

【论文阅读|细胞实例分割算法ASF-YOLO】

论文题目&#xff1a;ASF-YOLO: A novel YOLO model with attentional scale sequence fusion for cell instance segmentation 论文链接&#xff1a; https://arxiv.org/abs/2312.06458 代码链接&#xff1a;https://github.com/mkang315/ASF-YOLO 摘要&#xff08;Abstract&a…

C++(6) 继承

文章目录 继承1. 继承1.1 什么是继承1.2 C 继承方式1.2.1 基本案例1.2.2 继承权限组合1.2.3 继承中构造函数的说法1.2.4 继承中析构函数的执行顺序1.2.5 继承中变量名称冲突问题1.2.6 继承中函数【重写】 继承 1. 继承 1.1 什么是继承 面向对象程序设计中最重要的一个概念是继…

使用xlsx、xlsx-style导出表格添加背景色;合并单元格部分样式缺失问题解决

这篇说一下使用xlsx-style导出excel时样式的设置。需要安装xlsx、xlsx-style、file-saver插件&#xff08;file-saver可以不装&#xff0c;用a标签代替也可以&#xff09;&#xff0c;安装时可能会碰到一些报错问题&#xff0c;可以去看下我之前一篇博客&#xff1a;纯前端导出…

AI投资或成科技裁员罪魁祸首

最近的科技裁员让许多人对这个行业的稳定性产生了疑问。然而&#xff0c;仔细观察发现&#xff0c;这些裁员并不是经济困境的迹象&#xff0c;而是科技公司为了重新调整优先事项并投资未来而进行的战略举措。科技行业正投入数十亿美元用于人工智能&#xff08;AI&#xff09;&a…