Editores de código

Título curso Aprende a programar (con Javascript)

Editores de código (ampliación)

No hemos incluido está página en el menú de navegación del curso porque no hay un momento concreto donde tengas que entender o utilizar todo lo que se dice en ella. Dependerá de cada alumno, así que simplemente recuerda que está aquí, enlazada a la página del editor online, para revisarla cuando quieras.

Como hemos comentado, para facilitarte la práctica con los ejemplos y ejercicios, hemos insertado un editor online de código en cada una de las páginas del curso, muy básico y sencillo de manejar. Nos da la inmediatez de hacer copia-pega, editar y ejecutar el código sin salir de la página, agilizado las pruebas y evitando complicaciones en estos primeros pasos.

Eso no significa que el editor online pueda cubrir todas tus necesidades para crear código. Es un recurso con fines didácticos, pero no un sustituto de editores especializados que se convertirán en tu herramienta de trabajo una vez completado el curso.

¿Cuándo empezar a utilizar otros editores? Diríamos que depende de tu experiencia previa y cómo vayas avanzando. El editor online es siempre muy útil para visualizar los ejemplos y hacer pruebas rápidas/sencillas, pero cuando empieces a crear scripts más elaborados en los últimos módulos del curso, es buena idea usar un editor externo complementario. Podrás ir guardando el código (y no perderlo si se ‘cuelga’ o se cierra la pestaña de tu navegador) además de proporcionarte más posibilidades con funcionalidades muy útiles que después citaremos.

En esta apartado te vamos a orientar sobre algunas posibilidades de las muchas que existen (incluye un video al final).

Incluir también HTML/CSS en el editor online

Lo primero decir que en el editor online del curso también puedes escribir etiquetas HTML y estilos CSS ^{(ver nota abajo)}, y crear páginas web ‘dentro’ de ese editor. De hecho, la forma en que escribimos Javascript en este editor no es más que una de las 3 formas posibles de incluir dicho código en una página web.

Dentro de una etiqueta HTML, al estilo: <button onclick="instrucciones Javascript"> (es decir, pincha el botón y haré algo!)
Entre etiquetas <script></script> . Esta opción es la que hemos elegido en este curso!
En un fichero de texto externo que contendrá el código Javascript. Se enlaza dentro de la página web con: <script src="fichero.js">

Si no estás familiarizado con HTML, no te preocupes, porque no vamos a emplearlo en el curso (salvo la etiqueta <br> que nos permite hacer salto de linea). Solo es para que sepas que esa posibilidad existe por si tienes conocimientos de ese lenguaje y quieres complementar algunos de los ejemplos/ejercicios que hacemos. Prueba a copiar este código al editor y comprúebalo tú mismo.

<style>
p.destacado {color: green; font-size: 1.3em; font-weight: bold;}
</style>
<h2>Primera prueba con el editor online</h2>
<p class="destacado">Vamos a ejecutar un sencillo script que nos muestra un pequeño mensaje en la pantalla</p> 
<p>Este es un párrafo adicional que no va destacado como el anterior.</p>

<script>
document.write("Hola, este es el resultado de mi primer script");
</script>

<style>

p.destacado {color: green; font-size: 1.3em; font-weight: bold;}

</style>

<h2>Primera prueba con el editor online</h2>

<p class="destacado">Vamos a ejecutar un sencillo script que nos muestra un pequeño mensaje en la pantalla</p>

<p>Este es un párrafo adicional que no va destacado como el anterior.</p>

document.write("Hola, este es el resultado de mi primer script");

</script>

No hemos incluido toda la estructura/etiquetas que debería tener una página web, pero funciona igualmente.

Si estás interesado en la creación de Webs, dispones de nuestro curso «Crea y Diseña tu Web con WordPress, HTML y CSS«.

Ejecutar scripts en páginas web

Podría copiar cualquier código encerrado entre las etiquetas y pegarlo en un fichero de texto (con la etiquetas incluidas) guardándolo con la extensión «.html«. Si pinchas ese fichero, te lo abrirá tu navegador por defecto y ejecutará el programa. Te lo mostraremos en el video de más abajo.

Editores online de código

Hay editores que puedes utilizar al igual que el del curso, sin instalar nada en tu equipo, aunque con funcionalidades más avanzadas. Por ejemplo: diferenciar el código HTML, CSS y Javascript en distintas pestañas, utilizar librerías/framework externos (esto excede el nivel de este curso), resaltador de sintaxis, guardar tus scripts o compartir código con otros usuarios (para algunas funcionalidades debes darte de alta una cuenta).

Hay una gran variedad, pero citaremos tres que nos gustan mucho:

Codepen (este editor lo utilizamos en los ejercicios de la versión tutorizada de este curso)
JSFiddle
JS.do

Estos son programas que trae tu sistema operativo, como los básicos Notepad y Wordpad (Windows), TextEdit (Mac) o Gedit (Linux) o bien otros que descargas e instalas.

Nosotros te recomendamos probar alguno más avanzado, y que sea tu opción complementaria cuando avances en el curso. Por citarte uno por cada sistema operativo, tienes:

Notepad++ (Windows)
Geany (Linux)
Text Wrangler (Mac). Ahora llamado BBEdit

pero hay mucho más y muy buenos. Si quieres saber más, aparte del siguiente video, te dejamos este enlace a un post nuestro sobre editores de código, con especial mención a Notepad++: https://www.digitallearning.es/blog/editores-de-codigo-javascript-y-php/

Video

En este video te mostramos varias de las herramientas que hemos mencionamos en esta página y algunas cuestiones que te pueden ser de mucha utilidad a la hora de depurar (corregir) el código que escribas: