Lección 1: Introducción

HTML

Una página web con HTML y CSS es un sitio estático, siempre te mostrará el mismo contenido. Por muchas animaciones que incorpores para darle dinamismo y diversión, en cuanto refresques el navegador todo volverá a su estado primordial. Ninguna de tus acciones tendrán un efecto que perdure en el tiempo, ni los textos cambiarán según interactúes con el sitio. Un lugar donde nada cambia, ni nunca lo hará… ¡pero no todo esta perdido!

Aquí es donde entra el tercer pilar de todo desarrollo web: los lenguajes de programación web. Nos proporcionarán herramientas para que los sitios sean dinámicas, donde las acciones de los visitantes dispararán nuevos textos o funcionalidades.

Se clasifican en 2 tipos:

Lenguajes de frontend, lógica por parte del cliente (navegador). Habitualmente es usado JavaScript, pero podemos usar otros metalenguajes como TypeScript, Elm o ClojureScript.
Lenguajes de backend, lógica por parte del servidor. Las páginas son dibujadas y gestionadas por el servidor. No tocaremos ningún tema al respecto, pero puedes aprender más sobre estos temas en mi curso de PHP.

¿Qué lenguaje vamos a aprender?

JavaScript (abreviado como JS), es un lenguaje de programación nacido en 1995 de alto nivel (su sintaxis esta más cercano al hombre que a la máquina), multiparadigma (admite varias maneras de organizarlo) y que se ejecuta en tiempo de compilación (no hay un paso previo de compilar el código en un binario). Todo ello nos facilitará su aprendizaje y posterior desarrollo.

El objetivo de este curso es enseñarte las tareas esenciales que todo frontend profesional debería conocer.

Sintaxis elemental: variables, condicionales, funciones, arrays y bucles.
Manipular el HTML (DOM).
Crear elementos dinámicos.
Reaccionar antes las acciones de los usuarios (eventos).
Gestionar formularios.
Aprender a trabajar con el almacenamiento.
Utilizar APIs internas.
Interactuar con otros servicios (por medio de peticiones HTTP a APIs externas).
Conectarse a un servidor de WebSockets.
Conectarse a un servidor de Server-side Events.
Crear componentes nativos.

No albergo ninguna esperanza de que entiendas todos los puntos anteriores, pero en cambio sí espero que seas consciente que aprenderás desde un enfoque laboral y no tan académico. Todo el material será práctico, lo cual significa que no siempre será divertido.

¿Estas preparado para crear Web Apps? ¿Para que los visitantes sean los protagonistas de la experiencia? ¿A ser llamado frontend?

¡Empecemos!

Herramientas para el curso

Editor de texto enriquecido o IDE, cualquiera de esta lista será suficiente.
Un navegador Web.
Orden: tanto para los ejercicios como para tus apuntes. Es fácil entrar en el caos pero difícil salir.

¿Donde escribo mi código JavaScript?

Debe estar dentro en la etiqueta <script>, pero te preguntarás… ¿donde debe estar esa etiqueta en mi HTML? Si y no.

Opción 1: Mala

Dentro de <head> suelta.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        // Aqui va tu código
    </script>
</head>
<body>
    <!-- Todo mi HTML -->
</body>
</html>

No es buena idea porque se iniciará el código antes que se termine de cargar el HTML.

Opción 2: Clásica

Al final de <body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

        <!-- Todo mi HTML -->

        <script>
            // Aqui va tu código
        </script>
</body>
</html>

Nunca te dará problemas, aunque hay formas mejores.

Opción 3: Buena

Esperamos a que todo se cargue antes de ejecutar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Aqui va tu código
    });
    </script>
</head>
<body>
    <!-- Todo mi HTML -->
</body>
</html>

Detectar el evento DOMContentLoaded, que avisa cuando se ha terminado de cargar el documento, haciendo que puedas incluir el código donde quieras.

Opción 4: Moderna

Aislado en otro documento, y siendo llamado mediante el atributo src junto la presencia de defer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script defer src="codigo.js"></script>
</head>
<body>
    <!-- Todo mi HTML -->
</body>
</html>

Cargará de forma asíncrona y quedará más ordenada tu página.

¿Cómo puedo añadir comentarios?

Los comentarios serán ignorados por el lenguaje, por lo que no ahorres teclas. Cuanto más documentado esté tu código más fácil será de modificar y que crezca.

En línea

Debe empezar por //.

// Mi comentario

// Otro comentario en otra línea

En bloque

Empezará por /* y se cerrará con */.

/*
Mi comentario
en
varias
líneas
*/

Ahora que ya conoces lo más elemental de JavaScript, podemos empezar con la sintaxis.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario