Getting Started with JavaScript: A Complete Beginners Guide

According to the Stack Overflow Developer Survey 2023, JavaScript has been the most commonly used programming language by professional developers for the past eleven years. This makes it a lucrative skill to learn. JavaScript is used in web development, game development, and mobile app development.

This tutorial will guide you through the basics you need to get started on your JavaScript journey. Let's get started.

Definition

The definition of JavaScript according to the Mozilla Developer Network web docs,

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language

Let's break this down.

JavaScript is lightweight because it does not consume your laptop's resources such as the RAM. This is because JavaScript runs in the browser.

Due to JavaScript being run in the browser, your machine doesn't need to understand the programs you write. JavaScript is an interpreted language because it is implemented without converting it into machine language; a language that the machine understands.

JavaScript interpreters use a technique known as just-in-time compiling to improve the performance of the JavaScript program. Just-in-time compiling allows interpreters to interpret each line of code, run it and return the result immediately.

Why is JavaScript Important?

JavaScript is used to add complex features to web pages. For example, most websites on mobile have a burger menu that you can toggle to navigate the website. This interaction is added using JavaScript.

JavaScript is also used to update content on our website as the user interacts with it.

JavaScript also saves the user data on their browser which allows the user to continue where they left off. For example,

When playing Wordle, your data is saved without logging in. You can leave the website and you'll still be able to see your progress when you come back.

JavaScript is powerful and you will be able to see more uses as you interact with it.

How to Write JavaScript Programs

The programs written in JavaScript are called scripts.

To write a script, you need to know:

1. HTML

2. CSS

Scripts are written in a code editor such as Visual Studio. If you can write HTML in your editor, you can write JavaScript there as well.

A script can be written in the HTML document just before the closing body tag or a separate file with the .js file extension.

To add scripts in the HTML document, you wrap them in the script element.

<script>
    //your scripts go here
</script>
</body>

To link scripts from a .js document, you use the script element with a src attribute.

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

Most people write scripts in separate files due to the separation of concerns. Separation of concerns means that every document serves one purpose. That is;

• the HTML document adds content

• the CSS document adds styling

• the JavaScript document adds interactions

Writing Your First Script

Let's write your first script.

To get started, you can get the starter kit which has basic HTML and CSS code here.

In this example, you will create a script that gets the user's name and displays it in the website.

After you have copied the code from the starter kit, you can create a script.js file and link it to your HTML document

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

In your JavaScript file, you will ask for the user's name by using the prompt method which pops up with an input field. Inside the brackets, you write the question you would like to ask the user wrapped in quotation marks. For example,

prompt("What's your name?")

Once the user enters their name, the name disappears because you have not saved it anywhere. To save data, you should store them in variables so that you can use the data elsewhere. A variable is a small folder you can use to store data.

You can declare a variable and assign it the name the user enters when they are prompted.

let name = prompt("What's your name?")

The let keyword in JavaScript is used to declare variables and it should be included when you are creating variables. The user will enter their name and it will be stored in the name folder.

The final part of this exercise is to add the user's name to the website.

You can update the content on your website by targeting the specific HTML element and assigning it a new value.

You can targeting a specific HTML element by using document.querySelector(). For example,

document.querySelector("span")

This will enable you to access the span element in your code. You can change the content in your span using a property called innerText Let's assign the name to our span.

document.querySelector("span").innerText = name

That's all you need to do for this exercise.

Here's the final solution.

Conclusion

JavaScript is a programming language that adds interactions to websites.

In the program you wrote, you can see two of JavaScript's uses in action. We added an interaction with the prompt and updated the content.