Home | Clases | Introducción a las aplicaciones web con HTML5, CSS3 y Javascript | Introducción a JavaScript

Introducción a JavaScript


Programas, lenguajes, 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. Podríamos resumir: 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 scripts o guiones.

Pese a su nombre no tiene nada que ver con Java, este último es un lenguaje algo más complejo con el que se pueden construir programas de propósito general como podría hacerse con C++ o Visual Basic.

La única razón de ser de JavaScript son las páginas web. Con JavaScript no pueden construirse programas independientes, sólo pueden escribirse scripts que funcionarán en el entorno de una página web, interpretado por un explorador.

Variables, datos, objetos

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 una instrucción escribir debemos especificar que es lo que hay que escribir. Es evidente pues que en las instrucciones del programa también deben figurar los datos con que trabajar.

Por ejemplo el nombre de una persona es "Jairo", esta palabra es un dato. El precio de una manzana en euros es 1, este número es otro dato.

Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con nombre denominados variables. En los ejemplos previos usaría una variable, nombre, para guardar "Jairo" o precio para guardar el 1.

Si ahora digo al ordenador que escriba nombre el ordenador escribirá su contenido, o sea, Jairo. Abre una nueva página en blanco en Brackets, guárdala como index.html y escribe lo siguiente (entre etiquetas de script):

<script>
var nombre = "Jairo";
var precio = 1;
alert( nombre + " se ha comprado una manzana y le ha costado " + precio + "€");
</script>


Mediante el símbolo + has concatenado las cadenas. 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. Como sabes estos operadores se usan con datos numéricos: 4 + 5 son 9. Estas dos instrucciones que has escrito podrían encerrarse en un bloque con un nombre, por ejemplo escribeFrase() y tendrías una función.

<script>
// Declaro la función
function escribeFrase(){
var nombre = "Jairo";
var precio = 1;
alert( nombre + " se ha comprado una manzana y le ha costado " + precio + "€");
}
// Llamo a la función
escribeFrase();
</script>


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 click 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, 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 la veremos en capítulos posteriores.

Se recomienda la visualización de lo siguientes vídeos del canal de YouTube de Ada Lovecode:

Introducción
Integración con HTML
Instrucciones de salida


Fuente: Jose Antonio Rodríguez. Manual de JavaScript

Fecha de publicación: 08/09/2019
Asignaturas: aplicaciones web
Temas: aplicaciones web
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos