Para referencia teórica recomendamos utilizar las siguientes webs:
● Introducción a JavaScript
● Introducción a HTML5
● Introducción a CSS
Así, los objetivos de este material introductorio son:
● Prepararos para poder empezar el curso con un buen nivel de Javascript.
● Entender la visión global de comunicación entre capas (JS/HTML/CSS).
● Fomentar la auto-resolución de problemas y el trabajo en equipo.
● Inculcar buenas prácticas en cuanto a código y organización del trabajo.
Los códigos de los ejercicios se subirán a GitHub Gist. Aqui dejamos un video para ver como se suben los ejercicios.
La gestión de las tareas se realizará en Trello.
Recibiréis una invitación por email al tablero de Trello, desde el cual se van a gestionar todos los proyectos.
TODO: todos tenéis asignadas unas tarjetas con vuestro nombre y el proyecto. Vosotros sois los encargados de mover estas tarjetas a la columna DOING cuando las estéis realizando. Una vez hechas, las movéis a REVIEW. Estos os darán feedback en la misma tarjeta y si todo está OK, la moverán a DONE.
En caso de que haya correcciones pendientes, los profes asistentes os los comentarán en la tarjeta y pasarán la misma a TODO de nuevo.
De ahora en adelante siempre escribiremos código usando Visual Studio Code. Se trata de un editor de código muy utilizado en desarrollo web.
Tras abrir el programa podéis crear archivos desde el menú de la izquierda y empezar a escribir código en él. Los archivos javascript deben tener extensión js.
Las Chrome Dev Tools vienen integradas en Google Chrome. De momento sólo usaremos la pestaña de Console, que servirá para ejecutar nuestro código (solamente es necesario pegar el código).
Haz clic con el botón secundario en un elemento de la página y selecciona Inspect.
Usa las combinaciones de teclas Ctrl+Mayúscula+I (Windows) o Cmd+Opción+I (Mac).
En la nueva ventana que se abra a la derecha del navegador, teneis que hacer click en la pestaña console.
Una vez abierta la console de Chrome, podeis ver que a veces aparecen errores en la misma, esos errores van relacionados con la pagina que estamos viendo en ese momento.
En la consola de Chrome Dev Tools puedes pegar tu código y ejecutarlo. Esto de da acceso a algunos métodos exclusivos del navegador:
- prompt()
- alert()
- confirm()
Especialmente el primera de ellos, prompt(), te va a ser muy util para interaccionar con el usuario y pedirle datos.
Más adelante, en los últimos ejercicio, incorporaras los ficheros javascript en el HTML.
Existen otras alternativas para ejecutar el código:
- Usar entornos online de ejecución, desde los más simples, como CodePen, hasta otros más complejos, como Code Sandbox que te proporciona algo similar a un Visual Studio Code on-line
- Añadir una extensión de VSC como CodeRunner, que teniendo instalado Node, permite ejecutar un fichero js desde VSC