LeeCroft at 21:02, 9 February 2016

2016-02-09T21:02:01Z

← Older revision		Revision as of 21:02, 9 February 2016
Line 54:		Line 54:

	</pre>		</pre>

			===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:
			<code><pre>var x = {a: 5, b: true};</pre></code>
			*For JSON, we must use quotes as follows:
			<code><pre>{“a”: “5”, “b”: “true”}</pre></code>

			=====Dashes in Attribute Names=====
			<code><pre>
			//This must be quoted, otherwise it will produce an error
			x.anil-memory = “long ago”;
			</pre></code>

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

			<code><pre>
			//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"};
			</pre></code>

			=====Prototypes=====
			<code><pre>
			//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
			</pre></code>

			*To make use of object prototyping, use <code>Object.create()</code>
			<code><pre>
			//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
			</pre></code>

			*What is "new" for? What does "new" do:
			<code><pre>
			var f = function(a) {this.myval = a};
			var g = new f(7);
			g -> {myval: 7}
			</pre></code>

			*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 <code>Object.create()</code> 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:
			<code><pre>
			x.hasOwnProperty(“what”); -> false
			x.hasOwnProperty(“b”) -> true
			</pre></code>
			*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, <code>this</code> refers to the object that the method belongs to
			<code><pre>
			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
			</pre></code>

			*The call method calls a function using the argument provided as the value of <code>this</code>
			*Example: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/call
			<code><pre>
			var k = {k:7, whoami: “k”};
			f.call(k); -> this.whoami = k
			</pre></code>

			*When <code>this</code> is used in a function, it refers to the global object

			<code><pre>
			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
			</pre></code>

			*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:
			<code><pre>
			mkdir testapp
			cd testapp
			sudo npm install express-generator –g
			express –version
			express
			npm install
			</pre></code>

			*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 <code>bin/www</code>

			=====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

Soma at 21:33, 26 January 2016

2016-01-26T21:33:33Z

← Older revision		Revision as of 21:33, 26 January 2016
Line 1:		Line 1:
			==Video==

			The video from the lecture given on January 26, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec06-26Jan2016.mp4 is now available].

	==Notes==		==Notes==

Zero: Added more in-class notes.

2016-01-26T20:52:23Z

Added more in-class notes.

@@ Line 25: / Line 25: @@
   - methods
   - constructors with new
-  - apply
+  - call/apply
 </pre>

Zero: Typo.

2016-01-26T19:44:59Z

Typo.

← Older revision		Revision as of 19:44, 26 January 2016
Line 19:		Line 19:
	- "Object" object		- "Object" object
	- Object.prototype		- Object.prototype
	- hasOwnProperty and Object.~~hasOwnPropert~~		- hasOwnProperty and Object.hasOwnProperty

	* Function calling and "this"		* Function calling and "this"

Zero: Added in-class notes from the beginning of the lecture.

2016-01-26T19:41:33Z

Added in-class notes from the beginning of the lecture.

New page

==Notes==

===In-class Notes===

<pre>
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.hasOwnPropert

* Function calling and "this"
- functions in regular scope
- methods
- constructors with new
- apply
</pre>

WebFund 2016W Lecture 6 - Revision history

LeeCroft at 21:02, 9 February 2016

Soma at 21:33, 26 January 2016

Zero: Added more in-class notes.

Zero: Typo.

Zero: Added in-class notes from the beginning of the lecture.