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:

  • frontend, lógica por parte del navegador. Habitualmente es usado JavaScript.
  • backend, 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 frontend 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.

¿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, 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
*/

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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario