Cordova training : Day 4 - Advanced Javascript

CORDOVA TRAINING
SESSION: 3 – ADVANCED JAVASCRIPT

OBJECTS
 JavaScript is an Object Oriented Programming (OOP) language.
 Objects are composed of attributes.
 If an attribute contains a function, it is considered to be a method.

OBJECT PROPERTIES
 Object properties can be any of the three primitive data types, or any of the abstract
data types, such as another object.
 Object properties are usually variables that are used internally in the object's methods,
but can also be globally visible variables that are used throughout the page.
 The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;

OBJECT METHODS
 Methods are the functions that let the object do something or let something be done
to it.
 There is a small difference between a function and a method.
 A function is a standalone unit of statements and a method is attached to an object
and can be referenced by the this keyword.

USER DEFINED OBJECTS
 All user-defined objects and built-in objects are descendants of an object called Object.
 The new operator is used to create an instance of an object. To create an object, the
new operator is followed by the object name method.
 The object name method is called a ‘constructor’.
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

OBJECT CONSTRUCTOR
 A constructor is a function that creates and initializes an object.
 JavaScript provides a special constructor function called Object() to build the object.
The return value of the Object() constructor is assigned to a variable.
 The variable contains a reference to the new object.
var book = new Object();
book.subject = “Introduction to JavaScript ";
book.author = “Binu Paul";

OBJECT METHODS
 An object method is created by defining functions with in an object.
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice;
}

BUILT-IN OBJECTS
 JavaScript has several built-in or native objects. These objects are accessible anywhere
in your program and will work the same way in any browser running in any operating
system.
 Some of the popular objects are:
 Date
 Math
 String
 Array

DATE OBJECT
 The Date object is a datatype built into the JavaScript language. The date methods
simply allow you to get and set the year, month, day, hour, minute, second, and
millisecond fields of the object
 Some of the popular methods are:
 getDay();
 getMonth();
 getFullYear();
 getHours();
 getMinutes();
 getSeconds();

MATH OBJECT
 The math object provides you properties and methods for mathematical constants and
functions. Unlike other global objects, Math is not a constructor.
 Math.PI;
 Math.abs(x);
 Math.cos(x);
 Math.sin(x);
 Math.tan(x);
 Math.random();

MATH OBJECT
 Math.floor(x)
 Math.ceil(x);
 Math.log(x);
 Math.max(x1, x2,…);
 Math.min(x1, x2, …);
 Math.sqrt(x);
 Math.pow(x, y);

STRING OBJECT
 The String object lets you work with a series of characters; it wraps Javascript's string
primitive data type with a number of helper methods.
 You can get the length of a sting using length attribute.
 toUpperCase();
 toLowerCase();
 substr(startPosition, length);
 concat(str1, str2, …);
 split(separator, limit);

ARRAY OBJECT
 The Array object lets you store multiple values in a single variable. It stores a fixed-size
sequential collection of elements of the same type.
 An array is used to store a collection of data, but it is often more useful to think of an
array as a collection of variables of the same type.
 We can get the length of array using the length attribute.
 push(element1, element2, …);
 pop();

ARRAY OBJECT
 reverse();
 sort();
 shift();
 join(seperator);

ACCESSING HTML DOM
 Every web page resides inside a browser window which can be considered as an object.
 DOM stands for Document Object Model.
 A Document object represents the HTML document that is displayed in that window.
The Document object has various properties that refer to other objects which allow
access to and modification of document content.

DOM HIERARCHY
 Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
 Document object − Each HTML document that gets loaded into a window becomes a
document object. The document contains the contents of the page.
 Form object − Everything enclosed in the <form>...</form> tags sets the form object.

DOM ATTRIBUTES
 This DOM model provides several read-only properties, such as title, URL, and
lastModified provide information about the document as a whole.
 The most popular document properties are:
 alinkColor
 anchors[ ]

DOM ATTRIBUTES
 domain
 forms[ ]
 images[ ]
 location
 referrer
 title
 URL

DOM METHODS
 There are various methods provided by DOM model which can be used to set and get
document property values.
 document.getElementById(id);
 document.getElementsByName(name);
 document.getElementsByTagName(tagName);

DOM - WINDOW
 The window object represents a window containing a DOM document; the document
property points to the DOM document loaded in that window. A window for a given
document can be obtained using the document.defaultView property. The popular
methods are:
 window.forward();
 window.back();
 window.home();
 window.open(url);
 window.close();

DOM - LOCATION
 The Location interface represents the location (URL) of the object it is linked to. The
mostly used properties are:
 location.href;
 location.protocol;
 location.host;
 location.pathname;
 location.port;

DOM - LOCATION
 The mostly used methods are:
 location.reload();
 location.replace(url);

DOM - SCREEN
 The Screen interface represents a screen, usually the one on which the current window
is being rendered. The mostly used properties are:
 screen.height;
 screen.width;
 screen.top;
 screen.left;

DOM - CSS
 The HTML DOM allows JavaScript to change the style of HTML elements. To change the
style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style;

JAVASCRIPT - EVENTS
 An HTML event can be something the browser does, or something a user does. Here
are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked
 Often, when events happen, you may want to do something. JavaScript lets you
execute code when events are detected.

JAVASCRIPT - EVENTS
 JavaScript can be executed when an event occurs, like when a user clicks on an HTML
element.
 The syntax is:
<some-HTML-element some-event="some JavaScript">

JAVASCRIPT - EVENTS
 The common event elements are:
 onchange
 onclick
 onload
 onkeydown
 onfocus
 onblur

JSON
 JSON stands for JavaScript Object Notation.
 JSON is a format for storing and transporting data.
 JSON format is text only.
 JSON is often used when data is sent from a server to a web page.
 The JSON Format Evaluates to JavaScript Objects.

JSON SYNTAX RULE
 Data is in name/value pairs.
 Data is separated by commas.
 Curly braces hold objects.
 Square brackets hold arrays.

JSON DATA
 JSON data is written as name/value pairs, just like JavaScript object properties.
 A name/value pair consists of a field name (in double quotes), followed by a colon,
followed by a value.
"firstName":"John“
{ "employees":[
{"firstName":“Steve”, "lastName":“Jobs"},
{"firstName":“Tim“, "lastName":“Cook"}
] }

JSON OBJECT
 JSON objects are written inside curly braces.
 Just like in JavaScript, objects can contain multiple name/value pairs.
{"firstName":"John", "lastName":"Doe"}

JSON ARRAY
 JSON arrays are written inside square brackets.
 Just like in JavaScript, an array can contain objects.
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

JSON PARSING
 A common use of JSON is to read data from a web server, and display the data in a
web page.
 We can use the JavaScript built-in function JSON.parse() to convert the string into a
JavaScript object.
var obj = JSON.parse(text);

Cordova training : Day 4 - Advanced Javascript

More Related Content

What's hot (20)

Similar to Cordova training : Day 4 - Advanced Javascript (20)

More from Binu Paul (11)

Recently uploaded (20)

Cordova training : Day 4 - Advanced Javascript