JavaScript（二）

====================================BOM=====================================
1.描述与浏览器进行交互的方法和接口
2.包括：
   a.弹出新的浏览器窗口
   b.移动、关闭浏览器窗口及调节浏览器窗口大小
   c.获取用户屏幕分辨率的屏幕对象
   d.WEB浏览器详细的定位对象
3.对象：Window、Navigator、Screen、History、Location(当前页面的URL信息)

window对象
   1.方法
       a.alert()，confirm(),prompt()
       b.open()
       c.close()
       d.setInterval   定时器
       e.clearInterval   清除定时器
       f.setTimeout   延迟
       g.clearTimeout   清除延迟
范例：window对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <a href="javascript:myOpen();">新窗口</a>
 9     <script type="text/javascript">
10         // window.open('index.html', '_self', '');
11         function myOpen(){
12             /* window.open("弹出窗口的url","窗口名称","窗口特征") */
13             window.open('index.html', '_blank', 'width=200,height=200');
14         }
15         
16         // myOpen();
17 
18         //延迟执行
19         // setTimeout(myOpen,1000);
20 
21         //定时执行,每2000毫秒就弹出新窗口
22         // setInterval(myOpen,2000);
23     </script>
24 </body>
25 </html>

   2.事件
   onload:页面加载
   onclick:点击
   onfocus:焦点获取
   onblue:焦点失去
   onmouseover:鼠标进入到元素中
   onmouseout:鼠标移出元素外
   onchange:内容改变
screen对象
范例：screen对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9         
10     alert(window.screen.width);
11     alert(window.screen.height);
12 
13     // 去掉任务栏，即屏幕工作区
14     alert(window.screen.availWidth);
15     alert(window.screen.availHeight);
16 
17     </script>
18 </body>
19 </html>

location对象
   1.属性
       host:当前URL地址的主机号和端口号
       hostname：当前URL的主机名
       href：获取或设置当前的URL地址
   2.方法
       reload()：重新加载当前页面
范例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button"  value="刷新" onclick="window.location.reload()"></input>
 9     <input type="button"  value="显示地址" onclick="alert(window.location)"></input>
10     /* 服务器打开，才会有主机和主机名 */
11     <input type="button"  value="获取主机" onclick="alert(window.location.host)"></input>
12     <input type="button" value="获取主机名" onclick="alert(window.location.hostname)"></input>
13     <script type="text/javascript">
14         alert(window.location.href);
15     </script>
16 </body>
17 </html>

history对象
   1.属性
       length：历史列表中的元素数目
   2.方法
       back:前一个URL
       forward：下一个URL
       go(n)：n>0,历史列表往前数第n个页面;n<0,历史列表往后数第n个页面;n=0,当前页面
范例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <a href="location.html">location对象</a>
 9     <a href="screen.html">screend对象</a>
10     <a href="javascript:window.history.forward();">前进</a>
11     <a href="javascript:window.history.go(1);">前进</a>
12 </body>
13 </html>

====================================★DOM★=====================================
1.描述处理网页内容的方法和接口
2.HTML和XML的应用程序接口（API）
3.整个页面规划为层级式的节点结构

1.属性：
   referrer:获取将用户引入当前页面的位置URL
   URL
2.方法：
   write()：打印/输出
   getElementById()：id选择器
   getElementsByName()：复选框
   getElementsByTagName()：指定标签

Doms元素的操作
1.获取或设置dom元素中样式
   var val = dom元素.style.样式属性;   //获取值
   dom元素.style.样式属性 = 值;       //设置值
2.获取或设置表单元素的值
   var val = dom元素.value;   //获取值
   dom元素.value = 值;       //设置值
3.获取或设置dom元素的内容
   var val = dom元素.innerHTML;   //获取值
   dom元素.innerHTML = 值;       //设置值

范例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <h1>兑奖页面</h1>
 9     <script type="text/javascript">
10         if (document.referrer) {
11             // statement
12             alert("欢迎来兑奖");
13         } else {
14             // statement
15             alert("请从指定的页面跳转");
16             /* 服务器打开，才会跳转 */
17             window.location = "window.html";
18         }
19     </script>
20 </body>
21 </html>

范例：复选框

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <table>
 9         <thead>
10             <tr>
11                 <th><input id="check-all" type="checkbox" onclick="selectAll();">全选</input></th>
12             </tr>
13         </thead>
14         <tbody>
15             <tr>
16                 <td><input type="checkbox" checked="checked" name="hobby" value="travel">旅游</input></td>
17             </tr>
18             <tr>
19                 <td><input type="checkbox" name="hobby" value="swim">游泳</input></td>
20             </tr>
21             <tr>
22                 <td><input type="checkbox" name="hobby" value="climb">登山</input></td>
23             </tr>
24         </tbody>
25     </table>
26 
27     <script type="text/javascript">
28         function selectAll () {
29              // 获取全选的复选框
30              var checkAll = document.getElementById("check-all");
31              var checkItems = document.getElementsByName("hobby");
32 
33              //循环设置每一个复选框的状态
34              for (var i = 0; i < checkItems.length; i++) {
35                  /* 全选和反选 */
36                  checkItems[i].checked = checkAll.checked;
37 
38                  /* 只能全选 */
39                  // checkItems[i].checked = true;
40              }
41         }
42     </script>
43 </body>
44 </html>

范例：动态时间

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="UTF-8">
 4 <head>
 5     <title>时间格式</title>
 6 </head>
 7 <body>
 8     <span id="currTime"></span>
 9     <script type="text/javascript">
10         var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
11         
12         function getCurrTime () {
13              // body...  
14             var date = new Date();
15             var year = date.getFullYear();
16             var month = date.getMonth() + 1;    /* 月份值：0-11 */
17             var day = date.getDate();    /* 日期 */
18             var hour = date.getHours();
19             var mi = date .getMinutes();
20             var sec = date.getSeconds();
21             var week = date.getDay();    /* 星期 */
22 
23             /* 显示两位数 */
24             month = month > 9 ? month : '0' + month;
25             day = day > 9 ? day : '0' + day;
26             hour = hour > 9 ? hour : '0' + hour;
27             mi = mi > 9 ? mi : '0' + mi;
28             sec = sec > 9 ? sec : '0' + sec;
29 
30             return year + '年' + month + '月' + day + '日' + hour + '：' + mi + '：' + sec + '' + weeks[week];
31         }
32         
33         function setCurrTime () {
34              // body...  
35              /* 没有value属性的就用这个赋值--innerHTML,        
36                 返回或设置id="currTime"的div开始和结束之间的HTML
37              */
38              document.getElementById("currTime").innerHTML = getCurrTime();
39         }
40         window.setInterval(setCurrTime, 1000);
41     </script>
42 </body>
43 </html>

范例：表单验证

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <form action="#" method="post" onsubmit="return formValid();">
 9         <div>
10             <label for="username">用户名</label>
11             <input type="text" name="name" id="username" placeholder="请输入用户名" autocomplete="off" />
12         </div>
13         <div>111</div>
14 
15         <div>
16             <label for="userPass">设置密码</label>
17             <input type="password" name="userPass" id="userPass" placeholder="请设置密码" >
18         </div>
19         <div>111</div>
20 
21         <div>
22             <label for="userRePass">确认密码</label>
23             <input type="password" name="userRePass" id="userRePass" placeholder="请确认密码" >
24         </div>
25         <div>111</div>
26 
27         <div>
28             <label for="phone">中国 + 86</label>
29             <input type="text" name="phone" id="phone" placeholder="请输入手机号" autocomplete="off" />
30         </div>
31         <div>111</div>
32         
33         <div>
34             <label for="textarea"></label>
35             <textarea cols="40" rows="8" name="textarea" id="textarea">
36                 
37             </textarea>
38         </div>
39         
40         <div>
41             <label for="checkbox"></label>
42             <input type="checkbox" name="checkbox" id="checkbox" />我已阅读协议
43         </div>
44     
45         <div>
46             <input type="submit" value="立即注册" />
47         </div>
48     </form>
49 
50     <script type="text/javascript">
51         function btnClick () {
52              // body...  
53              var checked = document.getElementById('checkbox').checked;
54              if(!checked){
55                  alert('请仔细阅读协议');
56              }
57              return checked;
58         }
59 
60         function nameValid () {
61              // body...  
62              var value = document.getElementById('username').value;
63              // 正则表达式
64              var regExp = /^w{5,11}$/;
65              var result = value.match(regexp);
66              return result != null;
67         }
68 
69         function passValid () {
70              // body...  
71              var value = document.getElementById('userPass').value;
72              var regExp = /^.{6,12}$/;
73              var result = value.match(regexp);
74              return result != null;
75         }
76 
77         function formValid () {
78              // body...  
79              return btnClick() && nameValid() && passValid();
80         }
81     </script>
82 </body>
83 </html>

范例：表单效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="text" placeholder="邮箱/QQ/手机" onfocus="inputFocus(this)" onblur="inputBlur(this)" onkeyup="inputChange(this)"></input>
 9 
10     <span id="msg"></span>
11     
12     <script type="text/javascript">
13         function inputFocus (input) {
14              // body...  
15              input.className = 'focus';
16         }
17 
18         function inputBlur (input) {
19              // body...  
20              input.className = '';
21              //验证
22              if (input.value == '') {
23                  // statement
24                  document.getElementById('msg').innerHTML = '账号不能为空';
25              } else {
26                  // statement
27                  document.getElementById('msg').innerHTML = '';
28              }
29         }
30 
31         function inputChange (input) {
32              // body...  
33              if (input.value.length < 6) {
34                  // statement
35                  document.getElementById('msg').innerHTML = '账号长度不能小于6位';
36              } else {
37                  // statement
38                  document.getElementById('msg').innerHTML = '账号正确';
39              }
40         }
41 
42     </script>
43 </body>
44 </html>