Writing Code

Learning Objectives

• Understand why JavaScript is so popular with web developers
• Understand what the developer tools console is within a web browser and how to find it
• Understand how to write and execute code within the developer tools console

Writing Code

Now that we have started to learn about programming languages, it's time learn a bit of JavaScript and write some code.

As we cover different programming concepts, the best way to really learn is to type out and run the code yourself.

Normally a developer would write their programs into a text file (or lots of files) saved onto their computer. They would then execute their program by opening the file using a JavaScript engine - a piece of software that can run JavaScript code. The programme would then be executed all at once.

However, this approach can require a little bit of setup.

To begin with, the easiest way to do this is using the developer tools console in your favourite web browser.

As mentioned previously, JavaScript is the only programming language that you can run in a web browser. Every web browser has the ability to run JavaScript code, and most websites that you visit will utilise JavaScript in some way.

The developer tools console (or just the console) is a behind-the-scenes sandbox that we can use to play with JavaScript, without having to set up a whole project or save any files - it allows us to write simple programs that get executed in real time, as we write them. It's perfect for quickly testing out ideas and playing with new concepts.

Accessing the Browser Console

Depending on what web browser you prefer to work in, you can use the following keyboard shortcuts to access the developer console:

Chrome

• Command+Option+J (Mac)
• Ctrl+Shift+J (Windows)

Firefox

• Command+Option+K (Mac)
• Ctrl+Shift+K (Windows)

Edge/IE (Windows Only)

• F12

Safari (Mac Only)

• Command+Option+C

It should look something like this:

Executing code

Let's start by typing in the code we saw in the last lesson, which printed a message to the screen:

console.log("Hello World!");

If you type that into your console and press the Enter key, the code will be executed by your browser, and you should see the message Hello World! printed in the console.

Congratulations, you've executed your very first line of JavaScript!

You can also write multiple lines of code in your console, using Shift+Enter. the code will not be executed until you hit the Enter key on its own.

If you refresh your page, the console will reload, and you will be able to start again from scratch.

One last point is that at times in this course, you might see some code written like this:

console.log("hello"); // prints out hello

The // with some text after it is called a code comment. These are just notes to yourself or to other developers - they don't have any effect on the program itself. We use them occasionally in this course to annotate the examples.

That's pretty much all we need to get started with writing our own JavaScript, so let's move on to learning about JavaScript itself!