JavaScript Programming for Beginners
Tags: javascript, tutorial, beginners, learning
Published: 2024-06-02 22:00:39

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:

```html
<!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`.

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

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

```jsx
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**:

```jsx
for (let i = 0; i < 5; i++) {
    console.log("Iteration " + i);
}

```

- **While Loop**:

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

```html
<!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.

```html
<!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**:

```jsx
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**:

```jsx
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:

- [JavaScript Versions](https://www.w3schools.com/js/js_versions.asp)
- [**Arrow Functions**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):

```jsx
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
```

- [**Template Literals**:](https://www.w3schools.com/js/js_string_templates.asp)

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

```

- [**Destructuring:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

```jsx
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:**](https://www.w3schools.com/js/js_modules.asp)

```jsx
// 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.

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - JavaScript documentation and tutorials.
- [JavaScript.info](https://javascript.info/) - A modern tutorial from the basics to advanced topics.
- [freeCodeCamp](https://www.freecodecamp.org/) - Free coding courses.
- [W3Schools](https://www.w3schools.com/) - Web developer site