学习javaee的第四天

JavaScript 基础知识
1）基础语法
变量和数据类型 number string boolean object
转换函数 parseInt（） parsFloat（）
运算符 算术、赋值、比较、逻辑、三目运算。true：1 false：0
流程控制 if else、switch（）{case..}、for（）、while（）{}、do{}while()、for（var i in 变量）{}、with（）{}
js函数
function sayHello(a,b){
1)arguments数组保存实际参数
2）把arguments数据赋值给形参
}
sayHello(10,4);


2)js对象
内置对象
String
方法：charAt()   indexof()  lastIndexof() replace() fontcolor() split() substring()
Number
方法: ceil()  floor() round() random()
Date
方法：getFullYear() getMonth() getDate() 
Array
创建方式： new Array() new Array(3) new Array(3,"hello",true)
方法：join() reverse()
RegExp
创建方式：new  RegExp("正则内容")   = /"正则内容"/;
方法： test()


自定义对象
创建对象：
1）方式一：
function Person(name,age){
this.name = name;
this.age = age;
}

var person = new Person("jack",15);


2)方式二：
function Person(){}

var p = new Person();
p.name = "jack";
p.age = 18;


3)方式三：
var p = new Object();
p.name="jack";
p.age = 18;

4)方式四：
var p ={
name:"jack",
age:18,
sayHello:function(){}
}

原型：给内置对象添加方式。
每个对象都有一个内置的prototype属性，给prototype添加方式，自动把该方法添加进该对象上面了


Array.prototype.search = function(){}
Array.prototype.max = function(){}


--------------------------------------------------------------------------


jsBOM_DOM对象编程
一、BOM编程
1）什么是BOM编程
BOM Brower Object Model 浏览器对象模型
即是使用js代码来控制浏览器
BOM编程原理：浏览器被封装了不同的对象，可以通过浏览器对象控制浏览器


2）window对象：控制浏览器的窗口
方法：
alert()
write();
confirm();
propmt();
close();
open();
setInterval();/clearInterval();
setTimeout();


3)location对象：控制浏览器的地址栏
属性：href
方法：reload();


4)history对象：控制浏览器的历史记录栏
方法：
forword()
back()
go()


5)screen对象：控制屏幕
属性：
availHeight
availWidth
width
height



二、js事件编程
1）js事件编程
gui事件编程：
事件源：事件发生的源头（窗体，按钮，菜单）
事件：窗口事件（windowEvent），键盘事件（KeyEvent），鼠标事件（MouseEvent）
监听器：可以监听某类事件的发送，并且触发业务逻辑。


js事件编程：
事件源：事件发生的源头（网页的html标签）
事件：鼠标事件，键盘事件，选项事件....
监听器：使用js函数编写监听器程序


js编程步骤：
1）编写事件源
2）编写监听器（js函数）
3）绑定监听器（onclick ，onchanged....）




2）注册事件的两种方式
1）直接在事件源（标签）使用相关属性去注册事件给监听器
<input type="button" value="按钮" id="btn" onclick="fun1()" />
问题：和绑定代码和html标签依赖！
好处：可以更加方便从标签内部传递参数


2）先获取事件源对象，在使用属性去注册事件给监听器（实际应用中建议使用这种方式）
//得到事件源对象
var btn = document.getElementById("btn");
//注册事件给监听器
btn.onclick = function(){}
好处：js事件代码和html代码进行分离！！
问题：不能从标签内部传递参数


3）js事件分类
点击相关：
onclick   单击事件
ondblclick 双击事件

页面加载相关
onload    加载页面
onunload  退出页面
鼠标相关
onmousedown  鼠标按下  
onmouseup    鼠标抬起
onmousemove  鼠标移动
onmouseover   鼠标移到某个元素上
onmouseout  鼠标从某个元素离开
焦点相关
onfocus   获得焦点
onblur   失去焦点


选项相关
onchange   选项改变


表单提交相关
onsubmit   表单提交时触发
return true/false: true：则提交表单，false，不提交表单




三、DOM编程
1)DOM简介
1）什么是DOM编程： DOM，Document Object Model 文档对象模型
2）一句话概括DOM编程： 使用js代码控制HTML或CSS内容
3）DOM编程原理：html页面内容会被封装成不同的对象，通过这些对象控制html页面（包括css）


2）获取节点对象
方式一：
document.getElementById();
document.getElementsByName()
document.getElementsByTagName()
方式二：
document.all
document.forms;
document.images;
document.links;
方式三：
parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling


3)案例
随机滚动广告
全选反选
动态表格
二级下拉菜单