"黑马程序员"javascript和DOM

------ <a href=" http://www.itheima.com" target="blank">android培训</a>、<a href=" http://www.itheima.com"
javascript概述：
    1.它是基于对象和时间的脚本语言
    2安全性
    3跨平台（只要是可以解释js都可以执行）
javascript与java不同
    1.js是Netscape公司产品，java是Sun公司产品
    2.js是基于对象，java是面向对象
    3.js只需浏览器解释就可以执行，java需要先编译成字节码文件，在执行
    4.js是弱类型，java是强类型。
    5.js是非严谨的，java是严谨的。
    javascript运行在客户端
javascript与Html的结合方式
    想要将其他代码融入到html中，都是一标签的形式
    1.js代码存放在标签对<script>...</script>中
    2.使用script标签的src属性引入一个js文件（方便后期维护和扩展）
     示例：<script src="test.js" type="javascript"></script>
    注：规范中script标签中必须加入type属性
javascript语法：
    1.变量 var x  可以赋予不同类型的常量
        特殊常量：undfind
    2.语句
    if(x==3){alert("yes")}else{alert("No")}
    其它都跟java差不多。
    使用逻辑运算符进行布尔表达式的时候需要是短路与或短路或。&&  ||
    //0就是假1就是真，，null就是假，非空就是真

    js特有语句：
    with(对象){}:可以确定对象所使用的范围，在范围内可以直接使用指定对象的   

    属性和行为而不用对象的形式调用，简化了对象的操作
    3.数组
        对于js数组特点在于：相当于集合，是可变长度的.
        定义格式：var arr=[2,3,45,3]；
              var arr=new Array();

            二维：
            var arr=[[2,4,5],[3,4]];
        操作形式和java一样都是通过for进行遍历,同时也使用了指针思想


    4.函数
    a.一般函数：
        function 函数名（形参）{
            执行语句
            return 返回值；
        }
        通常提供代码复用可以将代码封装成函数
        两个明确：   
            1.明确该功能实现后的结果
            2.该功能在实现过程虫是否有未知内容参与与运算

    b.动态函数
    var demo=new Function("x,y";"alert(x+y)");
    如同：
    function demo(x,y){
        alert(x+y);
    }
    动态函数的特点：可以将参数列表，和方法体作为参数传递。
   
    c.匿名函数
    一般函数的简写形式。
    function(){}
    var demo=function(){}
    通常定义事件属性的行为较为常见
    例：
        function test( ){
            alert("load ok");
        }
   
        window.οnlοad=test;
    在函数使用时需要注意的部分：
    function show(){
        return "show run";
    }
    var method=show();
    var method=show;
    两句代码都是正确的，
        第一句表示的是show方法运行后的结果赋值给method变量
        第二句表示的是将show指向的对象的地址赋值给method，那么method也   

    指向了该对象。那么可以通过method()的形式来调用这个show()
   
    ----------------------------------------
    js可以通过对象形式将数据进行封装
    首先对对象进行描述，通过函数来完成。
    function(name,age){
        this.name=name;
        this.age=age;
    }
    var p=new Person("lisi",30);
    alert(p["name"]+".."+p.age);
    p.show=function(){
        alert("show run");
    }
    -------------------------------
    javascript中的已定义好的一些对象，
    1，String，Math,Date,Array,Function
    这些对象都有一个属性叫做prototype原型。
    prototype可以获取执行对象的引用。
    可以通过该引用给已有的对象赋予一些新的功能
   
    那么在使用该对象时，可以直接调用定义好的新功能
   
    function getMax(){
        var max=0;
        for(var x=1;x<this.length;x++){
            if(this[x]>this[max]){
                max=x;
            }
        }
        return this[max];
    }
    var arr=[2,4,23,5];
    arr.sort();//直接调用Array对象的sort方法对数组进行排序
    那么可以不以像调用sort方法一样调用getMax方法呢？
    就需要将getMax方法添加Array对象当中

    Array.prototype.getMax=getMax;
   
    var x=arr.getMax();
    alert("max="+x);
   
    var str="abc";
   
    str.substring(1,2);
    str.bold();//<b>str</b>
    //模拟一下String中fontcolor方法
    function mycolor(color){
        return "<font color='"+color+"'>"+this+"</font>"
    }
    String.prototype.color=mycolor;
    str.color("red");
    //给字符串对象定义一个新功能，去掉字符串两端空格
    function trim(){
        var start,end;
        start=0;
        end=this.length-1
       
        while(start<=end && this.charAt(start)==" "){   
            start++;
        }
        while(start<=end && this.charAt(start)==" ")
            end--;
        return this.substring(start,end+1);
    }
    String.prototype.trim=trim;
    vars="   abc   ";
    s=s.trim();
    alert("---"+s+"---);//abc
    ----------------------------------
    常见全局方法
    parseInt(numstr,[radix])//将数字格式的字符串转换成数字。
        如果指定了基数，那么numstr,就会按照执行基数进行转换
    var num=parseInt("110",2)
    alert("num="+num);
    var x=6;
    alert(x.toString(2));//110//获取6对应的二进制表现形式
   
    ------------------------------------------------------
    javascript需要被浏览器所解释执行，就必须将代码和hhtml相结合，
    结合方式是什么样的呢？
    1.通过定义<script>标签将js代码存入其中，并指定type属性。方便与浏览器启

动指定的解析引擎
    2、也可以通过<script>标签使用src属性连接一个指定的js文件进来
-----------------------------------------------------------
DOM(document Object model)文档对象模型。
    其实就是将一些标记型文档以及文档中的内容当成对象
    为什么要将这些文档以及其中的标签封装成对象呢？
    因为可以在对象中定义其属性和行为，可以方便操作这些对象
   
    DOM在封装标记型文档时有三层模型
    DOM1:针对html文档
    DOM2：针对xml文档
    DOM3：针对xhtml文档
   
html,xhtml,xml：这些都是标记型文档

DHtml:是多个技术的综合体，叫做动态的html   
    html:负责标签的封装
    css:负责标签的样式
    dom:负责将标签以及标签中数据封装成对象
    javascript:负责通过程序设计方式来操作这些对象

标签之间存在着层次关系
html：
    head
        title
        base
        link
        meta
        style
        script
    body
        div
        form
            input
            select
        span
        a
        table
            tbody
                tr
                    td
                    th
        dl
            dt
            dd
通过这些标签可以形象的看做是一个树形结构，那么我也称标记型文档。加载进内存是一

颗DOM树这些标签以及标签的数据都是这颗树上的节点

当标记型文档加载进内存，那么内存中有了一个对应的DOM树

DOM对于已标记型文档的解析有一 个弊端就是文档过大相对消耗资源
对于大型文档可以使用 SAX这种方式解析

节点类型：
标签节点：类型1
属性节点：类型2
文本节点：类型3
注释节点：类型8
document:类型9

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意


节点关系：
父节点：parentNode
子节点:childNodes
兄弟节点:
    上一个兄弟节点:previousSibling
    下一个兄弟节点:nextSibling

----------------------------------------------------------------------
获取节点，可以通过节点的层次关系完成

也可以通过document方法完成       
   
getElementById    //获取ID对应节点对象id值多一个相同。获取第一个id所属对象
getElementsByName//获取一堆名字相同对象
getElementsByTagName;//获取一大堆标签

window:窗体
（窗体抖动效果）
for(var x=0;x<500;x++){
window.moveBy(50,0)
window.moveBy(0,0)
window.moveBy(0,0)
window.moveBy(-50,0)
}
window.moveBy(200,300);//向右边下边移动
window.noveTo(200,400);//移动到
window.open();
window.focus()
//判断是否输入数字
if(!(window.event.keycode>=48 && window.event.keyCode<=57)){
    alert("不允许录入非数字");
    event.returnValue=false;
}
获取当前事件源对象有两种方式：
1.event.srcElement//获取当前事件源对象
2.将事件源对象通过this传递


取消超链接效果两个
1.#
2.javascript:void(0)

<div style="overflow:hidden;height:8px">


-------------------------------------------------
table标签的示例：
1.在页面上通过一个按钮创建一个表格
思路：
   1.创建一个table节点。document.createElement("table");
   2.通过table节点insertRow()方法创建表格的行对象并添加到rows集合中。
   3.通过对象的insertCell()方法创建单元格对象，并添加到cells集合中。
   4.给单元格中添加数据
    a.创建一个节点如，文本节点document.createTextNode("文本内容")；
       通过单元格对象appendChild方法将文本节点添加到单元格尾部
    b.可以通过单元格的insertHTML添加单元格中的元素，
      tdNode.insertHTML="<img src='1.jpg' alt='图片说明信息'/>"；
   5.建立好表格节点。添加到DOM树中，也就是页面的指定位置上

2.如何删除表格中的行和列
思路：
    1、删除行：获取表格对象，通过表格对象中的deleteRow方法将指定的行索引

deleteRow方法中
    2.删除列：表格没有直接删除列方法，要通过删除每一行中指定的单元格来完成

删除列的动作。获取所有对象进行遍历。通过对象的deleteCell方法将指定单元格删除
3.对表格中的数据进行排序：
思路：
    1.获取表格中的所有行对象。
    2.定义临时存储，将需要进行排序的行对象存入到数组中。
    3、对数组进行排序。通过比较每一行对象中指定的单元格数据，如果是整数需

要通过parseInt转换。
    4.将排序后的数组通过遍历。将每一行对象重新添加回表格，通过tbody节点的

appendChild方法
    5、其实排序就是每一个行对象的引用取出
4、表格行眼色间隔显示。并在鼠标指定的行上高亮显示
思路：
    1.获取所有行对象，将需要间隔颜色显示的行对象进行动态的className属性指

定，那么前提是先定义好类选择器
    2、为了完成高亮，需要用到两个事件：onmouseover,onmouseout
    3.为了方便可以在遍历行对象时，将每一行对象都进行两个事件属性的指定，并

通过匿名函数完成改事件处理
    4.高亮原理就是将鼠标进入时的指定颜色改变，改变前先记录住原理行行对象样

式这样在鼠标离开时，可以将原样式还原。
    5.该样式需要在页面加载完成直接显示，所以使用的window.onlad事件完成

5、完成一个css手册中一样的示例
    通过下拉菜单的选择显示指定样式属性的使用效果
6.表单中的组件
    单选框，复选框
    这两个组件都有一个属性来表示其中选中与否的状态。checked
   
    完成一个对多个复选框，进行全选操作。
    思路：将全选那个复选框的checked状态付给所有其他checkbox即可
    <input type="checkbox" name="all" οnclick="checkAll()"/>全选
    <input type="checkbox" name="item"/>
    <input type="checkbox" name="item"/>
    <input type="checkbox" name="item"/>
    <input type="checkbox" name="all" οnclick="checkAll()"/>全选

    <script type="text/javascript">
    function checkAll(){
        var node=dociment.getElementByName("all")[0];
        var items=document.getElementByName("item");
        for(var i=0;i<items.length;i++){
            items[i].checked=node.checked;
        }
       
    }
    </script>

7.获取鼠标的坐标，让指定区域随着鼠标移动
    获取鼠标坐标：event.x,event.y
    指定区域随鼠标移动，其实就是改变了指定区域的left top属性的值

    这里需要用到的事件：body对象的onmousemove事件。
    还需要用到一个css样式直接定义页面所有区域都在同一层次
    为了某一个区域进行定位，我们可以将该区域分离出来。到另一个层次，用到了

css中的position属性（有绝对定位，和相对定位）
   

    <style type="text/css">
        #bodyid{
            border:#000000 1px solid;
            height:600px;
            width:800px;
        }
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
        document.body.οnmοusemοve=function(){
            var adNode=document.getElementById("ad");
            adNode.style.left=event.x;
            adNode.style.top=event.y;
        }   
    }
    function closeed(){
        var adNode=document.getElementById("ad");
        adNode.style.display="none";
    }
    </script>

<body>
    <div id="ad" style="position:absolute;left:0;top:0;"οnclick="closeed

()">
    <a href="#"target="_blank"><img src="1.jpg" height="80px"

width="100px"/></a>
    </div>
    <div id="bodyid">
        body区域
    </div>
</body>
----------------------------------
结论：基本DOM编程需要的步骤
DOM编程：
1.定义页面;
    通过html标签将数据封装
2.定义静态的样式
    通过css
3.需要动态完成的和用户的交互
    a.明确事件源：
    b.明确事件将事件注册到事件源上
    c.通过javascript的函数对象事件进行处理
    d.在处理过程需要明确被处理的区域。
   
------------------------------------------
用户注册：
1.定义页面
    通过表格来格式化表单
    表格行都有一个自己的背景颜色。
    将单元格中的数据通过div进行封装，以便操作
2.定义样式
    表格样式
    div样式
3.动态效果
    3.1在页面加载时，将所有输入框定义获取焦点的框线颜色
    3.2进行内容校验，可以通过正则表达式完成，并通过框线样式给用户提示
    3.3通过对刚才校验的分析发现代码重复用性太低将不同内容进行封装。
   
----------------------------------------------------------------
示例：简单表单注册（按照上面规则）
<html>
  <head>   
    <title>FormDemo</title>   
   
    <style type="text/css">
        table{
            border:#0066FF 1px solid;
            width:600px;
            border-colapse:collapse;
           
        }
        table td,table th{
            border:#0066FF 1px solid;
            padding:10px;
        }
        table td{
            background-color:#ffff99;
        }
        table th{
            background-color: #ff9900;
        }
        #repswspan{
            margin-left: 110px;
        }
        .errorinfo{
            color:#ff0000;
            display:none;
        }
        .focus{
            border:#0099ff 2px solid;
        }
        .norm{
            border:#999999 1px solid;
        }
        .error{
            border:#ff0000 2px solid;
        }
    </style>
    <script type="text/javascript">
        function inputColor(input){
                  input.className="norm";
                  input.οnfοcus=function(){
                  this.className="focus";
            }
        }
        function check(inputNode,regex,divId){
            var b=false;
            var divNode=document.getElementById(divId);
            if(regex.test(inputNode.value)){
                inputNode.className="norm";
                divNode.style.display="none";
                b=true;
            }else{
                inputNode.className="error";
                divNode.style.display="block";
               
            }
        }
        function checkUserDemo(userNode){
            var value=userNode.value;
            var regex=/^\w{3,5}$/;
            var divNode=document.getElementById("userdiv");
            if(regex.test(value)){
                userNode.className="norm";
                divNode.style.display="none";
            }else{
                userNode.className="error";
                divNode.style.display="block";
            }
        }
        function checkUser(userNode){
            var regex=/^\w{3,5}$/i;
            check(userNode,regex,"userdiv");
        }
        function checkPaw(pswNode){
            var regex=/^[0-9a-z]{3,5}$/i;
            check(pswNode,regex,"pswdiv");
        }
        function checkRepaw(repswNode){
        var b=false;
            var value1=repswNode.value;
            var value2=document.getElementsByName("psw")[0].value;
            var divNode=document.getElementById("repswdiv");
            if(value1==value2){
                repswNode.className="norm";
                divNode.style.display="none";
                b=true;
            }else{
                repswNode.className="error";
                divNode.style.display="block";
            }
        }
        function checkMail(mailNode){
            var regex=/^\w+@\w+(\.\w+)+}+$/;
            check(mailNode,regex,"maildiv");
        }
        function checkForm(formNode){
            //alert(formNode.user.value);
            with(formNode){
                if(checkUser(user)&& checkPaw(psw) && checkRepaw

(repsw) && checkMail(mail)){
                    event.returnValue=true;
                }else{
                    event.returnValue=false;
                }
            }
        }
        window.οnlοad=function(){
            with(document.foms[0]){
                inputColor(user);
                inputColor(psw);
                inputColor(repasw);
                inputColor(mail);
            }
       
           
        }
       
       
    </script>
  </head>
 
  <body>
    <form οnsubmit="checkForm(this)">
        <table>
            <tr>
                <th>注册表单</th>
            </tr>
            <tr>
                <td>
                    <div>用户名</div>
                    <div><input type="text" name="user"  οnblur="checkUser(this)"/></div>
                    <div class="errorinfo" id="userdiv">用户名错误，请按照要求输入</div>
                    <div>用户名必须是3-5位，有字母(a-z),数字(0-9),下划线(_)组成</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div><span>密码 </span><span id="repswspan">确认密码</span></div>
                    <div>
                        <input type="password" name="psw" οnblur="checkPaw(this)"/>
                        <input type="password" name="repsw"οnblur="checkPaw(this)" />
                    </div>
                    <div class="errorinfo" id="pswdiv">密码格式错误请按照规范输入</div>
                    <div class="errorinfo" id="repswdiv">两次密码不一致</div>
                    <div>密码必须是3-5位，有字母(a-z),数字(0-9)组成</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>邮箱地址</div>
                    <div><input type="text" name="mail" οnblur="checkMail(this)"/></div>
                    <div class="errorinfo" id="maildiv">邮箱地址错误，请按要求填写</div>
                    <div></div>
                </td>
            </tr>
            <tr>
                <th>
                    <input type="submit" value="提交数据"/>
                </th>
            </tr>
        </table>
    </form>
  </body>
</html>

------ <a href=" http://www.itheima.com" target="blank">android培训</a>、<a href=" http://www.itheima.com"