Este repositorio es una traducción casi literal de https://github.com/muses-code-js/js-intro-workshop, de MusesCodeJS y su autora Tanya Butenko.
Un taller de JavaScript introductorio, para principiantes.
Outline general del curso https://docs.google.com/document/d/1D-7fi5afo_kgDFLi_n8czyLFN9jusY9F5PrtHXo5ZSg/edit
Si estás familiarizado con Git, podés clonar este repositorio en tu pc.
Si no sabés lo que es Git, relajate:
- Podés hacer click en "Download Zip".
- Ó te lo podés bajar directamente.
El archivo está zippeado (comprimido), así que primero hay que extraerlo. No abran los archivos dentro del .zip directamente, primero los tienen que extraer.
Arranca por el archivo README.md y después abrí js/nivel1.js.
Para ver la página web en tu buscador, abrí index.html haciéndole doble click, si te sale la opción ‘abrir en navegador’, elegila. De preferencia usar Chrome, pero Firefox también funciona.
Seguí las intrucciones en js/nivel1.js y escribí tu código en tu editor de texto (acá es donde vive tu código y vos podés escribirlo, editarlo y borrarlo).
Para ver cualquier cosa que edites, vas a necesitar guardar los cambios en el archivo y actualizar la página web en el navegador. El resultado de cualquier console.log() va a aparecer en la consola de tu navegador.
Video de cómo abrir la consola del navegador
| Navegador | Plataforma | Instrucciones |
|---|---|---|
| Chrome | Cualquiera | Click derecho en la página web, y seleccionar Inspect. Después hacer click en la pestaña consola |
| Chrome | Mac | Apretar COMMAND + OPTION + J |
| Chrome | Windows | Apretar CONTROL + SHIFT + J |
| Firefox | Cualquiera | Click derecho en la página web, click en Inspect Element. Después hacer click en la pestaña consola |
| Firefox | Mac | Apretar COMMAND + OPTION + K |
| Firefox | Windows | Apretar CONTROL + SHIFT + K |
La consola/herramientas del desarrollador va a aparecer al pie de la pantalla o a la derecha de la misma.
Podés escribir código de JavaScript directamente acá y ver los resultados de manera inmediata, pero en el instante en el que actualices la página tu código va a desaparecer, por esto es que usamos un editor de texto para guardar nuestro código.
| Nombre | Descripción |
|---|---|
| Carpeta CSS | contiene los archivos css responsables de los estilos y cómo se ve (estéticamente) nuestro proyecto en la web |
| Carpeta img | un lugar donde podemos almacenar imágenes para utilizar en nuestra página web. |
| Carpeta js | contiene los archivos JavaScript que hacen funcionar a nuestro proyecto, define el contenido y hace funcional a una página estatica. Contiene 3 archivos: |
| |-- nivel1.js | basicas con explicaciones (comentarios, variables, funciones, declaraciones if/else) |
| |-- nivel2.js | JavaScript más complejo con explicaciones (arrays, loops) |
| |-- nivel3.js | En proceso de traducción. HTML, CSS y cómo manipularlos con JavaScript (selectores) |
| Carpeta tareas | Contiene las tareas del curso. Cada uno viene en una subcarpeta con un index.html, abran ese index.html para hacer funcionar el código! |
| index.html | archivo responsable de la estructura de nuestro proyecto |
| README.md | archivo con explicaciones e información acerca del proyecto, como correrlo, para qué es, etc. (este archivo que estás leyendo ahora) |
| machete.md | archivo con una vista rápida a los nombres claves y sus explicaciones |
Autora original: Tanya Butenko github: https://github.com/ButenkoT twitter: @ButenkoMe