WebFund 2015W Lecture 6

Audio & Video

The video and audio for the lecture given on January 21, 2015 are available below:

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

Notes

                                                                                          COMP 2406 LECTURE 6 NOTES

                                                                                               JAN. 21ST 2015

• By looking at the form-demo code in chrome source code inspector:

 - What is a form ? 
    a) a way of sending information back to the server, the way to do this is: 
     i) method: either POST or GET requests. The distinction is that the POST is meant for submitting some information to the server whereas the GET is typically just to request a resource. In both cases, the server must provide a response.
     ii) action: the URL that we need to do the method in.

• In the file “index.jade” the word just after the “#” sign is called the ID, so when we look at the code inspector in our browser and see “ <input id= …….. > then we know it’s the one specified in the index.jade file.

• Instead of using the “GUI” of the form on the web, we could make the send request using the code inspector. it will, of course, be a bit more complicated but it can be done in more than a way.

• The code running on your server is controllable by you as an administrator, the problem is in the code running in the web browser of the user himself since we have no way of knowing what’s happening, so we have to make every possible assumption to keep the code running correctly.

• Setting up a button in your page must be inside a form to be able to send a request when click on, with a method that the developer chooses (such as GET) and the action is where we want to be redirected when we click on the button

  - example: <form method= “get” action= “/“>
               <button type= “submit”>Home</button>
             </form>
   - the example above will display a button with the text “Home” on it and will redirect you to the home page once clicked

• What is a state ?

- In the file “index.js”, state is a variable in the file scope, and it’s an empty array.
- In JavaScript, we can push and pop elements to and from the array, respectively. so when we say “state.push(obj)” we’re adding elements of “obj” variable to the array. but this is not really the most effective way to store data.
- The usual way to do it is to store the data in a database since databases are known to be very good in concurrency. That is, we can write multiple processes of the web app at the same time.

• What happens when we run bin/www ?

- bin/www runs, then it runs app.js and then app.js runs index.js.

• Is res.render built-into node ?

- No it’s not.

• We could use res.send and make a webpage, but it won't be a nice looking code. That’s why we will want to use a webpage template engine in order to make our webpage which will make the code look cleaner.

• There are some things we can’t understand when we look at them in the web inspector in our browser. This is okay, because there will always be this level of “magic”.

• Debugger mode lets us print debug messages to the console.
• Node debugger lets us inspect and debug our code at any point we want in the code, we have to require the module in the beginning of the code file, and if not installed, we have to install the npm debugger

                                                                                          End of lecture notes