Moving To Oop Javascript/php Class Module Creation & Instantiation

Nairaland Forum | Technology | Webmasters (Moderators: OmniPotens, yawa-ti-de) | Moving To Oop Javascript/php Class Module Creation & Instantiation

Pages: (1)

Author

Topic: Moving To Oop Javascript/php Class Module Creation & Instantiation (Read 726 views)

*dhtml

Moving To Oop Javascript/php Class Module Creation & Instantiation

« on: January 04, 2009, 07:28 AM »

Yo Guys, this thread is for all the php and javascript guys in the house. On this thread, I am going to assume that
you can already write some javascript and you are a regular coder. Now, my favorite IDE happen to be Notepad ++ and I am very fast with it because stuffs i create or download in php and ajax, once i find them useful, i convert them to reusable codes - so i am going to be discussing those techniques in here. As way of introduction, PHP is an Object-Oriented Language, But Javascript is not an OOP lang but it is composed of objects - i can't explain this here [out of focus] - but let's go on.

First What Are Classes?
These are modules that run in a separate memory space - they have their own internal memory, functions, and they don't class with each other - for instance i can say:

Virtual.php

Code:

class Jclass{
function Jclass() {$this->url="about:blank";}
function visitUrl() {, }

}

$naira=new Jclass();
$naira->url="http://www.nairaland.com/";

$google=new Jclass();
$google->url="http://www.google.com/";

$naira->visitUrl();
$googel->visitUrl();

Do not bother to run this demo - i am just tryin to show you what classes are about. Now i declared a class up in the script. Then i now went on
to create 2 copies (called instances) of the same class - one for google and one for nairaland.
Then i proceeded to call a function (called method) in the class to visit the urls. So the $naira variable creates a copy of the class in itself and keeps it
inside itself, and same for the $google variable. Later on in this thread - i am going to be featuring some of the classes i have in both javascript and php.
Meanwhile questions are expected and will be answered as appropriately as possible.

And remember, creation and usage of reasonable classes is one of the highest levels of programming - I stand to be corrected on this one. All top-programmers can create classes as far as I know - i am yet to meet one that cannot. However some languages like JAVA and C necessitate class creation even for beginners. But in javascript/php you can still write great codes without classes but your codes will be soooo looong and you will have problems with repeating them when u have another job to do.

*dhtml

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #1 on: January 04, 2009, 07:35 AM »

If you are interested in this, please signify by posting something like "yo man - let's get it started". Lemme see the response of ppl before posting any codes here, waiting, and happy new year.

OmniPotens (m)

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #2 on: January 04, 2009, 03:00 PM »

More interesting things for programmers this year. This is no longer the time where everyone is waiting for website review. Now, it is practical.

Thanks brother. You are doing too well. Keep it up!

webdezzi (m)

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #3 on: January 04, 2009, 05:59 PM »

yo man

*dhtml

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #4 on: January 04, 2009, 06:33 PM »

Lesson 1: Let us create a basic class.

Code:

cats.html
<script>
//begining of class
function cat(){}
function cat.prototype.eat(food) {this.food=food;}
function cat.prototype.vomit() {alert(this.food);}
//end of class

//create the cats
var cat1=new cat(); //instantiate first cat
var cat2=new cat(); //instantiate second cat

//feed the cats
cat1.eat("Eagle");
cat2.eat("Mouse");

//poke the cats
cat1.vomit();
cat2.vomit();
</script>

Lemme explain carefully
The name of the class is called cat.
function cat(){} - this is the base function of the class [an ordinary function]
function cat.prototype.eat(food) {this.food=food;} - this is a class method - notice the prototype
function cat.prototype.vomit() {alert(this.food);} - another method

var cat1=new cat(); //instantiate first cat - creates a variable to store a copy of the class into it
var cat2=new cat(); //instantiate second cat - creates another variable to store another copy into it

cat1.eat("Eagle"); - calls a method of the class called eat

cat1.vomit(); - calls another method.

how this defer from regular javascript is that each copy of the class can store its own variable without mixing up anything.
This explains why classes are reusable

Now an equivalent PHP class
cat.php

Code:

<?php
//beginning of class
class cat {
function eat($food) {$this->food=$food;}
function vomit() {echo $this->food."<br>";}
}
//end of class

$cat1 = new cat;
$cat2 = new cat;

$cat1->eat("Eagle");
$cat2->eat("Mouse");

//poke the cats
$cat1->vomit();
$cat2->vomit();
?>

The explanation for the php file too is the same as per the javascript one.

Sample codes:
http://mwebng.net/demos/classes/cat.html
http://mwebng.net/demos/classes/cat.php

*dhtml

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #5 on: January 04, 2009, 07:32 PM »

Step 2: We are going to create an ajax class that dynamically loads pages on your sites.
But before then let's take a small look at how to actually use ajax to load stuffs - that way u will easily see the power of that class.

I paused at this point to create an ajax thread http://www.nairaland.com/nigeria/topic-214605.0.html#msg3303246 so u can learn the basics of ajax right there if you dont know it already - then u can continue reading on from here.

There was a demo i featured on that thread - i am now going to use something similar here.

You can download the files of that ajax_starter featured on that thread. I am going to modify the index.html
by converting those ajax functions into a class definition.

In case you havent downloaded the original ajax_start files, u will find them here http://www.mwebng.net/?net=dl

Code:

<title>My Web Site</title>

<script>
function jloader() {}
function jloader.prototype.ajaxRequest() {
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++){try{return new ActiveXObject(activexmodes[i])} catch(e){alert("Failed");}}
} else if (window.XMLHttpRequest) {return new XMLHttpRequest()} else {return false}
return;
}

function jloader.prototype.download(url) {
var mygetrequest=new this.ajaxRequest();

mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200) {document.getElementById('display').innerHTML=mygetrequest.responseText;}
else {alert("Download was not successful");}
}
}
mygetrequest.open("POST", url, true);
mygetrequest.send(null);
}

function dload(url) {
var d=new jloader();
d.download(url);
}
</script>

<a href="javascript:dload('home.html')">Home</a>
<a href="javascript:dload('about.html')">About</a>
<a href="javascript:dload('contact.html')">Contact</a>

<hr size=1>

<div id="display"></div>

I only changed the former one by encapsulating the download function into a class.

And this will take us to the next level.

*dhtml

Re: Moving To Oop Javascript/php Class Module Creation & Instantiation

« #6 on: January 05, 2009, 02:58 PM »

I have to wait for students to show up before continuing this class otherwise i am done.
If you are interested in the continuation of this thread, just say so, or at least post "OOPS!" on this thread - actually all i need is at least one student to continue - as for the rest of the defaulting students - God help them! At least Baba God no go tell me say i no try!

Creating Dynamic Pages Using Dreamweaver/php/mysql/asp/access Blogging In Nigeria Google Now In Hausa And Yoruba Page 2

Pages: (1)