Lección 1: Introducción

HTML

Un sitio web con solo HTML y CSS es un sitio estático, sin alma, que nunca cambia. Por muchas animaciones creadas por los diseñadores gráficos más importantes del momento, siempre que vuelvas a entrar estará lo mismo. Aquí es donde entra el tercer pilar de todo desarrollo web: los lenguajes de programación. Nos otorgarán el poder de conseguir que las páginas sean dinámicas, cambien dependiendo del momento o el usuario. Y disponemos de 2 tipos:

Front-End, lógica por parte del navegador. Habitualmente es usado JavaScript.
Back-End, las páginas son dibujadas por el servidor. Puedes aprender más sobre estos temas en mi curso de PHP.

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 Front-End profesional debería conocer.

Manipular el HTML (DOM).
Crear elementos dinámicos y avanzados.
Reaccionar antes las acciones de los usuarios (eventos).
Gestionar formularios.
Interacturar con otros servicios (APIs)

¿Estas preparado para que los visitantes sean protagonistas? ¿La Web interactúe con los usuarios, y de manera inteligente?

Herramientas para el curso

Nada nuevo no dispongas en estos momentos si eres capaz de realizar Diseños Web.

Editor de texto enriquecido o IDE, cualquiera de esta lista será suficiente.
Un navegador Web.

¿Donde pongo mi código JavaScript?

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

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>

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>

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>

Opción 4: Moderna

Con el atributo defer.

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

Opción 5: Ideal

Con el atributo defer, con el código en un archivo externo.

<!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>

Comentarios

Los comentarios serán ignorados por el lenguaje, por lo que no ahorres en ellos. 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
*/

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario