...

View Full Version : OO JS Tutorials



Bobafart
02-18-2007, 12:05 AM
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?

vwphillips
02-18-2007, 04:24 AM
Best Ive see is in the JavaScript Core Reference (well worth a read)

http://developer.mozilla.org/en/docs/Core_JavaScript_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



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

Kor
02-18-2007, 07:54 AM
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/Prototype-based_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-oriented_programming

Bobafart
02-18-2007, 01:39 PM
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?



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

Bobafart
02-18-2007, 01:40 PM
I have also seen code structure like this:




var obj = function () {

{
return false;
}


what does return false do exactly?

Bill Posters
02-18-2007, 02:13 PM
A few more links which you might find helpful.

'Show Love To The Object Literal' (http://www.wait-till-i.com/index.php?p=239)
'Namespacing your JavaScript' (http://www.dustindiaz.com/namespace-your-javascript/)
'JavaScript namespace' (http://snook.ca/archives/javascript/javascript_name/)

Mhtml
02-18-2007, 06:23 PM
I have also seen code structure like this:




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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum