dhtml study

看了网上的一个系列文章，记下了流水帐，soso
css定义在div tag上
div的使用方法和其他的html tag没有区别
  <DIV>
    This is a DIV tag
  </DIV>
css-p用到div中的时候，需要在div中定义css-p控制的div的id
<DIV ID="truck">
    This is a truck
  </DIV>

Inline CSS以及External STYLE tag:
  <DIV ID="truck" STYLE="styles go here">
    This is a truck
  </DIV>

 <STYLE TYPE="text/css">
   <!--
   #truck {styles go here}
   -->
 </STYLE>

 <DIV ID="truck">
   This is a truck
 </DIV>

Cross-Browser CSS 性质，主要列举了w3c规定的一些
position，left，top，width，height，clip，visibility，background-color，background-image

对于在IE中得到CSS-P property，使用语法为
  divname.style.propertyname
或者
  document.all[divname].style.propertyname

DIV元素的移动
  移动子程序
  function moveTo(obj,x,y) {
 obj.xpos = x
 obj.left = obj.xpos
 obj.ypos = y
 obj.top = obj.ypos
  }
  调用程序
  <A HREF="javascript:moveTo(block,300,340)">(300,340)</A>

DIV元素的滑动
  滑动子程序
  function slide() {
    if (block.xpos < 300) {
 block.xpos += 5
 block.left = block.xpos
 setTimeout("slide()",30)
    }
  简而言之，就是固定间隔，移动div，一个自我递归

Capturing Keystrokes(捕捉键盘敲击事件)
  捕捉子程序
  function keyDown(e) {
    var keycode = e.which
    var realkey = String.fromCharCode(e.which)
    alert("keycode: " + keycode + "/nrealkey: " + realkey)
  }

用键盘移动元素
  首先捕捉到键盘敲击事件，然后使用滑动子程序

启动变量
  当利用上面的子程序进行操作的时候，一旦开始移动就停不下来，需要有状态变量作为判断条件
  myobj.active这个bool类型的property决定了div元素是否在移动中

鼠标点击控制
  <A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;"
                                  onMouseUp="block.active=false"
                                  onMouseOut="block.active=false">move</A>
  这里解释一下上面的连接:
  onMouseDown 设定div元素的active property为 true, 启动 slide()滑动子程序
  onMouseUp onMouseOut 设定div元素active property为 false, 滑动

Clipping
  决定了div元素的可视部分，Clipping区域是一个长方形，四边分别为top，right，bottom，left
  可以通过script改变Clipping区域的大小：
  divname.style.clip ＝ "rect(0px, 100px, 200px, 50px)"

改变Clipping区域的大小以及改变Clipping区域大小到
  通过上面的divname.style.clip ＝ "rect(0px, 100px, 200px, 50px)"，类似于div元素的移动原理

动画 Clipping
  类似于滑动原理，改变clipping区域大小，实现一种动态效果

数组
  声明数组
  var ArrayName = new Array();
  数组引用、赋值，数组的元素可以动态增加
  ArrayName[0] = "first element";

document.writeln
  动态的，编程化的将一段html写入到page上
  document.writeln(("<H1>DHTML Builder</H>")

菜单原码
  一个很粗糙的生成menu的js，
  // Background color of menu bar
  var bgcolor = "#FFFFCC"
  var width = 500
 
  // Link names
  var menuName = new Array();
  menuName[0] = "menuName1";
  menuName[1] = "menuName2";
  menuName[2] = "menuName3";
  menuName[3] = "menuName4";
  menuName[4] = "menuName5";

  // Links
  var menuUrl = new Array();
  menuUrl[0] = "menuUrl1";
  menuUrl[1] = "menuUrl2";
  menuUrl[2] = "menuUrl3";
  menuUrl[3] = "menuUrl4";
  menuUrl[4] = "menuUrl5";

  // Produce menu bar
  function createMenuBar(sName)
  {
    document.writeln("<style> H3 {font-size:16pt} </style>");
    document.writeln("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=" + width + ">");
    document.writeln("<tr><td bgcolor=#669900>");
    document.writeln("<table border=0 cellspacing=1 cellpadding=1 width=100% ");
    document.writeln("bgcolor=" + bgcolor + "><TR>");
    for (i = 0; i < menuName.length; i++)
    {
      if (sName == menuName[i])
      {
      document.writeln(" <TD align=center><FONT color=FF9900><B>");
      document.writeln(menuName[i] + "</B></FONT></TD>");
      }
      else
      {
        document.writeln("<TD align=center><a href=" + menuUrl[i] + ">"
        document.writeln(menuName[i] + "</A></TD>");
      }
    }
    document.writeln("</TR></TABLE></TD></TR></TABLE>");
  }

窗口之间的控制,js中允许窗口之间进行控制，但是需要这些窗口之间是父子关系
  打开一个新窗口
    window.open("adv04_win2.htm", "newWin1");
  连接主窗口和子窗口
    例如在main form打开一个childform时候，
    childWin = window.open("adv04_win2.htm", "childWin");
    childWin.parentWin = this;
    就使用childWin定义了子窗口，并确定了childform和先后form之间的parent-child关系