Introducing JavaScript

This lesson is part of the Web Programming 1 Course.

Take a look at this page, which demonstrates some things you can do in a web page with JavaScript

Event handling (button clicks)
Validating user input
Animation
Fetching data
Displaying data in a page

In order to get started with this part of the course, you need to understand just a little bit of HTML.

Create a file named javascript-intro.html in your JavaScript folder and put this code in it:

<!DOCTYPE html>
<html>
	<head>
		<title>Introducing JavaScript</title>
		<script>
			
		</script>
	</head>
	<body>

	</body>
</html>

You should be comfortable with all of the HTML code, with the exception of the script element. Let's talk about the script element...

One way to incorporate JavaScript code into a web page is to use a script element. The browser knows that everything inside the script element will be JavaScript code. So, it will execute the code in each script element it finds upon loading the page. There are other ways to incorporate JavaScript code into a page, and we'll be exploring them later. But for now, we'll be putting our JavaScript code inside script elements.

Hello World!

Put an alert() inside the script element that says 'Hello World!'.

In other words, put this inside the script element:

alert("Hello World!!!!");

Now load this page in the browser, and behold the wonder of your first ever JavaScript program!!!

Now that we've completed the Hello World! tradition, we'll talk a little bit about what's coming up in our journey into JavaScript.

We'll Start with Variables

Our journey into programming and JavaScript will begin by exploring variables. Hopefully you've seen variables in math. In programming we use variables, and they work a lot like they do in math.

Go ahead and add this code inside the script element. It creates two variables (x and sum) and then displays the value of sum in an alert window:

x = 5;
sum = x + 2;
alert(sum);

If you refresh the page in the browser, you should see an alert that displays 7.

Some Syntax

You might be wondering about the semi-colons. You learned about syntax for HTML and CSS, well JavaScript has it's own syntax, and you'll see a lot of semi-colons (and other syntax) in it.

Statements in JavaScript should end with a semi-colon. There are two statements in this program, one on each line. We'll talk more about the semi-colons as we go.

If we refresh the page in the browser, the first two javascript statements will execute, and we'll have a variable named sum that should be storing the number 7. The third line uses the alert() command to display the value stored in the sum variable.

Input and Output

The most basic function of a computer program is to collect input and display output.

Input is usually what a user enters as data into the program. Output is when the program displays data, or maybe a summary of the data.

Programs not only take input and display output, they often process data.

Add this code to your script element, I'll explain it in a moment. Be careful to enter it exactly as you see it (beginners are prone to syntax errors!)

name = prompt("Enter your name");
message = "Hello " + name;
alert(message);

For now, you can think of prompt() and alert() as 'commands' that allow your program to collect input and display output:

prompt() - shows a window that prompts the user to enter input
alert() - shows an 'alert' window that displays output

We'll be using these two 'commands' a lot as we learn about JavaScript.

I should point out that prompt() and alert() are functions, which we'll be talking about soon. But for now you can just think of them as 'commands' that you can write in your code to get user input and display output.

To summarize what our program is doing:

The first line of code uses the prompt() command to collect user input, and store it in a variable named name.
The second line processes the input by using it to create a message variable
The third line uses the alert() command to display output in an 'alert' window.

Reload the page a few times and note that you can provide different input, and the program will produce different output. The program is flexible because it allows you (the user) to enter any number you want. And it can adapt to produce different output.

Adding comments to your code

You can add a comment to your code by using two forward slashes (//). Comments are helpful when you are learning, so that you can make notes to yourself. I'll give you more details on commenting your code later, but I want to show it to you now, because it will helpful for you to make notes.

For example:

// step 1 - gather user input
name = prompt("Enter your name");
// step 2 - process the input
message = "Hello " + name;
// step 3 - display output
alert(message);

You can comment out a line of code by pressing Ctrl + /.

Keywords

Our first JavaScript program works, but I left something out that we really should add. Update your code to look like this:

let name = prompt("Enter your name");
let message = "Hello " + name;
alert(message);

We've just added a special keyword, let, before the variables that we created in our code. I'll be explaining let more in the next lesson.

JavaScript, like most languages, has a set of keywords that have special meaning. We'll be seeing lots of keywords as we continue through the course.

The Web Developer Tools

When looking at a page in the browser, you can press the F12 key to open the Web Developer Tools, where you'll find the console log (depending on your keyboard, you may also have to hold down the fn while pressing F12). Here, you should be able to see some sort of error message and your program crashes. When a line of code crashes your program, the rest of the code (that comes after the problematic line) will not execute.

As a beginner, you'll make lots of mistakes that will cause your code to crash. If something doesn't seem to be working in your program, check the console log for an error message. Then look for a line number in the error message to give you an idea of where the problem is in your code.

Here's a bit of code that has a bug in it:

// There's an error in this code!!!
let score = 98;
alert(score

What to do when things go wrong!!!

If your program doesn't work the way you expect it to, then your first course of action is to open the Web Developer Tools and look in the console log for an error message. The message itself may not make sense to you, but it should include a line number, that will point you to the line in your code that has the problem.

The console.log() command

Earlier, we talked about input and output. You can use the prompt() command to gather input, and you can use the alert() command to display output. There is another 'command' you can use for generating output:

let x = prompt("Enter a number");
let sum = x + 2;
console.log(sum);

Here we've used the console.log() command, which will write the output to the console log in the Web Developer Tools. The disadvantage of the console.log() command is that visitors of your web page will probably never see the output (unless they know about the Web Developer Tools). But in this class we'll be using console.log() more than alert(). This is because alert() will pause the execution of your program until you press the OK button, and it can be annoying when you just want to run all your code.

A Practical Program (sort of)

Now that we know a little about collecting input and displaying output in JavaScript, we should create a little program before digging deeper into variables (which is where our journey into JavaScript begins).

Let's create our first somewhat practical program - a program that converts celsius to fahrenheit.

Remember that the basic purpose of computer programs is to process input and other data, and display it as output, this is a simple way for us to get started down that path.

let celsius = prompt("Enter a temperature in celsius")
let fahrenheit = celsius * 9/5 + 32;
alert(fahrenheit);

Have fun spelling celsius and fahrenheit!!! But you better spell them correctly, or your program may not work!!