¿Quieres escribir tus primeras líneas de código en JavaScript? Es muy fácil en 5 minutos estará hecho y con suerte no tendrás que instalar nada. Si estás viendo éste artículo desde Google Chrome, Firefox o Edge en las versiones de escritorio podrás seguir el contenido sin problema.
Si estás viendo el artículo desde el móvil, ¡guárdalo en marcadores para verlo luego desde el ordenador!. Si eres del 2% de almas en pena que utilizan otros navegadores puedes utilizar el navegador que tienes para instalar uno de éstos.
Independientemente del navegador que utilices, viene bien tener instalado Chrome o Firefox ya que muchas páginas sólo funcionan en ellos. Si utilizas otro navegador, busca cómo acceder a las herramientas de desarrollo (sobre todo a la consola javascript).
¿Ya tienes uno de éstos navegadores?, ¡pues seguimos!. Pulsa la tecla F12 para activar las herramientas de desarrollador. Si no funciona, puedes ir a Opciones -> Más herramientas -> Herramientas de desarrollo. En los tres navegadores la forma de acceder es la misma.
Si usas Mac, puedes usar Command-Option-J en Chrome.
Al activar las herramientas de desarrollador aparecerá un panel con un montón de jeroglíficos, selecciona la pestaña que pone “Console”, o “Consola” (en español). Puede ser que en la consola aparezcan unos cuantos mensajes amenazantes, e incluso una advertencia de que no se debe toquetear por aquí, pero como somos muy intrépidos no vamos a hacer caso.
La advertencia no es para nosotros, sino para el desarrollador de la página.
Deberías ver un cursor que parpadea al lado de la flecha azul, aunque el aspecto puede variar en función del navegador. Si escribes:
console.log("Hola mundo!!!")
En la consola y pulsas enter debería aparecer el mensaje “Hola mundo!!!” en la consola. Eso es código JavaScript, acabas de escribir un programa.
No te asustes si de repente suena el teléfono, no has cometido ningún delito ignorando las advertencias. Seguramente será para ofrecerte algún trabajo, algunos programadores se quejan de que les acosan los recruiters.
Bromas a parte, la programación consiste en indicarle al ordenador lo que queremos que haga. El lugar en el que acabamos de escribir el comando es la consola, una herramienta que los desarrolladores utilizan para analizar el comportamiento de las páginas web, de ahí que al abrirla es posible que aparecieran algunos mensajes.
Para deshacernos de las alertas que pudiese haber puedes abrir una página en blanco. Abre una nueva pestaña en el navegador y copia lo siguiente en la barra de direcciones de la misma:
about:blank
Repite los pasos anteriores para abrir la consola en ésta página. Como ésta página no contiene nada, no debería haber ninguna alerta ni mensaje y podremos trabajar más cómodamente.
Escribe lo siguiente en la consola:
6 + 5
Mientras escribes deberías ver cómo aparece la respuesta “11 “ en pantalla. De todas formas pulsa enter para ejecutar el comando. Como puedes ver, la consola nos permite pasarle instrucciones al ordenador para que las ejecute. Vamos a dar un par de pasos más, copia lo siguiente a la consola:
var MiVariable = 4
Pulsa enter. Es posible que en la consola aparezca una respuesta que diga algo así como undefined. No pasa nada, seguimos adelante. Después de ejecutar el comando con enter escribe el siguiente:
MiVariable + 2
Pulsamos enter otra vez. Repito mucho lo de pulsar enter, y no es para menos. Si no lo hacemos, el comando no se ejecuta, aunque algunas consolas nos mostrarán la respuesta por adelantado.
Tras ejecutar el comando debería aparecer la respuesta 6. ¿Qué crees que está pasando? Con el comando var MiVariable = 4 creamos una variable que contiene el valor 4. A partir de éste punto, cada vez que escribimos MiVariable el ordenador recuperará el valor que almacenemos dentro. Así, al sumarle 2 a MiVariable, obtenemos la respuesta 6.
Podemos almacenar muchas cosas en variables. Vamos con otro ejemplo. Podemos utilizar el “;” para ejecutar varios comandos juntos.
var Nombre = "Juan"; "Estoy buscando a " + Nombre
En éste caso hemos ejecutado dos comandos de golpe. Con el primero hemos creado una variable llamada Nombre que contiene la palabra “Juan”. Muy importante escribir el texto entre comillas (no vale cualquier par de comillas, tienen que ser exactamente esas comillas o éstas otras », y no podemos mezclarlas).
Después del punto y coma el ordenador lee el segundo comando, que junta las palabras “Estoy buscando a “ y el contenido de la variable Nombre, que es “Juan”. Vamos a hacer algo un poco más interesante.
"Estoy buscando a " + Nombre.replace("a", "aaaa")
Hemos utilizado el método “replace”, que nos permite sustituir el patrón “a” en un texto por “aaaa”, de modo que “Juan” se convierte en “Juaaaan”. Si te salta un error que dice algo así como Nombre is not defined, quiere decir que no has creado la variable Nombre.
Es posible que en éste punto empiece a darte vueltas la cabeza. Ve a por un vasito de agua y prueba a usar
"Ando buscando a ".replace("Ando", "")
Cuando vuelvas. Verás que así puedes borrar un patrón de texto.
Si te fijas en nuestro texto tenemos la palabra “Ando”, y luego ese mismo conjunto de caracteres aparece de nuevo en “buscando”. Como el patrón que le decimos que tiene que borrar tiene la “A” en mayúscula, no borra el “ando” en “buscando”, sino solo el del principio. Además, nos queda un espacio al principio, ya que solo borra lo que le indiquemos (reemplaza el patrón por nada).
Nombre.toUpperCase() pondrá el nombre en mayúsculas, y podemos encadenar los dos métodos Nombre.replace(«a», «aaaaaaaaaa»).toUpperCase() realizará ambas transformaciones. Primero reemplaza el patrón y luego lo pasa a mayúsculas.
Vamos a hacer un par de cosillas maś, pero antes asegúrate de que la terminal abierta está abierta en la página en blanco (about:blank). ¿Lo tienes?
Copia lo siguiente en la terminal y ejecutalo:
document.write("Mira mama estoy creando una página web")
Si te fijas verás que el mensaje no aparece en la consola como antes, si no en la propia página web, acabamos de editar una página web. Si ejecutas el comando varias veces verás que aparece inmediatamente después otra vez.
Puedes recargar la página en el navegador para que desaparezca el mensaje, así como todo lo que hemos hecho en la consola (y las variables). Ahora copia y ejecuta lo siguiente un par de veces.
document.write("<p>Mira mama estoy creando una página web<\p>")
Verás que ahora aparece en líneas diferentes. Una página web no es nada más que un documento html, que a su vez no es más que un documento de texto. La primera vez que modificamos la página simplemente añadimos el texto tal cual, pero en la segunda ocasión utilizamos un tag HTML, el tag <p>, que sirve para crear un párrafo nuevo. Al final del texto tenemos que cerrar el tag con </p>.
¿Te creías que sólo ibas a tocar JavaScript? Pues vamos a por el CSS también:
document.write("<p style='color: red; text-align: center;'>En unos años estaré cobrando el tripe como desarrollador<\p>")
Si ejecutas éste comando, verás que ahora el texto aparece en color rojo y centrado. Si te fijas dentro del tag <p> hemos añadido algo nuevo, la propiedad style, y dentro de la misma le decimos que el color sea rojo y que el texto se alinee al centro (eso es CSS).
Hemos ejecutado comandos en la consola, realizado operaciones matemáticas con código, declarado variables y utilizado métodos. De propina, hemos editado una página web utilizando tags HTML y CSS. ¿No ha sido tan difícil verdad?
Autor
Manuel Torres
Selección de talento en OXYGEN