js 笔记

###js 03

---

###DOM中的其他对象

###Window对话框


    1.    提示对话框 

        alert(弹出的文本)

    2.    确认对话框
        confirm(str) : 点击确定返回true  点击取消返回false


    3    输入对话框
        prompt(参数1,参数2)
        参数1. 是提示信息 
        参数2. 是输入框的初始值

        点击确定返回输入内容, 点击取消返回null
        

###打开新窗口

    var newWindow = window.open(url,name,specs,replace)

    参数1.     要打开窗口的url地址
    参数2.    窗口的名称
    参数4.    (true)加载历史文件 还是 (false)新条目
    参数3.  窗口的规格样式列表
        
        参数三 是逗号分割的列表形式

        常用参数:
            高度:    height=px;
            宽度:    width=px;
            x位置:  left=px;
            y位置:  top=px

        boolean类型参数:
            location=yes/no/1/0 :新打开的窗口, 是否是显示地址的
            menubar=yes/no/1/0  :是否显示菜单栏
            resizable=yes/no/1/0 :是否可调整窗口大小
            scrollbars=yes/no/1/0 :是否显示滚动条
            titlebar=yes/no/1/0 :是否显示标题栏        
            toolbar=yes/no/1/0 :是否显示工具栏

###关闭窗口

    通过窗口对象, 可以调用.close()

    window.close();


###定时器

    周期性: 

        开启周期性定时器: 
        setInterval(参数1,参数2);

            参数1. 要执行的JS语句 (一般我们在这里输入方法名)
        
            参数2. 时间周期 毫秒单位

            return : 返回执行的周期性定时器对象

        关闭周期性定时器:
        clearInterval(定时器对象)


    一次性定时器

        setTimeout(执行的语句 , 延迟执行的时间毫秒)
    
            

###屏幕信息

    screen  :  常用于获取屏幕的分辨力 和 可用宽高


    1.    x = screen.width :屏幕宽度
    2.    y = screen.height :屏幕高度
        
        y>x

    
    1.    screen.availWidth :屏幕可用宽度
    2.    screen.availHeight :屏幕可用高度


    window底部的任务栏 : 

        xp: 占用30px
        win7:占用40px


###浏览器请求历史 -了解

    history

    函数: 

            back() :后退
            forward(): 前进一页
            go(number): 指定前进和后退的页数

                例如: 
                go(-1) : 后退1个网页
                go(-5) : 后退5个网页
                go(1) : 前进1个网页
                go(5) : 前进5个网页


###地址对象location

    location

        属性: href: 表示当前浏览器加载的网页地址

        函数:
                replace(网址): 切换地址
                reload(): 刷新网页


        我们一般用来在JS中进行网页地址的跳转: 

            方式1. location.href="地址";
            方式2. location.replace("地址"); 区别:替换不等于跳转


###居中

    text-align: center;

    在元素容器中 , 指定自己的文本内容的位置

    


###事件

    事件: 指HTML对象 在状态发生改变, 或者用户操作鼠标键盘时触发的动作

        -    鼠标事件  onclick
        -    键盘事件
        -    状态改变事件   onload



#####键盘事件

    键盘可以连续多次按下而不弹起

    1.    键盘的按下(当按下不松开时 . 会连续触发)
        onkeydown


    2.    键盘的弹起(只有当键盘弹起时才会触发)
        onkeyup


    给你的网页添加按键的监听: 

        window.onkeydown = function(){
            //当键盘按下时  自动触发
            //如何区分用户按下的按键
            var code = window.event.keyCode;
            console.info("您按下的是:",code);
        }


###事件冒泡机制

    当处于HTML模型底层的对象事件发生时, 会一次激活上层对象的同类事件 !


    取消事件冒泡

    1.    设置取消冒泡标记为true
        event.cancelBubble = true;
    2.    停止冒泡
        event.stopPropagation();
        

###获取事件源

    IE操作: elementObject = event.srcElement

    其他浏览器: elementObject = event.target;

    支持多浏览器的操作: 
        elementObject = event.srcElement||e.target;


###面向对象

    JS中的对象: 用于封装属性和函数的一种特殊数据类型 !

    定义对象: 
    
        方式1.    直接创建对象

            案例:
                var person = new Object();
                person.age = 18;
                person.name="sblong";
                person.sex="妖";

        方式2.    创建对象的模版

        方式3.    使用JSON格式对象


###JSON

    轻量级的数据交换格式


    

    又两大格式 互相嵌套组成


    1.    JSON对象

        {}:表示对象
        描述数据 , 使用的是键值对. 键值对使用英文冒号连接 , 多个键值对之前使用英文逗号隔开
    
        例如描述一个人

        {"name":"sblong","age":18,"sex":"妖"}


    2.    JSON数组
        []: 表示数组
    
        描述数据 使用的是键值对 , 特殊的是它的键是下标 ! 多个值之间使用逗号隔开
    
        例如描述一组人名

        ["mblong","sblong","dblong","sblong"]


###JSON对象与JSON数组 嵌套描述事物

    描述一个人

    {
        "name":"sblong",
        "length":"5mm",
        "jiyou":[
            "baolin","sihan","zhaotaotao","yinlong",{
                "name":"baolin电动版","age":"30"
            }
        ]
    }


###练习: 

    使用JSON 描述一个用户: 

    帐号(uname): sblong
    密码(upass): 123456
    编号(id): 10001
    {
        "uname":"sblong",
        "upass":"123456",
        "id":10001
    }


###JS中解析JSON

    创建引用:

    var jsonObject = {
        "uname":"sblong",
        "upass":"123456",
        "id":10001
    }
    
    访问JSON对象中的数据: 

        JSON对象.key;    

    访问JSON数组中的数据:
        JSON数组[下标]



    复杂案例: 

        var jo = {
            "name":"sblong",
            "length":"5mm",
            "jiyou":[
                "baolin","sihan","zhaotaotao","yinlong",{
                    "name":"baolin电动版","age":"30"
                }
            ]
        };

    访问baolin电动版:
        jo.jiyou[4].name


###解析案例:

        var jo= {
            "name":"sblong",
            "age":18,
            "sex":"不详",
            "id":10001,
            "tools":[
                "黄瓜","藕","皮鞭","辣椒油"    
            ],
            "haojiyou":{
                "name":"宝林",
                "length":"-5mm"
            }
        };
        console.info("访问JSON对象的id:"+jo.id);
        console.info("好基友:"+jo.haojiyou.name);
        console.info("工具:",jo.tools[0],jo.tools[1],jo.tools[2],jo.tools[3]);



###Ajax知识点时 会学习Java中解析和快捷组装JSON数据

###在Spring框架也会讲解JSON