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.

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:

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