WebFund 2015W Lecture 5

Topics & Readings

"JavaScript: The Good Parts", Ch. 3-4 objects and functions

Audio & Video

The video and audio are available below (separately, unfortunately):

• Video in MP4
• Audio in AAC (m4a), Part 1 and Part 2

Notes

Running the form-demo application and using the debug module

In the terminal, navigate to the folder containing the demo and type:

> DEBUG= '*' bin/www	To see all debugging messages
> DEBUG= 'form*' bin/www	To see all debugging messages that start with “form”
> cd bin > emacs www &	To view the application code in a text editor.

With the application running, in the address bar of a web browser, type:

http://localhost:3000	To go to the main page of the form-demo
http://localhost:3000/list	To go to a page which shows the form info that has been added to the list

Within the bin/www file

• The line var debug = require('debug')('form-demo:server'); imports the debug module needed to print debug messages.
• The debug() function can be used to print debug messages as seen on the line debug(“Listening on” + bind);
• The scope of var app, var debug and var http is the file.

Within the app.js file

• In the line module.exports = app;, “module” is nowhere else in the file, so it is built in.
• require('…'); loads a file, evaluates it, and expects the file to do something with module.exports.
• A file may only export one object, but that object can hold as much information(attributes) as you want. In this file, app is being exported.
• In a file, everything is private except for the one object you export.

Using Node's built-in debugger

• Node's debugger can be used to debug code by stopping it in the middle of its execution so that you may examine what is happening at a specific point.
• You first place debugger at the points in the code you wish to analyze further.
• Next, run the application in a terminal with the debugger. For an application called app, this would look like node debug app.
• The debugger will stop at the first line of code and enter a REPL (read, evaluate, print loop) in which you can enter any valid JavaScript code, usually to to examine or modify variables.
• Type ctrl+c to break from the loop.
• The program's execution will pause at every point in the code you placed a debugger statement.
• When not in REPL, commands such as s(step in), o(step out) and c(continue) can be used to move through the execution of the program.
• If you choose the continue command, execution will run until a debugger break point is encountered.

Example (within routes/index.js file)

Code snippet:

router.post('/add', function(req, res){
	…
	state.push(obj);
	debugger; 	//*** Put this at the place in the code that you want to be debugged.
	res.render...
});

• debugger tells Node's debugger to stop running code when it reaches that point, so that you can see exactly what is happening at that place.
• To start the debugger, type node debug ./bin/www in the terminal.
• Type ctrl+c to exit the REPL and then type c to continue the execution of the code up to the debugger point.
• In the terminal, the node debugger can be used to change any values in the application.
• When the deugger has hit the break point, type state[0].country = “Canada”;
• In this case you are changing information that has been entered by the user in the form from within the Node debugger.

Jade template language

• The Jade template engine is used in Node.js to render Jade files which are web page templates written in the Jade language.
• The rendering process produces HTML pages from the Jade templates.
• You don’t need to close tags. Eg. label Name.
• But spacing and tabs matter! Ensure that all indentation is correct and never mix spaces and tabs for indentation.

Within the index.js file

• var express = require('express'); is declared at the top of the file. This loads the express module which is then used to set up a router object.
• The different files of an application are linked together through the use of the require call to load the files as modules.
• var router = express.Router(); sets up a router to do routing on incoming requests.
• router.get is a router method used to deal with GET requests.
  • Eg: router.get('/', function(req, res, next)
  • This handles GET requests to the specified path (/) with the specified callback function. The callback function is executed every time a request of this type comes in.
  • The req parameter of the callback function is the request object, res is the response object and next is used to pass the request on to another function.
• router.post is a router method used to deal with POST requests.
  • Eg: router.post('/add', function(req, res)
  • This handles POST requests to the specified path (/add) with the specified callback function.
• router.post means "response render"
  • Eg: res.render('add', {title: 'Person just added', item: obj });
  • This renders the Jade template specified in the first parameter (add).
  • The second parameter is an object passed to the Jade template. This is used to provide dynamic data to the page upon rendering.
  • The Jade templates must be located in the location specified to the application (typically the views directory). This is set in the app.js file along with the line which specifies that Jade is to be used as the rendering engine.

Within views/index.jade file

• index.jade is a Jade template.
• extends layout says that this is a template that extends another template called "layout".
• layout.jade can be extended at the locations in which it has the block keyword followed by a name.
• If a block is undefined in the extending template, that is ok. It will leave that block empty.
• Everything indented under block content will go in the location of the block named content in the extended template.
• Why can we have a block header and a block content?
  • Sometimes you want to add things in different areas of a page. For example in the head of the page, you may want to add things like JavaScript or stylesheets. Then in the body of the page you may want to add other content.
  • In the class example a reference to a style sheet was added in the head.

IMPORTANT NOTES

• Go through this basic form application... for the midterm you should know everything in these files.
• To learn and figure out what things do, start going through it, and try to break it. Eg. Comment out app.use (‘/’, routes); then the 404 error message appears when you try to reload the webpage.