JS浏览器对象

一.客户端中的window对象

 

1. window对象表示当前浏览器的窗口，它是一个顶级对象，我们创建的所有对象、函数、变量都是window对象的成员。
2. window对象自带了一些非常有用的方法、属性。

window的子对象：

• document:可操作显示在窗口的文档内容。
• location:可让窗口载入新的URL。
• navigator：包含当前浏览器的信息。
• history：包含当前浏览器的历史。

window的方法：

• open()：打开一个新的窗体。
• close()：关闭窗体。

window对话框函数：

• alert():弹出消息对话框（对话框中只有一个ＯＫ按钮）。
• confirm():弹出消息对话框（对话框中包含一个ＯＫ按钮与Cancel按钮）。
• prompt():弹出消息对话框（对话框中包含一个ＯＫ按钮、Cancel按钮与一个文本输入框）。

 

二.web文档里使用Javascript

1. Javascript程序可以操作文档对象(window.document,通常window可以省略)，遍历和管理文档内容，改变CSS的样式，注册适当的事件来改变文档元素的行为。
2. Javascript可增强用户浏览web文档的体验。
3. Javascript可操作XMLHttpRequest对象，实现从服务器获取新信息，而不重新载入页面。通常叫Ajax应用

三.html中嵌入script代码简单示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< html >    < head >      < script >        function showTime(){          var ele = document.getElementById('clock');//通过id＝clock获取文档元素          var d = new Date();//取得当前时间          console.log(ele);          ele.innerHTML = d.toLocaleTimeString();//转换为本地时间          setTimeout(showTime,1000);//定时调用        }        </ script >      < style >        #clock{          font:bold 26pt;        }      </ style >    </ head >    < body  onload="showTime();">      < h1 >显示当前时间：</ h1 >      < span  id="clock"></ span >    </ body > </ html >

　　

  javascript代码可以放置在html属性里来定义事件处理程序。如onclick，onchange事件等。

1 2 3 4 5 6 7 8 9 10

< html >    < head >      < script >              </ script >    </ head >   < body >     < input  type="checkbox" name="sex" value="男" onchange="alert(this.checked);"/>男   </ body > </ html >

四.javascript执行顺序　

1､javascript程序执行有两个阶段。
第一阶段，载入文档内容，并执行<script>元素里的代码，按javascript代码顺序从上往下执行。
第二阶段，此阶段是异步的，而且由事件驱动。事件驱动阶段里发生的第一个事件是onload事件，表示文档已经载入完成

 

五.javascript的线程模型

1、javascript中没有任何关于线程的定义，也就是javascript是按单线程一样工作，单线程执行是为让编程更加简单。
2､ 当响应用户的某个事件处理过程中，如果过程复杂可能导致浏览器会变的无响应。所以我们在处理时要反馈用户当前浏览器是正在活动，以获得最好的用户体验。
3､如果有些计算而导致明显的延迟，应在文档完全载入后做计算，也可用setTimeout()或setInterval()方法在后台运行子任务。

4.可通过setTimeout()可以把计算任务分成若干个小任务来执行，提高页面的响应能力。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

< html >    < head >      < script >          //判断质数          var MAX = 1000000;          function isPrime(n) {            if (n == 0 || n == 1) {                return false;            }            var bound = Math.floor(Math.sqrt(n));            for (var i = 2; i <= bound; i++) {               if (n % i == 0) {                   return false;               }            }            return true;         }      var jobs = 10, numberPerJob = Math.ceil(MAX / jobs);      var count = 0;            function calculate(start, end) {          for (var i = start; i <= end; i++) {              if (isPrime(i)) {                  count++;              }          }      }            var start, end, timeout, finished = 0;      function manage() {          if (finished == jobs) {              window.clearTimeout(timeout);              alert("计算完成，质数个数为：" + count);          }          else {              start = finished * numberPerJob + 1,                  end = Math.min((finished + 1) * numberPerJob, MAX);              timeout = window.setTimeout(function() {                  calculate(start, end);                  finished++;                  manage();              }, 100);          }      }            manage();                </ script >    </ head >    < body >      < h1 >有大量的计算，页面立即显示出来，大量的计算在后台运行。</ h1 >    </ body > </ html >

　　六.兼容性

测试网站来测试浏览器的兼容性：http://www.quirksmode.org/dom/core/

1. javascript编程中很多是不兼容性都是针对的IE的。
2. 可以用IE支持的条件注释来处理对ＩＥ的不兼容。
3. 条件注释可以应用到js,css,内容

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   < html >    < head >      <!--[if lt IE 9]>          <script type="text/javascript" src="http://www.itbegin.com/commonscripts/bootstrap/html5shiv.min.js?20150301" ></script> <![endif]-->    </ head >    < body >      <!--[if IE 6]>          这是IE6显示的内容      <![endif]-->      <!--[if !IE ]><-->          这不是IE要显示的内容      <!--><![endif]-->    </ body > </ html >