前端开发之js基础（1）

js数基于对象和事件驱动的脚本语言，主要运用在客户端。
特点：交互性（信息的动态交互）；安全性（不可以直接访问本地硬盘）；跨平台性（在任何浏览器都可运行）
js是基于对象的，java是面向对象的。
js只需要解析就可以执行，java需要编译成字节码运行。
js是一种弱类型语言，java是强类型语言。
一个完整的js由三个部分实现

• 核心（ECMAScript）
• 文档对象模型（DOM）
• 浏览器对象模型（BOM）

基本语法
变量，函数，运算符区分大小写
变量是弱类型语言，不用申明类型，每行结尾分号可加可不加（建议加上）
注释：//和/**/
js数据类型
js和java一样存在两种数据类型

• 原始值（存储在栈stack中的简单数据）
• 引用值（存储在堆heap中的对象）
  五种数据类型
• Undefined，Null，Boolean，Number，String
• js中字符串是原始数据类型
• 通过typeof运算符可以查看变量类型
• 所有引用数据类型都是Object
• 通过instanceof运算符解决typeop对象类型判断问题

区分undefined和null

• 变量定义了未初始化/访问对象不存在属性 —-undefined
• 访问对象不存在—–null

js中条件直接写=，是赋值操作。
for，switch，if和java使用方法都一样。
js中定义数组

• var arr = [1,2,3];定义一个数组，包含三个元素
• var arr = new Arry(5);定义一个数组，数组长度是5；
• var arr = new Array(1,2,3);定义一个数组，包含三个元素
  数组属性有length，数组长度是可变的，可以存放不同的数据类型

js定义函数

function add(a,b){
 return a+b;
}
函数无需定义可以直接返回

var add = function(a,b){
    return a+b;
}

js重载
方法名相同，参数类型或参数个数不同。
需要使用一个对象arguments,arguments就是一个数组，用于存储函数传入的参数个数
全局变量
在全局页面均可以使用
局部变量
在函数体内定义可以使用
数组常用方法
- concat();连接两个或更多的数组，并返回结果
- join();把数组所有元素放在一个字符串，元素通过指定运算符分割
- pop();删除并返回数组的最后一个元素。
- push();向新数组末尾添加一个或更多元素，并返回新的数组长度
- reverse();颠倒数组中元素的顺序

js中的Date对象
创建Date var date = new Date();
- getDate()返回一个月中的某一天(1-31);
- getDay();返回一周的某一天(0-6);
- getMonth();返回月份（0-11）
- getFullYear();以四位数字返回年份；
- getTime();返回1970年1月1日至今的毫秒数
- setTime();根据毫秒数设置时间
- toLocaleString();根据本地时间格式，把Date()对象变为字符串

js中的Math对象
math方法全是静态方法所以直接调用不用new。
- ceil(x);向上取整
- floor(x);向下取整
- round(x);四舍五入
- pow(x,y);x的y次方
- random();返回0-1的随机数

windows对象
windows对象是js层级中的顶层对象

• confirm();带有一段消息以及确认取消按钮的对话框
• prompt();弹出一个可以给用户输入的对话框
• open();打开新的浏览器窗口或查找一个已命名的窗口
• close();关闭浏览器窗口
• setInterval();在指定周期调用函数
• setTimeout();在指定毫秒数后调用该函数表达式
• clearInterval();清除setInterval设置的timeout
• alert();弹出一个带有消息和确认按钮的警告框

DOM(文档对象模型)加强
document对象
- getElementById();返回带有id对象的引用
- getElementByName();//返回带有指定名称的对象集合
- getElementsByTagName();返回带有制定标签名的对象集合
- write();向文档写html表达式或js代码

操纵Element对象的属性

• 获取属性：getAttitude(name)方法
• 设置属性：setAttitude(name)方法
• 删除属性：removeAttitude(name)方法

操作DOM节点树
插入节点
- appendchild()方法
- insertBefore(newNode,oldNOde)
删除节点
- removechild();
替换节点
- replaceChild(newNode,oldNode);
复制节点
- cloneNode(boolean);参数boolean是判断是否复制子节点
查找节点
- getELementById();
- getElementsByName();通过节点name属性查找
- getElementsByTagName();通过节点名称查找

js常用事件

• 鼠标移动事件
• 鼠标点击事件
• 加载与卸载事件
• 聚焦与离焦事件
• 键盘事件
• 提交重置事件
• 选择改变事件

鼠标移动事件
onmouseover/onmouseout
鼠标点击事件
onclick/ondblclick
加载与卸载事件
onload/unload
聚焦与离焦事件
onfocus/onblur
键盘事件
keydown/keyup/keypress
提交与重置事件
submit/reset
选择与改变事件
select/change