最近在做关于WebGL的引擎,发现自己的JavaScript水平有点体力不支。遂在空闲之余补习了JavaScript的知识。当然本文基础的不在累述,因为接下来我要实现的js的模块化编程和基于对象编程。所以此篇重点在对象。
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。如何实现呢?
这里就充分利用函数,比如数组函数pop()、push()、join()、以及Location对象//处理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);
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 的值
程序代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cookies</title> <script type="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=new Date(); 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('Please enter your name:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>