计算机就是一个由人来控制的机器,人让它干嘛,它就得干嘛。
我们要学习的语言就是人和计算机交流的工具,人类通过语言来控制、操作计算机。
编程语言和我们说的中文、英文本质上没有区别,只是语法比较特殊。
JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。
所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。
比如:用户名的长度,密码的长度,邮箱的格式等。
- 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为ECMAScript。
ECMAScript是一个标准,而这个标准需要由各个厂商去实现。
不同的浏览器厂商对该标准会有不同的实现。
我们已经知道ECMAScript是JavaScript标准。所以一般情况下,这两个词我们认为是一个意思。
但是实际上JavaScript的含义却要更大一些。
一个完整的JavaScript实现应该由以下三个部分构成:
由此我们也知道了我们所要学习的内容就是这三部分。
控制浏览器弹出一个警告框
让计算机在页面中输出一个内容
// a的单击相应函数
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
用于重新加载当前页面,作用和刷新按钮(F5)一样
如果在方法中传递一个true
,作为参数,则会强制清空缓存刷新页面(Ctrl + F5)
18、定时调用与延时调用
JS 的程序的执行速度是非常非常快的如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用
定时调用,可以将一个函数,每隔一段时间执行一次
- 回调函数,该函数会每隔一段时间被调用一次
- 每次调用间隔的时间,单位是毫秒
返回值:返回一个Number
类型的数据,这个数字用来作为定时器的唯一标识
可以用来关闭一个定时器,方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
// 设置轮播图片数组
// 设置轮播图片索引
// 为开始按钮绑定单击响应函数
// 清除上一个定时器
// 判断索引是否超过最大索引
// 为结束按钮绑定单击响应函数
注意点一:循环切换图片
当索引超过最大索引时,需要将索引重置,以达到轮播图片之目的
注意点二:不点击开始,而直接点击结束
- 如果参数是一个有效的定时器的标识,则停止对应的定时器
- 如果参数不是一个有效的标识,则什么也不做
即使没有点开始,timer 为 undefined 也不会报错,可以放心大胆的去使用
注意点三:多次点击开始按钮导致切换速度过快问题
目前,我们每点击一次按钮,就会开启一个定时器,点击多次就会开启多个定时器
这就导致图片的切换速度过快,并且我们只能关闭最后一次开启的定时器
在开启定时器之前,需要将当前元素上的其他定时器关闭
// 定时器只控制方向
// 键盘按下控制速度
// 键盘松开清空速度和方向
- 定时器控制方向,键盘按下控制速度和捕获方向,键盘松开清空速度和方向
这就好比一辆汽车,速度就像汽车的油门,定时器就像汽车的方向盘,而键盘就像汽车的离合和档位
油门一直在踩着,发动机就一直匀速运转,就能保证速度一直存在,启动或转向就不会出现卡顿的现象
当键盘按下时,就是松离合换挡位;当键盘松开时,就是踩离合
不过,跟现实世界不同的是,JS 的世界没有惯性,所以只要松离合,div 就不会再移动了
延时调用,延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
延时调用和定时调用的区别:定时调用会执行多次,而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
3、定时器的应用(一)
// 自定义兼容所有浏览器获取元素样式的方法
// 清空上一个定时器
// 当达到一定值时停下来
// 当值不再变化时,清空定时器
// 清空上一个定时器
// 当达到一定值时停下来
// 当值不再变化时,清空定时器
// obj:要执行动画的对象
// target:执行动画的目标位置
// speed:移动的速度(正数向右移动,负数向左移动)
优化3:消除多个div影响
目前我们的定时器的标识由全局变量 timer 保存,所有的执行正在执行的定时器都在这个变量中保存
那么我们就不能定义全局的了,而是需要向执行动画的对象中添加一个 timer 属性,用来保存它自己的定时器的标识
// 智能判断速度的方向
这样,执行动画的对象之间就不会再互相产生影响了
只需要将left
相关的属性改为变量传入
// obj:要执行动画的对象
// attr:要执行动画的样式
// target:执行动画的目标位置
// speed:移动的速度(正数向右移动,负数向左移动)
// 智能判断速度的方向
// obj:要执行动画的对象
// attr:要执行动画的样式
// target:执行动画的目标位置
// speed:移动的速度(正数向右移动,负数向左移动)
// 智能判断速度的方向
// 自定义兼容所有浏览器获取元素样式的方法
// obj:要执行动画的对象
// attr:要执行动画的样式
// target:执行动画的目标位置
最后再引入 js 文件,大功告成
/* 去除浏览器默认样式 */
// 动态调整picList的宽度,以自适应图片的数量变化
// 设置第一个轮播按钮悬浮颜色
// 点击按钮切换图片
// 设置轮播按钮悬浮颜色
// 重置所有轮播按钮颜色:由于修改的是内联样式,优先级较高,会把css样式覆盖,导致悬浮效果失效
// 那么这里不使用内联样式,将其置为空,这样就会找css样式
通过style
属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
我们可以先事先定义好一个 class 属性,里面写好我们需要变化的样式
我们可以通过修改元素的class
属性来间接的修改样式
这样一来,我们只需要修改一次,即可同时修改多个样式
浏览器只需要重新渲染页面一次,性能比较好,并且这种方式,可以使表现和行为进一步的分离
我们可以在此样式基础之上,定义一个函数,用来向一个元素中添加指定的 class 属性值
但是也存在一个问题,虽然从效果上来看没有什么不同,但多次点击后会重复添加相同的 class 属性,而这个操作是多余的
我们就需要在写一个函数来判断是否已经存在 class 属性
删除一个元素中的指定的 class 属性
// 如果元素中具有该类,则删除
// 如果元素中没有该类,则添加
// 定义一个变量,来保存当前打开的菜单
// 一级菜单绑定单击响应函数
// 打开菜单以后,应该关闭之前打开的菜单
// 为了可以统一处理动画过渡效果,我们希望在这将addClass改为toggleClass
// 动画执行前内联高度
因为我们执行动画前添加了一个内联高度,而内联属性的优先级是最高的
当添加collapsed
的 class 属性后不会起作用,因此同时需要在动画执行完毕后去除内联样式
// 动画执行后内联高度
我们只对展开添加了动画效果,折叠时并没有添加动画
因为添加动画的逻辑是一致的,所以这里我们可以封装一个函数,用来执行带有动画效果的折叠和展开动作
// 带有动画效果的折叠和展开动作
// 动画执行前内联高度
// 动画执行后内联高度
JS 中的对象只有 JS 自己认识,其他的语言都不认识
JSON
就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象,JSON
在开发中主要用来数据的交互
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小,更快,更容易解析。
JSON
和 JS 对象的格式一样,只不过 JSON
字符串中的属性名必须加双引号,其他的和JS语法一致
在 JS 中,为我们提供了一个工具类,就叫JSON
这个对象可以帮助我们将一个JSON
转换为 JS 对象,也可以将一个 JS 对象转换JSON
可以将JSON
字符串转换为 JS 中的对象
需要一个JSON
字符串作为参数,会将该字符串转换为 JS 对象并返回
可以将一个 JS 对象转换为JSON
字符串
需要一个 JS 对象作为参数,会返回一个JSON
字符串
JSON
对象在 IE7 及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
这个函数可以用来执行一段字符串形式的 JS 代码,并将执行结果返回
如果使用eval()
执行的字符串中含有{}
,它会将{}
当成是代码块
如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
eval()
这个函数的功能很强大,可以直接执行一个字符串中的 JS 代码
但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患
如果需要兼容 IE7 及以下的JSON
操作,则可以通过引入一个外部的 JS 文件来处理
然后在 IE7 浏览器中调用JSON
相关方法就不会报错了
一开始介绍JSON
时,说JSON
字符串中的属性名必须加双引号
那就是一堆错误等着你了