Programa en tu propio computador
Hasta ahora escribiste código dentro de esta página. Acá te muestro cómo hacerlo en tu equipo, guardarlo y volver a abrirlo mañana. Todo gratis.
Program on your own computer
So far you wrote code inside this page. Here is how to do it on your own machine, save it and reopen it tomorrow. All free.
Esto sorprende a mucha gente: para JavaScript no necesitas instalar nada. Tu navegador ya sabe ejecutarlo. Pruébalo ahora mismo, en 15 segundos:
- Presiona
F12en tu teclado. Se abre un panel lateral. - Busca la pestaña que dice Console (o Consola).
- Escribe
2 + 2y presiona Enter.
Eso es una consola de JavaScript de verdad, en tu computador, sin instalar nada. Puedes escribir cualquier cosa de los tutoriales anteriores ahí.
En un Mac el atajo es Cmd + Option + J. En un celular no se puede, esto es
cosa de computador.
This surprises a lot of people: for JavaScript you do not need to install anything. Your browser already knows how to run it. Try it right now, in 15 seconds:
- Press
F12on your keyboard. A side panel opens. - Find the tab that says Console.
- Type
2 + 2and press Enter.
That is a real JavaScript console, on your computer, with nothing installed. You can type anything from the previous tutorials in there.
On a Mac the shortcut is Cmd + Option + J. On a phone you cannot do this —
it is a computer thing.
Antes de instalar programas raros, hagamos esto con lo que ya tienes. Un programa web es literalmente un archivo de texto.
- Abre el Bloc de notas (Notepad).
- Copia el código de abajo tal cual.
- Archivo → Guardar como.
- En "Tipo", elige Todos los archivos. Este paso es el que más se olvida.
- Ponle de nombre
prueba.html— con el.htmlal final, obligatorio. - Guárdalo en el Escritorio y haz doble clic sobre él.
Se va a abrir en tu navegador. Eso es una página web hecha por ti, en tu computador, sin internet de por medio.
Before installing anything unusual, let us do this with what you already have. A web program is literally a text file.
- Open Notepad.
- Copy the code below exactly.
- File → Save as.
- Under "Type", choose All files. This is the step everyone forgets.
- Name it
test.html— with the.htmlat the end, mandatory. - Save it to the Desktop and double click it.
It will open in your browser. That is a web page you made, on your own computer, with no internet involved.
En tu archivo real, el console.log no se ve en la
página: aparece en la consola que abriste con F12. Acá arriba te lo mostramos
en pantalla para que no tengas que ir a buscarlo.
In your real file, the console.log does not show on
the page: it appears in the console you opened with F12. Here we show it on
screen so you do not have to go hunting for it.
El Bloc de notas funciona, pero es incómodo: no colorea el código, no avisa de errores y no ayuda a escribir. Un editor de código hace todo eso.
El más usado es Visual Studio Code, de Microsoft. Es gratis, en español, y funciona en Windows, Mac y Linux.
- Entra a code.visualstudio.com
- Descarga la versión de tu sistema y ábrelo cuando termine.
- Acepta el acuerdo y deja todas las opciones como vienen.
- Ábrelo, arrastra tu archivo
prueba.htmlencima y listo.
Vas a notar la diferencia de inmediato: el código aparece con colores, y si te falta una comilla te la subraya antes de que ejecutes nada.
Notepad works, but it is uncomfortable: no colours, no error warnings, no help while typing. A code editor does all of that.
The most widely used one is Visual Studio Code, by Microsoft. Free, and it runs on Windows, Mac and Linux.
- Go to code.visualstudio.com
- Download the version for your system and open it when it finishes.
- Accept the agreement and leave every option as it comes.
- Open it, drag your
test.htmlfile onto it, and you are set.
You will notice the difference immediately: the code appears in colours, and if you miss a quote it gets underlined before you run anything.
Python sí necesita instalarse, y es igual de simple:
- Entra a python.org/downloads y descarga la versión que te ofrece.
- Al instalarlo, marca la casilla "Add Python to PATH" que aparece abajo en la primera pantalla. Si no la marcas, después el computador no lo encuentra y es el problema número uno de los principiantes.
- Abre el mismo VS Code y crea un archivo terminado en
.py.
Los tutoriales de este sitio son de JavaScript, pero las ideas —variables, decisiones, bucles— son idénticas. Si aprendes acá, Python te va a costar días, no meses.
Python does need installing, and it is just as simple:
- Go to python.org/downloads and grab the version it offers.
- While installing, tick the "Add Python to PATH" box at the bottom of the first screen. If you skip it, your computer will not find Python afterwards — it is the number one beginner problem.
- Open that same VS Code and create a file ending in
.py.
The tutorials on this site are JavaScript, but the ideas — variables, decisions, loops — are identical. Learn them here and Python will take you days, not months.
Abrir la consola del navegador con F12. Crear y guardar un archivo
.html que funciona solo. Instalar un editor de código decente. Y qué hacer si
algún día quieres Python.
Ya no dependes de esta página. Ahora sí, a aprender el lenguaje: empezamos por guardar información.
Opening the browser console with F12. Creating and saving an
.html file that works on its own. Installing a decent code editor. And what to
do if one day you want Python.
You no longer depend on this page. Now for the language itself, starting with storing information.