Javascript1

General Information

This course is currently running November-December 2013, Tuesdays 11:30-1:30.

Part 1 (November) will offer students a solid foundation in Javascript as a general-purpose programming language. Part 2 (December) will explore Javascript's integration in web browsers with HTML, CSS, and the Document Object Model (DOM).

Instructor: Dan Bauer (email: dsbauer at gmail)

Course Outline

Week 1: Values and Expressions

• Firebug Console/Interpreter
  • The console allows a dialogue with Javascript interpreter: you make one (possibly compound) statement, it replies with one value.

• Expressions
  • An expression (EXPR) can be:
    • a primitive (e.g. 1)
    • a variable (e.g. x)
    • an operator combining smaller EXPR's (e.g. x+1, 2*(x+1))

• Operators have:
  • a keyword or symbol (OP)
  • a syntax template (e.g. _ OP _)
    • unary prefix: OP_
    • unary postfix: _OP
    • binary infix: _OP_
    • ternary infix: _OP_OP_
  • one or more inputs _ ("operands")
  • one output ("return value")
    • may be undefined
  • possible side-effects (e.g. change in variable's value)

• Variables have:
  • a name/identifier
  • a value (initially undefined)
    • each value has a type (primitive or reference)
  • a scope

• Other (non-expression) Statements
  • var NAME;
  • var NAME = EXPR;
  • if (EXPR) {EXPR;}
  • if (EXPR) {EXPR;} else {EXPR;}

• Primitive Types
  • undefined
  • Number
    • same type for integers and floats (fractional)
    • special values: NaN ("not a number"), Infinity
  • String
    • wrapped in either " " or ' '
    • may contain opposite quote or other special characters
      • \t (tab)
      • \n (newline)
    • may be empty ("")
  • Boolean (true/false)
    • false-ish values: false,undefined,null,0,"",NaN
    • (some) true-ish values: true,1,"false","undefined","0",{} (empty object)

Some Sample Operators:

operator	input type	example	result	result type	side effects
typeof	NUM	typeof 1	"number"	STR
	STR	typeof "word"	"string"
	BOOL	typeof true	"boolean"
, (sequence)	any	"a", "b", "c"	"c"	type of last value
		(4,"3"),("two",1)	1
+ (plus)	NUM	1+1	2	NUM
+ (concatenate)	STR	"1"+"1"	"11"	STR
	mixed	1+"2"	"12"	STR
- * / %	NUM	3-1	2	NUM
	STR	"3"-"1"	2
	mixed	"3"-1	2
< > <= >= (comparison)	NUM	1<2	true	BOOL
	STR	"b"<"a"	false
== (equality)	NUM	1==2	false	BOOL
	STR	"a"=="aa"	false
	mixed	1=="1"	true
	mixed	0==false	true
=== (identity)	NUM	1===2	false	BOOL
	STR	"abc"==="abc"	true
	mixed	1==="1"	false
	mixed	1===true	false
! (not)	any	!1	false	BOOL
		!""	true
&& (and)	any	null && "red"	null	first false-ish or last input
		1 && "green"	"green"
|| (or)	any	"yes" || null	"yes"	first true-ish or last input
		"" || 0	0
?: (conditional)	any	true? "yes": "no"	"yes"	any
variable assignment operators					x is now...
= (assignment)	any	x=1	1	same as input	1
		x = "blue"	"blue"		"blue"
+= (incremental assignment)	NUM	x=0; x+=2;	2	NUM	2
	STR	x="he"; x+="llo";	"hello"	STR	"hello"
	mixed	x=""; x+=2;	"2"	STR	"2"
++ (post-increment)	NUM	x=0; x++;	0	NUM	1
	STR	x=""; x++;	0		1
++ (pre-increment)	NUM	x=0; ++x;	1	NUM	1
	STR	x=""; ++x;	1		1

Week 2: Loops and Functions

Nov12 in-class scratchpad

Loops have:

• some form of counter ("iterator"), a variable which changes with each cycle of the loop
• an initialization (INIT)
• a counter increment (CHANGE)
• a repeated ACTION
• a continuation condition (COND)
  • any COND expression will be treated as a Boolean, either true-ish or false-ish
  • the ACTIONs and CHANGE occur only when COND is true-ish

Loop Statements:

Loop keyword	Pattern	Example
while	INIT; while(COND) { ACTION; ... CHANGE; }	var i=0; while (i<10) { alert(i); i++; }
for	for (INIT; COND; CHANGE) { ACTION; ... }	for (var i=0; i<10; i++) { alert(i); }

• Sometimes the COND includes the CHANGE, e.g.:

 for (var i=0; (i++)<10; ) {...}
 for (var i=10; --i; ) {...}

• ACTIONs can be any statements, including nested loops

Functions:

• are mini-programs, independent modules which can be reused in multiple contexts
• are a kind of Object, which can be referenced by multiple names
• have parameters which can change for each call/use
• return one value of any type (or undefined if unspecified)
  • the keyword return specifies the returned value and exits the function immediately
• create a separate space ("call object","execution context", or "scope") for their local variables and parameters
  • Each call creates a separate scope.
  • Scopes last as long as needed, then destroyed automatically.

Function-specific Operators:

operator	input type	example	result	result type	side effects
function NAME(PARAMS){BODY} function(PARAMS){BODY} (define function)		function add(x,y) {return x+y;}	a function	Function	creates Function object, creates (or redefines) var. NAME if included
NAME(ARGS) (call function)	NAME: Function, ARGS: any	add(1,2)	3	any	depends on function body

Exercises

1) Write a function to calculate, for a group of N people where everyone shakes the hand of everyone else, how many total handshakes there are.

Write another function to enumerate these interactions, returning a single string describing them all. People may be identified by number. For example, for N=3, it might return: "#1 meets #2. #1 meets #3. #2 meets #3."
(Hint: you may want a second "helper" function to handle a single interaction.)

2) Write a function to decide whether a given integer is prime. You may need some of these functions/operators:

• function Math.floor(N): truncates any fractional part of a number N (i.e. returns greatest int <=N)
• function Number.isInteger(N): returns true is N is an integer
• modulo operator %: x%y returns 0 if x divides evenly by y

3) Imagine that a deck of playing cards is sorted by rank and suit: first all the Aces, then the Twos, etc, with the Kings last. Within each rank, the suits are in the order Heart, Diamond, Spade, Club. Number each card in order from 0 to 51 (i.e. 0=Ace of Hearts; 51=King of Clubs), and let that ID number represent the corresponding card.

Following that encoding scheme, write a set of functions to compute different features/relations of the cards:

• rank(card) returns 1-13, representing the card's rank.
• suit(card) returns 1-4, representing the card's suit.
• color(card) returns "red" or "black".
• precedes(cardA,cardB) returns true only if cardA is one less in rank than cardB. Assume rank wrap-around (King precedes Ace precedes Two).
• sameColor(cardA,cardB) returns true only if cardA and cardB have the same color.
• nextInSuit(cardA) returns cardB, the ID number of the card following cardA in the same suit. Assume wrap-around.
• prevInSuit(cardB) returns cardA, the ID number of the card preceding cardB in the same suit.

Sample Code

Nov12 in-class scratchpad