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,256 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,256
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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.

×