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

• 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.)

• 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

Sample Code

Nov12 in-class scratchpad