![](https://img-blog.csdnimg.cn/7d287f09798e46be98733e69e5d4ae47.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 79
前端JavaScript笔记
执手天涯@
生命之旅,不能用双眸在别人的故事里捕捉生活的点滴。要以自己的双手,创造属于自己的梦。
展开
-
21、JavaScript面向对象-封装、继承
1、面向对象【三大显著特征】: 封装、继承、多态1、封装【解释】: 封装的本质就是将有关联的代码组合在一起。【优势】:保证代码可以复用提高代码的维护效率【以前的封装方法】:函数封装function fn(){}命名空间封装let o={name:'zhangsan',age:20}let obj={name:'lisi',age:18}【新的封装方法】:构造函数//自定义构造函数function Person(name,age,height,w原创 2022-02-05 19:51:07 · 806 阅读 · 0 评论 -
20、JavaScript-包装类型
1、简介【解释】: 在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法,之所以具有对象特征的原因是字符串、数值、布尔类型数据是JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。2、String1、创建语法字面量let str = 'abcd';构造函数let st1 = new String('abcd');2、常用方法实例属性 length 用来获取字符串的度长 let str = 'abcdefga原创 2022-01-26 15:58:12 · 479 阅读 · 0 评论 -
19、JavaScript-引用数据类型
三种传递数据传递:变量传递给另外一个变量值传递:会把数据复制一份传递,(简单类型引用传递:会把数据地址复制一份传递,(引用类型)1、Object【解释】: Object 是内置的构造函数,用于创建普通对象。1、创建对象语法字面量创建对象示例let obj = { uname : '阿飞', age : 22, sex : '男' }构造函数创建// Object:创建普通对象的构造函数let obj = new Object( {uname : '阿原创 2022-01-25 16:13:37 · 534 阅读 · 0 评论 -
18、JavaScript-面向对象
1、构造函数【解释】: 构造函数是专门用于创建对象的函数,如果一个函数使用 new 关键字调用,那么这个函数就是构造函数。【代码示例】:<script> // 定义函数 function foo() { console.log('通过 new 也能调用函数...'); } // 调用函数 new foo; // 构造函数创建对象 let obj = new Object(); //添加属性 obj.uname = '张三' o原创 2022-01-25 15:32:25 · 347 阅读 · 0 评论 -
17、JavaScript解构赋值
1、解构赋值【解释】: 解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。3.1 数组解构【解释】: 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法【示例】: // 一一对应 let [a, b, c, d, e, f] = ['张飞', '赵云', '关羽', '张辽', '许褚', '典韦'] console.log(a, b, c, d, e, f); // 变量多值少 let [a,原创 2022-01-24 15:05:02 · 636 阅读 · 0 评论 -
16、JavaScript进阶-作用域、函数
一、作用域【解释】: 规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问。【分类】:局部作用域全局作用域1.1 局部作用域【分类】:数作用域块作用域1、函数作用域【解释】: 在函数内部声明的变量只能在函数内部被访问,外部无法直接访问。【示例】:<script> // 声明 counter 函数 function counter(x, y) { // 函数内部声明的变量 let s = x + y; console.l原创 2022-01-23 18:38:03 · 489 阅读 · 0 评论 -
15、JavaScript BOM-操作浏览器
1、Window对象1、BOM(浏览器对象模型)【图解】【解释说明】:window 是浏览器内置中的全局对象。window 对象下包含了 navigator、location、document、history、screen 5个属性,即所谓的 BOMdocument 是实现 DOM 的基础,它其实是依附于 window 的属性2、定时器-延时函数【解释】: JavaScript 内置的一个用来让代码延迟执行的函数【语法】:setTimeout(回调函数,等待毫秒数)【清除语法原创 2022-01-20 16:41:48 · 695 阅读 · 0 评论 -
14、JavaScript-DOM网页特效
1、滚动事件和加载事件1、滚动事件【事件名】:scroll【事件源】:页面滚动【语法】//页面滚动事件window.addEventListener('scroll',function(){//要执行的操作})监听某个元素的内部滚动直接给某个元素加即可2、加载事件【事件名】:load【事件源】:外部资源加载完毕时触发【语法】//页面滚动事件window.addEventListener('load',function(){//要执行的操作})不光可以监听整个页面原创 2022-01-19 13:21:45 · 773 阅读 · 0 评论 -
13、JavaScript DOM-事件高级
1、事件对象【获取事件对象】什么是事件对象:是个对象,这个对象里有事件触发时的相关信息。事件对象的语法元素.addEventListener('click',function(e){})【事件对象常用属性】type:获取当前的事件类型clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置key:用户按下的键盘的值【案例】:<!DOCTYPE html><html l原创 2022-01-17 19:32:16 · 538 阅读 · 2 评论 -
12、JavaScript-DOM节点操作和时间对象
1、DOM节点【解释】: DOM树中的每一个内容都可以称为节点。【节点类型】:元素节点:所有的body、div、html是根节点。属性节点:所有的属性节点。例如:href文本节点:所有的文本其他2、查找结点父节点的查找parentNode 属性返回最近一级的父节点 找不到返回为null【语法】:子元素.parentNode子节点查找childNodes:获得所有子节点、包括文本节点(空格、换行)、注释节点等。仅获得所有元素节点返回的还是一个伪数组【语法原创 2022-01-16 18:01:13 · 412 阅读 · 0 评论 -
11、DOM事件基础练习
1、点击切换图片<!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"> <ti原创 2022-01-14 13:27:03 · 253 阅读 · 0 评论 -
10、JavaScript-DOM事件基础
1、事件1、什么是事件【解释】: 事件是在编程时系统内发生的动作或者发生的事情。2、什么是事件监听【解释】: 就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件。【语法】元素.addEventListener('事件',要执行的函数)【三要素】:事件源: 那个dom元素被事件触发了,要获取dom元素事件: 用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等事件调用的函数: 要做什么事。事件类型:事件类型触原创 2022-01-14 12:30:16 · 122 阅读 · 0 评论 -
09、JavaScript-DOM获取元素及修改属性
1、Web Api基本认识【作用】: 使用JavaScript去操作html和浏览器【分类】:DOM :文档对象模型BOM :浏览器对象模型JavaScript结构图:【什么是DOM】: DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API【DOM树】: 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树DOM对象: 浏览器根据html标签生成的 JS对象。所有的标签属性都可以在这个原创 2022-01-13 15:01:51 · 1080 阅读 · 0 评论 -
08、JavaScript对象
1、对象是什么【定义】: (object):JavaScript里的一种数据类型,可以理解为是一种无序的数据集合。【应用】:用来描述某个事物,例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散,用对象比较统一2、对象的使用【声明语法】:let 对象名 = {}//例如 声明一个person对象let person = {}【对象的属性和方法】:属性:信息或叫特征(名词)。 比如 手机尺寸、颜色、重量等…方法:功能或叫行为(动词)。原创 2022-01-12 11:50:02 · 140 阅读 · 0 评论 -
07、JavaScript函数
1、函数的作用【函数定义】: function,是被设计为执行特定任务的代码块。可以实现代码复用,提高开发效率2、函数的使用函数的声明语法function 函数名(){ 函数体}示例代码function say(){ document.write('你好~~');}函数名的命名规范:和变量命名基本一致尽量小驼峰式命名法前缀应该为动词命名建议:常用动词约定函数的调用语法:函数名()示例代码:say();函数和循环的不同:循环代码写完即执原创 2022-01-11 15:07:33 · 300 阅读 · 0 评论 -
06、JavaScript数组
1、数组是什么【解释】 数组(Array)是一种可以按顺序保存数据的数据类型2、数组的基本使用【声明语法】let 数组名 = [数据1,数据2,数据,...,数据n]【解释】数组是按顺序保存,所以每个数据都有自己的编号计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推在数组中,数据的编号也叫索引或下标数组可以存储任意类型的数据数组取值的语法数组名 [下标] 取出来是什么类型的,就根据这种类型特点来访问【遍历数组语法】for (let i = 0; i原创 2022-01-10 14:10:27 · 253 阅读 · 0 评论 -
06、JavaScript语句
1、表达式和语句【表达式】: 表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果【语句】: js 整句或命令,js 语句是以分号结束(可以省略)两者区别:表达式计算出一个值,但语句用来自行以使某件事发生表达式 3 + 4语句 alert() 弹出对话框2、分支语句if分支语句单分支【语法】if (条件是一个布尔值或布尔表达式){ 满足条件的代码}【解释】括号内的条件为true时,进入大括号里执行代码小括号内的结果若不是布尔类型时,原创 2022-01-10 12:54:11 · 240 阅读 · 0 评论 -
05、JavaScript运算符
1、算数运算符【解释】: 数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)+:求和-:求差*:求积/:求商%:取模(取余数)【JavaScript算术运算符执行的优先级顺序】:乘、除、取余优先级相同加、减优先级相同使用 () 可以提升优先级总结: 先乘除后加减,有括号先算括号里面的【算术运算符代码案例】 <script> let r = prompt('请输入圆的半径?'); let result = pars原创 2022-01-09 15:02:15 · 202 阅读 · 0 评论 -
04、JavaScript数据类型转换
1、JavaScript类型转换1、原因:JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算2、分类:1、隐式转换解释: 某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。规则:+号两边只要有一个是字符串,都会把另外一个转成字符串除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型缺点:原创 2022-01-07 17:04:13 · 70 阅读 · 0 评论 -
03、JavaScript数据类型
1、JavaScript数据类型–基本数据类型基本数据类型number数字型【解释】: 我们数学中学习到的数字,可以是整数、小数、正数、负数。JavaScript 中的正数、负数、小数等 统一称为 数字类型。注意事项:JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认。Java是强数据类型 例如 int a = 3 必须是整数代码示例: <script> let age = 18; let score = 52原创 2022-01-07 16:33:31 · 461 阅读 · 0 评论 -
02、变量
1、什么是变量白话: 变量就是一个装东西的盒子。通俗: 变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。2、变量的基本使用1、声明变量解释: 要想使用变量,首先需要创建变量。语法:声明变量有两部分构成:声明关键字、变量名let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语。举例:let age;2、变量赋值解释: 定义了一个变量后,你就能够初始化它(原创 2022-01-07 11:32:03 · 561 阅读 · 0 评论 -
01、JavaScript的介绍
1、JavaScript是什么?【解释】: 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。【作用】:网页特效 (监听用户的一些行为让网页作出对应的反馈)。表单验证 (针对表单数据的合法性进行判断)。数据交互 (获取后台的数据, 渲染到前端)。服务端编程 (node.js) 。【组成】:ECMAScript: 规定了js基础语法核心知识。Web APIs :DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作。BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存原创 2022-01-07 10:36:29 · 296 阅读 · 0 评论