码迷,mamicode.com
首页 > 编程语言 > 详细

奔跑吧,我的JavaScript(3)---JavaScript浏览器对象

时间:2015-08-27 23:02:23      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:全局变量   对象   javascript   

Window对象

1.是BOM的核心,window对象指向当前的浏览器窗口,最高层对象之一。
2.所有JavaScript全局对象,函数以及变量均自动成为window对象成员
3.全局变量是window对象的属性
4.全局函数是window对象的方法
5.window尺寸
window.innerHright/window.innerWidth,浏览器窗口的内部高度/宽度
6.window方法
window.open()       打开新窗口
window.close()      关闭窗口

计时器

主要是指计时事件,使用JavaScript,我们有能力做到在一个设定的时间隔之后来执行代码,而不是在函数被调用后立即被执行
1.计时方法
setInterval();  间隔指定的毫秒数不停地执行指定的代码
clearInterval();   停止setInterval()方法
setTimeout();   暂停指定的毫秒数后执行指定的代码
clearTimeout();  停止setTimeout()方法
曾经遇到一道面试题,也是考察这方面的知识
小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象:
<span style="font-size:14px;"> function Dog(){
        this.wow = function(){
            alert("Wow");
        }
        this.yelp = function(){
            this.wow();
        }
    }</span>
小蟒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)的不停叫唤(yelp)。请根据描述,按示例的形式用代码来实现(提示:继承,原型,setInterval)
<span style="font-size:14px;">function MadDog(){
        this.yelp = function(){
            var self = this;     //继承
            setInterval(function(){
                self.wow();
            },500);
        }
    }
    MadDog.prototype = new Dog();      //声明原型
    var dog = new Dog();
    dog.yelp();
    var maddog = new MadDog();
    maddog.yelp();</span>
当然,我们也可以不用到继承或者原型的方法去实现,那么我们就可以这样:
<span style="font-size:14px;">   var yelp = function(){
            alert("wow");
            var wow = setTimeout(function(){
                yelp();
            },500);
        }
    yelp();</span>
直接调用方法,也可以直接实现

History对象

window.history对象包含浏览器的历史(URL)的集合
history.back();   与在浏览器点击后退按钮相同
history.forward();   与在浏览器中点击按钮向前相同
history.go();   进入历史中的某页面
我们常常会遇到这样的情况,当我们在浏览网站时,有的内容需要我们登陆后才可以继续浏览(吐槽一下百度贴吧,如果不登陆,只能停留在第一页,简直无爱),当我们登陆成功后,会返回之前我们所浏览的页面。那么我们该怎样实现?
<span style="font-size:14px;"><body>
<!--之前浏览界面-->
<a href="test1.html">跳转</a>

</body>
<body>
<!--登陆界面-->
<form>
    <input type="text" id="username">
</form>
<button id="btn" onclick="demo()">提交</button>
<script>
    function demo() {
        var name = document.getElementById("username").value;
        if (name == "L") {

            history.go(-1);
        } else {
            alert("用户名输入错误,请重新输入!");
        }
    }
</script>
</body></span>

Location对象

window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面
对象属性
location.hostname   返回web主机的域名
location.pathname   返回当前页面的路径和文件名
location.port           返回web主机的端口
location.protocol     返回所使用的web协议
location.href           返回当前页面的URL
location.assign()     方法加载新的文档
(用innerHTML转换)
<span style="font-size:14px;">location.assign("http:\\www.baidu.com");</span>

Screen对象

window.screen  对象包含有关用户屏幕的信息,重点关注不同屏幕的适配性以及对开发人员的布局有所帮助
属性
screen.availWidth/screen.availHeight   可用屏幕的宽度/高度
screen.width/screen.height   屏幕的宽度/高度

JavaScript面向对象

认识面向对象
(1)一切事物皆对象
(2)对象具有封装和继承特性
(3)信息隐藏
下面,我们来看面向对象的书写方式ONE
<span style="font-size:14px;">/**
 * Created by pc on 2015/8/27.
 */
(function() {
    function person() {
        this.name = name;
    }

    person.prototype.say = function () {     //原型
        alert("Hello");
    }
    window.person = person;      //信息调用,闭包内执行
}());       //信息封装
function Student(){
    this.name = name;
}
/*子类调用父类方法*/
Student.prototype = new person();   //继承

/*父类回调子类方法*/
var per = Student.prototype.say;
Student.prototype.say =  function(){
    per.call(this);
    alert("stu-Hello");
}

var stu = new Student();
stu.say();


</span>
书写方式TWO
<span style="font-size:14px;">/**
 * Created by pc on 2015/8/27.
 */
(function() {
    function person() {
        var _this = {};
        _this.name = name;
        _this.say = function(){
            alert("Hello");
        }
        return _this;
    }
    window.person = person;
}());       //信息封装
function Student(){
    var _this = person();
    /*父类回调子类方法*/
    var per = _this.say;
    _this.say =  function(){
        per.call(this);
        alert("per-Hello");
    }
    return _this;

}
/*子类调用父类方法*/
var stu = new Object();
stu.say();


</span>







版权声明:本文为博主原创文章,未经博主允许不得转载。

奔跑吧,我的JavaScript(3)---JavaScript浏览器对象

标签:全局变量   对象   javascript   

原文地址:http://blog.csdn.net/u011318165/article/details/48036409

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!