WebFund 2015W Lecture 13: Difference between revisions

From Soma-notes
Created page with "==Video== The video from the lecture given on February 25, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec13-25Feb2015.mp4 is now ava..."
 
LeeCroft (talk | contribs)
 
Line 2: Line 2:


The video from the lecture given on February 25, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec13-25Feb2015.mp4 is now available].
The video from the lecture given on February 25, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec13-25Feb2015.mp4 is now available].
==Notes==
<h3>Midterm solutions</h3>
The solutions for the midterm questions can be found [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/comp2406-midterm-2015w-sol.pdf here].
<h3>Notes on content related to the midterm questions</h3>
<h4>Is JavaScript untyped?</h4>
JavaScript is loosely typed, but referring to JavaScript as dynamically typed is also true. However, JavaScript is not untyped. One language that is untyped is assembly language; there’s just bit manipulations.
<h4>Setting the port</h4>
Port connection variables can be set through the process environment variable or set manually in bin/www file. The default port is 3000, but can be get and set by process.env.port from Node.
Process environment variables are passed every time a new process is spawned. ‘env’ is the keyword for viewing these in terminal. In Node, we can type process.env to view them.
<h4>Calls to <code>router.get()</code> (or any other request type method)</h4>
Calls to methods like <code>router.get()</code> only get called once and returns nothing. The index.js file gets loaded at start up and registers all the <code>.get()</code> and <code>.post()</code> calls with the router. The two parameters, for the route and callback, are only associated with each (GET/POST) call and NO work is done after.
Example:
<code><pre>
router.get('/home', function(){
  //do something
});
</pre></code>
When this gets called during start up, it registers the '/home' route to associate it with <code>function(){ //do something }</code>. Work is only done when the browser sends a GET request for '/home', then the callback function will be triggered. This function can be called as many times as that route is requested. '/home' gets saved in a hashtable in the back end, and each time a request comes in, the URL is matched to find if '/home' exists.
Note that '/' refers to the "top" level of the server, such as a home/base page. Example, '/' would be the google.com home page while routes would be the file class that handles other pages within google.com. Every other page is relative to this base page.
<h4>The request object</h4>
Incoming HTTP headers can only be viewed within the callback functions assigned to the routes recognized by the router since that’s the only place where we have access to the request object (req).
We can extract data from a request in the following ways:
<ul>
  <li><strong>Querystring</strong> - A querystring is a chain of key value pairs passed through the URL starting with a question mark and delimited with the ampersand symbol and can be accessed by <code>req.query</code>. An example of a URL with a querystring is google.com?key=value&key2=value2</li>
  <li><strong>Request parameters</strong> - req.param will extract the value behind a router call such as <code>router.get('/home/:id',function(){...})</code>. req.param.id will extract the id field. The param object comes from the URL and is delimited by semi colon in the back end (router).  </li>
  <li><strong>Request body</strong> - req.body extracts the body from the post. Every input field within an HTML form using a POST method will be put in the body of the request sent to the server. </li>
  <li><strong>Request headers</strong> - req.headers will allow you to access cookies from the client request. Cookies are a part of every request. Be careful not to mix this up with req.session because sessions are server side data. </li>
</ul>
<h4>Jade</h4>
Jade code, creates pure HTML code. Jade is useful because it allows pieces other Jade files be inherited then finally composed and rendered. The <code>res.render()</code> function converts a
Jade file on the server into HTML and sends the result back to the browser.
<h5>Escaping HTML tags</h5>
The != operator allows pure text to be rendered into the HTML. The '<' and '>' characters will be allowed to purely be displayed on the browser. The security implication of this is that you’re giving your users the ability to write HTML in your webpage where you may not want them to.
The = operator escapes the text and converts it into HTML entities. '<' gets converted to '&lt;' which the browser renders as its ASCII representation, the '<'. Using this will prevent unwanted HTML to be inserted inside your webpage. Note: the (=) operator will also cause JavaScript to be evaluated then rendered.
<h4>GET vs POST</h4>
POST – only used to change the state of the application. This is dangerous to cache. An example is web crawling software that tried to hit every GET (but not POSTS) from your web server to read it’s HTML, a misplaced GET could trigger deletes that are irreversible.
GET – cached by the browser, great for bookmarking an item and for retrieving information.
<h3>MongoDB</h3>
<code>db.collection.find(<criteria>, <projection>)</code>
Projection – the fields under projection indicates the attributes you want returned. Suppose we have the following item:
<code>var note = {owner: ‘Anil’, title: ‘My Note’, content: ‘Just everyday things’};</code>
If we give a projection of {owner: ’Anil’} object, then all objects in the Mongo that match attribute owner with the text ‘Anil’ will be returned.
Criteria – this is parameters you give to the query to custom form what exactly you want to find. Some functions you can include here are: count the rows, get everything greater or lesser than, look for more specific things, and other complex query refinement keywords that can be found on the Mongo’s documentation section of their website.

Latest revision as of 00:55, 12 March 2015

Video

The video from the lecture given on February 25, 2015 is now available.

Notes

Midterm solutions

The solutions for the midterm questions can be found here.

Notes on content related to the midterm questions

Is JavaScript untyped?

JavaScript is loosely typed, but referring to JavaScript as dynamically typed is also true. However, JavaScript is not untyped. One language that is untyped is assembly language; there’s just bit manipulations.

Setting the port

Port connection variables can be set through the process environment variable or set manually in bin/www file. The default port is 3000, but can be get and set by process.env.port from Node.

Process environment variables are passed every time a new process is spawned. ‘env’ is the keyword for viewing these in terminal. In Node, we can type process.env to view them.

Calls to router.get() (or any other request type method)

Calls to methods like router.get() only get called once and returns nothing. The index.js file gets loaded at start up and registers all the .get() and .post() calls with the router. The two parameters, for the route and callback, are only associated with each (GET/POST) call and NO work is done after.

Example:

router.get('/home', function(){
   //do something
});

When this gets called during start up, it registers the '/home' route to associate it with function(){ //do something }. Work is only done when the browser sends a GET request for '/home', then the callback function will be triggered. This function can be called as many times as that route is requested. '/home' gets saved in a hashtable in the back end, and each time a request comes in, the URL is matched to find if '/home' exists.

Note that '/' refers to the "top" level of the server, such as a home/base page. Example, '/' would be the google.com home page while routes would be the file class that handles other pages within google.com. Every other page is relative to this base page.

The request object

Incoming HTTP headers can only be viewed within the callback functions assigned to the routes recognized by the router since that’s the only place where we have access to the request object (req).

We can extract data from a request in the following ways:

  • Querystring - A querystring is a chain of key value pairs passed through the URL starting with a question mark and delimited with the ampersand symbol and can be accessed by req.query. An example of a URL with a querystring is google.com?key=value&key2=value2
  • Request parameters - req.param will extract the value behind a router call such as router.get('/home/:id',function(){...}). req.param.id will extract the id field. The param object comes from the URL and is delimited by semi colon in the back end (router).
  • Request body - req.body extracts the body from the post. Every input field within an HTML form using a POST method will be put in the body of the request sent to the server.
  • Request headers - req.headers will allow you to access cookies from the client request. Cookies are a part of every request. Be careful not to mix this up with req.session because sessions are server side data.

Jade

Jade code, creates pure HTML code. Jade is useful because it allows pieces other Jade files be inherited then finally composed and rendered. The res.render() function converts a Jade file on the server into HTML and sends the result back to the browser.

Escaping HTML tags

The != operator allows pure text to be rendered into the HTML. The '<' and '>' characters will be allowed to purely be displayed on the browser. The security implication of this is that you’re giving your users the ability to write HTML in your webpage where you may not want them to.

The = operator escapes the text and converts it into HTML entities. '<' gets converted to '<' which the browser renders as its ASCII representation, the '<'. Using this will prevent unwanted HTML to be inserted inside your webpage. Note: the (=) operator will also cause JavaScript to be evaluated then rendered.

GET vs POST

POST – only used to change the state of the application. This is dangerous to cache. An example is web crawling software that tried to hit every GET (but not POSTS) from your web server to read it’s HTML, a misplaced GET could trigger deletes that are irreversible.

GET – cached by the browser, great for bookmarking an item and for retrieving information.

MongoDB

db.collection.find(<criteria>, <projection>)

Projection – the fields under projection indicates the attributes you want returned. Suppose we have the following item: var note = {owner: ‘Anil’, title: ‘My Note’, content: ‘Just everyday things’};

If we give a projection of {owner: ’Anil’} object, then all objects in the Mongo that match attribute owner with the text ‘Anil’ will be returned.

Criteria – this is parameters you give to the query to custom form what exactly you want to find. Some functions you can include here are: count the rows, get everything greater or lesser than, look for more specific things, and other complex query refinement keywords that can be found on the Mongo’s documentation section of their website.