SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
Web Application
HTML, CSS, JS
Ingredients of a Web Application
●
●
●
●
●

Front End
Back End
APIs
Devices to support
Accessibility**
Focus on Front End
Why? Where ? What? How?
Why ? - Naive User
Where ? - Internet [From Anywhere]
What? - Pictures are better way to express
communication than letters or journals
How? - HTML/CSS/JS
HTML - Structure
CSS - Design
Javascript - Behaviour
How to build a web application
●
●
●
●

Viewports to support
Devices to support
HTML>CSS>JAVASCRIPT
Way to communicate and get data
HTML Basic
●
●
●
●

Significance of doctype
<html>, <head>,<body>
inline/block/table
layouts
CSS Basic
● Selectors
● Box-Model
● Rendering
Javascript Basic
●
●
●
●
●
●

Window, document
Events - important for behaviour
AJAX - Asynchronous **
<noscript>
Security
Debugging - Ahh
● 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
"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 instancebased programming."
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
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."
console.log(redbus instanceof Function) //true
console.log(redbus.__proto__ == =Function.
prototype) // true
var rb = new redbus;
console.log(rb__proto__ ===redbus.prototype)
// true
console.log(rb_proto__===Function.prototype)
//false
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"
function Animal() {....}
Animal.prototype.walk = function(){
alert ('I am walking Gangnam style!');
};
function Monkey() {
// Call the parent constructor
Animal.call*(this*);
}
/ 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();
This is Inheritance !
Can be checked by.
console.log(vishal instanceof Animal) // true
console.log(vishal instanceof Monkey) // true

In modern browser this can be achieved by:
Monkey.prototype = Object.create
(Animal.prototype);
Closures.
The pattern of public, private, and privileged
members is possible because JavaScript
has closures.
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
}
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.
Memory Leaks
● garbage collection
● mark and sweep algorithm
● reason for memory leaks
● IE - Ohh yeah :P
● Possible scenarios
"Best Practices"
Good to follow!
Coding == Story Telling??
language agnostic
"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.
HTML5 - A bubble?
Why Facebook shifted back to native
application as compared to html5 ?
Reference
● WebPlatform.org
● Mozilla Developer Network
● Opera developer

Avoid w3schools if possible!
Next session
● Performance
● Optimization
● Algorithms
- Thanks
@aquarius_vishal
http://www.vvishal.com

Weitere ähnliche Inhalte

Was ist angesagt?

Lets talk-about-js
Lets talk-about-jsLets talk-about-js
Lets talk-about-js
srnftw
 
Découplez votre appli en micro-APIs
Découplez votre appli en micro-APIsDécouplez votre appli en micro-APIs
Découplez votre appli en micro-APIs
Nicolas Blanco
 

Was ist angesagt? (17)

Lets talk-about-js
Lets talk-about-jsLets talk-about-js
Lets talk-about-js
 
Java scriptforjavadev part1
Java scriptforjavadev part1Java scriptforjavadev part1
Java scriptforjavadev part1
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
 
The Transparent Web: Bridging the Chasm in Web Development
The Transparent Web: Bridging the Chasm in Web DevelopmentThe Transparent Web: Bridging the Chasm in Web Development
The Transparent Web: Bridging the Chasm in Web Development
 
All About Sammy
All About SammyAll About Sammy
All About Sammy
 
CoffeeScript - An Introduction
CoffeeScript - An IntroductionCoffeeScript - An Introduction
CoffeeScript - An Introduction
 
Ruby on Rails - UNISO
Ruby on Rails - UNISORuby on Rails - UNISO
Ruby on Rails - UNISO
 
Underscore.js
Underscore.jsUnderscore.js
Underscore.js
 
Clean Code: Stop wasting my time
Clean Code: Stop wasting my timeClean Code: Stop wasting my time
Clean Code: Stop wasting my time
 
Groovy / comparison with java
Groovy / comparison with javaGroovy / comparison with java
Groovy / comparison with java
 
Elixir Study Group Kickoff Meetup
Elixir Study Group Kickoff MeetupElixir Study Group Kickoff Meetup
Elixir Study Group Kickoff Meetup
 
Developing cross platform desktop application with Ruby
Developing cross platform desktop application with RubyDeveloping cross platform desktop application with Ruby
Developing cross platform desktop application with Ruby
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 
Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)
 
Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications
 
Découplez votre appli en micro-APIs
Découplez votre appli en micro-APIsDécouplez votre appli en micro-APIs
Découplez votre appli en micro-APIs
 

Ähnlich wie Web application

Javascript Ks
Javascript KsJavascript Ks
Javascript Ks
ssetem
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
Piyush Katariya
 
Java script object model
Java script object modelJava script object model
Java script object model
James Hsieh
 

Ähnlich wie Web application (20)

"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
Javascript Ks
Javascript KsJavascript Ks
Javascript Ks
 
Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
JavaScript Abstraction
JavaScript AbstractionJavaScript Abstraction
JavaScript Abstraction
 
Let's JavaScript
Let's JavaScriptLet's JavaScript
Let's JavaScript
 
JS Essence
JS EssenceJS Essence
JS Essence
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
 
Testable JavaScript: Application Architecture
Testable JavaScript:  Application ArchitectureTestable JavaScript:  Application Architecture
Testable JavaScript: Application Architecture
 
JavaScript Misunderstood
JavaScript MisunderstoodJavaScript Misunderstood
JavaScript Misunderstood
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
 
Java script object model
Java script object modelJava script object model
Java script object model
 

Kürzlich hochgeladen

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Kürzlich hochgeladen (20)

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Web application

  • 2. Ingredients of a Web Application ● ● ● ● ● Front End Back End APIs Devices to support Accessibility**
  • 3. Focus on Front End Why? Where ? What? How?
  • 4. Why ? - Naive User Where ? - Internet [From Anywhere] What? - Pictures are better way to express communication than letters or journals How? - HTML/CSS/JS
  • 5. HTML - Structure CSS - Design Javascript - Behaviour
  • 6. How to build a web application ● ● ● ● Viewports to support Devices to support HTML>CSS>JAVASCRIPT Way to communicate and get data
  • 7. HTML Basic ● ● ● ● Significance of doctype <html>, <head>,<body> inline/block/table layouts
  • 8. CSS Basic ● Selectors ● Box-Model ● Rendering
  • 9. Javascript Basic ● ● ● ● ● ● Window, document Events - important for behaviour AJAX - Asynchronous ** <noscript> Security Debugging - Ahh
  • 10. ● 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
  • 11. "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 instancebased programming."
  • 12. 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
  • 13. 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."
  • 14. console.log(redbus instanceof Function) //true console.log(redbus.__proto__ == =Function. prototype) // true var rb = new redbus; console.log(rb__proto__ ===redbus.prototype) // true console.log(rb_proto__===Function.prototype) //false
  • 15. 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"
  • 16. function Animal() {....} Animal.prototype.walk = function(){ alert ('I am walking Gangnam style!'); }; function Monkey() { // Call the parent constructor Animal.call*(this*); }
  • 17. / 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();
  • 18. This is Inheritance ! Can be checked by. console.log(vishal instanceof Animal) // true console.log(vishal instanceof Monkey) // true In modern browser this can be achieved by: Monkey.prototype = Object.create (Animal.prototype);
  • 19. Closures. The pattern of public, private, and privileged members is possible because JavaScript has closures.
  • 20. 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 }
  • 21. 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.
  • 22. Memory Leaks ● garbage collection ● mark and sweep algorithm ● reason for memory leaks ● IE - Ohh yeah :P ● Possible scenarios
  • 24. Coding == Story Telling?? language agnostic
  • 25. "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.
  • 26. HTML5 - A bubble? Why Facebook shifted back to native application as compared to html5 ?
  • 27. Reference ● WebPlatform.org ● Mozilla Developer Network ● Opera developer Avoid w3schools if possible!
  • 28. Next session ● Performance ● Optimization ● Algorithms