In the bustling city of Codeville, the Grand Council of Developers embarked on a journey to master the fundamentals of JavaScript, a powerful and versatile language essential for web development. Join us as we explore the basics of JavaScript, from variables and data types to control structures and functions.
Mayor Binary began the lesson. “JavaScript is a high-level, interpreted programming language that is widely used to create interactive and dynamic web pages. It is an essential part of web development, alongside HTML and CSS.”
The council learned that variables are used to store data, and JavaScript supports various data types.
Declaring Variables
Variables can be declared using var, let, or const.
javascript
Copy code
var name = “Alice”;
let age = 25;
const city = “Codeville”;
Data Types
JavaScript supports several data types, including:
javascript
Copy code
let name = “Alice”; // String
let age = 25; // Number
let isStudent = true; // Boolean
let colors = [“red”, “green”, “blue”]; // Array
let person = { name: “Alice”, age: 25, city: “Codeville” }; // Object
Operators are used to perform operations on variables and values.
Arithmetic Operators
javascript
Copy code
let a = 10;
let b = 5;
let sum = a + b; // 15
let difference = a – b; // 5
let product = a * b; // 50
let quotient = a / b; // 2
let remainder = a % b; // 0
Assignment Operators
javascript
Copy code
let x = 10;
x += 5; // x = x + 5 (15)
x -= 3; // x = x – 3 (12)
x *= 2; // x = x * 2 (24)
x /= 4; // x = x / 4 (6)
Comparison Operators
javascript
Copy code
let a = 10;
let b = 5;
console.log(a == b); // false
console.log(a != b); // true
console.log(a > b); // true
console.log(a < b); // false
console.log(a >= 10); // true
console.log(a === 10); // true
console.log(a !== 10); // false
Logical Operators
javascript
Copy code
let isStudent = true;
let isAdult = false;
console.log(isStudent && isAdult); // false
console.log(isStudent || isAdult); // true
console.log(!isStudent); // false
Control structures are used to control the flow of execution in a program.
Conditional Statements
javascript
Copy code
let age = 25;
if (age < 18) {
console.log(“You are a minor.”);
} else if (age >= 18 && age < 65) {
console.log(“You are an adult.”);
} else {
console.log(“You are a senior.”);
}
let day = 3;
switch (day) {
case 1:
console.log(“Monday”);
break;
case 2:
console.log(“Tuesday”);
break;
case 3:
console.log(“Wednesday”);
break;
default:
console.log(“Invalid day”);
}
Looping Statements
javascript
Copy code
for (let i = 0; i < 5; i++) {
console.log(“Number: ” + i);
}
let i = 0;
while (i < 5) {
console.log(“Number: ” + i);
i++;
}
let j = 0;
do {
console.log(“Number: ” + j);
j++;
} while (j < 5);
Functions are blocks of code designed to perform a particular task. They are executed when “called” (invoked).
Function Declaration
javascript
Copy code
function greet(name) {
return “Hello, ” + name + “!”;
}
console.log(greet(“Alice”)); // Output: Hello, Alice!
Function Expression
javascript
Copy code
const greet = function(name) {
return “Hello, ” + name + “!”;
};
console.log(greet(“Bob”)); // Output: Hello, Bob!
Arrow Functions
Arrow functions provide a shorter syntax for writing function expressions.
javascript
Copy code
const greet = (name) => {
return “Hello, ” + name + “!”;
};
console.log(greet(“Charlie”)); // Output: Hello, Charlie!
The council learned about objects and arrays, which are used to store collections of data.
Arrays
Arrays are used to store multiple values in a single variable.
javascript
Copy code
let colors = [“red”, “green”, “blue”];
console.log(colors[0]); // Output: red
colors.push(“yellow”); // Add an element to the end
console.log(colors.length); // Output: 4
colors.pop(); // Remove the last element
console.log(colors.length); // Output: 3
Objects
Objects are used to store keyed collections of data.
javascript
Copy code
let person = {
name: “Alice”,
age: 25,
city: “Codeville”,
greet: function() {
console.log(“Hello, my name is ” + this.name);
}
};
console.log(person.name); // Output: Alice
person.age = 26;
console.log(person.age); // Output: 26
person.greet(); // Output: Hello, my name is Alice
By mastering the basics of JavaScript, the Grand Council of Developers in Codeville laid a solid foundation for building dynamic and interactive web applications. JavaScript is a powerful language that, when combined with HTML and CSS, enables developers to create rich user experiences. Feel free to experiment with the provided examples and expand upon them to suit different scenarios. If you have any questions or need further assistance, I’m here to help. Happy coding!