JavaScript Introduction

JavaScript is the language that makes websites come alive. Every time you click a button, see a popup, or watch something move on a webpage, that's JavaScript doing its thing.

Without JavaScript, websites would just be static pages. You could read text and see images, but nothing would respond to you. No form validation, no animations, no interactive maps.

Think of it like this: HTML builds the structure of a house, CSS paints and decorates it, and JavaScript makes the doors open, lights turn on, and alarms ring.

JavaScript can also run on servers using Node.js. But for now, we will focus on how it works in the browser.

Why this matters: Almost every website you use daily (Google, YouTube, Amazon) runs JavaScript. Learning it opens the door to building real things on the internet.

Good news: you can start learning JavaScript with zero programming experience. You don't need a computer science degree.

But before we write any JavaScript, let's quickly understand a few basic terms. These will help everything else make sense.

The image above shows a simple path. We'll cover each step below. Don't rush. Just follow along.

Don't worry if some of these terms feel new. You don't need to memorize anything right now. Just get familiar.

A programming language is just a way to talk to a computer. You write instructions, and the computer follows them.

Think of it like giving directions to someone. But instead of saying "turn left at the signal," you write code that tells the computer exactly what to do.

There are many programming languages out there. Some are easier for humans to read, some are easier for machines. They fall into two categories:

• High-Level Languages (easy for humans)
• Low-Level Languages (closer to the machine)

JavaScript is a high-level language. That means it's designed to be easy for us to read and write.

High-level languages use words that look like English. You don't need to know how the computer works inside. You just write your logic, and the language handles the rest.

But here's the catch: computers don't actually understand English. They only understand machine code (1s and 0s). So high-level code needs to be translated first.

As you can see above, high-level code gets converted into machine code by a translator (called a compiler or interpreter). You don't have to worry about that part. It happens automatically.

Examples: JavaScript, Python, Java, C++.

Here's what JavaScript looks like. Notice how readable it is:

//Adding two numbers
let a = 20; // Assign 20 to a 
let b = 40; // Assign 40 to b 
let c = a + b; // Assign a + b to c

Low-level languages are much closer to what the computer actually understands. Instead of English-like words, they use short codes called mnemonics.

They're harder to read and write. But they give you direct control over the hardware. That's why they're used for things like operating systems and device drivers.

As a beginner, you will never need to write low-level code. But it's good to know it exists. It helps you appreciate why high-level languages like JavaScript are so much easier to work with.

Here's the same "add two numbers" task, but in Assembly language. Compare it with the JavaScript version above:

//Adding two numbers
moveq #20,d3     ;Move (quick) 20 to data reg 3 
moveq #40,d4     ;Move (quick) 40 to data reg 4
move.l d3,d5      ;Move (long) reg 3 to reg 5
add.l d4,d5       ;Add (long) reg 4 to reg 5

Frontend is everything the user can see and interact with. The buttons, the text, the colors, the layout. All of that is the frontend.

When you visit any website, what shows up in your browser is the frontend. It's built using three technologies: HTML (structure), CSS (design), and JavaScript (interactivity).

Think of a restaurant. The frontend is the dining area. It's what the customer sees and experiences.

Note: This entire tutorial series focuses on frontend JavaScript. If you're interested in backend (server-side), that will be covered in separate Node.js tutorials.

Here's a simple HTML page. This is what frontend code looks like at its most basic:

<!DOCTYPE html>
<html>
<head>
  <title>Simply JavaScript</title>
</head>
<body>
  <h1>Welcome To Simply JavaScript!</h1>
</body>
</html> 

The backend is everything that happens behind the scenes. You don't see it, but it does the heavy lifting.

When you log in to a website, the backend checks your password. When you search for something, the backend finds the results from a database. When you place an order, the backend saves it.

Going back to our restaurant analogy: if the frontend is the dining area, then the backend is the kitchen. The customer never sees it, but that's where the real work happens.

Backend languages include Java, Python, Ruby, and even JavaScript (using Node.js). Frameworks like Express.js, Django, and Ruby on Rails make backend development faster.

Backend

//Hello SimplyJavaScript program in Java
class Hello {
    public static void main(String[] args) {
        System.out.println("Hello SimplyJavaScript!"); 
    }
} 

HTML stands for HyperText Markup Language. It's the skeleton of every web page.

You use HTML to define what goes on the page: headings, paragraphs, images, links, buttons. It doesn't make things look pretty, and it doesn't make things interactive. It just defines what's there.

For example, this very page you're reading right now is built with HTML. Every heading, every paragraph, every image you see is an HTML element.

The image above shows a basic HTML form. All those text fields and the submit button? That's HTML.

CSS stands for Cascading Style Sheets. If HTML is the skeleton, CSS is the skin and clothing.

CSS controls how things look: colors, fonts, spacing, layout, backgrounds. Without CSS, every website would look like a plain text document from the 90s.

The best part? CSS is separate from HTML. This means you can change the entire look of a website without touching its content. You can also make designs that work on phones, tablets, and desktops.

The image above shows the same form, but now with CSS styling applied. Notice how different it looks.

JavaScript is what makes web pages actually do things.

Click a button and a menu opens? JavaScript. Type in a search box and see suggestions appear? JavaScript. Submit a form and see a success message? JavaScript.

HTML creates the elements. CSS makes them look nice. JavaScript makes them respond to you.

The image above shows a form with JavaScript handling the interaction. That's the power you're about to learn.

These three always work together. Here's the simplest way to remember it:

• HTML = What's on the page (text, images, buttons)
• CSS = How it looks (colors, fonts, layout)
• JavaScript = How it behaves (clicks, animations, form checks)

You can't build a good website with just one of them. They're a team. And JavaScript is the part that makes the experience feel alive.

The image above shows how all three work together on a real page.

JavaScript in the browser is powerful, but it has some limits. This is by design. Browsers need to keep you safe, so they don't let JavaScript access everything on your computer.

What JavaScript CAN do in a browser:

• Change text, images, and styles on a page
• Respond to clicks, typing, scrolling, and other user actions
• Fetch data from a server without reloading the page
• Create animations and visual effects
• Validate form inputs before submitting
• Store small amounts of data locally in the browser

What JavaScript CANNOT do in a browser:

• Read or write files on your computer
• Access your camera or microphone without your permission
• Talk to other websites unless they allow it (security rule)
• Directly control hardware like printers or USB devices

Good to know: With Node.js, JavaScript can do file operations and server tasks. But that's outside the browser. We'll stick to browser JavaScript for now.

• What is a programming language?
• What is front-end?
• What is back-end?
• What is HTML?
• What is CSS?
• What is JavaScript?
• Differentiate between JavaScript and Java?
• Tell us about role of HTML, CSS, and JavaScript in Web development?
• What distinguishes a high-level programming language from a low-level programming language?
• Explain where low-level programming languages are preferred despite their complexity compared to high-level languages.
• Differentiate between frontend and backend development.
• What are the capabilities and limitations of JavaScript?