JavaScript: The First Parts

Part 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

Reviewvar average_array = function (array) {

var i, total = 0;

for (i = 0; i < array.length; i = i + 1) {

total += array[i];

}

return total / array.length;

};

Learn to Program

• Values

• Variables

• Expressions

• Branching

• Loops

• Functions

• Recursion

• Arrays

• Objects

• Trees

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

1. Parameters and variables defined inside of a function are not visible outside of the function.

2. Functions can be created inside of other functions.

3. 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 literalvar 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.