小奏

【函数（下）】 用new操作符调用函数 现在，我们学习一种新的函数调用方式：new 函数() 你可能知道 new 操作符和 “面向对象” 息息相关，但是现在我们先不探讨它的 “面向对象” 意义，而是先把用 new 调用函数的执行步骤和它上下文弄清楚。 用new调用函数的四步走 JS 规定，使用 new 操作符调用函数会进行 “四步走”： 函数体内会自动创建出一个空白对象 函数的上下文（this）会指向这个对象 函数体内的语句会执行 函数会自动返回上下文对象，即使函数没有 return 语句 四步走详解 1234567function fun() { this.a = 3; this.b = 5;}var obj = new fun();console.log(obj); // fun { a: 3, b: 5 } 【第一步：函数体内会自动创建出一个空白对象】 【第二步：函数的上下文（this）会指向这个对象】 【第三步：执行函数体中的语句】 之后这个对象就不再是空对象了。 【第四步：函数会自动返回上下文对象，即使函数没有 ...

【函数（上）】 函数基本介绍 函数就是语句的封装，可以让这些代码方便地被复用。 函数具有 “一次定义，多次调用” 的优点。 使用函数，可以简化代码，让代码更具有可读性。 函数也是一个对象，也具有普通对象的功能（能有属性） 使用typeof检查一个函数时会返回function 和变量类似，函数必须先定义然后才能使用。 使用 function 关键字定义函数。 function：函数、功能。 创建函数 函数声明 123function 函数名([形参1,形参2...形参N]){ 语句... } function：表示定义函数 fun：函数名（必须符合 JS 标识符命名规则） ()：圆括号中是形参列表，即使没有形参，也必须书写圆括号 {}：花括号内为函数语句块 函数表达式 123var 函数名 = function([形参1,形参2...形参N]){ 语句... }; function(){}：匿名函数 ()：圆括号中是形参列表，即使没有形参，也必须书写圆括号 & ...

【对象】 对象基础 对象介绍 对象是JS中的引用数据类型 对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性 使用typeof检查一个对象时，会返回object 对象（object）是 “键值对” 的集合，表示属性和值的映射关系。 123456var xiaoming = { name: '小明', age: 12, sex: '男', hobbies: ['足球', '编程']}; 属性名（键名，key）: 属性值（value） JS 中，大括号表示对象 最后的属性后面不加逗号 {} 后加上分号 对象分类 1.内建对象 由ES标准中定义的对象，在任何的ES的实现中都可以使用 比如：Math String Number Boolean Function Object… 2. 宿主对象 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象 比如 BOM DOM 3.自定义对象 由开发人员自己创建的对象 创建对象 方式一： 1var o ...

【流程控制语句】 基本介绍 12345678910** 流程控制语句* - JS中的程序是从上到下一行一行执行的* - 通过流程控制语句可以控制程序执行流程，* 使程序可以根据一定的条件来选择执行* - 语句的分类：* 1.条件判断语句* 2.条件分支语句* 3.循环语句 * 12345678 * * prompt()可以弹出一个提示框，该提示框中会带有一个文本框， * 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字 * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容,prompt()函数的返回值是String类型的 *//score就是小明的期末成绩var score = prompt("请输入小明的期末成绩(0-100):"); if(条件分支语句) 条件判断语句也称为if语句 语法一： 123if(条件表达式){ 语句... } 1234执行流程： if语句执行时，会先对条件表达式进行求值判断， 如果值为true，则执行if后的 ...

【JS表达式与操作符】 什么是表达式和运算符？ 表达式：由 操作数 和 运算符 组成的式子。 表达式的分类：算术、关系、逻辑、赋值、综合。 算术表达式 算术运算符 意义 运算符 加 + 减 - 乘 * 除 / 取余 % 推荐一律使用 () 来强制规定优先级！ + 有 “加法” 和 “连字符” 两种作用，如果 + 的某一边是字符串那么就为 ”连字符“，否则为 ”加法“。 隐式类型转换 如果参与数学运算的某操作数不是数字类型，那么 JS 会自动将此操作数转换为数字型。 12345678910113 * '4'; // 12true + true; // 2false + 2; // 23 * '2天'; // NaN"z" * "j"; // NaN3 + '2天'; // '32天'3 + null; // 03 * ''; ...

【基础语法与基本数据类型】 语言 功能 结构层 HTML 搭建结构、放置部件、描述语义 样式层 CSS 美化网页、实现布局 行为层 JavaScript 实现交互效果、数据收发、表单验证等 1997 年，欧洲计算机制造商协会（ECMA）颁布了 JavaScript 的标准，命名为 ECMAScript。 ECMAScript 简称 ES，JavaScript 简称 JS。 JavaScript 实现了 ECMAScript ECMAScript 规范了 JavaScript JavaScript 的语言风格和特性 类 C 语言风格，容易上手 弱类型（动态类型），简单易学 丰富的功能，无敌的生态，强大的性能 基本使用 输出语句 1alert("要输出的内容"); 该语句会在浏览器窗口中弹出一个警告框 【功能】 在浏览器（JavaScript 引擎 例如：Chrome V8）解析到 JS 文件中的 alert() 语句时，便会中断 JS 脚本的执行，同时弹出警告框，直到用户单击确定后，才继续执行后续的 JS 脚本。 1d ...

grid布局 概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内多个项目的位置。但是它们也存在重大区别。 Flex 布局是轴线布局，只能指定 “项目” 针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成 “行” 和 “列” 产生单元格，然后指定 “项目所在” 的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。 目前 Grid 布局的浏览器兼容性不是太好，移动端比 PC 端要好得多。 基本概念 容器和项目 采用网格布局的区域，称为 “容器”（container）。容器内部采用网格定位的子元素，称为 “项目”（item）。 12345<div> <div><p>1</p></div> <div><p>2&l ...

响应式布局 响应式开发 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ < 1200px 宽屏设置（大桌面显示器） >= 1200px 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 【平时我们的响应式尺寸划分】 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分。 【案例】 1234567 ...

vw布局 移动端布局 移动端布局 — flex 布局 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放 需要移动端适配有如下方案： （1）rem 市场比较常见： 需要不断修改 html 文字大小 需要媒体查询 media 需要 flexible.js （2）vw / vh 未来的趋势： 省去各种判断和修改 代表：bilibili、小米…… vw/vh是什么？ vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如： 当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。 注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和 vh 总是针对于当前视口来说的。 vw/vh怎么用？ 超级简单，元素单位直接使用新单位 vw/vh 即可 因为 vw/vh 是相对单位，所以 ...

rem适配布局 【思考】 页面布局文字能否随着屏幕大小变化而变化？ 流式布局和 flex 布局主要针对于宽度布局，那高度如何设置？ 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ rem单位 rem（root em）是一个相对单位，类似于 em，em 是父元素字体大小。 不同的是 rem 的基准是相对于 html 元素的字体大小。 比如，根元素（html）设置 font-size=12px，非根元素设置 width: 2rem; 则换成 px 表示就是 24px。 rem 的优势：父元素文字大小可能不一致，但是整个页面只有一个 html，可以很好来控制整个页面的元素大小。（即：达到统一控制全局字体大小的效果！） 注意：rem 控制的不仅仅是字体大小，还能控制其他元素的大小。 12345678/* 根 html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */div { font-size: 2rem；} 【案例】 12345678910111213141 ...