js入门及BOM和DOM

一、js简介

    js全名JavaScript，其实它跟java没有半毛钱的关系，由于当时java比较火，所以为了借用java的名推广一下js这门脚本语言，就起名为JavaScript，但是它也是像java一样，以一种面向对象的思想来描述事务，这一点到是跟java有点关系。
    js是一门弱类型语言，所谓弱类型就是在js中变量没有非常具体的类型，不分配具体的内存大小空间，但是弱类型不代表没类型，只是非常弱而已。js也是一门解释性语言，它不像java需要先编译成class文件，再执行，它直接由浏览器解释就可以执行，所以可以看到它的跨平台性是非常强的，因为不管你是windows还是mac，只需要装一个浏览器即可执行，现在js也越来越火，像notejs还搞全栈式开发。
    js有一个非常重要的特点就是它不能操作本地硬盘，这是js工程师出于安全性考虑而设计的。想像一下如果js如果可以操作本地硬盘，那如果从服务器端给客户端发一段格式化本地硬盘的代码，客户端直接就挂了。

二、在html中嵌入js

在html中嵌入js有四种方式：
    1、内联,放在<script type="text/javascript"></script>之中；注意：script标签可以放于html中的任意位置，但是浏览器对html的加载是属于瀑布式加载，即加载html文档时，浏览器会依次从上至下执行，当将js代码放于文档上部时，有时js要获取某个html中的某个元素，但浏览器还没加载出来，就会导致js代码异常或者浏览器的解析器崩溃，所以一般我们都将js代码放置于html文档的最后面或者将其放于window.onload事件中。
    2、放于外部js文件中，通过<script type="text/javascript" src="js文件的url"></script> 引入，注意：用来引入外部js文件的script标签体中的内容是无效的。
    3、放于元素的各种事件当中：<input type="button" value="clickme" onclick="var a = 1;var b = 2 ; alert(a + b)"/>或者<input type="button" value="clickme" onclick="checkForm（）"/> 这种方式其实官方是不推荐使用的，
因为将js代码写入html元素的属性中不易管理和阅读，他们更喜欢保持内容和行为的分离。
    4、嵌入到url中，代码前需加一个javascript协议限定符：这种情况下单行注释//必须改为多行注释/**/ ；<a href="javascript:alert('go');"><a/> 由于有些浏览器会解析url里的代码并且将返回值作为一个新开页面展示，所以我们不想展示返回值内容时需强制让其内容返回undefined，<a href="javascript:void alert('go');"></a> 这也是我们取消超链接默认点击效果<a href="javascript:void 0"></a>这样写的原因。由于可以在url中写js代码，所以我们要测试一小段代码时，可以在浏览器地址栏中测试：javascript：js代码；

三、常用的js对象

js中常用的 四个对象：Array、Math、Date、String。
1、Date：

<span id="time"></span>

/*桌面小时钟*/
window.onload = function(){
    var currentTime = new Date();
    var curTimeStr = "";
    var span = document.getElementById("time");
    var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
    setInterval(function(){
        currentTime = new Date(  currentTime.getTime() + 1000 );
        curTimeStr = currentTime.getFullYear() + "年" +currentTime.getMonth() + "月" + currentTime.getDate() + "日   " +//
                    week[currentTime.getDay()] + "   "  + currentTime.getHours() + "点" +currentTime.getMinutes() + "分" + currentTime.getSeconds() + "秒";
        span.innerHTML = curTimeStr;
    },1000);
}

Date.parse（“Jul 3,2014”/“7/8/2013”）解析字符串成Date对象
2、Math对象
Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
3、String对象跟java的String对象是比较类似的，Array参见“js之数组”

四、BOM

BOM：browser object model浏览器对象模型：有5个对象，但常用的有以下两个：

1、window：代表当前浏览器窗口对象

window对象属于全局对象，所以方法前的window.可以省略

a、弹框

    alert（“提示内容”）；弹出提示对话框，无返回值
    confirm（“确认对话框”）；按确认返回true，取消返回false
    prompt（“输入对话框”）；按取消返回null，输入内容并按确认返回输入值

b、定时器

    循环执行定时器：setInterval（function（）{}，毫秒值）或者setInterval（“字符串代码”，毫秒值）；停止定时器：用一个变量接受setInterval函数的返回值，clearInterval（返回变量名）；
    执行一次定时器：setTimeout（funciton（）{}，毫秒值）；或者setTimeout（“字符串代码”，毫秒值）；终止定时器：跟setInterval一样，用一个变量名接收setTimeout返回值，clearTimeout（变量名）；终止

c、全局函数

    parseInt/parseFloat将接收的字符串转为整数或者小数，其实js中在运算时都会进行自动类型转换的。
    eval函数，能够将字符串变成代码执行，也就是说能够进行代码注入，这是java语言没有的功能，进行js框架设计时非常有用。

2、location：代表浏览器地址栏对象

    常用方法：locating.href=“”一般js通过href属性跳转到其他页面。

3、js入门小案例

a、轮播图制作

    准备三张图片：命名为1.jpg、2.jpg、3、jpg

        <img src="1.jpg"/>

        var num = 1;
        setInterval(function(){
            var image = document.getElementById("image");
            image.src = num + ".jpg";
            num++;
            if( num > 3 ){
                num = 1;
            }
        },1000);

b、弹广告

广告会在打开页面2秒后弹出，并且在弹出2秒后自动关闭

        <div id="imagediv" style="width:200px,height:200px;background:url(1.jpg);dispaly:none"></div>

        setTimeout(function(){
            var imagediv = document.getElementById("imagediv");
            imagediv.style.display = "block";   
            setTimeout(function(){
                imagediv.style.display = "none";
            },2000);
        },2000);

c、等待跳转页面

    系统正在处理，<span id="time"></span>秒后将跳转回主页，如长时间未跳转，请<a href="../HelloWorld.html">点这儿</a>


            var num = 5;
            setInterval(function(){
                document.getElementById("time").innerHTML = num;
                num--;
                if(num == 0 ){
                    location.href = "../HelloWorld.html";
                }
            },1000);

d、二级联动菜单

        <select id="country"></select>
        <select id="city"><option>--请选择--</option></select>


        /*核心:option的value值和city数组的角标对应*/
        var country = ["湖南省","湖北省","山西"]    ;
        var city = [["湘潭市","岳阳市","长沙市"],["荆州市","武汉市"],["长治市","临汾市","太原市"]]; 
        /*将省份添加进去*/
        var  countrySelect = document.getElementById("country");
        var countryOptions = "";
        for(var x=0; x<country.length;x++){
            countryOptions += "<option value='" + x+ "'>" + country[x] + "</option>"
        }
        countrySelect.innerHTML = countryOptions;
        /*注册省份改变事件：拿到值--》拿到值在二维数组中对应的数组--》展示*/
        var citySelect = document.getElementById("city");
        countrySelect.onchange = function(){
            var cityArray = city[this.value];
            var cityOptions = "";
            for(var y=0; y<cityArray.length; y++){
                cityOptions += "<option>"+ cityArray[y] +"</option>";
            }
            citySelect.innerHTML = cityOptions;
        }   

e、滑动广告

        <div id="guanggao">您有一个紧急文件需处理！！</div>

        var guanggao = document.getElementById("guanggao");
        var x = 0;
        setInterval(function(){
            guanggao.style.left = x  + "px";
            x++;
            if(x>1000){
                x = 0;
            }
        },20);

f、实时展现当前鼠标值

        <div id="test" style="width:200px;height:200px;border:1px solid red"></div>
        <span id="zuobiao"></span>

        var testDiv = document.getElementById("test"); 
        testDiv.onmousemove = function(){
            var x = event.clientX-this.offsetLeft;
            var y = event.clientY-this.offsetTop;
            document.getElementById("zuobiao").innerHTML = x + "  :  " + y;
            if(x<100){
                this.title = "您现在处于左边";
            }else{
                this.title = "";
            }
        }

五、DOM

1、简介

    DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。
    文档：标记型文档。常见的标记型文档：html ， xml
    对象：封装了属性和行为的实例，可以被直接调用。
    模型：所有标记型文档都具备一些共性特征的一个体现。

2、解析

    DOM这种技术是如何对标记型文档机型操作的呢？要操作标记型文档必须对其进行解析。常见解析技术有两种：
    a、DOM技术的解析方式：将标记型文档解析一棵DOM树，并将树中的内容都封装成节点对象。例如：html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。

    DOM解析方式的好处：可以对树中的节点进行任意操作，比如：增删改查。
    弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。
    b、另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是W3C的标准。
    SAX解析的方式：基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改。

3、常见的dom操作方法

(1)标签元素的操作
    1）获得元素对象：
        根据id获得一个元素：getElementById(id属性值)
        根据标签获得多个元素：getElementsByTagName(标签名称)
        根据class属性获得多个元素：getElementsByClassName(class的属性值)
        根据name属性获得多个元素：getElementsByName(name属性值)
    2）创建一个新元素createElement()
    3）将元素放到某个父元素的内部appendChild()
    4）删除某个元素：removeChild
    5）替换某个元素：replaceChild
    6）标签体的获取与设置：innerHTML
    7）关系：1，父节点: parentNode:对应一个节点对象2，子节点：childNodes:对应一个节点集合。
    注意：appendChild和replaceChild如果操作对象是获取的dom对象，则操作的是原来的dom对象，而不是其副本（表现为原对象会被删除）。另外childNodes会将空格解析为一个文本节点
    节点一般都有三个属性。节点名称nodeName，节点类型nodeType，节点值nodeValue。
(2)属性的操作
        获得属性的值：getAtrribute(name)
        设置属性的值：setAtrribute(name,value)
        删除某个属性：removeAtrribute(name)
当然，属性的获取和设置还可以用点.