Understanding

JavaScript & Dojo

Abhisekh Mohapatro
Radhakanta Mohapatara
Sujay AR
Jabar Sadiq

What well be talking about

Basic Javascript
Object Oriented Java Script
Intro to Dojo
Using Dojo Widgets
Intro to JSON
Debugging Javascript and CSS
Creating new Widgets using Dojo
Code Walk through of one of the XWT widget

ObjectOriented
JavaScript

Abhisekh Mohapatro

Java Script
What well be talking about

OOP Basics
Scope
Closures
Context

Appling to OOP
Constructors
Methods
Public
Private
Privileged

Java Script
What is JavaScript?

An interpreted programming language with

object oriented capabilities.
Not Java!
Originally called LiveScript, changed to JavaScript as
a marketing ploy by Sun and Netscape. Can also be
referred to as ECMA Script (a European association for
standardizing information and communications systems).

Not simple!
Although it is loosely typed and can be used by web
developers in a cookbook fashion (think image
rollovers), JavaScript is a fully featured programming
language with many advanced features.
5

Java Script
But First... Some handy tools
Here are some handy things you might not know JavaScript can do:

Objectliteral notation
Anonymous functions
Binary assignment
Dotstyle and arraystyle access of properties

Java Script
Handy Tools
Object Literal NotationMakes JavaScript Object Notation possible

// The old way

var myObject = new Object();
myObject.val = test;

// Using object literal notation

var myObject = {
val: test
};
7

Java Script
Handy Tools
Anonymous Functions

In JavaScript, functions are treated as values, which means:

Functions can be assigned to variables
Functions can be passed as arguments to other functions

Java Script
Handy Tools
Anonymous Functions
// Using an anonymous function as an argument
setTimeout( function () {
alert( Refresh );
}, 1000
);
// Using a function as a variable
var myFunc = function () {
alert( Refresh );
};
setTimeout(myFunc, 1000);

Java Script
Handy Tools
Anonymous Functions : Building a scope bubble to wrap code you dont want in
the global scope
var globalVar = Refresh; // Global scope
// Create a scope bubble
( function () {
var privateVar = Jacksonville;
alert( globalVar + + privateVar );
} )();
alert (privateVar == undefined);

10

Java Script
Handy Tools
Binary Assignment: Set a default value only if the variable doesnt have a value yet

// Traditional ternary assignment

var myVar = myVar ? myVar : 0;

// Binary assignment
var myVar = myVar || 0;

11

Java Script
Handy Tools
DotStyle and ArrayStyle property access
var sampleObj = {
color: blue,
width: 16px
};

// Traditional dotstyle access

alert( sampleObj.color == blue );

// Alternative arraystyle access

alert( sampleObj[width] == 16px );

12

Java Script
Back to OOP Basics
Scope
Closures
Context

13

Java Script
Scope

Only functions have scope. Blocks (if, while, for, switch) do not.

All variables are within the global scope unless they are defined within a
function.

All global variables actually become properties of the window object

When variables are not declared using the var keyword, they are declared
globally.

14

Java Script
Scope
var foo = orig; // foo is now a global variable
if ( true ) {
foo = new; // Global foo now equals new
}
// create function to modify its own foo variable
function test () {
var foo = old;
}
test();
alert( foo == new ); // Global foo still equals new

15

Java Script
Scope
If you forget to use the var keyword to define a value within a function even if its
only used within the function the value will be defined globally.
var foo = new;
alert( foo == new );
// Omitting the var keyword reverts scope
// of foo to global level
function badTest () {
foo = bad news;
}
badTest();
// Global foo now equals bad news
alert( foo == bad news );
16

Java Script
Scope: Inner Functions

Functions can be defined within one another

Inner functions have access to the outer functions variables and parameters.

function getRandomInt(max) {
var randNum = Math.random() * max;
function ceil() {
return Math.ceil(randNum);
}
return ceil(); // Notice that no arguments are passed
}
// Alert random number between 1 and 5
alert(getRandomInt(5));
17

Java Script
Closures
Inner functions maintain the scope they enjoyed when their parent
function was calledeven after the parent function has terminated.

a closure is the local variables for a function - kept alive after the
function has returned

This allows you to effectively pass variables to functions that may not
be called for some time.

18

Java Script
Closures : Example
Java Script Function:

function sayHello(name) {
var text = 'Hello ' + name;
var sayAlert = function() { alert(text); }
sayAlert();
}

sayHello(Bob);

19

Java Script
Closures : Example
The following code returns a reference to a function:

function sayHello2(name) {
var text = 'Hello ' + name; // local variable
var sayAlert = function() { alert(text); }
return sayAlert;
}

var say2 = sayHello2('Jane');

say2();
20

Java Script
Context
Your code will always be running within the context of another object
Context is maintained through the use of the this variable.

function increment() {
this.x = this.x || 0;
return this.x++;
};
alert( increment() == 0 );
alert( increment() == 1 );
21

Java Script
Context
var myObject = {
set: function (newVal) { this.val = newVal; }
};
alert( myObject.val == null ); // val property not set yet
myObject.set(Refresh);
alert( myObject.val == Refresh ); // val equals Refresh
// Change the context of set() to the window object
window.set = myObject.set;
window.set( Refresh Jacksonville );
alert( myObject.val == Refresh );
alert( window.val == Refresh Jacksonville );

22

Java Script
Context : Changing Contexts

JavaScript provides two handy functions for executing a function within the
context of another function:

call( )

apply( )

23

Java Script
Context : Changing Contexts
Using call() Arguments passed by name
// Simple function to change the color style of a node
function changeColor (newColor) {
this.style.color = newColor;
}
// window.changeColor has no style property, so call fails
changeColor( red );
// Grab the DOM node with the id required
var reqField = document.getElementById( required );
// Call changeColor() within reqFields context
changeColor.call( reqField, red );
24

Java Script
Context : Changing Contexts
Using apply() Arguments passed as an array

// Simple function to change the color style of a node

function changeColor (newColor) {
this.style.color = newColor;
}
// Set the text color of the body element
function setBodyTextColor () {
changeColor.apply( document.body, arguments );
}
setBodyTextColor( black );
25

Java Script
Object Oriented Programming
Now lets apply all of this information to a more classical view of OOP in JavaScript:

Constructors

Object Methods
Public
Private
Privileged

26

Java Script
About Objects
Almost everything written in JavaScript is an object
Objects can be though of as a collection of properties
JavaScript doesnt have a concept of classes like other object
oriented languages
Classes are simulated using a concept called prototypal inheritance

27

Java Script
Constructors
Like other languages, JavaScript uses the new operator to create
new instances of objects.
// Create User object constructor
function User ( name ) {
this.name = name;
}
// Create a new instance of a User
var me = new User(Bob);
// Alert new users name
alert( me.name == Bob );
// Cannot call User directly
alert( User.name == undefined ); // window.name is undefined
28

HCL - Snapshot
Methods

Private

Privileged

29

Public

Java Script
Public Methods
One way to create a public methoda function that can be freely
reference by code outside your objectis to attach it to the objects
prototype.

An objects prototype is a special property that acts as a base

reference of your object.

This prototype object is copied and applied to all new instances of

your object.

30

Java Script
Public Methods
// Our User object written a different way
var User = function (name) {
this.name = name;
}
// Add a public accessor method for name
User.prototype.getName = function () {
return this.name;
}
var me = new User( Bob );
alert( me.getName() == Bob );

31

Java Script
Private Methods

Private methods are functions that are only accessible to

methods inside your object and cannot be accessed by
external code.

32

Java Script
Private Methods
// Our User object with some changes
var User = function (name) {
this.name = name;
function welcome () {
alert( Welcome back, + this.name + .);
}
welcome();
}
// Create a new User
var me = new User( Bob ); // Alerts: Welcome, Bob.
// Fails because welcome is not a public method
me.welcome();
33

Java Script
Privileged Methods
The term privileged method was coined by Douglas
Crockford. It is not a formal construct, but rather a
technique.
Privileged methods essentially have one foot in the door:
Then can access private methods and values within the
object
They are also publicly accessible

34

Java Script
Privileged Methods
// Our User object with some tweaks
var User = function (name, age) {
var year = (new Date()).getFullYear() age;
this.getYearBorn = function () {
return year;
}; };
// Create a new User
var me = new User( Bob, 28 );
// Access privileged method to access private year value
alert( me.getYearBorn() == 1980 );
// Fails because year is private
alert( me.year == null );
35

Thank You

www.hcl.in