CREACIÓN,

PROGRAMACIÓN Y
DISEÑO DE PÁGINAS
WEB
5. Programación de páginas web en
Javascript
Indice

● Introducción
● Ventajas del uso de JavaScript
● Desventajas del uso de JavaScript
● Scripts
● Mensajes emergentes
● Obtener Datos
● Variables
● Operadores
● Objetos
● Estructuras de control
● Comentarios
● Funciones
● Librerias
Introducción
● Los lenguajes de scripts son lenguajes de programación que se ejecutan mediante un
intérprete del lenguaje en tiempo real (el navegador web).

● Un script, en el lado del cliente, es un programa que puede acompañar a un

documento HTML mediante un fichero externo, o estar incluido en el propio HTML.
Este script se ejecuta en la máquina del cliente cuando carga el documento web,
aunque también es posible que se ejecute en cualquier otro instante, como cuando se
posiciona el ratón encima de una imagen.

● JavaScript es el lenguaje que permite dar dinamismo a una página web y se encarga
de controlar el comportamiento de los componentes que la forman.

● El lenguaje principal utilizado para el código por parte del cliente es JavaScript.
JavaScript
● Razones para utilización de JavaScript en páginas web:

○ La interactividad permite al usuario obtener una retroalimentación dinámica de las acciones de

una página, por ejemplo, permite hacer que una imagen cambie cuando el puntero del ratón
pase sobre ella. También se puede usar para redimensionar dinámicamente una página o
contenido en movimiento.
○ La validación de formularios puede entenderse como una cortesía. Los diseñadores que
confían exclusivamente en las secuencias de comandos por parte del servidor para la
validación, pueden provocar una ralentización en las transacciones. Cuando los usuarios envían
formularios, tienen que esperar a que el formulario se verifique y que los datos se procesen.
Añadir la carga de trabajo total de la validación al servidor ralentizará las cosas todavía más. El
usuario esperará la obtención de un resultado, sólo para averiguar que el formulario no se
completó correctamente. Si se utiliza la validación de formularios por parte del cliente, el
usuario obtendrá una retroalimentación casi instantánea.
JavaScript
JavaScript no es un estándar definido por el W3C. En su lugar, ha sido estandarizado por la Asociación
Europea de Fabricantes de Computadores (ECMA) y se conoce oficialmente por ECMAScript.

● La posibilidad de cambiar una página web dinámicamente con un lenguaje de script,

es posible gracias al Document Object Model (DOM), que hace que cualquier
elemento de una página pueda procesarse con JavaScript. Esta poderosa capacidad
permite cambiar no solamente cualquier atributo definido para un elemento, sino que
también permite modificar cualquier propiedad controlada desde CSS.

● JavaScript es un lenguaje orientado a objetos, y permite ejecutar instrucciones como

respuesta a las acciones del usuario, pudiendo realizar páginas web con alto contenido
interactivo. Dispone de funciones y estructuras de datos complejas, pero a pesar de ser
un lenguaje orientado a objetos, no permite dos de las principales características de
éstos, que son la herencia y el polimorfismo.
JavaScript - Ventajas

● Está soportado por los principales navegadores como Opera, Safari, Internet Explorer,
Firefox y Chrome.

● Es posible modificar el contenido de una página web, incluso después de que esta esté
cargada, sin tener que recargarla completamente (Ajax).

● Los ficheros que contienen estos códigos son pequeños, y se procesan muy rápido.

● No es necesario el uso de ningún plugin para que funcione. Cualquier navegador

moderno por defecto soporta HTML, CSS, JavaScript y DOM
JavaScript - Desventajas

● Puede presentar incompatibilidades con el navegador y el sistema operativo. La

implementación de CSS, JavaScript y DOM, puede variar ligeramente dependiendo del
navegador, y en ocasiones entre las mismas versiones de un navegador que funcione
sobre sistemas operativos distintos.

● Es muy estricto en cuanto a su sintaxis. Aunque la mayoría de los navegadores

muestran una página, incluso si el listado HTML no es perfecto, la página entera
fallará si se ha olvidado cerrar unas llaves en una función JavaScript, o se ha olvidado
un punto y coma en la lista de definiciones del CSS.
JavaScript - Scripts

● Un script puede ejecutarse de tres formas:

○ Scripts inmediatos: se ejecutan nada más cargar la página y van dentro del <body>.
○ Scripts diferidos: son aquellos que se cargan con la página, pero no se ejecutan hasta que el
usuario lleva a cabo una acción (pulsa un botón, una tecla, etc.). Van dentro del <body>.
○ Scripts híbridos: se definen tanto en el <head> como en el <body>.
 JavaScript - Scripts
● Este script se incluye como un bloque dentro del código
de una página web y puede incluirse en cualquier parte
de la página aunque se recomienda incluirlo en la
cabecera del documento, dentro de la etiqueta <head>.

● El código JavaScript se debe incluir entre las etiquetas

<script type=“text/JavaScript”>……</script>.

● Una vez definida la zona en la que se incluirá el script,

se escriben todas las sentencias necesarias que forman
la aplicación. En este caso se ha incluido una única
sentencia: document.writeln(“Hola mundo”);

● Esta instrucción permite a JavaScript mostrar en

cualquier navegador el mensaje “Hola Mundo”.
 JavaScript – Mensajes emergentes
● En ocasiones, puede resultar más útil mostrar
información ventanas emergentes.

● JavaScript permite mostrar cuadroa de diálogo, para ello

utilizamos window.alert(“Hola Mundo);.

● Secuencias de escape más utilizadas son las siguientes:

○ \n: nueva línea.
○ \t: tabulación horizontal.
○ \r: retorno de carro.
○ \\: barra invertida. Se utiliza para presentar un carácter de
barra invertida en una cadena.
○ \”: comilla doble. Se utiliza para presentar un carácter de
comilla doble en una cadena.
○ \’: comilla simple. Se utiliza para presentar un carácter de
comilla simple en una cadena.
JavaScript – Obtener datos
● Mediante el uso del código JavaScript, es posible generar
gran parte del contenido de una página web en el
momento en que esta se le muestra al usuario. Este
contenido se puede adaptar en función de variables, como
el tipo de navegador web usado por el cliente. Este tipo de
páginas se denominan dinámicas, y su contenido puede
variar.

● Para crear página dinámica de bienvenida vamos a pedir al

usuario que introduzca su nombre para posteriormente
mostrarlo en el navegador. Para ello utilizamos prompt,
que va a permitir al usuario introducir un valor
determinado.

● El valor introducido se almacena en una variable que luego

se puede mostrar por pantalla o escribir en la página.
 JavaScript - Variables
● Una variable es un espacio en memoria
donde se almacena un dato para luego
poder recuperarlo y utilizarlo.

● En JavaScript, una variable puede contener

un valor de cualquier tipo de datos, ya que
JavaScript convierte automáticamente los
valores. Por eso decimos que es lenguaje
tipo flexible.

● Las variables en JavaScript podrán

almacenar:
○ Números: tanto enteros como de tipo real.
○ String: textos entre (“”) o (‘‘).
○ Booleanos: un valor lógico (true o false).
○ Null: sin ningún valor.
JavaScript - Operadores

● Los operadores aritméticos utilizados en JavaScript son:

○ Resto ( % )
○ Suma ( + )
○ Diferencia ( - )
○ Multiplicaciones ( * )
○ División ( / )
○ Negación ( - )
JavaScript

● Los operadores de igualdad son los siguientes:

○ Igual que ( == )
○ Distinto a (!= )
○ Mayor que ( > )
○ Menor que ( < )
○ Mayor o igual que ( >= )
○ Menor o igual que ( <= )
Si los operadores (==), (!=), (<=), y (>=) contienen espacios entre los símbolos, como en (=
=), (! =), (< =) y (> =), se produce un error sintáctico.
JavaScript

● Los operadores de asignación son los siguientes:

○ Asignación ( = )
○ Se asigna a la suma o concatenación ( += )
○ Se asigna a la resta ( -= )
○ Se asigna a la multiplicación ( *= )
○ Se asigna a la división ( /= )
○ Se asigna al modulo ( %= )
JavaScript

● El operador de cadenas es el siguiente:

○ Concatenación ( + )

● Los operadores de incremento y decremento son los siguientes:

○ Preincremento ( a++ )
○ Postincremento ( ++a )
○ Predecremento ( -bb )
○ Postdecremento ( bb- )
JavaScript - Operadores

● Prioridad Operadores
JavaScript - Objeto document

● El objeto document se utiliza para manipular el documento actualmente visible en la

ventana del navegador. Tiene multitud de propiedades y métodos, como el que se ha
visto anteriormente, document.writeln. Algunos métodos y propiedades de este objeto
son los siguientes:

○ Devuelve el nodo DOM, que representa el elemento HTML, cuyo atributo id coincide con id.
GetElementById (id).
○ Escribe cadena en el documento HTML como código HTML, y añade un carácter de nueva línea
al final. Writeln (cadena).
○ Crea una cadena que contiene los valores de todas las cookies almacenadas en el ordenador
del usuario para el documento actual. Cookie.
JavaScript - Objeto window

● El objeto window proporciona métodos para manipular ventanas del navegador. Suele
usarse para crear un sitio web que se divide en varias ventanas. Contiene multitud de
métodos y propiedades, por ejemplo:

○ Crea una nueva ventana con el URL de la misma. Open (url, nombre, opciones).
○ Cierra la ventana actual y elimina su objeto en memoria. Close ().
○ Propiedad que contiene el objeto window de la ventana que ha abierto la ventana actual,
siempre que exista dicha ventana. Window. opener.
○ Propiedad que contiene un valor booleano que se establece como true si la ventana está
cerrada o como false en caso contrario. Window.closed.
○ Este método dirige el enfoque a la ventana (en caso de haber varias ventanas abiertas, la
coloca sobre el resto de las demás ventanas del navegador). Focus ( ).
 JavaScript - Estructuras de control y
condicionales

● En JavaScript se pueden anidar diferentes sentencias de control, por ejemplo, estructuras

condicionales o repetitivas.

● Una estructura condicional es anidada cuando en una de sus ramas, ya sea por el lado
verdadero o falso, existe a su vez otra estructura condicional.

● JavaScript dispone de tres instrucciones de selección:

○ La instrucción if, que realiza una acción si una condición es cierta, y la ignora si es falsa;
○ La instrucción de selección if...else, que realiza una acción si la condición es cierta, y otra acción diferente
si la condición es falsa;
○ La instrucción Switch, que realiza una de entre varias acciones, en función del valor de una expresión.
JavaScript - IF

● Una instrucción de selección se utiliza para seleccionar entre varias acciones

alternativas en un programa. Por ejemplo, si la nota de aprobado de un examen es de
5 puntos sobre 10, la instrucción de JavaScript quedaría de la siguiente forma:

If (notaAlumno >= 5 )
document.writeln ("Aprobado”)

● En este caso, se determina si la condición notaAlumno es mayor o igual a 5, es

verdadera o falsa. Si la condición es verdadera, se muestra el texto “Aprobado”, y se
ejecuta la siguiente instrucción. En caso de ser falsa, no se muestra nada por pantalla,
y se continúa con la siguiente instrucción.
 JavaScript - if...else

● La instrucción de selección if...else permite especificar qué acción se realiza cuando la

primera condición es falsa. Siguiendo con el ejemplo anterior:

If (notaAlumno >= 5 ) {
document.writeln ("Aprobado”);
} else {
document.writeln(“Suspenso”);
}
● En una primera instancia, se evalúa la condición si notaAlumno >= 5. Si la condición es
verdadera, se muestra en pantalla “Aprobado”. Sin embargo, si la condición es falsa, se
muestra en pantalla “Suspenso ”.
JavaScript - Swtich

● La siguiente estructura se bifurca

según los distintos valores que
pueda tomar una variable
específica. Es la sentencia switch.
Esta sentencia ayuda a la toma de
decisiones en función de los
distintos estados de una variable.
Se utiliza cuando existen múltiples
posibilidades como resultado de la
evaluación de una sentencia.
JavaScript - Bucles

● Una instrucción de repetición, o bucle, permite especificar que una secuencia de

comandos repita una acción mientras una condición sea cierta.

● Existen dos tipos de estructuras de repetición: aquellas instrucciones que se pueden

repetir un número determinado de veces, o ignorando dicho número, repetir esas
instrucciones mientras se cumpla cierta condición.

● En cuanto a las instrucciones de repetición, JavaScript cuenta con cuatro tipos:

○ while,
○ do.... while,
○ for
○ for... i.
JavaScript – Bucle While

● Como ejemplo de la instrucción while, se muestra un fragmento de programa diseñado

para calcular la tabla de multiplicar del 5.
JavaScript – Bucle For

● La instrucción de repetición for se utiliza cuando se conoce el número de interacciones

que se van a procesar.
● En la instrucción siguiente, se permite declarar e inicializar el contador, asignar la
condición para la finalización del bucle e incrementar el mismo, todo ello separado por
; y encerrado entre ( ). De esta forma podemos hacer la tabla de multiplicar del 5 de la
siguiente manera:

var resultadoTabla;
for (contador = lj contador <= 10j contador ++)
resultadoTabla = 5 * contador;
JavaScript - Comentarios

● Los comentarios sirven para añadir al código aclaraciones sobre lo que se quiere hacer, o
añadir por qué se usa una variable y con qué objetivo.

● En JavaScript se dispone de dos tipos de comentarios: los comentarios de una sola línea y los
comentarios de varias líneas.

● Para comentar una sola línea, se puede proceder del siguiente modo:
var total; //suma del total
//esta es una línea de texto que no se ejecuta var suma;

● En caso de necesitar comentar más de una línea, se puede utilizar /* */. Todo el texto que se
encuentre dentro de estas marcas se considerará un comentario.

● Los comentarios no son interpretados por el navegador.

JavaScript - Funciones

● En JavaScript las funciones permiten automatizar tareas.

● Para invocar a una función, hay que escribir el nombre de la misma, seguido por un paréntesis
de apertura, una lista separada por comas de cero o más argumentos, y un paréntesis de
cierre.

● Ejemplo llamada a función:

total = suma (numeral, numero2);

● Función
function suma(nro1, nro2){
resultado= nro1+nro2
}
JavaScript - Librerias

● Las librerías de JavaScript son

ficheros con funciones
predefinidas que permiten
automatizar y simplificar el uso de
JavaScript.

● Existen multitud de librerías

basadas en JavaScript entre ellas
podemos destacar Jquery que
dispone de una librería especifica
para mobile y otra para crear
interfaces de usuario.