JavaWeb--JS BOM DOM

1.Properties
Properties pro = new Properties(); Properties extends HashTable
void pro.load(new FileReader/FileInputStream);
//特殊的方法
String pro.getProperty("key","defaultValue");//如果通过key找不到对应的value,可以设置一个默认值
Object pro.setProperty("key","value");		 //实际效果跟pro.put("key","value)一模一样
void pro.store(new FileWriter/FileOutputStream,name);

2.序列化流
	自定义类实现Serializable接口,(这个接口没有抽象方法,但是必须实现一下)
ObjectOutputStream oos = new ObjectOutputStream(new FileWriter/FileOutputStream);
void oos.writeObject(new Student(21,"张无忌"));
ObjectInputStream ois = new ObjectInputStream(new FileReader/FileInputStream);
Object ois.readObject();

自定义一个JavaScript对象:
   方式一 声明对象:(类似java构造方法)
	//声明对象
	function Person(name,age){
    //声明两个属性
    this.name=name;
    this.agr=age;
    //声明一个方法
        this.add=function(a,b){
            return a+b;
        }
	}
	var person = new Person("柳岩",23);
	var name = person.name;
	var age = person.age;
	var sum = person.add(1,2);
	//动态添加属性
	person.job="学习";
	var job = person.job;

 方式二 直接量:(类似mysql定义表)
var user ={
    id : 1,
    name : "柳岩",
    age : 23,
    add : function(a,b){
        return a+b;
    } 
}
var id = user.id;
var add = user.add(1,2);

this的绑定:
    1.默认绑定:没有明确的调用对象,this就默认绑定到全局window对象  eg:add(1,2),实际是window.add(1,2);
    2.隐性绑定:对象调用方法,谁调用方法,谁就是this eg: var a = obj.fun();  this就代表obj
    3.显性绑定:代表当前元素对象,谁调用方法,谁就是this eg:onclick="fun(this)"; 
	4.new绑定:this代表new出来的对象

BOM:

1. 概念：Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成：
	* Window：窗口对象
	* History：历史记录对象
	* Location：地址栏对象
	* Navigator：浏览器对象
	* Screen：显示器屏幕对象
3. Window：窗口对象

    1. 方法
         1. 与弹出框有关的方法：
            alert()	警告框,显示带有一段消息和一个确认按钮的警告框。
            confirm()	确认框,确认信息对话框,显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮，则方法返回true
                * 如果用户点击取消按钮，则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值：获取用户输入的值,如果用户点击取消,返回null
         2. 与打开关闭有关的方法：
            close()	关闭浏览器窗口。
                * 谁调用我 ，我关谁
            open("URL")	打开一个新的浏览器窗口,如果不传参,就是blank空白页
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数：
                    1. js代码或者方法对象,eg: fun  "fun()"  "alert(1);"  
                   不能直接写fun(),会立刻执行该方法
                    2. 毫秒值
                * 返回值：唯一标识number类型，用于取消定时器
                *如果定义了多个计时器,它们是同时开始计时的
  setTimeout("alert(1)",1000);setTimeout("alert(1)",2000);等待1s执行第一个,再过1s执行第二个
                
            clearTimeout(参数)	取消由 setTimeout() 方法设置的 timeout。
            setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
            clearInterval(参数)	取消由 setInterval() 设置的 interval。
			
			<img id="light" src="img/off.gif"  onclick="fun(this);">
			this：表示当前元素对象（img 元素对象）；
    2. 特点
        * Window对象不需要创建可以直接使用。 window.方法名();
        * window引用可以省略。  方法名();


4. Location：地址栏对象
	1. 创建(获取)：
		1. window.location
		2. location

	2. 方法：
		* reload()	重新加载当前文档。空参,由于每刷新页面一次,这个方法就会执行一次,所以会一直刷新
	3. 属性
		* href	设置或返回完整的 URL。
	* search 获取地址栏的请求参数(包括问号),www.baidu,com?username=zhangsan&password=123456
		注意get/post的发送参数区别
		var parameters = location.search; // ?username=zhangsan&password=123456
		location.href = "www.baidu.com";


5. History：历史记录对象
    1. 创建(获取)：
        1. window.history
        2. history
    2. 方法：
        * back()	浏览器中的后退按钮.加载 history 列表中的上一个 URL。
        * forward()	 浏览器中的前进按钮.加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数：
                * 正数：前进几个历史记录
                * 负数：后退几个历史记录
    3. 属性：
        * length	返回当前窗口历史列表中的 URL 数量。

DOM：操作html页面中的标签属性和内容体。

* 概念： Document Object Model 文档对象模型
	* 将标记文档的各个组成部分封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
	document.write(); //可以在script标签内写html标签,eg:document.write("<h1>"+1+"</h1>");
	
	在html内写代码,不能用+连接多个文本,但是script内必须有+	

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document：文档对象
		* Element：元素对象
		* Attribute：属性对象
		* Text：文本对象
		* Comment:注释对象
		* Node：节点对象，其他5个的父对象

* 核心DOM模型：
	* Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
			
		2. 方法：全部用document.调用
			1. 获取Element对象：
				1. getElementById("id")	： 根据id属性值获取元素对象。id属性值一般唯一
				
				2. getElementsByClassName("ClassName"):根据Class属性值获取元素对象们。
				返回值是一个数组
				3. getElementsByTagName("TagName")：根据标签名称获取元素对象们。
				返回值是一个数组
				4. getElementsByName("Name"): 根据name属性值获取元素对象们。
				返回值是一个数组
			2. 创建其他DOM对象：
            	createElement("参数") 它的参数就是标签名字,eg: "table" "tr" "th" "td",返回相应
              的参数类型。
            	createTextNode("文本信息(要输出的语句)") 
		3. write方法
			document.write("<h1>"+"hello"+"</h1>");
			document.write("<h1> hello </h1>");
			document.write("hello");
	* Element：元素对象
		1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute("属性名")：删除属性   div1.removeAttribute("tr");
			2. setAttribute("属性名","属性值")：设置属性  
			<a href = "javascript:void(0)">;   表示当前页面不进行跳转动作
			<a href = "">;   表示跳转到当前页面
	* Node：节点对象，其他5个的父对象
		* 特点：所有dom对象都可以被认为是一个节点
		* 方法： 
			* CRUD dom树：
				* appendChild()：向节点的子节点列表的结尾添加新的子节点。div1.appendChild(div2);
				* removeChild()	：删除（并返回）当前节点的指定子节点。div1.removeChild(div2);
				* replaceChild()：用新节点替换一个子节点。
		* 属性：
			* Element parentNode 返回节点的父节点。
		parentElement  //区别:parentNode会把空格,换行也算进去,parentElement只指标签
			* Elements div1.children 返回div1的子节点们


* HTML DOM
	1. 标签体的设置和获取：div.innerHTML="新的标签语句";
	
		获取属性 var pro = 对象名.属性名;
		设置属性 对象名.属性名 = "(html代码)";
		div.color = "red";
		
		获取内容体 var html = 对象名.innerHTML;
		设置内容体 对象名.innerHTML = "(html代码)";
		div.innerHTML = "<input type='text'>";
		
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
				element.className="clas"; ==>  <dic class='clas'>

事件监听机制：

* 概念：某些组件被执行了某些操作后，触发某些代码的执行。	
	* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
	* 事件源：组件。如： 按钮 文本输入框...
	* 监听器：代码。
	* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
	
 * 如何绑定事件:(两种方式)
	1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码或者调用方法 
	eg: "alert(1);" "fun();"
	这种方式不能包裹在加载完成事件里面,局部方法不能访问局部方法
		<div id="a" onclick="fun();" >点我....</div>
		<div id="a" onclick="alert('点点点')" >点我....</div>
		1. 事件：onclick--- 单击事件
	2. 通过js获取元素对象，指定事件属性，设置一个function函数(匿名不匿名都可以),
	获取对象的方式,切记要包裹加载完成事件window.onload


* 常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。
		window.onload 加载完成事件
	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。

​
​ 5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。

6. 选择和改变                     
		1. onchange	文本的内容被改变。
			eg:<select onchange="fun(this.value)">
					<option value="1">湖北<option>
					<option value="2">北京<option>
				</select>
		应用场景1:当下拉列表的值改变,触发onchange事件,对应的方法携带新的值传递过去,给出反
	应,此时,下拉列表拉到1,就弹窗口1,拉到2,就弹窗口2
            <select onchange="fun1(this.value)">
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
             </select>
                <script>
                   function fun1(a){alert(a);}
                 </script>
        应用场景2:当文本框中的内容改变时(失去焦点),触发事件
			<input type="text" onchange="fun2()">

		2. onselect	文本被选中。
		应用场景:先在文本框中输入任意文字,然后选中任意的一个或者多个字,都可以触发事
		件(删除和继续加字不能触发)
			<input type="text" onselect="fun3()">



	7. 表单事件：
		1. onsubmit	提交按钮被点击。必须要返回值,表单标签必须加到form上,其他位置没反应
		方法return返回false则阻止提交,true才提交,默认return true
           	    a. <form onsubmit="return fun()">;
                    funciton fun(){
                        return flag;
                    }
                b. <form id="submit">
                document.getElementById("submit").onsubmit=funciton(){
                        return flag;
                    }
			通常会关联form表单中的数据,document.getElementById("username").value,通过value属性
		获取输入框中的值。
			如果是radio/checkbox可以通过document.getElementById("radio").checked属性
		获取true/false,也可以用value获取值。
			表单提交如果用的是submit按钮点击后会直接提交,但是用的如果是button按钮,是没有提交功能的,
		所以可以用document.getElementById("form").submit()的表单submit()方法提交事件。

​
2. onreset 重置按钮被点击。