Dojo Dijit and HTML5 in Real world applications/University/2. Advanced Java script I: Difference between revisions
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
=={{SUBPAGENAME}}== | =={{SUBPAGENAME}}== | ||
The first part of the lecture is based on the [http://pmis.biz/training/javascript/objects_and_arrays_1.php objects and arrays] examples. | The first part of the lecture is based on the [http://pmis.biz/training/javascript/objects_and_arrays_1.php objects and arrays] examples. | ||
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]. | |||
==Objects and arrays== | ==Objects and arrays== | ||
Line 13: | Line 16: | ||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
<script type="text/javascript"> | <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> | </script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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: | |||
[http://dreaminginjavascript.wordpress.com/2008/06/27/how-weird-are-javascript-arrays/ How Weird are JavaScript Arrays?] | [http://dreaminginjavascript.wordpress.com/2008/06/27/how-weird-are-javascript-arrays/ How Weird are JavaScript Arrays?] | ||
<syntaxhighlight lang="JavaScript"> | |||
<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> | |||
</syntaxhighlight> | |||
===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! | |||
<syntaxhighlight lang="JavaScript"> | |||
<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> | |||
</syntaxhighlight> | |||
The working example may be found [http://pmis.biz/training/javascript/objects_and_arrays_3.php here] | |||
====== | |||
===First_class_functions=== | |||
==References== | ==References== |
Revision as of 19:22, 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/diji 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
==
First_class_functions
References
- All examples used in this lecture may tried out and found in the index
- Objects and arrays: Constructor; Prototype; Differential Inheritance; Reflection.
- First class functions: Dojo; Ajax; JSON;
- Last official HTML5 draft: W3C Editor’s Draft 23 March 2009
- W3C HTML5 working draft
- Java Script specification (Ecma script)
- JavaScript language supports First-class function
- Anonymous function
- Other Java Script libraries
- JSON validator jsonlint.com
Document History
Version | Date | Author | Status | Purpose of update |
---|---|---|---|---|
1 | 14 Feb 2012 | PSA | Draft | Not released. |
2 | 22 Mar 2012 | PSA | Draft | Not released |