JavaScript-作用域、解构、箭头函数
作用域局部作用域局部作用域分为函数作用域和块作用域。
函数作用域在函数内部声明的变量只能在函数内部被访问,外部无法直接访问。
12345678910<script> function counter(x, y) { const s = x + y console.log(s) } // 设用 counter 函数 counter(10, 8) // 访问变量 s console.log(s)// 报错</script>
总结:
函数内部声明的变量,在函数外部无法被访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕后,函数内部的变量实际被清空了
块作用域在JavaScript中使用{}包裹的代码成为代码块,代码块内部声明的变量外部将有可能无法被访问
1234for(let t = 1; t < 6; t++) { console.log(t) //正常运行}console.log(t) //报错
总结:
let 声明的变量会产生块作用域,var 不 ...
JavaScript-案例应用-商品放大镜
案例简介在京东等网站当中,有这种商品放大的功能,就是把鼠标放在图片上,会在旁边出现放大的效果。
具体分析:
鼠标经过对应小盒子,左侧中等盒子显示对应中等图片
鼠标经过中盒子,右侧会显示放大镜效果的大盒子
黑色遮罩盒子跟着鼠标来移动
鼠标在中等盒子上移动,大盒子的图片跟着显示对应位置
实现过程基础样式首先先实现基本的样式,再配合JavaScript实现功能,具体代码在后面全部代码部分
JS实现部分鼠标经过对应小盒子,左侧中等盒子显示对应中等图片:
获取对应的元素
采取事件委托的形式,监听鼠标经过小盒子里面的图片, 注意此时需要使用 mouseover 事件,因为需要事件冒泡触发small
让鼠标经过小图片的爸爸li盒子,添加外选择框类,其余的li移除类(注意先移除,后添加)
鼠标经过小图片,可以拿到小图片的src, 可以做两件事
让中等盒子的图片换成这个小图片的src
让大盒子的背景图片,也换成这个小图片的src
12345678910111213141516//获取对应的元素const small = document.querySelector('.smal ...
JavaScript-正则表达式
正则表达式(Regular Expression)是一种字符串匹配的模式(规则)
使用场景:
例如验证表单:手机号表单要求用户只能输入11位的数字 (匹配)
过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等
语法
定义正则表达式语法
1const reg = /表达式/
其中/ /是正则表达式字面量
正则表达式也是对象
判断是否有符合规则的字符串
1regObj.test(被检测的字符串)
test()方法 用来查看正则表达式与指定的字符串是否匹配
如果正则表达式与指定的字符串匹配 ,返回true,否则false
1234567891011<body> <script> // 正则表达式的基本使用 const str = 'web前端开发' // 1. 定义规则 const reg = /web/ // 2. 使用正则 test() console.log(reg.test(str)) // true 如果符合规则匹配上则返回true console.log(r ...
JavaScript-BOM操作
JavaScript组成
ECMAScript:
规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等
Web APIs :
DOM 文档对象模型, 定义了一套操作HTML文档的API
BOM 浏览器对象模型,定义了一套操作浏览器窗口的API
Window对象BOM (Browser Object Model ) 是浏览器对象模型
window对象是一个全局对象,也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
定时器-延迟函数JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
语法:
1setTimeout(回调函数, 延迟时间)
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数:
...
JavaScript-DOM节点、移动端事件
日期对象掌握 Date 日期对象的使用,动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date,使用 Date 时与之前学习的内置对象 console 和 Math 不同,它需要借助 new 关键字才能使用。
实例化需要使用new关键字时,称为实例化
创建一个时间对象并获取时间
12const date = new Date(); // 系统默认时间const date = new Date('2024-02-02') // 指定时间
日期对象方法因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
123456// 1. 实例化const date = new Date();// 2. 调用时间对象方法// 通过方法分别获取年、月、日,时、分、秒const year = date.getFullYear(); // 四位年份const month = date.getMonth(); // 0 ~ 11
方法
作用
说明
getFullYear( )
获取年份
获取四位年份
getMonth ...
JavaScript-DOM事件
事件监听结合 DOM 使用事件时,需要为 DOM 对象添加事件监听,等待事件发生(触发)时,便立即调用一个函数。
元素对象.addEventListener('事件类型', 要执行的函数)
1234567891011121314151617<body> <h3>事件监听</h3> <p id="text">为 DOM 元素添加事件监听,等待事件发生,便立即执行一个函数。</p> <button id="btn">点击改变文字颜色</button> <script> // 1. 获取 button 对应的 DOM 对象 const btn = document.querySelector('#btn') // 2. 添加事件监听 btn.addEventListener('click', function () { console.log('等待事件被触发... ...
JavaScript-DOM获取、属性操作
Web APIs 认知作用和分类
作用:就是使用JS去操作html和浏览器
分类:DOM(文档对象模型)、BOM(浏览器对象模型)
DOMDOM(Document Object Model - 文档对象模型)是将整个 HTML 文档的每一个标签元素视为一个对象,这个对象下包含了许多的属性和方法,通过操作这些属性或者调用这些方法实现对 HTML 的动态更新,为实现网页特效以及用户交互提供技术支撑。
简单的说:DOM是浏览器提供的一套专门用来操作网页内容的功能
作用:开发网页内容特效和实现用户交互
DOM树
将HTML文档以树状结构直观表现出来,称为文档树或DOM树
描述网页内容关系的名词
作用:直观地体现了标签与标签之间的关系
DOM对象DOM对象:浏览器根据html标签生成的JS对象
所以的标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签上
documentdocument 是 DOM 里提供的一个对象,该对象包含了若干的属性和方法,document 是学习 DOM 的核心。
是用来访问和操作网页内容的
1234567891011// document ...
JavaScript-函数、对象
函数声明(定义)声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
1234function 函数名(形式参数) { //函数体 return //返回值}
调用声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数。
1234function sayHi() { //定义函数 console.log('嗨~')}sayHi() //调用函数
参数通过向函数传递参数,可以让函数更加灵活多变,参数可以理解成是一个变量。
声明(定义)一个功能为打招呼的函数
传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开
123456function sayHi(name) { console.log(name) console.log('嗨~' + name)}sayHi('小明') // 结果为 小明sayHi('小红') // 结果为 小红
返回值通过 return 这个关键字,将内部执行结果传递到 ...
JavaScript-运算符、分支循环语句、数组
运算符赋值运算符进行运算后,直接赋值的操作
赋值运算符:+=、-=、*=、/=、%=
与C语言一样
一元运算符当只需要加减1的时候,++为自增,--为自减
123456let num = 10/*以自增为例,自减同理*/console.log(++num) //前置自增,先增后赋值,输出11console.log(num++) //后置自增,先赋值再增,输出11let i = 1document.write(i++ + ++i + i) //例如这个,输出为7
比较运算符比较结果为boolean类型,即true(1)、false(0)
运算符
作用
>
左边是否大于右边
<
左边是否小于右边
>=
左边是否大于或等于右边
<=
左边是否小于或等于右边
===
左右两边是否类型和值都相等(重点)
==
左右两边值是否相等
!=
左右值不相等
!==
左右两边是否不全等
注意:
=:为赋值
==:为判断
...
JavaScript-介绍、变量、数据类型
介绍组成
ECMAScript:
规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等
Web APIs:
DOM:操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM:操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
参考JavaScript权威网站:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
书写位置内部JavaScript直接写在html文件里,用script标签包住
规范:script标签写在</body>上面
1234567<body> <script> // 示例,alert用于页面弹出警告对话框 alert('你好啊!欢迎光临!') </script></body>
注意:将script写在底部,目的是为了先加载 html 内容,再加载 JavaScript 用于修改内容。
外部JavaScript代码写在 .js 文件里
语法:通过script标签,引入到htm ...