DEV Community

Cover image for From Basics to Intermediate: My Journey Learning JavaScript ✨
Davide
Davide

Posted on

1

From Basics to Intermediate: My Journey Learning JavaScript ✨

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
  2. Arrays
  3. Conditional Statements
  4. Functions
  5. Objects
  6. The DOM
  7. Events
  8. Integrating HTML and JS

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";
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2. Arrays

An array can store multiple values in a single variable. Use square brackets to define an array:

let fruits = ["apple", "banana", "cherry"];
Enter fullscreen mode Exit fullscreen mode

Access elements using their index (starting at 0):

console.log(fruits[0]); // Output: apple
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!");
}
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Methods in Objects

Objects can also store functions, known as methods:

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! 📲");
  }
};
phone.ring();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Updating Elements

Change content dynamically:

heading.innerText = "Welcome to JavaScript!";
Enter fullscreen mode Exit fullscreen mode

7. Events

JavaScript allows you to respond to user interactions, like clicks or key presses. Use .addEventListener():

button.addEventListener("click", () => {
  console.log("Button clicked!");
});
Enter fullscreen mode Exit fullscreen mode

Example: Increment a counter when a button is clicked:

let count = 0;
button.addEventListener("click", () => {
  count++;
  console.log(`Clicked ${count} times`);
});
Enter fullscreen mode Exit fullscreen mode

8. Integrating HTML and JS

JavaScript can be added directly in HTML files using the <script> tag:

<script>
  console.log("Hello from JavaScript!");
</script>
Enter fullscreen mode Exit fullscreen mode

For larger scripts, link an external .js file:

<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

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! ✨

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay