Intro to Javascript

Intro to JS

Intro to Javascript

Javascript, also known as ECMAScript 5.1, runs natively in all modern web browsers. Your web browser has a built-in javascript interpreter that reads and executes the code.

You can use the “JavaScript Console” REPL provided by
“Firefox Developer Tools” or “Chrome Developer Tools”
to write, run and test any small piece of JavaScript code/function/program.

Intro to Javascript

Javascript can be executed directly through the Developer Tools Console, or we can load/execute it as a script in HTML. Let's try both.

console.log("Hello World");

Intro to Javascript

Building Blocks:

Variables

Intro to Javascript

Variables

A variable is storage location paired with an associated symbolic name (an identifier). It contains some quantity or information referred to as a value. We use the variable name to reference the stored value.

var quantitySold = 5;
var price = 2.50;
var totalSales = quantitySold * price;

Intro to Javascript

var a;
var b = "Hello!";
var c = 1;

a

undefined

b

"Hello!"

c

1

identifier (name)

value

Variables

Declaration and Assigment:

Intro to Javascript

var a;
var b = "Hello!";
var c = 1;
b = false;
c = [c,2];

a

undefined

b

false

c

??

identifier (name)

value

Variables

Loose/Weak Typing:

Intro to Javascript

var a;
var b = "Hello!";
var c = 1;
b = b + c;
c = [c,2];

a

undefined

b

??

c

??

identifier (name)

value

Variables

Type Coercion:

Intro to Javascript

var y = ("5" == 5);
var z = ("5" === 5);

y

??

z

??

identifier (name)

value

Variables

Type Coercion:

Intro to Javascript

Variables

5 Primitive Types:

• undefined » undefined 
• boolean » true, false
• string » "i'm a string'
• number » 45
• null » null

Everything else is an object

Intro to Javascript

Control Statements

Intro to Javascript

Control Statements

if (condition1){

    // do something if condition1 met

} else if (condition2) {

    // do something else if condition2 met

} else {

    // do something else if previous conditions not met

}

Conditional

Intro to Javascript

Control Statements

var y = 0;
while (y < 10){
    console.log(y);
    y++;
}

Loops

for (var i = 0; i < 10; i++){
    console.log(i);
}

Intro to Javascript

<intro to Chrome Developer Tools>

HW: 

http://discover-devtools.codeschool.com/

Chapters 1-4

Intro to Javascript

Loop Exercise:

Write a loop that makes seven calls to console.log to output the following triangle: 

#
##
### 
#### 
##### 
###### 
#######

Intro to Javascript

Functions

Intro to Javascript

Functions

var myFirstFunction = function(input){
    return "hello " + input;
}

console.log(myFirstFunction("world"));
// hello world

console.log(mySecondFunction("How"));
// How does this work?

function mySecondFunction(input){
    return input + " does this work?";
}

Function Definition

Intro to Javascript

Functions

function addNumbers(num1, num2) {
  var localResult = num1 + num2;
  console.log("The local result is: " + localResult);
}
addNumbers(5, 7);
console.log(localResult);

var globalResult;
function addNumbers(num1, num2) {
  globalResult = num1 + num2;
  console.log("The global result is: " + globalResult);
}
addNumbers(5, 7);
console.log(globalResult);

Function Variable Scope

Intro to Javascript

Functions

function addNumbers(num1, num2) {
  var result = num1 + num2;
  console.log(result);
}

addNumbers(7, 21);
addNumbers(3, 10);
addNumbers(4, 5, 6, 7);
var y = 6;
var z = 99;
addNumbers(y,z);

Function Arguments

Intro to Javascript

Functions

function power ( base , exponent ) {
    if ( exponent == undefined )
        exponent = 2;
    var result = 1;
    for ( var count = 0; count < exponent ; count ++)
        result *= base ;
    return result ;
}

console . log ( power (4) ) ;
// → 16
console . log ( power (4 , 3) ) ;
// → 64

Optional Arguments

Intro to Javascript

Functions

function addNumbers(num1, num2) {
  var result = num1 + num2;
  if (arguments[2]){
      result += arguments[2];
  }
  console.log(result);
}

addNumbers(4, 5, 6);

'arguments' keyword

Intro to Javascript

<Function Exercises>

Intro to Javascript

Data Structures:

Objects and Arrays

Intro to Javascript

Objects and Arrays

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];

console.log(rainbowColors.length); // 7

console.log(rainbowColors[1]); // Orange

var arraysHoldAnything = ['string', ['array'], {object: 'object'}, 88, false];

Arrays

Intro to Javascript

Objects and Arrays

var friendsCountries = { 
    Litizie: 'Kenya', 
    Frank: 'Kenya', 
    Shawn: 'USA', 
    Walter: 'UK', 
    Hassan: 'Canada',
    "Sarah": 'Brazil'
};

console.log(friendsCountries['Litizie']); // Kenya
console.log(friendsCountries['Hassan']); // Canada
console.log(friendsCountries.Walter); // UK
console.log(friendsCountries.Sarah); // Brazil


friendsCountries.Moses = 'Uganda';
friendsCountries["Jackie"] = 'Nigeria';

Objects

Intro to Javascript

Objects and Arrays

var Robot = {
    name: 'eR42',
    model: 'Basic Medical Bot',
    homeHospital: 'Nairobi General',
    instructionSet: medRobotV14,
    heal: function(bodypart){.......},
    greet: function(patient){.......},
    sleep: function(wakeTime){.......}
};

Objects