Dojo Dijit and HTML5 in Real world applications/University/2. Advanced Java script I: Difference between revisions

From PMISwiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 7: Line 7:


The second part is based on the [http://pmis.biz/rwa/First_class_functions.php First class functions demo]. A simplified version of  
The second part is based on the [http://pmis.biz/rwa/First_class_functions.php First class functions demo]. A simplified version of  
dojo/diji layout is found in the [http://pmis.biz/rwa/Basic_structure.php Basic_structure.php].  
dojo/dijit layout is found in the [http://pmis.biz/rwa/Basic_structure.php Basic_structure.php].  


==Objects and arrays==
==Objects and arrays==
Line 67: Line 67:
The working example may be found [http://pmis.biz/training/javascript/objects_and_arrays_3.php here]
The working example may be found [http://pmis.biz/training/javascript/objects_and_arrays_3.php here]


======
==dijit.layout==
This section is based on the [http://pmis.biz/rwa/First_class_functions.php First class functions demo]. If you would like to start easy a [http://pmis.biz/rwa/Basic_structure.php simplified version] is also available.
We will focus on the following elements:
* [[Dojo_Dijit_and_HTML5_in_Real_world_applications/Dojo/dojo.ready|The Soft loader]]
* [[Dojo_Dijit_and_HTML5_in_Real_world_applications/Dijit/dijit.layout.BorderContainer|dijit.layout.BorderContainer]]
* [[Dojo_Dijit_and_HTML5_in_Real_world_applications/Dijit/dijit.layout.AccordionContainer|dijit.layout.AccordionContainer]]
* [[Dojo_Dijit_and_HTML5_in_Real_world_applications/Dijit/dijit.layout.TabContainer|dijit.layout.TabContainer]]
* All containers use the dijit.layout.ContentPane


===First_class_functions===
===First class functions===
Finally we will discuss the first class function example below:
<syntaxhighlight lang="JavaScript">
<script type="text/javascript">
...
var postData = function(){
    var a = Number( dojo.byId("a").value );
    var b = Number( dojo.byId("b").value );
    var c = Number( dojo.byId("c").value );
    reset();
   
    dojo.xhrPost({
        url: "data/object.json",
        handleAs: "json",
        load: function(data,ioargs){
            var x;
            for (x in data){
                dojo.byId("content").innerHTML += data[x]['name'] + ", ";
                if (data[x]['name']=='Luis Villasante'){
                      if(Object.prototype.toString.call(data[x]['function']) ==
                                                        '[object Function]')
                      {
                          data[x]['function']("Hello world!");
                      }
                } else {
               
                    dojo.byId("functions").innerHTML += " "+ data[x]['name'] +
                    ': ' + calculator (a, b, c, data[x]['function'])+'<br>';
                }   
            }
        }
    });
};
 
dojo.ready(postData); // At start up: get data from server..
 
function calculator (a, b, c, func){
  return func(a,b,c);
}
 
function reset (){
    // Reset HTML elements
    dojo.byId("content").innerHTML  ="";
    dojo.byId("functions").innerHTML ="";
}
</script>
</syntaxhighlight>
 
==Home work==
* Get the examples to work on your local server.
* Add more calculators to the "First class functions" example.


==References==
==References==
Line 100: Line 157:
|-
|-
| 2
| 2
| 22 Mar 2012
| 23 Mar 2012
| PSA
| PSA
| Draft
| Released
| Not released
| Home work added
|}
|}


[[Category:Dojo university]]
[[Category:Dojo university]]

Revision as of 21:32, 23 March 2012

!!! Not released for use yet !!! This is the second lesson on the HTML5, CSS3 and Advanced Javascript course.

2. Advanced Java script I

The first part of the lecture is based on the objects and arrays examples.

The second part is based on the First class functions demo. A simplified version of dojo/dijit layout is found in the Basic_structure.php.

Objects and arrays

JavaScript is a class-less programming language. However, yet Object Oriented Programming (OOP) is widely used in JavaScript. The following provide an insight to the way to make OOP in JavaScript.

Objects vs. Arrays

JavaScript is object oriented. All variables are objects. Even Arrays are objects. Objects may be defined in three different ways:

<script type="text/javascript">
var Array1 = new Array(1,2,3);
var Array2 = [1, 1, 1, 1];

var carArray = [];
      carArray['name'] = 'carArray';
      carArray['Lfront'] = 1;
      carArray['Rfront'] = 1;
      carArray[3] = 1;
      carArray[4] = 1;
      carArray[5] = function (){return carArray['Lfront'] + carArray['Rfront'] + 
                                                            carArray[3] + 
                                                            carArray[4]};
</script>

It is only possible to make a "associative" array using the last example. Some times it difficult the see a difference between an array and an object. JavaScript arrays are meant to be numeric. if you need to hold key/value pairs then it is better practice to use Objects instead. See: How Weird are JavaScript Arrays?

<script type="text/javascript">
    var carObject = {
        name:   'carObject',
        Lfront: 1,
        Rfront: 1,
        Lback:  1,
        Rback:  1,
        CountWeels: function (){return this.Lfront + this.Rfront + this.Lback + this.Lback}
    }
</script>

Prototype and differential inheritance

Differential inheritance works as in other object oriented programming languages. Prototype is special: Changing the prototype change all inherited objects: Existing objects and new!

<script type="text/javascript">
    var Obj = function () {
      this.name   = 'obj';
      this.title  = 'Welcome to advanced javascript';
      this.text_1 = 'First section will be about advanced java script.';
      this.text_2 = 'The second section will be about Dojo.';
    };

    var obj_1 = new Obj(); // differential inheritance
    obj_1.name = 'Tom';
    
    Obj.prototype.printname = function (){
        return 'My name is: ' + this.name;
    };
</script>

The working example may be found here

dijit.layout

This section is based on the First class functions demo. If you would like to start easy a simplified version is also available. We will focus on the following elements:

First class functions

Finally we will discuss the first class function example below:

<script type="text/javascript">
...
var postData = function(){
    var a = Number( dojo.byId("a").value );
    var b = Number( dojo.byId("b").value );
    var c = Number( dojo.byId("c").value );
    reset();
    
    dojo.xhrPost({
        url: "data/object.json",
        handleAs: "json",
        load: function(data,ioargs){
            var x;
            for (x in data){
                dojo.byId("content").innerHTML += data[x]['name'] + ", ";
                if (data[x]['name']=='Luis Villasante'){
                      if(Object.prototype.toString.call(data[x]['function']) ==
                                                        '[object Function]')
                      {
                          data[x]['function']("Hello world!");
                      }
                } else {
                
                    dojo.byId("functions").innerHTML += " "+ data[x]['name'] +
                    ': ' + calculator (a, b, c, data[x]['function'])+'<br>';
                }     
            }
        }
    });
};

dojo.ready(postData); // At start up: get data from server..

function calculator (a, b, c, func){
   return func(a,b,c);
}

function reset (){
    // Reset HTML elements
    dojo.byId("content").innerHTML   ="";
    dojo.byId("functions").innerHTML ="";
}
</script>

Home work

  • Get the examples to work on your local server.
  • Add more calculators to the "First class functions" example.

References

Document History

Version Date Author Status Purpose of update
1 14 Feb 2012 PSA Draft Not released.
2 23 Mar 2012 PSA Released Home work added