INFO
JavaScript Creating Variables
var year;
var variablename;
var customerEmail;
var todaysDate;
var foo;
var x;
var problems99;
Should be:
> One Word
> No Spaces Allowed
Can be made of:
> letters, numbers, _ (underscore) and $ (dollar sign)
Can't start with numbers:
ex.
var 99problems;
Start > Examples
var year;
year = 2011;
or
var year = 2011; <-- best practice
or
year = 2011; <-- will work but not best practice
var x = 200;
var year;
var month;
var day;
==
var year, month, day;
var year = 2011;
var month = 10;
var day = 31;
==
var year = 2011, month = 10, day = 31;
Variable Data Types:
var myVariable;
integer
floating point number
text string
boolean
array
date
object
myVariable = 200; (200 number)
myVariable = "Hello"; (Hello Text or String)
myVariable = 'Hello'; (Hello Text or String, either single quote '' or double quote "")
myVariable = True; (Boolean Values, either True or False)
myVariable = False;
Conditional Code:
if ( condition) {
// code goes here
// ...
} else {
// otherwise, different code
if () {
// nested if
}
}
> : Greater Than
< : Less Than
== : Equal
=== : Equal
!= : Not Equal
{} : Braces : Code Block
() : Parenthesis
[] : Brackets
var amount = 500;
if ( amount < 1000 ) {
alert ("It's less than 1000");
} else {
}
Operators:
Arithmetic Operators: + - / *
= (single equal sigh = to set, command, to assign)
result = a + b;
score = score + 10; (add to variable0)
"or"
score += 10; (add to variable)
+=
-=
*=
/=
MDAS (Multiplication, Division, Addition and Subtraction)
result = 5 + 5 * 10;
result = 55
result = (5+5) * 10;
result = 100
Assignment and Equality
var a = 5;
var b = 10;
if ( a = b) {
//always true! since it's setting it!
}
= : assignment
== : equality
=== : strict equality
Example:
var a = 5;
var b = "5";
if (a == b) {
alert ("Yes, they're equal");
} else {
alert ("They're NOT equal");
}
Answer: they're equal, eventhough once is number and other is string since the value will be the same
var a = 5;
var b = "5";
if (a === b) {
alert ("Yes, they're equal");
} else {
alert ("They're NOT equal");
}
Answer: They're NOT equa. JavaScript will check both type and value.
Comparison
if (a == b) { ...
if (a != b) { ...
if (a === b) { ...
if (a !== b) { ...
if (a > b) { ...
if (a < b) { ...
if (a >= b) { ...
if (a <= b) { ...
Logical AND/OR
if ( a === b && c === d ) {...
if ( a === b || c === d) {...
if ( (a > b) && (c < d) ) {...
if (
(a > b)
&&
(c < d) ) {...
MODULUS: (remainder)
var year = 2003;
var remainder = year % 4; // remainder is 3
INCREMENT/DECREMENT
a = a + 1;
a += 1;
a++;
++a;
a = a - 1;
a -= 1;
a--;
--a;
PREFIX/ POSTFIX
var a = 5; //a=6
alert (++a); //a=6
var a = 5; //a=6
alert (a++); //a=5
TERNARY
condition ? true:false
TERNARY OPERATOR EXAMPLE:
var playerOne = 500;
var playerTwo = 600;
// sometime later
var highScore;
if (playerOne > playerTwo){
highScore = playerOne;
} else {
highScore = playerTwo;
}
Using Ternary:
//aternatively... condition ? true:false
var highScore = (playerOne > playerTwo) ? playerOne :
playerTwo;
console.log vs. alert
var foo = 10;
var bar = 20;
if ( foo < bar ){
alert("foo is less than bar");
alert("and here's the second message");
alert("and here's the third message");
}
var foo = 10;
var bar = 20;
if ( foo < bar ){
console.log("foo is less than bar");
console.log("and here's the second message");
console.log("and here's the third message");
}
console.log
console.debug
console.info //blue i icon
console.warn //yellow exclamation mark icon
console.error //red x mark icon
WHILE LOOP
var a = 1;
while (a < 10) {
console.log (a);
a++;
}
DO... WHILE LOOP
var a = 1;
do {
console.log(a);
a++;
} while (a < 10);
FOR LOOP
setup index : var i = 1
check condition : i < 10
increment index : i ++
for ( var i = 1 ; i < 10 ; i++) {
// do stuff
// do stuff
// do stuff
// etc...
}
BREAK : Will jump out of the loop
for ( var i = 1 ; i < 5000 ; i++) {
// do stuff...
// do stuff...
if (i == 101){
break;
}
// do stuff...
}
// break jumpst ouf the the loop
CONTINUE :
// continue moves back to the top
for ( var i = 1 ; i < 5000 ; i++) {
// do stuff...
// do stuff...
if (i % 5 == 0){
continue; //done with this iteration
}
// do second set of stuff
// do second set of stuff
}
FUNCTIONS in JavaScript
* function name cannot start with a number.
> calculateArea
> createMessage
> animateImage
function myFunction () {
console.log("We're in the function");
// loops, if statements, anythin!
// ...
}
//sometime later
myFunction ();
myFunction ();
myFunction ();
NOT: if it's in a function, it won't run unless you
call it.
WHERE TO DECLARE FUNCTIONS
> define function before you call them
function myOtherFunction (){
//lots of code
}
function myFunction(){
//lots of code
myOtherFunction();
}
myFunction();
FUNCTIONS WITH PARAMETERS
function myFunction ( x, y ) {
var myVar = x * y;
console.log(myVar);
// we can return values
return myVar;
}
myFunction (754,346);
myFUnction (123,-732);
alert ("Hello world"); // built-in JavaScript Function
var myresult = myFunction(6,9);
PARAMETER MISMATCH
function calculateLoan(amount,months,interest,name);{
//lots of code
}
myFunction(10000,60,7,"Sam Jones");correct
>amount=10000
>months=60
>interest=7
>name=Sam Jones
What if, additional parameters?
myFunction(10000,60,7,"Sam Jones", "extra");
//JavaScript will just ignore it.
What if, less that?
myFunction(10000,60);
// missing are passed as "undefined"
VARIABLE SCOPE
var outside function = Global Variable
var inside functino = Local Variable
function simpleFunction (){
//lots of code
foo = 500;
//lots of code
console.log(foo); //500
}
simpleFunction();
console.log(foo); undefined
var foo;
function simpleFunction (){
//lots of code
foo = 500;
//lots of code
console.log(foo); //500
}
simpleFunction();
console.log(foo); 500
var year;
var variablename;
var customerEmail;
var todaysDate;
var foo;
var x;
var problems99;
Should be:
> One Word
> No Spaces Allowed
Can be made of:
> letters, numbers, _ (underscore) and $ (dollar sign)
Can't start with numbers:
ex.
var 99problems;
Start > Examples
var year;
year = 2011;
or
var year = 2011; <-- best practice
or
year = 2011; <-- will work but not best practice
var x = 200;
var year;
var month;
var day;
==
var year, month, day;
var year = 2011;
var month = 10;
var day = 31;
==
var year = 2011, month = 10, day = 31;
Variable Data Types:
var myVariable;
integer
floating point number
text string
boolean
array
date
object
myVariable = 200; (200 number)
myVariable = "Hello"; (Hello Text or String)
myVariable = 'Hello'; (Hello Text or String, either single quote '' or double quote "")
myVariable = True; (Boolean Values, either True or False)
myVariable = False;
Conditional Code:
if ( condition) {
// code goes here
// ...
} else {
// otherwise, different code
if () {
// nested if
}
}
> : Greater Than
< : Less Than
== : Equal
=== : Equal
!= : Not Equal
{} : Braces : Code Block
() : Parenthesis
[] : Brackets
var amount = 500;
if ( amount < 1000 ) {
alert ("It's less than 1000");
} else {
}
Operators:
Arithmetic Operators: + - / *
= (single equal sigh = to set, command, to assign)
result = a + b;
score = score + 10; (add to variable0)
"or"
score += 10; (add to variable)
+=
-=
*=
/=
MDAS (Multiplication, Division, Addition and Subtraction)
result = 5 + 5 * 10;
result = 55
result = (5+5) * 10;
result = 100
Assignment and Equality
var a = 5;
var b = 10;
if ( a = b) {
//always true! since it's setting it!
}
= : assignment
== : equality
=== : strict equality
Example:
var a = 5;
var b = "5";
if (a == b) {
alert ("Yes, they're equal");
} else {
alert ("They're NOT equal");
}
Answer: they're equal, eventhough once is number and other is string since the value will be the same
var a = 5;
var b = "5";
if (a === b) {
alert ("Yes, they're equal");
} else {
alert ("They're NOT equal");
}
Answer: They're NOT equa. JavaScript will check both type and value.
Comparison
if (a == b) { ...
if (a != b) { ...
if (a === b) { ...
if (a !== b) { ...
if (a > b) { ...
if (a < b) { ...
if (a >= b) { ...
if (a <= b) { ...
Logical AND/OR
if ( a === b && c === d ) {...
if ( a === b || c === d) {...
if ( (a > b) && (c < d) ) {...
if (
(a > b)
&&
(c < d) ) {...
MODULUS: (remainder)
var year = 2003;
var remainder = year % 4; // remainder is 3
INCREMENT/DECREMENT
a = a + 1;
a += 1;
a++;
++a;
a = a - 1;
a -= 1;
a--;
--a;
PREFIX/ POSTFIX
var a = 5; //a=6
alert (++a); //a=6
var a = 5; //a=6
alert (a++); //a=5
TERNARY
condition ? true:false
TERNARY OPERATOR EXAMPLE:
var playerOne = 500;
var playerTwo = 600;
// sometime later
var highScore;
if (playerOne > playerTwo){
highScore = playerOne;
} else {
highScore = playerTwo;
}
Using Ternary:
//aternatively... condition ? true:false
var highScore = (playerOne > playerTwo) ? playerOne :
playerTwo;
console.log vs. alert
var foo = 10;
var bar = 20;
if ( foo < bar ){
alert("foo is less than bar");
alert("and here's the second message");
alert("and here's the third message");
}
var foo = 10;
var bar = 20;
if ( foo < bar ){
console.log("foo is less than bar");
console.log("and here's the second message");
console.log("and here's the third message");
}
console.log
console.debug
console.info //blue i icon
console.warn //yellow exclamation mark icon
console.error //red x mark icon
WHILE LOOP
var a = 1;
while (a < 10) {
console.log (a);
a++;
}
DO... WHILE LOOP
var a = 1;
do {
console.log(a);
a++;
} while (a < 10);
FOR LOOP
setup index : var i = 1
check condition : i < 10
increment index : i ++
for ( var i = 1 ; i < 10 ; i++) {
// do stuff
// do stuff
// do stuff
// etc...
}
BREAK : Will jump out of the loop
for ( var i = 1 ; i < 5000 ; i++) {
// do stuff...
// do stuff...
if (i == 101){
break;
}
// do stuff...
}
// break jumpst ouf the the loop
CONTINUE :
// continue moves back to the top
for ( var i = 1 ; i < 5000 ; i++) {
// do stuff...
// do stuff...
if (i % 5 == 0){
continue; //done with this iteration
}
// do second set of stuff
// do second set of stuff
}
FUNCTIONS in JavaScript
* function name cannot start with a number.
> calculateArea
> createMessage
> animateImage
function myFunction () {
console.log("We're in the function");
// loops, if statements, anythin!
// ...
}
//sometime later
myFunction ();
myFunction ();
myFunction ();
NOT: if it's in a function, it won't run unless you
call it.
WHERE TO DECLARE FUNCTIONS
> define function before you call them
function myOtherFunction (){
//lots of code
}
function myFunction(){
//lots of code
myOtherFunction();
}
myFunction();
FUNCTIONS WITH PARAMETERS
function myFunction ( x, y ) {
var myVar = x * y;
console.log(myVar);
// we can return values
return myVar;
}
myFunction (754,346);
myFUnction (123,-732);
alert ("Hello world"); // built-in JavaScript Function
var myresult = myFunction(6,9);
PARAMETER MISMATCH
function calculateLoan(amount,months,interest,name);{
//lots of code
}
myFunction(10000,60,7,"Sam Jones");correct
>amount=10000
>months=60
>interest=7
>name=Sam Jones
What if, additional parameters?
myFunction(10000,60,7,"Sam Jones", "extra");
//JavaScript will just ignore it.
What if, less that?
myFunction(10000,60);
// missing are passed as "undefined"
VARIABLE SCOPE
var outside function = Global Variable
var inside functino = Local Variable
function simpleFunction (){
//lots of code
foo = 500;
//lots of code
console.log(foo); //500
}
simpleFunction();
console.log(foo); undefined
var foo;
function simpleFunction (){
//lots of code
foo = 500;
//lots of code
console.log(foo); //500
}
simpleFunction();
console.log(foo); 500
Simple Code
<html>
<head>
<title>Simple Page</title>
</head>
<body>
<h1>Simple HTML Page</h1>
<p>
This is a very simple HTML page.
</p>
<p>It's about as basic as they come. It has:<p>
<ul>
<li>An H1 Tag</li>
<li>Two paragraphs</li>
<li>An unordered list</li>
</ul>
<script>
var year = 2013; //normally created
var month = "april"; //single quote or double quote to declare text
var day = 8;
var nextmonth = 'may'; //single quote or double quote to declare text
var MyBoolean = true;
var amount = 100;
var result = 5 + 5 * 10; //55
var result2 = (5 + 5) * 10; // 100
var a = 5;
var b = 9;
var multiValues = [5, (2*3), "Text", 1400];
var reverseValues = multiValues.reverse();
//var year = 2013, month = "april", day = 8; //shortcut
/*
var year;
year=2013;
*/
alert("Hello, World!");
alert(year);
alert(month);
alert(day);
//alert(year,month,day);
//console.log(year,month,day);
alert(nextmonth);
alert(MyBoolean);
alert(result);
alert(result2);
alert(++a);
alert(b++); //normally causes bug alert first the previous value before incrementing
alert(multiValues[0]); //5
alert(multiValues.sort);
alert(multiValues.length);
alert(multiValues.join);
alert(reverseValues);
/* TERNARY "condition ? true:false;"
var playerOne = 500;
var playerTwo = 600;
var HighScore = (playerOne > playerTwo)? playerOne:playerTwo;
*/
// != Not Equal
if (amount == 101){ // (= set/define) (== equality ) (=== strict equality)
alert("It's 100");
} else {
alert("It's NOT");
}
//WHILE Loop
var a = 1;
while (a < 10){
a++;
alert(a);
//console.log(a);
}
// DO WHILE -- NOT COMMON
// FOR LOOP
for (var i = 1 ; i < 10 ; i++ ){
alert(i);
//console.log(a);
}
//break - go after loop
//continue - go at top
for (var i = 1 ; i < 20 ; i++ ){
// do stuff
//do stuff
if (i == 11){
break;
//continue;
}
alert(i);
//console.log(a);
}
function MyFunction () {
var a = 1;
while (a < 10){
a++;
alert(a);
//console.log(a);
}
}
function MyFunction2 (x,y) {
var MyVar = x*y;
console.log(MyVar);
}
MyFunction();
MyFunction2(10,10);
</script>
</body>
</html>
<head>
<title>Simple Page</title>
</head>
<body>
<h1>Simple HTML Page</h1>
<p>
This is a very simple HTML page.
</p>
<p>It's about as basic as they come. It has:<p>
<ul>
<li>An H1 Tag</li>
<li>Two paragraphs</li>
<li>An unordered list</li>
</ul>
<script>
var year = 2013; //normally created
var month = "april"; //single quote or double quote to declare text
var day = 8;
var nextmonth = 'may'; //single quote or double quote to declare text
var MyBoolean = true;
var amount = 100;
var result = 5 + 5 * 10; //55
var result2 = (5 + 5) * 10; // 100
var a = 5;
var b = 9;
var multiValues = [5, (2*3), "Text", 1400];
var reverseValues = multiValues.reverse();
//var year = 2013, month = "april", day = 8; //shortcut
/*
var year;
year=2013;
*/
alert("Hello, World!");
alert(year);
alert(month);
alert(day);
//alert(year,month,day);
//console.log(year,month,day);
alert(nextmonth);
alert(MyBoolean);
alert(result);
alert(result2);
alert(++a);
alert(b++); //normally causes bug alert first the previous value before incrementing
alert(multiValues[0]); //5
alert(multiValues.sort);
alert(multiValues.length);
alert(multiValues.join);
alert(reverseValues);
/* TERNARY "condition ? true:false;"
var playerOne = 500;
var playerTwo = 600;
var HighScore = (playerOne > playerTwo)? playerOne:playerTwo;
*/
// != Not Equal
if (amount == 101){ // (= set/define) (== equality ) (=== strict equality)
alert("It's 100");
} else {
alert("It's NOT");
}
//WHILE Loop
var a = 1;
while (a < 10){
a++;
alert(a);
//console.log(a);
}
// DO WHILE -- NOT COMMON
// FOR LOOP
for (var i = 1 ; i < 10 ; i++ ){
alert(i);
//console.log(a);
}
//break - go after loop
//continue - go at top
for (var i = 1 ; i < 20 ; i++ ){
// do stuff
//do stuff
if (i == 11){
break;
//continue;
}
alert(i);
//console.log(a);
}
function MyFunction () {
var a = 1;
while (a < 10){
a++;
alert(a);
//console.log(a);
}
}
function MyFunction2 (x,y) {
var MyVar = x*y;
console.log(MyVar);
}
MyFunction();
MyFunction2(10,10);
</script>
</body>
</html>