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.
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:
<!DOCTYPE html>
<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
.
var name = "John"; // Old way
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
orfalse
-
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.
function greet(name) {
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.
let hour = 10;
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:
for (let i = 0; i < 5; i++) {
console.log("Iteration " + i);
}
- While Loop:
let i = 0;
while (i < 5) {
console.log("Iteration " + i);
i++;
}
9. DOM Manipulation
JavaScript can be used to manipulate the Document Object Model (DOM) to change HTML content dynamically.
<!DOCTYPE html>
<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.
<!DOCTYPE html>
<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:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // "Apple"
- More about arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Objects:
let person = {
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:
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
let { name, age } = person;
console.log(name); // "John"
console.log(age); // 30
// In file add.js
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.
class Person {
// 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
Top comments (0)