JavaScript学习笔记2

来源：互联网发布：淘宝买灯具可靠吗编辑：程序博客网时间：2024/06/05 20:25

2。1 DOM 模型介绍
2。1。1 HTML文档的树状结构
    树状结构中的每一对象称为一个节点，每一个对象都有一个或多个属性与方法。节点又分为根节点为父节点，子节点，兄弟节点和叶子节点。
2。1。2 什么是DOM
    DOM——Document Object Model,它是W3C国际组织的WEB标准。它定义了访问HTML文档对象的属性，方法和事件的标准。
    DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做其他工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的，别外，文档对象模型是给HTML与XML文件使用的一组API。它提供了文件结构表述，通过使用JavaScript可以重构一个完整的HTML文档，也能增加，删除，修改和重新安排页面中的任何元素。其本质是建立网页与脚本语言或程序语言沟通的桥梁。
    下面通过示例来说明如何使用JavaScript来改变网页中指定元素的值。
    示例：
<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">
   function changeLink()
   {
      document.getElementById('myAnchor').innerHTML="搜狐";
      document.getElementById('myAnchor').href="http://www.sohu.com";
   }
</SCRIPT>
</HEAD>
<BODY>
<A id="myAnchor" href="http://www.sohu.com">淘宝</A>
<INPUT type="button" onClick="changeLink()" value="使用DOM改变链接">
</BODY>
</HTML>
2.1.3 DOM对象模型
    浏览器包括的对象有：window,document,link,form,anchor等。定位一下对象应该从上往下定位如：
　　window.document.myform.text1。window为所有内容的根对象，所以可以省略，改定成如下：
    document.myform.text1。
2。2 window对象的常用属性，方法，事件介绍
2。2。1 常用属性
    status     指定浏览器状态栏中显示的临时消息
    screen     有关客户端的屏幕和显示性能的信息
    history    访问过的URL信息
    location   当前URL信息
    document   表示浏览器是的HTML文档
2。2。2 常用方法
    alert("提示信息")    显示一个带有提示信息和确定按钮的对话框
    confirm("提示信息") 显示一个带有提示信息，确定和取消按钮的对话框
    open("url","name")   打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档
    close()              关闭当前窗口
    showModlDialog()     在一个模式窗口中显示指定的HTML文档
2。2。3 常用事件
    onload事件下面我们通过多个示例来学习最常用的弹出窗口
    示例1：
<HTML>
<HEAD>
<TITLE>window对象</TITLE>
<SCRIPT language="JavaScript">
   function openwindow()
   {
      window.status="系统当前状态：您正在注册用户";
      if (window.screen.width==1024&&window.screen.height==768)
         window.open("register.html");
      else
         window.alert("请设置分辨率为1024*768，然后再打开");
   }
   function closeWindow()
   {
      if(window.confirm("你确认要退出系统吗？"))
         window.close();
   }
</SCRIPT>
</head>
<body bgcolor="#cccccc">
<table border="0" align="center" bgcolor="#ffffff">
<tr>
    <td><IMG src="image/head.jpg" width="761" height="389" ></td>
</tr>
<tr><td>
<IMG src="images/foot.jpg" width="502" height="90" align="top">
<input type="button" name="regButton" value="用户注册" onclick="openwindow()">
<input type="button" name="exitButton" value="退出" onclick="closeWindow()"></td>
</tr>
</table>
</body>
</html>
    open()窗口特征
    height        窗口高度
    width         宽度
    toolbas       浏览器工具条是不显示，yes为显示
    scrollbars    是否显示滚动条
    menubar       表示菜单样
    location      是否显示地址栏，yes或1为是
    status        是否显示状态栏内的信息，yes或为1允许
    resizable     是否允许改变窗口的大小，yes或为1为是
    我们需要预先制作好注册页面"register.html"打开注册页面的语句如下所示：
ope("register.html","注册窗口","toolbars=0",location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1")即表示打开的网页为register.html;窗口名称为“注册窗口”；toolbars=0表示无工具栏；location=0表示无地址栏；statusbars=0,表示无状态栏；menubars=0表示无菜单栏；打开窗口的宽为700像素，高为550像素；xcrollbars=1表示显示滚动条。完整代码如下：
    示例2
<html>
<head>
<title>window Object</title>
<script language="JavaScript">
function openwindow()
{
      window.status="系统当前状态：您正在注册用户";
      if (window.screen.width==1024 && window.screen.height==768)
         open("register.html","注册窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1")
      else
         window.alert("");
}
function close()
{
      if(window.confirm(""))
         window.close();
}
</script>
</head>
<body>
<table border="0" align="center" bgcolor="#ffffff">
<tr>
     <td><img src="images/head.jpg" width="761" height="389"></td>
</tr>
<tr><td>
<img src="images/foot.jpg" width"502" height="90" align="top">
    <input type="button" name="regButton" value="用户注册" onclick="openwindow()">
    <input type="button" name="exitButton" value="退出" onclick="closewindow()"></td>
</tr>
</table>
</body>
</html>
示例2中，如果想把按钮的单击事件改为响应链接事件，也就是单击一个超链接调用JavaScript相关代码也能打开注册页面。
    示例3
<tr>
<td width=""502>
<IMG src="images/foot.jpg" width="502 height="90" align="top">
</td>
<td withd="86" valign="top">
<H3><A href="javascript:openwindow()">用户注册</A></H3>
</td>
<td width="263" valign="top">
<H3><A href="javascript:closewindow()">退出</A><H3>
</td>
</tr>
    下面进了弹出窗口的示例，这下你就明白那些万恶的网站是怎样来打广告的了。这要使用一个onload事件，请留意
    示例4:
<html>
<head>
<script language="JavaScript">
function openwindow()
{
     open("adv.htm","广告窗口","toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=700,height=250");
}
</script>
<style type="text/css">
body{background-image:url(images/index_image.jpg);}
</style>
</head>
<body onLoad="openwind()" >
<H2> </H2>
</body>
</html>
    模式对话框的实现：
showModalDialog("url","对话框名","对话框特征")和open()使用方式类式，这里不详细说明了。

2。3 Date对象和setTimeout()方法做时钟显示
2。3。1 Date对象常用的方法
    创建日期对象的语法如下：
    var 日期对象=new Date(参数);
    没有参数，即表示当前时间，参数的格式“MM DD,YYYY,hh:mm:ss”表示日期和时间，例如：
var tdate=new Date("July 29,2009,21:29:00");
    Date对象的方法组见表：
setXxx 这些方法用于设置时间和日期值
getXxx 这些方法用于获取时间和日期值
    使用get分组的方法
getDate()
getDay()      返回星期几
getHours()
getMinutes()
getSeconds()
getMonth()
getFullYear()
getTime()      返回自某一时刻（1970年1月1日）以来的毫秒数
    使用set分组的方法
setDate()
setHours()
setMinutes()
setSeconds()
setTime()
setMonth()
setFullYear()

    示例5
<html>
<head>
<title>Date Object</title>
<script language="JavaScript">
function disptime()
{
     var now=new Date();
     var hour=now.getHours();
     if(hour>=0 && hour<=12)
         document.write("<H2>上午好</H2>");
     if(hour>12 && hour<=18)
         document.write("<H2>下午好</H2>");
     if(hour>18 && hour<24)
         document.write("<H2>晚上好</H2>");
     document.write("<H2>今天日期："+now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日</H2>");//看来懂这句的，多想一下！
     document.write("<H2>现在时间："+now.getHours()+"点"+now.getMinutes()+"分</H2>");
}
</script>
</head>
<body >
</body>
</html>
这只是一个静态的显示时间的例子，若要动态的显示时间怎么办呢？看下面

2。3。2 setTimeout()方法
语法：setTimeout("disptime()",1000);
示例6 动态显示时间
<html>
<head>
<title>setTimeout() 方法</title>
<script Language="JavaScript">
function disptime()
{
var time=new Date();

     var hour=time.getHours();
     var minute=time.getMinutes();
     var second=time.getSeconds();
     /*设置文本框的内容为当前时间*/
     document.myform.myclock.value=hour+":"+minute+":"+second+" ";
     /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
     var myTime=setTimeout ("disptime()",1000);
}
</script>
<style type="text/css">
input
{
     font-size:30px;
     border-style:none;
     background-color:#FF8B3B;
}
</style>
</head>

2。4 history 和location对象
2。4。1 history对象
方法：
back() 加载上一个URL
forward() 加载下一个URL
go("url" or number) 加载列表中被指定的URL，或要求浏览器移动指定的页面数

2。4。2 location 对象
1。属性
host      设置或返回URL的主机名和端口号
hostname 设置或返回URL的主机名部分
href      设置或返回完整的URL字符串
   2。方法
assign("url")   加载URL指定的新的HTML文档
reload()        重新加载当前页
replace("url") 通过加载URL指定的文档来替换当前文档
以下示例实现跳转菜单的功能。
   示例7
<html>
<head>
<title>教育</title>
<Style type="text/css">
A
{
      color:blue;
      text-decoration:none;
}
A:hover
{
      color:red;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="7">
    <IMG src="../images/head1.jpg" width="994" height="37"></td>
    <tr>
     <td width="15%"> </td>
     <td width="32%"><A href="#">1</A><A href="#"></A>
     <A href="#"> 2</A><A href="#"></A>
     <A href="#"> 3</A><A href="#"> 4</A>
     <A href="#"></A><A href="#"> 5</A><A href="#"></A>
     <A href="#"> 6</A><A href="#"> 下一页</A></td>
     <TD width="4%">
     <A href="javascript:history.forward()">前进</A></td>
     <td width="4%">
     <A href="javascript:history.back()">返回</A></td>
     <td width="4%">
     <A href="javascript:location.reload()">刷新</A>
     </TD>
     <td width="6%">
      <A href="../index.html">首页</A>
      </td>
      <td width="35%">

      <select name="selTopic" id="selPtopic" onChange="javascript:location=this.value">
     <option value="news.html">新闻贴图</option>
     <option value="gard.html">网上谈兵</option>
     <option value="IT.html">IT 茶馆</option>
     <option value="education.html" selected>教育大家谈</option>
     </select>
       </td>
      </tr>
      <tr>
      <td colspan="7">
     <IMG src="../images/content1.jpg" width="995" height="576">
     </TD>
     </tr>
     </table>
     </form>
     </body>
     </html>
同样，history对象的go(-1)和go(1)方法也能实现前进和后退功能，关键代码如下：
<td><A href="javascript:history.go(-1);">返回</A></td>
<td><A href="javascript:history.go(1)">前进</A></td>
当JavaScript语句较少时，可以直接插入代码；当语句较多时，应把语句放在一个函数中，然后调用函数，这是一个良好的编程习惯。