Prototype实战教程----8.顶层对象


<html>
<head>
<title>顶层元素</title>
<script src="prototype.js"></script>
<script>
var Person=Class.create();
Person.prototype={
  initialize:function(){},
  name:'',
  birthday:'',
  age:'',
  Show:function(){alert("This is "+this.name);}
  };
  function TestPerson()
  {
    var p=new Person();
    p.name="Tom";
    p.age=4;
    p.birthday="1997-7-1";
    p.Show();
    };
    var User=Class.create();
    
    User.prototype={
      initialize:function(){},
      userid:'',
      Report:function()
      {
        alert("UserID:"+this.userid+"  Name:"+this.name+"  Age:"+this.age+" Birthday:"+this.birthday);
        }
      };
      Object.extend(User.prototype,Person.prototype);
      function TestUser()
  {
    var user=new User();
    user.name="Chou Fat";
    user.age=4;
    user.userid=2396
    user.birthday="1997-7-1";
      user.Show();
    user.Report();
  
    }
    function ShowPrototypeInfo()
    {alert(Prototype.Version+"  "+Prototype.ScriptFragment);
      }
      function TestInspect()
    {var s="wanfangsoftcenter";
      alert(Object.inspect(s));
      }
      //-------------------------------------------------------
      function testFunctionBind()
      {
        var person=new Person();
        person.name="Jerry";
        person.age=4;
      person.birthday="1997-7-1";
         var user=new User();
        user.name="Tom";
        user.age=5;
      user.userid=2396
      user.birthday="1999-12-20";
        var handler=user.Report.bind(person);
        handler();
        }
        var Listener=new Class.create();
        Listener.prototype={
          initialize:function(btn,message)
          {
      
            $(btn).onclick=this.showMessage.bindAsEventListener(message);
            },
            showMessage:function(message){
              alert(message);
              }
          };
                var listener=new Listener("testEventListener","点击!");
  
    
    </script>
<body>
  <input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr>
<input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象 检测一下是否成功<br>
<input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类,生成一个User对象 检测一下是否成功<br>
<input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br>
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br>
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>
<script>
    var Listener=new Class.create();
        Listener.prototype={
          initialize:function(btn,message)
          {
         this.message=message;
            $(btn).onclick=this.showMessage.bindAsEventListener(this);
            },
            showMessage:function(){
              alert(this.message);
              }
          };
                var listener=new Listener("testEventListener","点击!");

</script>

<hr>
<script>
function TimeExe()
{
  var timerExe=new PeriodicalExecuter(showTime,1);
  
  }
  function showTime()
  {
    var time =new Date();
    var d = $('myDiv');
    d.innerHTML=time;
    }
    </script>
<div id="myDiv">
<p>This is a paragraph</p>
<input type="button" value=定时器测试 onclick="TimeExe();"><br></div>
<hr>
<script>
  function TestNumber()
  {
    var n=50;
    var b=3;
    alert(n.toColorPart());
    alert(n.succ());
alert(b.toPaddedString());
   //b.times(alert());
    }
  </script>
  <input type="button" value='Number测试' onclick="return TestNumber();"/><br>
</body>
</html>

 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3