九、浏览器对象模型与文档对象模型（BOM、DOM）
BOM / DOM（上）BOM BOM（Browser Object Model）： 浏览器对象模型 其实就是操作浏览器的一些能力 我们可以操作哪些内容 获取一些浏览器的相关信息（窗口的大小） 操作浏览器进行页面跳转 获取当前浏览器地址栏的信息 操作浏览器的滚动条 浏览器的信息（浏览器的版本） 让浏览器出现一个弹出框（alert/confirm/prompt） BOM 的核心就是 window 对象 window 是浏览器内置的一个对象，里面包含着操作浏览器的方法 弹窗 aleat()是在浏览器弹出一个提示框 12window.alert("我是一个提示框");// 这个弹出层知识一个提示内容，只有一个确定按钮，点击确定按钮以后，这个提示框就消失了 confirm 是在浏览器弹出一个询问框 123456var boo = window.confirm("我是一个询问框");console.log(boo);/* 这个弹出层有一个询问信息和两个按钮 当你点击确定的时候，就会得...
八、JavaScript 数学与日期对象（Math、Date）
Math 和 Date Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字 Date 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 时间 Math random、round、abs、ceil、floor、max、min、PI Math.random()，用来生成一个0 ~ 1之间的随机数，生成的数字包含 0 ，但是不包含 1 12345678910111213141516171819202122var num = Math.random();console.log(num); // 得到一个随机数/* 应用场景：随机点名 */var names = [ "娄豪杰", "温亚帅", "窦全磊", "老许", "刘旭", "殷逸", "张朗", "罗慧",];var timer = setInterval(() => { let index = Math.f...
七、JavaScript 字符串（String）
ES5/String字符串的常用方法 我们操作字符串，也有一堆的方法来帮助我们操作 字符串和数组有一个一样的地方，也是按照索引来排列的 charAt、charCodeAt、indexOf、lastIndexOf、substring、substr、split、replace、toLowewrCase、toUpperCase charAt()是找到字符串中指定索引位置把内容返回,如果没有对应的索引，那么就会返回 空字符串 123var str = 'HJ'var res1 = str.charAt(1) // Jvar res2 = str.charAt(3) // '' charCodeAt()就是返回对应索引位置的 unicode 编码 123var str = 'HJ'var res = str.charCodeAt(1) // 74// 因为 `J` 在 `unicode` 对照表里面存储的是 74，所以就会返回 74 indexOf()就是按照字符找到对应的索引,找不到返回 -1 123var ...
六、JavaScript 数组（Array）
ES5/数组 什么是数组？ 字面理解就是 数字的组合 其实不太准确，准确的来说数组是一个 数据的集合 也就是我们把一些数据放在一个盒子里面，按照顺序排好 1[1， 'HJ', true, { name: "特兰克斯" }, [666]]; // 可以有 数字、字符串、布尔值、对象、数组 创建一个数组 语法：数组就是一个 []，在 [] 里面存储着各种各样的数据，按照顺序依次排好 1234/* 字面量的方式创建一个数组 */var arr = []; // 创建一个空数组var brr = [1, 2, 3]; // 创建一个有内容的数组 12345/* 使用 `js` 的内置构造函数 `Array` 创建一个数组 */var arr1 = new Array(); // 创建一个空数组var arr2 = new Array(10); // 创建一个长度为 10 的数组var arr3 = new Array(1, 2, 3); // 创建一个有内容的数组 数组的长度 length length: ...
五、JavaScript 函数（下）
函数（下）作用域（重点） 什么是作用域，就是一个变量可以生效的范围 变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域 全局作用域 全局作用域是最大的作用域 在全局作用域中定义的变量可以在任何地方使用 页面打开的时候，浏览器会自动给我们生成一个全局作用域 window 这个作用域会一直存在，直到页面关闭就销毁了 123// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的var num = 100;var num2 = 200; 局部作用域 局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域 在局部作用域中定义的变量只能在这个局部作用域内部使用 在 JS 中只有函数能生成一个局部作用域，别的都不行 每一个函数，都是一个局部作用域 12345678910// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用var num = 100;function fn() { // 下面这个变量就是一个 fn 局部作用域内部的变量 // 只能在 fn 函数内部使用 var num2 = 200;}f...
四、JavaScript 函数（上）
函数（上） 我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西 函数的概念 对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行 先看一段代码： 123456789101112// 这个是我们以前写的一段代码for (var i = 0; i < 10; i++) { console.log(i);}// 函数，这个 {} 就是那个 “盒子”function fn() { // 这个函数我们以前写的代码 for (var i = 0; i < 10; i++) { console.log(i); }} 函数的两个阶段（重点） 按照我们刚才的说法，两个阶段就是 放在盒子里面 和 让盒子里面的代码执行 函数定义阶段 定义阶段就是我们把代码 放在盒子里面 我们就要学习怎么 放进去，也就是书写一个函数 我们有两种定义方式 声明式 和 赋值式 声明式 使用 funct...
三、JavaScript 循环结构
什么是循环结构？ 循环结构，就是根据某些给出的条件，重复的执行同一段代码 循环必须要有某些固定的内容组成：初始化、 条件判断、要执行的代码、自身改变 for 循环 语法：for (var i = 0; i < 10; i++) { 要执行的代码 } 123456// 把初始化，条件判断，自身改变，写在了一起for (var i = 1; i <= 10; i++) { // 这里写的是要执行的代码 console.log(i);}// 控制台会依次输出 1 ~ 10 while 循环 while，其实就是当条件满足时就执行代码，一旦不满足了就不执行了 语法 while (条件) { 满足条件就执行 } 因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了 12345var num = 0; // 初始化条件while (num < 10) { console.log("当前的 num 的值是： " + num); // 要执行的代码 num = num +...
二、JavaScript 分支结构
分支结构 我们的 js 代码都是顺序执行的（从上到下） 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码 IF 条件分支结构if 语句 通过一个 if 语句来决定代码是否执行 语法： if (条件) { 要执行的代码 } 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行 123456789// 条件为 true 的时候执行 {} 里面的代码if (true) { alert("因为条件是 true，我会执行");}// 条件为 false 的时候不执行 {} 里面的代码if (false) { alert("因为条件是 false，我不会执行");} if else 语句 通过 if 条件来决定，执行哪一个 {} 里面的代码 语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 } 两个 {} 内的代码一定有一个会执行 12345678910111213// 条件为 t...
一、JavaScript 基础语法
JavaScript 基础语法 HTML ：标记语言 JavaScript ：编程语言 序言JavaScript（师傅领进门修行靠个人，出山了）1234(1)借鉴C语言的基本语法(2)借鉴Java语言的数据类型和内存管理(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位(4)借鉴Self语言，使用基于原型(prototype)的继承机制 JavaScript 的组成ECMAScript+BOM+DOM123451. ECMASCRIPT: 语法规范2. BOM: 浏览器对象模型 { 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器 }3. DOM (Document Object Model): 文档对象模型 { 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素 } JS 中什么是变量? 变量指的是在程序中保存数据的一个容器 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据 也就是说，我们向内存中存储了...
CSS Grid 网格布局
栅格介绍名词解释CSS 网格布局(Grid Layout) 是 CSS 中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与 FLEX 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。 Grid 可以同时划分行和列。下面是两行三列的网格，数字代表六个直接子元素，默认按行依次放置： 12345+---+---+---+| 1 | 2 | 3 |+---+---+---+| 4 | 5 | 6 |+---+---+---+ 兼容性使用前应根据项目需要支持的浏览器版本确认兼容性。 常见现代浏览器已支持基础 Grid 布局；IE 10/11 使用较早的语法，不能直接套用本文示例。具体版本支持情况请查看 Can I use：CSS Grid。subgrid 等扩展特性需要单独查询支持情况。 可以用特性查询为旧浏览器保留普通文档流布局： 1234567891011121314.layout > * { margin-bottom: 12px;}@supports (display: grid) { ....
CSS Flex 弹性布局
Flex 解决什么问题Flexbox（弹性盒布局）适合沿一个方向排列项目，并分配剩余空间。导航栏、工具栏、图文列表、卡片内部结构，都可以使用 Flex。 例如，一行中有三个项目，希望它们垂直居中，并让最后一个项目靠右： 不必计算按钮左侧的距离，也不必使用浮动。容器负责排列与对齐，项目负责自己的弹性尺寸。 Flex 与 Grid 如何选择 需求 推荐方式 原因 一行工具栏、导航、按钮组 Flex 主要沿一个方向排列 图标与文字并排 Flex 便于对齐和分配剩余宽度 卡片内的标题、正文、底部按钮 Flex 可沿纵向排列并把按钮推到底部 多行卡片需要严格对齐列宽 Grid 行列共同参与布局 页面同时划分导航、内容、侧栏 Grid 适合明确的二维区域 Flex 可以换行，但每一行独立分配空间，不会自动与上一行共享列宽。两者也可以组合：用 CSS Grid 网格布局 划分页面区域，再用 Flex 排列区域内部的内容。 容器、项目与两条轴设置 display: flex 的元素称为弹性容器，参与正常文档流的直接子元素成为弹性项目。更深层的后代不会因此自动成为这...
