n0g4y0/introduccion-a-js

r/Argentina Programa

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.

• El post de reddit
• El workspace de Slack. El link a la invitación lo encuentran en https://argentinaprograma.com.
• El canal de YouTube
• El canal de Twitch

Introducción a JavaScript

Un taller de JavaScript introductorio, para principiantes.

Outline general del curso https://docs.google.com/document/d/1D-7fi5afo_kgDFLi_n8czyLFN9jusY9F5PrtHXo5ZSg/edit

Cómo usar este repositorio.

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.

Cómo abrir la consola del 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.

Estructura:

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

Recursos:

Manual de HTML en español