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 awesom...
var element = ‘p’;
var content = ‘Hello, world!’;
var tag     = ‘<’ + element + ‘>’;

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

tag += content;
tag += ‘</’ + elemen...
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 subTot...
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.ph...
Arrays

• One variable, multiple values
• Use numbers to identify values
• Think about an <ol> in XHTML
 • ... that starts...
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 ’ ...
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(birthda...
Review

• Strings:
 • Begin and end with quotes
 • Quotes can be ‘single’ or “double”
 • Concatenated 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 add...
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...
Homework

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

• Required Functions:
 • ol, ul (listItems)
 • dl (dictionary)
Upcoming SlideShare
Loading in …5
×

JavaScript From Scratch: Playing With Data

1,574 views

Published on

The second of an eight part series covering the basics of the JavaScript language.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,574
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript From Scratch: Playing With Data

  1. 1. JavaScript From Scratch “Playing With Data”
  2. 2. Agenda • Strings • Numbers • Booleans • Arrays • Objects
  3. 3. Strings • Any data surrounded by quotes • ‘Single quotes’ • “Double quotes” • Usually things with non-numeric characters
  4. 4. Strings • Can be concatenated via the + operator var name = ‘Mike ’ + ‘Girouard’; var sentence = name + ‘ is awesome!’;
  5. 5. var element = ‘p’; var content = ‘Hello, world!’; var tag = ‘<’ + element + ‘>’; tag = tag + content; tag = tag + ‘</’ + element + ‘>’;
  6. 6. var element = ‘p’; var content = ‘Hello, world!’; var tag = ‘<’ + element + ‘>’; tag += content; tag += ‘</’ + element + ‘>’;
  7. 7. Numbers • Any kind of number • 1, 2, 4, 100, 79812 (Integers) • 1.2, 7.9, 1.2489, 1.0 (Floats)
  8. 8. 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;
  9. 9. Booleans • True/False values var canDrink = true; var canParkInBrooklyn = false;
  10. 10. var isOver21 = (2008 - 1983) > 21; var isEmpty = (input.value == ‘’); var isIEorOpera = (‘all’ in document);
  11. 11. if (isOver21) { alert(‘99 beers on the wall...’); }
  12. 12. if (isEmpty) { alert(‘You missed something...’); input.focus(); }
  13. 13. if (isIEorOpera) { var url = ‘http://getfirefox.com/’; window.location = url; }
  14. 14. var validLogin = (user == ‘foo’ && pass == ‘bar’); if (!validLogin) { window.location = ‘bad-login.php’; }
  15. 15. Arrays • One variable, multiple values • Use numbers to identify values • Think about an <ol> in XHTML • ... that starts with 0
  16. 16. var colors = [‘red’, ‘green’, ‘blue’]; alert(colors[0]); alert(colors[1]); alert(colors[2]);
  17. 17. var sentence = ‘There are ’ + colors.length + ‘ colors total’; colors.push(‘chartreuse’); sentence = ‘Now there are ’ + colors.length;
  18. 18. Objects • Like arrays: one variable, multiple values • Instead of numbers, objects use strings
  19. 19. var birthdays = { ‘Mike’ : ‘01-14-83’, ‘John’ : ‘06-23-74’, ‘Amy’ : null }; alert(birthdays.Mike); alert(birthdays.John); alert(birthdays.Amy);
  20. 20. Review • Strings: • Begin and end with quotes • Quotes can be ‘single’ or “double” • Concatenated with a + operator • Appended with a += operator
  21. 21. Review • Numbers: • Any kind of numeric data • Quotes are not necessary
  22. 22. Review • Booleans: • true or false values • Form the basis of all logic in programming • Can be negated with a ! operator
  23. 23. Review • Arrays: • One variable, multiple values • Indexed by numbers • ... beginning with 0 • New items can be added with push()
  24. 24. Review • Objects: • One variable, multiple values • Indexed by strings
  25. 25. Homework • Build a micro-library for HTML generation • Functions should accept arguments for each attribute • Functions should return strings as a result
  26. 26. Homework • Required Functions: • a (href, title, content) • img (src, alt) • p, h1 ... h6 (content)
  27. 27. Homework • Required Functions: • ol, ul (listItems) • dl (dictionary)

×