前端从零开始第三、四周第十一天 1. Transition 过渡作用：通过CSS的触发效果和JS使元素的属性值从一个

第十一天

1. Transition 过渡

作用： 通过CSS的触发效果和JS使元素的属性值从一个状态到另一个状态的转变过程
语法： transition: property duration timing-function delay;

属性描述
property 过渡的属性，设置为all时，监听所有属性
duration 过渡效果的持续时间
timing-function 过渡的速度函数
delay 延迟时间

属性	描述
property	过渡的属性，设置为all时，监听所有属性
duration	过渡效果的持续时间
timing-function	过渡的速度函数
delay	延迟时间

代码示例：鼠标放在盒子上触发过渡效果

        <style type="text/css">
            .d1{
                width: 100px;
                height: 100px;
                margin: 100px auto;
                background-color: orangered;
                /* transform: scale(1); */
                transform: translateX(0px);
                /* transition:transform 2s linear 2s,background-color 4s; */
                transition: all 2s;
                /* 
                 transition-property: transform;
                 设置需要过渡的属性
                 transition-duration: 2s;
                 设置过渡的时间
                 transition-timing-function: ease; 匀速linear/ease-in /ease-out
                 设置过渡变化的速度
                 transition-delay: 0s;
                 设置过渡动画延迟时间是多少
                 */
            }
            .d1:hover{
                transform: translateX(800px);
                background-color: deepskyblue;
            }
        </style>
    <body>
        <div class="d1"></div>
    </body>

不足
1. 需要触发条件不能自动触发
2. 不能循环过渡，只能单次触发
3. 状态只能设置起始状态，不能构造更多的效果

2. Animation 动画

作用： 比transition过渡效果拥有更多状态，弥补了Transition的不足

语法： animation: name duration timing-function delay iteration-count direction play-state fill-mode;

属性	描述
name	@keyframe动画的名称
duration	动画的持续时间
timing-function	速度曲线函数
delay	延迟时间
iteration-count	动画的播放次数（infinite无限次数）
direction	动画的播放方向：normal(正常),reverse(反向),alternate(往复),alternate-reverse(反向往复)
play-state	动画的播放状态：running，pause
fill-mode	动画结束后元素的状态：none(初始)、forwards(结束)、backwords(动画第一帧)、both

注意： 动画结束状态fill-mode不要与iteration-count冲突

代码示例： 盒子移动

            .d1{
                width: 100px;
                height: 100px;
                background-color: pink;
                margin: 100px auto;
                animation: an 4s linear 0s 1 alternate forwards ;
            }
            
            /* 
            animation-name: an;
            动画名称，关键帧名称
            animation-duration: 4s;
            动画的时间周期
            animation-timing-function: ease;
            动画的变化速度
            animation-delay: 0s;
            动画的延迟时间
            animation-iteration-count: 1;无限循环执行动画infinite
            动画执行次数
            animation-direction: normal;
            动画执行的方向
            animation-fill-mode: none;
            设置最终画面渲染的模式
            animation-play-state: running;
            设置动画暂停或者执行
                 
             
             */
            @keyframes an{
                /* from:0%,to:100% */
                /* from{
                    transform: translate(0,0);
                }
                to{
                    transform: translate(400px,0);
                } */
                0%{
                    transform: translate(0,0);
                }
                25%{
                    transform: translate(400px,0);
                }
                50%{
                    transform: translate(400px,400px);
                }
                75%{
                    transform: translate(0,400px);
                }
                100%{
                    transform: translate(0,200px);
                }
                
            }

第十二天

1. animation实现逐帧动画（step）

作用： 使用常规函数实现的动画都是平滑的，并不能实现一帧一帧的动画效果，使用step可以实现该效果。

2. CSS3网格布局——Grid

作用： 将网页分割成一个个网格，利用网格进行布局
概念：
- 容器和项目：采用网格布局的区域称为容器；容器内采用网格定位的子元素称为项目
- 行、列和单元格：容器内额水平区域称为行；垂直区域称为列；行列重叠出来的空间叫做单元格
- 网格线：划分网格的线称为网格线

属性

.wrapper{
    width:450px;
    background: #e5e5e5;
    text-align:center;
    display: inline-grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
}

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

属性值	描述
display: gird(网格布局)，inline-grid(行内网格布局)	用来指定网格的布局
grid-template-columns	用来指定行的宽度
grid-template-rows	用来指定行的高度
grid-row-gap	设置行与行之间的距离
grid-colunm-gap	设置列与列之间的距离。二者合并简写的话,格式为grid-gap
grid-auto-flow	容器的子元素排序是按照“先行后列”来排的通过该属性我们可以自定义排列的顺序{ grid-auto-flow:colunm; }
justify-items、align-items和place-items属性	justify-items属性设置单元格内容的水平位置，align-items设置单元格内容的垂直位置。place-item是两者的合并写法（取值都是方位值：start、end、center、stretch）
justify-content、align-content和place-content	justify-content属性是整个内容区域在容器里面的水平位置，align-content属性是整个内容区域在容器里面的垂直位置（取值：start	end	center	stretch	space-around	space-between	space-evenly; }）

注意：
- 使用repeat()函数，简化重复的值
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
```
- 望每一行或则每一列都尽可能的容纳更多的单元格，我们就可以使用auto-fill来自动填充
```
.wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, 100px)  
}
```
- fr关键字（fraction的缩写，意为“片段”），如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍
```
.wrapper {
    display: grid;
    grid-template-columns: 150px 1fr 2fr;
}
```
- minmax() 产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
```
.wrapper{
  grid-template-columns: 1fr 1fr minmax(100px,1fr);
}
```
- auto关键字表示浏览器自己决定宽度
```
grid-template-columns: 100px auto 100px;
```

项目属性： 指定项目的边框，分别定位在哪根网格线
- grid-column-start属性：左边框所在的垂直网格线
- grid-column-end属性：右边框所在的垂直网格线
- grid-row-start属性：上边框所在的水平网格线
- grid-row-end属性：下边框所在的水平网格线

3.CSS3变量

3.1 变量的声明

语法： 声明变量时，使用两根连词线( -- )
```
body {
    --foo: #ffffff;
    --bar: #000000;
}
```
代码中定义了两个变量，在使用的时候他们就代替了所指的属性，其他没有什么含义，和自定义属性值没有不同。所有的属性值都可以放入变量中：
```
--stepAnimation: step1 2s steps(16) infinite;
```
注意： 变量名的大小写敏感，--header和--Header是两个不同的变量

3.2 var() 函数

作用： 用于读取定义的变量

用法： 属性名: var(--变量名)

--foo: #ffffff;
color: var(--foo);
/* var(--foo)就等于给color赋值上面定义的#ffffff */
animation: var(--stepAnimation);
/* 同样读取的值也可以给其他变量赋值*/
--newColor: var(--foo);

注意： var()函数可以使用第二个参数标识变量的默认值（即：变量不存在时，使用默认值）

color: var(--foo, #000000);

注意： var()函数只能返回值，并不能作为属性名

--side: margin-top;  
var(--side): 20px;/* 无效 */

3.3 变量的类型

如果变量值是一个字符串，可以与其他字符串拼接。

<span>hello </span>

span::after {
    --bar: 'wor';
    --foo: var(--bar)'ld';
    content: var(--foo);
}

如果变量值是数值，不能与数值单位直接连用。

.foo {
  --gap: 20;
  margin-top: var(--gap)px;  /* 无效 */
}

注意： 使用数值与单位连接在一起时，必须使用calc()函数连接

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串

/* 无效 */.foo {  --foo: '20px';  font-size: var(--foo);}
/* 有效 */.foo {  --foo: 20px;  font-size: var(--foo);}

3.4 作用域（权重）

概念： 同一个CSS变量可以在不同的选择器中声明；在读取值得时候，权重最高的声明将会生效。
示例：不同的选择器都声明了--color这个变量；但是div标签在读取的时候，会采用权重最好的id选择器中的属性值；因此变量的选择器的作用取决于所处的选择器的权重。
```
<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<div id="alert">芜湖，国庆七天假！！</div>
```

4. CSS3渐变颜色

4.1 线性渐变——linear-gradient

用法： background:linear-gradient(angle,start-color,soft-line,end-color);

属性名	描述
angle	渐变角度（to + 方向名词）；默认值是从上到下（to bottom）
start-color	起始的颜色
end-color	终止的颜色
soft-line	颜色的过渡区域（百分比）；默认50%

注意： 如果搭配背景图使用，渐变效果要写在url引入的背景图之前

第十三天

1.视口Viewport与移动端布局

1.1 像素

像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多，当设备尺寸相同时，像素月密集，画面就越精细。

1.1.1 物理像素（设备像素，device pixels）

指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。

1.1.2 系统像素（CSS pixels）

他和物理像素之间的比例取决于屏幕的特性（是否高密度）以及用户进行的缩放，浏览器将进行自行换算。

1.2 视口

PC端： 视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致
移动端： 涉及到三个视口：布局视口、视觉视口和理想视口
- 布局视口(layout viewport)：浏览器默认设置了一个viewport的元标签，定义一个虚拟的布局视口，用于解决早期在页面上手机显示的问题。（iOS，Android 都设置为980px），可以布局的高/宽度可以通过document.documentElement.clientWidth/Height获取
- 视觉视口(view viewport)：视觉视口是用户当前看到的区域，可以通过缩放操作，不影响布局视口。
  - 视觉视口和缩放比例关系当前缩放值 = 理想视口宽度 / 视觉视口宽度;因此用户方大师，视觉视口会变小，css像素将跨越更多的物理像素。
- 理想视口(ideal viewport)：它对于设备是最理想的布局视口尺寸，显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。
  - 理想视口的值就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素(device independent pixel, dip), 和设备的物理像素无关
  - 用下面的方法可以使布局视口与理想视口的宽度一致：（响应式布局的基础）
```
<meta name="viewport" content="width=device-width">
```

2.视口的设置（元标签）

我们可以通过使用视口元标签(viewport menta 标签)来进行布局视口的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"></meta>

属性说明：

属性名	值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0 - 10.0]	定义初始缩放值
minimum-scale	[0.0 - 10.0]	定义放大最大比例，他必须小于或等于maximum-scale设置
maximum-scale	[0.0 - 10.0]	定义缩小最小比例，他必须大于或小于minimum-scale设置
user-scalable	yes/no	定义是否允许用户进行缩放，默认值yes

注意点：

viewport标签只对移动端浏览器有效，对PC端的浏览器是无效的
当缩放比例为100%时，dip宽度 = CSS像素宽度 = 理想视口宽度 = 布局视口宽度
单独设置initial-scale 或 width都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
即使设置了user-scaleble = no，在Android Chrome浏览器中也可以强制启动手动缩放

3. 常用CSS单位

3.1 px

px就是pixel的缩写，意为像素，px就是一个像素点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024×768的，表示水平方向有1024个像素点，垂直方向有768个像素点。

3.2 em

参照自身的font-size来计算的，未定义就继承父元素的；整个页面中每个元素的em不是固定的。

3.3 rem

css3的新单位，参照的是根元素html标签的font-size，不会像em那样依赖父元素

3.4 %

一般讲的是相对于父元素，但是不是非常准确
对于普通定位元素就是父元素
对于相对定位（position: absolute）的元素时对以及定位的父元素
对于将position：fixed的元素的响度与viewport（可视窗口）

3.5 vw

css3的新单位，viewport width的缩写，视窗宽度；1vw等于视窗宽度的1%

3.6 vh

css3的新单位，viewport height的缩写，视窗高度；1vh等于视窗的1%

2.响应式布局——媒体查询

2.1 什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2.2 媒体查询语法

●用 @media开头注意@符号

●mediatype 媒体类型

●关键字 and not only

●media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype查询类型

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

媒体查询书写规则

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

2.3 响应式开发原理

2.3.1 响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备的目的。

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

第十四天

1. 初识JavaScript

1.1 JavaScript介绍

诞生： 由布兰登·艾奇（Brendan Eich）仅用十天完成了JavaScript设计，最初命名为LiveScript，后来与Sun合作之后将其改名为JavaScript。
- JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
- 现在也可以基于 Node.js 技术进行服务器端编程
作用
- 表单动态校验（密码强度检测）（ JS 产生最初的目的）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
- MR/VR
- 人工智能
HTML/CSS/JS 的关系

1.2 浏览器执行JS简介

浏览器分成两部分： 渲染器引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的blink，老版本的webkit
JS引擎：也成为JS解析器，用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的V8引擎。

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.3 JS的组成

JavaScript有三部分组成：ECMAScript（语法）、DOM（页面文档对象）和BOM（浏览器对象）

ECMAScript

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.4 JS初体验

JS有三种书写位置：行内、内嵌和外部

行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />

- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
内嵌式

<script>
    alert('Hello  World~!');
</script>

- 可以将多行JS代码写到 script 标签中
- 内嵌 JS 是学习时常用的方式
外部JS文件

<script src="my.js"></script>

- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况

1.5 注释

单行注释

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来
// 用来注释单行文字（  快捷键   ctrl  +  /   ）

多行注释

/*
  获取用户年龄和姓名
  并通过提示框显示出来
*/
/* */  用来注释多行文字（ 默认快捷键  alt +  shift  + a ）

快捷键修改为： ctrl + shift + /

2. JavaScript输入输出语句

方便信息的输入输出，JS中提供了一下语句

方法	说明	归属
alert(msg)	浏览器弹出警告框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

3. 变量

3.1 变量是什么

白话：变量就是个装东西的容器

通俗：变量是用于存放数据的容器。可以通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。

3.2 变量的使用

var age; // 变量声明，未赋值：undefined
age = 18; // 变量赋值，赋值：18
console.log(name) // 不声明不赋值，报错
var height = 170; // 变量初始化
height = 180; // 变量重新赋值，覆盖之前的值

变量命名规则

由字母(A-Za-z)、数字(0-9)、下划线( )、美元符号( $ )组成，如：usrAge, num01, name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

第十五天

1. 数据类型

JavaScript把数据类型分为两类：简单数据类型和复杂数据类型

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面

堆（操作系统）：存储复杂类型(对象) ，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

1.1 数据类型简介

为什么需要数据类型

前面提过变量是用于数存储数据的空间，而不同的数据所需要的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，就定义了不同的数据类型
变量的数据类型

在代码运行时，变量的数据类型是由JS引擎根据 = 右边的变量值数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型，相同的变量可以用作不同的数据类型的赋值。（在程序运行中，类型会被自动确定）
```
var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串
```

1.2 简单数据类型

简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

1.Undefined

undefined只有一个值，就是undefined。在使用var声明变量但未对其初始化赋值时，这个变量的值就是undefined.

与undeclared区别

还没有在作用域中声明过的变量，是undeclared。对于undeclared引用，会报引用错误。

使用typeof的防范机制避免犯错，对于undeclared变量，typeof返回undefined

2.Null

null类型也只有一个值，就是null。

从逻辑上看，null表示一个空对象指针，所以typeof操作符检测null值会返回object

3.Boolean

Boolean是使用的最多的一种类型，该类型只有两个字面值（标识符）：true 和 false（区分大小写）

Boolean也能将其他类型的值转化成Boolean值（调用Boolean() 函数）

var msg = 'hi';
Boolean(msg);//true

数据类型转化为true 转化为false

String 任何非空字符串 " "(空字符串)

Number 任何非零数字值 0和NaN

Object 任何对象 null

Undefined n/a（not applicable） undefined

4.Number

分为整数和浮点数值(双精度数值)，还有NaN(not a number) 。最基本的数值字面量格式是十进制整数。例：

var intnum = 21;

还可以通过八进制(字面量值第一位必须是0) 或者十六进制(字面值前两位必须是0x)

var num1 = 011 //八进制的9
var num2 = 0xA  //十六进制的10

无论什么进制的数值，最终输出的都是十进制

JavaScript保存数值(正零（+0）和负零（-0）),被认为是相等的

Number()函数可以作用任何数据类型(一元加操作符)。附上转化规则

Boolean: true 和 false 分别转换成 1 和 0
null: 返回0
undefined：返回NaN
String：
- 如果字符串中只包含数字(包括带＋或负号的情况)，将其转化成十进制数值。例：“123”变成123，而“011”变成11(前面的零被忽略了)
- 如果包含有效的浮点格式，如 “1.1"，则将其转换成对应的浮点数值
- 如果包含有效的十六进制格式，例如”0xf“，则转化成对应十进制数：15
- 如果字符串是空的，则将其转化成0
- 如果是其他情况，则为NaN

5.String

字符串可以由双引号（” “）或单引号（’ ‘）表示

var name = "刘德华";
var say = 'hi';

toString()方法：Number、Boolean、Object和String都有toString()方法，但是null和undefined没有。

1.3 复杂数据类型 ——Object

复杂数据类型（引用类型） ：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

1.4 判断数据类型——typeof函数

检测给定变量的数据类型

var msg = 'hi';     //String
var num = 123;      //NUmber
var bool = true;    //Boolean
var a;              //undefined
var obj = {};       //Object
var fun = function(){
    num++;          //function
}
var bat = null;     //null
console.log(typeof msg);
console.log(typeof num);
console.log(typeof  bool);
console.log(typeof a);
console.log(typeof obj);
console.log(typeof fun);
console.log(typeof bat);//null输出的是object

2. 关键字和保留字

2.1 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

2.2 关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

2.3 保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

3. 运算符（操作符）

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

3.1 算数运算符

算数运算符概述： ：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符描述实例
+ 加 1 + 1 = 2
- 减 1 - 1 = 0
* 乘 1 * 1 = 1
/ 除 1 / 1 = 1
% 取余数（取余数） 1 % 1 = 0
浮点数的精度问题
- 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。所以：不要直接判断两个浮点数是否相等 !
```
var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001
```
- 表达式和返回值 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解：是由数字、运算符、变量等组成的式子表达式最终都会有一个结果，返回给开发者，称为返回值

运算符	描述	实例
+	加	1 + 1 = 2
-	减	1 - 1 = 0
*	乘	1 * 1 = 1
/	除	1 / 1 = 1
%	取余数（取余数）	1 % 1 = 0

3.2 递增和递减运算符

递增运算符 (递减同)
- 前置递增运算符 ++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。使用口诀：先自加，后返回值

var  num = 10;
alert(++num + 10);   // 21

后置递增运算符(递减同) num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。使用口诀：先返回原值，后自加

var  num = 10;
alert(10 + num++);  // 20

3.3 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

比较符：

运算符	说明	实例	返回值
<	小于号	1 < 2	true
大于号		1 > 2	false
>=	大于等于号	1 >= 1	true
<=	小于等于号	1 <= 2	true
==	判等号（会转型）	1 == '1'	true
!=	不等号	1 != 1	false
=== !==	全等（不）要求数值	1 === ‘1’	false

等号比较：
- =赋值：把右边的给左边
- 相等==：先转换再比较
  
  1.undefined等于null
  
  2.字符串和数字比较时，字符串转数字
  
  3.数字为布尔比较时，布尔转数字
  
  4.字符串和布尔比较时，两者转数字
- 全等===
  
  除了在比较前不转换操作数外，和==没什么区别

3.4 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

运算符	说明	语法	实例	返回值
&&	“逻辑与”，简称‘与“	表达式1 && 表达式2	true && false	false （当两边都是true返回true）
			”逻辑或“，简称”或“	表达式1	表达式2	true	false	true（任一一边是true返回true）
！	”逻辑非“，简称”非“		!true	false

3.5 赋值运算符

用来把数据赋值给变量的运算符

运算符	说明	实例
=	直接复制	var age = 18
+=、 -=	加、减一个数后再赋值	age += 6 //24
*=、/=、%=	乘、除、取模后再赋值	age /= 3 // 8

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

3.6 运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- !
3	算数运算符	先* / %后 + -
4	关系运算符	>、>=、 <、 <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后
7	赋值运算符	=
8	逗号运算符	,

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

4. 流程控制

概念： 流程控制就是来控制代码按照一定结构顺序来执行；主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

4.1 顺序结构

概念： 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

4.2 分支结构

概念： 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS语言提供了两种分支结构的语句： if语句、switch语句

4.2.1 if语句

if语句

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

if else语句

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

if else if 语句

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

三元表达式
- 语法结构
```
表达式1 ? 表达式2 : 表达式3;
```
- 执行思路
- - 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
  - 简单理解：就类似于 if else （双分支）的简写

4.2.2 switch语句

语法结构 switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

-   switch ：开关 转换 ， case ：小例子 选项
-   关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
-   关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
-   switch 表达式的值会与结构中的 case 的值做比较
-   如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
-   如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码 **注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。**

switch 语句和 if else if 语句的区别
- 一般情况下，它们两个语句可以相互替换
- switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
- 当分支比较少时，if… else语句的执行效率比 switch语句高。
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

5. 循环

5.1 for循环

语法结构

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}
//  基本写法
for(var i = 1; i <= 10; i++){
    console.log('我还能继续~');
}

循环流程：
- 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
- 执行操作表达式，此时第一轮结束。
- 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。继续执行操作表达式，第二轮结束。
- 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

5.2 双重for循环

语法结构

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

内层循环可以看做外层循环的循环体语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

5.3 while循环

语法结构

while (条件表达式) {
    // 循环体代码 
}

循环流程
1. 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
2. 执行循环体代码
3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
  
  重点： 使用while循环时一定要注意，它必须要有退出条件，否则是死循环

5.4 do-while循环

语法结构

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

循环流程
1. 先执行一次循环体代码
2. 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
  
  注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

5.5 打断施法——中断循环

continue——中断本次循环

示例：吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

结果

break——跳出整个循环（循环结束）

示例：吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     break; // 直接退出整个for 循环，跳到整个for下面的语句
 }
 console.log('我正在吃第' + i + '个包子呢');
}

结果

第十六天

1. 复杂数据类型

Arry类型——数组

除了Object外，Array类型是最常用的类型。与其他语言不同的是，array可以保存任何类型的值。

var array1 = new Array();//调用构造函数
var array2 = new Array(20);//创建长度length值为20的数组(长度可以更改)
var array3 = new Array('123',true,null);//创建包含这三个值的数组
var array4 = Array();//new可以省略

数组继承的toLocalString()、toString()和valueOf()方法，在默认情况下都会以逗号分隔符分隔每项的形式返回数组项。可以用join()方法，换成不同的分隔符分隔（如果某一项为null或undefined，join()会用空字符表示）。

var arry = ['liu','shi','zhu'];
console.log(arry.join("|"));
console.log(arry.valueOf());
console.log(arry.toLocaleString());
console.log(arry.toString());

基本方法

push()：从最后推入n个值
pop()：移除最后一项，并获得该值
shift()/unshift()：从首段移除/推入一个/(n个)值
reverse()：将数组反转。例 arry.reverse() : [1,2,3] =>[3,2,1]

sort()：按升序排列数组项，不过比较的是字符串。sort()方法可以接受一个比较函数。

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var arry = [0,5,1,10,15];
console.log(arry.sort());//[0, 1, 10, 15, 5]
console.log(arry.sort(compare));//[0, 1, 5, 10, 15]

concat()：返回一个按顺序拼接应用方法的数组以及参数里面的数组
slice()：基于当前数组中的一或多个项创建数组；接受一个位置参数时，返回一个从该项到数组末尾所有项组成的数组；接受两个参数时，第一个是起始位置，第二个是结束位置，返回之间的所有项，不包括结束位置的项。
splice(index,num,arry1,arry2...)：index:起始位置，num：需要删除项的个数，arry1,arry2..表示想要插入项
indexOf()/lastIndexOf()：都接受两个参数：要查的项和（可选）表示查找起点位置的索引。从数组开头向后/从数组末尾向前（返回要查找的项在数组中的位置）

迭代方法

every()：数组每一项都运行一个函数，若每一项都返回true，则返回true
some()：数组每一项都运行一个函数，若有一项返回true，则返回true
filter()：数组每一项都运行一个函数，返回一个由所有返回true的项组成的数组（回调函数必须返回一个bool值）
map()：数组每一项都运行一个函数，返回由每次函数调用的返回值组成的数组
forEach()：数组每一项都运行一个函数，没有返回值。

归并方法

reduce()/reduceRight()：从头/尾开始。迭代数组所有项，然后构建一个最终返回的值。函数接受四个参数：前一个值、当前值、项的索引、数组对象。返回值自动作为前一个值传给下一次迭代，函数是从索引对象的第二个项开始。

Object类型——对象

对象就是一组数据和功能的集合；可以通过执行new操作符后面跟要创建的对象类型来创建。Object实例可以自定义添加属性和方法。

var obj = new Object();

Object类型是JavaScript中所有对象的父对象

Function类型——函数

每个函数都是Function类型的实例，而且都和其他类型一样，有属性和方法。因此函数名也是一个指向函数对象的指针，不会与某个函数绑定。

funtion sum(num1,num2){
    return num1 + num2;
}//函数声明

var sum = function(num1,num2){
    return num1 + num2;
};//函数表达式；与声明变量一样，表达式后面接分号

var sum = new Funtion("num1","num2","return num1 + num2");
//不推荐

没有重载

声明同名函数，结果只是后面的函数覆盖前面的函数。

函数声明与函数表达式

解析器对二者并非一视同仁。解析器率先会读取函数声明，让其在执行时可以被使用；对于函数表达式，必须执行到他所在的代码行，与变量一样，不然会报错。 其他情况作用等价。

作为值的函数

因为和变量一样，可以作为值使用。

函数内部属性

有两个特殊对象：argument 和 this。

argument

argument是保存着传入的参数的类数组对象。argument有个属性：callee—指向拥有argument的函数；caller保存着对当前函数的引用。

(在严格模式下，禁用)

this

this引用的是函数执行的环境对象。

第十七天

1. 内置对象

内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。MDN:developer.mozilla.org/zh-CN

1.1 Math对象

理解： Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

方法和属性

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入(注意 -3.5 结果是 -3)
Math.abs()	绝对值
Math.max()/Math.min()	取最大值/最小值
Math.random()	获取范围在[0,1)内的随机数

获取指定范围内的随机整数：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

1.2 日期对象

理解： Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
示例
- 使用Date实例化日期对象
- - 获取当前时间必须实例化：
```
var now = new Date();
```
- - 获取指定时间的日期对象
```
var future = new Date('2019/5/1');
```
注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

方法和属性

方法名	说明
getFullYear()	获取当年
getMonth()	获取当前月份(取值：0 - 11)
getDate()	获取当前日期
getDay()	获取当前是周几(周日 0 - 周六 6)
getHours()	获取当前的小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟
getTime()	获取当前时间与1970.1.1 00:00:00的毫秒时间戳

1.3 数组对象

创建数组的两种方式
- 字面量方式
```
var arr = [1,"test",true];
```
- new Array()
```
var arr = new Array()
```
  - 注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
- - - 如果只传入一个参数，则参数规定了数组的长度
    - 如果传入了多个参数，则参数称为数组的元素

检查是否为数组

instanceof 运算符 —— 判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

Array.isArray() ——用于判断一个对象是否为数组

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

2. 数据传参

简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

运行结果如下：

复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?

运行结果如下：

第十八天

1.Web API

白话：API就是函数

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框，直接使用 alert(‘弹出’)

MDN 详细 API : developer.mozilla.org/zh-CN/docs/…

因为 Web API 很多，所以我们将这个阶段称为 Web APIs。

此处的 Web API 特指浏览器提供的一系列API(很多函数或对象方法)，即操作网页的一系列工具。例如：操作html标签、操作页面地址的方法。

2. DOM

白话：DOM树就是网页中所有的标签的集合

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

3. 获取元素

3.1 根据ID获取

语法： document.getElementById(id)
- 参数：id值，区分大小写的字符串
- 返回值：元素对象或 null

示例

<div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

3.2 根据标签名获取元素

语法： document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
- 参数：标签名
- 返回值：元素对象集合（伪数组，数组元素是元素对象）

示例

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3.3 其他获取元素方法

根据类名获取元素： document.getElementsByClassName('类名')
指定选择器的第一个元素：document.querySelector('选择器')
根据指定选择器返回所有元素：document.querySelectorAll('选择器')

示例

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

3.4 获取特殊元素（body，html）

获取body元素：document.body
获取html元素:：document.documentElement

4. 事件

4.1 事件基础

事件三要素——触发--- 响应机制。
- 事件源：触发事件的元素
- 事件类型：事件是何种触发机制（例：click点击事件）
- 事件处理：事件触发后执行的代码（或函数）
事件执行步骤
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（函数赋值）

示例

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

4.2 常见的鼠标事件

事件	触发条件
onclick	鼠标点击左键
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获得焦点
onblur	失去焦点
onmousemove	鼠标移动
onmouseup	鼠标弹起
onmousedown	鼠标按下

5. 操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

5.1 改变/获取元素内容

element.innerText： 获取标签的内部的所有内容；设置内容的话会去除所有html标签，填充为赋值的文本；
element.innerHTML： 全部内容包括html标签、空格换行；
innerText和innerHTML的区别
- 获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行
- 设置内容时的区别：innerText不会识别html，而innerHTML会识别

示例

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

5.2 常用元素的属性操作

图片属性——不只是图片所有的都可以

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

表格

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

样式属性
- 注意：
  1. JS里面的样式采区驼峰命名法
  2. JS修改style样式操作，产生的是行内样式，权重高

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.className = 'box';
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

第十九天

1. JavaScript调试技巧

1.1 debugger

console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。

    debugger;

1.2 用表格显示对象

有时，有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用console.table展开，更容易看到正在处理的内容！

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

1.3 使用不同屏幕尺寸

如何调整窗口大小呢？Chrome提供了所需的一切。跳到控制台并点击 **‘切换设备模式’**按钮。

1.4 快速找到DOM元素

在Elements面板中标记一个DOM元素，并在控制台中使用它。Chrome控制台会保留选择历史的最后五个元素，最终选择的首个元素被标记为$0，第二个选择的元素为$1，依此类推。

1.5 执行时间

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：

console.time('Timer1');

var items = [];

for(var i = 0; i < 100000; i++){
   items.push({index: i});
}

console.timeEnd('Timer1');

1.6 获取函数的堆栈

JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript.

想象一下，要查看第24行car实例调用函数funcZ的整个堆栈跟踪信息：

var car;
var func1 = function() {
  func2();
}

var func2 = function() {
  func4();
}
var func3 = function() {
}

var func4 = function() {
  car = new Car();
  car.funcX();
}
var Car = function() {
  this.brand = ‘volvo’;
  this.color = ‘red’;
  this.funcX = function() {
    this.funcY();
  }

  this.funcY = function() {
    this.funcZ();
  }

  this.funcZ = function() {
    console.trace(‘trace car’)
  }
}
func1();

1. 7 代码格式化

source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。

2. 属性节点的应用

2.1 属性操作

element.属性名：获取元素本身自带的属性（也可以赋值）
element.getAttribute('属性名')：获取自定义的属性
element.setAtrribute('属性名', '值')：设置自定义的属性值
element.removeAttribute('属性名')：移除属性

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是
        // class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
  </script>

2.2 节点操作

节点： 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

节点nodeType：

元素节点：nodetype为1
属性节点：nodeType为2
文本节点：nodeType为3（包括文字，空格，换行）

节点层级： 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点： node.parentNode(返回指定节点的父节点；若无父节点返回null)
子节点：
- 所有子节点： parentNode.childNodes（返回指定节点的子节点实时的集合）——不提倡使用
- 子元素节点： parentNode.children（只读属性，返回所有子元素节点）
- 第一个子节点：parentNode.firstChild（返回第一个子节点）
- 最后一个子节点：parentNode.lastChild（返回最后一个子节点)
- 最后一个子元素节点：parentNode.lastElementChild（返回最后一个子元素节点）
兄弟节点：下一个兄弟节点： nextSibling；上一个兄弟节点： previousSibling

2.2.1 创建节点

document.createElement('标签名')

创建由标签名指定的HTML元素，根据我们的需求动态生成。

2.2.2 添加节点

node.appendChild(child)

将节点添加到指定父节点的子节点列表末尾

node.insertBefore(child, 指定元素)

讲方法添加到父节点指定子节点前面

2.2.3 删除节点

node.removeChild()

从node节点中删除一个子节点，返回删除的节点

2.2.4 复制（克隆）节点

node.cloneNode()

返回调用该方法的节点的一个副本；克隆节点

注意：

如果括号参数为空或者false，则是浅拷贝，只复制节点本身，不可隆子节点
如果括号内参数为true，则是深拷贝，会复制节点本身以及里面所有子节点

3. DOM操作总结

3.1 创建

document.write()
element.innerHTML
document.creatElement

区别：

write是直接将内容写入页面的内容流（导致页面重绘）
innerHTML将内容写入调用的DOM节点，不会重绘
innerHTML创建多个元素效率更高（尽量数组形式拼接），结构稍微复杂
createElement创建多个元素效率低，结构清晰

3.2 增加

node.appendChild(child)
node.insertBefore(child, 指定元素)

3.3 删除

node.removeChild()

3.4 修改

主要修改dom的元素属性，dom元素的内容、属性,表单的值等

修改元素属性: src、href、title等
修改普通元素内容: innerHTML、innerText
修改表单元素: value、type、disabled等
修改元素样式: style、className

3.5 查询

主要获取查询dom的元素

DOM提供的API方法: getElementByld、getElementsByTagName 古老用法不太推荐
H5提供的新方法: querySelector、querySelectorAll提倡
利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSiblina)提倡

3.6 属性操作

主要针对于自定义属性。

setAttribute:设置dom的属性值
getAttribute:得到dom的属性值
removeAttribute移除属性

前端从零开始第三、四周

第十一天

1. Transition 过渡

2. Animation 动画

第十二天

1. animation实现逐帧动画（step）

2. CSS3网格布局——Grid

3.CSS3变量

3.1 变量的声明

3.2 var() 函数

3.3 变量的类型

3.4 作用域（权重）

4. CSS3渐变颜色

4.1 线性渐变——linear-gradient

第十三天

1.视口Viewport与移动端布局

1.1 像素

1.1.1 物理像素（设备像素，device pixels）

1.1.2 系统像素（CSS pixels）

1.2 视口

2.视口的设置（元标签）

3. 常用CSS单位

3.1 px

3.2 em

3.3 rem

3.4 %

3.5 vw

3.6 vh

2.响应式布局——媒体查询

2.1 什么是媒体查询

2.2 媒体查询语法

mediatype查询类型

关键字

媒体特性

媒体查询书写规则

2.3 响应式开发原理

2.3.1 响应式开发原理

1.2 响应式布局容器

第十四天

1. 初识JavaScript

1.1 JavaScript介绍

1.2 浏览器执行JS简介

1.3 JS的组成

1.4 JS初体验

1.5 注释

2. JavaScript输入输出语句

3. 变量

3.1 变量是什么

3.2 变量的使用

第十五天

1. 数据类型

1.1 数据类型简介

1.2 简单数据类型

1.Undefined

与undeclared区别

2.Null

3.Boolean

4.Number

5.String

toString()方法：Number、Boolean、Object和String都有toString()方法，但是null和undefined没有。

1.3 复杂数据类型 ——Object

1.4 判断数据类型——typeof函数

2. 关键字和保留字

2.1 标识符

2.2 关键字

2.3 保留字

3. 运算符（操作符）

3.1 算数运算符

3.2 递增和递减运算符

3.3 比较运算符

全等===

3.4 逻辑运算符

3.5 赋值运算符

3.6 运算符优先级

4. 流程控制

4.1 顺序结构

4.2 分支结构

4.2.1 if语句

4.2.2 switch语句

5. 循环