oojs

JSJavaScripters
Object oriented JavaScript
By Imran Shaikh
7th November 2015

JSJavaScripters
Agenda
 JavaScripters Introduction & Initiative
 What is JavaScript?
 JavaScript Basics
JavaScript Overview
Data Types
Object Fundamentals
Scope & Context
Prototypal Inheritance

JSJavaScripters
What is JavaScript?
•ECMAScript
•Current version in browsers is ECMA-262 edition 3, 3.1 to be finalized in December 2009
•http://www.ecma-international.org
•Not tied to web browsers
•DOM – Document object model
• API for working with XML/HTML, 3 levels (level 1 became W3C recommendation in October 1998)
• http://www.w3.org/DOM/
•BOM (Browser object model)
•navigator, location, screen, XMLHttpRequest, ActiveXObject...
•No backing standard
ECMAScript DOM BOM
JavaScript
- The worlds most popular programming language..?

JSJavaScripters
Is JavaScript an OOP language?
JavaScript is a functional, dynamic, interpreted and not out-of-the-box OOP language
Key features of OOP:
 Polymorphism
 Encapsulation (one way to support is through Closure)
 Inheritance (one way to support is through Prototypal Inheritance)
The main difference between classical OOP languages (C++, Java, .NET) and JavaScript is that the OOP
features are not provided out-of-the-box by the language.

JSJavaScripters
JavaScript overview
•JavaScript is a class-free, object-oriented language
•Dynamic language, you can change any object at any time
•Prototypal inheritance (inherit from objects)
•Lamda functions (or ’anonymous’ functions)
•5 primitive types:
•number
•string
•boolean
•null
•undefined
•Loosely typed language
var a = 2;
a === "2" // false
a = "2"; // a is now a string
a === "2" // true

JSJavaScripters
Data Type
A. Primitive:
number – 1, 3, 1001, 11.12, 2e+3
string – "a", ”Imran", "0"
boolean – true | false
null
Undefined
B. Non-Primitive / Objects
everything else…

JSJavaScripters
Value types (primitives) vs. (non-primitives) reference types
Type Example Value (V) / Reference (R)
Undefined undefined V
Null null V
Boolean true V
String “example” / ‘example’ V
Number (double) 3. 14159 V
Object { foo: ‘bar’ } R
Function function f() { ... } R
Array [ ‘one’, 2, true ] R
RegExp /ab+c/i R
Date Saturday November 07 2015 10:00:00 GMT+0300 R
Number (primitive wrapper object) new Number(3.14159) R
Boolean (primitive wrapper object) new Boolean(true) R
String (primitive wrapper object) new String(‘example’) R

JSJavaScripters
An Objects
Everything is an object (except a few primitive types)
 Objects are hashes
 Arrays are objects

JSJavaScripters
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 declared globally.

JSJavaScripters
Scope example
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”

JSJavaScripters
Scope
If you forget to use the var keyword to define a value within a function—even if it’s 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” );

JSJavaScripters
Scope (Inner Function)
•Functions can be defined within one another
•Inner functions have access to the outer function’s 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));

JSJavaScripters
Closures
Inner functions maintain the scope they enjoyed when their parent function was called—even after the parent
function has terminated.
This allows you to effectively pass variables to functions that may not be called for some time.

JSJavaScripters
Closures
function delayedAlert (message, delay) {
// Set an enclosed callback
setTimeout( function () {
// Use message variable passed to outer function
alert(message);
}, delay);
}
// Display a message with a 5 second delay
delayedAlert(“Refresh”, 5000);

JSJavaScripters
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 );

JSJavaScripters
Context: Changing Contexts
JavaScript provides two handy functions for executing a function within the context of another function:
•call( )
•apply( )

JSJavaScripters
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 reqField’s context
changeColor.call( reqField, “red” );

JSJavaScripters
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” );

oojs

Related slideshows

More Related Content

oojs