Object Oriented JavaScript29 September 2015

Prepare & Presented By Gandhi V

1

AT A GLANCE

JavaScript

OOPs

OOPs in JavaScript

Datatypes

Error Handling In JavaScript

Improve Performance in JS

Q&A

Thank You

1 JavaScript

JavaScript JavaScript is a high level, dynamic, untyped, and interpreted programming

language. It has been standardized in the ECMAScript language specification

(European Computer Manufacturers Association).

JavaScript was designed by Brendan Eich.

Speed. Being client-side, JavaScript is very fast because any code functions can be

run immediately instead of having to contact the server and wait for an answer.

JavaScript is very easy to implement. All you need to do is put your code in the

HTML document and tell the browser that it is JavaScript.

JavaScript works on web users’ computers — even when they are offline!

JavaScript allows you to create highly responsive interfaces that improve the user

experience and provide dynamic functionality, without having to wait for the server

to react and show another page.

JavaScript JavaScript can load content into the document if and when the user needs it,

without reloading the entire page — this is commonly referred to as Ajax.

While in the past it was a common argument that JavaScript was a basic language

and was very 'slap dash' with no real foundation; this is no longer the case,

especially with the introduction of high scale web applications and 'adaptations'

such as JSON (JavaScript Object Notation).

List of JavaScript libraries. Ex. Dojo Toolkit, jQuery, midori, MooTools, Prototype

JavaScript Framework, YUI Library

Security Issues – Open to client.

JavaScript rendering varies – Compatibility issue.

JavaScript

Programming languages used in most popular websites*

Websites Popularity (Unique Visitors)

Front-end (Client Side) Back-end (Server Side) Database

Google.com 1,100,000,000 JavaScript C, C++, Go,Java, Python BigTable, MariaDB

YouTube.com 1,000,000,000 JavaScript C/C++, Python, Java, Go MySQL, BigTable, MariaDB

Facebook.com900,000,000 JavaScript Hack, PHP, C++, Java, Python,Erlang, D, Xhp MySQL, HBaseCassandra

Yahoo 750,000,000 JavaScript JavaScript, PHP MySQL, PostgreSQL

Amazon.com 500,000,000 JavaScript Java, C++, Perl Oracle Database

Wikipedia.org 475,000,000 JavaScript PHP , Hack MySQL, MariaDB

Twitter.com 290,000,000 JavaScript C++, Java, Scala, Ruby on Rails MySQL

Bing 285,000,000 JavaScript ASP.NET Microsoft SQL Server

eBay.com 285,000,000 JavaScript Java, JavaScript Oracle Database

MSN.com 280,000,000 JavaScript ASP.NET Microsoft SQL Server

Microsoft 270,000,000

Linkedin.com 260,000,000 JavaScript Java, JavaScript, Scala Voldemort

Pinterest 250,000,000 JavaScript Django (a Python framework) MySQL, Redis

Ask.com 245,000,000

Wordpress.com 240,000,000 JavaScript PHP MySQL

OOPs

OOPs Object Oriented programming is a programming style that is associated with the

concept of OBJECTS, having data fields and related member functions.

Concepts of OOPs.1. Objects2. Classes3. Data Abstraction4. Encapsulation5. Inheritance6. Polymorphism7. Dynamic Binding

Improved software-development productivity.

Improved software maintainability.

Faster development & Lower cost of development.

Object Oriented programs require a lot of work to create.

1 OOPs in JavaScript

OOPs in JavaScript JavaScript supports Object Oriented Programming but not in the same way as other

OOP languages(C++, php, Java, etc.) do.

The main difference between JavaScript and the other languages is that, there are

no Classes in JavaScript whereas Classes are very important for creating objects.

However there are ways through which we can simulate the Class concept in

JavaScript.

Another important difference is Data Hiding. There is no access specifier like

(public, private and protected) in JavaScript but we can simulate the concept using

variable scope in functions.

OOPs in JavaScriptObjectAny real time entity is considered as an Object. Every Object will have some properties and functions. More ways to create objects in JavaScript like:

1)Creating Object through literalvar obj={};

2)Creating with Object.createvar obj= Object.create(null);

3)Creating using new keywordfunction Person(){}var obj=new Person();

OOPs in JavaScriptClass There are no classes in JavaScript as it is Prototype based language. But we can simulate the class concept using JavaScript functions.

function Person(){ //Properties this.name=“Forzia"; this.startYear=“2015"; //functions this.CompInfo=function(){ return this.name +" Says Hi"; }}

//Creating person instancevar p=new Person();alert(p.CompInfo());

OOPs in JavaScriptConstructorActually Constructor is a concept that comes under Classes. Constructor is used to assign values to the properties of the Class while creating object using new operator.

function Person(name,age){ //Assigning values through constructor this.name=name; this.age=age; //functions this.sayHi=function(){ return this.name +" Says Hi"; }}

//Creating person instancevar p=new Person("aravind",23);alert(p.sayHi());//Creating Second person instancevar p=new Person("jon",23);alert(p.sayHi());

OOPs in JavaScriptInheritance (Work around)Inheritance is a process of getting the properties and function of one class to other class. For example let’s consider "Student" Class, here the Student also has the properties of name and age which has been used in Person class. So it's much better to acquiring the properties of the Person instead of re-creating the properties. Now let’s see how we can do the inheritance concept in JavaScript. var Person = function (){ this.sayHi=function(){ return " Says Hi"; }}//1)Prototype based InheritanceStudent.prototype= new Person();//2)Inhertance throught Object.createStudent.prototype=Object.create(Person);

var stobj=new Student();alert(stobj.sayHi());

We can do inheritance in above two ways.

OOPs in JavaScriptAbstractionAbstraction means hiding the inner implementation details and showing only outer details. To understand Abstraction we need to understand Abstract and Interface concepts from Java. But we don't have any direct Abstract or Interface in JS. Ex. In JQuery we will use

$("#ele")to select select an element with id ele on a web page. Actually this code calls negative JavaScript code document.getElementById("ele");But we don't need to know that we can happy use the $("#ele") without knowing the inner details of the implementation.

OOPs in JavaScriptPolymorphismThe word Polymorphism in OOPs means having more than one form. function Person(age,weight){ this.age = age; this.weight = weight; }

Person.prototype.getInfo = function(){ return "I am " + this.age + " years old " + "and weighs " + this.weight +" kilo."; };

function Employee(age,weight,salary){ this.age = age; this.weight = weight; this.salary = salary; }

Employee.prototype = new Person();

Employee.prototype.getInfo = function(){ return "I am " + this.age + " years old " + "and weighs " + this.weight +" kilo " + "and earns " + this.salary + " dollar."; };

var person = new Person(50,90);var employee = new Employee(43,80,50000);console.log(person.getInfo());console.log(employee.getInfo());

Data Types In JavaScriptData Types• JavaScript variables can hold many data types: numbers, strings, arrays, objects and

more:var length = 16; // Numbervar lastName = "Johnson"; // Stringvar cars = ["Saab", "Volvo", "BMW"]; // Arrayvar x = {firstName:"John", lastName:"Doe"}; // Object

• In JavaScript, a variable without a value, has the value undefined. The typeof is also undefined.

• JavaScript arrays are written with square brackets.Array items are separated by commas. Ex. var cars = ["Saab", "Volvo", "BMW"];

• JavaScript objects are written with curly braces.Object properties are written as name:value pairs, separated by commas.Ex: var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Error Handling In JavaScriptJavaScript try and catchThe try statement allows you to define a block of code to be tested for errors while it is being executed.

The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

Example:<script>try { var aa=name.reaplace(‘m’,’s’);}catch(err) { alert(err.message);}</script>

Improve Performance in JavaScript1.Reduce Activity in LoopsBad:for (i = 0; i < arr.length; i++) {}Better:l = arr.length;for (i = 0; i < l; i++) {}

2.Reduce DOM AccessAccessing the HTML DOM is very slow, compared to other JavaScript statements.If you expect to access a DOM element several times, access it once, and use it as a local variable:

obj = document.getElementById("demo");obj.innerHTML = "Hello";

3.Reduce DOM SizeKeep the number of elements in the HTML DOM small.This will always improve page loading, and speed up rendering (page display), especially on smaller devices.Every attempt to search the DOM (like getElementsByTagName) will benefit from a smaller DOM.

Improve Performance in JavaScript4. Avoid Unnecessary VariablesDon't create new variables if you don't plan to save values.Often you can replace code like this:

var fullName = firstName + " " + lastName;document.getElementById("demo").innerHTML = fullName;

With this:document.getElementById("demo").innerHTML = firstName + " " + lastName

5.Delay JavaScript LoadingPutting your scripts at the bottom of the page body, lets the browser load the page first.While a script is downloading, the browser will not start any other downloads. In addition all parsing and rendering activity might be blocked.

An alternative is to use defer="true" in the script tag. The defer attribute specifies that the script should be executed after the page has finished parsing, but it only works for external scripts.

6.Avoid Using withAvoid using the with keyword. It has a negative effect on speed. It also clutters up JavaScript scopes.The with keyword is not allowed in strict mode.

Q&A

THANK YOU