JavaScript
关注
分享
扫一扫
文章平均质量分 73
JavaScript的学习与运用
小高今天早睡了吗？
前端开发小白！还要多久才能成为一个优秀的程序媛？
展开
-
JavaScript - 面向对象与面向对象的发展过程
一、面向对象与面向过程面向过程 c注重问题的解决面向对象 JAVA完成对真实世界的模拟，把一个对象的共同特点抽离出现，有了所有的’属性’和’方法’ classjs并不是一个真正的面向对象的语言 , js在模拟面向对象对象的特点：属性 + 方法对象在js里面是由构造函数new出来的这里我们举个例子~：问题1：有一只两岁的柯基 // 面向过程 const dog = '柯基' ; const age原创 2022-01-08 16:02:24 · 945 阅读 · 6 评论 -
JavaScript - 函数返回多个值、闭包、设置参数默认值
一、函数返回多个值函数返回多个值的时候，可以返回一个数组，然后数组的解构，将两个值分别取出来 function fn() { const a = 1; const b = 2; return [a, b] } //利用数组的解构，将两个值分别取出来 const [a, b] = fn(); console.log(a, b); // 1 2二、闭原创 2022-01-07 23:23:40 · 2939 阅读 · 0 评论 -
JavaScript - 箭头函数和箭头函数的this指向
一、具名函数和赋值式函数1. 具名函数有预编译 fn() //输出：bye-bye function fn() { console.log('bye-bye'); }2. 赋值式函数没有预编译 fn() const fn = function() { console.log('hello'); }此时会报错：匿名函数也属于赋值式函数，可以改写成原创 2022-01-07 20:21:42 · 859 阅读 · 0 评论 -
JavaScript - 展开运算符
在ES6中,使用 … 来表示展开运算符,它可以展开数组/对象。一、展开运算符…在数组中的使用展开一个数组 const arr = [1,2,3] ; console.log(...arr); //输出： 1 2 3复制一个数组，也称深拷贝数组 const arr = [1,2,3] ; //深拷贝，拷贝的是数组中的值 const arr3 = [...arr] ; consol原创 2022-01-06 13:17:57 · 2872 阅读 · 0 评论 -
JavaScript - 数组的解构和对象的解构
定义：从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。一、数组的解构数组： const arr = [1 , 2 , 3] ;1.1解构所有值常规数组值的获取是通过索引： const a = arr[0] ; const b = arr[1] ; const c = arr[2] ; console.log(a,b,c); //输出 1 2 3通过数组解构进行:原创 2022-01-06 01:56:01 · 895 阅读 · 0 评论 -
JavaScript的ES6语法 - let 、const 、var
一、变量声明的方式let / constlet / const 共同点1.都是块级作用域2.在同一个作用域下,变量名不允许重复3.他们声明的全局变量并没有挂在 window对象上4.都没有预编译let / const 不同点1.let 声明的变量值可以改变2.const 声明的变量值不能改变,必须声明后立即赋值 (如：const a = 3.14;)3.const 存引用数据类型时，内容可以发生改变(地址不能改变)优先考虑使用const , 如果变量会发生改变，就使用le原创 2022-01-05 23:51:49 · 273 阅读 · 0 评论 -
day20 - JavaScript正则的创建、修饰符、方法、语法和元字符、转义字符、简写、中文匹配、字符串使用到的正则方法、常见的正则练习
一、正则的创建正则表达式：字符串的校验(验证) — 字符串字面量创建 /匹配的字符串/ const reg1 = /good/ ;实例化对象 new RegExp(‘匹配的字符串’)RegExp是regular expression 的简写 const reg2 = new RegExp('good') ;二、正则的修饰符i ignore 忽略大小写 const reg1 = /tmd/i ;g global原创 2022-01-05 01:24:59 · 464 阅读 · 2 评论 -
day15 - JavaScript鼠标的事件、坐标、跟随
一、鼠标事件介绍主要有以下几个事件，通过代码来逐个展示功能。css样式： .a{ width: 300px; height: 300px; background-color: pink; } .b{ width: 100px; height: 100px; background-color: yellowgre原创 2021-12-28 01:09:09 · 400 阅读 · 4 评论 -
day15 - JavaScript伪数组、事件处理函数、事件对象、绑定事件的方式、移除事件、事件流(事件冒泡)、事件委托
一、伪数组1.伪数组的含义：拥有length属性，但是无法直接调用数组的方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。2.常见的伪数组：html通用代码： <p>1</p> <p>2</p> <p>3</p>Arguments: function fn(){ console.log(arguments) ;原创 2021-12-25 16:15:13 · 963 阅读 · 1 评论 -
day14 - JavaScript中文档碎片、重绘与回流
一、重绘与回流重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。常见的重绘操作：1.改变元素颜色2.该百年元素背景色3.more…回流(reflow)：又叫重排（layout）,类似于插队。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。常见的回流操作：1.页面初次渲染2.浏览器窗口大小改变3.元素尺原创 2021-12-24 20:24:11 · 623 阅读 · 3 评论 -
day14 - JavaScript中DOM节点的操作--新增、删除和替换、获取父节点、兄弟节点、克隆节点、查找元素
一、DOM的新增1.innerHTML:innerHTML会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在。innerHTML 只能解析字符串<body> <div class="a"> <span>hello</span> </div> <script> var oDiv = docume原创 2021-12-24 14:06:32 · 1679 阅读 · 0 评论 -
day13 - JavaScript的DOM操作、页面的几种宽高、返回顶部底部、标签相关操作知识
一、DOM基础DOM：document object model，用来操作页面标签和cssDOM实际上是BOM的一部分DOM的基本操作： console.log(document) ; //打印整个页面 console.log(document.documentElement) ; //打印html console.log(document.body) ; //打印body内容 console.log(document.head) ; //打印head内容 console.原创 2021-12-23 02:14:56 · 844 阅读 · 2 评论 -
day12 - JavaScript的三大组成部分及方法、移动端适配、高频率触发事件的处理方案
一、JavaScript的三大组成部分1.ECMAScript：ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。2.BOM：BOM（browser object model）：浏览器对象模型。就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象3.DOM：DOM（document object model）：文档对象模型。规定了文档的显示结构，可以轻松地删除、添加和替换节点二、BOM1.认识BOM：每个浏览器窗口都是一个window对象在每一次打开一个页面原创 2021-12-22 00:54:14 · 1634 阅读 · 11 评论 -
day10 - JavaScript字符串、切割数据地址、过滤数据、日期对象相关知识、定时器、页面停留时间、倒计时
一、字符串1.字符串创建方式1.字面量方式：var str = 'hello' ; //string2.new String() 方式var str = new String('hello') ; //object2.字符串的角标的长度字符串的长度和角标只能读取，不能改写// 字符串的长度和角标只能读取，不能改写 var str = 'hello' ; console.log(str.length) ; // 5 console.l原创 2021-12-19 22:19:17 · 993 阅读 · 4 评论 -
day09 - JavaScript有关数组和对象的的深拷贝和浅拷贝问题
我们知道数据类型分为两类：基本数据类型：string、number、boolean、null、undefined存储方式：存储在栈内存中，变量存储的就是值引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）存储方式：存储在堆内存中，变量存储的是地址...原创 2021-12-17 00:48:15 · 949 阅读 · 2 评论 -
day08 - JavaScript函数的封装基础知识+函数的回调+数组的迭代方法
知识点回顾：首先，让我们来回顾一下之前关于函数的知识吧~1.函数的性质：封装性，复用性，调用性2.函数名命名 ：小驼峰（首字母不要大写）3.形参：是指函数声明是的参数；用于接受实参的；本质上是局部变量4.实参：函数调用时的参数；5.返回值 return 作用 ：返回一个结果；结束整个函数6.函数的预编译：函数可以先调用后声明7.arguments 用于接受实参列表（伪数组）8. 递归函数：自己调用自己9. 构造函数 ：创建对象数组：1.数组的2种创建方式：[ ] 、 new原创 2021-12-16 00:06:48 · 943 阅读 · 2 评论 -
day07 - JavaScript函数基础知识+数组相关知识
事件处理函数的问题1.代码并不永远是从上而下执行的2.事件处理函数是后面才执行的，也就是点击的时候才会执行// 事件处理函数是后面才执行的，也就是点击的时候才会执行 document.onclick = function () { console.log(666); } console.log(222); //222 此时666不会执行，需要点击才会执行...原创 2021-12-14 20:14:52 · 336 阅读 · 2 评论 -
day06 - JavaScript函数基础知识(2)
知识回顾：js的作用：1.操作html + css ; 2.动态数据渲染数据类型：number(数字)、string(字符串)、boolean(布尔值)、null空()、undefined(未定义)判断数据类型：typeof数据转换：1.转字符串：String() +’’2.转数字 Number() + / - / * / / / % 、 Math.round()、Math.floor() 、Math.ceil()、parseInt() ：把小数转为整数的时候 == Math.floo原创 2021-12-13 22:57:59 · 527 阅读 · 2 评论 -
day05 - JavaScript函数基础知识
函数function 函数函数：把同一个功能的代码放在一起作用：封装性 + 复用性函数分类：1.系统函数（）2.自定义函数函数：就是一个工具，是可以重复使用的。函数有的有参数，有的没有。如Math.random()、alert(666)函数的语法：function 函数名（参数）{功能是怎么实现的}注意：函数名（参数） —函数必须调用函数的说明书包括：1.函数的功能：求两个数的和2.参数说明：（声明参数的类型）第一个参数是一个数字第二个参数也是一个数字利用函数求和原创 2021-12-11 00:08:28 · 232 阅读 · 0 评论 -
day04 - JavaScript基础
， 控制台console.log打印多个值 ,用逗号隔开var a = 1, b = 2 ; console.log(a,b);. 对象才有（）函数、优先级、if（）、switch( )注意：代码块中只有一句话的时候，可以省略大括号if（） 只有一条语句，可以省略大括号switch case 只有一条语句，可以省略大括号 //console.log()打印多个值 var a = 1,b = 2; console.原创 2021-12-09 20:59:59 · 313 阅读 · 0 评论 -
有关value不能提前保存的问题
当利用var n1 = v1.value;传的是值！但是当我们获取结果的时候，不能利用 n3 = v3.value , 然后利用 n3 = sum,因为利用 n3 = v3.value 拿的是值，没有框！不能将n3放入结果框里面。因为 “ = ”是赋值，但是赋值是不能赋框的。<body> <input type="text" id="inp1"> <span>+</span> <input type="te原创 2021-12-08 20:39:37 · 105 阅读 · 0 评论 -
day03 -JavaScript基础
操作对象注意事项：1.先拿对象尽量不要把对象放在点击事件里面，因为这个点击事件会执行很多次2.select的使用option里面的 value 要么写要么不写，不能空着，js在获取值的时候，优先拿value，没有value就拿 option的内容3.value不能提前保存JS常用运算符的优先级：闰年问题闰年普通闰年：能被4整除，但是不能被100整除黄金闰年：能被400整除<script> var y = Math.floor(Math.random()原创 2021-12-08 20:06:41 · 258 阅读 · 2 评论 -
day02 - JavaScript入门知识
有关NaN1.NaN : Not a Number 非数字的集合。NaN六亲不认，不会和任何人相等，包括自己 。isNaN( )用于判断是NaN!isNaN( )用于判断是数字== 两个等号判断的是值相等=== 三个等号判断的是值和数据类型相等 console.log(NaN == NaN); //false console.log(NaN === NaN); //false var x = 3; conso原创 2021-12-07 20:38:59 · 139 阅读 · 0 评论 -
day01-JavaScript入门基础介绍
javascript的介绍javascript 简称 js （js : javascript）脚本语言 依赖其他的程序弱类型 语法要求不严格，数据类型分类相对其他语言没有那么严格直译型 直接翻译js 的作用1.加强页面动画效果2.js接受后端传来的数据3.js给后端传数据js 最早是为了解决表单验证的问题js的引入方式与css一样，js的引入方式分为内部样式，外部样式，行内样式<!DOCTYPE html><html原创 2021-12-07 00:32:56 · 280 阅读 · 0 评论