JavaScript: The First Parts Part Three

JavaScript:The First PartsPart Three Douglas Crockford Yahoo! Inc.

Review average_array([1, 2, 3, 4]) // 2.5

Review average_array([1, 2, 3, 4]) // 2.5 average_array([1, 2, 3, 4, 5]) // 3 average_array([1, 2]) // 1.5

Review var average_array = function (array) { var i, total = 0; for (i = 0; i < array.length; i = i + 1) { total += array[i]; } return total / array.length; };

Values Variables Expressions Branching Loops Functions Recursion Arrays Objects Trees Learn to Program

Values • Booleans • Numbers • Strings • null • undefined

Strings • Textual values, a sequence of 0 or more characters. • Unicode: Able to represent all of the characters of all languages. • Internally, each character is represented as a 16-bit number. • A string containing nothing is called the empty string.

String Literals • Wrapped in "..." or '...'. • No line breaks. • Escapement with \. "\"" === '"'

String Operators • + does concatenation 'c' + 'a' + 't' === 'cat' • The .charAt(index) method can get a character. 'cat'.charAt(1) === 'a' • The .length member gives the number of characters in the string. 'cat'.length === 3 • The .toLowerCase() method can produce a lowercase copy. 'CAT'.toLowerCase() === 'cat'

http://jsmvhs.crockford.com/yellowbox.html • a = '"' • b = 'C' + 'A' + 'T' • b.length • c = b.toLowerCase() • d = c.charAt(0) • e = c.charAt(1) • f = c.charAt(3) • c = 'bad ' + c • h = '1' + 2 + 3

Scope • Parameters and variables defined inside of a function are not visible outside of the function. • Functions can be created inside of other functions. • The parameters and variables of an outer function are visible to the inner function.

http://jsmvhs.crockford.com/roman.html View : Page Source

var roman = function () { var table = [ ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'], ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'], ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'] ]; return function (n) { var result = '', i; for (i = 0; i < table.length; i += 1) { result = table[i][n % 10] + result; n = Math.floor(n / 10); } for (i = 0; i < n; i += 1) { result = 'M' + result; } return result; }; }();

Debugger • Click on the bug icon on the bottom bar. • Enable / apply script debugging. • Click on the script tab. • Drag the top edge of the debugger window up to get a larger view. • Click on the line number 24 producing a red breakpoint.

Debugger • Type in 1666 and press enter. • Run • Step Over • Step Into • Step Out • Close

Object • A container of name value/pairs. • Objects are a useful way to collect and organize information.

Object literal var my_data = { first_name: 'Douglas', last_name: 'Crockford', height: 74 }; my_data['height'] === my_data.height var name = my_data.first_name + ' ' + my_data.last_name;

http://jsmvhs.crockford.com/yellowbox.html • o = {} • c = 'cat' • o[c] = 'Muldoon' • o['dog'] = 'Mutt' • o.cat • o[c] • o.dog • o.v = 5 • o.x = 10

Branching • Execute part of a function depending on the value of an expression. • if (expression) { • // executed only if the expression is true • }

Branching • if (expression) { • // executed only if the expression is true • } else { • // executed only if the expression is false • }

Branching • if (expression1) { • // executed only if expression1 is true • } else if (expression2) { • // executed only if expression2 is true • } else if (expression3) { • // executed only if expression3 is true • } else { • // executed only if all of the expressions were false • }

Branching • if (expression1) { • if (expression2) { • // executed only if expression1 • // and expression2 are true • } else { • // executed only if the expression1 is true • // and expression2 is false • } • } else { • if (expression3) { • // executed only if expression1 is false • // and expression3 is true • } else { • // executed only if the expression1 is false • // and expression3 is false • } }

Branching • var min_array = function (array) { • var i, value = Infinity; • for (i = 0; i < array.length; i = i + 1) { • if (array[i] < value) { • value = array[i]; • } • } • return value; • };

Assignment 3 • Write program deroman that takes a string and produces a number. • Use roman.html as a template. • Use .toLowerCase() to convert the string to lower case. • Use an object to map the Roman letters to number values. • If the value of a character is less than the value of the next character, then subtract its value from the result. • Otherwise, add its value to the result. Always add the last character's value.

JavaScript: The First Parts Part Three