javascript基础

一、Browser对象

<一>、window对象

1.window.尺寸

当ie>=9时：

window.innerHeight/outHeight
window.innerWidth/outWidth

当ie=8，7，6，5时：

window.documentElement.clientHeight/outHeight
window.documentElement.clientWidth/outWidth
或者
document.body.clientHeight
document.body.clientWidth

2.window.open();widow.colse();

(1).window.open(URL,name,features,[replace])

其中：
URL：新窗口的位置，有“省略/空格”时，不能显示任何文档；

name：窗口名称/target特性；

features：窗口特点：

channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0  是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0   是否使用全屏模式显示浏览器。
默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels   窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0  是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0    窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0   是否显示滚动条。默认是 yes。
status=yes|no|1|0   是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0  是否显示浏览器的工具栏。默认是 yes。
top=pixels  窗口的 y 坐标。
width=pixels    窗口的文档显示区的宽度。以像素计。

replace：一个可选布尔值

true：URL 替换浏览历史中的当前条目
false：URL 在浏览历史中创建新的条目

(2).window.close()

• 直接调用；

  eg:
  <script type="text/javascript">
  function closeCurrentWindow()
  {
  window.close();
  }
  </script>

• 当用于关闭指定的由window.open()打开的窗口，在没有window.open()时，则控制台显示“无法使用脚本关闭非脚本打开窗口”；

  eg：
  <script type="text/javascript">
  var openedWindow;
  function openWindow()
  {
  openedWindow = window.open('moreinfo.htm');
  }
  function closeOpenedWindow()
  {
  openedWindow.close();
  }
  </script>

(3).window.resize()；window.scroll()；

window.resizeBy(XX[px]，YY[px]);——窗口尺寸变化的单位为：±XX，±YY （单位/px）；
window.resizeTo(XX[px]，YY[px]);——窗口尺寸变换为：XX,YY（单位/px）；
window.scrollBy(XX[px]，YY[px]);——屏幕滚动的单位为：±XX，±YY （单位/px）；
window.scrollToo(XX[px]，YY[px]);———屏幕滚动到数据位置：XX,YY（单位/px）；
object.onscroll()；onscroll事件：元素滚动时执行..；
document.Element.scrollTop||document.body.scrollTop;回顶；

2、History对象

• window对象的一部分，可通过 window.history 属性对其进行访问：

• window.history.back()——返回一前一个URL；

• window.history.forward()——加载下一个URL；

• window.history.go()——加载某个具体的页面；

3、Laction对象

• window对象的一部分，可通过 window.Location 属性对其进行访问：

• 属性：

• >window.location.hash()——返回一个URL的锚部分（#及其以后的部分）；

  window.location.host()——返回/设置主机名及端口
  window.location.href()——返回完整的URL；
  window.location.search()——返回/设置RUL查询部分（从?开始的URL）；
  window.location.port()——返回/设置一个URL服务器使用的端口号；

• 方法：

  window.location.reload()——重新加载当前文档；
  window.location.assign()——加载一个新的文档；
  window.location.repalace()——替换当前文档；

<二>、Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

screen.availHeight ——返回屏幕的高度（不包括Windows任务栏）
screen.availWidth   ——返回屏幕的宽度（不包括Windows任务栏）
screen.colorDepth   ——返回目标设备或缓冲器上的调色板的比特深度
screen.height   ——返回屏幕的总高度
screen.pixelDepth   ——返回屏幕的颜色分辨率（每象素的位数）
screen.width    ——返回屏幕的总宽度

window.innerHeight/Width、outHeight/Width与screen.height/width的区别：
前者是，浏览器可见区域的内宽/高不含浏览器边框，但包含滚动条，兼容：ie9/10、chrome、firefox；
后者显示的是，屏幕的高度，同常与屏幕宽/高一致，兼容：ie7/8/9/10、chrome、firefox；

<三>、Navigatar对象

Navigator 对象包含有关浏览器的信息：
对象：

navigator.appCodeName——返回浏览器的代码名；
navigator.appName——返回浏览器的名称；
navigator.appVersion——返回浏览器的平台和版本信息；
navigator.cookieEnabled——返回指明浏览器中是否启用 cookie 的布尔值；
navigator.platform——返回运行浏览器的操作系统平台；
navigator.userAgent——  返回由客户机发送服务器的user-agent 头部的值；

方法：

navigator.javaEnabled()    ——指定是否在浏览器中启用Java，返回blooner；
navigator.taintEnabled()   ——规定浏览器是否启用数据污点(data tainting)；目前只有 Internet Explorer 和 Opera 浏览器支持 taintEnabled() 方法。
（链接为‘数据污点’的解释：
1、http://bbs.csdn.net/topics/300242073
2、 https://stackoverflow.com/questions/11520708/data-tainting-in-javascript ）；

<四>、悬浮在页面中的广告(现在很少见了)

1、js方法：top=XX.原top值+滚动条的scrollTop的距离+”px”；效果比较流畅；
2、css方法“：fixed；会出现广告窗口抖动的情况；

二、浮动框架

<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="URL" frameborder="n" name="XX" id="Y">

其中，class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="URL"可用来调用其他XX.html文件，这样对一些通用的html。只需一个即可，而且f12检查时，显示为空。

运用：

<div> <a href="1.html" target="NAME名"> xx</a> </div>
<div> <iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="YY.html" framborder="0" name="NAME名" ></div>
即:使用相同的name，即可将两者联系起来，在同一界面中，无需重复iframe部分，至改变<a>内容即可；

• 早期的iframe主要用于导航栏（navigator）

  但因为每次刷新都会回到首页，于是后台用ASP 有 SSI，PHP 有 require、require_once 或 include 函数、JSP 也有 include 指令等解决；

• 现在使用iframe的地方如：

  沙箱隔离（Sandboxie：一种按照安全策略限制程序行为的执行环境。早期主要用于测试可疑软件等）；
  引用第三方内容；
  独立的交互内容；
  需要保持独立焦点和历史管理的子窗口（在ajax中会面临用户无法退回上一步的情况，可以用iframe解决，ajax下面会说）

举例，目前用在邮箱(如qq邮箱)中、w3school的代码测试页面、网易音乐的底部播放条、所见即所得的网页编辑器（WYSIWYG Online HTML Editor）均在使用。

• （详细情况自己还不明白，搜了一下，先存着，以后遇到慢慢研究。http://blog.51cto.com/blogger/publish）

  三、Cookie

  cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。
  以“键=值”对形式存储；
  js中，document.cookie——创建、读取、删除cookie；
  eg：

document.cookie="username=LITAI；expires='UTC/GMT' "；（注;协调世界时和格林尼治标准时间，现在普遍使用前者）

设置cookie方式：

(1)、 document.cookie="username=LITAI；expires='UTC/GMT' "；
(2)、var　times=new Data().gettime();
times.setTime(newData().getTime()+1000);1000——延迟1000ms时间，以便显示之后1000ms后cookie消失；
(3)、有效时间=times.toUTCString()/tmes.toGTMString()；

四、AJAX （Asynchronous JavaScript and XML）

<一>、AJAX

• AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  传统的web交互，每次用户提交请求时，服务器都会重新返回一个完整的Html页面，这样用户需要等待而服务器资源也被浪费，于是诞生了ajax等各种服务于此的技术。
  （ajax历史：https://www.cnblogs.com/shenzikun1314/p/6529911.html ）

• AJAX核心依赖的是浏览器提供的XMLHttpRequest对象，其原理相当于在服务器和用户之间加了一个AJAX引擎，使用户操作和服务器实现响应异步化。

过程：初始化——>>发请求——>>服务器接受并处理——>>获得服务器响应
参考：w3school：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp
（1）首先，创建XMLHttpRequest对象：

variable=new XMLHttpRequest()（;对于IE5/6版本使用：variable=new ActiveXObject("Microsoft.XMLHTTP");）

检查是否支持XMLHttpRequest 对象：

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

（2）接着，向服务器发送请求：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

• 其中：open（method、url、async）
  规定请求的类型、URL 以及是否异步处理请求。：

  method：请求的类型；GET 或 POST
  url：文件在服务器上的位置,任何形式的服务器脚本文件，.txt/.xml/.asp/.php;
  async：true（异步，浏览器可以做其他事）或 false（同步，浏览器不能做其他事），一般默认异步；

• send(string)将请求发送到服务器:

• > string：仅用于 POST 请求;

• GET 还是 POST？
  与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
  然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

get请求：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();为了避免缓存造成的网页自动保存情况，加一个如 Math.random()的变量；

post请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

（3）接着，向服务器处理后，我们开始接受服务器响应：
使用XMLHttpRequest 对象的 responseText 或 responseXML 属性：
responseText——获得字符串形式的响应数据  ：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML——获得 XML 形式的响应数据:
请求 books.xml （关于XML请求及响应文档的说明： http://blog.csdn.net/jason009/article/details/1299831 ）文件，并解析响应:

（4）onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息.

readyState  —— 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化（以数字表示）：

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

status——    状态以字符串表示（Ajax status和statusText状态对照表：http://blog.csdn.net/qi1271199790/article/details/60465859 ）：

200: "OK"
404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

然后遍历并赋值即可：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

ajax实例1：

<script>
window.onload = function() {

var oBtn = document.getElementById('btn');oBtn.onclick = function() {    var xhr = null;    try {        xhr = new XMLHttpRequest();    } catch (e) {        xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    /*        1.缓存 在url？后面连接一个随机数，时间戳        2.乱码 编码encodeURI    */    xhr.open('get','links文件夹/X.get.php?username='+encodeURI('小明')+'&age=23&' + new Date().getTime(),true);    xhr.send();    xhr.onreadystatechange = function() {        if ( xhr.readyState == 4 ) {            if ( xhr.status == 200 ) {                alert( xhr.responseText );            } else {                alert('出错了,Err：' + xhr.status);            }        }    }}

}
</script>

<二>、AJAX的封装：

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/ajax.js"></script>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
ajax('get','links/getNews.php','',function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('content');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});    
}
}
</script>

应用：
1、photolist：

<div class="show"></div>
<input type="button" class="btn" value="加载中."/>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/ajax.js"></script>
<script>
window.onload=function(){

    var show=document.getElementsByClassName("show")[0];    var btn=document.getElementsByClassName("btn")[0];    var page=0;    var loading=false;    loadingpage()    btn.onclick=function(){        if(!loading){            loadingpage()        }    }    function loadingpage(){        loading=true;        btn.value="加载中.....";        ajax("get","*links/getImages.php*?page="+page,"",function(data){            var ndata=JSON.parse(data);            if(!ndata.err){                var msg="";                for(var i=0;i<ndata.length;i++){                    msg+="<div class='pic'><img src='"+ndata[i].src+"'><p>"+ndata[i].name+"</p></div>";                }                var nshow=document.createElement("div");                nshow.innerHTML=msg;                show.appendChild(nshow);                page++;                btn.value="点击加在更多图片";                loading=false;            }            else{                btn.value="已经没有图片了";            }        })    }}

</script>
2、获取data值：
从获取

<body>
<input type="text" class="city"/>
<button>显示天气</button>
<p class="show">
今天是：<span class="date1"></span><br>
天气：<span class="type1"></span><br>
最高温度为 <span class="high1"></span><br>
最底温度为 <span class="low1"></span><br>
</p>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/ajax.js"></script> <!--文件所在位置-->
<script>
window.onload=function(){
var city=document.getElementsByClassName("city")[0];
var btn=document.getElementsByTagName("button")[0];
var date1=document.getElementsByClassName("date1")[0];
var type1=document.getElementsByClassName("type1")[0];
var high1=document.getElementsByClassName("high1")[0];
var low1=document.getElementsByClassName("low1")[0];
btn.onclick=function(){
var city1=city.value;
ajax("get","http://wthrcdn.etouch.cn/weather_mini?city="+city1,"",function(da){
var data=JSON.parse(da);
console.log(data);
var list=data.data.forecast[0];
date1.innerHTML=list.date;
type1.innerHTML=list.type;
high1.innerHTML=list.high;
low1.innerHTML=list.low;
})
}
}
</script>
</body>