An Introduction to JavaScript for Beginners

Published February 22, 2016 · by Eric Wilson · in web-development

A beginner's guide to JavaScript, the programming language of the web. Learn its basic syntax and how it's used to create interactive and dynamic web pages.

Every modern web browser understands it, and almost every website uses it. JavaScript is the programming language of the web. While HTML provides the structure of a web page and CSS provides the style, JavaScript provides the interactivity. It's the language that makes web pages dynamic and responsive.

If you want to be a web developer, learning JavaScript is not optional; it's essential.

What Can JavaScript Do?

JavaScript is a client-side language, which means it runs in the user's web browser. It can:

  • Manipulate the HTML and CSS of a web page to change its content and style dynamically.
  • React to user events like mouse clicks, key presses, and form submissions.
  • Make asynchronous requests to a server to fetch new data without reloading the page (a technique known as AJAX).
  • Create animations, games, and complex user interfaces.

With the advent of platforms like Node.js, JavaScript can also be used to write server-side code, but its primary home is in the browser.

Your First JavaScript Program

The easiest way to run JavaScript is directly in your browser's developer console. But to add it to a web page, you typically include it in a <script> tag.

Let's create a simple HTML file:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My First JS Page</title>
</head>
<body>
    <h1>Welcome!</h1>
    <script>
        // This is JavaScript code
        alert('Hello, World!');
    </script>
</body>
</html>

When you open this file in a web browser, you will see an alert box pop up with the message "Hello, World!".

Variables and Data Types

A variable is a container for a value. In JavaScript, you declare a variable using the var keyword (or let and const in modern JavaScript).

var name = "Alice"; // A string
var age = 30;       // A number
var isActive = true;  // A boolean

JavaScript is a dynamically-typed language, meaning you don't have to specify the type of the variable.

Working with Data: Arrays and Objects

Arrays

An array is an ordered list of values, enclosed in square brackets [].

var fruits = ["Apple", "Banana", "Cherry"];

// Access items by their index (starting from 0)
var firstFruit = fruits[0]; // "Apple"

Objects

An object is a collection of key/value pairs, enclosed in curly braces {}. This is also known as an object literal.

var user = {
    name: "Bob",
    age: 25,
    city: "London"
};

// Access properties using dot notation
var userName = user.name; // "Bob"

Controlling the Flow: if Statements and for Loops

if Statements

An if statement runs a block of code only if a condition is true.

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

console.log() is a command that prints a message to the browser's developer console, which is incredibly useful for debugging.

for Loops

A for loop is used to repeat a block of code.

for (var i = 0; i < fruits.length; i++) {
    console.log("I like " + fruits[i]);
}

Reusing Code: Functions

A function is a reusable block of code.

function greet(name) {
    return "Hello, " + name + "!";
}

// Call the function
var message = greet("Charlie");
console.log(message); // "Hello, Charlie!"

Conclusion

JavaScript is the engine of the modern web. This guide has only touched on the very basics, but it covers the fundamental building blocks of the language. From here, you can explore how to use JavaScript to interact with the Document Object Model (DOM) to build dynamic and interactive web pages, and dive into the vast ecosystem of libraries and frameworks like React, Angular, and Vue.js that make building complex web applications easier than ever.

Back to All Blogs