Download - Introduction to Advanced Javascript
![Page 1: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/1.jpg)
Introduction to Advanced Javascript
www.collaborationtech.co.inBengaluru INDIA
Presentation By Ramananda M.S Rao
![Page 2: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/2.jpg)
ContentContentOverviewGet StartedOOPsDesign PatternsDocument Object Model(DOM)About Us
www.collaborationtech.co.in
![Page 3: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Advanced Javascript](https://reader036.vdocument.in/reader036/viewer/2022081507/58a29ad81a28ab36508b7609/html5/thumbnails/12.jpg)
About Us