Web application
•
3 gostaram•1,016 visualizações
The insight of Web Development using HTML, Javascript & CSS
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Web application
Semelhante a Web application (20)
Mais de Om Vikram Thapa
Mais de Om Vikram Thapa (20)
Último
Último (20)
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 instance- based 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
- 23. "Best Practices" Good to follow!
- 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!
- 29. Next session ● Performance ● Optimization ● Algorithms