Saltar al contenido principal
Volver al curso
Módulo 1 · Fundamentos15 min

Hola Mundo — Tu primer script

Insertar JavaScript en HTML, alert, console, DOM.

Recompensa al completar

Insignia “Hola mundo” · +10 puntos

La etiqueta <script>

Los programas de JavaScript se insertan en HTML usando la etiqueta <script>:

html
<!DOCTYPE html>
<html lang="es">
<body>
    <p>Antes del script...</p>
    <script>
        alert("¡Hola, mundo!");
    </script>
    <p>...Después del script.</p>
</body>
</html>

Scripts externos

Si tenemos mucho código, podemos colocarlo en un archivo separado:

html
<script src="mi-script.js"></script>

Ventajas: Caché del navegador, mejor organización, reutilización.

Mostrar información al usuario

alert() — Ventana emergente


javascript
alert("¡Hola, mundo!");

console.log() — Consola del navegador


javascript
console.log("Hola, mundo!");
console.log("Fecha:", new Date());

Modificar el DOM


javascript
document.getElementById("titulo").innerHTML = "Nuevo contenido";
document.body.style.backgroundColor = "#f0f0f0";

prompt() — Solicitar información


javascript
let nombre = prompt("¿Cuál es tu nombre?");
alert("¡Hola, " + nombre + "!");

confirm() — Confirmar una acción


javascript
let respuesta = confirm("¿Estás seguro?");
if (respuesta) {
    alert("Confirmado");
}

Comentarios


javascript
// Comentario de una sola línea
/* Comentario de múltiples líneas */
/** Comentario de documentación (JSDoc) */

Orden de ejecución

Los scripts se ejecutan de arriba hacia abajo. Si un script tiene un error, los posteriores no se ejecutarán.

Buenas prácticas

  • Coloca los scripts al final del <body>

  • Usa scripts externos para código complejo

  • Usa console.log() en lugar de alert() para depurar

  • Escribe comentarios para explicar código complejo

    • ?Ejercicio

    Usa console.log() para mostrar tres tipos de información: un string, un número y el resultado de una operación.

    editor.js
    12345

    Recompensa al completar

    Insignia “Hola mundo” · +10 puntos