JavaScript之对象研究一

最近在做关于WebGL的引擎，发现自己的JavaScript水平有点体力不支。遂在空闲之余补习了JavaScript的知识。当然本文基础的不在累述，因为接下来我要实现的js的模块化编程和基于对象编程。所以此篇重点在对象

                                                  Window    窗体对象

                                                  Screen     屏幕对象

                                                     

JavaScript之浏览器对象      History历史对象

                                                vigator   浏览器对象

                        PopupAlert  消息对象

                        Timing      计时对象

                        Cookies     Cookie对象

Window对象

1. window与this对象

console.log('this == window ?', this == window); 

通过这句话我们发现window和this是相同的。且我们在js中书写alert()等方法，实际上我们省略了window,也就是说我们书写window.alert()和this.alert()是等价的。(如果我们安装webstorm，可以发现无论他们都来自于DHTML.js里，而通过浏览器的Debug，我们也发先了window和this反馈的结果是一样的。

)

2. Window和window对象

console.log('Window == window ?',Window == window)

通过运行这句话我们发现结果为假，也就是条件不整理。那么也就是Window和window是不一样的。

那么怎么佐证这个观点呢？

这里证明了一点Window是window下面的一个方法。那么我们使用下面的一句话再次证明:

console.log('window = ', window);
console.log('Window = ', Window);

3. window是JavaScript的上下文

上下文的概念:所有能得到的属性全部集中到一个区域里，你可以通过这个小容器，接收和调用到各个范围传递过来的属性，这就是所谓的”上下文“， 你可以把它记为”引用池“！

   常见的上下文:jsp中内置的上下文对象 PageContext

               Struts2中内置的上下文对象 ActionContext

               Spring中内置的上下文对象 

分为两类: web项目  WebApplicationContext

         非web项目 beanFactory

               Web中内置的上下文对象  ServletContext

那么如何佐证这一点呢？

window.a={
            Hello: "1234",
          };
          var b="34";

console.log(a+"   "+b);

我们发现无论是对象a，还是变量b。都在window下面，还有我们常见的alert()、confirm()、closed()等等

JavaScript的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“顶层对象”。这就是说，javascript的所有对象，都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”，在浏览器环境中，这个顶层对象就是window对象。所有浏览器环境的全局变量，都是window对象的属性。

Screen对象

   得到屏幕的一些信息。主要使用的 availHeight、availWidth、Height、Width

   Orientation判断横屏还是竖屏显示

我们在做一个测试:

同样的代码:

  Window.screen

IE环境下:

 

 而Google环境下:

 

   两款不同的浏览器，也就是两款不同的产品，Screen对象下面拥有的函数和方法是不一样的，有一些相同。这也就是为什么你的代码不能跨浏览器，因为有些函数是各自浏览器自己封装的。他们的不同，导致了你的代码可能不被浏览器所识别。所以我们在写Javascript一定要写常见，各自浏览器都遵循的国际标准。

Location对象

获得当前页面的地址

主要函数:

location.protocol 返回所使用的 web协议

  比如我们有一个这样一个需求，我目前的url是:

http://localhost:8899/WebstormProjects/JavaScript/jsHello.html?_ijt=7eb3796doqqr8pu9gkgjh2vbf5。这么大常串，而我只想替换掉jsHello.html为xx.html。如何实现呢？

   //处理Url
var pathName=window.location.pathname;
pathName=pathName.split("/");  //先用/分割
pathName.pop();  //去掉最后一个元素
pathName.push("xx.html");
var changedPathName=pathName.join("/");
var NewUrl=window.location.href.toString().replace(window.location.pathname.toString(),changedPathName);
          这里就充分利用函数，比如数组函数pop()、push()、join()、以及Location对象

History 对象

  对象包含浏览器的历史

   常见的前进、后退

Navigator 对象

   包含有关访问者浏览器的信息

  浏览器的名字为:Netscape-----网景公司。这也说明了为啥市面上大多数网站可以被Google浏览器访问，因为JavaScript就是这个公司开发的。。。

   通常我们有这样一个需求，比如我们的项目需要使用Google浏览器，而有的用户不看提示，或者没有一个对Web互联网的认知。这个时候我们需要检测浏览器并提示客户换浏览器。怎么操作呢？

JavaScript代码:

if (support === "ie8") {
   if ($.browser.msie  && parseInt($.browser.version, 10) < 9) {
      $obj.prepend(iepanel);
      $obj.prepend(overlay);
   }
   if ($.browser.msie  && parseInt($.browser.version, 10) === 6) {
      $("#ie-alert-panel").css("background-position","-626px -116px");
      $obj.css("margin","0");
   }
} else if (support === "ie7") {    // shows the alert msg in IE7, IE6
   if ($.browser.msie  && parseInt($.browser.version, 10) < 8) {
      $obj.prepend(iepanel);
      $obj.prepend(overlay);
   }
   if ($.browser.msie  && parseInt($.browser.version, 10) === 6) {
      $("#ie-alert-panel").css("background-position","-626px -116px");
      $obj.css("margin","0");
   }
} else if (support === "ie6") {    // shows the alert msg only in IE6
   if ($.browser.msie  && parseInt($.browser.version, 10) < 7) {
      $obj.prepend(iepanel);
      $obj.prepend(overlay);
      $("#ie-alert-panel").css("background-position","-626px -116px");
      $obj.css("margin","0");
   }
}

使用iealert插件

<script type="text/javascript">
   $(document).ready(function() {
      $("body").iealert();
   });
</script>

respond.min.js解决一些javascript的兼容性问题

PopupAlert 对象

   消息机制

   说明:目前Web段大多数都不用自带的消息提示框。国产的layerUI可以做到消息提示机制

Timing  计时对象

   在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

说明: setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

     setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

我们有这样的一个需求:一个按钮，发送一个验证码需要60s，在60s之内变为灰色

JavaScript代码:

  <script type="text/javascript">
    var count=60;
    function setTimeoutBtn(val) {
        if (count == 0) {
            val.removeAttribute("disabled");
            val.innerHTML="免费获取验证码";
            count = 60;
        } else {
            val.setAttribute("disabled", true);
            val.innerHTML="重新发送(" + count + ")";
            count--;
        }
        var Timing=setTimeout(function() {
            setTimeoutBtn(val)
        },1000)
    }
</script>

HTML代码:

<button id="csBtn1" class="BtnClass" οnclick="setTimeoutBtn(this)">加入CSS层叠样式后的HTML</button>

最后效果便实现了。

由上诉例子可知。setTimeout返回一个对象，而这个对象销毁呢？此时就需要对象名传给clearTimeout()

   我们由此也明白了JavaScript是单线程。

   解释:本来程序在执行定时操作，这个时候有人告诉程序你给改变按钮的内容。也就是说他是强行插入执行。也就是说这个定时函数实际上是通过插入执行队列的方式来实现

Cookie   对象

   cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值

            name+"="+value  (由于cookie在每一个浏览器保存的cookie是4K，所以需要把其设置为字符串，且用escape()进行特殊字符和中文编码)

                expires    过期时间(时间:使用格林尼治标准时间的文本字符串，要让过期只需要时间向前推迟)

cookie       path      能够被服务器上指定目录下的所有网站访问

              domain    浏览器跨域共享

              secure    使信息传输更加安全

程序代码:

<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Cookies</title>
    <scripttype="text/javascript">
        function getCookie(c_name) {
            if (document.cookie.length>0){
                var c_start=document.cookie.indexOf(c_name + "=");
                 if (c_start!=-1) {
                    c_start=c_start+ c_name.length+1
                    var c_end=document.cookie.indexOf(";",c_start);
                    if (c_end==-1){
                        c_end=document.cookie.length;
                    }
                    return unescape(document.cookie.substring(c_start,c_end));
                 }
            }
            return ""
        }

        function setCookie(c_name,value,expiredays) {
            var exdate=newDate();
            exdate.setDate(exdate.getDate()+expiredays)
            window.document.cookie=c_name+"=" +escape(value)+ ((expiredays==null) ?"": "; expires="+exdate.toGMTString())
            alert(c_name+"="+escape(value)+ ((expiredays==null) ?"": "; expires="+exdate.toGMTString()));
        }

        function checkCookie() {
            var username=getCookie('username');
            if (username!=null&& username!="") {
                alert('Welcome again '+username+'!')
            }else {
                username=prompt('Pleaseenter your name:',"")
                if (username!=null&&username!="") {
                    setCookie('username',username,365)
                }
            }
        }

    </script>
</head>
<bodyonLoad="checkCookie()">
</body>
</html>