学习【JavaScript权威指南】（三）

13章 Web浏览器中的JavaScript

Window对象，引用自身的属性window, 指代Location对象的属性location，

//设置location属性，跳转到新的页面
window.location = "http://www.baidu.com";

Window对象最重要的属性document，它引用Document对象，表示显示在窗口的文档。

//查找id为timestamp的元素
var timestamp = document.getElementById("timestamp");

getElementById返回的  Element对象，每个Element对象都有style和className属性，

Window,Document,Element另一个重要的属性就是事件处理相关属性。

timestamp.onclick = function(){ this.innerHTML = new Date().toString(); }

小试牛刀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_JavaScriupt子集和扩展</title>
    <style>
        #clock {
            font: bold 24pt sans;
            background: #ddf;
            padding: 10px;
            border: solid black 2px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
   <h1>Digital Clock</h1>
   <span id="clock"></span>
   <script>
      function displayTime(){
          var clock = document.getElementById("clock");
          clock.innerHTML = new Date().toLocaleTimeString();
          setTimeout(displayTime, 1000);  //这里不能用displayTime() 使用displayTime
      }
      window.onload = function () {
          displayTime();   //这里是调用函数，所以得加括号才行
      }       //这里可以写成  window.onload = displayTime; 不加括号
   </script>
</body>
</html>

javascript:url

//会擦除当前文档并显示新文档
<a href="javascript:new Date().toLocalTimeString()">链接</a>
//在后面跟个 void, 就不会擦除当前文档,使用window.open('about:blank')打开新空白页
<a href="javascript:void window.open('about:blank')"></a>

prompt("弹出输入框");     eval("1+2");  //等于3(计算)

不要把 HTML代码和JavaScript代码混淆在一起

IE：

<!--[if IE]>    <![endif]-->
<!--[if !IE]>    <![endif]-->
<!--[if !IE]>    <![endif]-->

同源策略 估计讲的“跨域”问题吧，太多文字看的很累。。

 

第14章 Window对象

//setInterval每隔多长时间执行一次，返回值index,使用clearInterval(index)结束调用 
var index = setInterval(function () {
   console.log("每隔一秒执行"); 
},1000);
setTimeout(function () {
   console.log("5秒之后停止");
   clearInterval(index);
},5000);

//setTimeout 指定毫秒数后执行，只执行一次，可以使用 clearTimeout(index)提前结束调

window.location 和 document.location 引用的都是 Location对象，所以 window.location == document.location 返回true

location.search  得到的是 问号之后的URL

//假如当前URL是 http://localhost:8181/13?username=why_su&age=24#top

location.href        http://localhost:8181/13?username=why_su&age=24#top
location.protocol    http:
location.host        http://localhost:8181
location.hostname    http://localhost
location.port        8181
location.pathname    /13
location.hash        #top
location.search      ?username=why_su&age=24

//location.hash      得到的是 URL中的"片段标识符"， # 后面跟的
//location.search    得到的是 ? 后的URL, 貌似这里不包含 # 后的内容

location = "#top"    如果文档中没有元素的ID是top,则跳转到文档的顶部

window.history 引用的是 History对象，history.forward()  前进，history.back()后退，history.go(-2) 后退两个历史记录

如果文档中包含一个 <button id="okay"/>元素，可以用 全局变量 okay 来引用此元素，但如果id是history，location这类已被占用的，就不能这样用。

var ui = ["a","history","b"]; //这三个 id都有对应的组件
ui.foreach(function(t){
   console.log(t);   //得到的是 a, history, b;
   ui[t] = document.getElementById(t);
});

//此时可以用 a 表示 ui.a,  b 表示 ui.b，【不建议这样使用】
console.log(a+":"+b);
//但是不能用 history 表示 ui.history
console.log(ui.history);

var $ = function(id){ return document.getElementById(id);}
$("id");  //但没有诸如jquey的 $("#id").text()  .val()等方法

//浏览器会阻止弹出式窗口
window.open("http://www.baidu.com");

//对于点击事件，不会阻拦
$("#button").on("click",function(){
   window.open("http://www.baidu.com");
});