Alejandro Londoño

Posted on Jun 2 • Updated on Jun 10

JavaScript Programming for Beginners

#javascript #tutorial #beginners #learning

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 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.

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++;
}

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.

<!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

Template Literals:

let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

Destructuring:

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

Modules:

// 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

DEV Community