Tags : JavaScript Intro

This is a quick intro to JavaScript. The most used programming language on the web. Your web browser (Google Chrome, Firefox, Internet Explorer or Safari) right now is running JavaScript code in the background.

If you don't have Google Chrome please download it Here.

In some of the example below I use JSFiddle.net for quicker demonstrations purposes.



Chrome Console:

Open the console in Chrome with following command:

Windows/Linux: Control + Shift + j

Mac: Command + Alt + j

Comments

// This is a one line comment in JavaScript. This line of code will not run.
// You create comments by adding "//" before every line.
// Comments are important to document code or explain things.

/*
This
is
a multiline comment.  Instead of writing "//" before every line
*/

Arithmetic

// try typing these directly on your console, right after ">" and press enter.

// addition

1 + 1

// Press enter. The result should be:

> 2

// Multiplication

2 * 2

> 4

// Division

10 / 5

> 2

// Modulus or % gives the remainder of a division

10 % 2

> 0

// remainder is 0

11 % 2

> 1

// remainder is 1

Strings

// Strings: A string can be any text inside double or single quotes

"Hello"

// "hello" is a string, you can also add strings together.

"Hello" + "Everyone"

> "HelloEveryone"

// "1" is also a string. The number 1 is not the same as the string "1".
// Try adding "1" + "1" together.

"1" + "1"

// this is equal to "11"

Booleans

// Booleans are either true or false

1 + 1 === 2

// true

1 + 1 === 3

// false

"1" === 1

// false

1 < 2

// true

2 < 2

// false

2 <= 2

// true, <= this is less than or equal to.  The inverse is >= greater than or equal.

11 % 2 === 1

// true

10 % 2 === 0

// true

// Exercise hint 1: Maybe something like this could be useful.

Variables

// Variables
// We can save a value in a variable for later use.
// Let's create the variable foo and assign the value 99 to it.

var foo = 99;

// let's call foo in the console.

foo

// You have called your variable foo and its value is 99
// Now, you can manipulate the value in foo if you like.

foo = foo + 1;

// call foo again and see what the value is now.

Conditional Statements

Conditional statements are used to perform different actions based on different conditions.

An if Statement is a type of conditional statement.

if(1 + 1 === 2){
  console.log("Hello");
}

// Since 1 + 1 === 2 is true, you should see "Hello" on the console.


if(10 / 5 === 3){
  console.log("Hello");
}

// Since 10 / 5 === 3 is false, you should NOT see "Hello" on the console.

An else Statement is also type of conditional statement.

// You can also add an else statement after the if statement
// else statements only run if the if statement is false.

if(10 / 5 === 3){
  console.log("Hello");
} else {
  console.log("10 divided by 5 does not equal 3, this is why you are seeing this message in your log.")
}

For Loops

Imagine having to write something a hundred times. For example, logging the numbers from 1 to 100. Manually, you would write something like this:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
...
console.log(100);

These are 100 lines of code, way too long. We could use a for loop to cut down on all the work.

/*
for loops take in 3 arguments
first: var i = 1 is the starting point of the loop
Second: i <= 100 sets the limit
Third: i = i + 1 adds 1 to i everytime the loop starts
*/

for(var i = 1; i <= 100; i = i + 1){
  console.log(i);
}

/*
We need to increment i by one to make the loop work.
If you leave i at the initial value of 1 the second argument
i <= 100 will always be true (since i is 1, 1 will always be less than equal 100).
If i <= 100 is always true, the loop would go on forever and crash your computer.
So this is why we need to have a counter that increments in the loop (i = i + 1).
Once i is equal to 101, by adding one to i a hundred times.  The second argument would be false and
loop would terminate.  This is why we need the third argument i = i + 1
You can also write i = i + 1 like this i++
*/

// We can also have if statements inside a for loop

for(var i = 1; i <= 100; i = i + 1){
  if ( i + 5 === 10){
    console.log("Is the variable i currently 5?");
    // let's check and see, remember this line is a comment
    console.log(i);
    // check your log and see what i was.
  }
}

// Run the for loop above and see what it logs in the console.
// Remember to keep the right notation.  A missing parenthesis or curly bracket "{"
// will break your code and throw an error.

// this loop ran 100 times but only ran the if block of code when i was 5 and
// it skipped the if block of code for all the other numbers.


// Through in an else statement inside the for loop too.

for(var i = 1; i <= 5; i = i + 1){
  if ( i + 5 === 10){
    console.log("Who ate my taco?");
  } else {
    console.log(i);
  }
}

// Exercise hint 2: use a for loop with if and else statements to log the exercise problem.
// running the above loop logs the following:

> 1
> 2
> 3
> 4
> "Who ate my taco?"

// this loop ran 5 times but only when i = 5 the if statement is true and
// it logged: "Who ate my taco?",  else ran for all the other numbers logging only the variable i.

You can also use else if statements for more control of the flow of code.

if(some condition is true){
  console.log("this");
} else if (some condition is true){
  console.log("this will run only if the first if condition is false and the else if condition is true");
} else {
  console.log("this will only run if the if statement and else if statement is false")
}

Logical Operators

var x = 1;
var y = 2;

// && is for "and" and both conditions have to be met to be evaluate to true
// || is for "or" and only one of the conditions has to be met to evaluate to true

if(x === 1 && y > 1){
  console.log("this code will run");
}

if (x === 2 || y > 1){
  console.log("So will this code run");
}

Exercise:

 Write some code that loops through the numbers from 1 to 100, if the number is divisible by 3 print "Fizz". If the number is divisible by 5 print "Buzz". If the number is divisible by 5 AND 3 print "FizzBuzz", else just print the number.

Sample output:

  • > 1
  • > 2
  • > "Fizz"
  • > 4
  • > "Buzz"
  • > "Fizz"
  • > 7
  • > 8
  • > "Fizz"
  • > "Buzz"
  • > 11
  • > "Fizz"
  • > 13
  • > 14
  • > "FizzBuzz"
  • > 16
  • > ...

Then go to JSFiddle.net and create a new fiddle with your code. Run it and test if the output is correct.

If you are getting errors, you might be missing some "}", "(" or ";" on your code.