variables, assignment
and operators
Thursday, September 10, 2009
Slide 2
Slide 2 text
variables
containers to store information
that can be used later
http://www.w3schools.com/JS/js_variables.asp
Thursday, September 10, 2009
Slide 3
Slide 3 text
Remember Algebra?
5 = x + 3
Thursday, September 10, 2009
Slide 4
Slide 4 text
var
var a;
var age = 5;
var name = 'John Nunemaker';
Thursday, September 10, 2009
Slide 5
Slide 5 text
declaring variables
only need var once, but multiple times won’t hurt you
// good
var age = 15;
age // 15
age = 16;
age // 16
age = 17;
age // 17
// no point
var age = 15;
age // 15
var age = 16;
age // 16
var age = 17;
age // 17
Thursday, September 10, 2009
Slide 6
Slide 6 text
undeclared variables
automatically declare, but don’t do this
x = 10;
foo = 'bar';
x // 10
foo // "bar"
Thursday, September 10, 2009
Slide 7
Slide 7 text
variables can store
anything
var age = 15;
var name = 'John';
var colors = ['red', 'green', 'blue'];
var person = {name:'John', age:15};
var cool = true;
var foo = function() {
return 'bar';
}
Thursday, September 10, 2009
Slide 8
Slide 8 text
naming variables
case sensitive
var car = 'Ford';
var cAr = 'Toyota';
car // "Ford"
cAr // "Toyota"
Thursday, September 10, 2009
Slide 9
Slide 9 text
naming variables
must begin with letter or underscore
var car; // good!
var car9; // good!
var _car; // good!
var 9car; // bad! SyntaxError
Thursday, September 10, 2009
Slide 10
Slide 10 text
naming variables
can be short or descriptive
var x; // short
var field; // descriptive
Thursday, September 10, 2009
Slide 11
Slide 11 text
naming variables
separate words with underscores
var section_field_name; // good idea
var sectionfieldname; // bad idea
Thursday, September 10, 2009
Slide 12
Slide 12 text
naming variables
general formatting rules for easier reading
var age = 15; // good idea
var age=15; // bad idea
var age = 15; // bad idea
Thursday, September 10, 2009
Slide 13
Slide 13 text
(pause for review
and applause)
Thursday, September 10, 2009
Slide 14
Slide 14 text
good or bad?
var section;
Thursday, September 10, 2009
Slide 15
Slide 15 text
good or bad?
var section;
Thursday, September 10, 2009
Slide 16
Slide 16 text
good or bad?
var 10thingsihateaboutyou;
Thursday, September 10, 2009
Slide 17
Slide 17 text
good or bad?
var 10thingsihateaboutyou;
variables cannot start with numbers and
should have underscores between words
Thursday, September 10, 2009
Slide 18
Slide 18 text
good or bad?
var fieldname;
Thursday, September 10, 2009
Slide 19
Slide 19 text
good or bad?
var fieldname;
Should be: var field_name;
Thursday, September 10, 2009
Slide 20
Slide 20 text
good or bad?
var section_field_name;
Thursday, September 10, 2009
Slide 21
Slide 21 text
good or bad?
var section_field_name;
Thursday, September 10, 2009
Slide 22
Slide 22 text
operators
assignment and comparison
http://www.w3schools.com/JS/js_operators.asp
Thursday, September 10, 2009
Slide 23
Slide 23 text
arithmetic operators
operator meaning example result
+ addition 5 + 5 10
- subtraction 5 - 4 1
* multiplication 2 * 5 10
/ division 1 / 4 0.25
% modulus 5 % 4 1
++ increment x++ x + 1
-- decrement x-- x - 1
Thursday, September 10, 2009
Slide 24
Slide 24 text
assignment operators
operator example result same as
= var a = 5; 5
+= a += 5; 10 a = a + 5;
-= a -= 5; 0 a = a - 5;
*= a *= 2; 10 a = a * 2;
/= a /= 2; 2.5 a = a / 2;
%= a %= 4; 1 a = a % 4;
Thursday, September 10, 2009
Slide 25
Slide 25 text
comparison operators
operator meaning example result
equal to value 5 == 5 TRUE
equal to value
and type
true === 1 FALSE
!= not equal 5 != 4 TRUE
> greater than 5 > 4 TRUE
< less than 5 < 4 FALSE
>=
greater than
or equal to
5 >= 5 TRUE
<=
less than
or equal to
5 <= 5 TRUE
==
===
http://www.w3schools.com/JS/js_comparisons.asp
Thursday, September 10, 2009
Slide 26
Slide 26 text
logical operators
operator meaning example result
&& and 5 == 5 && 4 != 6 TRUE
|| or 4 == 6 || 5 == 5 TRUE
! not !(5 == 4) TRUE
Thursday, September 10, 2009
Slide 27
Slide 27 text
putting it all together
Thursday, September 10, 2009
Slide 28
Slide 28 text
var a = 5;
a += 3;
a
Thursday, September 10, 2009
Slide 29
Slide 29 text
var a = 5;
a += 3;
a // 8
Thursday, September 10, 2009
Slide 30
Slide 30 text
var a = 2;
var b = 5;
a * b;
Thursday, September 10, 2009
Slide 31
Slide 31 text
var a = 2;
var b = 5;
a * b; // 10
Thursday, September 10, 2009
Slide 32
Slide 32 text
var a = 2;
var b = 3;
var c = a + b;
var d = c * a;
d
Thursday, September 10, 2009
Slide 33
Slide 33 text
var a = 2;
var b = 3;
var c = a + b;
var d = c * a;
d // 10
Thursday, September 10, 2009
Slide 34
Slide 34 text
var blue = 'blue';
var red = 'red';
var colors = [blue, red];
colors
Thursday, September 10, 2009
Slide 35
Slide 35 text
var blue = 'blue';
var red = 'red';
var colors = [blue, red];
colors // ["blue","red"]
Thursday, September 10, 2009
Slide 36
Slide 36 text
var a = 5;
a = 6;
a = 7;
a -= 2;
a
Thursday, September 10, 2009
Slide 37
Slide 37 text
var a = 5;
a = 6;
a = 7;
a -= 2;
a // 5
Thursday, September 10, 2009
Slide 38
Slide 38 text
var person = {name:'Peyton Manning'}
person.name
Thursday, September 10, 2009
Slide 39
Slide 39 text
var person = {name:'Peyton Manning'}
person.name // "Peyton Manning"
Thursday, September 10, 2009
Slide 40
Slide 40 text
var tv_shows = ['Wipeout', 'How I Met Your Mother', 'Big Bang Theory'];
tv_shows[1] == 'How I Met Your Mother'
Thursday, September 10, 2009
Slide 41
Slide 41 text
var tv_shows = ['Wipeout', 'How I Met Your Mother', 'Big Bang Theory'];
tv_shows[1] == 'How I Met Your Mother' // true
Thursday, September 10, 2009
Slide 42
Slide 42 text
var a = 5;
var b = 4;
var check = a == 5 && b == 3
check
Thursday, September 10, 2009
Slide 43
Slide 43 text
var a = 5;
var b = 4;
var check = a == 5 && b == 3
check // false
Thursday, September 10, 2009
Slide 44
Slide 44 text
var a = 5;
var b = 4;
var check = a == 3 || b > 3
check
Thursday, September 10, 2009
Slide 45
Slide 45 text
var a = 5;
var b = 4;
var check = a == 3 || b > 3
check // true
Thursday, September 10, 2009
Slide 46
Slide 46 text
var a = 5 - 1;
a > 4
Thursday, September 10, 2009
Slide 47
Slide 47 text
var a = 5 - 1;
a > 4 // false
Thursday, September 10, 2009
Slide 48
Slide 48 text
time to program
http://www.w3schools.com/JS/tryit.asp?filename=tryjs_intro
+ - * / % = == === != && || ! += -= /= *=
Thursday, September 10, 2009