Mastering JavaScript Basic Syntax: Your Starting Point

Learn the essential rules and building blocks of JavaScript, from creating variables to controlling the flow of your program.

Welcome! Let's explore the fundamental syntax of JavaScript, the language that brings websites to life.

/* JavaScript Syntax 101 */

Variables & Data Types

Variables are containers for storing data. In modern JavaScript, you declare them using let (for values that can change) or const (for constant, unchangeable values). Each variable holds a specific data type, like a String for text, a Number for numeric values, or a Boolean for true/false.

Operators: The Action Symbols

Operators are symbols that perform operations on values. Arithmetic operators (`+`, `-`, `*`, `/`) do math. Comparison operators (`===`, `>`) compare values and return true or false. Logical operators (`&&` for "and", `||` for "or") combine boolean expressions.

Control Flow: Directing Your Code

Control flow statements direct the order in which your code is executed. The `if...else` statement runs code only if a certain condition is true. Loops, like the for loop, repeat a block of code multiple times, which is essential for working with collections of data.

Core Rules & Comments

JavaScript has a few key syntax rules. Statements are typically ended with a semicolon (;), although it's sometimes optional. Code blocks for things like `if` statements are enclosed in curly braces ({ }). Comments, which are ignored by the browser, are written with // for single lines or /* ... */ for multiple lines.

Practice Zone

Interactive Test 1: Sort Data Types

Drag the values to their correct data type container.

Arrastra en el orden correspondiente.

Arrastra las opciones:

true

"Hello"

Completa el código:

String______

Number______

Boolean______

Unlock with Premium

Interactive Test 2: Declare a Variable

Complete the variable declaration for a score that will change.

Rellena los huecos en cada casilla.

// Player score
 score = 0;
score = 10;

Unlock with Premium

Practice Example: Code Editor

Write an if statement that logs "Welcome!" to the console if the isLoggedIn variable is true.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

const isLoggedIn = true;
if (isLoggedIn === true) {
    console.log("Welcome!");
}

Unlock with Premium

Knowledge Check

What is the key difference between `==` and `===` in JavaScript?

Unlock with Premium

From Syntax to a Dynamic Web Page

Knowing JavaScript syntax is the first step. The real magic happens when you use it to interact with the HTML on a page. This is done through the Document Object Model (DOM).

1. Updating Content with Variables

You can store data in variables and use them to change what a user sees. For example, you can grab an HTML element by its ID and update its text content.

// JS code
let userName = "Maria";
document.getElementById('greeting')
  .textContent = `Hello, ${userName}!`;

Hello, Maria!

2. Making Decisions with Conditionals

`if` statements allow your page to react differently based on conditions. Here, we check a password length and change the color of a message to give feedback to the user.

// JS code
let passwordLength = 5;
const message = document.getElementById('msg');
if (passwordLength < 8) {
  message.style.color = 'red';
}

Password is too short.

3. Creating Elements with Loops

Loops are perfect for repetitive tasks. Instead of writing HTML for every item in a list, you can use a `for` loop to generate the elements dynamically from a JavaScript array.

// JS code
const fruits = ['Apple', 'Banana'];
const list = document.getElementById('fruit-list');
for (const fruit of fruits) {
  const li = document.createElement('li');
  li.textContent = fruit;
  list.appendChild(li);
}

Apple
Banana

Practical Takeaway: Basic syntax is your toolkit. Mastering variables, conditionals, and loops allows you to build responsive, interactive, and data-driven web experiences by manipulating the DOM.

JavaScript Syntax Glossary

let: A keyword used to declare a block-scoped variable that can be reassigned a new value.
const: A keyword used to declare a block-scoped variable whose value cannot be reassigned. It's a constant.
String: A data type used for text, enclosed in single quotes, double quotes, or backticks (e.g., `'hello'`, `"world"`, `` `JS` ``).
Number: A data type for all numeric values, including integers and decimals (e.g., `42`, `3.14`).
Boolean: A logical data type that can only have one of two values: `true` or `false`.
Operator: A symbol that performs an operation, such as `+` for addition or `===` for strict equality comparison.
if statement: A conditional statement that executes a block of code if a specified condition evaluates to true.
for loop: A control flow statement for creating a loop that executes a block of code a specified number of times.