JavaScript Basics: Comprehensive Guide
JavaScript Basics: Comprehensive Guide 1
What is JavaScript? 2
1. Variables and Data Types 2
Variables 2
Data Types 3
2. Operators 3
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
Examples: 3
3. Functions 3
Syntax: 3
4. Control Flow 3
Conditional Statements: 3
Loops: 4
5. Arrays and Objects 4
Arrays: 4
Objects: 4
Examples 4
Example 1: Calculate the Sum of Two Numbers 4
Example 2: Check Even or Odd 4
Exercises 5
Exercise 1: Greet a User 5
Solution: 5
Exercise 2: Find the Largest Number 5
Solution: 5
Multiple-Choice Questions 5
Question 1: 5
Question 2: 5
Question 3: 6
Advanced Example: Create a To-Do List 6
JavaScript is a versatile programming language essential for creating dynamic and interactive
web applications. This guide introduces JavaScript fundamentals, including variables, data
types, operators, functions, and control flow, with examples, exercises, and quiz questions.
What is JavaScript?
JavaScript is a programming language that runs in the browser and allows developers to add
interactivity, handle events, and manipulate web page content.
1. Variables and Data Types
Variables
Variables store data that can be used and modified in your program.
let name = "John"; // String
const age = 25; // Number
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
var isStudent = true; // Boolean
Data Types
1. Primitive Types: String, Number, Boolean, Null, Undefined, Symbol.
2. Complex Types: Objects, Arrays, Functions.
2. Operators
Operators are used to perform operations on variables and values.
Examples:
● Arithmetic Operators: +, -, *, /, %
● Comparison Operators: ==, ===, !=, <, >, <=, >=
● Logical Operators: &&, ||, !
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b && b > 0); // true
3. Functions
Functions are reusable blocks of code.
Syntax:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!
4. Control Flow
Control flow structures manage the execution of code blocks.
Conditional Statements:
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
console.log("You are a minor.");
}
Loops:
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
5. Arrays and Objects
Arrays:
Arrays store lists of values.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
Objects:
Objects store key-value pairs.
let person = {
name: "John",
age: 30
};
console.log(person.name); // John
Examples
Example 1: Calculate the Sum of Two Numbers
function calculateSum(a, b) {
return a + b;
}
console.log(calculateSum(5, 7)); // 12
Example 2: Check Even or Odd
function isEven(num) {
if (num % 2 === 0) {
return "Even";
} else {
return "Odd";
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
}
}
console.log(isEven(10)); // Even
console.log(isEven(7)); // Odd
Exercises
Exercise 1: Greet a User
Write a function that accepts a name as input and prints a greeting message.
Solution:
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Alice");
Exercise 2: Find the Largest Number
Write a function that takes three numbers as arguments and returns the largest.
Solution:
function findLargest(a, b, c) {
return Math.max(a, b, c);
}
console.log(findLargest(5, 10, 8)); // 10
Multiple-Choice Questions
Question 1:
What keyword is used to declare a variable that can be reassigned?
1. var
2. let
3. const
4. Both 1 and 2
Answer: 4. Both 1 and 2
Explanation: Variables declared with var or let can be reassigned, but const cannot.
Question 2:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
Which operator checks both value and type?
1. ==
2. !=
3. ===
4. <=
Answer: 3. ===
Explanation: The === operator checks for strict equality, considering both value and type.
Question 3:
What is the correct syntax for a function declaration?
1. let myFunc = function {}
2. function myFunc() {}
3. func myFunc() {}
4. define myFunc() {}
Answer: 2. function myFunc() {}
Explanation: This is the correct syntax for declaring a function.
Advanced Example: Create a To-Do List
<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a task" />
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
const task = taskInput.value;
if (task) {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
const listItem = document.createElement("li");
listItem.textContent = task;
taskList.appendChild(listItem);
taskInput.value = "";
}
}
</script>
</body>
</html>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
