Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Javascript OOP  (Read 4216 times)

centered

  • Guest
Javascript OOP
« on: November 24, 2009, 07:00:00 PM »

Phil was asking me this morning about Javascript OOP.  Well here is some.  Hope you like it:

Code: [Select]
// JS OOP version 1
var test2 = {
blah: "Jason",  // Property
func: function(){ // Method
alert(this.blah + " rocks!");
}
}
window.onload = test2.func();  //  Outputs Jason rocks!
test2.blah = "Turtles"
window.onload = test2.func();  // Outputs Turtles rocks!

// JS OOP version 2
test3 = new Object();
test3.width = 10; // property
test3.makeSq = function() { // method
return this.width * 4;
}
window.onload = alert(test3.makeSq());  // outputs 40
// Client wants a different spec
test3.width = 40;
window.onload = alert(test3.makeSq()); // outputs 160

Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Javascript OOP
« Reply #1 on: November 25, 2009, 01:31:27 AM »

What does one do with it... to see what it does... what is it supposed to do?
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: Javascript OOP
« Reply #2 on: November 25, 2009, 11:24:08 AM »

Output that Jason rocks ?
Logged
"It's only dead fish that goes with the flow... "
Updated

centered

  • Guest
Re: Javascript OOP
« Reply #3 on: November 25, 2009, 01:06:57 PM »

lol Pat

I can do it in PHP too

Code: [Select]
<?php

/*
// JS OOP version 1
var test2 = {
blah: "Jason",  // Property
func: function(){ // Method
alert(this.blah + " rocks!");
}
}
window.onload = test2.func();  //  Outputs Jason rocks!
test2.blah = "Turtles"
window.onload = test2.func();  // Outputs Turtles rocks!
*/

class Test2 {
var $blah 'Jason';

function func() {
echo $this->blah .' rocks!';
}
}

$test = new Test2();
$test->func();

$test->blah 'Turtles';
$test->func();


/*
// JS OOP version 2
test3 = new Object();
test3.width = 10; // property
test3.makeSq = function() { // method
return this.width * 4;
}
window.onload = alert(test3.makeSq());  // outputs 40
// Client wants a different spec
test3.width = 40;
window.onload = alert(test3.makeSq()); // outputs 160
*/

class Test3 {
var $width;

function makeSq() {
echo $this->width 4;
}
}

$square = new Test3();
$square->width 10;
$square->makeSq();  // outputs 40

//Clients wants a different spec
$square->width 40;
$square->makeSq();  // outputs 160

class Test4 extends Test3 {
var $length;

function area() {
echo $this->width $this->length;
}
function perimeter() {
echo * ( $this->width $this->length );
}
}

$rectangle = new Test4();
$rectangle->length 60;
$rectangle->width 20;
$rectangle->area(); // outputs 1200
$rectangle->perimeter();  // outputs 160

?>


@Doug.  It is just another method of programming.  You can take it how it is or learn on it and improve. I noted somewhere else how the thinking can be applied to sNews.   Code could be the same way.

For example Articles/Pages/Extras:
 - what is the base of each?
 - what is each items function?  Is it a common function?

psuedo code - can be wrong!!
Code: [Select]
<?php

class Content {
var $id
var $text;
var $type// would be private in php5

function showContent() {
return $this->text;
}

function editLink() {
return '<a href="edit/'.$this->type.'/id='.$this->id.'">Edit</a>';
}
}

class 
Extra extends Content 
function __construct() {
return $this->type 'extra';
}
}

$blah = new Extra();
// Content, possibly from the db
$blah->id 2;
$blah->text "This is an extra!";

echo 
'
<p>'
.$blah->showContent().'</p>
<p>'
.$blah->editLink().'</p>
'
;

class 
Page extends Extra 
var $seftitle;
var $title;

function __construct () {
return $this->type 'page';
}

function showTitle() {
return $this->title;
}
}

$blah2 = new Page();
// Content, possibly from the db
$arr = array( 'id' => 3'seftitle' => 'blah''title' => 'Blah!''text' => 'I am feeling sooo blah today!' );
$blah2->id $arr['id'];
$blah2->seftitle $arr['seftitle'];
$blah2->title $arr['title'];
$blah2->text $arr['text'];

//Now let's output everything!
echo '
<h2>'
.$blah2->showTitle().'</h2>
<p>'
.$blah2->showContent().'</p>
<p>'
.$blah2->editLink().'</p>
'
;

class 
Article extends Page { }
class 
ArticleList extends Article { }


?>

Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: Javascript OOP
« Reply #4 on: November 25, 2009, 01:17:41 PM »

Mhm... but why ? Is OOP a better way ? Easier way ? More efficient way ?
Logged
"It's only dead fish that goes with the flow... "
Updated

Joost

  • Guest
Re: Javascript OOP
« Reply #5 on: November 25, 2009, 04:36:05 PM »

Mhm... but why ? Is OOP a better way ? Easier way ? More efficient way ?

It is not better or worse: In fact, the whole concept, is not just about programming, it is about development control and reflecting organisation structures as well. This works especially for organizations (software houses) with a tight hierarchical structure:
1) Lead developer creates a model/diagram for the project.
2) Senior programmer writes a class.
3) junior programmer(s) use(s) an object of that class.

Junior does not have to know what the class is doing internally. He simply puts an instance of class db to work, without having to know what type of database is used or which database tables are being accessed and what the queries look like. He is also not allowed (or simply cannot, if the object he uses comes from a compiled module or library).
The advatage is, that junior (new on the project), or mediocre programmers can be productive for the company quickly, because of their restricted tasks.
If a class is well written, it contains mechanisms that makes the class foolproof (to some extend) and is easy to work with.
Thus, the process of developing software might be more efficient. This doesn't mean however, that the application itself works more efficient. It is said it is not.

Logged

centered

  • Guest
Re: Javascript OOP
« Reply #6 on: November 25, 2009, 04:55:02 PM »

Quote
Is OOP a better way ? Easier way ? More efficient way ?
Some state OOP is easier and more efficient that procedural code.  It is a helpful technique to learn and understand.  

Does it apply to sNews?
- Well I noted somewhere else,that OOP thinking can help refactor existing code.  You can do it too without writing a piece of code.  What is the functions attributes and what does it do?  Can it be broken down further, do other functions use similar or exact functionality? etc etc. Take it for what it is, but it helped my with function articles() rewrite.
- For 2.0 everyone noted OOP should not be for sNews, on the other hand I noted if the solution calls for OOP, then do it.

(Not applied to OOP but some say it is....)
 - In my discussion with Phil, I noted I have been thinking in a MVC-like programming design pattern (Model - View - Controller).  Of course my thinking being backwards and not exact to the meaning. I think this way:
   - Model - PHP code.  Takes and models data and prepares it for viewing
   - View - PHP/HTML.  The template.
   - Controller - PHP code.  Database interface functions.  The DB controls the data.  PHP just interfaces with the db
(MVC states the controller does the data modelling and the Model is the database)

If you look at my helping Fred with his advanced search you noticed this:
function small search form() {  form }
function big search form() { displayResults(); form }
function multisearch() { build the db query and get the results }
function displayResults() { $rs = multiSearch(); do the html here }

This is partially MVC:
function multisearch() { build the db query and get the results } // This gets the POST data, filters it and queries the DB to filter the results for output

function displayResults() { $rs = multiSearch(); do the html here } // Here is our view for the results.  This would be part of the template files.  Here we take the data and apply it with html code

This technique is found in most of the refactoring i have done so far.  Additionally, it also aids my belief that for sNews2, that the end developer/user should be able to code up their template by using the data given by the core.

psuedo code:
// Core
function catList() {
  $rs = array();
  $q = query;
  $result = dbQuery($q)
  while ($r = dbFetchAssoc($result)) { $rs[] = $r; }
}

// Template
function categories() {
  $rs = catList[];
  echo <ul>
  foreach $rs as $r {
    echo <li>$r[link] . $r[title]</li>
  }
  echo <ul>
}
categories();

To end this.  I will note my knowledge of OOP programming is still in the beginner stages (in comparison to those more knowledgable). I have noted thoughts and applications that you can understand and maybe apply yourself.
Logged

Joost

  • Guest
Re: Javascript OOP
« Reply #7 on: November 25, 2009, 05:59:13 PM »

Yes, I've seen the code you refer to. It seems that to some extend we agree. However, I am not  inspired by a method, designing model or paradigm. Whether I keep a function in one piece or split it up, is merely decided from a practical point of view. If query and data retrieval "gets in the way" or I can use it more than once I'll separate it.
Sometimes I wrap code in a function, just to emphasize its importance.
It must be meaningful other than supporting an idea.

I did write some stuff using OOP. It didn't bring anything extra for me. Either I don't see its full potential it just not for me. ::)
Logged

centered

  • Guest
Re: Javascript OOP
« Reply #8 on: November 25, 2009, 06:56:40 PM »

And writing/using OOP may not benefit all.  I never stated it would. Additionally, I am not inspired by MVC, I just happened to stumble across it and realized, it was similar to how I was/am thinking.
Logged

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Javascript OOP
« Reply #9 on: November 26, 2009, 12:45:15 AM »

I'm with Jason, I was having a few (dangerous) thoughts, and MVC - OOP was how best to describe what I was thinking.

BUT
remember, computers are procedural machines, so no matter how you wrap OOP, it has to be straightened out by the system each time it is run. That may well produce unpleasant overhead.
Logged
Of all the things I have lost, it is my mind that I miss the most.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Javascript OOP
« Reply #10 on: November 26, 2009, 06:55:19 PM »

I'm with Jason ...

BUT
remember, computers are procedural machines, ..., it has to be straightened out by the system each time it is run.

It's kind of funny 'cause the MVC style of thinking helped me understand how things fit --in the codes that Jason produced in the complex search topic-- BUT at the same time it made it harder for me to *see* on my own how to modify, add to or implement some things in those codes ... I suspect I may be on an upward path towards becoming a 'mediocre programmer'... :D

The way I see it, OOP works the same as CSS in a way. CSS has no *real* benefits over inline styles other than making it easier for developers to handle all the styles used for a site, making it easier for the developer to hand over prefab documents to (less experienced) users, and making interaction with other things (scripts, servers) a little easier. OOP seems to me like it does the same on the scripting level. But I could be wrong, "I know I don't know nothin'" (to borrow a quote from Miller's Crossing).
Logged

centered

  • Guest
Re: Javascript OOP
« Reply #11 on: November 30, 2009, 06:06:41 PM »

Quote
OOP works the same as CSS in a way

Umm.. sort of I guess. 
If you mean one css style can be applied to multiple by inheritance, I could agree.

I think if you know Javascript, you know OO already.

Code: [Select]
document.write( "something" );Document is the object and write is the method(or function)

I can't do blah.write(), it doesn't work.  But If I do:
Code: [Select]
blah = new Object();
blah.write = function( str ) {
return document.write( str );
}
blah.write("blah");

If I wanted a variable:
Code: [Select]
blah.vrbl = "blah blah!!";
alert(blah.vrbl);
vrbl is a property or variable or the blah object. I can't do duh.vrbl

PHP would be:
Code: [Select]
class Blah {
 var $vrbl = "blah blah!"; //php4
 function write( $str ) { echo $str; }
}

$blah = new Blah();
$blah->write("blah");
Logged