chapter 2
what’s your type?
expression
semicolon ends
the expression
arithmetic operator
value value
2 + 2;
2 + 2;
value
(number)
value
(number)
Numbers
Good for... Not good for...
● A person’s age
● Day of the month
● Time
● Score in a game
● A person’s name
● Day n...
Booleans
A binary value, having two possible values
called “true” and “false”
Bool·e·an
ˈbo͞olēən/
Booleans
var isAwake = true;
Booleans
var isAwake = true;
keyword
Booleans
var isAwake = true;
identifier
Booleans
var isAwake = true;
boolean literal
Booleans
var isAwake = true;
assignment operator
Booleans
var isAwake = true;
keyword identifier
assignment operator
boolean literal
Booleans
var isAwake = true;
var isSad = false;
Booleans
Boolean('Seth'); // evaluates to true
Boolean(''); // evaluates to false
Boolean(0); // evaluates to false
Boolea...
Booleans
Good for...
● Constructing logical
expressions
if (isAwake) {
// do
something
}
function add(number1, number2) {
return number1 + number2;
}
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
}
Functions
Group code into a reusable chunk.
keyword
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
}
function name
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
}
argument argument
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
}
function body
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
} keyword
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
} value to return
Functions
Group code into a reusable chunk.
function add(number1, number2) {
return number1 + number2;
}
keyword
function ...
Functions
function add(number1, number2) {
return number1 + number2;
}
add(10, 55); // evaluates to 65
invoke the function
Functions
Good for...
● Organizing your code into
reusable pieces
● Holding code to draw a
character in a game
● Calculati...
Objects
Store a group of values.
var player = {
score: 100,
level: 3
};
Objects
Store a group of values.
var player = {
score: 100,
level: 3
};
key
value
Objects
// bracket notation
player['score']; // evaluates to 100
// dot notation
player.score; // evaluates to 100
Objects
var player = {
score: 100,
level: 3
};
player.isAlive = true;
player.isAlive; // evaluates to true
Objects
var player = {
score: 100,
level: 3
};
player.score = player.score + 50;
player.score; // evaluates to 150
Objects
player.totalScore = function () {
return this.score * this.level;
};
player.totalScore(); // evaluates to 450 (150...
Built-in Objects
Math.random(); // evaluates to a random number,
// between 0 and 1
console.log('Hello World'); // prints ...
Objects
Good for...
● Storing player status in a
game
● Grouping behavior with
data
Strings
Store alphanumeric values: letters, words,
sentences.
Examples:
Hello, my name is Bob.
Seth
t
Seth23
Strings
var foo = "abc"; // correct
var bar = 'abc'; // correct
var biz = 'abc"; // incorrect
Quoting styles.
Strings
'Seth' + ' ' + 'McLaughlin'; // evaluates to
// 'Seth McLaughlin'
Adding strings (concatenation).
Strings
'Seth' + 77; // evaluates to 'Seth77'
Adding strings to numbers.
Strings
'Seth' - 'McLaughlin'; // evaluates to NaN
'Seth' / 'McLaughlin'; // evaluates to NaN
'Seth' * 'McLaughlin'; // ev...
Strings
'Seth'.length; // evaluates to the number 4
'Seth'[1]; // evaluates to the string 'e'
'Seth'.indexOf('e'); // eval...
Strings
Good for...
● Storing text
● A player’s name
● A website URL
● A chat message
Arrays
var friends = ['Richard', 'Tom', 'Susie'];
Store a list of items.
Richard Tom Susie
Arrays
push() -- add to end
Richard Tom Susie
Arrays
push() -- add to end
Richard Tom Susie
friends.push('Sara');
Arrays
push() -- add to end
Richard Tom Susie
friends.push('Sara');
Sara
Arrays
unshift() -- add to beginning
Richard Tom Susie
Arrays
unshift() -- add to beginning
Richard Tom Susie
friends.unshift('Sara');
Arrays
unshift() -- add to beginning
Richard Tom Susie
friends.unshift('Sara');
Arrays
unshift() -- add to beginning
Richard Tom Susie
friends.unshift('Sara');
Sara
Arrays
count the items
Richard Tom Susie
friends.length; // evaluates to 4
Sara
Arrays
Get an item
Richard Tom Susie
friends[2]; // evaluates to 'Tom'
friends[0]; // evaluates to 'Sara'
Sara
null and undefined
Special values to indicate a lack of value
var foo;
foo; // evaluates to undefined
var bar = null;
bar;...
null and undefined
function myFunction() {
var age = 34 + 10;
}
myFunction(); // evaluates to undefined since the
// funct...
null and undefined
Boolean(undefined); // evaluates to false
Boolean(null); // evaluates to false
Review
What does concatenation mean?
What is the boolean value of 2 + '2';?
Write a function to multiply two numbers together,
and return the result.
Create an array to hold a list of state names. How can
you get the number of states in your list?
Create an object to represent a person. This object
should have two properties:
● name - a string
● sayHello - a function
...
Intro to Programming
with Seth McLaughlin
Upcoming SlideShare
Loading in …5
×

Chapter 2: What's your type?

519 views

Published on

Introduction to Programming course, Chapter 2. Learn about the data types in JavaScript and how to use them.

http://i2p.sethmcl.com

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

  • Be the first to like this

No Downloads
Views
Total views
519
On SlideShare
0
From Embeds
0
Number of Embeds
163
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chapter 2: What's your type?

  1. 1. chapter 2 what’s your type?
  2. 2. expression semicolon ends the expression arithmetic operator value value 2 + 2;
  3. 3. 2 + 2; value (number) value (number)
  4. 4. Numbers Good for... Not good for... ● A person’s age ● Day of the month ● Time ● Score in a game ● A person’s name ● Day name (Friday, etc.) ● Mailing address ● Chat message
  5. 5. Booleans A binary value, having two possible values called “true” and “false” Bool·e·an ˈbo͞olēən/
  6. 6. Booleans var isAwake = true;
  7. 7. Booleans var isAwake = true; keyword
  8. 8. Booleans var isAwake = true; identifier
  9. 9. Booleans var isAwake = true; boolean literal
  10. 10. Booleans var isAwake = true; assignment operator
  11. 11. Booleans var isAwake = true; keyword identifier assignment operator boolean literal
  12. 12. Booleans var isAwake = true; var isSad = false;
  13. 13. Booleans Boolean('Seth'); // evaluates to true Boolean(''); // evaluates to false Boolean(0); // evaluates to false Boolean(234); // evaluates to true
  14. 14. Booleans Good for... ● Constructing logical expressions if (isAwake) { // do something }
  15. 15. function add(number1, number2) { return number1 + number2; } Functions Group code into a reusable chunk.
  16. 16. function add(number1, number2) { return number1 + number2; } Functions Group code into a reusable chunk. keyword
  17. 17. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } function name
  18. 18. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } argument argument
  19. 19. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } function body
  20. 20. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } keyword
  21. 21. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } value to return
  22. 22. Functions Group code into a reusable chunk. function add(number1, number2) { return number1 + number2; } keyword function name argument argument keyword value to return function body
  23. 23. Functions function add(number1, number2) { return number1 + number2; } add(10, 55); // evaluates to 65 invoke the function
  24. 24. Functions Good for... ● Organizing your code into reusable pieces ● Holding code to draw a character in a game ● Calculating some value
  25. 25. Objects Store a group of values. var player = { score: 100, level: 3 };
  26. 26. Objects Store a group of values. var player = { score: 100, level: 3 }; key value
  27. 27. Objects // bracket notation player['score']; // evaluates to 100 // dot notation player.score; // evaluates to 100
  28. 28. Objects var player = { score: 100, level: 3 }; player.isAlive = true; player.isAlive; // evaluates to true
  29. 29. Objects var player = { score: 100, level: 3 }; player.score = player.score + 50; player.score; // evaluates to 150
  30. 30. Objects player.totalScore = function () { return this.score * this.level; }; player.totalScore(); // evaluates to 450 (150 * 3)
  31. 31. Built-in Objects Math.random(); // evaluates to a random number, // between 0 and 1 console.log('Hello World'); // prints string to // developer console
  32. 32. Objects Good for... ● Storing player status in a game ● Grouping behavior with data
  33. 33. Strings Store alphanumeric values: letters, words, sentences. Examples: Hello, my name is Bob. Seth t Seth23
  34. 34. Strings var foo = "abc"; // correct var bar = 'abc'; // correct var biz = 'abc"; // incorrect Quoting styles.
  35. 35. Strings 'Seth' + ' ' + 'McLaughlin'; // evaluates to // 'Seth McLaughlin' Adding strings (concatenation).
  36. 36. Strings 'Seth' + 77; // evaluates to 'Seth77' Adding strings to numbers.
  37. 37. Strings 'Seth' - 'McLaughlin'; // evaluates to NaN 'Seth' / 'McLaughlin'; // evaluates to NaN 'Seth' * 'McLaughlin'; // evaluates to NaN -, /, * operators do not apply to string values. NaN means “Not A Number” (invalid value)
  38. 38. Strings 'Seth'.length; // evaluates to the number 4 'Seth'[1]; // evaluates to the string 'e' 'Seth'.indexOf('e'); // evaluates to the number 1 'Seth'.toUpperCase(); // evaluates to the string 'SETH' 'Seth'.toLowerCase(); // evaluates to the string 'seth' Some of the built-in properties.
  39. 39. Strings Good for... ● Storing text ● A player’s name ● A website URL ● A chat message
  40. 40. Arrays var friends = ['Richard', 'Tom', 'Susie']; Store a list of items. Richard Tom Susie
  41. 41. Arrays push() -- add to end Richard Tom Susie
  42. 42. Arrays push() -- add to end Richard Tom Susie friends.push('Sara');
  43. 43. Arrays push() -- add to end Richard Tom Susie friends.push('Sara'); Sara
  44. 44. Arrays unshift() -- add to beginning Richard Tom Susie
  45. 45. Arrays unshift() -- add to beginning Richard Tom Susie friends.unshift('Sara');
  46. 46. Arrays unshift() -- add to beginning Richard Tom Susie friends.unshift('Sara');
  47. 47. Arrays unshift() -- add to beginning Richard Tom Susie friends.unshift('Sara'); Sara
  48. 48. Arrays count the items Richard Tom Susie friends.length; // evaluates to 4 Sara
  49. 49. Arrays Get an item Richard Tom Susie friends[2]; // evaluates to 'Tom' friends[0]; // evaluates to 'Sara' Sara
  50. 50. null and undefined Special values to indicate a lack of value var foo; foo; // evaluates to undefined var bar = null; bar; // evaluates to null
  51. 51. null and undefined function myFunction() { var age = 34 + 10; } myFunction(); // evaluates to undefined since the // function does not return a value
  52. 52. null and undefined Boolean(undefined); // evaluates to false Boolean(null); // evaluates to false
  53. 53. Review
  54. 54. What does concatenation mean?
  55. 55. What is the boolean value of 2 + '2';?
  56. 56. Write a function to multiply two numbers together, and return the result.
  57. 57. Create an array to hold a list of state names. How can you get the number of states in your list?
  58. 58. Create an object to represent a person. This object should have two properties: ● name - a string ● sayHello - a function When the function sayHello is invoked, the person’s name should be printed to the browser’s console.
  59. 59. Intro to Programming with Seth McLaughlin

×