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文件 编…

前段,关于Javascript的学习,数据类型

<html> <head> <title>Javascript Traning</title> <script> //注意Javascript里边的变量类型都用 var开头 var value "abc";//字符串类型 alert(value); var value110; var value210;//数字类型 alert(value2); //数字相加 aler…

中国地区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…

2024年Java基础面试题

2024年Java实战面试题&#xff08;北京&#xff09;_java 5 年 面试-CSDN博客 一、redis基础类型&#xff1a;string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&#xff08;列表&#xff09;、set&#xff08;集合&#xff09;、sort set &#…

深度学习与神经网络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的要尽可能完成 不然会导致发 布平台…

【python】求解线性方程

唯一解(矩阵法、solve函数) { 3 x y 9 x 2 y 8 \left\{ \begin{matrix} 3xy9 \\ x2y8 \end{matrix} \right. {3xy9x2y8​ A x b Axb Axb,其中 A [ 3 1 1 2 ] A\left[\begin{matrix} 3 & 1 \\ 1 &2 \end{matrix}\right] A[31​12​], B [ 9 8 ] B\left[\begin{m…

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

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

Java使用io流生成pdf文件

首先生成pdf和正常请求接口一样&#xff0c;直接写~ Controller层&#xff1a; 第一个注解&#xff1a;最顶层增加 Controller 注解&#xff08;控制器&#xff09;不多讲了 直接加上。 第二个注解&#xff1a;最顶层增加 CrossOrigin 注解此注解是为了浏览器请求的时候防…

SpringBoot 结合 liteflow 规则引擎使用

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

课程页页面

课程组件 <template><div class"course"><Header></Header><div class"main"><!-- 筛选条件 --><div class"condition"><ul class"cate-list"><li class"title">课…