Introducció al llenguatge Javascript

De Wikijoan
Dreceres ràpides: navegació, cerca

bibliografia: MANUAL DE JAVASCRIPT de Jose Antonio Rodríguez

Contingut

IDE: Entorns de Desenvolupament

Programas, lenguajes, scripts

Antes de comenzar: Nada de asustarse por la jerga técnica. Para quién comienza desdecero, estas cosillas son lo primero que debiera conocer: Qué es eso de programa, lenguaje, scripts o guiones....

Lo primero a aclarar qué es lo del programa, algo que realmente no es exclusivo de la informática, todos hemos programado alguna vez: al poner el vídeo para que grabe cuando no estamos en casa, cuando ponemos el despertador para que nos dé el disgusto matutino... En el caso de un programa informático lo que programamos es un ordenador y los programas habitualmente se hacen escribiéndolos en un cierto lenguaje. Concretando, un programa no es mas que una serie de instrucciones que le damos a un sistema para que haga cosas. En otras palabras, y en el caso que nos atañe, es decirle al ordenador cómo hacer una determinada tarea. Puede por tanto 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... En nuestro caso es algo bastante sencillo, 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 catalán, 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:

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, Ada y otros.

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 lenguajes de script como son Bash, Python, JavaScript, Vbscript. Los programas escritos en estos dos últimos lenguajes son interpretados por los navegadores de Internet como Mozilla Firefox, Chrome, IE.

El Javascript

Escribir un programa por lo tanto es simplemente 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 de Shakespeare. 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 particularidad que tienen los programas Java es que pueden funcionar en cualquier ordenador y con cualquier sistema operativo). Las aplicaciones escritas para Internet en Java son conocidas como applets.

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, de ahí la importancia de conocer para qué explorador escribimos los guiones. Y aquí viene el primer obstáculo: no todos los exploradores integran en la misma forma los guiones JavaScript.

La primera versión de JavaScript se debe a Netscape, que lo introdujo con la versión 2.0 de su explorador, posteriormente han ido surgiendo nuevas versiones habiendo sido estandarizado por la European Computer Manufacturers Asociation (ECMA).

Pondríamos preguntarnos por qué el esfuerzo de aprender JavaScript, ya es bastante con el HTML para construir páginas Web. En parte esto es cierto, con un buen programa editor podemos obtener una página para publicar en la red, pero esa página Web consistiría en: texto, imágenes e hipervínculos, con los atributos como colores, tipos de letra y poco más sobre los que el autor puede actuar. Pero ¿y si quisiéramos poner un menú desplegable?, ¿y si queremos que el visitante pueda mover una imagen por la pantalla? ¿Y si necesitamos validar el texto entrado por el usuario en un formulario?... En resumen, si queremos ir más allá de la simple presentación de un documento en pantalla, y queremos controlar al explorador no hay mas remedio que utilizar un programa. ¿Por qué en JavaScript? muy simple: es soportado por todos los exploradores, es sencillo y es el que está siendo contemplado por los organismos de normalización.

Resumint: integrant el HTML amb el Javascript es pot millorar molt l'experiència d'usuari en la navegació web.

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 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. Por ejemplo el nombre de una persona es Juan, esta palabra es un dato. El precio de una manzana es 0.5 euros, 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 Juan, o precio para guardar el 10. Si ahora digo al ordenador que escriba nombre, el ordenador escribirá su contenido, o sea, Juan.

window.alert("Mi nombre: "+nombre).

Nota: Aquesta possibilitat ja no funciona en els navegadors moderns. Veure:

El codi mínim per fer aquest exercici és crear una pàgina web, per exemple: nombre.html, i fer doble click sobre ella:

<html>
<script type="text/javascript">
nombre="juan";
window.alert(nombre);
</script>
</html>

Mediante el símbolo + has concatenado ambas 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 mepresento() y tendrías una función. Podríamos definir una función llamada quehoraes() que encierre las instrucciones necesarias para que aparezca en pantalla la hora actual. Es decir, mediante las funciones creamos las órdenes que luego podremos darle al navegador para que actúe según nuestro deseo.

Hasta aquí has visto los elementos básicos existentes en cualquier lenguaje de programación, pero alguna vez habrás leído que Javascript es un lenguaje que utiliza objetos, a diferencia de Java que es un lenguaje orientado a objetos. ¿Y qué es eso de objetos? Los objetos son como una extensión de las variables, una estructura que nos permite agrupar diferentes valores y nombres de funciones. Una variable numérica sólo puede contener eso, un número: 10 o 20 o 2000, una cadena tipo sólo puede guardar una serie de caracteres ACAD, LE18P. Un objeto va mas allá, puede guardar varias cosas a la vez. ¿Suena raro?.

Veamos un ejemplo muy sencillo: un rectángulo se caracteriza por la longitud de sus lados y por la forma de dibujarlo. En un programa el rectángulo se asimilaría a un objeto que tendría dos propiedades: base y altura, y un método: como_dibujarlo. Este como_dibujarlo sería una función que dibuja rectángulos. Si un programa define la variable mirectángulo como un objeto de este tipo y contiene la instrucción mirectangulo.como_dibujarlo, dibujaría en pantalla un rectángulo. La ventana del explorador que tienes delante es un objeto con propiedades como: altura, anchura, nombre... y métodos como abrir, cerrar, mover... Vamos a hacer algo con un objeto que se llama window, para ello abre otra ventana de tu navegador y escribe en la barra de direcciones:

javascript:window.close()

¿Has visto lo que ocurre? Has usado el método close() del objeto window para cerrar la ventana. Otro ejemplo, escribe

javascript:window.alert(window.closed)

ahora has usado el método alert del objeto window para mostrar una ventana con el valor de la propiedad closed, que dice si la ventana está cerrada o abierta. Los objetos son bastante mas complicados que lo aquí exponemos, pero JavaScript no es un lenguaje orientado a objetos, aunque puede crearlos y por supuesto manipularlos. Los scripts manipulan los objetos propios del lenguaje y los que le proporciona el navegador. Y he aquí la causa de tus primeros dolores de cabeza como programador en javaScript: los sistemas de objetos de los diferentes navegadores no coinciden al 100%.

La ejecución de los scripts

Habitualmente cuando quieres ejecutar un programa basta con buscar el archivo correspondiente y hacer un sencillo click de ratón o pulsar la tecla enter. ¿Pero qué pasa con los programas en JavaScript?. En los ejemplos que has escrito en los apartados anteriores has enviado instrucciones en javascript al navegador, le has dado órdenes en directo. Pero esta no es la forma habitual de ejecutar programas 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 para que haga algo predeterminado por nosotros. Por ejemplo cuando el navegador carga una página se produce un evento que puede aprovecharse para hacer que se abra otra ventana (las conocidas como ventanas popup tan usadas para mensajes publicitarios), o cuando pasamos el ratón por una enlace se produce otro evento que puede aprovecharse para llamar a una función que modifique el color en que se muestra el enlace, o cuando el usuario pulsa una tecla.

Los eventos tienen la naturaleza de objetos, o sea, poseen métodos y propiedades. Así cuando se produce un evento podemos saber quien lo dispara, en que posición de la pantalla se ha disparado y otras propiedades dependientes de cada evento en concreto. Y aquí viene uno de las causas para tus futuros dolores de cabeza: cada navegador maneja los eventos de manera algo diferente. Pero sigamos con el tema de la ejecución de los programas, veamos qué es eso del 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. Otra situación bastante común: deseas que tu programa recorra todas las imágenes de tu página y vaya cambiando su contenido, no vas a escribir el mismo código una y otra vez, lo ideal sería escribir las instrucciones y poderlas repetir.. Cualquier lenguaje de programación tiene solucionado este asunto mediante las llamadas sentencias de control del flujo de programa. Son sentencias que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una serie de instrucciones una y otra vez (bucles).

Quins són els beneficis d'utilitzar javascript en les pàgines web?

Client-side vs server-side scripting

llegir:

Server vs client.jpg

Client-side

El client és el sistema on s'està executant el navegador web. JavaScript és el principal llenguatge de script per a la web. Els scripts en el cantó del client (client-side scripts) són interpretats pel navegador.

Server-side

El servidor és el sistema on la pàgina web i altre contingut viu (típicament un servidor Apache). El sevidor envia pàgines web a l'usuari/client després que aquest hagi fet una petició.

Introducció al Javascript. Presentació Powerpoint

NodeJS: javascript en el cantó del servidor

Standard ECMA-262. Especificació del llenguatge ECMAScript (Juny 2017)

Exemple de classe: veure la definició de lastIndexOf.


creat per Joan Quintana Compte, setembre 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines