Javascript Basics

Created on December 28, 2018

Tony Lea tnylea

In this course we are going to teach you all about Javascript basics. You will learn about variables, operators, conditional statements, loops, functions, objects, arrays, and so much more.

This course is very short and simple to go through in order to teach you the basics of Javascript. You can find the course break down below.

1. Introduction

In this video you'll be given an introduction into what you can expect in this course.

2. Using Javascript

In this video you will learn how to include javascript in your pages and we will also show you how to output content using javascript.

Including Javascript in your pages

There are a couple ways you can include javascript in your pages which include adding the javascript to the head or body of your document. Below is an example of adding javascript to the head of your document:

<!DOCTYPE html>
<html>
<head>
	<title>Javascript Basics</title>
	<script>
		document.write("Hello Javascript");
	</script>
</head>
<body>

</body>
</html>

Additionally, you can include javascript in the body of your document. Typically you would include this javascript before the ending </body> tag like the following:

<!DOCTYPE html>
<html>
<head>
	<title>Javascript Basics</title>
</head>
<body>

	<script>
		document.write("Hello Javascript");
	</script>
</body>
</html>

Lastly, you can include your javascript by referencing an external file:

<!DOCTYPE html>
<html>
<head>
	<title>Javascript Basics</title>
</head>
<body>

	<script src="main.js"></script>
</body>
</html>

And in the example above you would need to create a new file called main.js and add some javascript to that file.

Output content using Javascript

There are multiple ways to output content using javascript. Some of the more typical ways to output text to the screen is by using document.write(), alert(), and console.log(). Checkout each of the examples below: 

document.write() - add the text inside the write() function to the body of your page.

document.write("Hello Javascript");

alert() - show a prompt alert to the user.

alert("Hello Javascript");

console.log() - write the text or data to the developer tools console. This is typically used for debugging.

console.log("Hello There Javascript!");

3. Variables and Comments

In this video you'll learn how to create variables and assign values to those variables. We'll also talk about the different data types you can use to assign to your variables. Lastly we'll show you how to add comments to your code. Checkout each of the sections below:

  • Variables
  • Assignment
  • Data Types
  • Comments

Variables

Variables are used to store data. You can think of a variable as a container that can store any type of value. To declare a variable you will use the var keyword and then add a name for the variable, like so:

var firstName;

 Assignment

Using assignment we can assign any kind of value to a variable, like so:

var firstName = "John";

There are also plenty other assignment operators available that allow you to add, subtract, multiply, or divide values from your variable. Take a look at the example below:

var count = 1; 
count += 1;

As you can see by using the += operator we have just added 1 to count. The code below accomplishes the exact same results, but does not use the += operator:

var count = 1;
count = count + 1;

But as you can tell, using the assignment operator looks a lot cleaner. There are also assignment operators for the other math operations as follows:

var count = 1;

// Add 1
count += 1;

// Subtract 1
count -= 1;

// Multiply 1
count *= 1;

// Divide by 1
count /= 1;

Data Types

The 3 main data types that we covered in the video are Strings, Numbers, and Booleans. You can see an example of each type below:

var firstName = "John";    // String
var age = 26;              // Number
var canDrink = true;       // Boolean

Comments

Lastly we covered comments. Comments are used to leave notes for yourself in your code. Comments will never be executed so feel free to comment as much as you'd like. You can add a single line comment with 2 forward slashes //, or you could leave a mult-line comment. Take a look at the example below:

// This is a single line comment

/*
    This is a mutliple line comment.
    Sometimes this is also referred
    to as a comment block.
*/

4. Math and Operators

In this video we teach you about math and operators. The arithmetic operators include addition, subtraction, multiplication, division, and modulus (remainder). We also learned how to concat strings together using the + operator. Checkout each of the examples below:

  • Addition
  • Subtraction
  • Multiplication
  • Division
  • Modulus (Remainder)
  • String Concatenation

Addition

// Create a few variables
var bananas = 5;
var apples = 2;

var numOfFruits = bananas + apples; // numOfFruits is equal to 7

Subtraction

// Create a few variables
var bananas = 5;
var apples = 2;

var numOfFruits = bananas - apples; // numOfFruits is equal to 3

Multiplication

// Create a few variables
var bananas = 5;
var apples = 2;

var numOfFruits = bananas * apples; // numOfFruits is equal to 10

Division

// Create a few variables
var bananas = 5;
var apples = 2;

var numOfFruits = bananas / apples; // numOfFruits is equal to 2.5

Modulus (Remainder)

// Create a few variables
var bananas = 5;
var apples = 2;

var numOfFruits = bananas % apples; // numOfFruits is equal to 1

String Concatenation

// Create a few variables
var firstName = "John";
var lastName = " Doe";

var fullName = firstName + lastName; // fullName is equal to "John Doe"

5. String and Number Methods

In this video we cover String and Number Methods. A string and a number type are javascript objects and these objects have methods and properties we can use. Take a look at some of the basic string methods and number methods below.

String Methods

String length - To get the length of a string you could use the .length property, which looks like the following:

var sentence = "Hello Javascript";
document.write( sentence.length ); // Print out the length of the string

String indexOf substring - The indexOf() method allows us to get the start location of a substring. For instance to find the index of "Javascript" string in the following string "Hello Javascript" we could use the following code:

var sentence = "Hello Javascript";
document.write( sentence.indexOf("Javascript") ); // Prints out 6 because Javascript starts at character 6

String substr - To get the substring of a particular string we can use the substr() method, which looks like the following:

var sentence = "Hello Javascript";
document.write( sentence.substr(0, 5) ); // Prints out Hello

notice that the first character starts at position 0 instead of 1. We will cover the zero offset later on when we talk about arrays. Just make sure to keep this in mind :)

String replace - To replace text in a string we could easily use the replace() method, which looks like the following:

var sentence = "Hello Javascript";
document.write( sentence.replace("Javascript", "DevDojo") ); // Prints out Hello DevDojo

Number Methods

Number toString - In order to convert a number type to a string we could use the toString() method, which looks like the following:

var age = 26;
var sentence = age.toString() + " years old";
document.write( sentence ); // Prints out 26 years old

Number toFixed - In order to convert a floating number type into a fixed decimal place we can use the toFixed() method, which looks like the following:

var decimalValue = 26.2520;
var currency = decimalValue.toFixed(2);
document.write( currency ); // Prints out 26.25

6. Conditional Statements & Loops

In this video we'll teach you about conditional statements and loops. We teach you about if statements and multiple loop statements. Checkout the examples of each of these below:

  • If Statement
  • If...Else Statement
  • If...Else If...Else Statement
  • While Loop
  • Do While Loop
  • For Loop

If Statement

var firstName = "Bob";

if(firstName == "Bob"){
	// The firstName has a value of Bob
}

If...Else Statement

var firstName = "John";

if(firstName == "Bob"){
    // The firstName has a value of Bob
} else {
    // The firstName does not have a value of Bob
}

If...Else If...Else Statement

var firstName = "John";

if(firstName == "Bob"){
    // The firstName has a value of Bob
} else if(firstName == "John") {
    // The firstName has a value of John
} else {
    // The firstName does not have a value of Bob or John
}

While Loop

var numOfFruits = 5;

while(numOfFruits > 0){
    document.write( numOfFruits );
    numOfFruits -= 1;
}

// Output: 54321

Do While Loop

var numOfFruits = 5;

do{
    document.write( numOfFruits );
    numOfFruits -= 1;
} while(numOfFruits > 0);

// Output: 54321

For Loop

var numOfFruits = 3;

for(i=1; i < numOfFruits; i++){
    document.write(i + ' pieces of fruit!<br>');
}

// Output:
// 1 pieces of fruit!
// 2 pieces of fruit!
// 3 pieces of fruit!

7. Functions

In this video we talk about Javascript functions. Functions can be created any time you have a piece of code you want to run multiple times. Take a look at the examples below:

Javascript Function Example

function sayHello(){
	document.write( "Hello" );
}

sayHello(); // outputs Hello

Javascript Function with Parameters Example

function sayMessage( message ){
	document.write( message );
}

sayMessage( "Javascript Rocks" ); // outputs Javascript Rocks

8. Objects

Javascript Objects can be looked at like real life objects. For instance, perhaps we have a car and a car object has a color, make, model, and it probably has a few methods like start() or stop(). Take a look at this example object below:

var car = {
    color: 'black',
    make: 'Honda',
    model: 'Civic',
    start: function(){
        // start the car
    },
    stop: function(){
        // stop the car
    }
}
Then to get the car color we could use the . syntax, checkout the following example:
console.log( car.color ); // Displays 'black'
Similarly we could use any of the methods inside of the car object:
car.start(); // This will call the start() method in the car object
Using objects can make your code a lot more fun and easier to work with.

9. Arrays

Arrays are used to store multiple values in a variable. Checkout the following example of creating a javascript array:

var fruits = ['banana', 'apple', 'orange'];
Then to get the first value you could simply write the following:
var firstFruit = fruits[0];
console.log(firstFruit); // Displays banana
Remember that arrays as well as strings start off at offset 0. There are quite a few helper methods that we can use to manipulate or get properties from our array. Checkout each of them below:
  • Array length
  • Array toString()
  • Array push()
  • Array pop()
  • Array shift()
  • Array delete
  • Array slice()
  • Array sort()
  • Array reverse()

Array length

To get the number of values or the length of the array we could do that using the .length property like so:

var fruits = ['banana', 'apple', 'orange'];
var numOfFruits = fruits.length; // numOfFruits contains the value 3

Array toString()

The toString() method will convert the array to a string.

var fruits = ['banana', 'apple', 'orange'];
var fruitsString = fruits.toString(); // contains string 'banana, apple, orange'

Array push()

The push() method will push a new value at the end of an array like so:

var fruits = ['banana', 'apple', 'orange'];
fruits.push('mango');

Array pop()

The pop() method will pop the last value off of the array.

var fruits = ['banana', 'apple', 'orange'];
fruits.pop(); // fruits array now contains ['banana', 'apple']

Array shift()

The shift() method will remove the first value of the array.

var fruits = ['banana', 'apple', 'orange'];
fruits.shift(); // fruits array now contains ['apple', 'orange']

Array delete

The delete keyword can be used to remove a value from an array.

var fruits = ['banana', 'apple', 'orange'];
delete fruits[1];

Array slice()

The slice() method will slice an array starting from the start index and then the ending index, but not including the last index.

var fruits = ['banana', 'apple', 'orange'];
var newArray = fruits.slice(0, 2); // newArray contains ['banana', 'apple']

Array sort()

The sort() method will alphabetically sort the array.

var fruits = ['banana', 'apple', 'orange'];
console.log( fruits.sort() ); // will output ['apple', 'banana', 'orange']

Array reverse()

The reverse() method will reverse the order of the array.

var fruits = ['banana', 'apple', 'orange'];
console.log( fruits.reverse() ); // will output ['orange', 'apple', 'banana']

10. Wrapping Up

In this video we walk through a summary of all the topics we covered in the previous episodes. We also talk about a few last topics including getting HTML elements and manipulating them with javascript. In this video we talk about the following Javascript document methods including:

  • getElementById()
  • getElementsByClassName()
  • querySelectorAll()

getElementById()

Using the getElementById() method we can get specific HTML elements by their ID and then we can manipulate that element.

var paragraph = document.getElementById('my-paragraph');
paragraph.innerHTML = 'Hello Javascript';
or we could even write this all in one line like so:
document.getElementById('my-paragraph').innerHTML = 'Hello Javascript';

getElementsByClassName()

Using the getElementsByClassName() we can get multiple elements by their class like so:

var paragraphs = document.getElementsByClassName('p2');

// Loop through each paragraph element
for( i = 0; i < paragraphs.length; i++ ){
    paragraphs[i].innerHTML = 'Hello Javascript';
}

querySelectorAll()

Then to get any kind of element by a selector we could use the querySelectorAll() method like so:

var paragraphs = document.getElementsByClassName('#container .p2');

// Loop through each paragraph element
for( i = 0; i < paragraphs.length; i++ ){
    paragraphs[i].innerHTML = 'Hello Javascript';
}
and the above code will only get a class with p2 that has a parent with an id of container.
And that's it for the basics of using javascript. Congratulations on completing your black belt training in this Javascript Basics course!

Comments (0)

Introduction

10 videos (40 minutes)

Autoplay?

0% completed
Now Playing 1. Introduction
2. Using Javascript
3. Variables and Comments
4. Math and Operators
5. String and Number Methods
6. Conditional Statements & Loops
7. Functions
8. Objects
9. Arrays
10. Wrapping Up