初识JavaScript

　　下学期就要开始学习移动平台开发基础，知识脉络也越来越接近企业级，所以假期要对Javascript进行预习。
　　有一段时间一直认为Javascript脚本语言是Java语言的扩展，后来才发现它和Java没有半毛钱关系，也就语法有些类似，本质上是完全不一样的东西。有了Java基础入门JS比较简单。
　　 总体上讲，JavaScript是一种脚本编程语言，不需要编译，边解释边执行。JS是一种基于对象的语言，因为它的语法中没有类，所以并非真正的面向对象编程语言。它里面两种对象，一个是我们用var声明的数字，日期之类的；另外一种称为“方法对象”，就是我们通常定义的function。被称之为方法对象，原因有两个：一、可以作为方法可以被执行；二、可以作为对象，能被其他方法调用。在JavaScript中，方法是不依赖对象的。除此之外，还了解到“原型”和“继承”相关的知识，这一部分理解的不太深刻，期待以后的学习，进一步完善。
　　JavaScript就是修改样式
　　编写JS的流程：
　　布局：HTML+CSS
　　属性：确定要修改哪些属性
　　事件：确定用户做哪些操作（产品设计）

• 编写JS：在事件中，用JS来修改页面元素的样式
• getElementsById方法就是通过id获取元素，事件就是用户的一些操作
• JavaScript的函数的基本格式定义和调用都与Java大同小异，唯一不同之处就是JavaScript是弱类型语言，变量的使用上简单了点。
• 任何标签都可以加id，包括link标签，任何标签的任何属性也可以修改，class属性是例外，因为是关键字，必须用className修改。

占位符、方括号范围更大
通过style加入进去的样式是行间样式
style取样式同样在行间
一个元素最好在class和和style属性中选择一个变化
提取行间样式
window.onlod当页面加载完成的时候发生
行为、样式、结构三者分离
1.不加行间样式2.不加行间JS事件
获取一组元素getElementsByTagName
元素下面选择元素
this:当前事件发生的元素
innerHTML 可以在里面设置文字或者HTML标签
ECMAScript:翻译 JS核心 解释器
DOM：Document Object Model操作HTML的能力 有一些操作不兼容
BOM：Browser Object Model 浏览器 window 没有兼容问题（完全不兼容）
ECMA：机会没有兼容性问题
typeof运算符：找到变量的类型
object对象
undefine未定义
undefine出现的两种情况：
1、 真的没定义
2、 虽然定义，没有给东西
一个变量应该只存放一种类型的数据
字符串转数字parseInt
parseInt从左向右扫描遇到非数字跳出
NaN：Not a Number非数字
NaN和NaN不相等
隐式类型转换==、===减法
==（先转化类型，然后比较）===（不转换类型，直接比）
局部变量：只能在定义在本身的函数中使用
全局变量：在任何地方都能使用
闭包：子函数可以使用父函数的局部变量
命名规范：类型前缀只针对变量，不针对函数
?:三目运算符if-else简写
break：整个循环中断
continue:本次循环中断
真：true、非零数字、非空字符串、非空对象
假：false、数字零、空字符串、空对象
json的下标是字符串
json中不存在length
数组中的一种循环 for-in
for-in适用于json
函数的返回值一次只能返回一个
一个函数应该只返回一种类型的值
arguments:可变参/不定参
arguments是一种数组
css(oDiv,’width’,’200px’)设置样式;两个参数是获取样式
style属性只能操作行间样式
currentStyle属性可以获取非行间样式（兼容性问题）
getComputedStyle:获取非行间（计算后）样式
数组的第二种表示方法new Array()
length属性既可以获取又可以设置
push函数在数组尾部添加元素
pop函数删除数组的最后一个元素
shift函数删除收个元素
unshift函数删除收个元素
unshift在数组头部添加一个元素
删除制定元素：splice(起点，长度)
插入指定元素：splice(起点，长度，元素)
替换指定元素：先删除→再插入
concat数组连接
join（分隔符）：用分隔符，组合数组元素，生成字符串
sort(比较函数)，排序一个数组。数字数组排序需要另外添加，只适合字符串数组
setInterval间隔符
setInterval重复执行;setTimeout执行一次
setInterval有返回值，返回值为定时器
关闭定时器clearInterval、clearTimeout
Data对象获取日期和时间
str.charAt()取字符串兼容低版本
js中getMonth从0开始
可以两个事件使用同一个函数
offsetLeft属性：获取物体的左边距，综合所有因素得出最终结论
offsetLeft/offsetTop:获取物体左/上边距；offsetWidth/offsetHeight:获取物体宽/高度
定时器只有两种状态：开启、关闭
标签/元素/节点：CSS/JS/DOM
DOM不光是JS的组成部分，还是一种规范
childNodes是一个数组，存的是子节点
IE6-8适用alert(oUl.childNodes.length);
nodeType节点类型
nodeType==3 -> 文本节点 nodeType==1 -> 元素节点
children属性只包括元素不包括文本，兼容性比childNode更好
子节点只算第一层
parentNode查找摸一个元素的父节点
绝对定位根据上一次元素进行定位
offsetParent属性获取元素用来定位的父级
firstElementChild获取第一个元素子节点
DOM方式设置属性setAttribute第一个参数设置的名字，第二个参数为值
DOM方式操作元素属性 获取：getAttribute(名称) 设置：setAttribute(名称，值) 删除：remove
用className选择元素 获取class的方法封装为一个getByClass函数
createElement创建元素，appendChild插入到父元素中显示
父级.appendChild(子节点) 父级.insertBefore(子节点,在谁之前)
插入元素insertBefore(节点，原有节点) 在已有元素前插入
父级.removeChild(子节点) 从父级上删除一个子节点
tbody建议主动写上
tBodiesgetElementsByTagName(‘tbody’)
rowsgetElementsByTagName(‘tr’)
cellsgetElementsByTagName(‘td’)
tBodies是一个数组，tHead和tFoot只能有一个
toLowerCase把一个字符串装换成全小写的形式
search：找到并且返回字符串出现的位置
split把字符串分割成数组
appendChild方法
- 先把元素从原有的父级上删除
- 添加到新的父级
Array数组特有的方法sort()
aLi元素集合
很多定时器可以同时工作
合并函数最有效的方法：把不一样的地方挑出来当函数传进去
Math.ceil()向上取整/Math.cell()向下取整
alert(Math.abs(-6));//绝对值
offetWidth取得的是盒模型尺寸
offetWidth取得的是盒模型尺寸
计算机存储小数存储的是小数的近似值，存在误差
Math.round()四舍五入取整方法
运动框架加入一个参数，是一个函数，当运动结束的时候被调用
链式运动框架就是函数的嵌套
startMove(iTarget) 运动框架
startMove(obj,iTarget) 多物体
startMove(obj,attr,iTarget) 任意值
startMove(obj,json,fn) 完美运动框架
完美运动框架：使用循环，修改的参数换成json，定时器启动，循环执行所有参数值。通过for-in来循环json,json存放属性和目标，每次取样式当前值，判断停止
默认行为：浏览器自带的功能
oncontextmenu事件，存在返回值，return false;阻止默认事件
onkeydown事件也是默认行为，可以return false;阻止默认事件
火狐浏览器下拖拽空div会出现bug，解决办法阻止默认事件
事件绑定是一个事件上增加多个函数
onload事件和变量赋值一样，只能声明一次
一个元素的同一个事件上加两次会出现覆盖
绑定事件：attachEvent(事件名,函数) IE
绑定事件：addEventListener(事件名,函数,false)
addEventListener事件名不加on
解除绑定：IE：detachEvent(事件名称,函数) DOM方式：removeEventListener(事件名称,函数,捕获)
父级用相对定位，子集才可以用绝对定位
事件捕获：setCapture方法，把页面上的事件集中处理（仅IE）
释放捕获：releaseCapture方法
Ajax可以让js去读取服务器上的数据
缓存根据url缓存
eval() 函数可将字符串转换为代码执行
get:通过网址 容量小 安全性低 有缓存 用于获取数据
post:不通过网址(http content) 容量大 安全性相对高 无缓存 用于上传数据
ajax编写步骤：
1.创建Ajax对象
创建Ajax对象(非IE6):var oAjax=new XMLHttpRequest();
IE6:var oAjax=new ActiveXObject(““Microsoft.XMLHTTP”);
2.连接到服务器
连接服务器 open(方法,文件名,异步传输)
3.发送请求
发送请求 send()
4.接收返回值
接收返回值onreadystatechange事件 readyState属性:请求状态
不了解原理，会使用功能，即面向对象
对象：不了解内部的结构，知道表面的各种操作
抽象：把最主要的、跟相关问题的特征抽出来
封装：看不到里面的东西，用好表面的功能就行了
从父类上继承出一些方法、属性，子类，又有一些自己的特性
多态对于弱语言JS意义不大
变量能做到的，属性同样可以
变量：自由的，不属于任何人；属性：属于一个对象
函数：自由；方法：属于一个对象
给对象添加事件实际上是添加一个方法
this:当前的方法属于谁
全局函数和写一个window加一个方法效果相同
不能在系统对象中随意添加方法、属性，否者会覆盖
Object对象 没有功能
构造函数：构造一个对象的函数
工厂方式：构造函数过程
问题：函数重复，资源浪费;每一个对象用自己的函数，浪费空间
原型：一次给一组元素加事件
用构造函数加属性 用原型加方法
用混合方式构造对象，相同的使用原型，不同的是用构造函数
window.onload初始化整个程序
面向过程程序改写成面向对象
原则：不能有函数套函数，但可以有全局变量

• onload→构造函数
• 全局变量→属性
• 函数→方法

JS面向对象高级
json实现面向对象 简单
json 不适合多个对象
Json：整个程序里只有一个，写起来比较简单
命名空间：多次使用json，函数不覆写
继承：父级的属性、方法
call调用函数 第一个函数参数传递个this
引用 指向同一块地址
属性的继承通过call()
原型的继承通过for循环

• 系统对象:本地对象(非静态对象);

• 内置对象(静态对象);（Global、Math）

• 宿主对象(由浏览器提供的对象 DOM、BOM
  BOM应用
  BOM操作浏览器
  打开/关闭窗口:open/close
  document.write先清空，然后再写
  userAgent判断浏览器类型
  location:网页位置
  clientWidh可视区宽度，和窗口宽度有关
  scrollTop可视区距离页面顶部距离
  fixed固定定位（除IE6以外的浏览器适用）
  onresize当窗口改变大小时发生
  COOKIE基础与应用
  cookie：页面用来保存信息
  cookie的特性：同一个网站所有页面共享一套cookie
  数量、大小有限
  过期时间
  cookie是document上的一个属性
  格式：名子=值 expires=时间
  在cookie中“=”代表添加
  setDate设置内部时间
  读取cookie：字符串分割“; ”
  删除cookie：使用-1，已经过期
  JS中的正则表达式
  search查找
  substring获取子字符串，不包括结尾位置
  charAt获取某个字符串
  split分割字符串，获得数组
  正则表达式：表达某一种规则、格式
  强大的字符串匹配的工具
  JS风格:new RegExp(“a”,”i”);perl风格:/a/i
  正则：转义 /d [0-9]
  match：把所有匹配的东西，全部提取出来
  g global 全局匹配
  replace：字符串替换
  元字符 方括号
  w 英文、数字、下划线 [a-z0-9_]
  s 空白字符
  量词：个数;{n} 正好出现n次
  {n,m} 最少n次，最多m次
  {n,} 最少n次，最多不限
  {1,};？ {0,1}
  * {0,} 不推荐使用
  test 字符串一部分符合要求，true
  字符串行首/尾 ^/$