js course

A crash course on building web sites and web applications with pure JavaScript

WHo Are We?

What will be covered

What will not be covered

Basic JS

Javascript

Javascript is not a weaker form of c#

Object === dictionary

Basic object Defintion

    
    "use strict"
    
    var o = {};
    o['field 1'] = [1, 2, 3];
    
    o.field2 = "a";
    
    var o2 = {
       'field 1': [1, 2, 3]
       print: function() {
         console.log(arguments);
       }
    };
    

let's see it in action

Array === list

var arr = [1, 2, 3, new Date(), 'wtf?'];

Arrays are just dynamic lists. They serve as a powerful container. Basic functionality of list, queue and stack.

- Prefer using the [ ] notation to the new Array() directive.

var a = [];
a[3] = 1;
console.log(a[0]); // undefined

Functions are first class citizens

function add(a,b) {
  return a+b;
} // no semicolon in this case

var add = function(a,b) { // anonymous like function
  return a+b;
}; // var always followed by a semicolon

Functions as a scope unit

// global scope
var a = 1;

function someFunc() {
  // someFunc scope
  var a = 2; // hides the outside variable
}

Functions can be used for local scoping

// a generator example
var adderGenerator = function(increment) {
  return function(num) { return num + increment; };
}

JavaScript can play most of the functional programming games: currying, generators, compositions, etc ...

Constructor FUNCTIONS

function MyClass() {
  // initialize the instance
  this.age = 15;
  this.name = 'bill';
}

var myInstance = new MyClass(); 

• Sets the object prototype
• The convention is to Capitalize constructor names.
• The return value will be a new instance.
• More about the new keyword on day 2.

Execution Contex

Scopes

var a = 'I am on the global scope";

b = 'look ma no var'; // on the global scope as well (bad practice)

Functions as scopes

var getCustomer = function(id, onReady) {
  // promise is only known in the function scope
  var promise = $.get('/customers/' + id);
  // the customer object refers to the local function scope
  // this lets keep the customer object clean as possible
  var customer = {
    id: id,
    isReady: function() { return promise.isResolved(); }
  };

  promise.done(function(data) {
    var o = JSON.parse(data);

    for(var key in data) {
      customer[key] = o[key];
    }

    onReady(customer);
    // remove reference to the promise object
    customer.isReady = function() { return true; };
    promise = null;
  });

  return customer;
}

Self INVOKING functions 

// --- global scope ---

(function() { 
  // --- private scope ---
  function myHiddenVoodoo() { ... }

  var local = 1;

  var myAmazingClass = { 
    magic: function() { return myHiddenVoodoo() + local; },
    ...
  }
  this.Amazing = myAmazingClass; // gives access to the inner scope
}).call(this);

what is this  ?

var name = 'bill';

function sayHello() {
  console.log('hello' + this.name);
}

sayHello(); // this will be the global context
sayHello.call({ name: 'john' }); // john
sayHello.apply({ name: 'jack' }); // jack

How to avoid shifting context bugs

var dataModule = {
  limit: 5,
  get: function(cb) {
    var self = this; // get a hold of the 'right' this
    $.get('/records').done(function(data) {
      // this is pointing to the ajax request object
      var records = JSON.parse(data);
      records.splice(self.limit);
      return cb(records);
    });
  }
};

Resources

Web UX Primer

Separation of Concerns

Web Page Loading Sequence

Css - Classes vs. IDs

Style tags

If you don't have to don't use them

Multiple browser support

What about ie8 and ie9?

jQuery

use it

Advanced Css

Use consistent semantic styles (button, link, headings)

Advanced CSS

Advanced CSS

<div id="loginAlert" class="alert mid-size critical">
You must log in first
</div>

Choose a css officer

We are engineers most of us suck at design.
Accept it.

Playing it like the pros

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Resources

First day EXERCISE

1. Install node.js 
   
2. Create a basic webserver that can return files stored in a public directory.
   
3. Extend the server to return the following json:
   

[ 
 { "imageUrl": "img/default.png", description: "item 1" },
 { "imageUrl": "img/default.png", description: "item 2" },
 { "imageUrl": "img/default.png", description: "item 3" },
 { "imageUrl": "img/default.png", description: "item 4" },
 { "imageUrl": "img/default.png", description: "item 5" },
 { "imageUrl": "img/default.png", description: "item 6" },
]

     when accessing /data

4. Create an index.html + mainViewModel.js to present  
     the items in a responsive list.
      

A simple server in node.js

var http = require('http');
http.createServer(function(req, res) {
  console.log('[%s] %s', req.method, req.url);
  res.end('Yo node!');
}).listen(3333);

console.log('listening on port 3333');

Advanced JavaScript

Yosef's evolution

JavaScript

Cinderella

functions

oop

Pseudo Classical Inheritance

function Constructor() {
  this.member = initializer;
}

Constructor.prototype.aMethod = function(a, b) {
  … do something
};

var newObject = new Constructor();

Prototypes

Prototypal inheritance

var derived = Object.create(base);

Functional style NO

Functional STYLE YES

example

Zoo using functional inheritance

MIXIN

function extend(destination, source) {
  for (var k in source) {
    if (source.hasOwnProperty(k)) {
      destination[k] = source[k];
    }
  }
  return destination; 
}

var Module = {
  get: function() { ... },
  update: function() { ... },
}

var PersonModule = extend({ delete: function() {} }, Module);

Modules

// all module dependencies needs to be loaded before hand
(function() {
  // get the namespace object
  var ns = this.ModuleNameSpace || {};

  // define the module  
  var module = {
     // define your module interface
     
  }

  // alter the global context
  ns.MyModule = module;
  this.ModuleNameSpace = ns;
}).call(this);

Modules - requirejs

//Calling define with module ID, dependency array, and factory function
define('myModule', ['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
});

Async Programming in JS

doSomething(param, function(err, result) {
 … continue upon completion
});

example

serve file

Async module

promises pattern

A simple example

var getJSON = function(url) {
  var promise = new RSVP.Promise();

  var client = new XMLHTTPRequest();
  client.open("GET", url);
  client.onreadystatechange = handler;
  client.responseType = "json";
  client.setRequestHeader("Accept", "application/json");

  function handler() {
    if (this.readyState === this.DONE) {
      if (this.status === 200) { promise.resolve(this.response); }
      else { promise.reject(this); }
    }
  };

  return promise;
};

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // proceed with access to posts and comments
}).then(null, function(error) {
  // handle errors in either of the two requests
});

Underscore.js

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...
_.each({one : 1, two : 2, three : 3}, function(num, key){ alert(num); });
=> alerts each number in turn...

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]

Web application development philosophy

Imagine you are building a mobile app instead of a web app

MS pure options

ms supported options

Which is the best for you?

Scrapbook as an example

Advantages