web application
TRANSCRIPT
![Page 1: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/1.jpg)
Web ApplicationHTML, CSS, JS
![Page 2: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/2.jpg)
Ingredients of a Web Application
● Front End● Back End● APIs● Devices to support● Accessibility**
![Page 3: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/3.jpg)
Focus on Front EndWhy? Where ? What? How?
![Page 4: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/4.jpg)
Why ? - Naive User Where ? - Internet [From Anywhere]What? - Pictures are better way to express communication than letters or journalsHow? - HTML/CSS/JS
![Page 5: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/5.jpg)
HTML - StructureCSS - Design
Javascript - Behaviour
![Page 6: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/6.jpg)
How to build a web application
● Viewports to support● Devices to support● HTML>CSS>JAVASCRIPT● Way to communicate and get data
![Page 7: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/7.jpg)
HTML Basic
● Significance of doctype● <html>, <head>,<body>● inline/block/table● layouts
![Page 8: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/8.jpg)
CSS Basic
● Selectors● Box-Model● Rendering
![Page 9: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/9.jpg)
Javascript Basic
● Window, document● Events - important for behaviour● AJAX - Asynchronous **● <noscript>● Security● Debugging - Ahh
![Page 10: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/10.jpg)
● Everything is a Object eg function , var anything(Native/Host)
● There are also these primitive value types like Undefined, Null, String, Boolean and Number that aren't objects
● JS is Object-oriented language or Prototype based language
![Page 11: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/11.jpg)
"Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes. This model is also known as class-less, prototype-oriented, or instance-based programming."
![Page 12: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/12.jpg)
Prototype
● When you define a function within JavaScript, it comes with a few pre-defined properties
● The prototype property is initially an empty object, and can have members added to it – as you would any other object.
● Every object within JavaScript has a “secret” property added to it when it is defined or instantiated, named __proto__
● __proto__ property shouldn’t be confused with an object’s prototype
![Page 13: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/13.jpg)
var redbus = function(address){this.address = "honolulu";return this.address;
}console.log(typeof redbus) //FUNCTION
"Function is a predefined object in JavaScript, and, as a result, has its own properties (e.g. length and arguments) and methods (e.g. call and apply). And yes, it, too, has its own prototype object, as well as the secret __proto__ link."
![Page 14: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/14.jpg)
console.log(redbus instanceof Function) //trueconsole.log(redbus.__proto__ == =Function.prototype) // true
var rb = new redbus;console.log(rb__proto__ ===redbus.prototype)// trueconsole.log(rb_proto__===Function.prototype)//false
![Page 15: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/15.jpg)
This is known as prototype chain!
● Ends when prototype of any object is null● By default Object's prototype is null● Confusing - Yes , Everything is Object and
Function , no classess , no keywords as public - private: "yet we challenge to make it Object Oriented"
![Page 16: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/16.jpg)
function Animal() {....}
Animal.prototype.walk = function(){
alert ('I am walking Gangnam style!');
};
function Monkey() {
// Call the parent constructor
Animal.call*(this*);
}
![Page 17: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/17.jpg)
/ inherit Person
Monkey.prototype = new Animal();
Monkey.prototype.constructor = Monkey;
Monkey.prototype.sing = function(){
alert('Sing like OM');
}
var vishal = new Monkey();
vishal.walk(); vishal.sing();
![Page 18: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/18.jpg)
This is Inheritance !
Can be checked by.console.log(vishal instanceof Animal) // trueconsole.log(vishal instanceof Monkey) // true
In modern browser this can be achieved by:Monkey.prototype = Object.create
(Animal.prototype);
![Page 19: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/19.jpg)
Closures.
The pattern of public, private, and privileged members is possible because JavaScript
has closures.
![Page 20: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/20.jpg)
function Container(param) {
function dec() {//uses secret
} //privileged
this.member = param;//public var secret = 3;//private var that = this;
this.service = function () { return dec() ? that.member : null; };//public}
![Page 21: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/21.jpg)
Enough OOPS!
Hoisting● Function level scoping not block level like
C++, Java, C#● Function declarations and variable
declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. eg.
![Page 22: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/22.jpg)
Memory Leaks● garbage collection● mark and sweep algorithm● reason for memory leaks● IE - Ohh yeah :P● Possible scenarios
![Page 23: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/23.jpg)
"Best Practices"Good to follow!
![Page 24: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/24.jpg)
Coding == Story Telling??language agnostic
![Page 25: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/25.jpg)
"A good story is one which is easy to convey and takes less time to
convey" Developers need to convey code to
Browsers and other clients.
![Page 26: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/26.jpg)
HTML5 - A bubble?Why Facebook shifted back to native application as compared to html5 ?
![Page 27: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/27.jpg)
Reference
● WebPlatform.org● Mozilla Developer Network● Opera developer
Avoid w3schools if possible!
![Page 28: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/28.jpg)
Next session
● Performance● Optimization● Algorithms
![Page 29: Web application](https://reader033.vdocument.in/reader033/viewer/2022060110/555c229ed8b42a09438b4a57/html5/thumbnails/29.jpg)
- Thanks@aquarius_vishal
http://www.vvishal.com