最适合后端程序员要学的前端基本知识js版本

news2024/11/27 11:23:47

本文章适合有后端基础,也对前端知识有所了解的同学,简单而精准的了解后端程序员要了解的前端知识。让自己能看懂前端js,html和css版本后续写出。。。。

自定义对象

在对象中创建对象的行为时若是要调用对象属性,要加this

列如:this.name

警告框

window.alter("开始秒杀了,赶紧!!")

询问框

var key = prompt("请输入会员账号")

console.log(key)

用户输入的内容可以被接收

确认框

var flag = confirm("确认登录吗?")

if(flag){

console.log("确认登录")

}else{

console.log("不登录")

}

定时器

setInterval()

第一个参数是一个函数,第二个参数是时间

列如:每个两秒执行一次function

setTimeout()

参数和setInterval()一样,但是在到达时间后只执行一次

列如:10秒后只执行一次

Document

通过document对象可以获取元素(element)对象

js代码写在<script>标签中,程序从上而下跑,要是要用document来获取元素,则必须将<script>写在<body>标签最下边

列如:

Document常用方法

根据标签的id属性来获取唯一的元素

document.getElementById("id");

列如:根据id获取到button元素后,用onclick来绑定单机时间。


获取的元素用变量名接受后,用function()来定义onclick的执行函数

DOM事件

点击事件

鼠标点击到可点击的组件或元素(一般来说是button),就会触发一个绑定事件

列如:
 

焦点事件

焦点事件分为聚焦事件和失去焦点事件

聚焦事件

当鼠标点击进入输入框时,给出提示的信息

列如:验证username

在<script>中先根据id获取元素并用变量ele接收

ele.onfocus = function()

执行后,点击这昵称输入框,就会提示后面的提示信息

失焦事件

当鼠标离开输入框点击后,触发失去焦点事件,元素调用onblur()方法,执行function()。

列如:离开后根据正则表达式判断username是否符合正则表达式,并因此给出判断信息

点击非输入框位置,就会判断输入框中内容并给出提示信息

改变事件

当我们改变下拉框中的选项,document追踪到改变就可以触发改变事件

列如:获取元素后用onchange来追踪改变,并给出function

鼠标移入移除事件

列子:当鼠标移入id为one的div块,就改变div的属性class值为red,移出div块就改变class的值为green。

<script>中先根据id获取元素并用ele接收,

当鼠标移入时调用onmouseover()方法

当鼠标移出时调用onmouseout()方法

页面加载事件

当页面加载完毕后产生的事件

页面加载事件是指整个页面全部加载完毕后执行的事件。这包括页面中所有元素(如图片、脚本、样式表等)的加载完成。当整个页面加载完成后,浏览器会触发 window 对象的 load 事件,JavaScript代码可以通过监听这个事件来执行相应的操作。例如,在 window 对象的 load 事件中可以调用一个函数,来初始化页面或者执行其他操作。

列如:页面加载完后,在函数中写一写操作即可

表单事件

标签为<form>

表单可以进行submit和reset等操作

列如:
在我们点击按钮后,通过监听可以触发相应的动作

ES6新特性

let

let和var定义变量的区别

1.let不可以像var一样对一个变量重复的赋值

2.let局部变量,局部范围扩大有了代码块的限制,在{}中的变量声明出了代码块就没法进行访问

3.使用var定义的变量没有赋值会定义为undefined,而使用let初始化会报错

const

类似于Java中的final关键字

const arr = [1,2,4,5,6];

arr = [12,1,4,32,43];

这是错误的,用const就不可以改变变量的引用,但是可以改变里面的值

列如:
arr[0] = 79;

console.log(arr);

输出结果应该是[79,2,3,4,5,6]

假如是一个对象,也是如此。对象里面的属性可以变更,但是对象的引用不可变。

原型 

原型对象,在我的理解中,有些类似于反射。

列如:在此定义了一个stu对象,我们用

stu.__proto__.eat = function(){};

解释:stu.(两个下划线)proto(两个下划线).新增属性或方法 = 给方法或属性赋值

例子中我们获取了stu的原型对象,并为原型新增了一个方法,以至于我们可以在后面调用原来并没有定义的对象方法。

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

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

相关文章

kubernetes 认证授权

目录 一、kubernetes API访问控制 二、pod绑定sa 三、认证 四、授权 一、kubernetes API访问控制 Authentication&#xff08;认证&#xff09;认证方式现共有8种&#xff0c;可以启用一种或多种认证方式&#xff0c;只要有一种认证方式通过&#xff0c;就不再进行其它方式…

【Axure高保真原型】树切换动态面板案例

今天和大家分享树切换动态面板的原型模板&#xff0c;点击树的箭头可以打开或者收起子节点&#xff0c;点击最后一级人物节点&#xff0c;可以切换右侧面板的状态到对应的页面&#xff0c;左侧的树是通过中继器制作的&#xff0c;使用简单&#xff0c;只需要按要求填写中继器表…

人大金仓三大兼容:SQL Server迁移无忧

SQL Server在数据库领域一直占据着重要地位。作为一款成熟稳定的关系型数据库管理系统&#xff0c;SQL Server在国内有着广泛的用户群体&#xff0c;医疗、海关、政务等行业的核心业务系统多采用SQL Server数据库。随着政策与市场的双重驱动&#xff0c;信息技术应用创新产业的…

【快速使用ShardingJDBC的哈希分片策略进行分表】

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f34a;1.引入maven依赖&#x1f34a;2.启动类上添加注解MapperScan&#x1f34a;3.添加application.properties配置&#x1f34a;4.普通的自定义实体类&#x1f34a;5.写个测试类验证一下&#x1f34a;6.控制台打印…

竞赛 目标检测-行人车辆检测流量计数

文章目录 前言1\. 目标检测概况1.1 什么是目标检测&#xff1f;1.2 发展阶段 2\. 行人检测2.1 行人检测简介2.2 行人检测技术难点2.3 行人检测实现效果2.4 关键代码-训练过程 最后 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 行人车辆目标检测计数系统 …

Linux之make/maakefile

access不是实时更新的。 printf打印并不是直接给屏幕而是先放到缓冲区。 可以通过fflush(stdout)强制刷新缓冲区。 换行是指直接到同一位置的下一行&#xff0c;回车是回到开头。

【MySQL数据库】 七

本文主要介绍了Java的JDBC编程的过程. 超详细 !!! 一.JDBC JDBC就是通过Java代码,来操作数据库 由于我们在实际开发中,绝大部分都是用代码来操作数据库的 , 因此一个成熟的数据库,都会提供一些API让程序员来使用. 常见的数据库比如mysql / oracl / sqlserver / SQLite 都会提…

Python类与对象:类的定义、实例化、方法、属性、构造函数

文章目录 类的定义类的实例化方法属性构造函数Python 类和对象是面向对象编程的基础。在 Python 中,几乎所有东西都是对象,拥有属性和方法。类是创建对象的蓝图或模板。让我们一步步来探索类的定义、实例化、方法、属性以及构造函数,并提供详细的代码示例。 类的定义 在 P…

SQL注入漏洞 其他注入

文章目录 宽字节注入案例 HTTP头部注入Cookie注入base64User-Agent注入Referer 注入 SQL注入读写文件条件1.是否拥有读写权限2.文件路径3.secure_file_priv 读取文件写入文件 SQLMap安装sqlmapkail 源安装仓库克隆 参数简介快速入门&#xff1b;SQLmap&#xff08;常规&#xf…

【Docker】设置容器系统字符集zh_CN.UTF-8退出失效:关于Docker容器配置环境变量,再次进入失效问题

设置容器系统字符集zh_CN.UTF-8退出失效&#xff1a;关于Docker容器配置环境变量&#xff0c;再次进入失效问题 修改正在运行的Docker容器内的字符集: 先进入Docker容器&#xff1a;docker exec -it 容器ID /bin/bash查看是否支持中文字符集&#xff1a;locale -a | grep zh&a…

B站双11,联手天猫暴涨2亿消费新势力

一直以来&#xff0c;手持高活跃、高粘性用户群体的B站是行业用来观察年轻人消费习惯的重要平台。以至于用户群体的不断壮大带动了B站的商业价值。如今B站的商业舞台越来越大&#xff0c;不断地向外界招手&#xff0c;欢迎更多品牌积极加入到这个千万年轻人聚集的内容社区。 2…

如何有效防爬虫?教你打造安全堡垒

企业拥抱数字化技术的过程中&#xff0c;网络犯罪分子的“战术”也更难以觉察&#xff0c;并且这些攻击越来越自动化和复杂&#xff0c;也更加难以觉察。在众多攻击手段总&#xff0c;网络爬虫是企业面临的主要安全挑战&#xff0c;对于企业所造成的经济损失是难以计量的。那么…

设备密集型单位如何提升效率?智能巡检软件哪个好?

在设备密集型单位&#xff0c;如钢铁、化工、电力、烟草、日用品等行业以及运维商&#xff0c;日常工作中面临着设备巡检这一重要且繁琐的任务。传统的巡检方式往往依靠纸质记录&#xff0c;数据难以进行统计或分析&#xff0c;巡检人员需要手动记录各种数据&#xff0c;不仅效…

visual studio 启用DPI识别功能

在开发widow程序时&#xff0c;有时必须将电脑 设置-->显示-->缩放与布局-->更改文本、应用项目的大小-->100%后&#xff0c;程序的画面才能正确运行&#xff0c;居说这是锁定了dpi的原因&#xff0c;需要启dpi识别功能。设置方法如下&#xff1a; 或者

unity - Blend Shape - 变形器 - 实践

文章目录 目的Blend Shape 逐顶点 多个混合思路Blender3Ds maxUnity 中使用Project 目的 拾遗&#xff0c;备份 Blend Shape 逐顶点 多个混合思路 blend shape 基于&#xff1a; vertex number, vertex sn 相同&#xff0c;才能正常混合、播放 也就是 vertex buffer 的顶点数…

CocosCreator让一个物体跟随鼠标移动(两种方式 本地坐标系和世界坐标系)

在 Cocos Creator 3.x 游戏运行时显示的画布大小就是屏幕区域&#xff0c;屏幕坐标是从画布的左下角为原点开始计算 在 Creator 3.x 里&#xff0c;屏幕和 UI 是完全区分开的&#xff0c;用户可以在没有 UI 的情况下点击屏幕获取触点信息。因此&#xff0c;获取屏幕触点&#…

Jmeter工具二次开发

一、JMeter 二次开发方向 1、函数开发&#xff0c;主要为JMeter 函数库 2、插件开发&#xff0c;一般主要做取样器开发 3、基于执行引擎开发&#xff0c;有效解决单独开发的测试平台或工具中&#xff0c;底层执行引擎开发相对复杂、周期长的问题&#xff0c;利用 JMeter 执行…

分享vmware和Oracle VM VirtualBox虚拟机的区别,简述哪一个更适合我?

VMware和Oracle VM VirtualBox虚拟机的区别主要体现在以下几个方面&#xff1a; 首先两种软件的安装使用教程如下&#xff1a; 1&#xff1a;VMware ESXI 安装使用教程 2&#xff1a;Oracle VM VirtualBox安装使用教程 商业模式&#xff1a;VMware是一家商业公司&#xff0c;而…

数据结构: 哈希桶

目录 1.概念 2.模拟实现 2.1框架 2.2哈希桶结构 2.3相关功能 Modify --Insert --Erase --Find 2.4非整型数据入哈希桶 1.仿函数 2.BKDR哈希 1.概念 具有相同地址的key值归于同一集合中,这个集合称为一个桶,各个桶的元素通过单链表链接 2.模拟实现 2.1框架 a.写出…

oracle数据导出exp导入imp

Oracle的exp/imp命令用于实现对数据库的导出/导入操作&#xff1b; exp命令用于把数据从远程数据库服务器导出至本地&#xff0c;生成dmp文件&#xff1b; imp命令用于把本地的数据库dmp文件从本地导入到远程的Oracle数据库。 一、获取帮助信息 exp/imp helpy 二、数据导出 1…