Javascript Concepts for OO-Programmers 11) Javascript Concepts - PowerPoint PPT Presentation

Javascript Concepts for OO-Programmers 11) Javascript Concepts Objects � for OO-Programmers JavaScript Object Notation (JSON) Using JSON instead of AJAX Constructors Emmanuel Benoist Prototypes Reflexion Fall Term 2013-14 Methods and Functions � Function as First Class Objects Events Handling and Function Context in AJAX Restrictions in AJAX � Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1 2 Javascript is not Java Main Javascript Particularities Variables are loosely typed (like PHP) Javascript is just a name close to Java Variables do not receive a type at programming, It is not a descendant of the C familly The Values carry out the typing It is more of a functional language (like Scheme, Self or v=1; implies that v contains an integer Python). v="test"; implies that v contains a string Its syntax is unfortunately close to Java Code is interpreted locally It is close to Java The source code is transfered to the browser, read and For the syntax of loops ( while , for ) or conditional branching interpreted ( if , switch ). There is no bytecode generation (unlike java applets) It is far away from Java Javascript Functions are first class objects For object and classes design In Java everything is an Object (or a class) In Javascript everything is a Function Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3 4

Objects in Javascript Add a function to the Object (not a class) An Object in javascript is more like a “hash-table” We can define a new function It contains fields that can be added dynamically and initialized myObject.speakYourshoesSize= function () { or removed programatically. alert(”shoe size : ”+ this .shoeSize); Creation of an Object: Creates an empty container } var myObject = new Object(); or use a predifined one Can contain fields: function sayHello() { alert (’hello, my shoeSize is ’+ this .shoeSize); myObject.shoeSize=”42”; myObject[’shoeSize’]=”39”; } ... myObject.sayHello=sayHello; // WITHOUT ց → PARENTHESIS !!!! Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5 6 Complex Objects Use JSON JSON=JavaScript Object Notation We can attach objects inside other objects Standard notation is not easy to create large objects Data in an Array indexed with numbers var myLibrary=new Object(); list of objects enclosed in [] myLibrary.books=new Array(); myLibrary.books=[predefinedBook1, predefinedBook2, myLibrary.books[0]=new Object(); predefinedBook3]; myLibrary.books[0].title=”Ajax in Action”; myLibrary.books[0].authors=new Array(); Construct a new JavaScript object var dave=new Array(); List of key:value pairs enclosed in {} dave.age=45; dave.name=”Dave Crane”; myLibrary.books= { myLibrary.books[0].authors[0]=dave; bestSeller : predefinedBook1, ... cookbook : predefinedBook2, spaceFiller : predefinedBook3 Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7 8

JSON (Cont.) JSON (Cont.) We can define more complicated objects by merging the We can define and use member functions syntaxes (or use functions to fill the content), function giveDate() { var myLibrary= { return new Date(2005,10,5); } location : ”my office”, var harryPotter= { keywords : [”AJAX”, ”PHP”, ”JSP”, ”Servlets”], title : ”Harry Potter and the Half Blood Prince”, books : [ authors : [ { name: ”J. K. Rowling”, age : 42 } ], { title : ”Ajax in Action”, publicationDate : giveDate(); summerize : function () { authors : [ var summary = this .title+” by ” { name : ”Dave Crane”, age=45 } , + this .authors[0].name { name : ”Eric Pascarello”, age=”41” } +” was published in ”+ this .publicationDate ; ], alert summary; } publicationDate : new Date(2006,04,01) } } , { ... } ... } harryPotter.summerize(); Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9 10 JSON (Cont.) JSON for contacting many servers We can use JSON to contact another server. We add some code in the page requesting a javascript file But this file is generated by a program One parameter is the function to be executed on the return We can mix JSON and Standard Javascript Notation value var numbers= { one : 1 , two:2, three:3 } ; Example numbers.five=5; var str=’ < script language=”JavaScript” type=”text/javascript” ց → ’; str+=’ src=”myfile.php?var1=toto&var2=foo&loopback= ց → myFunction” >< /script > document.write(str); Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11 12

JSON for contacting many servers Objects, Classes and Prototypes Example of a value generated by the PHP programm Java is fully object-oriented Everything is an Object ( java.lang.Object ) myFunction( An object has a Type and a Class { location : ”my office”, MyType myObject = new MyClass(); keywords : [”AJAX”, ”PHP”, ”JSP”, ”Servlets”], books : [ Classes can extend an existing Class and implement interfaces { title : ”Ajax in Action”, Javascript has another type of Objects authors : [ Each Object belong to one unique class { name : ”Dave Crane”, age=45 } , It has capabilities to link new member functions and member { name : ”Eric Pascarello”, age=”41” } variables dynamically. ], publicationDate : new Date(2006,04,01) We can use Prototypes to instantiate objects with a default set } ] } ); of functions and variables (like a new in Java). This code is executed when the javascript is loaded. Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13 14 Constructor Constructor (Cont.) We can create a new object We can also define a member function var myObj=new MyObject(); function MyObject(name,size) { using a constructor - which is not a class but rather a this .name=name; “function” this .size=size; function MyObject(name,size) { this .tellSize= function () { alert(”size of ”+ this .name+” is ”+ this .size); this .name=name; this .size=size; } } } var myObj=new MyObject(”laptop”,”35cm”); var myObj=new MyObject(”laptop”,”35cm”); myObj.tellSize(); alert(”size of ‘‘+myObj.name+” is ”+myObj.size); Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15 16

Constructor (Cont.) Prototype Functions and properties can be tied to the prototype of a constructor Each time the constructor function is executed with a new , the properties and functions of the prototype are attached to It works, but is problematic the new object. We create the same function for each instance of MyObject . Risks of Memory Leaks if the number of instances becomes function MyObject(name,size) { large. this .name=name; We created a closing which is harmless but can be dangerous if this .size=size; included in the DOM. } We use a better solution: The Prototype MyObject.prototype.tellSize= function () { alert(”size of ”+ this .name+” is ”+ this .size); } var myObj=new MyObject(”laptop”,”32cm”); myObj.tellSize(); Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17 18 Extending existing classes Extending existing classes (Cont.) In JavaScript, you can incorporate native objects in your programms We can also add other methods They are written in C++ or Java Array.prototype.contains= function (obj) { Let us consider the Array class return ( this .indexOf(obj) > =0); } Array.prototype.indexOf= function (obj) { Array.prototype.append= function (obj,nodup) { var result= − 1; if (!(nodup && this .contains(obj))) { for ( var i=0;i < this .length;i++) { this [ this .length]=obj; if ( this [i]==obj) { } result=i; } break ; var numbers=[1,2,3,4,5]; } var got8=numbers.contains(8); } numbers.append(”cheese”, true ); return result; } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19 20