Javascript Essentials

Part I

  • Javascript is (basically) untyped
  • Object oriented
  • Has first-class functions
  • Browsers have interpreter for JS that starts when you code the script tag in HTML
  • 4 ways to output with JS: write directly to webpage, make a pop up, write to debug console (console.log), modify HTML
function f(input){
    input = 17;
}
var num = 0;
f(num);
console.log(num); //0 so primitive types passed by value
---
function f(input) {
    input.first = "Sam";
    input.last = "V";
}

var professor = {first:"Bob", last:B"};
f(professor);
console.log(professor);
//Object is Sam V so objects passed by reference
---
function f(input){
    input = {first:"Sam", last:"V"};
}
var professor = {first:"Bob", last:B"};
f(professor);
console.log(professor); 
//Object is the same, Bob B. Because references passed by value

Some Interesting Tidbits for JS Newbs

  • == does type coercion. If you want value AND type, use ===
  • Functions create scope. Blocks don't!
  • Primitive types passed by value. Objects, references passed by value
  • Everything is floats
  • If you don't use var, variables may become global. So "use strict"; at top of programs

Functions Are first class: created/destroyed, passed as inputs and outputs

  • Can be methods of objects
  • Constructor-style invoked with new
    var List = function(v, n){
  this.v = v;
  this.n = n;
}
var1 = new List(1, 2);
  • We can define inner functions within outer functions. These inner function has access to the outer functions' variables. This is defined as closure
  • We can use closures for encapsulation in JS by returning objects with functions inside a larger function. This uses the scope of functions to mimic a class

Part II

  • Functions are first class objects in Javascript

    Prototyping

  • Describes what properties an object has
  • Imagine as: every object has a dict with a pointer to the original object and then the prototype
  • Unlike objects, primitive types (obviously?) don't have prototypes
  • You can add a property to an existing instance of an object
function Person(first, last){
    this.first = first;
    this.last = last;
};

console.log(sam.name()); //Error

var sam = new Person("Sam", "V");

Person.prototype.name = function(){
    return this.first + " " + this.last;
}

console.log(sam.name()); //Sam V

Differential Inheritance

  • Only modify what's different in inherited objects

DOM: Document Object Model

  • How Javascript interacts with the browser
  • JS can read it to see what's there, and write to it to change the screen
  • Event driven programming: flow of program determined by events
  • A main loop listens for events and triggers a callback function

Event Queue

  • In JS, messages (function objects) are stored in a queue and taken out and processed when the stack is empty
  • You can schedule events on the queue for a later time, but the default scheduling for messages is dependent on when the action to enqueue them was
console.log('this is the start'); 

function callback1() {
console.log('this is a msg from callback1'); }

setTimeout(callback1, 1000); //1s console.log('this is just a message'); 

function callback2() {
console.log('this is a msg from callback2'); }

setTimeout(callback2, 2000);//2s console.log('thisisthe end');

output:
this is the start
this is just a message
this is the end
this is a msg from callback1 this is a msg from callback2
  • You can couple events in HTML with JS functions
  • node.js: framework for writing servers. JS running on a server
  • Chrome debugger is your friend for project 3
  • jQuery is JS library, like STL for C++

AJAX and Web Architecture

  • Client contacting server asynchronously is AJAX
  • Needed when you have distributed systems where there is some latency
  • Use JS events on the client side to trigger queries to the server
  • We build an HTTP request in JS script, send it, and wait for the response that the event was triggered
  • Then we send the response from the server

RESTful APIs

  • Uses HTTP as "language" to invoke remote services
  • No memory, each request is self contained
  • Data returned as XML or JSON usually

AJAX: Asynchronous Javascript and XML

(or JSON, plain text, etc.)

  • Register a callback function on the event queue
  • Tell open to use an asynchronous request
  • Eliminates blocking on client side

Continuation Passing Style

  • For programming non-blocking systems

  • To speed up server once your client is on AJAX, you need multiple threads to handle the different messages (functions) being called

  • jQuery abstracts a lot of code to use AJAX and makes it easier