小白的前端学习笔记（CSS3动画+javaScript基础）

动画

animation-fill-mode 设置最后停留的位置

backwards	回到起始位置
forwards	停在动画结束位置

animation-play-state 设置动画的播放状态

pause	暂停
running	启动

3D变换

perspective:透视子元素的区域

perspective-origin：透视子元素的角度（top bottom left right）

注意：3d效果角度不一样所呈现的效果不一样

transform-style：perserve-3d(建立3d空间)

简写：

animation:animation-name(动画名称)  animation-duration(持续时间) 
		animation-timing-function(动画方式)   animation-delay（延迟时间）
		animation-iteration-count(播放的次数)  animation-direction（方向）
		animation-fill-mode（动画结束后停留的状态） 

!important 设置权重 非常重要，一定会加载该属性

marquee

属性有：

behavior:
	alternate:来回滚动
	scroll:	单方向滚动
	slide	只滚动一次
direction:设置滚动的方向
	left、right、up、bottom
loop:设置滚动的次数，默认是无线循环（-1）
scrollamount：设置滚动的速度，默认值是6，值越大速度越快
scrolldelay:设置滚动的停留时间，即每一帧过度的时间

事件

onmouseover="this.stop()" 鼠标移动到上面是停止
onmouseout="this.start()" 鼠标移走时开始

javascript (js)

javascript是一门脚本语言

js特点

1、边执行边解释
2、与用户进行交互
3、语法与java非常的类似

javascript组成部分

ECMAScript（es标准）-->js语法、函数、数据类型等等定义
BOM------------------->基于浏览器
DOM------------------->基于文档

B:Browser
O:Object
M:Model
D:Document
es:ECMAScript

js的使用方法

1、
	<script type="text/javascript">
		
	</script>
注意：浏览器加载js时处于阻塞状态（加载完再去加载其它),
	 <scirpt>可以写在文档的任何位置，推荐使用在文档的末尾，增加用户体验
		 
2、加载外部的js
	<script src="js/myjs.js"></script>
	
3、直接在标签中书写js		
	<input type="button" value="点击" onclick="javascript:alert('world')" />

js的注释

1、单行注释	//
2、多行注释	/* 注释内容 */

document.write() 与 document.writeln()的区别

1、效果上面只能看到writeln()通过空格隔开，write()是紧密相连
2、源代码当中writeln()是换行，write()是同一行的
3、如果需要在界面中看到效果需借助<pre>

变量的定义

1、先声明在赋值
	var name;
	name = "张三"
2、声明并赋值
	var age = 18
3、不声明直接赋值
	sex = "男"
	注意:不推荐使用第三种
温馨提示：多个变量赋值或定义通过逗号分隔	

js的数据类型

1、基本数据类型
	number
		var age = 18
		var score = 99.9
	string
		var name = "张三"
		var country = '中国'
	boolean
		var flag = true;	
2、特殊数据类型
	undefined
		var width;
		height(没有声明变量也没有赋值，直接使用)
	
3、对象数据类型
	object
		var arr = []
		var tel = null;
		var fav = Array();

获取变量的数据类型

	typeof(变量名)

变量命名规则

变量名由字母、数字、下划线、$（美元）组成
首字母不能是数字开头，并且变量名也不能是特殊符号
eg(var null boolean number string)
* 变量名如果有多个单词组成，第一个单词首字母小写，
  第二个单词开始首字母大写，eg:myScore;
  这样的命名方式我们称为驼峰命名法

运算符

1、 赋值运算符
	var a = 1;
	var b = 2;
	var c = a+b;
	a+=1;=>a=a+1;
	a-=1;=>a=a-1;
   温馨提示：赋值运算符左边是变量名，右边可以是值，也可以是表达式

2、 算术运算符
	+、-、*、/、% 
	a++;=>a=a+1
	++a;=>a=a+1
	a++与++a的区别：
		a++ 先引用再自增
		++a 先自增再引用
	eg：
		var a = 1;
		var b = a++;
		// b的值为1，a的值为2
		var c=1
		var d = ++c;
		// c的值为2；d的值为2
		var e1=1;
		var e2=2;
		var sum = (e1++)*2+(e2++)+e1
		// 1*2+2+2=6,所以sum的值为6
	
	a--与--a同理可得