Curso Básico de JavaScript
JavaScript es un lenguaje de programación esencial para agregar interactividad y dinamismo a las
páginas web. Este curso te enseñará los conceptos básicos con ejemplos prácticos.
Lección 1: Introducción a JavaScript
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se ejecuta en el navegador y permite interactuar
con elementos HTML.
Cómo incluir JavaScript:
En línea:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Básico</title>
</head>
<body>
<h1>Hola, Mundo</h1>
<script>
alert('¡Bienvenido a JavaScript!');
</script>
</body>
</html>
En un archivo externo:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Externo</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hola, Mundo</h1>
</body>
</html>
Archivo script.js:
alert('¡Bienvenido a JavaScript desde un archivo externo!');
Actividad:
1. Crea un archivo HTML e incluye un script que muestre un mensaje de alerta.
2. Usa un archivo externo para el script.
Lección 2: Variables y Tipos de Datos
Declaración de variables:
let nombre = "Juan"; // Variable que puede cambiar
const edad = 25; // Variable constante
Tipos de datos:
• String: Cadenas de texto.
• let mensaje = "Hola, Mundo";
• Number: Números.
• let numero = 42;
• Boolean: Valores verdaderos o falsos.
• let esVerdad = true;
Actividad:
1. Declara variables con tus datos personales (nombre, edad, etc.).
2. Imprime las variables en la consola:
3. console.log(nombre);
4. console.log(edad);
Lección 3: Operaciones Básicas
Operadores:
let suma = 5 + 3; // 8
let resta = 10 - 7; // 3
let multiplicacion = 4 * 2; // 8
let division = 20 / 5; // 4
Actividad:
1. Crea un script que realice las operaciones básicas con dos números.
2. Imprime los resultados en la consola.
Lección 4: Condicionales
Sintaxis básica:
let edad = 18;
if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
Actividad:
1. Crea un programa que determine si un número es par o impar.
Lección 5: Bucles
Bucle for:
for (let i = 0; i < 5; i++) {
console.log("Número: " + i);
Bucle while:
let i = 0;
while (i < 5) {
console.log("Número: " + i);
i++;
}
Actividad:
1. Crea un programa que imprima los números del 1 al 10 usando un bucle.
2. Usa un bucle para calcular la suma de los números del 1 al 10.
Lección 6: Funciones
Definición de funciones:
function saludar(nombre) {
return "Hola, " + nombre + "!";
console.log(saludar("Ana"));
Actividad:
1. Crea una función que sume dos números y devuelva el resultado.
2. Llama a la función e imprime el resultado en la consola.
Lección 7: Interactuar con HTML
Modificar contenido:
<!DOCTYPE html>
<html>
<head>
<title>Interacción</title>
</head>
<body>
<h1 id="titulo">Hola</h1>
<button onclick="cambiarTexto()">Cambiar Texto</button>
<script>
function cambiarTexto() {
document.getElementById("titulo").innerHTML = "¡Texto Cambiado!";
}
</script>
</body>
</html>
Actividad:
1. Crea un botón que cambie el color de un párrafo al hacer clic.
Lección 8: Proyecto Final
Desafío:
1. Crea una página web interactiva que incluya:
o Un formulario para capturar nombre y edad.
o Un botón que muestre un saludo personalizado al usuario.
o Un contador que se incremente al hacer clic en un botón.
Ejemplo Final:
<!DOCTYPE html>
<html>
<head>
<title>Proyecto Final</title>
</head>
<body>
<h1>Interactividad con JavaScript</h1>
<h2>Formulario</h2>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre">
<label for="edad">Edad:</label>
<input type="number" id="edad">
<button onclick="saludar()">Saludar</button>
<p id="saludo"></p>
<h2>Contador</h2>
<button onclick="incrementar()">Incrementar</button>
<p id="contador">0</p>
<script>
function saludar() {
const nombre = document.getElementById("nombre").value;
const edad = document.getElementById("edad").value;
document.getElementById("saludo").innerHTML = `Hola, ${nombre}. Tienes ${edad} años.`;
let contador = 0;
function incrementar() {
contador++;
document.getElementById("contador").innerHTML = contador;
</script>
</body>
</html>
