牧马人的忧伤

day06 - Web APIs 学习目标: 能够封装简单动画函数 能够理解缓动动画的封装 能够使用动画函数 能够写出网页轮播图案例 能够写出移动端触屏事件 1.1. 动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 思路： 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 1.1.2 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。 当我们点击按钮时候，判断步长是正值还是负值 ​ 1.如果是正值，则步长往大了取整 ​ 2.如果是负值，则步长 向小了取整 1.1.3 动函数添加回调函数回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。 回调函数写的位置：定时器结束的位置。 1.1.4 动画完整版代码:function animate(ob ...

day05 - Web APIs 学习目标: 能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数 1.1. 元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 1.1.2 offset 与 style 区别offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 offsetWidth 包含padding+border+width offsetWidth 等属性是只读属性，只能获取不能赋值 所以，我们想要获取元素大小位置，用offset更合适 style style 只能得到行内样式表中的样式值 style.width 获得的是带有单位的字符串 style.width 获得不包含padding和 ...

day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('k ...

day03 - Web APIs 学习目标： 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行的三个阶段 能够在事件处理函数中获取事件对象 能够使用事件对象取消默认行为 能够使用事件对象阻止事件冒泡 能够使用事件对象获取鼠标的位置 能够完成跟随鼠标的天使案例 1.1. 节点操作1.1.1 删除节点 node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); ...

day02 - Web APIs 学习目标： 能够说出排他操作的一般实现步骤 能够使用html5中的dataset方式操作自定义属性 能够根据提示完成百度换肤的案例 能够根据提示完成全选案例 能够根据提示完成tab栏切换案例 能够区分元素节点、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement创建页面元素 1.1. 排他操作1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button&g ...

day01 - Web APIs 学习目标： 能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改元素的内容能够区分innerText和innerHTML的区别能够修改像div这类普通元素的属性能够修改表单元素的属性能够修改元素的样式属性 1.1. Web API介绍1.1.1 API的概念API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 举例解释什么是API。 例如， ​ C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 ​ javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。 这些工具（函数）由编程语言提供，内部的实现已经封装好了，我们只要学会灵 ...

JavaScript基础第01天1 - 编程语言1.1 编程 编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序： 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 1.2 计算机语言 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。 计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。 实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。 1.3 编程语言编程语言： 可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言和高级语言。 语言类型 说明 汇编语言 汇编语言和机器语 ...

JavaScript基础第02天1 - 运算符（操作符）1.1 运算符的分类运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 1.2 算数运算符 算术运算符概述 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。 浮点数的精度问题 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001 所以：不要直接判断两个浮点数是否相等 ! 表达式和返回值 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解：是由数字、运算符、变量等组成的式子 表达式最终都会有一个结果，返回给开发者，称为返回值 1.3 递增和 ...

JavaScript基础第03天笔记1.循环1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } | 名称 | 作用 | | ————— | —————————————————————————————— | | 初始化变量 | 通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。 | | 条件表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。 | | 操作表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。 | 执行过程： 初始化变量，初始化操作在整个 for 循环只会执行一次。 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。 执行操作表达式，此时第一轮结束。 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ...

JavaScript基础第04天笔记1 - 数组1.1 数组的概念 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。 1.2 创建数组JS 中创建数组有两种方式： 利用 new 创建数组 var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组 注意 Array () ，A 要大写 利用数组字面量创建数组 //1. 使用数组字面量方式创建空的数组 var 数组名 = []； //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇']; 数组的字面量是方括号 [ ] 声明数组并赋值称为数组的初始化 这种字面量方式也是我们以后最多使用的方式 数组元素的类型 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。 var arrStus = ['小白',12,true,28 ...

JavaScript基础第05天笔记1 - 作用域1.1 作用域概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 JavaScript（es6前）中的作用域有两种： 全局作用域 局部作用域（函数作用域） 1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。 1.3 局部作用域作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。 1.4 JS没有块级作用域 块作用域由 { } 包括。 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码： java有块级作用域： if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); // 报错 ...

JavaScript基础第06天笔记1 - 内置对象1.1 内置对象​ JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。​ 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发。 ​ JavaScript 提供了多个内置对象：Math、 Date 、Array、String等。 1.2 查文档​ 查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。​ Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。​ MDN:https://developer.mozilla.org/zh-CN/。 ...