web前端 (12)JS 04_12前端-CSDN博客

本文链接：https://blog.csdn.net/weixin_44075537/article/details/85036144

目录
浏览器窗口对象 window
定时器 ***
屏幕信息 screen 了解
浏览器历史对象 history 了解
浏览器地址对象 location ***
JS中的事件 ***
键盘事件 熟悉
事件冒泡机制 了解
事件源对象 了解
面向对象

浏览器窗口对象 window
窗口的打开

格式:
var 新打开的窗口对象 = window.open(url,[name],[config],[specs]);

参数1.    url 字符串参数, 表示新窗口加载的资源地址 
参数2.    name 可选字符串参数, 表示窗口的唯一标识 , 相同name的窗口只能存在一个 !
参数3.    config 可选字符串参数, 配置对象, 描述窗口的大小规格 , 是字符串类型的, 由多个键值对组成 ! (键与值之间使用等号连接, 多个键值对之间使用逗号分隔)
        常用的键值对 : 
            -   width   :   单位px , 表示新窗口的宽度
            -   height  :   单位px , 表示新窗口的高度
            -   left    :   单位px , 表示新窗口距离屏幕左边框的距离 
            -   top     :   单位px , 表示新窗口距离屏幕上边框的距离

1366/6 = 227
728/5 = 145

参数4.    specs 可选参数 , 是否允许加载历史文件

var width = 227;
var height = 145;
for(i=0;i<5;i++){
    var xtop = i*height;
    for(j=0;j<6;j++){
        var xleft = j*width;
        window.open("http://itdage.cn","chuizi","width="+width+"px,height="+height+"px,left="+xleft+"px,top="+xtop+"px");

    }
}

窗口的关闭

window对象.close();

关闭当前窗口: window.close();

定时器 ***
一次性定时器 ***

指的是延迟指定毫秒数, 执行指定代码 !

格式:
setTimeout(“执行语句”,数值毫秒);

周期性定时器 ***

指的是每间隔指定毫秒数, 重复执行指定代码 !

开启周期性定时器:
var 周期性定时器 = setInterval(“执行语句”,数值毫秒);

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

案例:

10

屏幕信息 screen 了解

属性:

-   screen.width    :   获取屏幕宽度
-   screen.height   :   获取屏幕高度
-   screen.availWidth   :   可用宽度
-   screen.availHeight  :   可用高度

windows任务栏的高度:  win7 和 win 是 40px       windowsXP是30px

浏览器历史对象 history 了解

函数:
- back() : 后退到上一页
- forward() : 前进到下一页
- go(数字) : 整型数字 , 正数表示前进指定页数, 负数表示后退指定页数 !

浏览器地址对象 location ***

属性:
href : 用于获取与设置浏览器地址栏中的内容, 设置地址栏内容, 回导致网页发生跳转 !

函数:
reload() : 刷新网页
replace(url): 替换当前网页内容为指定url网页内容, 回导致浏览器地址发生改变! (注意: 替换不等于跳转)
assign(url) : 跳转到指定网页 ,与 href 操作效果相同

JS中的事件 ***

什么是事件:
指的是网页在元素的状态改变时, 用户鼠标操作时 , 以及用户键盘操作时触发的动作 !

分类:
- 状态事件
- 鼠标事件
- 键盘事件

JS事件对象 event *

在JS中每一个事件发生时, 都会产生一个事件对象, 在事件中可以直接通过event来调用 !

属性:
- clientX : 鼠标事件触发时的横向x的坐标
- clientY : 鼠标事件触发时的垂直y的坐标
- keyCode : 键盘事件触发时的键盘码 !

键盘事件熟悉

onkeydown : 当键盘按下
onkeyup : 当键盘弹起

一次按下并不对应一次弹起 !

注意:
通常我们都是给window窗口添加键盘事件 (可以作用到整个网页)

格式:
window.onkeydown = function(){

案例:

Insert title here

事件冒泡机制了解

HTML元素在触发鼠标事件时 , 会依次激活父元素的同类事件 !

如何停止冒泡:
格式:
在事件触发时 , 调用停止事件冒泡的函数 !
event.stopPropagation();

事件源对象了解

事件源对象就是事件源头的对象 !

如何获取事件源对象:
格式:
- IE浏览器:
var element = event.srcElement;
- 其他浏览器:
var element = event.target;

案例:

<style type="text/css">
    button{
        width:60px;
        height:30px;
        box-shadow:2px 2px 2px 2px #fff;
    }
    button:hover{
        box-shadow:2px 2px 2px 2px #999;
    }
    table{
        border:2px solid #666;
        box-shadow:2px 2px 2px 2px #999;
        margin-top: 20px;
    }
    #div1{
        width:218px;
        height:20px;
        line-height:20px;
        padding: 10px 20px;
        border:2px solid #666;
        box-shadow:2px 2px 2px 2px #999;
    }
    table:hover{
        box-shadow:6px 6px 6px 6px #999;
    }
    #div1:hover{
        box-shadow:6px 6px 6px 6px #999;
    }
</style>
</head>
<body style="margin: 50px;">
    <script type="text/javascript">
        function x1(event){
            //事件源对象
            var element = event.target;
            if(element.nodeName=="BUTTON"){
                //确定点击的都是按钮
                var text = element.innerHTML;
                //寻找div1
                var div1 = document.getElementById("div1");
                switch (text) {
                case "c":
                    //清空div1的内容
                    div1.innerHTML = "";
                    break;
                case "=":
                    //计算div1的内容
                    div1.innerHTML = eval(div1.innerHTML);
                    break;

                default:
                    //拼接div1的内容
                    div1.innerHTML+=text;
                    break;
                }
            }
        }
    </script>
    <div id="div1">

    </div>
    <table onclick="x1(event)">
        <tr>
            <td><button>7</button></td><td><button>8</button></td><td><button>9</button></td><td><button>+</button></td>
        </tr>
        <tr>
            <td><button>4</button></td><td><button>5</button></td><td><button>6</button></td><td><button>-</button></td>
        </tr>
        <tr>
            <td><button>1</button></td><td><button>2</button></td><td><button>3</button></td><td><button>*</button></td>
        </tr>
        <tr>
            <td><button>c</button></td><td><button>0</button></td><td><button>=</button></td><td><button>/</button></td>
        </tr>
    </table>

面向对象
JS中定义对象三种方式

在Java中, 需要创建一个Class , 然后通过new 关键字创建对象

在JS中, 创建对象时一般不需要模板 , 可以直接创建对象, 然后给指定属性赋值.
给属性赋值时, 如果属性不存在, 则创建属性并赋值 ;
使用属性值时, 如果属性不存在, 则结果为未定义 !

方式1. 创建对象直接使用

格式: var 对象名 = new Object();

案例:
var p = new Object();
p.name=“孙宽”;
p.age=88;
p.sex=“妖”;
p.say = function(){
alert(“我是:”+this.name+",我今年"+this.age+“岁了,我是一”+this.sex+“人 !”);
}
p.say();

方式2. 创建对象模板函数, 通过new模板的方式, 来创建对象

格式:
    function 模板名称(形式参数列表){
        //通过this 给属性和函数赋值
    }

案例:
    function Person(name,age,sex,say){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.say = say;
    }
    var p = new Person("小泽宽宽",18,"男",function(){
        alert("从前有座山, 山上有座庙...");
    });
    p.say();