jairogarcíarincón
Programas, lenguajes y scripts
Un programa no es mas que una serie de instrucciones que le damos a un sistema para que haga cosas. En nuestro caso, es decirle al ordenador cómo hacer una determinada tarea.
Puede ser algo tan simple como decirle que sume dos números y nos diga el resultado hasta algo tan complejo como decirle que controle todo un edificio: temperatura, puertas, iluminación...
Referido a Javascript, vamos a decirle al ordenador que cuando presente nuestra página web al visitante haga cosas como poner en la página la fecha del día, hacer que una imagen se mueva de un lado a otro, responder de una determinada forma a la pulsación del ratón, etc.
Para escribir un programa no nos vale ni el castellano, ni el inglés, ni ninguno de los lenguajes que habitualmente usa el hombre para comunicarse. Para entendernos con un ordenador se utilizan los lenguajes informáticos. Existen dos grandes grupos de lenguajes a la hora de escribir un programa: Los compilados y los interpretados.
Cuando usamos lenguajes compilados seguimos los siguientes pasos:
- Nosotros escribimos el programa (código fuente),
- Un programa lo traduce al lenguaje interno del ordenador (se compila)
- Se obtiene así un nuevo fichero que es el que se ejecuta tantas veces como se desee.
Los programas así obtenidos son los que se almacenan en ficheros con un nombre terminado en .exe o en .com. Si trabajamos en los sistemas operativos DOS o Windows.
En resumen, un programa compilado se traduce una vez y se ejecuta cuantas veces se desee. A este grupo pertenecen los lenguajes tradicionales como C, Pascal o Java.
El otro grupo es el de los lenguajes interpretados, en éstos el programa se escribe (código fuente), y el ordenador va leyendo cada instrucción, la traduce y la ejecuta. O sea, es necesario traducir el programa cada vez que se ejecuta.
¿Quién traduce las instrucciones del programa? Pues muy sencillo, otro programa: el traductor o intérprete. A este grupo pertenece el legendario Basic, el Perl y los llamados scripts como JavaScript o Visual Basic Script.
Los programas escritos en estos dos últimos lenguajes son interpretados por los navegadores de Internet como Google Chrome, Mozilla Firefox, Microsoft Edge, Safari u Opera.
JavaScript
Escribir un programa por lo tanto es escribir instrucciones para que las ejecute el ordenador, utilizando para ello un cierto lenguaje. Es como escribir en inglés: necesitas conocer el vocabulario y la gramática del idioma. En nuestro caso usamos como lenguaje el JavaScript y necesitas conocer sus reglas y su vocabulario.
Como ya sabes se trata de un lenguaje interpretado y los programas escritos con estos lenguajes son conocidos como lenguajes de script o guiones, en referencia a los guiones de las películas de cine, que van "ejecutando" una instrucción detrás de otra.
Pese a su nombre no tiene nada que ver con Java, este último es un lenguaje más complejo con el que se pueden construir programas de propósito general como podría hacerse con C++ o Visual Basic.
Variables, datos, funciones
Para comenzar a utilizar Javascript (y cualquier lenguaje de programación) es necesario conocer algunos conceptos básicos, no podemos empezar a hacer una casa si no sabemos que existen los ladrillos.
Un programa es una lista de instrucciones, pero esas instrucciones se deberán ejecutar sobre algo: si damos la instrucción "escribir" debemos especificar qué es lo que hay que escribir. Es evidente pues que en las instrucciones del programa también deben figurar los datos con que trabajar.
Como ejemplo, el nombre de una persona es "Jairo", esta palabra es un dato que puedo almacenar en una variable llamada nombre. De igual modo, el precio de una manzana en euros es 1, y este número es otro dato que puedo almacenar en la variable precio.
Las variables, por tanto son elementos con nombre que sirven para almacenar datos de cualquier tipo.
Si ahora digo al ordenador que escriba nombre el ordenador escribirá su contenido, o sea, Jairo. Abre una nueva página en blanco en VisualStudioCode, guárdala como index.html y escribe lo siguiente (entre etiquetas de script):
Mediante el símbolo + hemos concatenado o encadenado las cadenas de texto o strings con las variables. Has usado un operador, algo que no es nuevo si has estudiado alguna vez matemáticas. Los operadores son símbolos usados para realizar operaciones con los datos, son los símbolos +, -, /, *, respectivamente sumar, restar, dividir y multiplicar. Aunque en este caso el símbolo + también suma, lo hace de una forma diferente.
También hemos visto que puedo realizar comentarios en un script, esto es, texto de ayuda para explicar el código al desarrollador, pero que no tiene relevancia para ejecutar el código en sí. Estos comentarios se añaden:
- mediante el uso de // si es un comentario de una línea.
- utilizando /* para abrir y */ para cerrar si es un comentario de varias líneas.
Por último, también has aprendido cómo mostrar contenido de diferentes formas en el navegador:
- alert(): Muestra una alerta en la ventana del navegador en forma de ventana flotante.
- document.write(): Escribe directamente en la ventana del navegador.
- console.log(): Escribe en la consola de depuración del navegador, a la que se accede con F12 y que sirve para desarrollar y depurar errores.
Las instrucciones que has escrito antes podrían encerrarse en un bloque con un nombre que primero se define y luego se ejecuta, es lo que se denomina una función y las definiremos más adelante:
La ejecución de los scripts
En Javascript. lo normal es que la ejecución se realice de forma automática cuando el navegador carga una página, o cuando el usuario pasa el ratón por una imagen, o cuando pulsa el botón de un formulario, etc.
Estos cambios provocan los llamados eventos que son recibidos por el navegador que reaccionará en la forma adecuada: si haces clic en un hiperenlace se genera un evento y el navegador abre una nueva página.
Esos eventos son los que se aprovechan para que se ejecuten las instrucciones que nosotros escribimos en Javascript. A cada evento se le puede asociar una función como la definida anteriormente para que haga algo predeterminado por nosotros:
El flujo de programa
Cuando el navegador empieza a leer el script para ejecutarlo lo hace en orden secuencial, o sea, empieza con la primera instrucción, sigue por la segunda y así hasta llegar al final. Esto es lo que se conoce como ejecución secuencial o lineal.
Pero a veces es necesario saltarse instrucciones, por ejemplo: si construyes una página a la que sólo pueden entrar determinadas personas, deberás escribir una función que pida el nombre de quien desee ver la página, si es una persona autorizada muestra la página y si no lo es no la muestra. Tu programa no ha seguido un flujo lineal, unas veces ejecutará la parte de mostrar la página y otras no.
Esto se resuelve mediante las llamadas sentencias de control del flujo de programa, que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una serie de instrucciones una y otra vez (bucles). Estas instrucciones las veremos en capítulos posteriores.
Llamada a un archivo de Javascript de otro HTML
Por norma general, el código Javascript no se añade en el archivo HTML directamente, sino que se utiliza un archivo externo con extensión *.js que luego se referencia desde el archivo *.html.
Para comprender este concepto, realiza los siguientes pasos:
- Crea una carpeta en tu proyecto llamada referencia-js
- Crea dentro un archivo index.html
- Crea una subcarpeta llamada js
- Crea dentro de ella un archivo llamado script.js
- Sustituye el contenido de ambos archivos por el proporcionado a continuación y analiza los comentarios para comprender el proceso.
A continuación se muestra además una captura de la estructura de archivos y carpetas.
Para comprobar el resultado, ejecuta el archivo HTML con Clic derecho > Open with Live Server (Alt + L o Alt + O. Si ahora en la consola del navegador (F12) ves el texto de "Referencia completada", es que todo funciona correctamente.
Este tipo de estructura será la que utilicemos a partir de ahora.
Conclusiones
Para finalizar y a modo de repaso, se recomienda la visualización de lo siguientes vídeos del canal de YouTube de Ada Lovecode:
Fuente parcial: José Antonio Rodríguez. Manual de JavaScript
Publicado el 30 de Enero de 2025
introducciónjavascriptprogramación