前端第二阶段

动画

• 属性

• 动画简写

• 速度曲线

过渡

简写：transition:width 1s linear 2s;
-webkit-transition:width 1s linear 2s;

阴影

### 转换

三维坐标系

• x轴：水平向右 x右边是正值，左边是负值

• y轴：垂直向下 y下面是正值，上面是负值

• z轴：垂直屏幕 往外面是正值，往里面是负值

主要知识点：

• 3D位移：transform: translate3d(x,y,z)

• 3D旋转：rotate3d(x,y,z)
  transform:rotateX();rotateY();rotateZ();
  或transform:rotate3d(x,y,,z,deg); 可自定义旋转

  ​eg:
  transform:rotate3d(1,0,0,45deg);沿着x轴旋转45°

  ​ transform:rotate3d(1,1,0,45deg); 沿着对角线旋转45°

透视：perspective（又称视距：人眼到屏幕的距离）

​

• 近大远小，透视写在被观察元素的父盒子上面。

• 设置了 perspective 属性的子元素可以实现透视效果（就是由远及近的效果），设置该属性的元素本身没有。

• 3D效果有了透视，就能看到translateZ引起的变化。

• 3D呈现 transform-style

  transform-style：flat;子元素不开启3d立体空间，默认

  transform-style：preserve-3d;子元素开启立体空间

  代码写给父级，但影响的是子盒子

transform:translate()方法坐标详解；优点:不会影响到其他元素的位置

transform:translate(0px,0px):沿着x、y轴移动0像素，保持原有位置

transform:translate(10px,10px)：

Flex布局

justify-content:定义项目在主轴上的对齐方式

JavaScript

• 构成：-ECMAScript；-Dom; -Bom；

• 写法
  控制浏览器弹出一个警告框：alert(“”);
  让计算机在页面中输出一个内容：document.write();
  ​ 向控制台输出一个内容：console.log()

• 引入js文件：

可以将js代码编写到外部js文件中，然后通过script标签引入：

<script type="text/javascript" src="js/script.js"></script>

script标签一旦用于引入外部文件，就不能再编写代码了。需要再创建一个script标签用于编写内部代码

• JS基本语法

• 可含有字母、_、数字、$
• 不能以数字开头
• 不能是ES中的关键字或保留字
• 一般采用驼峰命名法：首字母小写，每个单词开头字母大写，其余字母小写。

• 标识符

• 可含有字母、_、数字、$
• 不能以数字开头
• 不能是ES中的关键字或保留字
• 一般采用驼峰命名法：首字母小写，每个单词开头字母大写，其余字母小写。

• 数据类型

  1. 值类型（基本类型）：
     String(字符串)、Number(数字)、 Boolean(布尔)、 Null(空)、 Undefined(未定义)、Symbol

  ​

  2.引用数据类型： Object(对象)、Array(数组)、Function(函数)、特殊的两个：正则(RegExp)和日期(Date)

• 强制类型转换

• 其他数据类型转换为String

1. 方式一:调用被转换数据类型的toString()方法;会将转换的结果返回;null和undefined无toString()方法.如果调用,会报错.
2. 方式二:调用String()函数,并将被转换的数据作为参数传递给函数

• 其他数据类型转换为Number

Number()函数:

字符串转数字

• 纯数字~~转数字
• 字符串中有非数字内容,转为NaN
• 字符串是空串或全是空格字符:true转1;false转0;Null转0;undefined转NaN;
• parseInt()函数将a转换为Number,能把字符串中的有效整数内容取出,在转换为Number
• parseFloat()可获取小数部分
• 对于非String使用parseInt()和parseFloat(),会先转变成String类型,再操作

下周计划

• 继续学习第二阶段内容:JS类型转换、正则表达式、DOM、BOM等；
• 准备考核