Embed Size (px)
Citation preview
Introduction to Advanced Javascript
www.collaborationtech.co.inBengaluru INDIA
Presentation By Ramananda M.S Rao
ContentContentOverviewGet StartedOOPsDesign PatternsDocument Object Model(DOM)About Us
www.collaborationtech.co.in
Overview object-oriented JavaScript is somewhat redundant, as the
JavaScript language is completely object-oriented and is impossible to use otherwise.
Objects are the foundation of JavaScript. Virtually everything within the language is an object. Much of the power of the language is derived from this fact.
Design patterns are advanced object-oriented solutions to commonly occurring software problems. Patterns are about reusable designs and interactions of objects.
Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.
www.collaborationtech.co.in
Get Started OOPSExample:console.log('Hi');function Person() {}var gosho = new Person(); // instance of Personvar maria = new Person(); // another instance of Persongosho.name = "George";maria.name = "Maria";console.log(gosho.name); // Georgeconsole.log(maria.name); // Maria
www.collaborationtech.co.in
Design PatternExample:<!DOCTYPE html><html><head><title></title><script>var TeslaModelS = function() { this.numWheels = 4; this.manufacturer = 'Tesla'; this.make = 'Model S';}TeslaModelS.prototype = function() { var go = function() { document.write(“Hi Naveen");}; var stop = function() { document.write("Missing you so much"); }; return { pressBrakePedal: stop,pressGasPedal: go }}();
var test = new TeslaModelS()test.pressGasPedal();test.pressBrakePedal();</script></head><body></body></html>
www.collaborationtech.co.in
Design PatternExample:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title></title><script>
function Shop() { this.construct = function(builder) { builder.step1(); builder.step2(); return builder.get();}}
function CarBuilder() { this.car = null;this.step1 = function() { this.car = new Car(); }; this.step2 = function() { this.car.addParts(); };this.get = function() {return this.car; }; }function TruckBuilder() {this.truck = null;this.step1 = function() { this.truck = new Truck(); };
www.collaborationtech.co.in
Design Patternthis.step2 = function() {this.truck.addParts();};this.get = function() { return this.truck;};}function Car() {this.doors = 0; this.addParts = function() {this.doors = 4;}; this.say = function() { log.add("I am a " + this.doors + "-door car");};} function Truck() {this.doors = 0;this.addParts = function() {this.doors = 2;};this.say = function() {log.add("I am a " + this.doors + "-door truck");};}
www.collaborationtech.co.in
Design Pattern// log helpervar log = (function () {var log = "";return {add: function (msg) { log += msg + "\n"; }, show: function () { alert(log); log = ""; } }})(); function run() { var shop = new Shop(); var carBuilder = new CarBuilder(); var truckBuilder = new TruckBuilder(); var car = shop.construct(carBuilder); var truck = shop.construct(truckBuilder); car.say(); truck.say(); log.show(); } run();</script></head><body></body></html>
www.collaborationtech.co.in
DOM<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Shopping list</title><style type="text/css">p { color: yellow; font-family: "arial", sans-serif; font-size: 1.2em;}body { color: white; background-color: black;}#purchases { border: 1px solid white; background-color: #333; color: #ccc; padding: 1em;}#purchases li { font-weight: bold;}</style> </head> <body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff.</p> <p>This is just a test</p> <ul id="purchases"> <li>A tin of beans</li> <li>Cheese</li> <li>Milk</li> </ul><script type="text/JavaScript">var paras = document.getElementsByTagName("p");for (var i=0; i< paras.length; i++) { var title_text = paras[i].getAttribute("title");if (title_text != null) {alert(title_text); }}</script> </body></html>
www.collaborationtech.co.in
DOM<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title></head><body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose">Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock">Big Ben</a> </li> </ul></body></html>
www.collaborationtech.co.in
Follow us on SocialFacebook: https://www.facebook.com/collaborationtechnologies/Twitter : https://twitter.com/collaboration09Google Plus : https://plus.google.com/100704494006819853579LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545Instagram : https://instagram.com/collaborationtechnologiesYouTube : https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUgTumblr : https://collaborationtechnologies.tumblr.com/Pinterest : https://in.pinterest.com/collaborationte/Skype : facebook:ramananda.rao.7WhatsApp : +91 9886272445
www.collaborationtech.co.in
THANK YOU
About Us
