JavaScript Introduction

JavaScript is a programming language that allows you to make websites interactive. It is used to control behavior, handle user input, and dynamically update content.

Variables

Variables are used to store data that can be reused throughout your program. In JavaScript, let is used for values that may change, while const is used for values that should remain constant. 

let age = 18;
const name = "Loris Widmer";

Functions

Functions are reusable blocks of code that perform a specific task. They help keep your code organized and reduce repetition. 

function greet() {
    alert("Hello World");
}

Conditionals

Conditional statements allow your program to make decisions. Code inside a condition only runs if the specified condition evaluates to true. 

if (age >= 18) {
    console.log("Adult");
}

Button Interaction (Events)

JavaScript can react to user actions such as clicks, keyboard input, or mouse movement. These interactions are handled using events.

Counter Example

This example demonstrates how JavaScript updates values dynamically. Each button click changes a variable and updates the displayed result instantly.

0

DOM Manipulation

The DOM (Document Object Model) allows JavaScript to access and modify HTML elements. This makes it possible to change text and content without reloading the page.

This text will change.

Advanced JavaScript

Advanced JavaScript focuses on asynchronous code, APIs, and real-world use cases. These concepts are essential for modern web applications.

Async & Await

JavaScript is asynchronous by default. async and await allow you to write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain. 

async function loadData() {
    const result = await fetchData();
    console.log(result);
}

Fetch API

The Fetch API allows JavaScript to communicate with servers. It is commonly used to retrieve data from APIs such as user data, posts, or statistics. 

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data));

Live API Example

This example fetches a random user from a public API and displays the result dynamically. Click the button to load new data.

Name: -

Email: -

Country: -

Error Handling

Errors can occur during network requests or data processing. Using try...catch ensures that your application does not crash and provides proper feedback to the user. 

try {
    const response = await fetch(url);
} catch (error) {
    console.error("Something went wrong");
}