JavaScript From Scratch
“Playing With Data”

Agenda
• Strings
• Numbers
• Booleans
• Arrays
• Objects

Strings
• Any data surrounded by quotes
• ‘Single quotes’
• “Double quotes”
• Usually things with non-numeric characters

Strings
• Can be concatenated via the + operator
var name = ‘Mike ’ + ‘Girouard’;
var sentence = name + ‘ is awesome!’;

var element = ‘p’;
var content = ‘Hello, world!’;
var tag = ‘<’ + element + ‘>’;
tag = tag + content;
tag = tag + ‘</’ + element + ‘>’;

var element = ‘p’;
var content = ‘Hello, world!’;
var tag = ‘<’ + element + ‘>’;
tag += content;
tag += ‘</’ + element + ‘>’;

Numbers
• Any kind of number
• 1, 2, 4, 100, 79812 (Integers)
• 1.2, 7.9, 1.2489, 1.0 (Floats)

var product = ‘Widget’;
var price = 1.99;
var quantity = 4;
var taxRate = .08375;
var subTotal = price * quantity;
var taxAmt = subTotal * taxRate;
var total = subTotal + taxAmt;

Booleans
• True/False values
var canDrink = true;
var canParkInBrooklyn = false;

var isOver21 = (2008 - 1983) > 21;
var isEmpty = (input.value == ‘’);
var isIEorOpera = (‘all’ in document);

if (isOver21) {
alert(‘99 beers on the wall...’);
}

if (isEmpty) {
alert(‘You missed something...’);
input.focus();
}

if (isIEorOpera) {
var url = ‘http://getfirefox.com/’;
window.location = url;
}

var validLogin = (user == ‘foo’ &&
pass == ‘bar’);
if (!validLogin) {
window.location = ‘bad-login.php’;
}

Arrays
• One variable, multiple values
• Use numbers to identify values
• Think about an <ol> in XHTML
• ... that starts with 0

var colors = [‘red’, ‘green’, ‘blue’];
alert(colors[0]);
alert(colors[1]);
alert(colors[2]);

var sentence = ‘There are ’ +
colors.length + ‘ colors total’;
colors.push(‘chartreuse’);
sentence = ‘Now there are ’ +
colors.length;

Objects
• Like arrays: one variable, multiple values
• Instead of numbers, objects use strings

var birthdays = {
‘Mike’ : ‘01-14-83’,
‘John’ : ‘06-23-74’,
‘Amy’ : null
};
alert(birthdays.Mike);
alert(birthdays.John);
alert(birthdays.Amy);

Review
• Strings:
• Begin and end with quotes
• Quotes can be ‘single’ or “double”
• Concatenated with a + operator
• Appended with a += operator

Review
• Numbers:
• Any kind of numeric data
• Quotes are not necessary

Review
• Booleans:
• true or false values
• Form the basis of all logic in programming
• Can be negated with a ! operator

Review
• Arrays:
• One variable, multiple values
• Indexed by numbers
• ... beginning with 0
• New items can be added with push()

Review
• Objects:
• One variable, multiple values
• Indexed by strings

Homework
• Build a micro-library for HTML generation
• Functions should accept arguments for
each attribute
• Functions should return strings as a result

Homework
• Required Functions:
• a (href, title, content)
• img (src, alt)
• p, h1 ... h6 (content)

Homework
• Required Functions:
• ol, ul (listItems)
• dl (dictionary)