TEMA:

TEMA 4 “PROGRAMACIÓN DEL LADO DEL CLIENTE”

MATERIA:

PROGRAMACIÓN WEB
CARRERA:

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIONES

MAESTRO:

M EN RI IVAN AZAMAR PALMA

FECHA DE ENTREGA:

24 DE MAYO DEL 2021

ALUMNOS:

CARRILLO CARRANZA EMILY CITLALLI

CHEW SALIGAN SU KEY
PALACIOS PADILLA DANIEL ANTONIO
VERA ALTAMIRANO JESSICA ROCIO

1
ÍNDICE
PROGRAMACIÓN DEL LADO DEL CLIENTE ---------------------------------------------- 3
4.1. Introducción al lenguaje --------------------------------------------------------------------------3
4.2. Elementos de programación --------------------------------------------------------------------5
4.3. Manipulación de objetos -------------------------------------------------------------------------7
EJEMPLO PRÁCTICO ---------------------------------------------------------------------------- 10
CONCLUSIONES ----------------------------------------------------------------------------------- 11
REFERENCIAS ------------------------------------------------------------------------------------- 13
ÍNDICE DE FIGURAS
Ilustración 1 Programación lado del cliente 3
Ilustración 2 HTML 4
Ilustración 3 JS 4
Ilustración 4 Flash 5
Ilustración 5 CSS 5
Ilustración 6 Sentencias 6
Ilustración 7 Ejemplo write 8
Ilustración 8 Ejemplo getElementById 8
Ilustración 9 Ejemplo innerHTML 9
Ilustración 10 Ejemplo crear y accesar elementos 10
Ilustración 11 Código ejemplo 10
Ilustración 12 Resultado 11
Ilustración 13 Código para confirmación 11
Ilustración 14 Resultado 11

2
 PROGRAMACIÓN DEL LADO DEL CLIENTE
Los lenguajes de programación del lado cliente también se utilizan para realizar proyectos
con contenidos dinámicos, pero, a diferencia de los lenguajes del lado servidor, no es el
servidor el que ejecuta y procesa los scripts, sino el cliente solicitante.
Cuando un usuario solicita una página web o una aplicación web con un script de este tipo, el
servidor web envía el documento HTML y el script al navegador, quien lo ejecuta y presenta el
resultado final. Asimismo, los scripts del lado cliente contienen instrucciones concretas para el
navegador web al respecto de cómo ha de reaccionar a ciertas acciones llevadas a cabo por el
usuario como, por ejemplo, un clic en un botón específico. A menudo, el cliente ha de establecer
para ello otro contacto con el servidor web. (Inc., 2021)

Ilustración 1 Programación lado del

cliente

4.1. Introducción al lenguaje.

El cliente web es un programa con el que interacciona el usuario para solicitar a un servidor
web el envío de los recursos que desea obtener mediante HTTP. La parte cliente de las
aplicaciones web suele estar formada por el código HTML que forma la página web más algo
de código ejecutable realizado en lenguaje de script del navegador (JavaScript o VBScript) o
mediante pequeños programas (applets) realizados en Java. Por tanto, la misión del cliente
web es interpretar las páginas HTML y los diferentes recursos que contienen (imágenes,
sonidos, etc.).
Las tecnologías que se suelen emplear para programar el cliente web son:
 HTML
 CSS
 DHTML
 Lenguajes de script: JavaScript, VBScript, etc.
 ActiveX
 Applets programados en Java.
 Distintas tecnologías que necesitan la existencia de un plugin en el navegador: Adobe
Acrobat Reader, Autodesk MapGuide, Live Picture PhotoVista, Macromedia Flash,
Macromedia Shockwave, Virtual Reality Modeling Language (VRML),
HTML
El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen o
cada video y la forma que tendrán estos al ser colocados en la página. El lenguaje consta
de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por

3
 ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un
enlace, etc.
Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese
punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de
escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para
definir la forma o estilo que queremos aplicar a nuestro documento.

Ilustración 2 HTML
JAVASCRIPT
Javascript es un lenguaje de programación utilizado para crear pequeños programas
encargados de realizar acciones dentro del ámbito de una página web. Se trata de un
lenguaje de programación del lado del cliente, porque es el navegador el que soporta la
carga de procesamiento. Su uso se basa fundamentalmente en la creación de efectos
especiales en las páginas y la definición de interactividades con el usuario.

Ilustración 3 JS
APPLETS
Es otra manera de incluir código a ejecutar en los clientes que visualizan una página web.
Se trata de pequeños programas hechos en Java, que se transfieren con las páginas web y
que el navegador ejecuta en el espacio de la página. Los applets de Java están
programados en Java y precompilados, es por ello que la manera de trabajar de éstos
varía un poco con respecto a los lenguajes de script como Javascript. Los applets son más
difíciles de programar que los scripts en Javascript y requerirán unos conocimientos
básicos o medios del lenguaje Java. La principal ventaja de utilizar applets consiste en que
son mucho menos dependientes del navegador que los scripts en Javascript, incluso
independientes del sistema operativo del ordenador donde se ejecutan. Además, Java es
más potente que Javascript, por lo que el número de aplicaciones de los applets podrá ser
mayor.
Como desventajas en relación con Javascript cabe señalar que los applets son más lentos de
procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir, no se
mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello que con los
applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias,
controlar Frames, formularios, capas, etc.
VBSCRIPT
Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con
Internet Explorer. Es por ello que su utilización está desaconsejada a favor de Javascript.
Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto

4
 su sintaxis como la manera de trabajar están muy inspirados en él. Sin embargo, no todo lo
que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este
último es una versión reducida del primero. El modo de funcionamiento de Visual Basic
Script para construir efectos especiales en páginas web es muy similar al utilizado en
Javascript y los recursos a los que se puede acceder también son los mismos: el
navegador.
FLASH
Flash es una tecnología, y un programa, para crear efectos especiales en páginas web.
Con Flash también conseguimos hacer páginas dinámicas del lado del cliente. Flash en
realidad no es un lenguaje; Sin embargo, si tuviéramos que catalogarlo en algún sitio
quedaría dentro del ámbito de las páginas dinámicas de cliente. Para visualizar las
"películas" Flash, nuestro navegador debe tener instalado un programita (plug-in) que le
permita visualizarlas.

Ilustración 4 Flash
CSS
CSS, es una tecnología que nos permite crear páginas web de una manera más exacta.
Gracias a las CSS somos mucho más dueños de los resultados finales de la página,
pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como
incluir márgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios
estilos en un archivo externo a nuestras páginas; así, si en algún momento queremos
cambiar alguno de ellos, automáticamente se nos actualizarán todas las páginas
vinculadas de nuestro sitio. CSS son las siglas de Cascading Style Sheets, en español
Hojas de estilo en Cascada. (RENGIFO, 2014)

Ilustración 5 CSS

4.2. Elementos de programación.

Dentro de los elementos de programación más utilizados para llevar a cabo una buena
práctica de programación, están por ejemplo, los algoritmos, el pseudocódigo, los
diagramas de flujo, los diagramas de bloque, los mapas de entidad relación, los diagramas
de flujo de datos.
Sentencias de programación

5
 Las sentencias son los elementos básicos en los que se divide el código en un lenguaje de
programación, un programa no es más que un conjunto de sentencias que se ejecutan
para realizar una cierta tarea.

Ilustración 6 Sentencias

Las sentencias simples se dividen en:

Sentencia de salto incondicional (goto):
Se utilizaba mucho en los primeros lenguajes de programación porque era la única manera de
saltar de una instrucción del programa a otra.
La forma que tiene de trabajar es la siguiente:
1.- Se pone al principio de una línea una etiqueta, es como una señal que marca el sitio.
2.- Y se hacen llamadas a goto desde otras partes del código indicando la etiqueta de la
instrucción que se quiere ejecutar a continuación
Es una mala herramienta de programación y se puede cambiar por las sentencias de control
repetitivas y alternativas.
Sentencia de llamada a procedimiento:
Esta sentencia consiste en llamar a un procedimiento, y se hace poniendo el nombre del
procedimiento seguido de un punto y coma.
Mediante el uso de procedimientos facilitarás la resolución de problemas, la legibilidad de
tu código y la depuración de los programas, lo que hace es dividir un programa grande en
otros más pequeños para llamarlos cuando se requieran, la declaración de procedimientos
se suele hacer justo antes del cuerpo principal del programa.
Sentencias de asignación:
Es una de las instrucciones más comunes en un programa, permite dar un primer valor o
cambiar el valor a una variable.
La sintaxis: Variable: = expresión o llamada a función
Mientras que la parte de la izquierda sólo puede ser una variable, la de la derecha puede
ser una expresión o una llamada a una función, dentro del término expresión se incluyen
valores constantes y variables, en el siguiente ejemplo se puede ver unas cuantas
asignaciones:
Evaluación de expresiones: Para evaluar una expresión, sólo hay que saber sumar, restar, si un
número es mayor que otro. Hay tres reglas de prioridad a seguir para evaluar una expresión:
 Primero, los paréntesis (si tiene)
 Después, seguir el orden de prioridad de operadores
 Por último, si aparecen dos o más operadores iguales, se evalúan de izquierda a derecha.
Variables
Declaración de una variable: tipo nombre
Declaración de varias variables con el mismo tipo de dato: tipo nombre1, nombre2, nombre3,…
Donde:

6
  Tipo: es el tipo de dato de la variable que puede ser:
 Entero: si la variable almacenará un número entero.
 Real: si la variable almacenará un numero decimal.
 Carácter: si la variable almacenará un carácter.
 Cadena: si la variable almacenará un conjunto de caracteres.
 Lógico: si la variable almacenará el valor verdadero o el valor falso.
Nombre de las variables: el nombre de la variable debe comenzar con una letra, un símbolo de
subrayado o un símbolo de dólar, los demás caracteres del nombre puede ser letras, símbolos de
subrayado o símbolo de dólar, debe considerarse también que una letra mayúscula se considera
diferente de una letra minúscula.
Algunas características del lenguaj: Distingue entre mayúsculas y minúsculas, todas las
palabras clave se escriben en minúscula, los nombres de las palabras clave no pueden
usarse para identificar a variables o funciones, las 32 palabras claves definidas por el
estándar ANSI son: auto, double int, struct, break, else, long, switch, case, enum, register,
typedef, char, extern, return, union, const, floa,t short, unsigned, continue, for, signed, void,
default, goto, sizeof, volatile, do, if, static, y while.
E/S por consola con formato
El término con formato se refiere a que estas funciones leen y escriben datos en varios
formatos bajo control del programador.
 printf( ): Imprime una cadena de datos en pantalla su prototipo es el siguiente: La cadena
de formato consiste en 2 tipos de elementos: caracteres que se mostrarán en la pantalla y
órdenes de formato que definen la forma en que se muestran los argumentos posteriores.
Una orden de formato empieza con % y va seguido por uno de los siguientes códigos de
formato, debe haber el mismo nº de argumentos que de órdenes de formato y deben
aparecer en el mismo orden y coincidir en el tipo.
 scanf( ): Es la rutina de entrada por consola de propósito general, puede leer todos los
tipos de datos que suministra el compilador y convierte los números automáticamente al
formato interno apropiado, es el complemento de printf( ). Su prototipo es: int
scanf(“%x1%x2…”, &arg1, &arg2,…); los %xi indican qué tipo de dato se va a leer a
continuación.
Ordenes de formato argumentos: Todas los argumentos (excepto las cadenas de caracteres)
deben estar precedidos del operador & (dirección).
Constantes de carácter con barra invertida: Son necesarias para poder imprimir caracteres
especiales, como un retorno de carro, comillas dobles, comillas simples, tabuladores, etc.
(Sanchez B. E., 2015)
4.3. Manipulación de objetos
La manipulación de objetos sigue los mismos principios que en el lenguaje de
programación que se esté utilizando.
Una de las características de estos objetos es la función para la cual están diseñados, de hecho la
mayoría de las ocasiones tienen más de una función.
En JavaScript, muchas funciones para cada uno de los objetos, incluyendo el navegador y
la ventana que lo contiene, han sido definidas previamente; adicionalmente, el usuario
puede definir funciones de acuerdo a sus necesidades.
El Modelo de Objetos de Documento (DOM – Document Object Model -) describe cómo todos los
elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con
la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM,
podemos influir en él mediante un lenguaje de programación, Javascript, Java, etc.
JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y
excelentes librerías que le han dado realmente contenido dinámico al desarrollo
web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en
millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones
enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.
jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto,
Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos
facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery
como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.

7
write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del
html.
Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor
manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las
situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.
El lector debe considerar que document.write sólo funciona con las páginas que el
navegador procesa como HTML.
Ejemplo: Imprimir un mensaje y abrir una nueva ventana mediante DOM
 Las cadenas en Javascript son objetos y por lo tanto tienen métodos y atributos. En las
líneas 4 y 5 se presenta ejemplos de ellos que fácilmente pueden deducir su finalidad.
 La línea 6 imprime la cadena en el body.
 La línea 8 abre una página nueva, la función open tiene como parámetros la página que
abrirá, y el lugar donde lo hará en este caso _self sustituye la página actual

Ilustración 7 Ejemplo write

getElementById
Permite obtener la referencia a un elemento de la página mediante el id de dicho elemento.
Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades

Ilustración 8 Ejemplo getElementById

8
innerHTML
Sirve para obtener o modificar el HTML del documento HTML. Se utiliza la propiedad
InnerHtml para modificar mediante programación el contenido interno entre las etiquetas de
apertura y cierre de un control de servidor HTML.
La propiedad InnerHtml no codifica automáticamente los caracteres especiales en entidades
HTML, es el programador el responsable de hacerlo.
Ejemplo: Crear una lista con viñetas no ordena en forma dinámica
En la línea 4 creamos un vector de días de la semana.
En la línea 11 modificamos el contenido del elemento llamado contenedor.

Ilustración 9 Ejemplo innerHTML

Crear y accesar elementos

Para crear etiquetas "tag" html debemos usar el método createElement(). Cuya sintaxis es
la siguiente: createElement( tag )
Donde tag es una etiqueta valida en html.
Si necesitamos agregar un nodo es necesario usar el método appendChild(). El cual
agrega un nodo al final del árbol. La sintaxis es appendChild( tag )
El método insertBefore tiene un comportamiento similar al de appendChield, solo que el nodo
agregado es puesto antes del padre. La sintaxis es insertBefore( nuevo tag, referencia).
Ejemplo: Agregar elementos a un documento.
HTML
Los elementos son agregados mediante el evento onclick (Línea 7)
La línea 8 declara un elemento div vacio cuya función es servir de contenedor
Javascript
El objeto nuevoElemento hereda todas las características de div, por ejemplo innerHTML,
color, fontSize.
Se crea una instancia del contenedor

9
 Ilustración 10 Ejemplo crear y accesar elementos

EJEMPLO PRÁCTICO
Abrir una ventana pop-up cada cierto tiempo
A continuación mostramos un ejemplo de cómo abrir ventanas emergentes (o también llamadas
pop-up) cada cierto tiempo automáticamente. Este ejemplo es muy útil para abrir ventanas de
publicidad aparte de la principal.
En el ejemplo se define un intervalo de ejecución en Javascript con la
función setInterval que lo que hará es ejecutar la función abrir_ventana() cada 3
segundos (3000 milisegundos). La función abrir_ventana() contiene la
función window.open que lo que hará es abrir una nueva página. Al pulsar sobre el botón
se ejecutará el código Javascript clearTimeout que detendrá el intervalo de ejecución de
abrir ventanas continuamente.

Ilustración 11 Código ejemplo

10
 Ilustración 12 Resultado

Pedir confirmación para visitar una página

En algunas páginas Webs cuando accedemos a ellas nos piden que confirmemos que
somos mayores de edad para que podamos entrar en ellas. Esta confirmación lo podemos
hacer con Javascript. La función confirm visualiza una ventana emergente de
confirmación (con el texto que le indiquemos) cuyas opciones que nos da son Aceptar o
Cancelar dicha confirmación. Devolverá dicha función un “trae” (si pulsamos Aceptar) o
un “false” (si pulsamos Cancelar) y en el ejemplo solamente visitaremos la página del ITT2
cuando al pulsar sobre el enlace hayamos pulsado Aceptar.

Ilustración 13 Código para confirmación

Ilustración 14 Resultado

CONCLUSIONES
El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas en
forma de código HTML fundamentalmente y convertirlas en las páginas que son el
resultado de dicha orden. Cuando nosotros pinchamos sobre un enlace hipertexto, en
realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el

11
 servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es
enviado e interpretado por nuestro navegador (el cliente). Así pues, podemos hablar de
lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e
interpretados por el propio servidor y que se envían al cliente en un formato comprensible
para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra
el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el
código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no
necesitan un pretratamiento. Cada uno de estos tipos tiene por supuesto sus ventajas y
sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente
independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier
sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan
páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son
muy limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente por
lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las
versiones del mismo..
La programación del lado del cliente, se trata de un lenguaje que se utiliza para crear pequeños
programas los cuales se encargan de cierto número de acciones dentro de un sitio Web. Esto se
encuentra del lado del cliente. ¿Qué quiere decir? De lo que trata es explicar que el navegador
puede soportar la carga de información al procesarla y no depende de un medio más poderoso
para realizar esta tarea como un servidor.
Cuando se habla de un lenguaje no solo se trata de los modos fonéticos de comunicación
entre personal o lenguaje de señas, también nos referimos a los lenguajes de
programación mediante los cuales una persona puede comunicarse con una computadora
estructurando instrucciones de ejecución de información, de guardado de la misma o
cualquier otra cosa. Un lenguaje puede ser del lado del cliente o del lado del servidor, esto
permite que las paginas al ser creadas puedan ser visualizadas con la aplicación de los
plug – ins adecuados en los cuales se encuentra la información de compatibilidad de
códigos y lectura e interpretación de los mismos.
Los elementos de programación los encontramos en todos los lenguajes de programación, por
ejemplo en el lenguaje C++ palabras reservadas con las cuales solo ese medio se reconocerá y
ejecutara para las aplicaciones que se deseen desarrollar. Cuando hablamos de elementos de
programación se debe poner atención en los atributos que se majen, pues si no se conoce el
manejo de mayúsculas y minúsculas, lo único que se desarrollara serán errores de sintaxis y orden
lógico.
La manipulación de objetos cuenta con los mismos principios que los lenguajes de
programación que se utilicen. Una de las características de los objetos es la función u
objetivo por el cual se crean. Algunos de los objetos que son manipulables son mediante
SQL, los que se basan en las bases de datos que se almacenan en los servidores web, las
transformaciones que se les realizan son, eliminación, creación, agregar elementos,
eliminar elementos, etc.
Actualmente los lenguajes de programación presentan una gran posibilidad de desarrollo y
creación de elementos multimedia interactivos, lo que es una ventaja para quien desea que sus
elementos web sean llamativos. Conocer los elementos de programación y su manipulación es
importante para poder crear elementos compatibles entre si y que presenten un fácil acceso, pues
cuando los elementos no se definen correctamente pueden presentar errores de compatibilidad y
ejecución con algunas plataformas, si no se cuanta con los script adecuados para un elemento es
mejor definirlo como sencillo en ligar de interactivo.
Además los archivos de tipo JavaScript son simples documentos de texto con la extensión
js que se pueden crear con cualquier editor de texto como Notepad, Wordpad, UltraEdit, Vi,
etc.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML
de la página, además de la capacidad de reutilizar el mismo código JavaScript en páginas del sitio
web y que cualquier modificación realizada en el archivo JavaScript se refleja inmediatamente en
todas las páginas XHTML que lo enlazan.

12
REFERENCIAS

Inc., 1. I. (22 de 03 de 2021). IONOS Digitalguide. Obtenido de Lenguajes del lado servidor o del
cliente: diferencias: https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/lenguajes-del-lado-servidor-o-del-cliente-
diferencias/#:%7E:text=La%20programaci%C3%B3n%20del%20lado%20cliente,scripts%2
C%20sino%20el%20cliente%20solicitante.

RENGIFO, Y. S. (DICIEMBRE de 2014). PROGRAMACIÓN IV. Obtenido de UNIVERSIDAD DE LA

AMAZONIA:
https://www.uniamazonia.edu.co/documentos/docs/Programas%20Academicos/Tecnologia
%20en%20Informatica%20y%20sistemas/Compilados/Compilado%20Programacion%20IV
%20Orientacion%20a%20la%20Web.pdf

Sanchez, B. E. (04 de marzo de 2015). programacion Web. Obtenido de UNIDAD 4

PROGRAMACIÓN DEL LADO DEL CLIENTE: https://programacion1class.wordpress.com/

13