分享10

JS 04

2019/11/29 8:36:39

---

window 对象

-   打开窗口
        var 窗口对象 = window.open(url,[name],[config],[specs]);
        参数1.    新窗口加载的页面地址
        参数2.    窗口的名称, 是唯一标识, 不允许同时存在两个相同名称的窗口.
        参数3.    窗口的配置 , 是一个具备特殊格式的字符串.
                格式: 由多个键值对组成, 键与值之间使用等号连接, 多个键值对之间使用逗号分隔.
                键值对:
                    1.  width   :   窗口的宽度
                    2.  height  :   窗口的高度
                    3.  left    :   窗口距离屏幕左边框的距离
                    4.  top     :   窗口距离屏幕上边框的距离.
        参数4.    boolean值, 是否允许使用历史记录加载新窗口

• 关闭指定窗口 (很多浏览器现在只允许打开窗口的JS 关闭窗口.)
  窗口对象.close();
• 关闭当前窗口 (很多浏览器现在只允许打开窗口的JS 关闭窗口.)
  window.close();

for(int i=0;i<5;i++){
for(int j=0;j<6;j++){
System.out.print("*");
}
System.out.println();
}

浏览器地址对象 location ***

属性: 
    href    :   用于设置与获取当前浏览器的网址地址. 如果给此属性赋值, 会导致页面发生跳转.

函数:
reload() : 刷新网页
replace("网址") : 替换网页.

(替换 不等于跳转)
A页面 跳转到 B页面 跳转到 C页面 此时后退回到了B页面.
A页面 跳转到 B页面 替换了 C页面 此时后退回到了A页面.

控制台对象 console *

-   输出普通日志:
        console.log("文本");

• 输出错误日志:
  console.error("文本");
• 输出警告日志
  console.warn("文本");
• 输出提示日志:
  console.info("文本");
• 输出调试日志:
  console.debug("文本");
  

事件 *

-   JS中事件分为三大类:
        1.  状态事件
        2.  鼠标事件
        3.  键盘事件

事件代码块中的this

我们HTML标签中 编写事件属性时 , 属性值中可以使用this , 表示的是触发事件的元素.

例如:
<button οnclick=“this.innerHTML=‘锄禾日当午’”>示例按钮</button>
上述代码中的this , 就表示被点击的这个按钮.
按钮被点后 , 按钮显示的文字就变成了 锄禾日当午.

事件对象

在任何一个事件触发的代码块中, 都可以操作一个对象. 对象名叫做event

常用属性:
1. clientX : 鼠标事件时 鼠标所在的x坐标
2. clientY : 鼠标事件时 鼠标所在的y坐标
3. keyCode : 键盘事件时 按键的编码.

键盘事件

-   onkeydown   :   当键盘按下   (当按下按键不松开时,会持续的触发按下事件)
-   onkeyup     :   当键盘弹起

键盘事件通常是给window添加的.
格式:
window.onkeydown = function(){

}

面向对象 了解

面向过程    :   

面向对象 :

问: 把大象装进冰箱, 分几步?

    1.  把冰箱门打开
    2.  把大象放进去
    3.  把冰箱门关上


把大象装进冰箱, 分几步? 
    1.  招个保姆
            -   开冰箱门
            -   关冰箱门
            -   装东西

    1.  制造一个智能冰箱
            -   装东西

创建对象的三种方式

JS中的对象, 进行属性赋值时, 如果属性不存在, 则创建属性并赋值;

格式1.

var 对象名 = new Object();

例如:

var p = new Object();
p.name = "子敬";
p.age = 30;
p.hahaha = "大宝剑";
p.say = function(){
    alert("我叫:"+this.name+",我今年"+this.age+"岁了,我的爱好是:"+this.hahaha);
};

p.say();

格式2.

通过创建对象模板, 然后new模板, 完成对象的创建.

格式:
1. 创建模板的格式
function 模板名称(形式参数列表){
通过this给属性赋值;
}
2. 使用模板的格式
var 对象名 = new 模板名称(实际参数列表);

案例:
function Person(name,age){
this.name = name;
this.age = age;
this.say = function(){
alert("我是:"+this.name+" , 我今年"+this.age+"岁了");
};
}
var p = new Person("大逗逼沛麟",18);
p.name = "小逗比沛麟";
p.book = "老汉金苹果";
p.say = function(){
alert("我是:"+this.name+" , 我今年"+this.age+"岁了, 我喜欢看的书是:"+this.book);
};
p.say();

格式3. 通过JSON来创建对象.

JSON    :(JavaScript Object Notaion)    JS对象简谱,是一种轻量级的数据交换格式

格式:
JSON中包含两大格式:(JSON对象与JSON数组,这两种格式可以互相嵌套)
1. JSON对象
- 一个对象由一个{}表示.
- 括号中描述的是对象的属性 , 属性由一个个的键值对组成.
- 键与值之间使用英文冒号连接 , 多个键值对之间使用英文逗号分隔.
- 键值对的键应使用引号引住 (JS中引号可以忽略,Java中不允许.)
- 键值对的值, 可以是JS中的任意数据.

        案例: 创建一个人.
            var p = {"name":"小泽马老师","age":18};


            var p = new Object();
            p.name = "小泽马老师";
            p.age = 18;

    2.  JSON数组
            就是JS中的数组格式;

案例:

    描述一个生活极其浪荡的人.

    var p = {
        "name":"小猪沛麟",
        "age":18,
        "paoyou":["小泽马","加藤马","仓井马",{
            "name":"愤怒的子敬",
            "length":180
        }]
    };
    alert(p.paoyou[3].length);

练习:
    描述一本书book           
        -   id
        -   name
        -   info

    var book = {
        "id":10001,
        "name":"金苹果",
        "info":"讲述了辛勤种植苹果的故事",
        "say":function(){
            alert("图书名称:"+this.name+" , 图书简介:"+this.info);
        }
    };
    /*book.say = function(){
        alert("图书名称:"+this.name+" , 图书简介:"+this.info);
    };*/
    book.say();