How to Code in JavaScript

JavaScript! You've probably heard of it. It's a key part of the internet, like HTML and CSS. It makes websites do cool things, like games and interactive stuff. Is it hard to learn? Maybe at first. But with the right help, you can do it. This guide will show you the basics, from simple rules to making things for the web.

Why Learn JavaScript?

Why bother learning JavaScript? Here's why it's worth your time:

It's everywhere. JavaScript works on phones, computers, and even servers. It's super versatile!
Make things move. Want a website that does more than just sit there? JavaScript lets you add cool effects.
Jobs, jobs, jobs! Lots of companies need people who know JavaScript.
Big help. A huge community of developers uses JavaScript. That means lots of help online.
Do it all. You can use JavaScript to build the front (what you see) and the back (what makes it work) of a website.

Get Ready to Code

Time to get set up! Luckily, JavaScript doesn't need much. Just a place to type code and a way to see it work.

Read Also: How to Learn Rust

Pick a Text Editor: This is where you'll write your code. Some good choices:
Visual Studio Code (VS Code): It's free and works great with JavaScript.
Sublime Text: Simple and popular.
Atom: Another free option from GitHub.
Web Browser: You already have one! Chrome and Firefox are good because they have tools to help you code.

The Basics: JavaScript Rules

Every language has rules. JavaScript is no different. Here are some basics:

Variables

Think of variables as boxes where you store information. You can name them anything you want. Almost.

// Using var var name = "John"; // Using let let age = 30; // Using const (for constants) const pi = 3.14159;

Important Differences:

var: Older way to make variables.
let: A newer way that's a bit safer. You can change the value later.
const: For things that never change, like pi.

Data Types

What kind of information can you store? Here are some common types:

String: Words and sentences. Like "Hello!"
Number: Any number. Like 10 or 3.14.
Boolean: True or false.
Null: Means "nothing."
Undefined: Means you haven't given a variable a value yet.
Object: A way to group things together. Like a person with a name and age.

Operators

Operators are like math symbols. They do things with your data.

Math: + (add), - (subtract), (multiply), / (divide).
Assignment: = (put a value in a variable).
Compare: == (is equal?), > (is greater than?).
Logic: && (and), || (or), ! (not).

Control Flow

This is how you tell the computer what to do, and when.

if...else: If something is true, do one thing. Otherwise, do something else.

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

Switch: A fancier way to do if...else for many options.

let day = "Monday"; switch (day) { case "Monday": console.log("It's the start of the week."); break; case "Friday": console.log("It's almost the weekend!"); break; default: console.log("It's a regular day."); }

for Loops: Do something many times.

for (let i = 0; i < 5; i++) { console.log("Iteration: " + i); }

while Loops: Keep doing something as long as something is true.

let i = 0; while (i < 5) { console.log("Iteration: " + i); i++; }

Functions

Functions are like mini-programs. You can use them over and over.

// Function declaration function greet(name) { return "Hello, " + name + "!"; } // Function call let greeting = greet("Alice"); console.log(greeting); // Output: Hello, Alice!

Arrow Functions: A shorter way to write functions.

const greet = (name) => "Hello, " + name + "!"; let greeting = greet("Bob"); console.log(greeting); // Output: Hello, Bob!

Objects

Think of an object as a real-world object. It has properties.

const person = { name: "John", age: 30, city: "New York", greet: function() { return "Hello, my name is " + this.name + "."; } }; console.log(person.name); // Output: John console.log(person.greet()); // Output: Hello, my name is John.

Making Websites Move: The DOM

The DOM is like a map of your website. JavaScript can use it to change things on the page.

Find Elements

First, you need to find the thing you want to change.

document.getElementById(id): Find something with a special ID.
document.querySelector(selector): Find the first thing that matches a CSS rule.
document.querySelectorAll(selector): Find allthe things that match a CSS rule.

// Get the element with the ID "myElement" const element = document.getElementById("myElement"); // Get the first paragraph element const paragraph = document.querySelector("p"); // Get all paragraph elements const paragraphs = document.querySelectorAll("p");

Change Elements

Now you can change what's inside, how it looks, and more.

// Change the text content of an element element.textContent = "New text content"; // Change the HTML content of an element element.innerHTML = "<strong>New HTML content</strong>"; // Change the style of an element element.style.color = "blue";

Add and Remove Elements

// Create a new element const newElement = document.createElement("div"); newElement.textContent = "This is a new div element."; // Append the new element to the body document.body.appendChild(newElement); // Remove an element element.remove();

Reacting to Users: Events

Events are things that happen. A click, a key press, etc. JavaScript can listen for these events and do something.

Common Events

click: When you click something.
mouseover: When the mouse goes over something.
keydown: When you press a key.
submit: When you send a form.

Listen for Events

Use addEventListener() to listen for events.

// Get the button element const button = document.getElementById("myButton"); // Add a click event listener button.addEventListener("click", function() { alert("Button clicked!"); });

Doing Things Later: Asynchronous JavaScript

Sometimes you need to do something that takes time. Asynchronous JavaScript lets you do that without freezing the page.

Callbacks

A callback is a function that runs after* something else is done.

function fetchData(callback) { setTimeout(function() { const data = "Data fetched successfully!"; callback(data); }, 2000); // Simulate a 2-second delay } fetchData(function(data) { console.log(data); // Output: Data fetched successfully! (after 2 seconds) });

Promises

Promises are a better way to handle things that take time.

function fetchData() { return new Promise(function(resolve, reject) { setTimeout(function() { const data = "Data fetched successfully!"; resolve(data); }, 2000); // Simulate a 2-second delay }); } fetchData() .then(function(data) { console.log(data); // Output: Data fetched successfully! (after 2 seconds) }) .catch(function(error) { console.error(error); });

Async/Await

This makes asynchronous code look easier to read.

async function fetchData() { return new Promise(function(resolve, reject) { setTimeout(function() { const data = "Data fetched successfully!"; resolve(data); }, 2000); // Simulate a 2-second delay }); } async function main() { try { const data = await fetchData(); console.log(data); // Output: Data fetched successfully! (after 2 seconds) } catch (error) { console.error(error); } } main();