JavaScript for Beginners

What is JavaScript?

All websites are built with HTML (a markup language that handles the content on a web page) and CSS (a language to handle the styling of the content).

HTML allows web developers to create all the content and information using HTML tags and providing semantics to the information. The CSS allows you to give some style to the page and build a more pleasant visual interface for the user.

The well-defined separation of these two elements allows you to modify one aspect of the page (the information or the design) without affecting the other.

However, using only and exclusively HTML and CSS on a page limits us considerably.

While it’s true that with these two languages we can do a wide range of things, there are others more complex tasks on a website that we can only do with a proper programming language…

The solution?

Enter JavaScript..

JavaScript (JS) is a programming language and the most common method we use to tell the browser what tasks to perform, in what order and how many times.

JavaScrip for Beginners

JS is the primary programming language in charge of providing more interactivity and dynamism to web pages.

When JavaScript runs in the browser, it can read the code directly, without the need for any additional tool.

This means that JavaScript is recognized as one of the three native languages used in the web together with HTML (content and structure) and CSS (content design and structure).

Brief History of JavaScript

The history of JavaScript begins in the early 1990s, when the Internet started and people could access the Internet thanks to web browsers.

These connections between users and web pages were too slow, and when a user wanted to send information to the server, if it was incorrect, it took a while to know and the data was lost.

Programmers tried to get validations in the browser to minimize loss of information; this was one of the first motivations to create JavaScript, to validate forms.

The programmer Brendan Eich started placing server tasks in the browser in a new version of Netscape Navigator in 1995. This task became more and more ambitious and was called LiveScript.

When Sun Microsystems later bought Nestcape, they named it JavaScript, much like the name of the server-side language (Java) that has absolutely nothing to do with it.

During the Web Browser War in the mid 90s, all browsers were gradually taking the standard — starting with Internet Explorer — and JavaScript became a programming language compatible with all browsers.

Year after year, the language has received modifications and improvements, reaching our era as we actually know it.

Advantages of JavaScript

JavaScript is the primary programming language that works on the browsers natively (language interpreted without the need for compilation). That’s why this language is used as a complement to HTML and CSS to create web pages.

The main advantage of JavaScript is that since it runs on the user’s computer, the effects are executed very fast and with great dynamism. Being a programming language, JavaScript gives the user all the power of programming such as the use of variables, conditionals, loops, etc.

There is also a convenient point: if the user has JavaScript disabled in their browser, the effects won’t be displayed. However, today most of Internet users browse the web with JavaScript enabled.

But there is also advantages for web developers of course: JavaScript offers us greater flexibility and a greater range of possibilities, and if we use it well, they can save us a lot of time.

As example: let’s imagine that we’ve to create a list of numbers from 1 to 500. To do it only with HTML would be very tedious, since we would have to copy and paste these rows several times until we reach 500.

With JavaScript, we can tell the browser that it must write the first paragraph (with a numeric variable ), then write the same one but adding one to the numeric variable. And repeat this until it reaches 500.

Can you see it?

With HTML we’d have to write 500 lines, while with JavaScript it’d be not more than 10 lines, easy and efficient!

What You Can Do With Javascript

The JavaScript programming code runs in browsers, whether desktop or mobile, whether Android or iPhone. It works for exactly the same way, no matter what type of device the browser is running on.

What Are Some Examples of Use of JavaScript?

JavaScript is responsible for the existence of tools such as Google Analytics, Google Tag Manager, Facebook Pixel and many others, which are clear examples of JavaScript.

There is also a technology called AJAX that allows an exchange of information with the server without having to reload the page.

In other words, we only load what is necessary from the page. This technology developed in JavaScript has been one of the main advances in web development.

Although we don’t know how to recognize it, it’s thanks to JavaScript that we can get more messages, tweets, emails… just by pressing a button, without having to reload the page.

Learn the Basics -JavaScript Quick start

Before you start learning Javascript it is good if you first have a basic understanding of coding, html and css.

We recommend you read our guide to coding which covers everything from what coding is, to why you would want to learn it and where to find resources.

Once you have that down, we recommend checking out our e Guide to Web Development, HTML and CSS.

This way, you’ll be able to understand the basics of how these languages work with each other, and also be familiar enough with how you can make a basic Graphical User Interface (GUI) so that you can start learning JavaScript on your own.

In both cases, we will outline the resources and tools that are available so that you can start learning on your own.

Level 1 – Get Started

“Hello World” in JavaScript

The first step in learning a new programing language is usually  to write something called a “Hello World” program.

In JavaScript you can do this directly in your browsers developer console.

In chrome you can find the console by using the keyboard shortcut:

Windows: Ctrl + Shift + J

Mac: Cmd + Option + J

You can also right click on any element on a webpage and choose inspect. Then click on the console tab.

Example 1: “Hello World” with JavaScript in the Browser Console

In the console simply type:

console.log('Hello World');

and then press enter.

You should see the message “Hello World” printed to your console window.

This is a basic example of how to use the JavaScript programming language and is a great way to get started.

Exercise:

1) Test to use the browser console as a calculator.

• You do not need to use “=” in the syntax

Install a Text Editor for Coding – Integrated Development Environment (IDE)

A IDE makes life as a coder  a lot easier, and there are many good options to choose from.

Integrated Development Environments (IDEs) come with a range of features such as code completion, source control and diagnostics.

If you’re starting out you might want to consider using something like Microsofts Visual Studio Code.

VS Code is free and available on both Windows and Mac.

You can download it for free here.

Now that we have our environment set up we can begin learning some basic JavaScript syntax!

The <script> tag

We have in a previos guide learned to make a “hello world” html document. We can use this as a base now when we are starting to code in JavaScript. To be able to run a JavaScript code in your web browser you need to include the code inside a <script> tag.

Example 2: “Hello World” in HTML and JavaScript

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script>

document.querySelector("body").innerHTML = "Hello World!";

</script>

</body>
</html>

Notes:

• Save as index.html then right click the file and open in your browser.
• You should see the “Hello World!” message printed on the screen!
• In this example we have used JavaScript to manipulate the Document Object Model. We are going to go more into what the DOM and what objects are later in this guide.

Level 2 – Learn The Basics

The Three Basic Programming Constructs in JavaScript

If you know the syntax and how to use theese constructs (sequence, selection and itiration) in any coding language you have come a long way and can do the most basic programming in that language.

1. Sequence

As we mentioned in our guide to coding, sequence is a set of instructions (statements) that allow a computer to carry out a specific task. One step at the time.

If you for example want to make a program that expands on the previous “hello world” application but instead greeets the user with his or her name you need a algoritm with a function that is called and a sequence of at least two statements.

1. Let the user input its name and store the name for later use.
2. Output the text so that the user can read it.

Example 3: Javascript Sequence for Input and Output

<!DOCTYPE html>
<html>
<body>
Enter Name: <input type="text" id="inputText">
<button onclick="exampleFunction()">Submit</button>
<div id="output"></div>

<script>
/*
This example function will read the value from the "inputText" input field.
Then store the value in the variable called name.
The function will finish after changing the value of the html inside of the div tag with the id "output" to greet the user. 
*/
function exampleFunction() {
var name = document.getElementById("inputText").value; //Read and store the value
document.getElementById("output").innerHTML = "Hello " + name + "!"; //Output the result
}
</script>

</body>
</html>

Notes:

• In JavaScript comments to the code is made with //
• Comments more then one line start with /* and end with */

2. Selection  (Conditional Statements)

Selection is a  type of statement that lets you check whether one condition is met before taking another action:

If this -> do that

In this exampel we will check if the name the user entered is Santa.

Example 4: Selection in JavaScript

<!DOCTYPE html>
<html>
<body>
Enter Name: <input type="text" id="inputText">
<button onclick="exampleFunction()">Submit</button>

<div id="output"></div>

<script>
function exampleFunction() {
var name = document.getElementById("inputText").value;
if (name == "Santa") {
document.getElementById("output").innerHTML = "Hi Santa, I promise I have been good this year!";
} else {
document.getElementById("output").innerHTML = "Hello " + name + "!";
}

}
</script>


</body>
</html>

Notes:

• We here use the if statement to do our test to see if the variable “name” is equal to santa.
• In javaScript “=” is used to assign values to variables. To compare values you need to use “==” instead. To check if something is not equal to you can use “!=“

Exercise:

2) Write a program that asks for a password.

• Store the password in a variable and when the button is clicked compare the password with the input.
• Congratulate the user if the password is correct.
• Let the user know if the password is incorrect.

3. Iteration (Loops)

Iteration is a sequence of instructions that are executed over and over again.

We will here use the Javascript for statement to make a loop that will print the name in a number of times defined by the user.

Example 5: Iteration in Javascript

<!DOCTYPE html>
<html>
<body>
Enter Name: <input type="text" id="inputText"><br>
How many times: <input type="number" id="inputNumber">
<button onclick="exampleFunction()">Submit</button>

<div id="output"></div>

<script>
function exampleFunction() {
var name = document.getElementById("inputText").value;
var numberoftimes = document.getElementById("inputNumber").value;
var html_out = "";


for (let i = 0; i < numberoftimes; i++) {
html_out += "I ❤️ " + name + "!<br>";
}
document.getElementById("output").innerHTML = html_out;
}
</script>


</body>
</html>

 Note:

• The variable i is often used as a incrementor. Something we can store a value in that we can ad to for every run in the loop. This is what i++ does. It ads 1 to i for every time the loop is run.
• We use the html_out variable to store what will be sent to the user at the end. If we would set the innerHTML inside the loop we would constantly do a overwrite.

Exercise:

3) Write a program in JavaScript to display the multiplication table of a given number.

• The multiplication table should stop at 10.

Tip:

1. Take inspiration from example 5 above.
2. Use the variable i to do the calculation
3. It can help in this case if you set i to 1 instead of 0
4. One can use <= to see if i is either less than or equal to 10

Now that you have an understanding for the basic programing constructs in JavaScript you can make alot of fun stuff and is ready to push on to a more advanced level.

Level 3 – Getting More Advanced

Functions in JavaScript

A function is a block of code that is designed to perform a particular task and is run (executed) when invoked (called).

Functions lets us break down a problem into smaller parts and makes it possible to reuse our code instead of having to rewrite it over and over again.

Example function:

function functionname(parameter1, parameter2) {
  // code to be executed when the function is called
}

JavaScript has a lot of built-in functions you can use. There are also alot of different third party librarys available stacked with functions and you can always code your own functions.

JavaScript Objects, Methods And Properties

Objects is a way of making coding simpler to understand for us as programmers as it resembles how our real physical world works.

Everything in our real world can be classified to be an object. For example you as a person is a instance (a object) of the class human. You hold the memories, knowledge and skills needed to perform different tasks.

Objects in JavaScript works in the same way. Objects are “black boxes” with properties, methods and a interface to send data to and from it.

You can read more about objects in coding here.

Example 6: Example of a Javascript Object:

const car = {
  brand: "Volvo",
  model: "TP21",
  year: 1956,
  fullTitle : function() {
    return this.brand + " " + this.model + " (" + this.year + ") ";
  }
};

Note:

• An object can store both data and have its own functions
• “This” refers to this instance of the object. Learn more about the use of this here.

The DOM

When it comes to JavaScript, it often interacts with the Document Object Model.

The DOM is a programming interface (api) for web documents that represents the page as objects so that programs can interact with it.

As a coder you dont need to know how everything work in the browser.

The DOM holds all the Objects, Methods And Properties needed for the browser to handle the web page.

You only need to know how to communicate with the DOM on a high level.

The Element Object

The Element Object represents an HTML element (Div, A, P, H, Table..)

Methods and Properties

Properties are values of HTML elements that you can set or change. You can change the content of an HTML element.

A method is an action you can perform on HTML elements.

Example 7: Manipulating the DOM

document.querySelector("body").innerHTML = "Hello World!";

Note:

• In this example the document is the object
• querySelector is the method and is used to find the “body” element
• and innerHTML = “Hello World!” is the property

Exercise:

4) Write a program in JavaScript that takes a string of text as a input and reverse the text as output.

Hint:

data = document.getElementById("inputText").value; // Get the input text
reversed = data.split("").reverse().join(""); // Reverse the text

• You can find a live example of a app where you reverse text here

Below we list some resources that can help you on your JavaScript journey.

Resources to Learn JavaScript

So now that you have more interest in learning JavaScript, check out these resources in case you want to start learning on your own, and remember:

“Crawl before you walk, walk before you run, and run, run and run before you can fly…”

Codecademy: One of the best places to learn JavaScript online.

freecodeCamp: Looking for free resources? This is your place — and with certifications.

Pluralsight: Pluralsight offers some interesting online courses ideal for beginners.

Coursera: Lots of free and paid courses.

Codementor: Codementor provides great interactive JavaScript tutorials.

Beginner Guides Related to JavaScript

Top 5 Reasons Why We Love JavaScript

JavaScript is a versatile and powerful programming language that you can use in your projects. Here are five reasons why JavaScript is great for developers:

1. JavaScript is Readable: The syntax of JavaScript is straightforward, which makes it easy to read and understand.
2. JavaScript is Fast: JavaScript code tends to be fast and efficient.
3. JavaScript Has a Wide Range of Applications: With the Node.js platform and React, you have a powerful development environment for developing with JavaScript that goes beyond traditional web development. Because of its versatility, JavaScript can be used in a wide variety of applications, including web development, mobile development, and desktop application development. You can now use your front end coding skills to the back end.
4. JavaScript Is Supported by All Major Browsers: JavaScript is supported by all major browsers, so you can rely on it to work in all environments.
5. JavaScript Is Familiar to Developers Who are Already Coding: JavaScript is a programming language that most developers are already familiar with. There are a ton of good tutorials and good instructions for whatever you want to make. This makes it easy for you to start coding with JavaScript right away.

Conclusion

JavaScript is a powerful, versatile, and fast language that can be used for a variety of application development purposes. Whether you’re a beginner or an experienced developer, JavaScript is a great choice for your next coding project.