You can access the full course here: Bite-Sized JavaScript
Part 1
Learning Goals
- Including JavaScript code on a HTML document.
- Loading JavaScript code from external files.
Hello World
In this lesson we will create a Hello World example in JavaScript.
You will learn how to include JavaScript code inside both HTML documents and in external files.
In this course I will be using Sublime Text for my code editor. You can use whatever code editor you like for this course, but Sublime Text does have a free evaluation version and it can be downloaded from:Â https://www.sublimetext.com/3
The Direct Link to download Sublime Text:Â Sublime Text Download
Open your code editor and we will create a new document and save the file as “index.html”
I will be working in different folders for each one of the lessons in the course. Feel free to use the same folder structure, or use one that suits you the best.
Remember you can download all the source code for the course whenever you wish.
Open the index.html file you just saved in your web browser.
I will be using Chromium which is the open source version of Google Chrome. You can use any web browser that you want in this course as long as it is a current web browser.
Once the file is open we will begin by typing in some basic HTML code. Keep in mind that when you are using Sublime Text you can auto close the HTML tags by pressing alt and the dot character on the keyboard.
See the HTML code below:
<html> <head></head> <body> hello </body> </html>
Refresh the page and you should see:
If you happened to type JavaScript code into the file where we type the word “hello” it would not work, see the code below to follow along:
<html>
<head></head>
<body>
hello
alert("Hello World");
</body>
</html>
This is the code in JavaScript to render a message box that says “Hello World” but if you refresh the page you will see this:
So its just being showed as text. We don’t want this, what we want is to make the browser execute or run the line of code we just added instead.
What we can do is use the script tag to tell the browser to treat and run the code properly.
See the HTML code below and follow along:
<html>
<head></head>
<body>
hello
<script>
alert("Hello World");
</script>
</body>
</html>You can use the script tag to enter JavaScript code in your HTML documents. Everything that is written inside the script tag is treated as JavaScript code and as you will see most code editors will highlight the syntax of your JavaScript code.
Refresh the page now and see what happens:
Writing code inside a HTML document like we have been doing here is fine, but what if you wanted to include the same JavaScript code in multiple HTML files or simply keep it more organized?
The best way to do that would be to create an external JavaScript file which will have the file extension .js and in that file you put your JavaScript code and then you include that file inside of your HTML documents.
Create a new file and save it as “script.js”Â
We are going to cut and paste the JavaScript code inside of the new file and save. You can get rid of the extra code in the HTML file, but keep the script tag. See the image below:
Now what we need to do is add a source to the HTML file, see the HTML code below to follow along:
<html> <head></head> <body> hello <script src=script.js"></script> </body> </html>
Refresh the page, and you will see what we have done works the exact same way:
We are including the code of the external file into the HTML document.
If you had multiple HTML files and you wanted to include the same file in all of them, you would simply need to copy this and put it in all the files instead of having to copy a thousand lines of code eventually into each of them.
You can see that both files are in the same folder:
If we had another folder here called JS and this script file was inside of that folder, how would we include it?
All you have to do to include it is add the path to the location of that file in here, see the code below:
<html> <head></head> <body> hello <script src="js/script.js"></script> </body> </html>
Refresh the page, and it will work:
Summary
We have introduced the script tag which is used to include JavaScript code both inside of a HTML document and to load it from external files.
You now know how to include JavaScript code from external files.
We have also looked at the case where the two files are not in the same folder, but the script is in a sub folder.
The SCRIPT tag is used to enter JavaScript code. This code can go either on the HTML document or on external files with a js extension.
Part 2
Learning Goals
- Declare variables
- Assign values to variables
Variables are used to store and retrieve values from the memory of your computer. In this lesson you will learn how to create variables in JavaScript.
We will show the value of a variable on a message box in our page.
We can start with an empty HMTL document. We will start by declaring a new variable, see the code below to follow along:
<html> <head></head> <body> Variables <script> var a; var b = 10; a = 100; alert(a); </script> </body> </html>
Refresh the page and you should see the following:
You can also enter text in a variable, see the code below and follow along:
<html>
<head></head>
<body>
Variables
<script>
var a;
var b = 10;
a = 100;
alert(a);
var text = "Your Name Here";
alert(text);
</script>
</body>
</html>Refresh the page, and first you will get the value 100 displayed and then you click the OK box and then you will see this:
Variable names are case sensitive, so a variable called “a” is not the same as “A” see the code below and follow along:
<html> <head></head> <body> Variables <script> var a; var A; var b = 10; a = 100; A = 99; alert(A); var text = "Your Name Here"; alert(text); </script> </body> </html>
Refresh the page and you will see:
You need to be consistent with your variable naming. A common way to name variables is, when you need to name them with more than one word, for example, a persons name, you can use something that is called CamelCase. See the code below and follow along:
<html>
<head></head>
<body>
Variables
<script>
var a;
var A;
var b = 10;
a = 100;
A = 99;
alert(A);
var text = "Your Name Here";
alert(text);
var personName;
</script>
</body>
</html>CamelCase starts with a lowercase letter and then an uppercase letter is used for the next part.
Variables can be used for many things. They can be used to perform mathematical calculations, manipulate text, store different types of data, keep track of the main parameters of your website, of your app, and of your game.
JavaScript supports multiple types of variables, not just numbers and text.
Summary
- Variables are used to store and retrieve values.
- To declare variables use the var keyword.
- To assign a value to a variable use the = sign.
- Variables can store numbers, text, and other types of data.
Part 3
Learning Goals
- Learn to use basic arithmetic operations.
In this lesson you will learn how to do simple mathematical operations using JavaScript.
We will cover addition, subtraction, multiplication, and division.
Comments
Comments are used to leave messages in your code for other humans, or your future self, to read and understand what the code does after it has been written.
A good practice is to always comment your code that you write and explain what you are doing with comments when you work on any type of project that requires code.
To enter comments in JavaScript you use two forward slashes “//” and then you type what ever you want after the slashes.
Addition
See the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200; alert(b); </script> </body> </html>
And we get the correct result in the alert window:
You then can add some more numbers to the code, and that works fine as well:
<html>
<head></head>
<body>
Arithmetic operations
<script>
//addition
var a = 1000;
var b = a + 200 + 100;
//alert(b);
</script>
</body>
</html>The correct result is displayed again in the alert window:
Comment the alert(b); line out before moving on.
When you hear the phrase “Comment a line out” it means to convert a line of code into a comment. The line of code will still be there for you to see, but when its commented out it will be treated just as text for humans to read, and not the computer.
Subtraction
We will now look at doing subtraction, see the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; alert(c); </script> </body> </html>
Refresh the page and you will see the correct result for the subtraction:
Multiplication
We will now work with multiplication, see the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; //alert(c); //multiplication var m = c * 10; alert(m); </script> </body> </html>
Refresh the page and we can see the correct result displayed in the alert window:
Division
We will now work on division, see the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; //alert(c); //multiplication var m = c * 10; //alert(m); //division var d = 500 / 2; alert(d); </script> </body> </html>
Refresh the page and we can see the correct result displayed in the alert window:
Combining Operations
You also combine all of the operations together, see the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; //alert(c); //multiplication var m = c * 10; //alert(m); //division var d = 500 / 2; //alert(d); //mix var combo = 100 + 50 / 2 * 10; alert(combo); </script> </body> </html>
Refresh the page and we can see the correct result displayed in the alert window:
If you wanted to combine operations and have an operation performed first you will have to use brackets.
See the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; //alert(c); //multiplication var m = c * 10; //alert(m); //division var d = 500 / 2; //alert(d); //mix var combo = (100 + 50) / 2 * 10; alert(combo); </script> </body> </html>
So in this case the 100+50 operation is executed first.
Refresh the page and we can see the correct result displayed in the alert window:
A Simple Calculator
Now we will work on a simple calculator that will convert from Celsius degrees to Fahrenheit degrees.
See the code below and follow along:
<html> <head></head> <body> Arithmetic operations <script> //addition var a = 1000; var b = a + 200 + 100; //alert(b); //subtraction var c = 100 - 50; //alert(c); //multiplication var m = c * 10; //alert(m); //division var d = 500 / 2; //alert(d); //mix var combo = (100 + 50) / 2 * 10; //alert(combo); //simple calculator //from Celsius to F // °C x 9/5 + 32 = °F var C = 25; var F = C * 9 / 5 + 32; </script> </body> </html>
Refresh the page and we can see the correct result displayed in the alert window:
Lesson Summary
- Addition: var a = b+1;
- Subtraction: var a = b-1;
- Multiplication: var a = b*c;
- Division: var a = b/c;
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.
