Introduction to JavaScript

Let's Look Back

Photo credit: Deepak Bhatia cc

Code Search

In this code, spot the comments, variables, and operator.

var billPreTip = 10;
var tipPercent = 0.15; //Can be changed
var billTip = billPreTip * tipPercent;
var receipt   = 'Meal: ' + billPreTip + ' Tip: ' + billTip +
' Total: ' + (billPreTip + billTip);
console.log(receipt);

Functions

Functions are separable, reusable pieces of code.

Photo credit: Rick Payette cc

Declaring Functions

To declare (create) a function, you give it a name. You then include all the code for the function inside curly brackets:

function turtleFacts() {
  console.log('A turtle\'s lower shell is called a plastron.');
  console.log('Turtles belong to the order Testudines');
}

Function can have multiple lines.

Using Functions

To use a function, just type its name, followed by parenthesis.

 turtleFacts();

We'll talk about what can go inside those parenthesis in a minute! For now, leave them empty.

What's going on here?

A function is a group of code you can reuse many times. Whenever you call a function by using it's name, you tell the browser to run the code inside the function.

You must declare a function before you can use it.

Let's Develop It

Write a function that outputs a sentence. Then call that function later in your code.

Arguments

Functions can accept input values, called arguments.

function callKitten (kittenName){
  console.log('Come here, ' + kittenName + '!');
}
callKitten ('Fluffy'); //outputs 'Come here, Fluffy!'

function addNumbers(a, b){
  console.log(a + b);
}
addNumbers(5,7); //outputs 12
addNumbers(9,12); //outputs 21

Arguments

You can also pass variables into functions. These variables do not need to have the same name as the function arguments.

function addOne(inputNumber){
  var newNumber = inputNumber + 1;
  console.log('<p>You now have ' + newNumber);
}
//Declare variables
var numberOfKittens = 5;
var numberOfPuppies = 4;
//Use them in functions
addOne(numberOfKittens);
addOne(numberOfPuppies);

Let's Develop It

Last week, you wrote a simple program to combine a first name and a last name. Put that code inside a function. Then update the function to accept the first and last name as arguments.

Returning Values

You can have a function give you back a value, to use later.

function square(num) {
  return num * num;
}
console.log(square(4));   // outputs '16'.
var squareOfFive = square(5); // will make the variable squareOfFive equal 25.

Return will immediately end a function.

Let's Develop It

Add a return statement to your name function. Use that function to set the value of a variable.

Variable Scope

The scope of a variable is how long the computer will remember it.

Photo credit: _vikram cc

Global Scope

A variable declared outside a function has a global scope and can be accessed anywhere, even in a function.

var awesomeGroup = 'Girl Develop It'; //Global scope
function whatIsAwesome() {
  console.log (awesomeGroup + ' is pretty awesome.'); //Will work
}
whatIsAwesome();

Local Scope

A variable declared within a function has a local scope and can only be accessed within that function.

function whatIsAwesome() {
  var awesomeGroup = 'Girl Develop It'; //Local scope
  console.log ('I made a variable called awesomeGroup with a value of ' + awesomeGroup); //Will work
}
whatIsAwesome();
console.log (awesomeGroup + ' is pretty awesome.'); //Won't work

Boolean Variables

Photo credit: elycefeliz cc

Boolean Variables

Boolean variables represent the logical values True and False

var catsAreBest = true;
var dogsRule = false;

If you try to use another variable as a boolean, JavaScript will guess. The number 0, the empty string '', undefined, and null are considered false, everything else reads as true.

Control Flow

Photo credit: DennisM2 cc

The if statement

Use if to decide which lines of code to execute, based on a condition.

if (condition) {
  // statements to execute
}

var bananas = 5;
if (bananas > 0) {
  console.log ('You have some bananas!');
}

Comparison Operators

Watch out!

Don't mix up = and ==

Photo credit: Eugene Zemlyanskiy cc

Let's Develop It

Make a variable called "temperature." Write some code that tells you to put on a coat if it is below 50 degrees.

Even more control flow

Photo credit: Thomas Hawk cc

The if/else statement

Use else to provide an alternate set of instructions.

var age = 28;
if (age >= 16) {
  console.log ('Yay, you can drive!');
} else {
  console.log ('Sorry, but you have ' + (16 - age) +
  ' years until you can drive.');
}

The if/else if/else statement

If you have multiple conditions, you can use else if.

var age = 20;
if (age >= 35) {
  console.log('You can vote AND hold any place in government!');
} else if (age >= 25) {
  console.log('You can vote AND run for the Senate!');
} else if (age >= 18) {
  console.log('You can vote!');
} else {
  console.log('You can\'t vote, but you can
  still write your representatives.');
}

Let's Develop It

Modify your "wear a coat" code for these conditions:

1. If it is less than 50 degrees, wear a coat.
2. If it is less than 30 degrees, wear a coat and a hat.
3. If it is less than 0 degrees, stay inside.
4. Otherwise, wear whatever you want.

Logical Operators

Using logical operators

You can use these operators to combine conditions.

var bananas = 5;
if (bananas >=2 && bananas <7) {
  console.log ('You have a reasonable number of bananas');
} else {
  console.log ('Check your banana supply');
}

Let's Develop It

Add a logical operator to your what to wear program.

You did it!

Photo credit: OnceAndFutureLaura cc

Resources

• JavaScript Guide, from the Mozilla Developers Network.
• Code Academy, with interactive JavaScript lessons to help you review.

Questions?