Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: OO JS Tutorials

  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    OO JS Tutorials

    I have googled and googled and (tried) to read a number of object-oriented javascript tutorials.. but I just don't "get" it.. it isn't sinking in.

    Can someone please explain basic principles about object oriented JS programming to me or link me to some good (beginner) OO JS tutorials please?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Best Ive see is in the JavaScript Core Reference (well worth a read)

    http://developer.mozilla.org/en/docs..._1.5_Reference

    I use OOP when I need concurrent effects

    read about simulating super classes but never had a need to use.

    Can walk you through one of my simple scripts if that helps.

    say
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // DIV Change Height(with Persistance) (05-02-2007) Draft
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // The change height requirement is specified in the DIV class Name
    // e.g.
    // <div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolut.....
    // where:
    // zxcCngHt = to recognise the DIV is to have Chage Height applied
    // the parameter fields are separated by commers
    // parameter 0 = the minimum height
    // parameter 1 = the manimum height
    // parameter 2 = the number of change steps(equates to speed)
    //
    
    // The script is initialised by a BODY or window onload event call to function 'zxcInitCngHt()'.
    
    // External control requires that each DIV is assigned a unique ID name
    // Control is exercised from an event call to  function zxcCngHt(zxcobj,zxcstop,zxcud)'
    // Where:
    //  parameter  0 = obj or obj ID,
    //  parameter  1 = true to stop,
    //  parameter  2 = force direction ( 1 = down, -1 = up ).
    
    // Persistance utalises a cookie.
    // Global variable specify the Cookie Name and the Expiery duration in Days
    // e.g.
    var zxcCngHCookieDays=.0007; //  = 1.008 minutes
    var zxcCngHCookieName='Fred2';
    //
    
    
    // functional Code - NO changes required(I hope)
    
    var zxcCngHAry=[];
    
    function zxcCngHt(zxcobj,zxcstop,zxcud){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     var zxcoop=zxcobj.cngh;
     clearTimeout(zxcoop.to);
     zxcoop.ud=(zxcud==-1||zxcud==1)?zxcud:zxcoop.ud;
     this.stop=zxcstop;
     if (!this.stop){ zxcoop.cnght(); }
    }
    
    function zxcInitCngHt(){
     var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV')
     for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
      if (zxcdivs[zxc0].className){
       if (zxcdivs[zxc0].className.match('zxcCngHt')){
        var zxcpar=zxcdivs[zxc0].className.split('zxcCngHt')[1].split(',');
    //                               object        min Height          max Height          steps(speed)
        zxcCngHAry.push(new zxcCngHtOOP(zxcdivs[zxc0],parseInt(zxcpar[1]),parseInt(zxcpar[2]),parseInt(zxcpar[3])));
       }
      }
     }
     var zxccookie=zxcCngHGetCookie();
     if (zxccookie){ zxcCngHAnaliseCookie(zxccookie); }
    }
    
    //               object, min H, max H, steps, ident
    function zxcCngHtOOP(zxcobj,zxcmin,zxcmax,zxcstps){
     zxcobj.cngh=this;
     this.obj=zxcobj;
     this.mmh=[zxcobj.offsetHeight,zxcmin||0,zxcmax||100];
     this.stop=false;
     this.ud=(this.mmh[2]<zxcobj.offsetHeight-5)?-1:1;
     this.stps=zxcmax/zxcstps||1;
     this.to=null;
     this.dly=document.all?10:5;
     this.ref='zxccngh'+zxcCngHAry.length;
     window[this.ref]=this;
    }
    
    zxcCngHtOOP.prototype.cnght=function(){
     if (((this.ud>0&&this.mmh[0]+this.ud*this.stps<this.mmh[2])||(this.ud<0&&this.mmh[0]+this.ud*this.stps>this.mmh[1]))&&!this.stop){    // ||(this.ud<0&&this.cnt+this.ud>0)
      this.obj.style.height=(this.mmh[0]+=this.ud*this.stps)+'px';
      this.setTimeOut('cnght();',this.dly);
     }
     else if (!this.stop){
      this.obj.style.height=((this.ud<0)?this.mmh[1]:this.mmh[2])+'px';
      this.ud=-this.ud;
      zxcSetCngHCookie();
     }
    }
    
    zxcCngHtOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcCookieString(){
     var zxcstrg='';
     for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){
      zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+':';
     }
    }
    
    function zxcSetCngHCookie(){
     var zxcexp=new Date(new Date().getTime()+zxcCngHCookieDays*86400000).toGMTString();
     var zxcstrg='';
     for (var zxc0=0;zxc0<zxcCngHAry.length;zxc0++){ zxcstrg+=zxc0+':'+zxcCngHAry[zxc0].ud+'|'; }
     document.cookie=zxcCngHCookieName+'='+encodeURI(zxcstrg)+';expires='+zxcexp+';path=/;';
    }
    
    function zxcCngHGetCookie(zxcnme){
     var zxcst=document.cookie.indexOf(zxcCngHCookieName+'=');
     var zxclen=zxcst+zxcCngHCookieName.length+1;
     if ((!zxcst)&&(zxcCngHCookieName!=document.cookie.substring(0,zxcCngHCookieName.length))) return null;
     if (zxcst==-1) return null;
     var zxcend=document.cookie.indexOf(';',zxclen);
     if (zxcend==-1) zxcend=document.cookie.length;
     return decodeURI(document.cookie.substring(zxclen,zxcend));
    }
    
    function zxcCngHAnaliseCookie(zxcstrg){
     zxcstrg=zxcstrg.split('|');
     for (var zxc0=0;zxc0<zxcstrg.length-1;zxc0++){
      var zxcnu=parseInt(zxcstrg[zxc0].split(':')[0]);
      if (zxcCngHAry[zxcnu]){
       var zxcud=(zxcstrg[zxc0].split(':')[1]=='1')?-1:1;
       zxcCngHt(zxcCngHAry[zxcnu].obj,false,zxcud);
      }
     }
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body onload="zxcInitCngHt();" >
    <input type="button" name="" value="Cng Height 1" onclick="zxcCngHt('tst1');" > <input type="button" name="" value="Stop Cng Height" onclick="zxcCngHt('tst1',true);" >
     <input type="button" name="" value="Cng Height 2" onclick="zxcCngHt('tst2');" >
    <div id="tst1" class="RealRule zxcCngHt,0,400,50" style="position:absolute;left:20px;top:40px;width:200px;height:100px;background-Color:red;" ></div>
    <div id="tst2" class="RealRule zxcCngHt,20,200,150" style="position:absolute;left:250px;top:40px;width:200px;height:100px;background-Color:green;" ></div>
    
    
    </body>
    
    </html>
    At this level tis the same as most JavaScript, get one working, then cut and past.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Maybe this short presentation will help you:

    For javascript, a document is made of elements (tags, text, comments...). Elements have attributes, attributes have values.

    Javascript is a language which can create/change/remove all these. The change is "virtual", that means javascript can not really write something on the document (or on any other file) but on a local machine and the changes disappear the moment session is changed, which makes javascript a client-side language.

    To do that, javascript uses objects, methods (and a specific syntax, quite alike C++) nested in functions. Functions may carry arguments. Functions are "triggered" by events, following a specific user's action. Functions can be also called one within each other.

    Javascript is an Object Oriented language. It has native objects (not so many) and it can create new objects (and new properties/values for those new objects). Javascript has no classes, it is prototype oriented.See:
    http://en.wikipedia.org/wiki/Prototy...ed_programming

    You have to understand that document's elements are not the same with javascript's objects. Javascript can treat almost everything (elements, attributes, variables, functions...) as objects

    Probably the easiest way to create/handle objects in javascript is by using JSON (www.json.org), but, on a superior level, the most flexible way is by using proptotype object:
    http://mckoss.com/jscript/object.htm
    http://www.javascriptkit.com/javatutors/proto.shtml

    At a conceptual level (no matter the language), you need first an Object Oriented Analysis model, see:
    http://en.wikipedia.org/wiki/Object_oriented
    and an Object Oriented Programming paradigm:
    http://en.wikipedia.org/wiki/Object-...ed_programming
    Last edited by Kor; 02-18-2007 at 01:38 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    I really appreciate the posts. Kor you summarized so much in that post.. it was so great (I nominated you guys).

    can you explain this code structure?

    Code:
    var obj = function() {    // defines an object called "obj"
        return {         // what do "returns" do exactly???
            trainTroops: function() {  // trainTroops is a method, right?
            {
        }
    }();

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    I have also seen code structure like this:


    Code:
    var obj = function () {
    
    { 
     return false;
    }
    what does return false do exactly?

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts

  • #7
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Bobafart View Post
    I have also seen code structure like this:


    Code:
    var obj = function () {
    
    { 
     return false;
    }
    what does return false do exactly?
    It does exactly what it says. It returns false. False, opposite of true.
    True and false are boolean expressions, generally speaking: 0=false, 1=true. However you'll find that a lot of languages consider anything that is not 0 to be true (eg; -1 and 100 would both be evaluated as true).

    So obj, would have the value of false (or 0) in that example.
    Omnis mico antequam dominus Spookster!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •