JavaScript Part 1

Getting started with an intro to functions,
variables and operators

As the owner of the thriving store, Planet Robots, you have to make sure you have a top notch website.

JavaScript Exercise Overview

You'll want to do things like offer online shopping and print shipping labels!

You'll also want to make sure that everything works properly as well.

That means customers can't submit empty forms and product totals are calculated properly in their shopping carts.

In order to create a website that can handle these requirements, we will need to learn how to use variables and operators.

JavaScript, meet HTML

JavaScript can modify HTML

JavaScript can add HTML

JavaScript can remove HTML

JavaScript can animate HTML

JavaScript, meet HTML

JavaScript can modify HTML

Try it, click the Run button:

SCRIPT
document.body.innerHTML = 'Hi!';
SCRIPTEND

JavaScript, meet HTML

If we view source on the page, we'll see HTML like below.

Whatever was in the body before has been completely replaced!

<html>
  <head></head>
  <body>Hi!</body>
</html>

JavaScript, meet HTML

Try it on Google.

Your mentor will show you how to open up the JavaScript Console (Opt+Cmd+j on mac, Alt+Ctrl+j on pc)

Then paste this code:

document.body.innerHTML = 'Hi!';

JavaScript, meet HTML

See how document.body.innerHTML relates to the HTML?

<!-- `document` is the entire page -->

<html>
  <head></head>
  <!-- `document.body` is the body -->
  <body>
    <!-- `document.body.innerHTML` is the HTML in the body -->
    Hi!
  </body>
</html>

JavaScript, meet HTML

We can add a bunch of HTML using innerHTML.

Try adding your name along with some more HTML tags below:

SCRIPT
document.body.innerHTML = '<div><u>Hi!</u></div>';
SCRIPTEND

Assignment Operators (Reference)

Assignment Operators, like equals (=), assign whatever is on the right to whatever is on the left.

document.body.innerHTML = "Hi!";

Read the above statement like this:

document dot body dot innerHTML equals Hi!

Assignment Operators (Reference)

Remember that the left hand side gets completely replaced.

In the example below, the body will only contain "morning", since the second statement completely replaces whatever was there before.

Try running this code:

SCRIPT
document.body.innerHTML = 'good';
document.body.innerHTML = 'morning';
SCRIPTEND

Assignment Operators (Reference)

Rather than replacing the body with "morning" we can append.

To do that we would use plus equals (+=).

The plus equals assignment operator adds the right side to the left.

SCRIPT
document.body.innerHTML = 'good';
document.body.innerHTML += 'morning';
SCRIPTEND

JavaScript, meet HTML

Now we'll add in some HTML again.

Play around with the code below, add some more HTML and a few extra lines of statements

SCRIPT
document.body.innerHTML = '<h1>Good Morning</h1>';
document.body.innerHTML += '<div>I hope you are ready to code</div>';
SCRIPTEND

Variables

Variables are used to store values so you can use them later.

Variables How-to

Declare variables with the keyword var.

var twitter;

Assign a value to the variable using the equals (=) operator.

twitter = "@gavinuhma";

Now the computer will remember my twitter!

Take note that the value of the variable is written between quotes.
More on this soon.

Variables (cont'd)

In a web checkout form that asks for your name and address, variables can be used to store this information. The stored information can then be used to create things like shipping labels.

Statements

End a statement with a semicolon (;).

Statements are commands that tell the computer what to do.
Ending the statement with a semicolon is like ending a sentence
with a period. It tells the computer that the statement is done.

You can also declare a variable and its value in one statement.

var twitter;
twitter = "@gavinuhma";

var twitter = "@gavinuhma";

Variables: Say My Name

Let's try creating some variables.

Below is an example of a variable for your name. Display the value using document.body.innerHTML.

SCRIPT

  var name = "YOUR_NAME_HERE";
  document.body.innerHTML = name;

SCRIPTEND

Assigning Variables

IMPORTANT!

Using the equals (=) symbol in Javascript is NOT the same as in math.

var total = 1 + 1 means:
evaluate everything to the right of the equals sign (e.g. 1 + 1),
then assign this value (e.g. the number 2) to the variable on the left side.

You will see later that we can re-assign new values to an existing variable.

Various Variables

Variables can hold different kinds of values. We've been using strings so far but variables can also hold other kinds of values.

1. Numeric variable (integers & decimals)

var someIntegerNumber = 10;
var someDecimalNumber = 10.5;

2. Boolean variable (true/false)

var isSaturday = false;
var isSunday = true;

3. String variable (letters, words & sentences)

var singleWordString = "hello";
var sentenceString = "Hello, good day to you!";
var numberString = "10";

Only string values are written inside single or double quotes ('string' or "string").

Variables: Tips & Best Practices

Variables can't contain spaces. Use a convention called camel case.
Every new word is capitalized and the result looks likeCamelHumps.

JavaScript is case sensitive (uppercase and lowercase letters are treated differently) so variable names are also case sensitive.

Another convention is to use underscores to_separate_words. This is common in other programming languages (like PHP).

SCRIPT

  // We might read this as "greet me" but
  // small differences make a big difference to JavaScript
  var greetme = "Hello, what's your name?";
  var greetMe = "Bonjour, quel est ton nom?";
  var greet_me = "Hola, ¿cómo te llamas?";

  // test our different variables by outputting them to the page
  document.body.innerHTML = "<div>greetme: " + greetme + "</div>";
  document.body.innerHTML += "<div>greetMe: " + greetMe + "</div>";
  document.body.innerHTML += "<div>greet_me: " + greet_me + "</div>";

SCRIPTEND

Variables: Tips & Best Practices

When naming a variable, it's best to give it a descriptive name.

It makes it easier to see, at a glance, what kind of value that variable is going to hold.

This is especially useful when sharing code with others who may not use the same kinds of abbreviations.

var firstName; ← Clear that first name will go here.
var fn; ← Not as obvious as firstName.
var x; ← Not clear at all.

Variables: Tips & Best Practices

Variables cannot start with a number or any special characters except for underscores (_) and dollar signs ($).

Although it's valid to use underscore or a dollar sign, they should only be used in special circumstances.

SCRIPT
  
  // A variable starting with a number is not valid.
  // A "silent" error will occur -- nothing happens when we press Run.
  var 3hundred = 300;
  document.body.innerHTML = 3hundred;

  // However, when we open up the Chrome console (Alt+Cmd/Ctrl+J),
  // we can see the browser complain of a 
  // "Uncaught SyntaxError: Unexpected token ILLEGAL"

  // A variable can start with a $ or _
  var $dalmations = 1001;
  document.body.innerHTML += $dalmations;

SCRIPTEND

Whitespace in JavaScript

Whitespace refers to blank characters and includes spaces, tabs and line breaks.

JavaScript ignores whitespace except when used in a string.

// both statements are the same to JavaScript
var name="Christina";
var name = "Christina";

SCRIPT

  // A test to show whitespace in use 
  // Remember that browsers ignore extra whitespace in HTML!
  // Use "Inspect Element" to verify that there is indeed whitespace
  document.body.innerHTML = "Whitespace in a string.";
  document.body.innerHTML += " Whitespace     in    a    string.";

SCRIPTEND

Comments in JavaScript

Sometimes you want to write notes to yourself (and others!!) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them.

// This is how you leave a single line comment.

// You can write many single line comments.
// Just make sure to add the double slash
// for every new line.

Here's another way to comment larger blocks of text.

/* This is how you leave
multi-line comments for when you
want to write a longer message */

Multi-line comments are great for "hiding" large blocks of code so you can try something new without erasing your old code.

Arithmetic Operators (Reference)

We can also use JavaScript to do math using arithmetic operators.

Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (\) for division.

SCRIPT

  document.body.innerHTML = "Addition: ";
  document.body.innerHTML += (20 + 20);

  document.body.innerHTML += "<br />Subtraction: ";
  document.body.innerHTML += (20 - 20);

  document.body.innerHTML += "<br />Multiplication: ";
  document.body.innerHTML += (20 * 20);

  document.body.innerHTML += "<br />Division: ";
  document.body.innerHTML += (20 / 20);

SCRIPTEND

Arithmetic Operators and Variables

Getting JavaScript to do math can be very useful.
For example, we can use it to calculate totals in a shopping cart form.

Instead of using just numbers, JavaScript can do math using variables with numerical values.

Try it, set totalPrice to be tshirtPrice plus (+) androidPrice

SCRIPT

  var tshirtPrice = 25;
  var androidPrice = 10;

  //var totalPrice;
  //document.body.innerHTML = totalPrice;

SCRIPTEND

Mini-exercise (5-10 minutes):
Totals and Discounts

Someone has checked out of our online store attempting to buy 1 t-shirt and 1 Android plushie.

Apply some arithmetic operations to get the final total after applying a 15% discount.

Steps:

Calculate subTotal given tshirtPrice and androidPrice
Calcuate discountAmount given subTotal and discountPercentage
Calcuate finalTotal given subTotal and discountAmount

<script>
  var tshirtPrice = 25;
  var androidPrice = 10;
  var discountPercentage = 0.15;

  var subTotal;
  //subTotal = **********
  document.body.innerHTML = "Sub-Total: " + subTotal;
  document.body.innerHTML += "<br />";

  var discountAmount;
  //discountAmount = **********
  document.body.innerHTML += "Discount Amount: " + discountAmount;
  document.body.innerHTML += "<br />";

  var finalTotal;
  //finalTotal = **********
  document.body.innerHTML += "Final Total: " + finalTotal;
</script>

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

Arithmetic Operators: Numbers vs. Strings

Remember how there are different variable types? Arithmetic operators can only be performed on numerical values.

But numbers can come disguised as strings so be careful!

When the addition (+) operator is used on strings, it doesn't "add" values, it concatenates them.

Try it, change num1 to a string:

SCRIPT

  var num1 = 20;
  var num2 = 13;

  document.body.innerHTML = num1 + num2;

SCRIPTEND

Concatenation

Unlike the other arithmetic operators, the (+) symbol has another purpose other than adding numbers. It is used to join strings together, also known as concatenation. You can concatenate variables, strings or a combination of both.

<script>
  document.body.innerHTML = "Hello " + "Christina." + "<br />";

  var greeting = "Hello";
  var name = " Pearl.";
  document.body.innerHTML += greeting + name;

  document.body.innerHTML += "<br />" + greeting + " ladies learning Javascript.";

</script>

Concatenation and Strings

If you use the (+) operator with only numerical values, it will add the values. Otherwise, it will combine the outputs as a string.

<script>
  //Addition with the + operator
  var tshirtPrice = 25;
  var androidPrice = 10;
  var shoppingTotal = tshirtPrice + androidPrice;
  document.body.innerHTML = shoppingTotal;
  document.body.innerHTML += "<br />";

  //Concatenation with the + operator
  //document.body.innerHTML += "Your total is: " + "$" + shoppingTotal;
  //document.body.innerHTML += "<br />";

  //no nos
  //document.body.innerHTML += "Your total is:" * shoppingTotal;
  //document.body.innerHTML += "<br />";
  //document.body.innerHTML += "$" + 20 + 1;
</script>

Concatenation Practice

Let's practice concatenating using variables and strings.

<script>
  var faveFood = "Spaghetti";

  // using the variable "faveFood", update the "sentence"
  // variable to say "My favorite food is ********."

  // var sentence = 
  document.body.innerHTML = sentence;
</script>

Re-assigning Variables

Even after a value has been set for the first time, we can still overwrite it and re-assign a new value.

For example, we may want to increase or decrease values.

SCRIPT

  // Declare and initialize the variable with a default value
  var numberOfCookies = 0;
  document.body.innerHTML = "I started off with " + numberOfCookies + " cookies.<br />";
  
  // Add 1 to the current value of the variable, 
  // then re-assign the new value to the same variable
  numberOfCookies = numberOfCookies + 1;
  document.body.innerHTML += "I baked a cookie. Now I have " + numberOfCookies + " cookie.<br />";
  
  // Subtract 1 from the current value of the variable, 
  // then (once again) re-assign the new value to the same variable
  numberOfCookies = numberOfCookies - 1;
  document.body.innerHTML += "I just ate a cookie. Now I have " + numberOfCookies + " left.";

SCRIPTEND

JavaScript Part 1

JavaScript Exercise Overview

JavaScript, meet HTML

JavaScript, meet HTML

JavaScript, meet HTML

JavaScript, meet HTML

JavaScript, meet HTML

JavaScript, meet HTML

Assignment Operators (Reference)

Assignment Operators (Reference)

Assignment Operators (Reference)

JavaScript, meet HTML

Variables

Variables How-to

Variables (cont'd)

Statements

Variables: Say My Name

Assigning Variables

Various Variables

Variables: Tips & Best Practices

Variables: Tips & Best Practices

Variables: Tips & Best Practices

Whitespace in JavaScript

Comments in JavaScript

Arithmetic Operators (Reference)

Arithmetic Operators and Variables

Mini-exercise (5-10 minutes): Totals and Discounts

Arithmetic Operators: Numbers vs. Strings

Concatenation

Concatenation and Strings

Concatenation Practice

Re-assigning Variables

Mini-exercise (5-10 minutes):
Totals and Discounts