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

wutao33543

浏览: 64847 次
性别:
来自: 深圳

最近访客更多访客>>

niedj

northsailor

xiaolong0211

zhaoaij

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (60)

社区版块

存档分类

prototype


<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>

分享到：