Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Object Oriented
JavaScript
29 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
Than...
1
JavaScript
JavaScript
 JavaScript is a high level, dynamic, untyped, and interpreted programming
language. It has been standardized ...
JavaScript
 JavaScript can load content into the document if and when the user needs it,
without reloading the entire pag...
JavaScript
Programming languages used in most popular websites*
Websites
Popularity (Unique
Visitors)
Front-end
(Client Si...
OOPs
OOPs
 Object Oriented programming is a programming style that is associated with the
concept of OBJECTS, having data fiel...
1
OOPs in JavaScript
OOPs in JavaScript
 JavaScript supports Object Oriented Programming but not in the same way as other
OOP languages(C++, p...
OOPs in JavaScript
Object
Any real time entity is considered as an Object. Every Object will have some properties
and func...
OOPs in JavaScript
Class
There are no classes in JavaScript as it is Prototype based language. But we can simulate
the cla...
OOPs in JavaScript
Constructor
Actually Constructor is a concept that comes under Classes. Constructor is used to
assign v...
OOPs in JavaScript
Inheritance (Work around)
Inheritance is a process of getting the properties and function of one class ...
OOPs in JavaScript
Abstraction
Abstraction means hiding the inner implementation details and showing only outer
details. T...
OOPs in JavaScript
Polymorphism
The word Polymorphism in OOPs means having more than one form.
function Person(age,weight)...
Data Types In JavaScript
Data Types
• JavaScript variables can hold many data types: numbers, strings, arrays, objects and...
Error Handling In JavaScript
JavaScript try and catch
The try statement allows you to define a block of code to be tested ...
Improve Performance in JavaScript
1.Reduce Activity in Loops
Bad:
for (i = 0; i < arr.length; i++) {}
Better:
l = arr.leng...
Improve Performance in JavaScript
4. Avoid Unnecessary Variables
Don't create new variables if you don't plan to save valu...
Q&A
THANK YOU
Upcoming SlideShare
Loading in …5
×

Object Oriented Programming In JavaScript

1,314 views

Published on

It will describe oops concept use in JavaScript.

Published in: Technology
  • Be the first to comment

Object Oriented Programming In JavaScript

  1. 1. Object Oriented JavaScript 29 September 2015 Prepare & Presented By Gandhi V
  2. 2. 1 AT A GLANCE JavaScript OOPs OOPs in JavaScript Datatypes Error Handling In JavaScript Improve Performance in JS Q&A Thank You
  3. 3. 1 JavaScript
  4. 4. 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.
  5. 5. 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.
  6. 6. 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,000JavaScript C, C++, Go,Java, Python BigTable, MariaDB YouTube.com 1,000,000,000JavaScript C/C++, Python, Java,Go MySQL, BigTable, MariaDB Facebook.com 900,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,000JavaScript 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
  7. 7. OOPs
  8. 8. 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. Objects 2. Classes 3. Data Abstraction 4. Encapsulation 5. Inheritance 6. Polymorphism 7. 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.
  9. 9. 1 OOPs in JavaScript
  10. 10. 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.
  11. 11. OOPs in JavaScript Object Any 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 literal var obj={}; 2)Creating with Object.create var obj= Object.create(null); 3)Creating using new keyword function Person(){} var obj=new Person();
  12. 12. OOPs in JavaScript Class 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 instance var p=new Person(); alert(p.CompInfo());
  13. 13. OOPs in JavaScript Constructor Actually 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 instance var p=new Person("aravind",23); alert(p.sayHi()); //Creating Second person instance var p=new Person("jon",23); alert(p.sayHi());
  14. 14. OOPs in JavaScript Inheritance (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 Inheritance Student.prototype= new Person(); //2)Inhertance throught Object.create Student.prototype=Object.create(Person); var stobj=new Student(); alert(stobj.sayHi()); We can do inheritance in above two ways.
  15. 15. OOPs in JavaScript Abstraction Abstraction 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.
  16. 16. OOPs in JavaScript Polymorphism The 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());
  17. 17. Data Types In JavaScript Data Types • JavaScript variables can hold many data types: numbers, strings, arrays, objects and more: var length = 16; // Number var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var 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"};
  18. 18. Error Handling In JavaScript JavaScript try and catch The 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>
  19. 19. Improve Performance in JavaScript 1.Reduce Activity in Loops Bad: for (i = 0; i < arr.length; i++) {} Better: l = arr.length; for (i = 0; i < l; i++) {} 2.Reduce DOM Access Accessing 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 Size Keep 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.
  20. 20. Improve Performance in JavaScript 4. Avoid Unnecessary Variables Don'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 Loading Putting 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 with Avoid 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.
  21. 21. Q&A
  22. 22. THANK YOU

×