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

1. Learning JS
concepts/techniques by
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 is what inheritance means:
Object myObj = {}
myObj’s prototype is
Object.prototype;

8. Lets create some objects
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.