JavaScript
文章平均质量分 79
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名的,被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式风格。
曹莓奶昔
大三程序媛一枚,记录学习日常,欢迎大家一起来学习交流吖~
展开
-
JS 进阶学习(面试常问)
嵌套关系的作用域串联形成了作用域链相同的作用域链按从小到大的规则查找变量子作用域能访问父作用域,父作用域无法访问子作用域。原创 2023-06-06 22:19:16 · 749 阅读 · 0 评论 -
JS:构造函数和原型
在ES6前,对象不是类创建的,是构造函数创建的构造函数是一种特殊的函数,主要用来初始化对象(为对象成员变量赋初始值)原创 2023-02-17 15:23:46 · 404 阅读 · 0 评论 -
缓动画原理:js轮播图,返回顶部
用三元表达式判断是往前走还是往回走,如果是往前走就用Math.ceil()向上取整,往回走就是想下取整Math.floor()回调函数原理:函数作为一个参数,这个函数作为参数传递到另一个函数里,这个函数执行完,再执行传进去的这个函数,这个过程叫回调函数。在动画函数加一个参数 function animate(,,callback){防止轮播图按钮点击过快造成播放过快。轮播图也称焦点图,在网页中经常看见。3. 点击小圆圈可以滑动图片。6. 点击小圆圈图片跟随变化。小圆圈的索引号乘图片的宽度。原创 2022-05-30 08:59:08 · 209 阅读 · 0 评论 -
PC端网页特效:偏移量offset、可视client、滚动scroll、动画效果及其案例
1. 元素偏移量1.1 offset 概述offset 翻译就是偏移量,使用这个系列相关属性可以动态得到该元素的位置(偏移)、大小获取元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数不带单位offset 常用属性 :.offsetWidth=padding+border+width(.offsetHeiht同) .offsetTop/.offsetLeft:如果父级没有定位,以body为准.offsetParent 与.parentNode 的区别:原创 2022-05-28 20:56:46 · 487 阅读 · 0 评论 -
BOM:js执行机制、location对象、navigator对象、history对象
目录1. JS执行机制1.1 js 是单线程语言1.2 同步和异步1.3 同步任务和异步任务执行过程1.4 js 执行机制2. location 对象2.1 概念编辑2.3 location 常用的属性3. navigator 对象4. history 对象1. JS执行机制1.1 js 是单线程语言js语言的最大特点是单线程,同一个时间做一件事情单线程所有的任务需要排队,前一个任务结束才会执行下一个任务,js执行时间过长,造成页面渲染加载堵..原创 2022-05-26 19:12:22 · 163 阅读 · 0 评论 -
BOM:BOM概述、window 对象事件(窗口加载和窗口大小)、定时器及其案例和源码
1. BOM概述1.1 是什么BOM(browser object model)浏览器对象模型,是独立于内容的于浏览器窗口进行交互的对象,核心是window BOM是由一系列的对象构成,每个对象都有方法和属性1.2 BOM 的构成BOM 比DOM 大,它包含DOM widow 对象是浏览器的顶级对象,具有双重角色 是js访问浏览器的接口 是一个全局对象,定义在全局作用域中的变量、函数都会变成windows对象的属性和方法,在调用时可以省略注意:windows一个特殊属性wind.原创 2022-05-26 17:44:18 · 377 阅读 · 0 评论 -
ES6:拓展运算符、迭代器、数组、对象方法、模块化(重点)
目录1. 拓展运算符1.1 拓展运算符介绍1.2 应用2. Symbol 数据类型2.1 介绍和创建2.2 使用2.3 symbol 内置属性Symbol.search3. 迭代器3.1 介绍1. 拓展运算符1.1 拓展运算符介绍拓展运算符(...)能将数组转化为逗号分隔符的参数序列const students = ['a', 'b', 'c']; //=>'a','b','c'形式 function fn() { .原创 2022-05-11 22:46:58 · 531 阅读 · 0 评论 -
JS:面向对象
目录1.面向对象编程介绍2. ES6的类和对象2.1 对象2.2 类2.2.1 创建类2.2.2 constructor 构造函数2.2.3 类添加方法3.类的继承3.1 继承3.1.1 extends3.2 super 关键字3.3 类的两注意1.面向对象编程介绍面向对象就是把事务分解为一个个对象,然后对象之间分工与合作 特性:封装性,继承性,多态性 优点:易维护,易复用,让系统灵活 特点:抽象对象的共用属性和行为组织成一个类;对类进行实例原创 2022-05-10 21:37:18 · 90 阅读 · 0 评论 -
ES6:ES6介绍、let和const变量、字符串、对象、函数
1.ES介绍ES全称EcmaScript是Ecma国际通过CEMA-262标准化的脚本程序设计语言,JavaScript是它的一种实现,所以ES新特性就是JavaScript的新特性 es6特点:语法简单,功能丰富;框架开发应用 前置知识:JavaScript基本语法,Ajax,nodejs2. let 变量及声明特性...原创 2022-05-10 17:27:26 · 368 阅读 · 0 评论 -
DOM:事件高级-注册事件、删除事件、事件流、事件对象、事件委托
1. 注册事件(绑定事件)1.1 概述给元素添加事件称,注册事件注册事件有两种方法:传统方式和方法监听注册方法传统注册方式利用on开头 <button onclick="alert(hi~) > </button> btn.onclick=function(){} 特点:注册事件的唯一性 同一元素同一事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数方法监听注册方法w3c的标准 推荐方法 addEventListener()是一个原创 2022-05-10 00:12:00 · 592 阅读 · 0 评论 -
DOM: 操作元素、操作节点、DOM总结
1. 操作元素1.1 排他思想(算法)(重要)如果有同一组元素,想要某个元素实现某种样式,需要用到循环的排他思想算法:所以元素全部清除样式 给当前元素设置样式1.1.1 百度换肤效果分析:给元素注册事件 给4个图片循环注册点击事件 点击图片,背景颜色改当前的图片 核心算法:把当前图片的src路径取过来,给body做背景1.1.2 表格隔行变色案例分析:鼠标事件:鼠标经过 onmouseover 离开 onmouseout 核心思路:鼠标经过tr行,当前行变背原创 2022-05-09 09:10:29 · 559 阅读 · 0 评论 -
Web API:DOM-获取元素、事件基础、操作元素
1. web APIs 和JS基础关联性1.1 JS 的组成JavaScript由以下三部分组成 ECMAScript: JavaScript的语法(JavaScript基础) DOM:页面文档对象模型 (Web APIs) BOM: 浏览器对象模型(Web APIs)JS基础阶段:掌握ECMAScript标准语法 ,做不了网页交互,为JS打基础,做铺垫 Web APIs阶段:是w3c的基础,是JS独有的部分,主要学习DOM和BOM,可以实现页面交互功能web APIs 是JS的应用,大原创 2022-05-08 10:00:20 · 840 阅读 · 0 评论 -
JS简单数据类型和复杂数据类型
目录1. 简单数据类型与复杂数据类型2. 数据类型的内存分配3. 简单数据类型传参4. 复杂数据类型传参1. 简单数据类型与复杂数据类型简答数据类型叫基本数据类型或者值类型复杂数据类型叫引用类型值类型:在存储时变量中存储的是值本身,string,number,Boolean,undefined,null 引用类型:在存储时变量中存储的是地址(引用),通过new关键字创建对象,如object、array、date等注意:null返回的是一个空的对象2. 数据类.原创 2022-05-06 19:30:28 · 916 阅读 · 0 评论 -
JS基础:内置对象及案例
1. 内置对象JavaScript中对象分为:自定义对象、内置对象、浏览器对象 前两个对象是JS基础内容,属于 ECMAScript;第三个是属于JS独有的,到 JS API讲解 内置对象:JS语言自带的一些对象,提供来一些常用的最基本而必要的功能(属性和方法) 最大优点就是帮助我们快速开发 JavaScript的内置对象:Math、Date、Array、String 等2. 查阅文档2.1 MDN学习对象可以通过MDN、W3C来查阅学习 MDN提供了开放的网络技术的信息,包括(H.原创 2022-05-06 16:26:15 · 730 阅读 · 0 评论 -
JS基础:作用域、预解析、对象(重点)
目录1. JS作用域1.1 作用域是什么1.2 变量的作用域1.3 js 没有块级作用域1.4 作用域链2. JS 预解析2.1 案例1(面试常问)2.2 案例22.3 案例33. JS 对象3.1 对象定义3.1.1 为什么使用对象3.2 创建对象的三种方法3.2.1 用字面量创建对象3.2.2 用 new Object创建对象3.2.3 利用构造函数创建对象3.2.4 构造函数和对象的区别3.2.5变量、属性、函数、方法总...原创 2022-05-03 11:25:47 · 210 阅读 · 0 评论 -
JS基础:函数
1. 函数函数就是封装了一段可以被重复执行使用的代码块,是为了让大量的代码重复使用2. 函数的使用函数的使用分声明函数和使用函数2.1 函数的声明function 函数名() {函数体}function 声明函数的关键字,全部小写 函数是做某件事情,函数名一般用动词 函数需要调用才能使用2.2 函数的调用函数名();调用时不要忘记加小括号 口诀:函数不调用,自己不执行2.3 函数的封装函数的封装就是把一个或者多个功能通过函数的方式...原创 2022-05-02 17:12:50 · 175 阅读 · 0 评论 -
JS基础:数组及案例
1. 数组概念一个变量只能存储一个值,多个变量可用使用数组(arry)存储数组是一组数据的集合,其中每个数据被称为元素,在数组中可以存放任意类型的元素数组是一种数据存储在单个变量名下的方式2. 创建数组JS中创建数组有两种方式:用 new 创建 用数组字面量创建(常用)2.1 用 new 创建var arr =new Array();注意 A要大写 到创建对象时会使用到2.2 用 数组字面 [ ] 创建var arr = []; //创建一个空的 arr .原创 2022-04-26 09:19:15 · 831 阅读 · 0 评论 -
js命名规范和语法格式
1. 命名规范1.1 标识符命名规范变量、函数命名必须有意义 变量名一般用名称 函数名用动词1.2 操作符命名规范操作符左右各保留一个空格1.3 单行注释规范注释//前面保留一个空格1.4 其他规范括号前后要保留一个空格 大括号要对齐...原创 2022-04-23 14:37:58 · 139 阅读 · 0 评论 -
JS基础:循环结构
1. 循环循环的目的是可以重复执行代码JS 中有三种类型的循环语句:for 循环、while循环、do...while循环2. for 循环在程序中,一组被重复执行的语句称循环体,能是否被重复执行,取决于中止条件。由循环体及循环的终止条件组成的语句,称为循环语句。for (初始化变量;条件表达式;操作表达式){ //循环体;}初始化变量,就是var 声明的一个普通变量,作为计数器 条件表达式就是用来决定是否继续执行,就是终止条件 操作表达式,每次循...原创 2022-04-23 12:19:50 · 823 阅读 · 0 评论 -
JS基础:流程控制-分支结构(if语句和switch语句)及其案例
目录1. 流程控制2. 顺序流程控制3. 分支流程控制3.1 if 语句3.2 if else 语句(双分支语句)3.3.1if案例 (判断闰年)3.4 if else if 语句(多分支语句)3.4.1 判断成绩级别案例3.5 switch 语句3.5.1 查询水果价格案例3.5.2 switch 语句和 if else if 语句区别4. 三元表达式4.1 数字补0案例1. 流程控制流程控制就是控制代码按照什么顺序结构来执行...原创 2022-04-20 12:39:06 · 820 阅读 · 0 评论 -
JS基础:运算符
目录1. 运算符2.算数运算符2.1 概述2.2 浮点数的精度问题2.3 拓展2.4 表达式和返回值3. 递增和递减运算符3.1前置递增(递减)运算符3.2后置递增(递减)运算符4. 比较运算符5. 逻辑运算符5.1 概念5.2 短路运算(逻辑中断)5.2.1 逻辑与5.2.2 逻辑或6. 赋值运算符7.运算符优先级1. 运算符运算符称操作符,用来赋值、比较、执行运算等功能的符号,一下五种是JS中常用的运算符...原创 2022-04-19 21:10:28 · 174 阅读 · 0 评论 -
JS基础:编译型语言、解释型语言、标识符、保留字
计算机需要用翻译器译码,译码方式有两种,一种是解释,一种是编译。两种方式的区别在于编译的时间点不同。1. 编译型语言(java)在代码执行前进行编译,生成中间代码文件2. 解释型语言(JavaScript)在运行时进行及时解释,并立即执行3.标识符标识符是指开发人员为变量、属性、函数、参数取得名字标识符不能是关键字和保留字4. 关键字关键字是指JS本身已经使用了的字,不能再次使用当变量名,方法名如:break、case、catch、continue、default、d原创 2022-04-19 16:03:22 · 136 阅读 · 0 评论 -
JS基础:数据类型及其案例
1. 数据类型为了充分利用空间,数据类型把数据分为内存大小不同的数据。1.2 变量的数据类型JavaScript是一种弱类型或者动态语言。只有在运行过程中根据=右边的值来判断数据类型。JavaScript有动态类型,相同的变量可用不同的类型(如var=10;var=‘lisa’)1.3 数据类型分类数据类型分为为两大类:简单数据类型(number、string、Boolean、undefined、null) 复杂数据类型(object)1.3.1 简单数据类型1. 数原创 2022-04-19 15:46:41 · 709 阅读 · 0 评论 -
JS基础:JS的书写位置、输入输出语句、注释、变量
1. JS的书写位置1.1 行内式<input type="button" value="点击" onclick="alert('hi~')">以on开头的属性(onclick)可以单行或者少量使用 注意:html使用双引号,js中使用单引号 缺点:可读性差、引号易错、引号多层嵌套 在特殊情况下可使用1.2 内嵌式在html中title标签和head标签里添加 <script>标签1.3 外部式新建一个.js文件,在html文件用<scri原创 2022-04-19 11:51:33 · 444 阅读 · 0 评论 -
JS基础:JavaScript 起源以及介绍
1. 起源JavaScript诞生于1995年,主要是处理网页中前端验证前端验证,是检查用户输入的内容是否符合一定的规则,比如:用户名的长度,密码长度,密码格式2. 简史JavaScript是由网景公司发明,命名为LiveScript,后来SUN公司更名为JavaScript。1996年微软公司在IE3浏览器中引入自己的JavaScript,实现了JScript。于是就有两个版本的JavaScript,网景公司的JavaScript和微软的JScript。为了保证运行的JavaS原创 2022-04-18 17:38:11 · 1719 阅读 · 0 评论 -
前端基础:计算机基础
1. 计算机组成2. 数据存储计算机内部是使用二进制0和1来表示数据。所有的数据都是以二进制的形式存储原创 2022-03-22 10:24:20 · 322 阅读 · 0 评论 -
前端基础:了解计算机语言和编程语言
目录1. 计算机语言1.1 机器语言1.2 编程语言1.2.1 汇编语言1.2.2 高级语言1. 计算机语言计算机语言是指用人与计算机之间的通讯的语言,它是人与计算机之间传递信息的媒介主要分为机器语言、汇编语言、高级语言三种1.1 机器语言机器语言是计算机最终执行的语言,由“0”与“1”组成的二进制数,二进制是计算机语言的基础1.2 编程语言可以通过我们人类语言的“语言”来控制计算机,让计算机为我们做事,叫编程语言。编程语言是用来控制计算机的一系列原创 2022-03-21 23:09:41 · 2000 阅读 · 0 评论