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颜色变成 pink
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年算法SAO-CNN-BiLSTM-ATTENTION回归预测(matlab)

2023年算法SAO-CNN-BiLSTM-ATTENTION回归预测&#xff08;matlab&#xff09; SAO-CNN-BiLSTM-Attention雪消融优化器优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 雪消融优化器( SAO) 是受自然界中雪的升华和融化行为的启发&#xff0c;开发了一种…

Docker入门篇(二)—— 命令

Docker入门篇&#xff08;二&#xff09;—— 命令 插播&#xff01;插播&#xff01;插播&#xff01;亲爱的朋友们&#xff0c;我们的Cmake/Makefile/Shell这三个课程上线啦&#xff01;感兴趣的小伙伴可以去下面的链接学习哦~ 构建工具大师-CSDN程序员研修院 一、引言 当…

二叉搜索树的后序遍历序列

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

利用Knife4j注解实现Java生成接口文档

文章目录 1、简介2、生成文档3、系列注解3.1、Api3.2、ApiResponses和ApiResponse3.3、ApiOperation3.4、Pathyvariable⭐3.5、RequestBody3.6、ApiOperationSupport3.7、ApiImplicitParams 和 ApiImplicitParam3.8、ApiModel3.9、ApiModelProperty ​&#x1f343;作者介绍&am…

动手学RAG:汽车知识问答

原文&#xff1a;动手学RAG&#xff1a;汽车知识问答 - 知乎 Part1 内容介绍 在自然语言处理领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;如GPT-3、BERT等已经取得了显著的进展&#xff0c;它们能够生成连贯、自然的文本&#xff0c;回答问题&#xff0c;并执行…

JUC并发编程-异步回调、JMM、volatile

15. 异步回调 Future 设计的初衷&#xff1a;对将来的某个事件结果进行建模&#xff01; 其实就是前端 --> 发送ajax异步请求给后端 但是我们平时都使用CompletableFuture 1&#xff09;异步调用&#xff1a;CompletableFuture 没有返回值的异步回调 public static void ma…

Microsoft Edge 浏览器报错 提示不安全

网站提示不安全 是因为 Microsoft Edge 开了安全过滤 我们需要把这个关掉 打开浏览器的设置&#xff0c;然后 找到隐私选项 找到下边的Microsoft Defender Smartscreen 关掉 Microsoft Edge 支持 Microsoft Defender SmartScreen | Microsoft Learn win10系统下打开网页提示…

【国产MCU】-认识CH32V307及开发环境搭建

认识CH32V307及开发环境搭建 文章目录 认识CH32V307及开发环境搭建1、CH32V307介绍2、开发环境搭建3、程序固件下载1、CH32V307介绍 CH32V307是沁恒推出的一款基于32位RISC-V设计的互联型微控制器,配备了硬件堆栈区、快速中断入口,在标准RISC-V基础上大大提高了中断响应速度…

第一节 分布式架构设计理论与Zookeeper环境搭建

目录 1. 分布式架构设计理论 1. 分布式架构介绍 1.1 什么是分布式 1.2 分布式与集群的区别 1.3 分布式系统特性 1.4 分布式系统面临的问题 2. 分布式理论 2.1 数据一致性 2.1.1 什么是分布式数据一致性 2.1.2 副本一致性 2.1.3 一致性分类 2.2 CAP定理 2.2.1 CAP定…

微服务-微服务Alibaba-Nacos 源码分析(上)

Nacos&Ribbon&Feign核心微服务架构图 架构原理 1、微服务系统在启动时将自己注册到服务注册中心&#xff0c;同时外发布 Http 接口供其它系统调用(一般都是基于Spring MVC) 2、服务消费者基于 Feign 调用服务提供者对外发布的接口&#xff0c;先对调用的本地接口加上…

c++程序的各阶段

c程序四个阶段 预处理阶段 预处理器&#xff08;cpp&#xff09;根据以字符#开头的命令&#xff0c;修改原始的C程序。比如hello.c中第一行的#include<stdio.h>命令告诉预处理器读取系统头文件stdio.h的内容&#xff0c;并把它直接插入程序文本中&#xff0c;结果就得到…

代码随想录算法刷题训练营day19

代码随想录算法刷题训练营day19&#xff1a;LeetCode(404)左叶子之和、LeetCode(112)路径总和、LeetCode(113)路径总和 II、LeetCode(105)从前序与中序遍历序列构造二叉树、LeetCode(106)从中序与后序遍历序列构造二叉树 LeetCode(404)左叶子之和 题目 代码 /*** Definitio…

shell - 正则表达式和grep命令和sed命令

一.正则表达式概述 1.正则表达式定义 1.1 定义 使用字符串描述、匹配一系列符合某个规则的字符串 1.2 了解 普通字符&#xff1a; 大小写字母、数字、标点符号及一些其它符号元字符&#xff1a; 在正则表达式中具有特殊意义的专用字符 1.3 层次分类 基础正则表达式扩展正…

《机器人SLAM导航核心技术与实战》第1季:第7章_SLAM中的数学基础

视频讲解 【第1季】7.第7章_SLAM中的数学基础-视频讲解 【第1季】7.1.第7章_SLAM中的数学基础_SLAM发展简史-视频讲解 【第1季】7.2.第7章_SLAM中的数学基础_SLAM中的概率理论-视频讲解 【第1季】7.3.第7章_SLAM中的数学基础_估计理论-视频讲解 【第1季】7.4.第7章_SLAM中的…

我用Rust开发Rocketmq name server

我是蚂蚁背大象(Apache EventMesh PMC&Committer)&#xff0c;文章对你有帮助给Rocketmq-rust star,关注我GitHub:mxsm&#xff0c;文章有不正确的地方请您斧正,创建ISSUE提交PR~谢谢! Emal:mxsmapache.com 1. Rocketmq-rust namesrv概述 经过一个多月的开发&#xff0c;终…

ssm学生选课系统

学生选课系统&#xff0c;java项目&#xff0c;ssm项目&#xff0c;增删改查均已实现。eclipse和idea都能打开运行。 系统分为3部分学生选课管理&#xff0c;教师管理&#xff0c;管理员管理 主要功能&#xff1a; 管理员&#xff1a;课程管理、学生管理、教师管理 教师&am…

Unity打包Android,jar文件无法解析的问题

Unity打包Android&#xff0c;jar无法解析的问题 介绍解决方案总结 介绍 最近在接入语音的SDK时&#xff0c;发现的这个问题. 当我默认导入这个插件的时候&#xff0c;插件内部的文件夹&#xff08;我下面话红框的文件夹&#xff09;名字原本为GCloudVoice&#xff0c;这时候我…

利用Python中的集合去除列表中重复的元素

题目描述 已知列表li_one[1,2,1,2,3,5,4,3,5,7,4,7,8]&#xff0c;编写程序实现删除列表li_one中重复数据的功能。 分析 集合的特点是集合内元素无序性&#xff0c;集合内元素不可重复&#xff0c;因此可以利用不可重复的特性来解决该问题。 程序代码 li_one[1,2,1,2,3,5,…

Day01-变量和数据类型课后练习-参考答案

文章目录 1、输出你最想说的一句话&#xff01;2、定义所有基本数据类型的变量和字符串变量3、用合适类型的变量存储个人信息并输出4、定义圆周率PI5、简答题 1、输出你最想说的一句话&#xff01; 编写步骤&#xff1a; 定义类 Homework1&#xff0c;例如&#xff1a;Homewo…

已实现:vue、h5项目如何使用echarts实现雷达图、六边形图表

说实话&#xff0c;要说图表里&#xff0c;最强的应该属于echarts了&#xff0c;不管是接入难度上&#xff0c;还是样式多样性上&#xff0c;还有社区庞大程度上&#xff0c;都是首屈一指的&#xff0c;反观有的人习惯用chart.js了&#xff0c;这个无可厚非&#xff0c;但是如果…