Introduction to JavaScript: Bringing Webpages to Life
Welcome to the world of JavaScript (JS)! While HTML provides the structure and CSS
provides the style, JavaScript is the engine that makes a website interactive. It allows us to create
things like image galleries, form validations, and real-time updates without refreshing the page.
1. JavaScript Basics
JavaScript is a high-level, interpreted scripting language. This means it’s easy for humans to
read and it runs directly in the browser.
• Where it lives: You can write JS inside a <script> tag in your HTML file or in a
separate .js file.
• Case Sensitive: In JavaScript, MyVariable and myvariable are two different things!
2. Variables (var, let, const)
Variables are containers for storing data. Think of them as labeled boxes.
• var: The "old" way. It has some quirks regarding scope that can cause bugs. It is
generally avoided in modern coding.
• let: The modern way to declare variables that can change later (re-assignable).
• const: Short for "constant." Use this for values that should not change.
JavaScript
let score = 10; // This can be updated
const pi = 3.14; // This stays the same forever
3. Data Types
JavaScript needs to know what kind of data it is handling. The most common types are:
• String: Text wrapped in quotes, e.g., "Hello Students".
• Number: Integers or decimals, e.g., 25 or 9.99.
• Boolean: Logic values: true or false.
• Null: Represents an intentional empty value.
• Undefined: A variable that has been declared but not yet assigned a value.
4. Operators & Expressions
Operators allow us to perform calculations and logic.
• Arithmetic Operators: + (addition), - (subtraction), * (multiplication), / (division).
• Assignment Operators: = (assigns a value), += (adds and assigns).
• Comparison Operators: == (is equal to), === (strict equal to), != (not equal).
• Logical Operators: && (AND), || (OR), ! (NOT).
5. Arrays: Creation & Manipulation
An Array is a special variable that can hold more than one value at a time. It's like a list.
• Creation: let fruits = ["Apple", "Banana", "Cherry"];
• Accessing: We use "index" numbers starting from 0. fruits[0] is "Apple".
• Manipulation:
o .push("Orange"): Adds an item to the end.
o .pop(): Removes the last item.
o .length: Tells you how many items are in the list.
6. JavaScript Functions
Functions are blocks of code designed to perform a particular task. They allow you to write code
once and reuse it many times.
• Declaration: You define the function and what it does.
• Parameters: Inputs you give to the function (inside the parentheses).
• Calling (Invoking): You tell the code to actually run the function.
JavaScript
// Defining the function
function greetUser(name) {
return "Hello, " + name + "!";
}
// Calling the function
[Link](greetUser("Alex")); // Output: Hello, Alex!
Summary Tip: Think of Variables as Nouns, Operators as Math, and Functions as Verbs
(Actions).
Would you like me to create a practice quiz or a coding exercise based on these notes for your
students?