Develope a Library with Prototype:

JS 102

Leave if you already know the folowing

Know how to use Prototype
Have already read Eloquent Javascript
Know Node js and can link libraries
Can already npm publish

Aims

What is an object?
Create a function
Introduction to Prototype Pattern
Create a simple library
Mimic jQuery

Demographic

Junior web devs

Acknowledgements

Vladimir Popov vlad@seedalpha.net
TJ github
Segment.io github
Wearefractal github

Primer: Everything is an object in javascript.

Case Study: What is an object

var obj = {}

Example:

var person = {
    name: 'Denis',
    age:  27
}

console.log(person)
console.log(person.name, person.age)

But what if you want to create multiple names and ages?

Create a function

// Lets Create the Person function
var Person = function(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function(msg){
    console.log("Hello my name is", name);  
  }
}

// Let's init some people
var denis = new Person('denis', 27);
var karen = new Person('karen', 21);
var woco  = new Person('women who code', 1);

// Let us call that greet function
denis.greet();
karen.greet();
woco.greet();

But what if I want to change the greet method on the fly?

denis.greet = function(msg) {
  console.log(this.name, 'said:', msg);
}

// Let us call that greet function
denis.greet();
karen.greet();
woco.greet();

What if I want to create a new method on the fly?

// create a new method on the fly...
denis.groot = function() {
  console.log('I am', this.name);
}

denis.groot();

Lets look at the denis obj now

console.log(denis);

Dope Right?

Ok that's great, but I don't want to create methods on the fly?

Introduction to Prototype

Let's create a Person function

// Constructor
var Person = function(name, age) {
  this.name = name;
  this.age = age;
}

Prototype Magic

Person.prototype.greet = function() {
  console.log(this.name, 'said Hello');
}

Person.prototype.groot = function() {
  console.log(this.name, 'said: I am Groot');
}

var denis = new Person('denis', 21);
denis.greet();
denis.groot();

So we've created groot and greet methods for Person...

What if we create vlad as a `new Person`?

var vlad = new Person('vlad', 28);
vlad.greet();

What just happened?

The methods we created are bound to the Person object, so whenever we create a new person, they 'inherit' the methods from Person.

Note: inheritance here is referred as 'prototypical inheritance'

Midway summary

We created a function, with methods (that took no arguments)

Let's create a method that takes an argument

Person.prototype.levelup = function(level) {
  this.level += level;
}

But is wrong with this?

Aiyo!!!

`Level` is not defined in `Person!`

Solution

Person.prototype.levelup = function(level) {
  if (!this.level) {
    this.level = level;  
  } else {
    this.level += level;
  }
}

denis.levelup(1)
console.log(denis.level);

Question

Can i combine a refer a mehod from within a prototypical function?

YES! Lets Create it~

// checkLevel method
Person.prototype.checkLevel = function() {
  if (this.level >= 9000) {
    console.log(this.name, 'is over 9000!!!');
  } else {
    console.log(this.name, 'is level:', this.level);
  }
}

denis.checkLevel();

Add checkLevel method to levelUp

Person.prototype.levelup = function(level) {
  if (!this.level) {
    this.level = level;  
  } else {
    this.level += level;
    this.checklevel();
  }
}

denis.levelup(9000);

Let's use what we've done to create a Person library

var Person = function(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(this.name, 'said Hello');
}

Person.prototype.groot = function() {
  console.log(this.name, 'said: I am Groot');
}

Person.prototype.levelup = function(level) {
  if (!this.level) {
    this.level = level;  
  } else {
    this.level += level;
    this.checklevel();
  }
}

Person.prototype.checkLevel = function() {
  if (this.level >= 9000) {
    console.log(this.name, 'is over 9000!!!');
  } else {
    console.log(this.name, 'is level:', this.level);
  }
}

Congratulations

You've created some methods using prototype
We've created an constructor - with binding properties
Created methods for that object
Referred other predefined methods within a method

Ultimate Case study:

Create functions similar to jQuery

We all love $('body'); right?
Why don't we create it?

function $(el){
  return document.querySelector(el);
}

Let's go to google.com

function $(el){
  return document.querySelector(el);
}

$('#hplogo');

# Develope a Library with Prototype:

# JS 102

# Leave if you already know the folowing

# Aims

# Demographic

# Acknowledgements

# Primer: Everything is an object in javascript.

# Case Study: What is an object

# Example:

# But what if you want to create multiple names and ages?

# Create a function

# But what if I want to change the greet method on the fly?

# What if I want to create a new method on the fly?

# Lets look at the denis obj now

# Dope Right?

# Ok that's great, but I don't want to create methods on the fly?

# Introduction to Prototype

# Let's create a Person function

# Prototype Magic

# So we've created groot and greet methods for Person...

# What if we create vlad as a new Person?

# What just happened?

# Midway summary

# Let's create a method that takes an argument

# But is wrong with this?

# Aiyo!!!

#Level is not defined in Person!

# Solution

# Question

# Can i combine a refer a mehod from within a prototypical function?

# YES! Lets Create it~

# Add checkLevel method to levelUp

# Let's use what we've done to create a Person library

# Congratulations

# Ultimate Case study:

# Create functions similar to jQuery

# TADA!

# Reading:

# if you want more info of how to build jQuery

# Want to advance your JS?

# Author

# Closing Tips