Introduction to Advanced Javascript

Introduction to Advanced Javascript
www.collaborationtech.co.in
Bengaluru INDIA
Presentation By
Ramananda M.S Rao

Content
Content
Overview
Get Started
OOPs
Design Patterns
Document Object Model(DOM)
About Us

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.

Get Started OOPS
Example:
console.log('Hi');
function Person() {}
var gosho = new Person(); // instance of Person
var maria = new Person(); // another instance of Person
gosho.name = "George";
maria.name = "Maria";
console.log(gosho.name); // George
console.log(maria.name); // Maria

Design Pattern
Example:
<!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>

Design Pattern
Example:
<!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(); };

Design Pattern
this.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");
};}

Design Pattern
// log helper
var 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>

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>

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>

Follow us on Social
Facebook: https://www.facebook.com/collaborationtechnologies/
Twitter : https://twitter.com/collaboration09
Google Plus : https://plus.google.com/100704494006819853579
LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545
Instagram : https://instagram.com/collaborationtechnologies
YouTube :
https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg
Tumblr : https://collaborationtechnologies.tumblr.com/
Pinterest : https://in.pinterest.com/collaborationte/
Skype : facebook:ramananda.rao.7
WhatsApp : +91 9886272445
THANK YOU

Introduction to Advanced Javascript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to Advanced Javascript (20)

More from Collaboration Technologies (17)

Recently uploaded (20)

Introduction to Advanced Javascript