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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay