Hi, everyoneđ!
Lately I put aside javascript a bit and now I would like to return to it to start some projects that I have pending, which is why my way of remembering crucial topics of the language is by doing this little tutorial. I hope that, like me, it will be helpful to you and tell me about interesting features of JavaScript.
I leave you a small video that I made in case you are interested in taking a look.
Youtube Videođœïž
Introduction
JavaScript is a programming language primarily used for creating interactive and dynamic content on websites. It can be run on the client side (in the browser) or on the server side (using environments like Node.js).
1. Setting Up Your Environment
To write and run JavaScript code, you only need a web browser (Chrome, Firefox, or Safari) and a text editor (Visual Studio Code, Sublime Text, or Notepad).
2. Your First JavaScript Program
Create a new HTML file and add the following code:
<html>
<head>
<title>My First JavaScript Program</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
console.log(“Hello, World!“);
alert(“Hello, World!“);
</script>
</body>
</html>
console.log(“Hello, World!”); prints “Hello, World!” to the browser’s console.
alert(“Hello, World!”); displays a pop-up alert with the message “Hello, World!”.
3. Basic Syntax and Variables
Variables store data values. You can declare variables using var, let, or const.
let age = 30; // Modern way, can be reassigned
const country = “USA“; // Cannot be reassigned
Additional Info: https://www.w3schools.com/js/js_variables.asp
4. Data Types
JavaScript supports various data types:
String: “Hello”
Number: 42
Boolean: true or false
Array: [1, 2, 3]
Object: {name: “John”, age: 30}
More about Data Types: https://www.w3schools.com/js/js_datatypes.asp
5. Operators
Arithmetic: +, -, * , /, %
Assignment: =, +=, =, =, /=
Comparison: ==, ===, !=, !==, >, <, >=, <=
More about operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators
6. Functions
Functions are blocks of code designed to perform a task.
return “Hello, “ + name + “!“;
}
let message = greet(“Alice“);
console.log(message); // “Hello, Alice!”
More about functions: https://www.w3schools.com/js/js_functions.asp
7. Conditionals
Conditionals control the flow or behavior of a program.
if (hour < 12) {
console.log(“Good morning!“);
} else if (hour < 18) {
console.log(“Good afternoon!“);
} else {
console.log(“Good evening!“);
}
More about conditionals: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals
8. Loops
For Loop:
console.log(“Iteration “ + i);
}
While Loop:
while (i < 5) {
console.log(“Iteration “ + i);
i++;
}
More about loops: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
9. DOM Manipulation
JavaScript can be used to manipulate the Document Object Model (DOM) to change HTML content dynamically.
<html>
<head>
<title>DOM Manipulation</title>
</head>
<body>
<h1 id=“title”>Hello, World!</h1>
<button onclick=“changeText()”>Click Me</button>
<script>
function changeText() {
document.getElementById(“title“).innerText = “Hello, JavaScript!“;
}
</script>
</body>
</html>
When the button is clicked, the text inside the <h1> element changes.
More about DOM API: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
10. Events
JavaScript can handle events such as clicks, mouse movements, key presses, and more.
<html>
<head>
<title>Event Handling</title>
</head>
<body>
<button id=“myButton”>Click Me</button>
<script>
document.getElementById(“myButton“).addEventListener(“click“, function() {
alert(“Button was clicked!“);
});
</script>
</body>
</html>
This code adds an event listener to the button, triggering an alert when the button is clicked.
More about events: https://www.w3schools.com/js/js_events.asp
11. Arrays and Objects
Arrays:
console.log(fruits[0]); // “Apple”
More about arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Objects:
name: “John“,
age: 30,
greet: function() {
return “Hello, “ + this.name;
}
};
console.log(person.name); // “John”
console.log(person.greet()); // “Hello, John”
More about objects: https://www.w3schools.com/js/js_objects.asp
12. ES6 Features
Modern JavaScript (ES6 and beyond) introduced many new features:
console.log(add(2, 3)); // 5
let greeting = `Hello, ${name}!`;
console.log(greeting); // “Hello, John!”
console.log(a); // 1
console.log(b); // 2
let { name, age } = person;
console.log(name); // “John”
console.log(age); // 30
export const add = (a, b) => a + b;
// In main file
import { add } from ‘./add.js‘;
console.log(add(2, 3)); // 5
14. Classes
JavaScript classes provide a more convenient and syntax-friendly way to create objects and handle inheritance.
// Constructor method
constructor(name, age) {
this.name = name;
this.age = age;
}
// Method
greet() {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
// Creating an instance of the class
const john = new Person(“John“, 30);
console.log(john.greet()); // “Hello, my name is John and I am 30 years old.”
More about classes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
15. Resources
MDN Web Docs – JavaScript documentation and tutorials.
JavaScript.info – A modern tutorial from the basics to advanced topics.
freeCodeCamp – Free coding courses.
W3Schools – Web developer site
