Transcript 3 - jsmvhs - Douglas Crockford

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
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;
};
Learn to Program
• Values
• Functions
• Variables
• Recursion
• Expressions
• Arrays
• Branching
• Objects
• Loops
• 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 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.