Ejemplos JavaScript

// JavaScript Hello World Examples

// 1. Basic Hello World
console.log("Hello, World!");

// 2. Hello World with variable
const message = "Hello, World!";
console.log(message);

// 3. Hello World with function
function sayHello() {
    return "Hello, World!";
}
console.log(sayHello());

// 4. Hello World with template literals
const name = "World";
console.log(`Hello, ${name}!`);

// 5. Hello World in HTML
document.write('<h1>Hello, World!</h1>');

// 6. Hello World with alert (browser)
alert("Hello, World!");

// 7. Hello World with DOM manipulation
const heading = document.createElement('h1');
heading.textContent = 'Hello, World!';
document.body.appendChild(heading);

// 8. Hello World with ES6 arrow function
const greet = () => "Hello, World!";
console.log(greet());

// 9. Hello World with class
class Greeter {
    constructor(message = "Hello, World!") {
        this.message = message;
    }
    greet() {
        return this.message;
    }
}
const greeter = new Greeter();
console.log(greeter.greet());

// 10. Hello World with async/await
async function helloAsync() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Hello, World!"), 1000);
    });
}
helloAsync().then(console.log);

// Basic data types examples
const number = 42;
const string = "Hello";
const boolean = true;
const array = [1, 2, 3];
const object = { name: "John", age: 30 };

console.log(typeof number);    // number
console.log(typeof string);    // string
console.log(typeof boolean);   // boolean
console.log(typeof array);     // object
console.log(typeof object);    // object

// Control flow examples
if (number > 0) {
    console.log("Positive number");
} else {
    console.log("Non-positive number");
}

// Loop examples
for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
}

// Array methods examples
const fruits = ["apple", "banana", "cherry"];
fruits.forEach(fruit => console.log(fruit));

const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ["APPLE", "BANANA", "CHERRY"]

// JavaScript DOM Manipulation Examples

// 1. Selecting elements
const heading = document.getElementById('myHeading');
const paragraphs = document.querySelectorAll('p');
const container = document.querySelector('.container');

// 2. Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello from JavaScript!';
newDiv.className = 'highlight';
newDiv.style.color = 'blue';

// 3. Appending elements
document.body.appendChild(newDiv);

// 4. Event handling
const button = document.createElement('button');
button.textContent = 'Click me!';
button.addEventListener('click', function() {
    alert('Button was clicked!');
});
document.body.appendChild(button);

// 5. Form handling
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter your name';
input.addEventListener('input', function(e) {
    console.log('Input value:', e.target.value);
});

// 6. Dynamic content updates
const counter = document.createElement('div');
counter.textContent = 'Count: 0';
let count = 0;

const incrementBtn = document.createElement('button');
incrementBtn.textContent = 'Increment';
incrementBtn.addEventListener('click', function() {
    count++;
    counter.textContent = `Count: ${count}`;
});

document.body.appendChild(counter);
document.body.appendChild(incrementBtn);

// 7. CSS manipulation
const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
box.style.margin = '10px';
box.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'blue';
});
box.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'red';
});
document.body.appendChild(box);

// 8. Working with attributes
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.textContent = 'Visit Example';
link.setAttribute('title', 'Go to example.com');
document.body.appendChild(link);

// 9. List manipulation
const list = document.createElement('ul');
const items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach(itemText => {
    const li = document.createElement('li');
    li.textContent = itemText;
    list.appendChild(li);
});

document.body.appendChild(list);

// 10. Event delegation
const container2 = document.createElement('div');
container2.innerHTML = `
    <button class="action-btn">Action 1</button>
    <button class="action-btn">Action 2</button>
    <button class="action-btn">Action 3</button>
`;

container2.addEventListener('click', function(e) {
    if (e.target.classList.contains('action-btn')) {
        console.log('Button clicked:', e.target.textContent);
    }
});

document.body.appendChild(container2);

// JavaScript Fetch API Examples

// 1. Basic GET request
fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log('Post:', data))
    .catch(error => console.error('Error:', error));

// 2. GET request with async/await
async function getPost(postId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching post:', error);
    }
}

// 3. POST request
async function createPost(postData) {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData)
        });
        const data = await response.json();
        console.log('Created post:', data);
        return data;
    } catch (error) {
        console.error('Error creating post:', error);
    }
}

// Usage
createPost({
    title: 'My First Post',
    body: 'This is the body of my post',
    userId: 1
});

// 4. PUT request (update)
async function updatePost(postId, updateData) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(updateData)
        });
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error updating post:', error);
    }
}

// 5. DELETE request
async function deletePost(postId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            console.log('Post deleted successfully');
        }
    } catch (error) {
        console.error('Error deleting post:', error);
    }
}

// 6. GET request with query parameters
async function getPostsByUser(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching posts by user:', error);
    }
}

// 7. File upload simulation
async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        return result;
    } catch (error) {
        console.error('Error uploading file:', error);
    }
}

// 8. Multiple concurrent requests
async function getUserAndPosts(userId) {
    try {
        const [userResponse, postsResponse] = await Promise.all([
            fetch(`https://jsonplaceholder.typicode.com/users/${userId}`),
            fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
        ]);
        
        const user = await userResponse.json();
        const posts = await postsResponse.json();
        
        return { user, posts };
    } catch (error) {
        console.error('Error fetching user and posts:', error);
    }
}

// 9. Request timeout with AbortController
async function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
        const response = await fetch(url, {
            signal: controller.signal
        });
        clearTimeout(timeoutId);
        return await response.json();
    } catch (error) {
        if (error.name === 'AbortError') {
            console.error('Request timed out');
        } else {
            console.error('Error:', error);
        }
    }
}

// 10. Custom headers example
async function fetchWithHeaders() {
    try {
        const response = await fetch('https://api.example.com/data', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer your-token-here',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        });
        return await response.json();
    } catch (error) {
        console.error('Error with custom headers:', error);
    }
}