Introduction to JavaScript

The Language of Interaction

JavaScript is the programming language that brings web pages and apps to life. If HTML provides the structure (like the frame of a house) and CSS adds the style (the paint and furniture), JavaScript adds the interactivity (the lights, doors, and appliances).

When you write a script, you're giving a set of instructions for the device to follow. To do this, you need to speak its language. Let's start with the absolute basics of how JavaScript is written and how it remembers information.

Storing Information

In programming, we need places to store information that we can use later. These storage spots are called variables. Think of them as labeled boxes where you can keep a piece of data. You declare a variable using keywords like let or const.

let score = 100;
const playerName = "Alex";

Use let for variables whose values might change. Use const for constants—values you set once and never change.

Variables can hold different kinds of data, known as data types.

Data Type	Description	Example
String	Text, enclosed in quotes	`"Hello, world!"`
Number	Any kind of number, including decimals	`42` or `3.14`
Boolean	Represents true or false	`true`

You can combine these to build more complex instructions. For example, you can create a message using a variable.

const playerName = "Alex";
let welcomeMessage = "Welcome, " + playerName;

// welcomeMessage is now "Welcome, Alex"

Making Decisions and Repeating Actions

A script's real power comes from its ability to make decisions and perform repetitive tasks. This is handled by control structures.

Conditional statements use if and else to run code only when a certain condition is true. It's like telling the computer: if this is true, do this; otherwise, do that.

let temperature = 15;

if (temperature > 25) {
  console.log("It's a hot day!");
} else {
  console.log("It's not too hot.");
}

Loops, on the other hand, repeat a block of code multiple times. A for loop is great when you know exactly how many times you want to repeat an action.

// This loop will run 5 times
for (let i = 0; i < 5; i++) {
  console.log("This is loop number " + i);
}

Loops are essential for working with lists of items or repeating a task without writing the same code over and over.

Building Reusable Blocks

As your scripts grow, you'll find yourself writing the same lines of code in multiple places. Functions solve this problem by letting you package a block of code under a single name. You can then "call" that function whenever you need to run its code.

function

noun

A reusable block of code that performs a specific task.

// Defining the function
function greetUser(name) {
  return "Hello, " + name + "!";
}

// Calling the function
let greeting = greetUser("Maria");
console.log(greeting); // Outputs: Hello, Maria!

Functions also introduce the concept of scope. Variables declared inside a function are generally only accessible within that function. This helps prevent different parts of your code from accidentally interfering with each other.

Organizing Code with Objects

Object-Oriented Programming is a way of thinking about code by organizing it into self-contained units called objects. An object bundles related data and functions together.

Think of a car. It has properties (like color, model, and year) and methods, or actions it can perform (like start, stop, and accelerate). In JavaScript, we can model this with an object.

const car = {
  // Properties
  color: "red",
  model: "Corvette",
  year: 1967,

  // Method
  start: function() {
    console.log("Vroom!");
  }
};

You can access an object's properties and methods using dot notation.

console.log(car.model); // Outputs: Corvette
car.start(); // Outputs: Vroom!

Objects are incredibly useful for keeping your code organized and modeling real-world things in your scripts.

Time to check your understanding.

Quiz Questions 1/6

In the context of web development, if HTML is the skeleton and CSS is the skin, what is JavaScript?

Quiz Questions 2/6

Which keyword should you use to declare a variable that you do not intend to reassign?

These are the fundamental building blocks of JavaScript. With variables, control structures, functions, and objects, you have everything you need to start writing powerful scripts.

JavaScript Automation with Scriptable