Web Class: A Bite-Sized Guide to JavaScript

Web Class: A Bite-Sized Guide to JavaScript

You can access the full course here: Bite-Sized JavaScript

Transcript 1

In this lesson, we’ll create a hello world example in JavaScript. I’ll teach you how to include Javascript code both inside a HTML document and in external files.

We’re going to start by opening up our code editor. Let’s create a new document and save it as index.html. Now, let’s open this index.html file in our web browser. I’ll be using Chromium which is the open source version of Google Chrome. You can use any web browser that you want for this course. As long as it’s a current web browser.

So I’m going to open this up in Chromium. We’re going to type in some basic HTML code. So I’m going to start by typing in HTML tag. So I’m adding in a head and a body. Inside the body, I’m just going to type in hello. And there we go. Now what happens if I just type in Javascript code here? I’m gonna type in alert(“Hello World”), which is the code to render a message box that says hello world. But as you can see, if I refresh this page, this is being shown as text.

Now, how can we make the browser execute, or run, this line of code? What we can do is use the script tag. So by using the script tag, you can enter javascript code in your HTML documents. Everything that I type inside of the script tag, is treated as javascript code. Lets reload the page again and see what happens now. See how now I get the “Hello World” message on my message box, just like we wanted. Writing code inside of a HTML document, like what we’re doing here, is fine. But what if you wanted to include the same javascript code in multiple HTML files?

Well the best way to do that is by creating an external javascript file. So lets create a new file and save it as script.js. We’re going to cut and paste the javascript code inside of this new file, and save. I’ll be adding another, an attribute here called source, src, and then double quotes. And then I can specify the name of that external file. So if I reload the page now, you’ll see that it works in the exact same way. Because we’re basically including the code of this external file into the HTML document.

What happens if a had another folder here, for instance, called js and this script file was inside of that folder? How can we include it in that case? All you have to do is add the path to the location of that file in here. The folder’s called js. So I will type in js and then forward slash, and the name of the file.

Transcript 2

Variables are used to store and retrieve values from the memory of your computer. And in this lesson, you will learn how to create variables in JavaScript.

I’m gonna start by declaring a new variable. To declare a variable in JavaScript, you use the keyword var. And then you need to give your variable a name, that name can be any word or just a single letter, it cannot contain spaces in between. So I’m gonna call a variable a. In JavaScript when you end a statement, you need to enter a semicolon. So what I’ve done here is declare a new variable and call it a. We also need to assign a value to that variable. You can assign a variable, a value to a variable upon declaration.

So I’m gonna create another variable called b and be using an equal sign, you can give it a value, so b will be equal to 10. You can also assign a value to an existing variable, in which case you don’t have to use the var keyword anymore because that’s only for the declaration part. We’ll give this one a value of 100. Let’s show these variables on our web page. So I’m gonna type in alert, which allows me to show a message box and the name of the variable. This case will be a and I’m gonna close this with a semicolon.

When the page loads, it shows the value of 100, which is the value of the variable called a. You can also enter text in a variable. So let’s call this variable, let’s call it text. And I’m gonna enter some text in here. So to enter text you need to use either single or double quotes. And we can show this on a message box using alert.

So let me reload the page. And we’ll see that it first, firstly it shows me 100, and then I click okay, and then it shows me your name here, the value of this one. Variable names are case sensitive, so a variable called lower case a, is not the same as a variable called upper case A. A common way to name variables is when you need to call them with more than one word, for example, person name, is something that’s called camel case. So you type in different words, in this case personName, and the second word starts and the follow up words start with an upper case or with a capital letter. So this is called a camel case notation. It’s just a convention. That’s just how people normally call their variables.

Another thing for you to know is that the name of the variables, it’s only made for us humans to understand. So the computer doesn’t care if you call your variable name, if you call it sky, if you call it letter x, that’s just for humans to have a sense of what’s going on in our code.

Variables can be used for multiple things, they can be used to perform mathematical calculations, to manipulate text, to store different types of data. And JavaScript supports multiple types of variables, not just numbers and text, as we’ll see further in the course.

Transcript 3

In this lesson, I’m gonna show you how to do simple mathematical operations using JavaScript. We’re gonna cover addition, subtraction, multiplication, and division.

Let me begin by adding in some JavaScript code in here. And I’m gonna start by typing in a comment, messages that you leave in your code for other human beings, or your future self, to read and understand what that code does. It is a good practice to always comment your code to write and to explain what you are doing. To enter comments in JavaScript, you type two forward slashes, and then you can type in anything you want. I’m gonna write in addition.

I’m gonna create a variable called a, which will have a value of 1,000. And I want to know the result of the variable a plus 200, and I’m gonna store that in another variable called b. To assign a variable, as we’ve learned, you will use the equals sign. And if we want to do an addition, we will type in a plus the number. That will give us a result which we can easily show on a message box. As you can see, that gives us the correct result. I don’t want to have this shown each time as we move on, so I’m gonna comment this line out.

To comment code out, it means to convert a line of code into a comment so that it stays around but it’s not executed, it’s treated as text. Let’s look now into subtraction. Let’s create a new variable, and this one will have the value of, let’s say, 100 minus 50. And we can easily show that on a message box. Multiplication. Let’s call it m, and let’s say that this will be c times 10. This one here gave us 50 as a result, and 50 times 10 should give us, let’s reload this page, and you can see the 500 in there.

Division works in a similar way. All we need to do is use the forward-slash sign. Let’s divide 500 by two. Let’s comment that one out so we don’t see it each time. 250, half of the value of that number. Call this one combo, and it’ll be, say, 100 plus 50 divided by two times 10. What happens here is that multiplications and divisions executed first, so this part is the first thing that’s gonna be executed, and then the rest will be added.

Whatever you put inside the brackets gets executed first. In this case, this will be executed first. And now to finish this up, I’m gonna implement a simple calculator that will convert from Celsius degrees to Fahrenheit degrees. And let’s end this by showing it on an alert box.

Interested in continuing? Check out the full Bite-Sized JavaScript course, which is part of our Bite-Sized Coding Academy.