Learn JS concepts by implementing jQuery

Learn JS concepts by implementing jQuery

• 1.
  Learning JS concepts/techniquesby implementing jQuery A "Re-implement and Learn" workshop. ~ Kushagra Gour, Frontend Developer at Wingify @chinchang457
• 2.
  Whats it about? Understanding concepts and common techniques used in JavaScript by implementing parts of an existing library. 1. Pick a concept 2. Understand the theory. 3. Implement related jQuery code. 4. Back to step 1.
• 3.
  What we’ll learn 1. Prototypes: jQuery core 2. Use of ‘this’: jQuery core 3. Implement $.css()
• 4.
  A Brief on jQuery is JavaScript library that provides utility functions to do: 1. DOM manipulations. 2. Animations. 3. AJAX calls. “consistently across browser”
• 5.
  A Brief on (contd.) So you can do things like this: To remove an element with ID ‘container’ $(‘#container’).remove(); To animate and open the same element $(‘#container’).slideDown();
• 6.
  1. Prototype: Objects - Everything in JavaScript is an Object. - function foo () {} - var obj = {a: 3} (obviously) - var arr = [9, 2, 11] - var str = ‘Just a string’ - Each object inherits Object.
• 7.
  Inheritance This iswhat inheritance means: Object myObj = {} myObj’s prototype is Object.prototype;
• 8.
  Lets create someobjects var obj = Object.create({prop: ‘hello’}); The hidden __proto__ property. “We code...”
• 9.
  Constructor functions ->Classes var instance = new Foo(obj); 1. Create a new object: o. 2. Set o’s prototype equal to Foo’s prototype. 3. Calls Foo with context as o (we’ll see what it means). 3. Set it on instance.
• 10.
  Our jQuery class Properties ● selector ● node $(‘#container’) should give us an instance of our jQuery class with `selector` property as #container and `node` as the actual container object. “We code...”
• 11.
  2. Use of‘this’ - `this` in object methods. - function foo() { return this; } - foo.apply() - foo.call()
• 12.
  Thank you.