Lección 1: Introducción
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.
- 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
, 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.
¿Te ayudo?
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios