WebFund 2016W Lecture 6

Video

The video from the lecture given on January 26, 2016 is now available.

Notes

In-class Notes

Lecture #6
---------

PLAN
* Assignment 2
  - aliases
  - headers
  - other clarifications?

* Objects
  - associative hashes with inheritance
  - prototypes using Object.create
  - "global" object
  - "Object" object
  - Object.prototype
  - hasOwnProperty and Object.hasOwnProperty

* Function calling and "this"
 - functions in regular scope
 - methods
 - constructors with new
 - call/apply
 - functions in global scope

* form demo!

------------------

If a function starts with a capital letter, it is an object
constructor that you call with new.
 - why?  because it keeps JavaScript programmers sort of sane

if (x.a) { blah}     instead do 

if (x.hasOwnProperty(a) && x.a) better, but

if (hasOwnProperty.call(x,a) && x.a) is even better

Why not tinywebserver?

* templates: otherwise, have to manually generate web pages using
  variable data
* routing: otherwise, you'll be using regexp's to match each 
  incoming URL and then call the right function
  

Student Notes

Assignment 2

• Aliases: A fake name used instead of something the real name
  • In the assignment, we take one URL and replace with another URL
• Headers: Headers on the incoming request
  • Stored in a headers object in the request object. The request object has lots of things, one of those is request.headers
  • For the header logging, just iterate through the array of headers to log and check if it is in the request.headers object  

Objects

JSON

• In Javascript, we can define an object using the following syntax:

var x = {a: 5, b: true};

• For JSON, we must use quotes as follows:

{“a”: “5”, “b”: “true”}

Dashes in Attribute Names

//This must be quoted, otherwise it will produce an error
x.anil-memory = “long ago”;

//The correct syntax is shown here. Use this when the attribute name contains irregular characters
x[”anil-memory”] = “long ago”;

//Quotes must also be used when creating an object name with a dash during the definition of an object
var x = {a: 5, b: true, "anil-memory" : "long ago"};

Prototypes

//This is an example of how inheritance works in JavaScript, is uses prototypes instead of being class based
//For another example see: http://robertnyman.com/2008/10/06/javascript-inheritance-how-and-why/)
Object -> [Function Object]
Object.prototype -> {}
Object.prototype.what = “yep”; 
x.what -> yep

• To make use of object prototyping, use Object.create()

//Object.create() is used in a similar fashion to the way "new" is used, it creates a new object.
//(x is going to be prototype for z)
z = Object.create(x); -> {}
z -> {}
z.whoami -> x
z[“anil-memory”] -> ‘long ago’
z.b -> true

• What is "new" for? What does "new" do:

var f = function(a) {this.myval = a};
var g = new f(7);
g -> {myval: 7}

• What actually happened here was “this” became an empty object. When you use "new", "this" becomes and empty object with the prototype of the object it was constructed from. Don’t use "new", too confusing. Use Object.create() instead.
• How to tell if you are supposed to use "new": if a function starts with a capital letter, it is meant to be used as a constructor function. In this case, use "new"

Checking Object Properties

• Method for checking just its own property:

x.hasOwnProperty(“what”); -> false
x.hasOwnProperty(“b”) -> true

• This matters is when users are going to provide the keys for the object

Use of "this"

• When used from within a call to a method, this refers to the object that the method belongs to

var f = function(p) { console.log("this.whoami = " + this.whoami); }
f -> [Function]
x.f = f; -> [Function]
x.f(); -> this.whoami = x;

var y = {p:2, whoami: “y”};
y.f = f;
y.f(); -> this.whoami = y

• The call method calls a function using the argument provided as the value of this
• Example: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/call

var k = {k:7, whoami: “k”};
f.call(k); -> this.whoami = k

• When this is used in a function, it refers to the global object

var f = function(a) {this.myval = a};
f -> [Function]
var a = {};
a.f = f;
a.f(3);
a -> {f: [Function], myval: 3}
f(5); -> undefined

• The last line of the code above sets the myval attribute of the global object to 5.
• When used not in context of an object, you get the global object (which is almost always what you do NOT want to do)

Form Demo

Setup

• We will be using the Express framework to set up a web application
• In a terminal, enter:

mkdir testapp
cd testapp
sudo npm install express-generator –g
express –version
express
npm install

• npm is the Node packet manager
  • "npm install" installs all the needed files in order for programs to run, it knows how to do this because the dependencies of the application are stored inside the package.json file
• To run the application, you can enter bin/www

Folder Structure

• Routes: code that’s going to run for different incoming requests
  • This code will be in Routes/index.js
• Views: templates
  • We will be working with Jade templates
• Routes/index.js :This directs which scripts to be called for when you go to certain pages.
• bin: this contains the startup script for the server
• Public: This is where all of the static resources are stored
  • We can put HTML, stylesheets, images, etc in here