├── README.md ├── 第一章：走入JavaScript的世界（带你见识多彩的JS世界） ├── 1 │ ├── QQ20190219-105152@2x.jpg │ └── WX20190215-145010@2x.png ├── 2 │ ├── 14863646125135副本.jpg │ ├── WX20190219-152405@2x.jpg │ └── timg (1).jpg ├── 3 │ ├── JS1.gif │ ├── timg (1).jpg │ └── u=236851746,2877161159&fm=27&gp=0.jpg ├── 4 │ ├── JS1.gif │ └── QQ20190221-160244-HD.gif ├── 1-初步认识 JavaScript.md ├── 2-JavaScript 基础语法学习.md ├── 3-变量的使用.md └── 4-函数的使用.md ├── 第七章 （无笔记，案例：商品计算，无新知识点） └── 商品统计.md ├── 第三章：if语句和布尔值（让选择变得更有逻辑) ├── 1 │ ├── candy.jpg │ └── menu.gif ├── 2 │ ├── QQ截图20190304115924.jpg │ ├── timg.jpg │ └── 简易留言板.jpg ├── 3 │ ├── e777db9f6559d2fa3679d7290bab5521.jpg │ └── 京东幻灯片.jpg ├── 4 │ └── timg.jpg ├── 1-字符串.md ├── 2-if语句和布尔值.md ├── 3-轮播图.md └── 4-初始数组.md ├── 第九章：数组和字符串方法（超级常用的方法） ├── 4 │ └── timg.jpg ├── 1-字符串方法.md ├── 2-数组方法.md ├── 3-对象方法.md ├── 4-JSON.md └── 5-Math方法.md ├── 第二章：玩转属性操作（把元素当魔方玩） ├── 1 │ ├── JS1.gif │ └── timg (1).jpg └── JS属性操作.md ├── 第五章：ECMAScript数据类型及类型转换（生来不是程序猿） ├── 1 │ ├── timg.gif │ ├── timg.jpg │ └── title.jpg ├── 2 │ └── timg (1).jpg ├── 3 │ ├── timg (1).jpg │ └── timg.jpg ├── 4 │ ├── timg (2).jpg │ └── u=2375260696,3837887499&fm=26&gp=0.jpg ├── 1-数学运算符及隐式类型转换.md ├── 2-赋值操作符.md ├── 3-比较运算符.md ├── 4-逻辑运算符.md └── 5-运算符优先级.md ├── 第八章：定时器和日期对象（如果你有改变时间的能力） ├── 1 │ ├── pic.gif │ └── timg.jpg ├── 2 │ └── 0007020102968306_b.jpg ├── 3 │ └── class.jpg ├── 5 │ └── police.jpg ├── 6 │ └── duck.jpg ├── 1-定时器.md ├── 2-延迟定时器.md ├── 3-间隔定时器.md ├── 4-定时器管理.md ├── 5-定时器的问题.md └── 6-日期对象.md ├── 第六章：ECMAScript 流程控制 （把大象放冰箱需要三步） ├── 1 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── money.jpg ├── 1-ECMAScript 流程控制md ├── 2-流程控制-分支结构.md └── 3-流程控制语句-循环结构.md ├── 第十一章：后续章节都会由莫莫老师录制，文档都在课件中 └── 后续笔记由莫莫老师提供，直接在课件中.md ├── 第十章：排序算法 ├── 1 │ ├── 1wps图片.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── file.jpg │ ├── quickSort-1.jpg │ ├── quickSort-2.jpg │ ├── quickSort-3.jpg │ ├── quickSort-4.jpg │ ├── quickSort-5.jpg │ ├── quickSort-6.jpg │ ├── quickSort-7.jpg │ ├── quickSort-8.jpg │ ├── quickSort-9.jpg │ └── timg.jpg ├── 1-递归.md ├── 2-算法.md └── 3-去重.md └── 第四章：for循环和this指向（无笔记，录播为九九乘法表案例，无新知识点） └── 没有笔记，录播只有99乘法表案例，没有知识点.md /README.md: -------------------------------------------------------------------------------- 1 | # javaScript- 2 | 高级课程视频录制中用到的笔记 3 | -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/1-初步认识 JavaScript.md: -------------------------------------------------------------------------------- 1 | # 初步认识 JavaScript 2 | 3 | ![QQ20190219-105152@2x](1/QQ20190219-105152@2x.jpg) 4 | 5 | 在互联网的江湖中，门派林立、各怀绝技、人才辈出，那是一个看不见硝烟的战场，是一个可以说很久很久的故事。今天我们就来说一个前端重量级门派——JavaScript。 6 | 7 | 8 | 9 | ### JavaScript简介 10 | 11 | JavaScript 是一门脚本语言。计算机中其实有很多的语言，总体我们分为以下几类： 12 | 13 | - 汇编语言 14 | - 脚本语言 15 | - 机器语言 16 | - 高级语言 17 | 18 | 脚本语言的特点：对比其他类型语言编程速度更快，不需要编译、简单、易学、易用、灵活性高。当然这样的高灵活性是有牺牲的，运行速度可能更慢，运行时更消耗资源。 19 | 20 | 而JavaScript就是脚本语言中的一种，被广泛应用于Web应用开发,常用来为网页添加各式各样的动态功能，可以看到的是，它在全球语言排行中都十分能打。 21 | 22 | ![WX20190215-145010@2x](1/WX20190215-145010@2x.png) 23 | 24 |

该数据为2019年最新数据（基于互联网有经验的程序员、课程和第三方厂商的数量，排名使用著名的搜索引擎​）

25 | 26 | 27 | 28 | ### JavaScript可以做什么？ 29 | 30 | 我们上面说到JS可以应用于Web开发，常常用来为网页添加各式各样的动态功能。那到底什么样的功能我们可以用JS来完成呢？下面准备了几个知名度极高的网站，我们来看一下： 31 | 32 | - 天猫： https://www.tmall.com/ 33 | - 搜索功能 34 | - 返回顶部功能 35 | - 模块快速索引功能 36 | - 登陆后才可进入购物车 37 | - 登录验证 38 | - 爱奇艺：http://www.iqiyi.com/ 39 | - 点赞和踩 40 | - 部分功能必须登录 41 | - 返回顶部 42 | - 导航大图切换 43 | - 搜索功能 44 | - 登录验证 45 | - 飞猪：https://www.fliggy.com/ 46 | - 设定单程和往返 47 | - 日期选择的时候，今天之前的不可以选择 48 | - 不一样的地方，不一样的支付价格 49 | - 必须的勾选上后，才可以加入购物车 50 | 51 | 52 | 53 | ### Web中哪些时候需要用到？ 54 | 55 | - 行为交互 56 | - 数据交互 57 | - 逻辑交互 58 | 59 | 60 | 61 | ### JavaScript组成 62 | 63 | - ECMAScript：JavaScript语法和基本对象 64 | - DOM：文档对象模型 65 | - BOM：浏览器对象模型 66 | 67 | 68 | 69 | ### 案例 70 | 71 | 点击一个按钮，让其成为选中状态（选中状态：背景色发生变更）； 72 | 73 | ``` mermaid 74 | graph LR 75 | A[1.准备一个按钮]-->B(2.获取按钮) 76 | B-->C(3.绑定点击事件) 77 | C-->D(4.点击后发生的事情) 78 | D-->E(5.获取按钮) 79 | D-->F(6.给按钮更改样式) 80 | 81 | ``` 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/1/QQ20190219-105152@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/1/QQ20190219-105152@2x.jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/1/WX20190215-145010@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/1/WX20190215-145010@2x.png -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2-JavaScript 基础语法学习.md: -------------------------------------------------------------------------------- 1 | # JavaScript 基础语法 2 | 3 | ![timg (1)](2/timg (1).jpg) 4 | 5 | 6 | 7 | ### JavaScript 应该放在什么位置？ 8 | 9 | JavaScript 是一门语言，那么如何使用就是很关键的问题！我们应该放在什么位置？ 10 | 11 | - 行间 JS 12 | 13 | ```html 14 |
15 | ``` 16 | 17 | - 优势 18 | - 直接作用于当前元素 19 | - 劣势 20 | - 复用率低 21 | - 结构不够清晰 22 | 23 | - 内部 JS 24 | 25 | ```html 26 | 29 | ``` 30 | 31 | - 优势 32 | - 代码分离清晰 33 | - 较利于后期修改维护 34 | - 同页面可以复用 35 | - 劣势 36 | - 不同页面无法复用 37 | - 不同页面修改维护较麻烦 38 | 39 | - 外部 JS 40 | 41 | ```html 42 | 43 | ``` 44 | 45 | - 优势 46 | - 代码分离彻底 47 | - 利于后期维护修改 48 | - 不同页面之间也可以复用 49 | - 缺点 50 | - 增加请求数量 51 | 52 | > 这里我们可以看到和 css 有点像，css 中同样的也是有三种添加方式 (联想记忆更快哦～)，优缺点也 53 | 54 | 55 | 56 | ### 注释 57 | 58 | ① 单行注释 59 | 60 | ```javascript 61 | //这里是注释内容 62 | ``` 63 | 64 | ② 多行注释 65 | 66 | ```javascript 67 | /* 68 | 这里是多行注释内容 69 | 第二行 70 | 第三行 71 | ··· 72 | */ 73 | ``` 74 | 75 | 76 | 77 | 78 | 79 | ### script标签上的属性 80 | 81 | 两个我都见过，到底应该写哪个？ 82 | 83 | ```html 84 | 85 | ``` 86 | 87 | ```html 88 | 89 | ``` 90 | 91 | ![WX20190219-152405@2x](2/WX20190219-152405@2x.jpg) 92 | 93 |

加一个标志，并不能改变事物的本质，依旧哪个不能踩

94 | 95 | **** 96 | 97 | **type属性**表示编写代码使用的脚本语言的内容类型（学术语：MIME 类型）。 98 | 99 | 从 Html5 开始，可以省略，如果是 script 标签，默认为 type = "text/javascript" , 同理 css 也是一样。**但是如果希望向下兼容低版本浏览器，那么建议大家还是加上**。 100 | 101 | 102 | 103 | 104 | 105 | ### 案例 106 | 107 | 点击一个按钮，让其成为选中状态（选中状态：背景色发生变更）； 108 | 109 | ```mermaid 110 | graph LR 111 | A[1.准备一个按钮]-->B(2.获取按钮) 112 | B-->C(3.绑定点击事件) 113 | C-->D(4.点击后发生的事情) 114 | D-->E(5.获取按钮) 115 | D-->F(6.给按钮更改样式) 116 | 117 | ``` 118 | 119 | 120 | 121 | ### 获取元素 122 | 123 | 如果有一堆的元素，该如何准确的找到它？ 124 | 125 | ![14863646125135副本](2/14863646125135副本.jpg) 126 | 127 | - document.getElementById(' ID ') 128 | - 通过指定 ID 获取元素； 129 | - 返回第一个符合条件的元素； 130 | - 如果找不到匹配项，则返回 `null`； 131 | - 只有 document 下存在 getElementById ； 132 | - document / parent.querySelector('选择器') 133 | - 通过指定选择器获取元素； 134 | - 返回第一个符合条件的元素； 135 | - 如果找不到匹配项，则返回 `null`； 136 | - IE8 以下不可以使用； 137 | 138 |

注意！！JS是区分大小写的，所以千万大小写千万不要打错

139 | 140 | 141 | 142 | ### 调试 143 | 144 | 可以利用 console.log( 要打印的内容 )，以此来确认内容是否正确。 145 | 146 | **查看console.log内容的步骤** 147 | 148 | ```mermaid 149 | graph LR 150 | A[浏览器打开当前页面]-->B(右键打开检查) 151 | B-->C(选中控制台Console) 152 | ``` 153 | 154 | 155 | 156 | ### script标签最合适的放置位置 157 | 158 | 页面读到 标签的时候开始解析页面。当页面结构未生成的时候，在 标签中的 JS 代码如果获取元素，将获取失败。 159 | 160 | **两种解决方案** 161 | 162 | 1. 在 中的JS代码，放置在 window.onload（等待窗口加载完成） 事件中。 163 | 2. 放在 标签前，让 HTML 结构先行加载完成。 164 | 165 | **注意事项** 166 | 167 | 如果 JS 的代码比较庞大，需要较长的时间读取，会影响页面的加载，造成页面长时间空白。 168 | 169 | 从用户体验的角度来说，我们应该避免这样的情况，长时间空白会让用户觉得打开速度很慢，从而造成用户流失。 170 | 171 | 172 | 173 | ### 给元素绑定事件 174 | 175 | ```javascript 176 | ele.onclick = function(){ 177 | //点击后要做的事情 178 | }; 179 | 180 | /* 181 | 元素.事件 = function(){ 182 | //点击后要做的事情 183 | }; 184 | */ 185 | ``` 186 | 187 | - ele —— 需要绑定事件的元素 188 | - onclick —— 点击事件 189 | 190 | 191 | 192 | ### 操作元素的样式 193 | 194 | ```javascript 195 | ele.style.background = 'red'; 196 | 197 | /* 198 | 元素.样式.样式名 = '值'; 199 | */ 200 | ``` 201 | 202 | - ele —— 需要改变样式的元素 203 | - style —— 样式 204 | - background —— 具体的样式名背景 205 | - red —— 样式名对应的值，需要加上 ' ' (引号)  206 | 207 | 208 | -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/14863646125135副本.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/14863646125135副本.jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/WX20190219-152405@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/WX20190219-152405@2x.jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/timg (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/2/timg (1).jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3-变量的使用.md: -------------------------------------------------------------------------------- 1 | # 变量 2 | 3 | ![timg (1)](3/timg (1).jpg) 4 | 5 | 我今年要去黄台甫马哈那坤弃他哇劳狄希阿由他亚马哈底陆浦欧叻辣塔尼布黎隆乌冬帕拉查尼卫马哈洒坦旅游，据说黄台甫马哈那坤弃他哇劳狄希阿由他亚马哈底陆浦欧叻辣塔尼布黎隆乌冬帕拉查尼卫马哈洒坦很好玩，还有很多好吃的。黄台甫马哈那坤弃他哇劳狄希阿由他亚马哈底陆浦欧叻辣塔尼布黎隆乌冬帕拉查尼卫马哈洒坦的小姐姐也都超级好看。我朋友之前去了黄台甫马哈那坤弃他哇劳狄希阿由他亚马哈底陆浦欧叻辣塔尼布黎隆乌冬帕拉查尼卫马哈洒坦，他说不虚此行。我很期待！ 6 | 7 | --- 8 | 9 | 10 | 11 | #### 什么是变量？ 12 | 13 | 变量用于存储数据。 14 | 15 | **如何使用变量？** 16 | 17 | 在使用变量之前，我们需要先创建变量。 18 | 19 | **声明变量步骤** 20 | 21 | - 使用关键字声明变量（关键字：js中定义好的有一定特殊含义的单词） 22 | - var 23 | - 准备一个变量名 24 | 25 | ```javascript 26 | var a; //声明一个名字为 a 的变量 27 | 28 | /* 29 | var 变量名； 30 | */ 31 | ``` 32 | 33 | **对变量进行赋值** 34 | 35 | ```javascript 36 | a = 10; 37 | /* 38 | 变量名 = 数据 ---》 这个过程叫做赋值 39 | 当我们需要用到 10 的时候，就可以使用 a 代替 40 | 41 | 10 * 10 ---》 a * a 42 | */ 43 | ``` 44 | 45 | **合并 声明 和 赋值 两个步骤** 46 | 47 | ```javascript 48 | var a = 10; 49 | /* 50 | var 变量名 = 数据 ; 51 | */ 52 | ``` 53 | 54 | 当只声明变量，没有赋值的时候，默认值为undefined 55 | 56 | 57 | 58 | #### 利用变量巧妙简化旅游地方 59 | 60 | ```javascript 61 | var 曼谷 = "黄台甫马哈那坤弃他哇劳狄希阿由他亚马哈底陆浦欧叻辣塔尼布黎隆乌冬帕拉查尼卫马哈洒坦"; 62 | ``` 63 | 64 | 65 | 66 | ### 案例 67 | 68 | 点击一个按钮，更改div的宽、高、背景色、边框，利用变量简化。 69 | 70 | ```mermaid 71 | graph LR 72 | A[1.准备一个按钮]-->B(2.获取按钮) 73 | B-->C(3.绑定点击事件) 74 | C-->D(4.点击后发生的事情) 75 | D-->E(5.获取div) 76 | D-->F(6.更改div的样式) 77 | ``` 78 | 79 | 80 | 81 | #### 变量的好处 82 | 83 | - 简化代码，增强可读性 84 | - 可以复用 85 | 86 | 87 | 88 | #### 变量命名规则 89 | 90 | 名字也不可以随随便便取哦～，像是 id 和 class 的命名一样，变量名也有属于自己的规则。 91 | 92 | - 不允许数字开头 93 | - 不允许使用关键字和保留字 94 | - 允许是字母，数字，下划线(_)，美元符($)任意组合而成 95 | 96 | **如果不符合规范将出现如下报错信息：** 97 | 98 |

Uncaught SyntaxError: Invalid or unexpected token

99 | 100 | 语法错误：标记无效或意外 101 | 102 | 103 | 104 | #### 关键字和保留字 105 | 106 | - 关键字：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#%E5%85%B3%E9%94%AE%E5%AD%97 107 | - 当前语法中正在使用的单词 108 | - 保留字：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#%E6%9C%AA%E6%9D%A5%E4%BF%9D%E7%95%99%E5%85%B3%E9%94%AE%E5%AD%97 109 | - 将来可能在语法中使用的单词 110 | 111 | #### 112 | 113 | #### 变量的命名风格 114 | 115 | - 具有语义化（语义化：一看就知道是什么） 116 | - 驼峰命名 117 | - 大驼峰 118 | - JavaScript 119 | - 小驼峰 120 | - javaScript 121 | 122 | 123 | 124 | #### 多变量同时声明 125 | 126 | 使用逗号对变量名进行间隔，只需要一个关键字var。 127 | 128 | ```javascript 129 | var a = 10, 130 | b = 20, 131 | c = 'Hello'; 132 | ``` 133 | 134 | 135 | 136 | #### 变量名掌握测试 137 | 138 | ![u=236851746,2877161159&fm=27&gp=0](3/u=236851746,2877161159&fm=27&gp=0.jpg) 139 | 140 | ① 将下列不符合命名规则的挑选出来，并写出不符合哪条规则，最后将其修改为正确的。 141 | 142 | A : var this = 10; 143 | 144 | B : var For = 10; 145 | 146 | C : var _num = 10; 147 | 148 | D : var 变量 = 10; 149 | 150 | E : var $total = 10; 151 | 152 | F : var 9all = 10; 153 | 154 | G: var background-color = 'red'; 155 | 156 | 157 | 158 | ② 写出下列变量的打印结果 159 | 160 | ```javascript 161 | var v1,v2,v3 = 'hello', 162 | v4 = 42, 163 | v5; 164 | 165 | console.log(v1); 166 | console.log(v2); 167 | console.log(v3); 168 | console.log(v4); 169 | console.log(v5); 170 | ``` 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 答案： 179 | 180 | **A、F、G** 181 | 182 | 183 | 184 | - undefined 185 | - undefined 186 | - hello 187 | - 42 188 | - undefined 189 | 190 | -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/JS1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/JS1.gif -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/timg (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/timg (1).jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/u=236851746,2877161159&fm=27&gp=0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/3/u=236851746,2877161159&fm=27&gp=0.jpg -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/4-函数的使用.md: -------------------------------------------------------------------------------- 1 | # 函数 2 | 3 | ![QQ20190221-160244-HD](4/QQ20190221-160244-HD.gif) 4 | 5 | 每次重复的过程是不是让你觉得很厌烦？像是html的结构，如果每次都需要一行一行手打，那可真是猿生无望。如果可以像变量一样存起来，然后复用就好了！ 6 | 7 | 8 | 9 | ### 什么是函数？ 10 | 11 | 可重复使用的代码块 12 | 13 | **如何使用函数** 14 | 15 | 在使用函数之前，我们需要先创建函数。 16 | 17 | **函数声明** 18 | 19 | - 有名函数 20 | - 匿名函数 21 | 22 | **函数声明步骤** 23 | 24 | - 使用关键词声明函数 25 | - function 26 | 27 | ```javascript 28 | //有名函数 29 | function sum(){ 30 | // 代码块 31 | } 32 | /* 33 | function 函数名(){ 34 | //代码块 35 | } 36 | */ 37 | 38 | 39 | //匿名函数 40 | function(){ 41 | //代码块 42 | } 43 | 44 | ``` 45 | 46 | 47 | 48 | **匿名函数不可以直接定义，否则会报错** 49 | 50 |

Uncaught SyntaxError: Unexpected token (

51 | 52 | 语法错误：意外标记 53 | 54 | 55 | 56 | ### 函数调用 57 | 58 | - 函数名称(); 59 | - 事件调用 60 | 61 | 62 | 63 | ### 标识符 64 | 65 | 之前学习变量的时候，我们说变量的命名有规范，其实函数名也是一样有规范的，并且函数名的规范和变量也是一样的。 66 | 67 | 我们把这类统称为标识符，这些规范对于所有的标识符都有效。那么标识符具体指哪些呢？ 68 | 69 | - 变量名 70 | - 函数名（函数参数） 71 | - 属性名 72 | 73 | 74 | -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/4/JS1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/4/JS1.gif -------------------------------------------------------------------------------- /第一章：走入JavaScript的世界（带你见识多彩的JS世界）/4/QQ20190221-160244-HD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第一章：走入JavaScript的世界（带你见识多彩的JS世界）/4/QQ20190221-160244-HD.gif -------------------------------------------------------------------------------- /第七章 （无笔记，案例：商品计算，无新知识点）/商品统计.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第七章 （无笔记，案例：商品计算，无新知识点）/商品统计.md -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/1-字符串.md: -------------------------------------------------------------------------------- 1 | # 神奇的加号 2 | 3 | ![](2/timg.jpg) 4 | 5 | 6 | 7 | ### 简易计算器 8 | 9 | ![](2/QQ截图20190304115924.jpg) 10 | 11 | 咦？到底发生了什么? 难道我的计算器坏了？？？？？ 12 | 13 | 1 + 1 = 11 ？ 是怎么做到的？ 赶紧来看一下问题的产生~ 14 | 15 | 16 | 17 | ```javascript 18 | 19 | alert( 1 + 1 ); //2 20 | alert( '1' + 1 ); //11 21 | alert( '1' + '1' ); //11 22 | 23 | ``` 24 | 25 | 26 | 27 | ### 加号的作用 28 | 29 | ① 数学运算：做数字相加运算 30 | 31 | ② 字符串连接：将加号左右两边的内容拼接，然后返出 32 | 33 | 34 | 35 | ### 字符串 36 | 37 | 由一对双引号 或 单引号包起来的0个或多个字符组成的串 38 | 39 | ### typeof检测数据是不是字符串 40 | 41 | ```javascript 42 | var a = '123'; 43 | typeof a; //string 44 | ``` 45 | 46 | 47 | 48 | 49 | 50 | ### 重点总结： 51 | 52 | 当加号的左右任何一侧，有字符串，那么作为连接符使用 53 | 54 | 如果两边都是数字，作为加法运算使用 55 | 56 | 57 | 58 | ### 案例：留言板 59 | 60 | ![](2/简易留言板.jpg) 61 | 62 | 一个熟悉的不能再熟悉的功能，随便举个例子都是一堆的，像是平时看知乎、刷微博、论坛灌水都少不了留言板的存在~ 63 | 64 | 这样一个常见的功能，我们今天就已经可以来实现啦！是不是很开心 ~ 我们来看下，如何做。 65 | 66 | 67 | 68 | **思路分析** 69 | 70 | - 材料准备 71 | - 一个输入框 72 | - 一个按钮 73 | - 一个展示留言的列表 74 | - 当点击按钮的时候，讲输入框的内容添加到留言列表结构中 75 | 76 | 77 | 78 | ```mermaid 79 | graph LR 80 | A[1.获取元素]-->B(2.给按钮绑定点击事件) 81 | B-->C(3.获取输入框中的内容) 82 | C-->D(4.把获取到的内容添加到展示列表中) 83 | 84 | 85 | ``` 86 | 87 | 88 | 89 | 90 | 91 | ### += 的使用 92 | 93 | A = A + B ==> A += B 94 | 95 | **这里需要额外注意，字符串拼接的情况下，A 和 B 的顺序是不能颠倒的** -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/1/candy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/1/candy.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/1/menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/1/menu.gif -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/2-if语句和布尔值.md: -------------------------------------------------------------------------------- 1 | # if 语句和布尔值 2 | 3 | ![](1/candy.jpg) 4 | 5 | 很多时候，我们往往会遇到需要在多者之间做选择的情况，例如抛硬币~正面吃糖果，反面那就巧克力吧~ 6 | 7 | 程序中我们也时常要做这样的选择，例如~ 8 | 9 | 10 | 11 | #### 演示案例 12 | 13 | ![](1/menu.gif) 14 | 15 | 点击一下展开，这是我们在一开始学习 js 的时候就接触过的案例。 16 | 17 | 那如果稍稍复杂一点~第一次点击的时候是展开，第二次点击的时候收起，循环往复，实现一个下拉菜单效果，这个怎么做呢？？ 18 | 19 | 20 | 21 | ## if 语句语法 22 | 23 | ① 最简单的，只有“如果” 24 | 25 | ```javascript 26 | if( 判断条件 ){ 27 | //当满足判断条件后，执行这里的代码 28 | } 29 | ``` 30 | 31 | 32 | 33 | ② 中级的，“如果....否则” 34 | 35 | ```javascript 36 | if( 判断条件 ){ 37 | //当满足判断条件后，执行这里的代码 38 | }else{ 39 | //否则，执行这里的代码 40 | } 41 | ``` 42 | 43 | 44 | 45 | ③ 高级的，“如果...或者如果....或者....否则” 46 | 47 | ```javascript 48 | if( 判断条件1 ){ 49 | //当满足判断条件1后，执行这里的代码 50 | }else if( 判断条件2 ){ 51 | //当满足判断条件2后，执行这里的代码 52 | }else if(判断条件3){ 53 | //当满足判断条件3后，执行这里的代码 54 | }else{ 55 | //不满足以上条件的执行这里的代码 56 | } 57 | ``` 58 | 59 | 60 | 61 | **注意事项** 62 | 63 | 1. 判断条件可以有多个 64 | 2. 可以只有 if 没有 else 65 | 66 | 67 | 68 | ### 比较运算符和逻辑运算符 69 | 70 | **比较运算符** 71 | 72 | - 5 > 10 大于 73 | - 5 < 10 小于 74 | - 5 == 10 等于 75 | 76 | 77 | 78 |

A == B : 比较等号左右两边的值是否相等，如果相等返回true，否则返回false；

79 | 80 | **** 81 | 82 | **逻辑运算符** 83 | 84 | - 5 < 10 && 2 < 3 85 | 86 | - 5 > 10 || 2 > 3 87 | 88 | 89 | 90 |

A && B：如果左侧的结果为true，则返回右侧的结果。如果左侧为false，直接返回左侧。

91 | 92 |

A || B：如果左侧的结果为true，则返回左侧的结果。否则返回右侧结果。

93 | 94 | 95 | 96 | 97 | 98 | ### 判断条件 之 布尔值 99 | 100 | - true - 真 101 | - false - 假 102 | 103 | 判断条件的小括号：程序会将括号内的判断条件转为 true 或 false，然后交给if去做判断。 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | ### 案例步骤 132 | 133 | ```mermaid 134 | graph LR 135 | A[1.获取元素]-->B(2.给按钮绑定点击事件) 136 | B-->C(3.点击的时候控制列表应该显示还是隐藏) 137 | C-->D(4.如果列表隐藏 就显示列表) 138 | C-->E(4.如果列表显示 就隐藏列表) 139 | 140 | 141 | ``` 142 | 143 |

列表的显示隐藏可以根据 display 的值来决定

144 | 145 | 146 | 147 | ### 作业 148 | 149 | 自定义下拉菜单 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/2/QQ截图20190304115924.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/2/QQ截图20190304115924.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/2/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/2/timg.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/2/简易留言板.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/2/简易留言板.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/3-轮播图.md: -------------------------------------------------------------------------------- 1 | # 轮播图案例 2 | 3 | 4 | 5 | ![](3/京东幻灯片.jpg) 6 | 7 | 再来一个常用的功能轮播图走起~ 8 | 9 | 10 | 11 | ### 递增和递减 12 | 13 | 递增（ ++ ）：每次为操作数增加1，并返回一个数值 14 | 15 | 递减（ -- ）：每次为操作数减少1，并返回一个数值 16 | 17 | 18 | 19 | ```javascript 20 | var a = 1; 21 | a = a + 1; 22 | a += 1; 23 | a++; 24 | ``` 25 | 26 |

以上的三句话表达的都是一样的意思，我们明显可以看到最后这句最简单

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/3/e777db9f6559d2fa3679d7290bab5521.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/3/e777db9f6559d2fa3679d7290bab5521.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/3/京东幻灯片.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/3/京东幻灯片.jpg -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/4-初始数组.md: -------------------------------------------------------------------------------- 1 | # 初始数组 2 | 3 | ![](4/timg.jpg) 4 | 5 | ### 定义数组 6 | 7 | ​ [] - 可以存储多个值 8 | 9 | ​ 每个值之间利用逗号进行间隔，最后一个值后面没有逗号 10 | 11 | ```javascript 12 | var arr = ['a','b','c'] 13 | ``` 14 | 15 | 16 | 17 | ### 数组的长度 18 | 19 | length 20 | 21 | ```javascript 22 | var arr = ['a','b','c'] 23 | arr.length； // 可以获取数组的长度，表示当前一共存储了多少值 24 | ``` 25 | 26 | 27 | 28 | ### 数组的取值 29 | 30 | 根据下标进行取值，下标为数字，因为不符合标识符命名要求，所以我们必须使用 "[]" 的方式，对其进行操作，不可以使用“.” 31 | 32 |

下标从0开始！！！！

33 | 34 | ```javascript 35 | var arr = ['a','b','c']; 36 | arr[0] // 'a' 37 | arr[1] // 'b' 38 | arr[2] // 'c' 39 | ``` 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /第三章：if语句和布尔值（让选择变得更有逻辑)/4/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第三章：if语句和布尔值（让选择变得更有逻辑)/4/timg.jpg -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/1-字符串方法.md: -------------------------------------------------------------------------------- 1 | # 字符串方法 2 | 3 | ### 创建字符串 4 | 5 | - 字面量的创建方式 6 | 7 | ```javascript 8 | var str = 'kaikeba'; 9 | console.log(typeof str); //string 10 | ``` 11 | 12 | - 字符串对象的创建方式 13 | 14 | ```javascript 15 | var str = new String('kaikeba'); 16 | console.log(typeof str); //object 17 | ``` 18 | 19 | 20 | 21 | ### 查找类方法： 22 | 23 | - charAt( index ) 24 | - 参数 25 | - index : 0 ~ lengrh -1的值，默认为0，超出返回空字符串 26 | - 返回特定位置的字符 27 | - charCodeAt( index ) 28 | - 参数 29 | - index：0 ~ length-1的值，默认为0，超出返回NaN 30 | - 返回指定位置的字符的Unicode编码 31 | - fromCharCode( num1,num2... ) 32 | - 参数 33 | - 可填入多个Unicode编码 34 | - 返回指定的unicode编码对应的字符 35 | - indexOf( searchValue [,fromIndex] ) 36 | - 参数 37 | - searchValue : 查找的值 38 | - fromIndex ： 指定开始查找的位置，默认为 0，如果小于 0 等同 0 进行操作，如果大于length，返回 -1 39 | - 返回首个被发现的指定的值的索引，没有找到则返回-1，该方法区分大小写 40 | - lastIndexOf( searchValue [,fromIndex] ) 41 | - 参数 42 | - searchValue：查找的值 43 | - fromIndex ：指定开始查找的位置，默认值是 length ，如果是负数则为0，如果大于length则为length 44 | - 返回最后一个被发现的指定的值的索引，没有找到则返回-1，查找顺序从后往前 45 | 46 | 47 | 48 | 49 | 50 | ### 截取类方法 51 | 52 | - slice(begin[，end]) 53 | 54 | - 参数 55 | - begin：从该索引处开始提取字符，如果是负数（负数一旦超出lenth，默认为从0开始），则会从右向左查找字符截取 56 | - end：结束截取的位置，如果省略改参数，则会默认为到字符串最后一位。如果是负数，同样从右向左查找最后一位字符位置。 57 | - 截取一个字符串区域，并返回一个新字符串 58 | 59 | **注意begin被包含在截图的字符串中，end不包含** 60 | 61 | **如果超出最大索引值，或者ends所处的对应索引在begin索引之前，都会返回空字符串** 62 | 63 | 64 | 65 | - substr(start[，length]) 66 | 67 | - 参数 68 | - start：开始提取字符串的位置，如果是负数，则从右向左查找字符串截取 69 | - length：提取的字符串数，默认到字符串末尾 70 | - 返回从指定位置开始，到指定字符数的字符 71 | 72 | **并不推荐使用，未来可能被移除** 73 | 74 | 75 | 76 | - substring(begin[，end]) 77 | 78 | - 参数 79 | - begin：截取的起始索引位置，如果小于0，则等于0； 80 | - end：截取的结束索引位置，该位置的字符不包含在截取范围内，如果大于length，则等于length 81 | - 返回字符串中指定两个下标之间的字符 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ### 其他常用方法 90 | 91 | - split(separator[，num]) 92 | - 参数 93 | - separator：决定分隔的字符 94 | - num：分隔的个数 95 | - 将字符串分割成字符串数组 96 | - concat（性能不如+ 、+=） 97 | - 将一个或多个字符串与原字符串合并，并返回新字符串 98 | - toLowerCase() 99 | - 将字符串转成小写并返回新的字符串 100 | - toUpperCase() 101 | - 将字符串转成大写并返回新的字符串 102 | - trim() 103 | - 去除首尾空格 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/2-数组方法.md: -------------------------------------------------------------------------------- 1 | # 数组方法 2 | 3 | #### 基础添加和删除 4 | 5 | - push 6 | 7 | - 将一个或多个元素添加到数组的结尾，并返回该数组的长度 8 | 9 | - pop 10 | 11 | - 删除数组中的最后一位，并返回删除的值 12 | 13 | - unshift 14 | 15 | - 将一个或多个元素添加到数组的开头，并返回该数组的新长度 16 | 17 | - shift 18 | 19 | - 删除数组中的第一位，并返回删除的值 20 | 21 | 22 | 23 | #### 进阶删除、添加、替换方法 24 | 25 | - splice(start[，num，item1，item2...]) 26 | - 可以用于删除指定位置的元素，并在该位置上添加新的元素 27 | - 返回删除的元素组成的数组 28 | - 参数 29 | - start：指定修改的起始位置，如果超出长度，默认为从数组末尾开始，如果是负数（超过length，则为length），从右往左查找起始位置 30 | - num：表示要删除数组元素中的个数，默认到数组的结束位置，如果是0或者负数，则不移除元素。 31 | - item1，item2...：要添加到数组里面的内容 32 | 33 | 34 | 35 | #### 数组排序 36 | 37 | - sort（ function( a , b ){} ） 38 | - 可选参数。默认根据字符串的unicode码进行排序 39 | 40 | > 如果 a-b的结果 41 | > 42 | > ​ 大于0 ：b 排到 a 前面 43 | > 44 | > ​ 小于0：a 排到 b 前面 45 | > 46 | > ​ 等于0：a 和 b 的位置不变 47 | 48 | 49 | 50 | ### 随机排序 51 | 52 | Math.random() - 返回一个0 ~ 1 之间的值，包含0，不包含1； 53 | 54 | 55 | 56 | #### 数组常用方法 57 | 58 | - concat（arr1,arr2,arr3...） 59 | - 用于合并两个或多个数组。此方法不会改变原有数组，会返回一个新数组 60 | - join（separator） 61 | - 讲一个数组的所有元素连接成一个字符串，并返回这个字符串 62 | - reverse 63 | - 将数组中的所有元素位置颠倒，并返回该数组。该方法会改变原有数组。 64 | - indexOf（searchValue[，fromIndex]） 65 | - 返回在数组中指定元素第一次出现的索引，如果不存在，返回-1； 66 | - lastIndexOf（searchValue[，fromIndex]） 67 | - 返回在数组中指定元素最后一次出现的索引，如果不存在，返回-1 68 | 69 | - slice(begin[，end]) 70 | - 截取从begin开始，到end为止的数据，并作为一个新数组返回。 71 | 72 | 73 | 74 | #### 数组新增方法 75 | 76 | - forEach（callback（ele，index，array）[，thisArg]） 77 | - 对数组中的每一个元素，执行一次提供的函数，返回undefined 78 | - 参数： 79 | - callback 执行的函数 80 | - ele：数组循环中的元素 81 | - index：元素对应的下标 82 | - array：当前正在操作的数组 83 | - thisArg ：决定callback中的this指向 84 | - filter（callback（ele，index，array）[，thisArg]） 85 | - 筛选出符合函数中条件的元素，并作为一个新数组返回 86 | - 参数 87 | - callback 条件函数 88 | - ele：数组循环中的元素 89 | - index：元素对应下标 90 | - array：当前正在操作的数组 91 | - thisAry：决定callback中的this指向 92 | - map（callback（ele，index，array）[，thisArg]） 93 | - 由数组中的每一位元素执行函数后的结果，作为新数组的值 94 | - 参数： 95 | - callback 执行的函数 96 | - ele：数组循环中的元素 97 | - index：元素对应下标 98 | - array：当前正在操作的数组 99 | - thisAry：决定callback中的this指向 100 | - reduce（callback（result，ele，index，array）[，initiaValue]） 101 | - 对数组中的每一个元素执行callback函数，将结果根据callback函数中的条件，返回单个值。 102 | - 参数： 103 | - callback 执行的函数 104 | - result：上一次累计的结果 105 | - ele：当前正在操作的元素 106 | - index：元素对应的下标 107 | - array：当前正在操作的数组 108 | - initiaValue：result的初始值，如果不提供，则将使用数组中的第一个值。 109 | - some（callback（ele，index，array）[，thisArg]） 110 | - 测试数组中是否至少有一个元素通过了指定函数的测试，结果返回布尔值 111 | - 参数： 112 | - callback 执行的函数 113 | - ele：数组循环中的元素 114 | - index：元素对应下标 115 | - array：当前正在操作的数组 116 | - thisAry：决定callback中的this指向 117 | - every（callback（ele，index，array）[，thisArg]） 118 | - 测试数组中所有的元素是否都通过了指定函数的测试，结果返回布尔值。 119 | - 参数： 120 | - callback 执行的函数 121 | - ele：数组循环中的元素 122 | - index：元素对应下标 123 | - array：当前正在操作的数组 124 | - thisAry：决定callback中的this指向 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/3-对象方法.md: -------------------------------------------------------------------------------- 1 | # 对象方法 2 | 3 | - keys（obj） 4 | - 返回一个由key组成的数组 5 | - values（obj） 6 | - 返回一个由value组成的数组 7 | 8 | 9 | 10 | #### 删除对象中的元素 11 | 12 | ```javascript 13 | delete obj.key 14 | ``` 15 | 16 | -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/4-JSON.md: -------------------------------------------------------------------------------- 1 | # JSON 2 | 3 | ### JSON是什么？ 4 | 5 | JSON是一种轻量级的数据交换格式。因为语言的种类繁多，且不同的语言对于数据有不同的定义，例如： 6 | 7 | php 中的数组，分为两种形式，一种：索引数组，这个与我们 JS 中的数组类似；还有一种：关联数组，它更像是我们 JS 中的对象，但是在php中他们都是数组。 8 | 9 | ![](4/timg.jpg) 10 | 11 | 12 | 13 | ### JSON的数据格式 14 | 15 | ```javascript 16 | var jsonString = '{"key":value}'; 17 | ``` 18 | 19 | 20 | 21 | - JSON.parse( ) 22 | - 把JSON数据转化为 JS 中对应的数据，方便操作。 23 | - JSON.stringify( ) 24 | - 把JS中的数组或对象，转成JSON字符串进行输出。 -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/4/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第九章：数组和字符串方法（超级常用的方法）/4/timg.jpg -------------------------------------------------------------------------------- /第九章：数组和字符串方法（超级常用的方法）/5-Math方法.md: -------------------------------------------------------------------------------- 1 | # Math方法 2 | 3 | 提供了与数学操作有关的一些属性与方法 4 | 5 | > 与其它内置对象（如Date、Array等）不同，Math不能作为一个函数去使用，它只是一个对象常用属性 6 | 7 | ### 常用属性 8 | 9 | - PI 10 | - 圆周率：Math.PI=π≈3.14159 11 | 12 | ### 常用方法 13 | 14 | ##### 取整相关 15 | 16 | - ceil(x) 17 | - 返回大于或等于 `x` 的最小整数，即：向上取整 18 | - 参数 19 | - x：任意数值 20 | - floor(x) 21 | - 返回小于或等于 `x` 的最小整数，即：向下取整 22 | - 参数 23 | - x：任意数值 24 | - round(x) 25 | - 返回 `x` 四舍五入后的整数值 26 | - 参数 27 | - x：任意数值 28 | 29 | > 以上数字如果不能被转换成数值，则会得到NaN 30 | 31 | ##### 随机数 32 | 33 | - random() 34 | - 随机返回一个 0（包括0）到 1 （不包括1）之间的小数 35 | - 扩展： 36 | - 返回一个 0 到 n 之间的数 37 | - 返回一个 n 到 m 之间的数 38 | 39 | ##### 最大值与最小值 40 | 41 | - min([value1[,value2, ...]]) 42 | - 返回传入参数中最小的值 43 | - 参数 44 | - 0 到 n 个数字 45 | - 注意： 46 | - 如果没有参数，返回 `Infinity` 47 | - 如果参数中包含不能转成（内部通过Number方法）数字的，返回 `NaN` 48 | - max([value1[,value2, ...]]) 49 | - 返回传入参数中最大的值 50 | - 参数 51 | - 0 到 n 个数字 52 | - 注意： 53 | - 如果没有参数，返回 -`Infinity` 54 | - 如果参数中包含不能转成数字的（内部通过Number方法），返回 `NaN` 55 | 56 | ##### 绝对值 57 | 58 | - abs(x) 59 | - 返回 `x` 的绝对值 60 | - 参数 61 | - 一个数值 62 | - 注意： 63 | - 传入参数如果不能转成数字的（内部通过Number方法），返回 `NaN` 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /第二章：玩转属性操作（把元素当魔方玩）/1/JS1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第二章：玩转属性操作（把元素当魔方玩）/1/JS1.gif -------------------------------------------------------------------------------- /第二章：玩转属性操作（把元素当魔方玩）/1/timg (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第二章：玩转属性操作（把元素当魔方玩）/1/timg (1).jpg -------------------------------------------------------------------------------- /第二章：玩转属性操作（把元素当魔方玩）/JS属性操作.md: -------------------------------------------------------------------------------- 1 | # JS 属性操作 2 | 3 | ![timg (1)](1/timg (1).jpg) 4 | 5 | ### 什么是属性？ 6 | 7 | 属性就是人类对于一个物体抽象方面的刻画。 8 | 9 | 例如我们说一个小姐姐好看。好看的概念是比较抽象的，那么哪些方面让你觉得这个小姐姐好看呢？ 10 | 11 | - 大大的眼睛 12 | - 长长的头发 13 | - 弯弯的眉毛 14 | - 瘦瘦的，看起来100斤左右 15 | - 皮肤很白 16 | - 牙齿很整齐 17 | 18 | 通过以上的这些描述，我们的脑海中就会对这个小姐姐有一定的刻画，那么这些就是属性。 19 | 20 | 21 | 22 | ### JS 中两种操作属性的方法 23 | 24 | - 点 - . 25 | - 元素 . 属性 26 | - 方括号 -> [ ] 27 | - 元素 [' 属性 '] 28 | 29 | 30 | 31 |

方括号中可以填入需要计算的东西，或者不符合标识符规范的!

32 | 33 | 34 | 35 | ### JS 的读与写操作 36 | 37 | ```javascript 38 | ele.style.background; //读 39 | 40 | ele.style.background = 'red'; //写 41 | ``` 42 | 43 | 44 | 45 | ### 常用属性 46 | 47 | - id 48 | - className 49 | - value 50 | - style 51 | - background 52 | - color 53 | - width 54 | - height 55 | - cssText 56 | - innerHTML 57 | - href 58 | - src 59 | - tagName 60 | 61 | 62 | 63 | ### 属性操作时的注意事项及常见问题 64 | 65 | 66 | 67 | - href 值和 src 值获取到的是绝对路径 68 | - style 是行间属性 69 | - cssText 会替换掉当前所有的行间属性 70 | - class 是关键字，改成 className 71 | - tagName 获取到的是大写字母 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | ### 作业：DIV 150 | 151 | ![](1/JS1.gif) 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1-数学运算符及隐式类型转换.md: -------------------------------------------------------------------------------- 1 | # 数学运算符的运算规则 2 | 3 | ![](1/title.jpg) 4 | 5 | ## 数学运算符 6 | 7 | +加、- 减、* 乘、/ 除、% 取模（求余数）++递增 --递减 + 正号 - 负号 8 | 9 | ### 加性操作符 10 | 11 | 加法和减法是加性操作符下面的两个运算符，与我们日常接触的数学中的加法减法是一样的，当然除此之外，他们也有另外一些比较特殊的地方。 12 | 13 | **- 加法** 14 | 15 | - 当左右两侧的操作数，任何一侧为字符串，另一侧非字符串的类型则转为字符串，进行字符串的拼接。 16 | 17 | - 当左右两侧都为Number类型的情况下，按照如下规则返回结果： 18 | 19 | 1. 左右两侧均为数值，执行常规的加法计算； 20 | 2. 如果有一个操作数是NaN，则结果返回NaN； 21 | 22 | - 如果操作数是布尔值，undefined、null，则会（根据对应的规则）转为数字类型，然后再进行计算，如果其中转换结果为NaN，则结果就是NaN。 23 | 24 | 25 | 26 | #### 小测试题 27 | 28 | ```javascript 29 | var result = '1' + 2 + 3 30 | ``` 31 | 32 | 33 | 34 | **- 减法** 35 | 36 | - 当左右两侧都为Number类型的情况下，按照如下规则返回结果： 37 | 1. 左右两侧均为数值，执行常规的减法计算； 38 | 2. 如果其中一个操作数是NaN，则返回NaN； 39 | 40 | - 如果操作数是字符串、布尔值、undefined、null，则先会（根据对应的规则）转为数字类型，然后再进行计算，如果其中转换结果为NaN，则结果就是NaN。 41 | 42 | 43 | 44 | #### 减法为什么是加性操作符？？ 45 | 46 | > The `-` operator performs subtraction when applied to two operands of numeric type, producing the difference of its operands; the left operand is the minuend and the right operand is the subtrahend. Given numeric operands a and b, it is always the case that *a–b* produces the same result as *a +(–b)*. 47 | > 48 | > 减号运算符作用于两个数字类型时表示减法，产生两个操作数之差。左边操作数是被减数右边是减数。给定操作数a和b，总是有a–b产生与a + ( -b )产生相同结果。 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | # 隐式类型转换规则 57 | 58 | ![](1/timg.jpg) 59 | 60 | 相信大家对复仇者联盟这个电影应该都不陌生，在电影中，每次遇到危险，钢铁侠就会主动变身，他就像我们在操作数据的时候，强制的类型转换，由我们自己主动控制。 61 | 62 | 但是在联盟中，还有一个没办法控制变身的人，就是绿巨人浩克，有些时候总是突然的就变身了，他就像我们JS中的隐式类型转换。 63 | 64 | 隐式类型转换：我们没有主动的对值进行转换，但是因为我们的某些操作引起JS自动帮我们进行转换，这样的转换是在JS内部自己实现的， 65 | 66 | 67 | 68 | 例如： 69 | 70 | ​ 使用加法运算符的时候，当有一侧的操作数为字符串，JS会自动把另一侧的操作数也转换为字符串，然后进行拼接 71 | 72 | ```javascript 73 | var a = '10' + 10; //1010 74 | ``` 75 | 76 | ​ 使用减法运算符的时候，当有一侧的操作数不为数字，JS就会自动的把操作数转换为数字，然后进行计算 77 | 78 | ```javascript 79 | var b = '20' - 10; //10 80 | ``` 81 | 82 | 83 | 84 | **那这些转换规则如何得知？** 85 | 86 | 中文参考网址：http://www.fengfly.com/document/ECMAScript5.1/ 87 | 88 | ECMA官网：http://www.ecma-international.org/ecma-262/5.1/# 89 | 90 | 91 | 92 | > 中文版参考网站，仅作为参考，并非官方。 93 | 94 | 95 | 96 | ### 乘性操作符 97 | 98 | 包含 乘法 （ * ） 除法 （ / ） 取模（ % ） 99 | 100 | 101 | 102 | **- 乘法操作符** 103 | 104 | - 当左右两侧都为Number类型的时候，按照如下规则返回结果： 105 | 1. 左右两侧均为数值，按照常规的乘法计算； 106 | 2. 如果有一个操作数是NaN，则结果返回NaN； 107 | - 如果有一侧不是Number类型，则（根据对应的规则）转为数字类型，然后进行计算。 108 | 109 | ```javascript 110 | var result = '10' * '20'; // 200 111 | ``` 112 | 113 | 114 | 115 | **- 除法操作符** 116 | 117 | - 当左右两侧都为Number类型的时候，按照如下规则返回结果： 118 | 1. 如果左右两侧均为数值，则按照常规的乘法计算； 119 | 2. 如果是非零的有限数被零除，则结果返回 Infinity 或 -Infinity； 120 | 3. 如果是零被零除，则返回NaN； 121 | 4. 如果有一个操作数是NaN，则结果返回NaN； 122 | - 如果有一侧不是Number类型，则（根据对应的规则）转为数字类型，然后进行计算。 123 | 124 | ```JAVAScript 125 | 126 | var resule = '10'/ 20 ;// 0.5 127 | ``` 128 | 129 | 130 | 131 | **-取模操作符** 132 | 133 | 134 | 135 | ❤数学题來啦~ 136 | 137 | > 爸爸给了你100元，让你去超市帮他买烟，看看能买多少，如果有剩下的，就都归你啦~一包烟30元，请问最多可以买几包？又剩余多少钱？ 138 | 139 | 在这里我用的数字都比较简单，一共100元，30一包，100 / 30 = 3.3333333 ，但是售货员肯定不会0.3333这样卖给你 140 | 141 | 所以最终，我们能买到的最大数值，就是3，那么买完三包后，剩下的钱，就是我们的余数，剩下10元~那我就不客气的收下啦。 142 | 143 | 144 | 145 | 取模：进行除法计算，但是目的是为了得到余数，而不再是得到结果。 146 | 147 | - 如果左右两侧均为Number类型的时候，按照如下规则返回结果： 148 | 1. 如果左右两侧均为数值，按照常规的除法进行计算，返回余数； 149 | 2. 如果有一侧是NaN，则结果返回NaN； 150 | 3. 如果除数为0，则结果返回NaN； 151 | - 如果有一侧不是Number类型，则（根据对应的规则）转为数字类型，然后进行计算。 152 | 153 | ```javascript 154 | var a = 10; 155 | if(a % 2){ 156 | alert("a存的是个奇数") 157 | }else{ 158 | alert("a存的是个偶数"); 159 | } 160 | ``` 161 | 162 | 163 | 164 | 165 | 166 | ### 一元操作符 167 | 168 | 只能操作一个值的操作符叫做一元操作符。 169 | 170 | **- 一元加运算符** 171 | 172 | - 如果操作数是Number类型的时候，正号放在数值前面，对其完全没有任何影响 173 | - 如果操作数是string、true、false、null、undefined，则（根据对应规则）转为数字类型。 174 | 175 | 176 | 177 | ```javascript 178 | var num = 5; 179 | alert( +num ); //5 180 | ``` 181 | 182 | 183 | 184 | **- 一元减运算符** 185 | 186 | - 如果操作数是Number类型的时候，负号放在数值前面，表示负数。 187 | - 如果操作数是string、true、false、null、undefined，则（根据对应规则）转为数字类型。 188 | 189 | 190 | 191 | ```javascript 192 | var num = 10; 193 | alert( -num ); 194 | ``` 195 | 196 | 197 | 198 | ### 巧妙利用隐式类型转换 199 | 200 | 我们偶尔可以利用隐式类型转换来达到我们想要将数据转化为另一种类型的目的。 201 | 202 | 203 | 204 | ```javascript 205 | var num = '123'; 206 | console.log(typeof +num); 207 | 208 | var str = 123; 209 | console.log( typeof (str + '') ); 210 | ``` 211 | 212 | > 这种转换一般在已经可以明确想要的结果的类型的情况下使用。 213 | 214 | 215 | 216 | **递增和递减运算符** 217 | 218 | - 前置型 219 | 220 | ```javascript 221 | var a = 10; 222 | var b = 20; 223 | ++a; //11 224 | --b; //19 225 | ``` 226 | 227 | - 后置型 228 | 229 | ```JAVASCript 230 | var a = 10; 231 | var b = 20; 232 | a++; //11 233 | b--; //19 234 | ``` 235 | 236 |

前置型，变量的值都是在语句被求值以前发生改变

237 | 238 | ```javascript 239 | var num = 10; 240 | var num1 = ++num - 2; //9 241 | var num2 = num - 2; //9 242 | ``` 243 | 244 |

后置型，变量的值都是在语句被求值以后发生改变

245 | 246 | ```javascript 247 | var num = 10; 248 | var num1 = num++ -2; // 8 249 | var num2 = num - 2; //9 250 | ``` 251 | 252 | 253 | 254 | - 当遇到Number类型时，如果是数值，直接进行计算。 255 | - 如果是string、null、undefined、false、true，则（根据对应规则）转换为数字类型后进行计算。 256 | 257 | 258 | 259 | ## ！！需要注意的一个大问题 260 | 261 | 在上述所有演示中，我们用到的都是整数，所以并看不出这个问题。实际上，在工作中我们经常还可能获取到一些带有小数的值。这样的值在计算的过程中，会产生一些我们无法理解的问题。 262 | 263 | ```javascript 264 | console.log(0.1 + 0.2); //0.30000000000000004 265 | ``` 266 | 267 | 我们通过口算可以得出，结果应该是0.3，但是实际上，我们得到的结果却是0.30000000000000004。 268 | 269 | > 这个问题的主要原因是基于IEEE754数值的浮点计算，ECMAScript并不是独此一家。很多其他的语言也存在这一的问题，感兴趣的同学可以研究下IEEE754，里面涉及的问题对于初学者不是很好理解。在这里就不过多解释。 270 | 271 | 272 | 273 | **解决方法** 274 | 275 | 将小数转换为整数之后，进行计算，然后再转换回对应的小数。 276 | 277 | ```javascript 278 | var a = 0.1; 279 | var b = 0.2; 280 | console.log( (0.1 * 10 + 0.2 * 10) / 10 ); //0.3 281 | ``` 282 | 283 | 这样的方式尽管繁琐，但是可以有效的解决问题。 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/timg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/timg.gif -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/timg.jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/title.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/1/title.jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/2-赋值操作符.md: -------------------------------------------------------------------------------- 1 | # 赋值运算符 2 | 3 | ![](2/timg (1).jpg) 4 | 5 | = 等号、 += 加等 、 -= 减等 、 *= 乘等 、 /= 除等 、 %= 模等 6 | 7 | 8 | 9 | #### 等号（=）赋值运算符 10 | 11 | 作用把右侧的值，赋给左侧的变量。 12 | 13 | ```javascript 14 | var num = 10; 15 | ``` 16 | 17 | 如果在等号（=）赋值运算符前添加 加号运算符 或 减法运算符 ，就可以完成复合赋值运算，例如加等： 18 | 19 | ```javascript 20 | var num = 10; 21 | num = num + 5; 22 | 23 | var result = 10; 24 | result += 5; 25 | ``` 26 | 27 | 28 | 29 | 大部分的数学操作符都可以搭配上赋值运算： 30 | 31 | 32 | 33 | **减等** 34 | 35 | ```javascript 36 | var num = 10; 37 | num = num - 5; 38 | 39 | var result = 10; 40 | result -= 5; 41 | ``` 42 | 43 | 44 | 45 | **乘等** 46 | 47 | ```javascript 48 | var num = 10; 49 | num = num * 5; 50 | 51 | var result = 10; 52 | result *= 5; 53 | ``` 54 | 55 | 56 | 57 | **除等** 58 | 59 | ```javascript 60 | var num = 10; 61 | num = num / 5; 62 | 63 | var result = 10; 64 | result /= 5; 65 | ``` 66 | 67 | 68 | 69 | **模等** 70 | 71 | ```javascript 72 | var num = 10; 73 | num = num % 5; 74 | 75 | var result = 10; 76 | result %= 5; 77 | ``` 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/2/timg (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/2/timg (1).jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/3-比较运算符.md: -------------------------------------------------------------------------------- 1 | # 比较操作符 2 | 3 | ![](3/timg (1).jpg) 4 | 5 | 6 | 7 | “大鱼吃小鱼”这个游戏应该都不陌生吧？如果你喜欢玩游戏，你会发现，很多游戏都有这种比较的关系，像是“黑洞大作战”，像是“跳一跳”，当然今天我不是来给大家推荐游戏的~ 而是来告诉大家在JS中的比较，是如何做的。 8 | 9 | 10 | 11 | ### 关系操作符 12 | 13 | < 小于 、 > 大于 、<= 小于等于 、 >= 大于等于 14 | 15 | 关系操作符通常用来比较，两个值的大小关系，结果返回一个布尔值。 16 | 17 | **小于和大于** 18 | 19 | ```javascript 20 | var num1 = 10; 21 | var num2 = 20; 22 | 23 | alert(num1 < num2); //true 24 | alert(num1 > num2); //false 25 | ``` 26 | 27 | **大于等于和小于等于** 28 | 29 | ```javascript 30 | var num1 = 10; 31 | var num2 = 20; 32 | 33 | alert(num1 >= num2); //false 34 | alert(num1 <= num2); //true 35 | ``` 36 | 37 | 38 | 39 | #### 运算规则 40 | 41 | - 如果左右两侧都是数值，则数值之间进行比较 42 | - 如果左右两侧都是字符串，则根据字符串对应的字符编码值 43 | - 如果有一侧是NaN，则结果得到false 44 | 45 | - 如果是null、undefined、true、false，则（会根据对应的规则）进行转换，然后进行比较。 46 | 47 | 48 | 49 | 查看编码地址：https://baike.baidu.com/item/ASCII/309296?fromtitle=ASCII%E7%BC%96%E7%A0%81&fromid=3712529 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | ### 相等操作符 104 | 105 | ==相等 != 不等 === 全等 !== 全不等， 用于确认两个变量之间，是否相等。 106 | 107 | 108 | 109 | **相等和全等** 110 | 111 | 虽然都是比较两个值是否相等，但是在比较的时候，它们分别遵循不一样的规则。 112 | 113 | **相等** 114 | 115 | ---- 116 | 117 | 比较两个操作数之间是否相等，如果相等会返回true，如果不相等会返回false，在比较的时候，会进行隐式类型转换。 118 | 119 | ```javascript 120 | alert(1 == 1); //true 121 | alert('1' == 1); //true 122 | alert(true == 1)// true 123 | ``` 124 | 125 | **隐式转换规则** 126 | 127 | - NaN不等于任何类型的数值，包括自己本身，所以一定返回false； 128 | - 如果都是String类型的话，比较字符编码值，如果完全一致，则返回true，否则返回false； 129 | - 如果两侧都是Number类型数值，比较值是否相同； 130 | - 如果两边都是Object类型，则比较地址是否一致； 131 | - null == undefined 返回true； 132 | - 如果一侧是String，一侧是Number，将String（指的是不是数值类型的字符串）转换为NaN之后，进行比较； 133 | - 如果一侧是Boolean，则把布尔值转换为Number类型后，在根据上述规则进行比较； 134 | - 具体参照ECMAScript规则； 135 | 136 | 137 | 138 | **全等** 139 | 140 | --- 141 | 142 | 全等也是比较两个操作数之间是否相等的，但是与 == 不同，它从以下两个点进行考虑： 143 | 144 | 1. 值是否相等 145 | 2. 类型是否相等 146 | 147 | ```JAVASCript 148 | alert( 1 === 1); //true 149 | alert( '1' === 1); //false 150 | alert( true === 1); //false 151 | ``` 152 | 153 | 因为会判断类型，所以在这里并不会进行隐式类型的转换。 154 | 155 | - 一旦两个操作数的数据类型不同，直接返回false。 156 | - 一旦出现NaN，返回结果false； 157 | - 当类型一致的情况下，比较值是否相同，如果不同返回false，如果相同返回true 158 | 159 | 160 | 161 | **不等和全不等** 162 | 163 | 和以上的相等和全等一样，不等和全不等在比较的时候： 164 | 165 | 前者只注重值，并且会进行隐式类型的转换，转换的规则与**相等**是一致的，只是返回的结果正好是相反的。 166 | 167 | 后者在注重值的同时，还会注重类型是否相同，转换规则与**全等**是一致的，只是返回的结果正好是相反的。 168 | 169 | -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/3/timg (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/3/timg (1).jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/3/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/3/timg.jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/4-逻辑运算符.md: -------------------------------------------------------------------------------- 1 | # 逻辑运算符 2 | 3 | && 与 、 || 或 、! 非 4 | 5 | **与 —— &&** 6 | 7 | --- 8 | 9 | 作用在两个条件之间 10 | 11 | - 当第一个条件转换为 Boolean 为 false ，返回第一个值； 12 | - 当第一个条件转换为 Boolean 为 true ，返回第二个值； 13 | 14 | ```javascript 15 | var num1 = 0 && 3; 16 | var num2 = 1 && 3; 17 | 18 | console.log(num1); //0 19 | console.log(num2); //1 20 | 21 | ``` 22 | 23 | 24 | 25 | **或 —— ||** 26 | 27 | --- 28 | 29 | 作用在两个条件之间 30 | 31 | - 当第一个条件转换为 Boolean 为 false，返回第二个值； 32 | - 当第一个条件转换为 Boolean 为 true ，返回第一个值； 33 | 34 | ```javascript 35 | var num1 = 0 || 3; 36 | var num2 = 1 || 3; 37 | 38 | console.log(num1); //3 39 | console.log(num2); //1 40 | 41 | ``` 42 | 43 | 44 | 45 | **非 —— !** 46 | 47 | --- 48 | 49 | 作用在一个条件上，所以也是一元运算符的成员之一，表示对该操作数进行取反操作，所以会对改数据进行隐式类型转换为布尔值，然后取反，最后返回一个Boolean值。 50 | 51 | - 如果操作数是Object类型，结果返回false；（所有对象均为true） 52 | - 如果操作数是一个空字符串，结果返回true； 53 | - 如果是非空的字符串，结果返回false； 54 | - 如果是Number数值0，结果返回true； 55 | - 如果是NaN，返回true； 56 | - 如果是非0数值，返回false； 57 | - 如果是 null 或 undefined ，返回true； 58 | 59 | ```javascript 60 | 61 | alert( !{} ); // false 62 | alert( !'' ); // true 63 | alert( !'javascript' ); // false 64 | alert( !0 ); //true 65 | alert( !NaN ); //true 66 | alert( !123 ); //false 67 | alert( !null ); //true 68 | alert( !undefined ); //true 69 | 70 | ``` 71 | 72 | 73 | 74 | **! 非运算符，并不是只可以写一个，而是可以在操作数前写多个，具体执行过程如下** 75 | 76 | ```javascript 77 | alert( !!!0 ) 78 | ``` 79 | 80 | 1. !0 => 对0进行隐式类型转换为 Boolean ，然后取反，得到结果true； 81 | 2. !!true => 后续的执行其实就是这样的,对布尔值true进行取反 82 | 3. !true => 得到结果 false。 83 | 4. !false => true 84 | 85 | > 注意这里的第二步的结果，其实就是对当前数据直接调用 Boolean() 的结果是一致的，所以当我们希望可以得到这个数据对应的布尔值的时候，我们也可以在前面加上两个取反（类似负负得正）； 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/4/timg (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/4/timg (2).jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/4/u=2375260696,3837887499&fm=26&gp=0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/4/u=2375260696,3837887499&fm=26&gp=0.jpg -------------------------------------------------------------------------------- /第五章：ECMAScript数据类型及类型转换（生来不是程序猿）/5-运算符优先级.md: -------------------------------------------------------------------------------- 1 | # 运算符优先级 2 | 3 | ```javascript 4 | var result1 = 2 + 3; 5 | alert(result1); 6 | 7 | var result2 = 2 + 3 * 2; 8 | alert(result2) 9 | 10 | var result3 = 1 + 2 == 5 % 0; 11 | alert(result3); 12 | ``` 13 | 14 | 尽管我们之前说，计算是从左往右的，但是这只是在运算符优先级相同的情况下。一旦运算符的优先级不一致，则会先执行优先级高的，然后再执行低的。 15 | 16 | 17 | 18 | 运算符优先级查看地址： 19 | 20 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence 21 | 22 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/1-定时器.md: -------------------------------------------------------------------------------- 1 | # 定时器 2 | 3 | ![](1/timg.jpg) 4 | 5 | 在生活中，我们经常会把一件事情，放到一段时间后去做，例如： 6 | 7 | - 2小时候后关闭空调 8 | - 明天早上7点闹铃响 9 | - 炸弹1分钟后再引爆 10 | 11 | 因为我们生活中经常有这样的需求，为了满足这样的需求，那么我们的程序中就需要可以实现这样功能的代码。 12 | 13 | **案例描述：** 14 | 15 | ![](1/pic.gif) 16 | 17 | - 点击按钮显示提示框 18 | - 间隔一段时间后，提示框自动消失 19 | 20 | 21 | 22 | ### 定时器是什么？ 23 | 24 | JavaScript中提供的函数（并非我们自己定义）。 25 | 26 | 27 | 28 | ### 定时器的作用？ 29 | 30 | 每隔一段时间或者延迟一段时间，执行一段指定的代码。 31 | 32 | 33 | 34 | ### 定时器的分类 35 | 36 | - 延迟定时器 setTimeout - （timeout 超时） 37 | - 间隔定时器 setInterval - （interval 间隔） 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/1/pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/1/pic.gif -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/1/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/1/timg.jpg -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/2-延迟定时器.md: -------------------------------------------------------------------------------- 1 | # 延迟定时器 2 | 3 | ![](2/0007020102968306_b.jpg) 4 | 5 | - 延迟一段时间后，执行指定的代码。 6 | 7 | 8 | 9 | ### 语法 10 | 11 | ```javascript 12 | setTimeout(code[,time,param1,param2,param3...]) 13 | ``` 14 | 15 | - code 16 | - 指定要执行的代码（可以是function || string） 17 | - time（可选） 18 | - 延迟的时间，以毫秒（ms）为单位，1秒（s） = 1000ms（毫秒） 19 | - param1...paramN （可选）IE9及以下不可用 20 | - 附加的参数，一旦定时器到期，他们会作为参数传递给function 21 | 22 | 23 | 24 | ### 清除定时器 25 | 26 | **clearTimeout( ID )** 27 | 28 | - ID —— 定时器在执行的时候会有一个返回值，该返回值为正整数，并且唯一。 -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/2/0007020102968306_b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/2/0007020102968306_b.jpg -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/3-间隔定时器.md: -------------------------------------------------------------------------------- 1 | # 间隔定时器 2 | 3 | 4 | 5 | "叮叮叮~下课啦~"，遥想当年念书的时候下课铃声简直就是天籁之音。每隔一段时间就会响起，提醒我应该休息休息了。 6 | 7 | **作用：**每间隔一段时间，就执行指定代码。 8 | 9 | ### 语法 10 | 11 | ```javascript 12 | setInterval(code[,time,param1,param2...paramN) 13 | ``` 14 | 15 | - code 16 | - 指定要执行的代码（可以是function || string） 17 | - time（可选） 18 | - 延迟的时间，以毫秒（ms）为单位，1秒（s） = 1000ms（毫秒） 19 | - param1...paramN （可选）IE9及以下不可用 20 | - 附加的参数，一旦定时器到期，他们会作为参数传递给function 21 | 22 | 23 | 24 | ### 清除定时器 25 | 26 | ```javascript 27 | clearInterval( ID ) 28 | ``` 29 | 30 | - ID —— 定时器在执行的时候会有一个返回值，该返回值为正整数，并且唯一。 31 | 32 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/3/class.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/3/class.jpg -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/4-定时器管理.md: -------------------------------------------------------------------------------- 1 | # 定时器管理 2 | 3 | - 定时器可以开启多个，一旦开启多个定时器控制同一个元素，就会产生一定的问题。 4 | 5 | ### 管理定时器 6 | 7 | 1. 每次开启定时器前，都清除上一次的定时器。 8 | 2. 利用开关控制是否开始定时器 9 | 10 | 11 | 12 | ```javascript 13 | //暴力清除，清除上一次的定时器 14 | var timer = null; 15 | btn.onclick = function(){ 16 | clearInterval(timer); 17 | timer = setInterval(function(){ 18 | console.log('这是定时器'); 19 | },1000) 20 | } 21 | 22 | //开关限制定时器的开启 23 | var onOff = false; 24 | var num = 0; 25 | var timer = null; 26 | btn.onclick = function(){ 27 | onOff = true; 28 | if(!onOff){ 29 | return 30 | } 31 | timer = setInterval(function(){ 32 | num++; 33 | console.log('这是定时器'); 34 | if(num >= 10){ 35 | clearInterval(timer); 36 | } 37 | 38 | },1000) 39 | } 40 | 41 | 42 | ``` 43 | 44 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/5-定时器的问题.md: -------------------------------------------------------------------------------- 1 | # 定时器的问题 2 | 3 | ![](5/police.jpg) 4 | 5 | 定时器虽好，注意事项也不少哦~ 6 | 7 | 8 | 9 | **注意事项** 10 | 11 | 1. 定时器里面的this指向 12 | 13 | ```javascript 14 | btn.onclick = function(){ 15 | setTimeout(function(){ 16 | console.log(this); //window 17 | },1000) 18 | } 19 | ``` 20 | 21 | 22 | 23 | 2. 一个参数不推荐使用字符串 24 | 25 | ```javascript 26 | setTimeout('fn()',1000); 27 | function fn(){ 28 | console.log('不推荐使用') 29 | } 30 | ``` 31 | 32 | **需要解析两次才可以执行**（影响性能，不推荐使用，并且存在xss注入风险） 33 | 34 | - 作为字符串进行解析 35 | - 作为函数进行解析 36 | 37 | 38 | 39 | 3. 第二个参数：time，是可选参数，如果不填默认为0，但是代码其实并不会立即执行（>=4ms） 40 | 41 | ```JAVASCRIPt 42 | for(var i=0;i<5;i++){ 43 | setInterval(function(){ 44 | console.log(i);//5 5 5 5 5 45 | },0) 46 | } 47 | ``` 48 | 49 | 50 | 51 | 52 | 53 | 4. 第三个参数开始可作为第一个function的参数，但是在IE9及以下不支持第三参数及它后面的参数 54 | 55 | ```javascript 56 | //解决方法1 57 | setTimeout('fn(param1,param2)',1000) 58 | 59 | function fn(x,y){ 60 | console.log(x + y); 61 | } 62 | 63 | //解决方法2 64 | setTimeout(function(){ 65 | fn(param1,param2); 66 | },1000) 67 | 68 | //解决方法3 69 | setTimeout(fn(param1,param2).bind(null,1,2),1000); 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/5/police.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/5/police.jpg -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/6-日期对象.md: -------------------------------------------------------------------------------- 1 | # 日期对象 2 | 3 | ![](6/duck.jpg) 4 | 5 | ### 什么是日期对象？ 6 | 7 | - 一个和日期有关的对象，用来处理日期和时间。是由js已经提供给我们的，我们称为内置对象。 8 | 9 | ### 内置对象 10 | 11 | - Array 12 | - Object 13 | - Date 14 | 15 | ...等等 16 | 17 | #### 英文科普小时间 18 | 19 | **日** - day 20 | 21 | **星期** - week 22 | 23 | - Monday 星期一 24 | - Tuesday 星期二 25 | - Wednesday 星期三 26 | - Thursday 星期四 27 | - Friday 星期五 28 | - Saturday 星期六 29 | - Sunday 30 | 31 | **月份** - month 32 | 33 | - January 一月 34 | - February 二月 35 | - March 三月 36 | - April 四月 37 | - May 五月 38 | - June 六月 39 | - July 七月 40 | - August 八月 41 | - September 九月 42 | - October 十月 43 | - November 十一月 44 | - December 十二月 45 | 46 | **年** - year 47 | 48 | 49 | 50 | ### 创建日期对象 51 | 52 | ```javascript 53 | var date = new Date(); 54 | ``` 55 | 56 | - 创建一个跟日期有关系的对象 57 | 58 | > 如果希望的到的是一个日期对象，必须通过new Date()进行调用，如果只是单纯执行Date()，得到的只是一个字符串。 59 | 60 | 61 | 62 | #### 参数 63 | 64 | 创建日期对象的时候，我们传入参数，不同的参数有不同的效果。 65 | 66 | - value 67 | - 代表自1970年1月1日00:00:00 (世界标准时间) 起经过的毫秒数。 68 | 69 | > 科普：为什么是1970年1月1日？ 70 | > 71 | > 很多编程语言起源于UNIX操作系统，而UNIX系统由贝尔实验室三位科学家在1969年开发，当时的电脑都是32位系统。 72 | > 73 | > 时间用32位带符号数字最多可以表示68年。 74 | > 75 | > 他们认为以1970年为时间的起始点够了，那么从1970年开始计算，经过68年，等2038年01月19日03时14分07 的时候，就会达到最大值。过了这个时间点，系统时间就会变成1901年12月13日20时45分52秒，时间会发生回退现象。不过由于现在大部分电脑已经是64位系统了，时间够我们用到千亿年以后，所以我们不用担心这个问题。 76 | 77 | - dateString 78 | - 表示日期字符串 79 | 80 | - year 81 | - 代表年份的整数值。为了避免2000年问题最好指定4位数的年份; 使用1998， 而不要用 98 82 | 83 | > *计算机2000*年问题，又叫做“千年虫”、“电脑千禧年千年虫问题”或“千年危机”。 84 | > 85 | > https://baike.baidu.com/item/%E5%8D%83%E5%B9%B4%E8%99%AB/2954?fr=aladdin 86 | 87 | - month 88 | - 0 ~11 ，0代表1月，11 代表 12月，在获取月份的时候一定要注意！ 89 | 90 | - day 91 | - 代表一月中的某一天，从1开始。 92 | 93 | - hour （小时） 94 | - 代表一天中的小时数，从0开始。 95 | - minute （分钟） 96 | - 分钟数，从0开始 97 | 98 | - second （秒钟），从0开始 99 | - millisecond（毫秒）从0开始 100 | 101 | ```javascript 102 | new Date(year,month[,day,hour,minutes,seconds,milliseconds]); 103 | ``` 104 | 105 | 106 | 107 | **注意事项** 108 | 109 | 1. 如果没有任何参数，会根据系统设置的当前时间来创建一个Date对象； 110 | 2. 至少提供两个参数，其余的参数均会默认为 1 或者 0； 111 | 3. 通过函数直接调用返回的是String，通过new调用的是Object； 112 | 4. 通过第三种方式设置的值，一旦超出会进行自动计算 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | ### 获取日期对象具体的方法 121 | 122 | - getFullYear() 123 | - 返回指定日期对象的年份 124 | - getMonth() 125 | - 返回指定日期对象的月份 126 | - getDate() 127 | - 返回指定日期对象中的第几天 128 | - getDay() 129 | - 返回指定日期对象星期中的第几天 130 | - getHours() 131 | - 返回指定日期对象的小时数 132 | - getMinutes() 133 | - 返回指定日期对象的分钟数 134 | - getSeconds() 135 | - 返回指定日期对象的秒钟数 136 | - getMilliseconds() 137 | - 返回指定日期对象的毫秒数 138 | 139 | - getTime() 140 | - 返回从1970年01月01日 至该日期对象经过了多少毫秒数，至会有正负。 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | ### 设置日期对象具体时间的方法 167 | 168 | - setFullYear() 169 | - 为指定日期对象设置完整年份 170 | - setMonth() 171 | - 为指定日期对象设置月份 172 | - setDate() 173 | - 为指定日期对象设置天数 174 | - setHours() 175 | - 为指定日期对象设置小时 176 | - setMinutes() 177 | - 为指定日期对象设置分钟 178 | - setSeconds() 179 | - 为指定日期对象设置秒数 180 | - setMilliseconds() 181 | - 为指定日期对象设置毫秒 182 | - setTime() 等同于 new Date(value) 写法，所以不多做描述 183 | - 通过毫秒数来设置日期对象时间，以1970年1月1日为时间起点 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /第八章：定时器和日期对象（如果你有改变时间的能力）/6/duck.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第八章：定时器和日期对象（如果你有改变时间的能力）/6/duck.jpg -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1-ECMAScript 流程控制md: -------------------------------------------------------------------------------- 1 | # ECMAScript 流程控制 2 | 3 | ![](1/money.jpg) 4 | 5 | **什么是流程？** 6 | 7 | 8 | 9 | ### 程序中的三种基本流程结构 10 | 11 | - 顺序结构 12 | - 分支结构 13 | - 循环结构 14 | 15 | 16 | 17 | #### 顺序结构 18 | 19 | ![](1/2.jpg) 20 | 21 | 按照顺序一条一条执行，从上至下。 22 | 23 | 24 | 25 | #### 分支结构 26 | 27 | ![](1/1.jpg) 28 | 29 | 执行的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。 30 | 31 | 32 | 33 | #### 循环结构 34 | 35 | ![](1/3.jpg) 36 | 37 | 重复的做一件事情，如果不给条件，就会无限执行。可以限制重复的次数。 -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/1.jpg -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/2.jpg -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/3.jpg -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/money.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/1/money.jpg -------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/2-流程控制-分支结构.md: -------------------------------------------------------------------------------- 1 | # 流程控制语句——分支结构 2 | 3 | 4 | 5 | ### if语句 6 | 7 | ```javascript 8 | // 单条件判断 9 | if(判断条件){//....} 10 | 11 | if(判断条件){ 12 | //.... 13 | }else{ 14 | //.... 15 | } 16 | 17 | // 多条件判断 18 | if(判断条件1){ 19 | //.... 20 | }else if(判断条件2){ 21 | //.... 22 | }else if(判断条件3){ 23 | //.... 24 | }else{ 25 | //.... 26 | } 27 | ``` 28 | 29 | ### switch 30 | 31 | ```javascript 32 | switch (表达式||变量) { 33 | case value1: 34 | console.log('执行的代码1'); 35 | break; 36 | case value2: 37 | console.log('执行的代码2'); 38 | break; 39 | case value3: 40 | console.log('执行的代码3'); 41 | break; 42 | default: 43 | console.log('执行的代码4'); 44 | break; 45 | } 46 | ``` 47 | 48 | - switch后面的小括号内可以写变量 || 表达式，一般都是变量。 49 | - value是与括号里的内容作比较的，这个比较是全等的比较。 50 | - 一旦满足全等的条件，就会执行后续的代码。 51 | - default，以上条件都不满足时候，执行这里对应代码。 52 | - default可以放在任何位置。 53 | 54 | 55 | 56 | **穿透** 57 | 58 | 一旦符合条件，并且没有break终止后续代码，会产生穿透问题，当前满足条件的位置开始，后续的执行代码，都会被执行。 59 | 60 | 61 | 62 | **break** 63 | 64 | break后面的代码会终止执行，并跳出。 65 | 66 | 67 | 68 |

所有的switch语句都可以用if语句代替

-------------------------------------------------------------------------------- /第六章：ECMAScript 流程控制 （把大象放冰箱需要三步）/3-流程控制语句-循环结构.md: -------------------------------------------------------------------------------- 1 | # 流程控制语句——循环结构 2 | 3 | 4 | 5 | 6 | 7 | #### for 循环 8 | 9 | ```javascript 10 | for(初始化;循环条件;变更条件){ 11 | //满足循环执行的代码... 12 | } 13 | ``` 14 | 15 | ### for ... in循环 16 | 17 | ```javascript 18 | for(var key in obj){ 19 | //这里的key指的就是对象下的属性 20 | } 21 | ``` 22 | 23 | ### while（前测试循环语句） 24 | 25 | ```javascript 26 | while(判断条件){ 27 | //需要循环的代码 28 | } 29 | ``` 30 | 31 | ### do while（后测试循环语句） 32 | 33 | ```javascript 34 | do{ 35 | //需要循环执行的代码 36 | }while( 37 | //判断条件 38 | ) 39 | ``` 40 | 41 | 42 | 43 | ### break 和 continue 44 | 45 | **break**（打破） 46 | 47 | - 终止当前循环，包括break后面的代码也会被停止执行，并且跳出该循环。 48 | 49 | **continue**（持续） 50 | 51 | - 终止当前循环，包括continue后面的代码也会被停止执行，但是不跳出循环，循环会在这次之后，继续执行。 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /第十一章：后续章节都会由莫莫老师录制，文档都在课件中/后续笔记由莫莫老师提供，直接在课件中.md: -------------------------------------------------------------------------------- 1 | 好好学习 天天向上 -------------------------------------------------------------------------------- /第十章：排序算法/1-递归.md: -------------------------------------------------------------------------------- 1 | # 递归 2 | 3 | ### 什么是递归？ 4 | 5 | - 在函数内部调用自己。 6 | 7 | ![](1/file.jpg) 8 | 9 | > 请问KKB这个文件夹下面一共有多少文件？ 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ### 递归的执行流程——栈 20 | 21 | **递归递归，有去有回。** 22 | 23 | >1. 打开百度 24 | >2. 搜索递归 25 | >3. 点开一篇递归的文章 26 | >4. 出现名词“栈” 27 | >5. 打开百度 28 | >6. 搜索“栈” 29 | >7. 点开一篇栈的文章 30 | >8. 出现名词”内存“ 31 | >9. 打开百度 32 | >10. 搜索“内存” 33 | > 34 | >..... 35 | > 36 | >11. 了解内存（1） 37 | >12. 了解栈（2） 38 | >13. 了解递归（3） 39 | 40 | 41 | 42 | #### 栈 43 | 44 | - 数据存储结构，这些数据都被放在内存中。 45 | - 特点：先进后出 46 | 47 | > 餐厅洗盘子，总是把刚洗好的放在最上面，最先放的在最下面 48 | > 49 | > 取盘子时候，从最上往下拿取 50 | 51 | ![](1/1wps图片.jpg) 52 | 53 | 54 | 55 | - 这里我们用于存储函数调用的记录，**但是栈的大小并非无限的，过多的内容会导致严重的性能问题，甚至栈溢出** 56 | 57 | 58 | 59 | **调用记录** 60 | 61 | 执行函数时候的一些信息：例如函数中的局部变量、函数的位置信息等... 62 | 63 | 64 | 65 | #### 内存 66 | 67 | 存储数据的地方，但是不同的数据需要以不一样的形式进行存储。 68 | 69 | > 例如冰箱我们可以放食物，但是冰箱也分为冷藏区和冷冻区。 70 | > 71 | > 冷藏区：蔬菜、饮品 72 | > 73 | > 冷冻区：雪糕、速冻饺子 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ### 递归的优化——尾递归 86 | 87 | #### 尾调用 88 | 89 | - 在一个函数执行的最后一步，是调用函数。 90 | 91 | ```javascript 92 | function fn(){ 93 | console.log(1); 94 | fn1()； 95 | } 96 | ``` 97 | 98 | 99 | 100 | **以下情况不属于尾调用** 101 | 102 | ```javascript 103 | function fn(){ 104 | fn1(); 105 | console.log(1); 106 | } 107 | 108 | function fn(){ 109 | return fn1() + 1; 110 | } 111 | ``` 112 | 113 | - 情况一 114 | 115 | > 最后一个执行的是 `console.log()`; 116 | 117 | - 情况二 118 | 119 | > 最后一个执行的是：拿到`fn1`的返回值之后 +1； 120 | 121 | 122 | 123 | **尾调用不一定需要出现在代码的最后，必须是最后一个执行的** 124 | 125 | ```javascript 126 | function fn(){ 127 | if(true){ 128 | fn1(); 129 | }else{ 130 | fn2(); 131 | } 132 | } 133 | ``` 134 | 135 | 136 | 137 | #### 尾调用优化原理 138 | 139 | 函数执行的时候，会生成一个“调用记录”以栈的数据形式存放到内存中，多了以后就会产生溢出问题。我们可以利用尾调用优化。 140 | 141 | ![](1/2.jpg) 142 | 143 | 144 | 145 | **下图为利用尾调用优化后的栈存储** 146 | 147 | ![](1/3.jpg) 148 | 149 | - 栈内只会存在当前函数的“调用记录”，由于尾调用是最后一步，后续不再用到当前函数内的变量、位置等信息，所以可以销毁。 150 | 151 | 152 | 153 | #### 尾递归 154 | 155 | - 一个函数的执行的最后一步，是调用自己本身。 156 | 157 | **乘阶案例：1\*2\*3\*4\*5** 158 | 159 | ```javascript 160 | //普通递归 161 | function fn(n){ 162 | if(n===1){ 163 | return 1; 164 | } 165 | return n * fn( n-1 ); 166 | } 167 | 168 | //尾递归 169 | function fn(n,total){ 170 | if(n === 1){ 171 | return total; 172 | } 173 | return fn(n-1,n*total) 174 | } 175 | 176 | ``` 177 | 178 | **注：es6才实现了尾递归优化，但是必须是在严格模式下** -------------------------------------------------------------------------------- /第十章：排序算法/1/1wps图片.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/1wps图片.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/2.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/3.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/file.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/file.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-1.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-2.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-3.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-4.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-5.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-6.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-7.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-8.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/quickSort-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/quickSort-9.jpg -------------------------------------------------------------------------------- /第十章：排序算法/1/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Reci-z/javaScript-/e78c443196ee6e7862eb575605017552c29a4214/第十章：排序算法/1/timg.jpg -------------------------------------------------------------------------------- /第十章：排序算法/2-算法.md: -------------------------------------------------------------------------------- 1 | # 冒泡排序 2 | 3 | ```javascript 4 | var arr = [10,4,13,8,7,1]; 5 | ``` 6 | 7 | 1. 通过循环数组中的值，比较相邻的两个位置的值： 8 | 如果前面的大于后面的，就交换位置，通过这样的方式我们可以得到当前数组中的最大值（也可以是最小值）； 9 | 10 | 2. 重复第一个过程，直到左右的值都不发生交换了，停止比较； 11 | 12 | 3. 最终将得到一个从小到大（从大到小）排列的数组； 13 | 14 | 15 | 16 | 17 | 18 | 动画网址：http://www.webhek.com/post/comparison-sort.html 19 | 20 | 21 | 22 | # 快速排序 23 | 24 | ![](1/quickSort-1.jpg) 25 | 26 | 27 | 28 | ![](1/quickSort-2.jpg) 29 | 30 | ![](1/quickSort-3.jpg) 31 | 32 | ![](1/quickSort-4.jpg) 33 | 34 | ![](1/quickSort-5.jpg) 35 | 36 | ![](1/quickSort-6.jpg) 37 | 38 | ![](1/quickSort-8.jpg) 39 | 40 | 1.设置一个基准值（一般都是数组中的第一个值） 41 | 42 | 2.设置两个变量指针（i和j），分别在数组的头和尾的位置 43 | 44 | 3.比较i指针的值 和 基准值，如果小于基准值，i往前走 ++，直到遇到比基准值大的值停止，执行下一步 45 | 46 | 4.比较j指针的值 和 基准值， 如果大于基准值，j往后走 --，直到遇到比基准值小的值停止，执行下一步 47 | 48 | 5.交换当前 i 和 j 所在的位置的值 49 | 50 | 6.重复 3、4、5过程，直到 i 和 j 相遇，调整基准值的位置 51 | 52 | 7.根据基准值的位置，分为左右两侧，左边重复以上1-6步骤，调整完所有顺序后，右侧重复1-6步骤 -------------------------------------------------------------------------------- /第十章：排序算法/3-去重.md: -------------------------------------------------------------------------------- 1 | # 去重 2 | 3 | 去重的方法多种多样，以下提供三种去重方案，大家感兴趣可以继续扩展： 4 | 5 | - 循环去重 6 | - filter去重 7 | - 利用对象特性去重 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /第四章：for循环和this指向（无笔记，录播为九九乘法表案例，无新知识点）/没有笔记，录播只有99乘法表案例，没有知识点.md: -------------------------------------------------------------------------------- 1 | 好好学习 天天向上 --------------------------------------------------------------------------------