Daniel Raviv Dekel

Public / Private Methods - Inheritance (JS)

There are several ways to determine what and how to configure a public methods in JavaScript:

* = Public Method/Var, * = Private Method/Var

One way:


function Company(){

  var name = null;

  return {
      setName: function(n){
          name = n;
      },

    getName : function(){
          return name;
      }
  }
}

This is the way "Duglas Crockfor way" implements public methods, but I like more to see all the methods inside a unique container (as in Java or C++) and determine what is public or private with a simple distinguish symbol, in this case The "this" (for public).

Second way (the one I prefer):


function Company(){

  var name = null;

  this.setName = function(n){
      name = n;
  }

  this.getName = function(){
      return getUppercase(name);
  }

  function getUppercase(str){
      return str.toUpperCase();
  }
}

This way the object (Company) remains the same instance of a Company type and not as the example before, while returning a new object, the instance of the object is not Company.

Also for me is more clear to show with "this" the Public Methods.

Remember that the Private Methods are also static, and private (Static) methods cannot call public (non-static) ones.

Object Oriented - Inheritance (JS)

There are a number of possibilities for implementing Inheritance in JavaScript.
I prefer using the Call or Apply method because it's simple to implement, the API is very clear and the code looks nice.

It works the following way:

Api:

var dog = new Dog(1);
dog.setName("Lola");
dog.setAge("3");

animal.js

function Animal(id){

 this.id = id;
 this.name;
 this.age;

 this.getId = function(){
    return this.id;
 }

 this.setName = function(name){
    this.name = name;
 }

 this.getName = function(){
    return this.name;
 }

}

dog.js

function Dog(id){

   Animal.apply(this, arguments);

    this.saySomething = function(){
          return "Wow, wow wow " + this.getName() + " woof " + this.getAge() + " wow woof.";
    }
}

UI Packages Differences

I checked two main packages which are the most common in the web at this time.
YUI and DOJO are competing with different approaches but the results are almost the same.

Yahoo UI (YUI)
Is a package developed by many prestigious people. An open source managed by Yahoo also gives the guaranty that the product will continue to grow and also will lead the standards in market.

This is a package for UI and not just JavaScript Package. The product lets the users handle the basic code as before, but the package ads more functionality. The basic code continues to work.

Dojo
Is an Open Source product built on several code bases. The package is growing all the time and was adopted by many companies as their main DHTML package. This gives some guarantee that the product is stable, free of bugs and will continue to exist for a long time.

Dojo’s approach is to add specific attributes to an Element it means that they add a kind of taglibs directly to the HTML code. It makes very easy to code since it’s not always necessary to use JavaScript. In one way it’s easy to code but in other way it makes the code completely dependent on the package and it also generates DTD errors since the attributes are not recognized by W3G. It’s possible to generate to instantiate the same features by JavaScript (like YUI).

JSON - Alternative to XML in Ajax

JSON is a language of objects sent by the server.

The Client receives a Javascript object easier to control than the use of DOM or XSL.

XML Example:

<menu id="file" value="File">
 <popup>
   <menuitem value="New" onclick="CreateNewDoc()" />
   <menuitem value="Open" onclick="OpenDoc()" />
   <menuitem value="Close" onclick="CloseDoc()" />
 </popup>
</menu>

JSON Example:

{"menu": {
 "id": "file",
 "value": "File",
 "popup": {
   "menuitem": [
     {"value": "New", "onclick": "CreateNewDoc()"},
     {"value": "Open", "onclick": "OpenDoc()"},
     {"value": "Close", "onclick": "CloseDoc()"}
   ]
 }
}}

Links:
http://en.wikipedia.org/wiki/JSON
http://www.json.org/java/

Canvas Element

Canvas Element is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of Canvas implementations which we will see later in this tutorial.
Canvas was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this new element. The Canvas element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

(Taken from: http://developer.mozilla.org/en/docs/Canvas_tutorial)

Links:
http://en.wikipedia.org/wiki/Canvas_(HTML_element)
http://developer.mozilla.org/en/docs/Canvas_tutorial

DHTML and Ajax utilities

I found two nice Ajax utilities that can help building web gui.
Both of them are compatible with Firefiox, IE and other browsers.

The first, YUI Library(Yahoo UI) - http://developer.yahoo.com/yui
Is well explained and the API is easy to use.
I didn't use it because I've already built most of the controls like Tree, autocomplete, context menus, etc.
But there are some nice generic objects like drag and drop that can be used in objects we do.

The second utility, Prototype - http://prototype.conio.net
I've found nice functions that can help us to reduce code like the $() function, instead of writing document.getElementById().
Also has some objects that implements HTTPRequest. Nice to check it out, also to learn hot it works.

Contact Me

My mail: dekelraviv@gmail.com
Location: Earth