¿Qué es JavaScript? Principales usos. Servidor y cliente.

Html, css y programación. Efectos (CU01103E)

Resumen: Entrega nº3 del curso "Tutorial básico del programador web: JavaScript desde
cero".

Codificación aprenderaprogramar.com: CU01103E

QUÉ ES JAVASCRIPT

JavaScript es un lenguaje utilizado para dotar de efectos y procesos dinámicos e “inteligentes” a

documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Así, podemos
decir que el lenguaje JavaScript sirve para ejecutar acciones rápidas y efectos animados en  páginas web.

Las acciones controladas por JavaScript pueden ser el despliegue de un menú, hacer aparecer,
desaparecer o cambiar texto e imágenes, realizar cálculos y mostrar resultados, mostrar mensajes de
aviso (por ejemplo si faltan datos en un formulario) y “efectos animados” en general. 

Este lenguaje es principalmente utilizado por parte de programadores web para dar respuestas rápidas a
las acciones del usuario sin necesidad de enviar la información de lo que ha hecho el usuario al servidor y
esperar respuesta de éste (lo que haría más lento los procesos). El código JavaScript se carga al mismo
tiempo que el código HTML en el navegador, y reside en el cliente (computador en el que nos
encontramos), por lo que JavaScript sigue funcionando incluso aunque se produzca un corte en la
conexión a internet (en este caso no podremos seguir navegando hacia otras direcciones web, pero sí
podremos ejecutar procesos “locales” en nuestro computador para la página web en que nos
encontráramos).

En el siguiente esquema vemos un esquema básico de lo que supone navegar por internet desde un
computador personal.

 
 
El proceso básico es el envío de una petición (que puede llevar incorporada información como los datos de
un formulario) a un servidor, esperar respuesta por parte del servidor y recibir la respuesta en nuestro
computador. Cada proceso de este tipo consume tiempo, el tiempo total podríamos verlo desde el lado de
nuestro computador como Tiempo Total Proceso = tiempo envío petición + tiempo procesamiento petición
+ tiempo recepción respuesta.

Aún con velocidades rápidas de navegación cuantos más procesos de este tipo realicemos más lenta será
la navegación web. JavaScript podemos decir que supone que las respuestas del servidor sean más
completas y permite que se realicen más procesos en nuestro computador (aquellos procesos que
realmente pueden ser resueltos en nuestro propio computador sin necesidad de estar enviando peticiones
al servidor), de modo que se reduce el número de peticiones y respuestas necesarias entre cliente y
servidor.

El código JavaScript es interpretado directamente por el navegador web, sin necesidad de otros
programas o procesos intermedios. Un ejemplo puede ayudarnos a comprender la idea. Supongamos que
en una página web pedimos al usuario que rellene un formulario con sus datos personales, y que entre los
requisitos para enviar el formulario tenemos que es obligatorio que se incluya el nombre de usuario y
correo electrónico, siendo obligatorio que el nombre tenga más de una letra y que el correo electrónico
contenga el carácter @ (arroba).

Supongamos que una petición y respuesta de servidor requiere de un tiempo de 2 segundos y

comprobemos qué ocurriría con el control del proceso del lado del servidor o controlándolo del lado del
cliente con JavaScript. Como JavaScript está en el propio computador del usuario (cliente), suponemos
que los tiempos de respuesta implican 0 s de consumo de tiempo, es decir, la respuesta es inmediata.

CONTROL DE PROCESO DEL LADO DEL SERVIDOR

Pas Tiempo
Acción del usuario Respuesta
o navegación

Envía un formulario donde por

Servidor informa de que
error el nombre está en blanco y el
1 los datos en el formulario 2s
correo no contiene el carácter
no son válidos
arroba

Servidor informa de que

Corrige el nombre pero se olvida
2 los datos en el formulario 4s
de corregir el correo electrónico
no son válidos

Servidor informa que el

3 Corrige el correo y todo está ok formulario ha sido enviado 6s
correctamente

CONTROL DE PROCESO DEL LADO DEL CLIENTE

Pas Tiempo
Acción del usuario Respuesta
o navegación
 Envía un formulario donde por
Cliente detecta error e
error el nombre está en blanco y
1 informa de que los datos en 0s
el correo no contiene el carácter
el formulario no son válidos
arroba

Cliente detecta error e

Corrige el nombre pero se olvida
2 informa de que los datos en 0s
de corregir el correo electrónico
el formulario no son válidos

Servidor informa que el

3 Corrige el correo y todo está ok formulario ha sido enviado 2s
correctamente
 
 
 

Aquí comprobamos cómo una ventaja importante de JavaScript es hacer más ágil y dinámica la
navegación por páginas web, evitando los tiempos de espera.

¿Significa esto que podemos hacer todo mediante JavaScript? Algunas páginas web pueden basarse en
combinaciones de HTML con CSS y JavaScript. Incluso una página web podría ser sólo HTML sin CSS ni
JavaScript, pero en los desarrollos profesionales lo normal es que intervengan estos tres elementos junto a
un lenguaje del lado del servidor (código que reside en el servidor y no en el cliente).

Hay varios motivos por lo que en los desarrollos web profesionales se combinan procesos del lado del
cliente con procesos del lado del servidor. Vamos a citar algunos y para ello nos valdremos del ejemplo de
una tienda de comercio electrónico.

a) Los datos en la web cambian con frecuencia. Para que los datos se mantengan actualizados es
necesario refrescar la información haciendo nuevas peticiones al servidor. Para que el usuario vaya
navegando por la tienda quizás podamos enviar los datos de 10 ó 12 productos pero para cargar nuevos
productos será lógico hacer una nueva petición al servidor.

b) Los datos pueden sobrecargar el computador del usuario. Si tenemos una tienda con 7.000
productos y enviáramos todos los datos al computador del usuario para que fueran gestionados mediante
JavaScript tendríamos problemas. En primer lugar, el envío de volúmenes muy grandes de información
consume mucho tiempo (y posiblemente el usuario se vaya a otra tienda si lo hacemos esperar
demasiado). En segundo lugar, el computador del usuario puede tener problemas para gestionar
volúmenes demasiado grandes de información (sobrecarga). Los volúmenes grandes de información
normalmente residen en bases de datos gestionadas por el servidor y los datos son servidos en pequeños
paquetes de datos a medida que resulta necesario.

c) Hay procesos que tienen que ser realizados del lado del servidor porque necesitan de
verificaciones de seguridad que no pueden residir en el computador de un usuario. Por ejemplo, para el
pago con una tarjeta de crédito es necesario que el usuario envíe el número de su tarjeta de crédito al
servidor y que éste mediante un proceso seguro verifique la tarjeta y el pago. Sería disparatado pensar en
enviar los números de tarjetas de crédito válidas al computador del usuario y que el proceso tuviera lugar
en el computador cliente para luego informar al servidor de que el pago es correcto.

Conforme vayamos adquiriendo experiencia como programadores nos daremos cuenta de que hay
procesos que claramente es más adecuado realizarlos del lado del servidor, otros que claramente es más
adecuado realizarlos del lado del cliente, y otros que podrían realizarse tanto del lado del servidor como
del lado del cliente. También con la experiencia iremos aprendiendo a tomar decisiones relacionadas con
esto.
En este esquema vemos cómo se combina un lenguaje del lado del servidor con JavaScript y HTML (no
citamos CSS pero obviamente CSS debe incluirse también en la respuesta del servidor).

 
 
 

Aquí hemos indicado como lenguaje del lado del servidor PHP, pero podría ser cualquier otro como ASP,
JSP, etc.

Algunos usos típicos de JavaScript son:

- Despliegue de menús

- Galerías de imágenes que van rotando automáticamente

- Relojes

- Contadores de tiempo hacia delante o hacia detrás (cuenta atrás)

- Cronómetros

- Calculadoras

- Cambiar la apariencia de la página web cuando el usuario hace click en un botón o imagen. Por ejemplo,
los estilos CSS pueden variar al pulsar un botón y así permitir que el usuario personalice la apariencia de
una página web.

- Ofrecer distintos tipos de respuesta según el navegador y sistema operativo que esté utilizando el
usuario.

- Validación de datos en formularios (impedir envío de formularios con datos erróneos o incompletos y
mostrar mensajes de aviso).

- Ejecutar cálculos o pequeños programas del lado del cliente.

- Modificar código HTML en respuesta a la acción del usuario sin necesidad de establecer conexión con el
servidor.

 
Ejemplo: Calculadora en una página web para calcular el valor de una pieza de oro creada con JavaScript.

En este curso vamos a centrarnos en aprender las bases fundamentales para usar JavaScript del lado del
cliente. No vamos a entrar a detallar todas las instrucciones y detalles del lenguaje, ni las diferencias entre
versiones, porque lo que nos interesará será comprender cuál es la filosofía y cómo podemos sacarle
partido a una herramienta muy potente como JavaScript. Para hacer el curso didáctico, tenemos que
centrarnos en lo fundamental y dejar los detalles de lado. Para aquellas personas que lo deseen, daremos
referencias de cómo encontrar la especificación oficial del lenguaje donde se podrán consultar detalles
específicos.

Debido a lo indicado anteriormente, para seguir este curso son necesarios como conocimientos previos:

 HTML
 CSS
 Fundamentos de la programación (haber programado en algún lenguaje y conocer conceptos
como variable, array o arreglo, condicionales tipo if y bucles tipo for).

Para seguir el curso puedes utilizar como herramienta de apoyo los foros aprenderaprogramar.com,
disponibles en http://aprenderaprogramar.com/foros, donde puedes plantear consultas y dudas relativas
al contenido del curso.

 
Qué es JavaScript,
introducción, uso y ejemplos
prácticos
Me Gusta Twittear

Explicamos de forma sencilla en que consiste y como usar

JavaScript en las páginas de internet, para agregarles
dinamismo, interactividad, animación y efectos.

Usamos JavaScript de una

forma u otra en todas las páginas de este sitio y en varias de ellas
específicamente para hacer funcionar varias herramientas web y
utilidades.
Algunas como los generadores de códigos QR, convertidores de
símbolos, compresores, despiertan el interés de los visitantes, por
lo que compartimos libremente el código usado en la
sección Códigos.
Esta información está dedicada principalmente a aficionados de
la publicación web y otras personas que no poseen
conocimientos avanzados.
Para todos los que se interesan en el uso práctico de JavaScript,
este artículo funciona como una especie de introducción al
aprendizaje y uso de este lenguaje de programación en la
práctica, usando sus reglas elementales.

¿Qué es JavaScript y para que usarla?

JavaScript es un lenguaje de programación usado en páginas y
aplicaciones web.
Complementa al tradicional HTML que escribe el contenido de las
páginas en el navegador y les agrega dinamismo, interactividad,
animación y efectos.
JavaScript funciona desde el navegador, por lo que muchas
funciones están disponibles en las páginas, aun sin conexión.
Se puede comprobar con todos los ejemplos que mostramos más
abajo en esta misma página, si la guardamos y cargamos sin
conexión.
JavaScript es casi imprescindible actualmente en la web moderna
y está detrás de gran mayoría de recursos disponibles en
internet.

¿Cómo funciona JavaScript?

Todos los navegadores modernos incluyen un intérprete o motor
de JavaScript, que traduce e interpreta las instrucciones escritas
en este lenguaje en las páginas.
Esto permite la rapidez e inmediatez que no es posible en otros
lenguajes como PHP que se ejecutan en el servidor web.
El navegador reconoce las instrucciones de JavaScript de dos
formas:

✔ Insertadas dentro de las etiquetas <script></script>

✔ Como atributos de elementos antecedidos por la instruccion:
"javascript:"

Algunos ejemplos a continuación.

Ejemplos sencillos del uso de JavaScript

La función alert() abre un pequeño cuadro de alerta en el
navegador, mostrando cualquier información que se especifique.
Si la insertamos directamente dentro de un elemento script de la
siguiente forma, se ejecutará inmediatamente al cargar la página.

<script>

alert('Mensaje');

</script>

Para usarla solo a petición del lector, debemos de emplearla

dentro de otra función, que llamamos en este ejemplo "inialert", la
que llamaremos usando un enlace de la siguiente forma.

<script>

function inialert(){

alert('Hola')

</script>

<a href="javascript:inialert();">Probar</a>
Probar
Otra forma aún más sencilla de hacerlo es incluir la función
directamente en un enlace, de la siguiente forma:

<a href="javascript:alert('Hola!');">Probar</a>

Probar
La misma función también se puede insertar en distintos
elementos usando el evento "onclick" como disparador.
Dos ejemplos, en un botón y en un bloque o contenedor.

<button onclick="javascript:alert('Mensaje!');">Probar</button>

<div onclick="javascript:alert('Mensaje!');">Bloque</div>

Probar ambos:
Probar

Bloque

Este método solo es de utilidad cuando se trata de funciones

sencillas, no obstante nos sirve para experimentar.
A continuación en vez de un mensaje de texto, obtenemos el
título de esta página usando el objeto "document.title".

<a href="javascript:alert(''+document.title);">Ver título</a>

Probar: Ver título
Otros objetos de JavaScript que se pueden emplear de forma
similar son:

location.href – Muestra la dirección URL de esta página.

navigator.appName – Muestra el nombre del navegador.
document.cookie - Muestras cookies guardadas por este sitio.
document.lastModified - Muestra la fecha y hora exacta de la
última modificación de este documento.

Usa los enlaces para probar las funciones y conoce todos objetos

de JavaScript.

Usos prácticos de JavaScript

Con JavaScript es posible realizar sencillos o complejos cálculos
matemáticos, todo tipo de tareas relacionadas con fechas, el
tiempo y la hora y otras funciones de programación.
En las páginas web es usada principalmente para las siguientes
tareas:

1- Facilitar al lector interactuar con el contenido de la página,

mediante eventos en botones, enlaces, bloques y en cualquier
otro elemento.
También se pueden detectar acciones como desplazarse por la
página, situar el mouse encima de cualquier elemento, ejecutar
pulsaciones con el teclado, etc. y en base a eso ejecutar acciones
determinadas.
Esto agrega dinamismo y hace las páginas de internet más
funcionales.
2- Enviar o transferir datos desde el servidor en internet, sin tener
que recargar la página, usando AJAX.
Por ejemplo escribir actualizaciones en las redes sociales y
recibir notificaciones en tiempo real, usar el chat, enviar y recibir
mensajes, cargar contenido de otras páginas o de archivos RSS,
etc.
3- Manipular la estructura de las paginas (DOM).
Sus funciones y métodos permiten modificar bloques o elementos
aislados, eliminarlos, moverlos, cambiar su estilo o agregarles
contenido, entre otras funcionalidades.
4- Convertir las paginas en aplicaciones web, con las que es
posible jugar, oír música o video, editar imágenes y otras
acciones, de forma similar a como lo hacemos con programas en
la computadora.

Todas estas funcionalidades se extienden considerablemente

usando Librerías de JavaScript adicionales como JQuery.

Infografía sobre el funcionamiento de Javascript

Infografía que demuestra cómo crear un simple código y como
ejecutarlo de tres formas diferentes, con un enlace HTML, con un
botón y mediante un bloque.