• Like
Web application
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Web application


The insight of Web Development using HTML, Javascript & CSS

The insight of Web Development using HTML, Javascript & CSS

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Web ApplicationHTML, CSS, JS
  • 2. Ingredients of a Web Application● Front End● Back End● APIs● Devices to support● Accessibility**
  • 3. Focus on Front EndWhy? Where ? What? How?
  • 4. Why ? - Naive UserWhere ? - Internet [From Anywhere]What? - Pictures are better way to expresscommunication than letters or journalsHow? - HTML/CSS/JS
  • 5. HTML - StructureCSS - DesignJavascript - 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 , varanything(Native/Host)● There are also these primitivevalue types like Undefined, Null,String, Boolean and Number thatarent objects● JS is Object-oriented language or Prototypebased language
  • 11. "Prototype-based programming is a style ofobject-oriented programming in whichclasses are not present, and behavior reuse(known as inheritance in class-basedlanguages) is accomplished through a processof decorating existing objects which serveas prototypes. This model is also known asclass-less, prototype-oriented, or instance-based programming."
  • 12. Prototype● When you define a function withinJavaScript, it comes with a few pre-definedproperties● The prototype property is initially an emptyobject, 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 orinstantiated, named __proto__● __proto__ property shouldn’t be confusedwith 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 inJavaScript, and, as a result, has its ownproperties (e.g. length and arguments) andmethods (e.g. call and apply). And yes, it,too, has its own prototype object, as well as thesecret __proto__ link."
  • 14. console.log(redbus instanceof Function) //trueconsole.log(redbus.__proto__ == =Function.prototype) // truevar rb = new redbus;console.log(rb__proto__ ===redbus.prototype)// trueconsole.log(rb_proto__===Function.prototype)//false
  • 15. This is known as prototype chain!● Ends when prototype of any object is null● By default Objects prototype is null● Confusing - Yes , Everything is Object andFunction , no classess , no keywords aspublic - private: "yet we challenge to make itObject Oriented"
  • 16. function Animal() {....}Animal.prototype.walk = function(){alert (I am walking Gangnam style!);};function Monkey() {// Call the parent constructorAnimal.call*(this*);}
  • 17. / inherit PersonMonkey.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) // trueconsole.log(vishal instanceof Monkey) // trueIn modern browser this can be achieved by:Monkey.prototype = Object.create(Animal.prototype);
  • 19. Closures.The pattern of public, private, and privilegedmembers is possible because JavaScripthas closures.
  • 20. function Container(param) {function dec() {//uses secret} //privilegedthis.member = param;//publicvar secret = 3;//privatevar that = this;this.service = function () {return dec() ? that.member : null;};//public}
  • 21. Enough OOPS!Hoisting● Function level scoping not block level likeC++, Java, C#● Function declarations and variabledeclarations are always moved (“hoisted”)invisibly to the top of their containing scopeby the JavaScript interpreter. eg.
  • 22. Memory Leaks● garbage collection● mark and sweep algorithm● reason for memory leaks● IE - Ohh yeah :P● Possible scenarios
  • 23. "Best Practices"Good to follow!
  • 24. Coding == Story Telling??language agnostic
  • 25. "A good story is onewhich is easy to conveyand takes less time toconvey"Developers need to convey code toBrowsers and other clients.
  • 26. HTML5 - A bubble?Why Facebook shifted back to nativeapplication as compared to html5 ?
  • 27. Reference● WebPlatform.org● Mozilla Developer Network● Opera developerAvoid w3schools if possible!
  • 28. Assignmenthttp://apps.topcoder.com/wiki/display/~hello-c/Quick-+48+hours%21+-+UI+prototype+-+Customizable+eFlipbook+HTML+Prototype
  • 29. Next session● Performance● Optimization● Algorithms
  • 30. - Thanks@aquarius_vishalhttp://www.vvishal.com