WebFund 2015W Final Exam Review - Revision history

LeeCroft: /* Notes */

2015-04-11T22:54:05Z

Notes

← Older revision		Revision as of 22:54, 11 April 2015
Line 7:		Line 7:

	The final exam will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/exam-notes.zip exam-notes], a simplified version of the solutions to tls-notes from Assignment 10.		The final exam will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/exam-notes.zip exam-notes], a simplified version of the solutions to tls-notes from Assignment 10.

			There will be very little in terms of code that you must write on the exam, no more than a few lines for small implementations. While your answers can be pure code, it is better to provide written answers with high level explanations.

			Review of the different contexts for functions (the main difference between these contexts is the use of the keyword 'this'):
			<ul>
			<li>Regular function call - keyword 'this' refers to the global object</li>
			<li>Method call - keyword 'this' refers to the object for which the method was called</li>
			<li>Constructor call - keyword 'this' refers to the object being constructed</li>
			<li>Apply call - keyword 'this' refers to the parameter supplied to the <code>apply()</code> call indicating what the function is being applied to</li>
			</ul>

			<h3>Differentiation between client side and server side</h3>
			On the client, HTML is rendered by the browser and used to construct the DOM. JavaScript can also be provided to be run inside the browser and interact with the DOM.

			On the server, JavaScript is run as an application to provided all necessary server functionality.

			<h3>Communications between client and server</h3>
			The two sides (client and server) talk to each other using HTTP. HTTP is built on top of other technologies but it is essentially just structured data being sent back and forth.

			A server cannot initiate communication by sending a response to a client. The client must first send a request to the server, the server may then respond to that request. Requests are sent to a server due to actions taken by a client such as trying to load a page or a user clicking on a button which submits a form. A response typically contains HTML, CSS or JavaScript code. A response may cause subsequent requests to be made in order to obtain linked resources (images, stylesheets, scripts, etc).

			<h3>Older servers (static servers)</h3>
			On an older web server, you would have files such as HTML documents, images, stylesheets, etc. These are static resources which could be served 'as is' by the server. A new web server such as one implemented in Node can easily serve resources as a static web server but its main benefit is the ability to run additional code when a request comes in. JavaScript can be used in this context to generate HTML or do many other things.

			<h3>JavaScript execution environments</h3>
			Node.js (run on the server) is an execution environment for JavaScript. Similarly, there is an execution environment for JavaScript in web browsers to allow for the client to run JavaScript code. These executions environments have differences between them. The browser environment is sandboxed so that it cannot access the rest of the computer (file I/O, networking).

			JavaScript run in the browser is meant for two main purposes:
			<ul>
			<li>Manipulation of the DOM - Changing the structure of the page, updating the interface, etc...</li>
			<li>Sending AJAX requests (asynchronous GET and POST requests) - This allows the client to communicate with the server in the background, bypassing the need to use HTML elements to trigger communications as well as the need to reload a page when receiving data.</li>
			</ul>

			<h3>Exam code</h3>
			<h4>Differentiation between client side code and server side code</h4>
			<ul>
			<li>The code in index.js is all run on the server.</li>
			<li>Anything in the public folder is sent directly to the client. Scripts and HTML code sent from this folder are run on the client.</li>
			<li>Jade templates are rendered in HTML on the server and then sent to the client to have the HTML rendered by the browser.</li>
			</ul>

			<h4>What does register.js do?</h4>
			First, recall that $ refers to jQuery, it represents the jQuery object. By providing a single parameter to jQuery as a function, we are defining an on-load function. This means that the function is run once the page is fully loaded. The first line in this function uses jQuery to find an HTML element with an ID of 'register' and calls to <code>on()</code> method of the element to define a function for a click event. The function finds a form element in the DOM and changes its action from /login to /register and then submits the form.

			<h3>Other notes and tips</h3>
			You must fully understand the definition of routes that occurs in index.js. The router methods such a <code>get()</code> and <code>post()</code> are run only once when the index.js file is run during the startup of the server. These methods register a callback function for the specified route so that whenever a request comes to the server for that route, the callback function is run. The callback function is not run until such a request comes in and so it could potentially never be run if a request never comes in for that route.

			It is important to recognize that functions are treated as first class objects in JavaScript. They can be treated just as other objects can, meaning that they can even be used as parameters for another function.

			Notice that the exam code does not use bcrypt. The passwords are stored in plain text. This makes the code much simpler but it is a very bad practice. This makes your database very vulnerable as all passwords are completely visible in plain text if anyone happens to get access to the database. You should never do this.

			Recall that hashing and encryption are different. With encryption, you can decrypt the data back to its original format if you have the proper key. With hashing, you are producing a fixed length representation of the data based on a hashing function. You do not expect to be able to retrieve data that has been hashed, only verify that something matches what you expect.

			Expect questions on the exam about what causes certain requests and what type of response you would expect the server to produce and why.

	==Code==		==Code==

Soma: /* Audio */

2015-04-10T19:55:17Z

Audio

← Older revision		Revision as of 19:55, 10 April 2015
Line 2:		Line 2:
	==Audio==		==Audio==

	The audio from the exam review given on April 10, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-examreview-10Apr2015.m4a is now available].		The audio from the exam review given on April 10, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-examreview-10Apr2015.m4a is now available]. (Note: the file does not play in Firefox unfortunately.)

	==Notes==		==Notes==

Soma at 19:54, 10 April 2015

2015-04-10T19:54:54Z

← Older revision		Revision as of 19:54, 10 April 2015
Line 1:		Line 1:

			==Audio==

			The audio from the exam review given on April 10, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-examreview-10Apr2015.m4a is now available].

	==Notes==		==Notes==

Soma: /* Notes */

2015-04-10T05:42:41Z

Notes

← Older revision		Revision as of 05:42, 10 April 2015
Line 2:		Line 2:
	==Notes==		==Notes==

	The final exam will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/exam-notes.zip exam-notes].		The final exam will be based on [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/exam-notes.zip exam-notes], a simplified version of the solutions to tls-notes from Assignment 10.


	==Code==		==Code==

Soma: /* public/javascripts/notes.js */

2015-04-10T05:39:46Z

public/javascripts/notes.js

← Older revision		Revision as of 05:39, 10 April 2015
Line 196:		Line 196:

	<source line lang="javascript">		<source line lang="javascript">
			$(function() {
			var insertNotesIntoDOM = function(userNotes) {
			var i, theNote;

			$(".notes").remove();

			if (userNotes.length < 1) {
			$("#notesList").append('<div class="notes">No notes!</div>');
			return;
			}

			for (i=0; i < userNotes.length; i++) {
			console.log("Adding note " + i);
			theNote = userNotes[i];
			$("#notesList").append('<div class="notes list-group-item ' +
			'list-group-item-default"> ' +
			'<a href="#" ' +
			'class="notes list-group-item-heading" ' +
			'id="edit' + i + '">' +
			'<h4>' + theNote.title + '</h4></a> ' +
			'<p class="list-group-item-text">' +
			theNote.content + '</p>' +
			'</div>');
			$("#edit" + i).click(userNotes[i], editNote);
			}
			}

			var getAndListNotes = function() {
			$.getJSON("/getNotes", insertNotesIntoDOM);
			}

			var updateNoteOnServer = function(event) {
			var theNote = event.data;
			theNote.title = $("#noteTitle").val();
			theNote.content = $("#noteContent").val();
			noteListing();
			$.post("/updateNote",
			{"id": theNote._id,
			"title": theNote.title,
			"content": theNote.content},
			getAndListNotes);
			}

			var editNote = function(event) {
			var theNote = event.data;

			$(".notesArea").replaceWith('<div class="notesArea" ' +
			'id="editNoteDiv"></div>');
			$("#editNoteDiv").append('<h2>Edit Note</h2>');

			$("#editNoteDiv").append('<div><input type="text" ' +
			'id="noteTitle"></input></div>');
			$("#noteTitle").val(theNote.title);

			$("#editNoteDiv").append('<div>' +
			'<textarea cols="40" rows="5" ' +
			'id="noteContent" wrap="virtual">' +
			'</textarea></div>');
			$("#noteContent").val(theNote.content);


			$("#editNoteDiv").append('<button type="button" ' +
			'class="btn btn-success" ' +
			'id="updateNote">' +
			'Update</button>')
			$("#updateNote").click(theNote, updateNoteOnServer);
			}

			var editNewNote = function(result) {
			var theNote = {"title": "",
			"content": ""};

			if (result.indexOf("ERROR") === -1) {
			theNote._id = result;
			editNote({data: theNote});
			} else {
			noteListing();
			}
			}

			var newNote = function() {
			$.post("/newNote", editNewNote);
			}

			var noteListing = function() {
			$(".notesArea").replaceWith('<div class="notesArea" ' +
			'id="listNotesDiv"></div>');

			$("#listNotesDiv").append('<h2>Notes</h2>');
			$("#listNotesDiv").append('<div id="notesList" class="list-group well">' +
			'<a class="notes list-group-item">Loading Notes...</a>' +
			'</div>');

			$("#listNotesDiv").append('<button id="newNote"' +
			' class="btn btn-primary"' +
			' type="button">' +
			'New Note</button>');
			$("#newNote").click(newNote);

			getAndListNotes();
			}

			noteListing();
			});
	</source>		</source>

Soma: /* public/javascripts/register.js */

2015-04-10T05:39:19Z

public/javascripts/register.js

← Older revision		Revision as of 05:39, 10 April 2015
Line 184:		Line 184:

	<source line lang="javascript">		<source line lang="javascript">
			$(function(){
			$("#register").on("click",function(){
			var $form = $("form");
			$form.attr("action", "/register");
			$form.submit();
			});
			});
	</source>		</source>

Soma: /* views/error.jade */

2015-04-10T05:38:47Z

views/error.jade

← Older revision		Revision as of 05:38, 10 April 2015
Line 257:		Line 257:

	<source line lang="javascript">		<source line lang="javascript">
			extends layout

			block content
			h1= message
			h2= error.status
			pre #{error.stack}
	</source>		</source>

Soma: /* views/notes.jade */

2015-04-10T05:38:14Z

views/notes.jade

← Older revision		Revision as of 05:38, 10 April 2015
Line 238:		Line 238:

	<source line lang="html5">		<source line lang="html5">
			extends layout

			block header
			script(src="javascripts/notes.js")

			block content
			div.page-header
			h1#pageTitle #{username}'s Account
			p#pageWelcome Welcome #{username}

			form(action="/logout", method="post")
			button.btn.btn-info(type="submit") Logout

			div.notesArea
	</source>		</source>

Soma: /* views/index.jade */

2015-04-10T05:37:50Z

views/index.jade

← Older revision		Revision as of 05:37, 10 April 2015
Line 213:		Line 213:

	<source line lang="html5">		<source line lang="html5">
			extends layout

			block header
			script(src="javascripts/register.js")

			block content
			h1= title
			p Welcome to #{title}
			- if(error)
			div.error #{error}
			div
			form(action="/login", method="post")
			div.form-group
			label(for="username") Username
			input.form-control.limitwidth(type="text", name="username")
			div.form-group
			label(for="password") Password
			input.form-control.limitwidth(type="password", name="password")
			button.btn.btn-default(type="submit") Login
			button#register.btn.btn-warning(type="button") Register
	</source>		</source>

Soma: /* Code */

2015-04-10T05:36:56Z

Code

← Older revision		Revision as of 05:36, 10 April 2015
Line 184:		Line 184:

	<source line lang="javascript">		<source line lang="javascript">

	</source>		</source>

	===public/javascripts/notes.js===		===public/javascripts/notes.js===

	~~\lstinputlisting[language~~=~~JavaScript]{exam-notes~~/~~public/javascripts/notes.js}~~		<source line lang="javascript">

			</source>

	===views/layout.jade===		===views/layout.jade===

	~~\lstinputlisting[language~~=~~Jade]{exam~~-~~notes~~/~~views~~/~~layout~~.~~jade}~~		<source line lang="html5">
			doctype html
			html
			head
			title= title
			link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap.css')
			link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap-theme.css')
			link(rel='stylesheet', href='/stylesheets/style.css')
			script(src='/libs/jquery.js')
			script(src='/libs/bootstrap/js/bootstrap.js')
			block header
			body(role="document")
			block content
			</source>

	===views/index.jade===		===views/index.jade===
	~~\lstinputlisting[language~~=~~Jade]{exam-notes~~/~~views/index.jade}~~
			<source line lang="html5">

			</source>

	===views/notes.jade===		===views/notes.jade===
	~~\lstinputlisting[language~~=~~Jade]{exam-notes~~/~~views/notes.jade}~~
			<source line lang="html5">

			</source>

	===views/error.jade===		===views/error.jade===

			<source line lang="javascript">

	~~\lstinputlisting[language=Jade]{exam-notes~~/~~views/error.jade}~~		</source>