Intro to JavaScript Concepts
Learn the fundamental building blocks of JavaScript, including variables, data types, operators, functions, conditionals, loops, and objects.
JavaScript is a programming language commonly used to make web pages interactive and dynamic.
It works together with HTML and CSS to create modern web experiences.
JavaScript: Variables & Data Types:
Learn how to store information using let, const, and var. Understand strings, numbers, booleans, arrays, and objects.
In modern programming, variables act as dynamic, labeled storage containers inside a computer's memory, allowing developers to save, update, and reuse information on the fly.
Start Learning →JavaScript: Operators:
1. Optional Chaining Operator (?.)
- Old Way: let city = user && user.address && user.address.city;
- Modern Way: let city = user?.address?.city;
Here is a guide to the most essential modern JavaScript operators that replace older, clunky ways of writing code.
Safely accesses nested object properties even if an intermediate property is null or undefined. It prevents your code from crashing with a TypeError.
Start Learning →JavaScript: Functions:
To use a function, you must first define it (declaration) and then run it (invocation/calling).
- Parameters & Arguments: Parameters are placeholders listed in the function definition. Arguments are the actual values passed to the function when it is called.
- Return Statement: The return keyword stops the function's execution and outputs a value to the caller. If no value is returned, the function defaults to returning undefined
Direct Comparison: Types of FunctionsJavaScript offers several ways to define a function, each with its own behavior regarding hoisting (being able to call it before it is written in the code) and how it handles the this contex
Callback Functions: A callback is a function passed into another function as an argument, which is then executed at a later time. This is heavily used for handling user events or timing.
Start Learning →JavaScript: DOM:
Document Object Model (DOM) is a programming interface that treats an HTML document as a hierarchical tree structure.
- 1. The DOM Tree and Nodes: When a browser loads a webpage, it translates the raw HTML text into an object-oriented tree model. Everything in this tree is a node
- 2. Selecting Elements (The "Read" Operation):Before you can change something on the page, you have to target it. JavaScript uses global methods on the document object to query the DOM
Modifying Content and Attributes: Once you select an element, you can alter its contents or characteristics: Text & HTML Content:
4. Modifying Styles (CSS): You can directly alter the inline styles of an element using the .style property. Note that multi-word CSS properties use camelCase
Start Learning →JavaScript: Events:
An event is is a signal from the browser that something has occurred such as a user clicking a button, a page finishing loading, or a key being presse
- 1. Registering Event Handlers (Three Ways). An event handler (or listener) is the function that runs when an event fires. You can attach it to a DOM element in three main ways
- HTML Attributes (Not Recommended):Placing the code directly in the HTML tag. It mixes structure with logic and makes code difficult to maintain.
The Event Object (e or event): When an event occurs, the browser automatically passes an Event Object as the first argument to your handler function. This object contains useful metadata about what happened
DOM Properties:: Assigning a function to the element's event property in JavaScript. The downside is that it only allows one handler per event; assigning a new one overrides the old one.
Start Learning →Variables
Variables allow you to store information that can be used later in your program.
let username = "Alex"; const age = 25; console.log(username); console.log(age);
Operators
Operators allow JavaScript to perform calculations and comparisons.
let number1 = 10; let number2 = 5; let result = number1 + number2; console.log(result);
Functions:
// Passing an anonymous function expression as a callback
function
setTimeout(function() {
console.log("Executed after 2 seconds"); }, 2000);
Functions: Examples
A function is a reusable block of code that performs a particular task.
function greet() {
console.log("Hello JavaScript!");
}
greet();
DOM
The Document Object Model, or DOM, allows JavaScript to interact with HTML elements on a web page.
document.getElementById("title").textContent =
"JavaScript changed this text!";
JavaScript Events
Events allow JavaScript to respond to actions such as clicks, typing, and mouse movement.
button.addEventListener("click", function() {
console.log("Button clicked!");
});
Interactive Exercise
Try a simple JavaScript exercise below.
Click the Button
Click the button and let JavaScript change the message.