JS Where To – Basics

Welcome to the world of JavaScript! This tutorial will guide you through the fundamental concepts needed to start building interactive web pages. We’ll begin with the basics – understanding variables, data types, and simple operations – all crucial for progressing further. JavaScript is a powerful language that allows you to make websites dynamic and responsive. Don’t worry if it seems daunting at first; we’ll break it down step-by-step.

Variables and Data Types

At the heart of JavaScript are variables – named storage locations that hold data. Think of them like labeled boxes where you can put information. JavaScript has several built-in data types:

Number: Represents numerical values (e.g., 10, 3.14).
String: Represents text (e.g., "Hello, world!", "JavaScript"). Strings are enclosed in single quotes (') or double quotes (").
Boolean: Represents truth values: true (yes) or false (no).
Array: An ordered collection of items. Items can be of different data types (e.g., [1, "apple", true]).
Object: A collection of key-value pairs. Keys are strings, and values can be any data type. (e.g., { name: "Alice", age: 30 })

Let's see these in action:

let age = 25; // Declares a variable named 'age' and assigns it the value 25.
let name = "Bob"; // Declares a variable named 'name' and assigns it the value "Bob".
let isStudent = true; // Declares a boolean variable named 'isStudent' and sets its value to true.
let numbers = [1, 2, 3]; // Declares an array named 'numbers' containing the numbers 1, 2, and 3.
let mixed = { name: "Charlie", city: "New York" }; // Declares an object named 'mixed' with a 'name' and 'city' property.

Operators

Operators are symbols that perform operations on data. Here are some common ones:

Arithmetic Operators: + (addition), - (subtraction), * (multiplication), / (division), % (modulo – remainder).
Comparison Operators: == (equal to), != (not equal to), === (strictly equal to – checks both value and type), !== (not strictly equal to), > (greater than), < (less than), >= (greater than or equal to), <= (less than or equal to).
Logical Operators: && (AND), || (OR), ! (NOT).

let x = 10;
let y = 5;

console.log(x + y); // Output: 15
console.log(x > y); // Output: true
console.log(x === y); // Output: false

Basic Input and Output

JavaScript allows you to interact with the user. Here's how to get input:

let userName = prompt("Enter your name:");
console.log("Hello, " + userName + "!");

This code prompts the user to enter their name using the prompt() function. The entered name is then stored in the userName variable, and finally, it's printed to the console.

Simple Calculations

You can perform calculations using variables:

let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is: " + sum); // Output: The sum is: 15

Working with Arrays

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // Output: apple
fruits.push("grape"); // Add "grape" to the end of the array
console.log(fruits); // Output: ["apple", "banana", "orange", "grape"]

Object Properties

let person = {
  name: "David",
  age: 30,
  city: "London"
};

console.log(person.name); // Output: David
console.log(person["age"]); // Output: 30

💡 Tip: Use the this keyword to access the object's properties. this refers to the object itself.

Summary

This tutorial has introduced you to the fundamental concepts of JavaScript: variables, data types, operators, input/output, basic calculations, and arrays. Remember to practice these concepts by writing your own code and experimenting with different scenarios. JavaScript is a versatile language, and mastering these basics will open doors to many exciting web development projects.

JS Where To