Learn JavaScript from Scratch: Mastering the Fundamentals

JavaScript is the cornerstone of the modern web, allowing us to create dynamic and interactive pages. Since its inception, this language has grown exponentially, becoming an essential tool for any web developer. If you are here, you are probably taking your first steps in this exciting world. Congratulations! You are about to embark on a journey that will take you through the fundamental concepts of JavaScript.

What is JavaScript?

JavaScript (JS) is a programming language that allows you to implement complex and dynamic components in web pages. It was originally designed to work in browsers, but is now also used in server development, mobile applications, and more.

Why Learn JavaScript?

JavaScript is a must if you want to become a full-stack web developer. It allows you to add interactivity to your sites, perform operations in real time without having to reload the page (thanks to AJAX), and create rich and complex web applications. Additionally, with the expansion of platforms like Node.js, JavaScript now dominates the backend as well.

Getting Started: Basic JavaScript Syntax

Getting started with JavaScript is easy. Most browsers already have a JavaScript engine built in, meaning you don't need to install anything to get started.

Variables

Variables are containers that store values that you can use and modify. In JavaScript, you can declare a variable using var, let, either const.

let message = "Hello, World!"; const PI = 3.1416;

The main difference between let y const the thing is let allows you to change the value of the variable, while const keeps the value constant.

Type of data

JavaScript is a dynamically typed language. This means that variables do not require you to declare their type beforehand and can change type.

There are different types of data in JavaScript:

• Numbers: both integers and decimals.
• Strings: Text wrapped in quotes.
• Booleans: true o false.
• undefined y null: represent the absence of value.
• Objects: collections of key-value pairs.
• Arrays: ordered lists of values.

Operators

Operators allow you to perform mathematical operations, concatenate strings, compare values, among others.

// Arithmetic let sum = 10 + 5; // 15 let difference = 10 - 5; // 5 // String concatenation let greeting = "Hello " + "World"; // "Hello World" // Comparison let isSame = (10 == "10"); // true due to type conversion

Control Structures

Controlling the flow of your program is essential. With control structures, you can execute code conditionally or repeat it multiple times.

Conditionals

if (condition) { // code that is executed if the condition is true } else { // code that is executed if the condition is false }

Loops

// For for (let i = 0; i < 5; i++) { console.log(i); // Print numbers from 0 to 4 } // While let i = 0; while (i < 5) { console.log(i); // Print numbers from 0 to 4 i++; }

Features

Functions are blocks of code that you can execute multiple times. They can receive parameters and return a value.

function greet(name) { return "Hello " + name; } console.log(greet("World")); // "Hello World"

DOM: Interacting with Web Pages

The Document Object Model (DOM) is a structured representation of the web page. It allows JavaScript to change the content, structure and style of websites.

// Element selection let title = document.getElementById("myTitle"); // Modify content title.textContent = "New Title"; // Listen and handle title events.addEventListener("click", function() { alert("You clicked on the title"); });

Events and Handling

Interacting with the user is a core part of JavaScript in the browser. Events allow you to respond to user actions such as clicks, mouse movements, or keystrokes.

button.addEventListener("click", function() { console.log("Button clicked"); });

Modern Tools

As you advance in JavaScript, you may come across modern tools such as transpilers (Babel), module packagers (Webpack), and libraries or frameworks such as React, Angular or Vue.js. These tools allow you to build more robust applications and keep your code organized.

Additional Resources and Community

Never underestimate the power of online community and resources. To delve deeper into specific topics or resolve doubts, you can visit NelkoDev, where you will find detailed tutorials, explanations, and practical examples. If you have questions or need guidance, feel free to contact us at Our Contact Form. We are here to help you in your learning!

JavaScript is a fascinating language with a vibrant and constantly evolving ecosystem. By starting with these fundamental concepts, you have equipped yourself with the knowledge to start creating and experimenting in the world of web development. The journey has just begun, so keep exploring and building!