Welcome to my guide on JavaScript fundamentals to advanced topics! As I was diving into learning JavaScript, I jotted down key points, examples, and tips. This post is structured from the basics to more advanced concepts, so you can follow along step-by-step. Let's get started!
Table of Contents
1. Variables
Variables store data that we can use in our programs. JavaScript provides two primary ways to declare variables:
-
let
: Used when the variable value may change. -
const
: Used for values that remain constant.
Example:
let age = 25;
const name = "Mario";
Variables can hold numbers, strings, booleans, or even undefined values. Additionally, JavaScript includes a range of arithmetic operators, such as +
, -
, *
, and %
. Fun fact: to calculate exponents, use **
!
console.log(2 ** 3); // Output: 8
2. Arrays
An array can store multiple values in a single variable. Use square brackets to define an array:
let fruits = ["apple", "banana", "cherry"];
Access elements using their index (starting at 0):
console.log(fruits[0]); // Output: apple
Adding and Removing Elements
You can modify arrays dynamically:
- Add to the end:
.push()
- Add to the beginning:
.unshift()
- Remove the last element:
.pop()
- Remove the first element:
.shift()
Example:
fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]
Searching Arrays
Use .indexOf()
to find the position of a value or .includes()
to check if it exists:
console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false
3. Conditional Statements
Conditional statements let your code make decisions. The if
and else
statements are common tools:
if (grade > 60) {
console.log("You passed!");
} else {
console.log("You failed!");
}
Comparison Operators
These help evaluate conditions:
-
===
(strict equality) -
!==
(strict inequality) -
>
(greater than) -
<
(less than) -
>=
(greater than or equal to) -
<=
(less than or equal to)
4. Functions
Functions are reusable blocks of code. Define them using the function
keyword:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!
Parameters and Arguments
Functions can take inputs, called parameters, and use those inputs when called with arguments:
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // Output: 5
5. Objects
An object is a collection of key-value pairs. It’s like a mini-database for related data:
const car = {
brand: "Tesla",
model: "Model 3",
year: 2020
};
console.log(car.brand); // Output: Tesla
Methods in Objects
Objects can also store functions, known as methods:
const phone = {
brand: "Apple",
ring() {
console.log("Ring, ring! 📲");
}
};
phone.ring();
6. The DOM
The Document Object Model (DOM) allows JavaScript to interact with HTML elements.
Selecting Elements
You can select HTML elements using the document
object:
const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text inside the <h1> tag
Updating Elements
Change content dynamically:
heading.innerText = "Welcome to JavaScript!";
7. Events
JavaScript allows you to respond to user interactions, like clicks or key presses. Use .addEventListener()
:
button.addEventListener("click", () => {
console.log("Button clicked!");
});
Example: Increment a counter when a button is clicked:
let count = 0;
button.addEventListener("click", () => {
count++;
console.log(`Clicked ${count} times`);
});
8. Integrating HTML and JS
JavaScript can be added directly in HTML files using the <script>
tag:
<script>
console.log("Hello from JavaScript!");
</script>
For larger scripts, link an external .js
file:
<script src="app.js"></script>
That’s it for my journey through JavaScript basics to intermediate topics! I hope you found this post helpful and fun to follow along. If you have questions or want to share your own learning tips, drop a comment below! Happy coding! ✨
Top comments (0)