Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Learning JS 
concepts/techniques by 
implementing jQuery 
A "Re-implement and Learn" workshop. 
~ Kushagra Gour, Frontend ...
Whats it about? 
Understanding concepts and common 
techniques used in JavaScript by implementing 
parts of an existing li...
What we’ll learn 
1. Prototypes: jQuery core 
2. Use of ‘this’: jQuery core 
3. Implement $.css()
A Brief on 
jQuery is JavaScript library that provides utility 
functions to do: 
1. DOM manipulations. 
2. Animations. 
3...
A Brief on 
(contd.) 
So you can do things like this: 
To remove an element with ID ‘container’ 
$(‘#container’).remove();...
1. Prototype: Objects 
- Everything in JavaScript is an Object. 
- function foo () {} 
- var obj = {a: 3} (obviously) 
- v...
Inheritance 
This is what inheritance means: 
Object myObj = {} 
myObj’s prototype is 
Object.prototype;
Lets create some objects 
var obj = Object.create({prop: ‘hello’}); 
The hidden __proto__ property. 
“We code...”
Constructor functions -> Classes 
var instance = new Foo(obj); 
1. Create a new object: o. 
2. Set o’s prototype equal to ...
Our jQuery class 
Properties 
● selector 
● node 
$(‘#container’) 
should give us an instance of our jQuery class 
with `s...
2. Use of ‘this’ 
- `this` in object methods. 
- function foo() { return this; } 
- foo.apply() 
- foo.call()
Thank you.
Upcoming SlideShare
Loading in …5
×

Learn JS concepts by implementing jQuery

1,370 views

Published on

This is a presentation for a workshop on understanding common JavaScript concepts and techniques by actually implementing a bare basic jQuery library of own.

Published in: Engineering
  • Be the first to comment

Learn JS concepts by implementing jQuery

  1. 1. Learning JS concepts/techniques by implementing jQuery A "Re-implement and Learn" workshop. ~ Kushagra Gour, Frontend Developer at Wingify @chinchang457
  2. 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. 3. What we’ll learn 1. Prototypes: jQuery core 2. Use of ‘this’: jQuery core 3. Implement $.css()
  4. 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. 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. 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. 7. Inheritance This is what inheritance means: Object myObj = {} myObj’s prototype is Object.prototype;
  8. 8. Lets create some objects var obj = Object.create({prop: ‘hello’}); The hidden __proto__ property. “We code...”
  9. 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. 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. 11. 2. Use of ‘this’ - `this` in object methods. - function foo() { return this; } - foo.apply() - foo.call()
  12. 12. Thank you.

×