JAVASCRIPT

PROGRAMACIÓN II
 ¿Qué es JavaScript?
• Definición
JavaScript es un lenguaje de programación
interpretado con opciones orientadas a objeto.
• Sintácticamente el núcleo de JavaScript es muy
similar al de otros lenguajes orientados a objetos
como C/C++ y Java.
• JavaScript a diferencia de Java es mucho más
flexible ya que es débilmente tipificado y el
mecanismo de herencia se basa en prototipos.
 ¿Qué es JavaScript?
• JavaScript es hoy en día el principal lenguaje de
script del lado del cliente. Al ser interpretado, no
requiere compilación.
• Es un lenguaje guiado por eventos que se producen
dentro del ámbito de una página web.
• A pesar de que existieron otros lenguajes de script
como VBScript y Jscript, es JavaScript el de mayor
utilización y aceptación. Los otros, incluso han
dejado de existir.
 ¿Qué es JavaScript?
• JavaScript, por ser un lenguaje interpretado del lado del cliente, provoca
que la carga del procesamiento recaiga sobre el navegador.
• Todos los navegadores modernos y la gran mayoría de los no tan modernos
son capaces de interpretar código de JavaScript.
• El lenguaje fue creado explícitamente para poder interactuar con los
elementos de una página web, controlar los eventos que se producen en el
navegador y alterar el contenido del documento cargado en éste de forma
dinámica.
 Breve historia de JavaScript
• El lenguaje JavaScript fue inventado por Brendan
Eich en la empresa Netscape Communications
pionera en la creación de navegadores web de
interfaz gráfica.
• El primer navegador que incluyó soporte para
JavaScript fue Netscape Navigator en su versión
2.0.
• Inicialmente se conoció como Mocha. Luego, se
cambió el nombre a LiveScript y, por último, se
renombró como JavaScript. Este nombre se debió
a que esta última versión se desarrolló en conjunto
con Sun Microsystems.
• En junio de 1997, se adoptó JavaScript como estándar de la European
Computer Manufacturer’s Asociation (ECMAScript). Actualmente el
lenguaje está aceptado como estándar ISO 16262.
• Microsoft lanzó su propia implementación de ECMAScript que se conoció
como Jscript, muy similar al JavaScript de Netscape pero con ciertas
diferencias que los hacen en ocasiones incompatibles.
 JavaScript no es Java
• Esta es una de las confusiones más comunes con los novatos en
lenguajes de script o en lenguajes orientados a objetos. Esto se ha
convertido en un mito a nivel informático.
• JavaScript no es una versión simplificada de Java como se piensa en
algunos círculos. La única semejanza está en el nombre de ambos
lenguajes y en que con ambos se pueden crear contenidos ejecutables
en navegadores web.
• El parecido en el nombre se ha debido más a una estrategia de
marketing de la empresa Netscape.
 JavaScript no es simple
• Muchas veces se considera que por tratarse de un
lenguaje de secuencias de comando, en lugar de
ser considerado como lenguaje de programación,
JavaScript es mucho más fácil de entender y
aprender comparado con un verdadero lenguaje de
programación orientado a objetos como Java o
C++.

• Sin embargo, JavaScript, a pesar de proporcionar

cierta flexibilidad de tipos de datos, ofrece todas
las funcionalidades de un lenguaje de
programación, incluyendo estructuras de control,
manejo de datos complejos, soporte de objetos,
etc. haciéndolo tan complejo como aquellos.
 Usos de JavaScript
• Validación de formularios.
• Cálculos matemáticos básicos.
• Creación de elementos HTML de forma
dinámica.
• Manipulación de toda la estructura del
documento con el DOM (Document Object
Model).
• Decoración de páginas con efectos
especiales.
• Creación de juegos y contenido multimedia.
 Terminología básica de lenguajes de
programación
• Identificador
Es el nombre con el que se identifican dentro del script a los elementos
como variables, matrices, funciones, objetos.
• Las reglas para nombrar identificadores son las mismas que muchos otros
lenguajes de programación como Java, C++, Perl, etc.:
• El primer carácter tiene que ser una letra o un signo de subrayado.
• Los siguientes caracteres después del primero pueden ser letras, números o
símbolos de subrayados.
 Operadores de JavaScript

• Operadores de comparación
• Operadores aritméticos
• Operadores de asignación
• Operadores de incremento/decremento
• Operadores lógicos y a nivel de bits
• Operadores de cadena de caracteres
• Operador condicional ternario
 Operadores de comparación

Operador Descripción

== Igualdad de comparación. La comparación se realiza con

ajuste de tipos si es necesario.
!= Desigualdad (no igualdad) de comparación. Ajustando
tipos si es necesario.
=== Igualdad de comparación absoluta. Devuelve true si los
elementos representan el mismo valor y además son del
mismo tipo de dato.
!== No igualdad absoluta.

> Mayor que

>= Mayor o igual que

< Menor que

<= Menor o igual que

 Operadores aritméticos
Operador Descripción

+ Suma

- Resta

* Multiplicación

/ División

% Módulo. Resto de una división de dos enteros.

++ (v) Operador incremento. Incrementa en una unidad el valor

de una variable.
-- (v) Operador decremento. Decrementa en una unidad el valor
de una variable.
- (v) Negación. Cambia el signo del valor al que acompaña.
 Operadores de asignación

Operador Descripción
x=y Asigna a 'x' el valor de 'y'

x += y Suma con asignación. x = x + y

x -= y Resta con asignación. x = x - y

x *= y Multiplicación con asignación. x = x * y

x /= y División con asignación. x = x / y

x %= y Módulo con asignación. x = x % y

 Operadores de incremento y decremento

Operador Descripción
++ Operador de incremento que se utiliza para incrementar el valor de una variable en
una unidad
-- Operador de decremento utilizado para decrementar el valor de una variable en una
unidad
var++ Operador de post-incremento. El valor de la variable var se asignará y luego se
incrementará.
var-- Operador de post-decremento. El valor de la variable var se asignará y luego se
decrementará
++var Operador de pre-incremento. El valor de la variable se incrementa y luego se asigna

--var Operador de pre-decremento. El valor de la variable se decrementa y luego se asigna

 Operadores lógicos y a nivel de bits
Operador Descripción
x && y Operador 'Y' (AND). Devuelve 'true' si son 'true' 'x' y 'y‘
x || y Operador 'O' (OR). Devuelve 'true' si alguno de los operandos es ‘true'.
!x Operador 'NO' (NOT). Negación del operando.

Operador Descripción
x&y Operación AND a nivel de bits
x|y Operación OR a nivel de bits
x^y Operación XOR a nivel de bits
~x Operación NOT. Negación (inversión) a nivel de bits
x << y Desplazamiento a la izquierda de los bits de 'x' tantas posiciones como indique
'y'. Se rellena por la derecha con ceros.
x >> y Desplazamiento a la derecha de los bits de 'x' tantas posiciones como indique 'y'.
Se conserva el signo.
x >>> y Desplazamiento a la derecha de los bits de 'x' tantas posiciones como indique 'y'.
Se rellena por la izquierda con ceros.
 Operadores de cadena de caracteres
Operador Descripción
+ Concatena dos cadenas uniéndolas. Tiene mayor precedencia que el operador +
utilizado para realizar sumas aritméticas
+= Concatenación y asignación. Primero se concatena la cadena de la derecha a la variable
actual (en la izquierda) y luego se asigna el resultado a esta misma variable.

Operador condicional ternario

• Es un operador con tres operandos. Las sintaxis es la siguiente:
condicion ? expresion1 : expresion2
 Operadores especiales
• new: este operador crea una nueva instancia de un objeto
• delete: este operador permite borrar un objeto, una propiedad de un
objeto, o un elemento especificado de un arreglo
• void: especifica una expresión que será evaluada sin devolver ningún valor.
Se utiliza mucho en pseudo-enlaces
• this: se utiliza principalmente dentro de la definición de un objeto para
referirse al objeto actual
• typeof: devuelve una cadena con el tipo de dato del operando que se envía
como argumento
 Terminología básica de lenguajes de programación

• Expresión
Es un grupo de elementos token, a menudo literales o identificadores,
combinados con operadores de acuerdo a ciertas reglas sintácticas que
pueden dar como resultado un valor específico.
Son ejemplos de expresiones las siguientes:
• 2.5
• “Análisis y Diseño de Sistemas I"
• (x + 2) * 2.5
• "Mi nombre es: " + firstname
 Terminología básica de lenguajes de programación

• Instrucción
Las instrucciones son las que producen un cambio en el estado del entorno
de ejecución del script. Por ejemplo, un cambio en el valor de una variable,
una definición o del flujo de ejecución. Podemos considerar al script como
una secuencia de instrucciones.
Hay que recordar que en JavaScript las instrucciones se separan entre sí con
signos de punto y coma. Pero además, se acepta el uso del salto de línea
(tecla ENTER) como separador de instrucciones.
No obstante, la recomendación será utilizar siempre el punto y coma como
separador de instrucciones.
 Terminología básica de lenguajes de programación
• Palabra clave
Son palabras que son parte del lenguaje en sí. Las palabras clave no se
pueden utilizar como identificadores. Ejemplos: if, while, function, var, etc.

• Palabra reservada
Son palabras que podrían convertirse en parte del lenguaje en sí. Las
palabras reservadas tampoco deberían ser utilizadas como identificadores.
Ejemplos: byte, double, int, class, const, etc.

A veces esta restricción no es total como en el caso de las palabras claves.

https://aitoralejandro.wordpress.com/2014/10/17/palabras-clave-y-palabras-reservadas-en-javascript/
 Conversión de tipos
• JavaScript, a diferencia de lenguajes de programación como Java, C++ o
Perl, es un lenguaje de tipología débil.

• Esto significa que el tipo de dato de las variables en JavaScript se infiere del
valor almacenado y no de una declaración de tipo preestablecida.

• La consecuencia de esta inferencia es que el tipo de dato de una variable

puede cambiar de forma dinámica.

• Esto es tanto una ventaja como un aspecto que debe llamar a la precaución
de los programadores porque en cierta forma introduce ambigüedad en
algunos cálculos matemáticos sobre todo.
 Conversión de tipos
• La conversión automática de tipos es una característica de JavaScript que
permite que el tipo de dato de una variable cambie de forma automática
cuando cambia el tipo de valor almacenado en esta.
• Por ejemplo, en las siguientes instrucciones:
x = "7"; //literal de cadena "7"
frase = x + " caballos"; //frase contendrá 7 caballos
resta = x – 5; //resta contendrá 2
 Como escribir con JavaScript texto y elementos en páginas web

• Con JavaScript podemos hacer nuestras páginas más útiles,

dinámicas, interactivas, agregándoles varias funcionalidades.

• Existen varias funciones en JavaScript que permiten escribir

contenido en el HTML de las páginas.

• Por ejemplo document.write(),document.writeln(), innerHTML()

y appendChild().
 Como escribir con JavaScript texto y elementos en
páginas web

• La función document.write() de JavaScript permite escribir en

una página texto, el resultado de una función o ambos.
• Se utiliza de cualquiera de las siguientes formas:

– document.write(“texto”);
– document.write(variable);
– document.write(“texto” + variable);
 Como escribir con JavaScript texto y elementos en páginas web
• La propiedad más interesante de los objetos Web a los que podemos
acceder, no forma parte del Standard oficial de HTML.
• Se trata de la propiedad innerHTML que fue introducida por Microsoft en
Internet Explorer como un método de acceso rápido al contenido
completo de un contenedor en HTML. Rápidamente el resto de
exploradores lo añadieron en su soporte de lenguaje.
• Podemos usar innerHTML para recuperar el contenido actual de un
contenedor o insertar nuevo contenido en ese contenedor.
• Un contenedor de ejemplo puede ser todo aquello que este entre las
etiquetas <div> y < /div >.
• El elemento DIV define un contenedor genérico, el cuál permite a los
programadores definir estilos o bloques de contenido.
 Como escribir con JavaScript texto y elementos en páginas web

• Función: getElementById()

• Uso: var elemento = document.getElementById(id);

• Este método pertenece al objeto document. Con él obtendremos el objeto que hace
referencia al elemento con un id concreto. Por ejemplo, queremos obtener el objeto
del elemento “status”:

<div>
<span id=”status”>Hola mundo...</span>
</div>
<script type=”text/javascript”>
// Obtenemos el elemento “status”
var el = document.getElementById(“status”);
// Mostramos mediante una alerta el contenido del elemento
alert(el.innerHTML);
</script>
 Conversión de tipos
• Ejemplos:
var x = 5;
var y = "4";
var suma;
suma = x + y;
document.write(suma); //resultado 54 no 9

var strval = 5.5;

strval = "Activo";
document.write("El estado de su cuenta es: " + strval);
//strval almacena el literal de cadena "Activo"
 Aspectos básicos de la sintaxis
• Distinción entre mayúsculas y minúsculas
JavaScript es sensible al uso de letras mayúsculas y minúsculas en los
nombres de identificadores y palabras clave o reservadas. De modo que
debe tener mucho cuidado a la hora de codificar. Cualquier carácter no
coincidente a la forma como se utilizó en la declaración o en la primera
utilización de una variable puede producir resultados inesperados.

Lo anterior implica que si se ha declarado inicialmente

var edad = 15; y luego se realiza la siguiente instrucción
document.write(Edad); el resultado no será el esperado.
 Aspectos básicos de la sintaxis
• Espacios en blanco
En JavaScript son considerados espacios en blanco todos aquellos
caracteres que ocupan un espacio en la pantalla sin una representación
visible, tales como: espacios ordinarios, tabulaciones y saltos de línea.
Cualquier secuencia excesiva de espacios en blanco es ignorada por
JavaScript, de modo que para JavaScript una instrucción como:
x = x + 1;
será procesada como:
x = x + 1;
sin importar cuántos espacios en blanco se digitaron en el
código fuente.
 Aspectos básicos de la sintaxis
• Separador de instrucciones
En JavaScript las instrucciones se pueden separar utilizando el punto y
coma (;) o el retorno de carro. Obviamente, para poder colocar dos
instrucciones en la misma línea sólo podrá hacerlo utilizando el punto y
coma como separador.

A pesar de que se puedan separar instrucciones de estas dos formas, se

recomienda utilizar siempre el punto y coma como separador de
instrucciones.
 Aspectos básicos de la sintaxis
• Bloques de instrucciones
Se trata de un grupo de instrucciones delimitado por caracteres de llave,
específicamente “{” y “}”.

Se utilizan bloques de instrucciones para delimitar el cuerpo de una

función, las instrucciones que se ejecutarán dentro de una sentencia
condicional o repetitiva, principalmente.
Ejemplo:
for(i=0; i<10; i++){
pares = 2 * i;
document.writeln("Par " + i + pares);
}
 Aspectos básicos de la sintaxis
• Tipos de datos básicos
Los tipos de datos básicos de JavaScript son: cadenas, números y los tipos
lógicos, conocidos también como booleanos.

Una cadena es una secuencia de caracteres, en tanto que, un literal de

cadena se especifica encerrando la secuencia de caracteres entre comillas
simples o dobles.
Son ejemplos de cadenas los siguientes:
var saludo = "Hola UFG";
var parrafo = ‘<p>Esta clase es sobre JavaScript.</p>';
 Aspectos básicos de la sintaxis
• Los números pueden ser valores enteros o
valores con punto flotante, mientras que los
literales numéricos se especifican de forma
natural, tal y como los escribimos en un
cuaderno.

• Los tipos lógicos o booleanos aceptan uno de

dos valores que son: true (verdadero) o false
(falso). Los literales booleanos se indican
utilizando directamente las palabras
reservadas true o false en el código fuente.
 Aspectos básicos de la sintaxis
• Tipos de datos compuestos
Son datos formados por un conjunto de valores heterogéneos (de
diferentes tipos) que pueden incluir cadenas, números, valores lógicos,
valores no definidos, valores nulos e incluso otros tipos de datos
compuestos.
JavaScript soporta tres tipos de datos compuestos: objetos, matrices o
arreglos y funciones.
Más adelante abordaremos detenidamente cada uno de estos tipos de
datos compuestos.
 Qué se necesita para utilizar JavaScript

• Para poder crear scripts con JavaScript lo único que se requiere es un

editor de texto para producir el código y un navegador para visualizar el
resultado en la página web.
• El otro aspecto importante es que para guardar el documento web debe
hacerlo colocando explícitamente la extensión .html o .htm a la hora de
guardar el archivo.
• Idealmente debería subirse el archivo a un servidor web, pero como
JavaScript se interpreta en el cliente, se podrán ejecutar los scripts de
forma local.
 Incluir JavaScript en un documento web

• Existen cuatro formas estándar de incluir código de JavaScript dentro de un

documento HTML. Estas son:
• Dentro de etiquetas <script> … </script>
• Como archivo vinculado utilizando el atributo src del elemento SCRIPT
• Como valor asignado a un atributo HTML especial conocido como manejador
de evento
• Mediante sintaxis de dirección pseudo-URL utilizando javascript: en el atributo
de enlace href
 Etiquetas <script> … </script>
• Este es el método más utilizado para crear secuencias de comando de
JavaScript.
• Los navegadores que interpretan scripts suponen que todo texto que se
encuentre dentro de estas etiquetas tiene que interpretarse como secuencias
de comando, de forma predeterminada casi siempre se asume que es
JavaScript.
• Para garantizar que el código de script sea interpretado como JavaScript se
utiliza el atributo language del elemento SCRIPT.
• De la siguiente forma: <script language="JavaScript">
 Etiquetas <script> … </script>
• De acuerdo al estándar de HTML definido por el consorcio W3C debería
utilizar el atributo type en lugar del atributo language para indicar el tipo
MIME del lenguaje de secuencias de comando utilizado.

• Tradicionalmente, se ha definido el tipo MIME para el lenguaje JavaScript,

que es text/javascript utilizando un elemento script con la siguiente sintaxis:
<script type="text/javascript">
</script>
• Sin embargo, en la actualidad, basta con la siguiente instrucción:
<script>
</script>
 Etiquetas <script> … </script>
• También es más común el uso del atributo language, en lugar de type. Por
tanto, para aprovechar las ventajas de utilizar el atributo language,
respetando a la vez los estándares del elemento script es común encontrar
marcado de la siguiente forma:
<script language="JavaScript" type="text/javascript">
</script>

• No obstante, como se indicó antes, hoy en día basta con una etiqueta
script simplificada, sobre todo porque JavaScript se ha aceptado ya como el
lenguaje de script predeterminado por la gran mayoría de navegadores
populares:
<script>
</script>
 Vinculación de scripts al documento
• Para poder vincular secuencias de comando almacenadas en un archivo
.js al documento HTML se utiliza siempre el elemento SCRIPT, pero esta
vez con un atributo adicional, el atributo src. De la siguiente forma:
<script language="JavaScript" type="text/javascript"
src="archivo.js">
</script>
• Al igual que con el elemento script utilizado para incrustar código de
JavaScript dentro del propio documento HTML, los scripts vinculados
han dejado de requerir que se especifiquen los atributos language y
type. De manera, que se puede utilizar la siguiente sentencia script
simplificada:
<script src="archivo.js">
</script>
 Incluir JavaScript en un documento web
• Como partes de las buenas prácticas de programación en ambiente web,
existe una tendencia desde hace varios años a separar por completo la
estructura del documento, ya no sólo de la apariencia y formato que
añaden las hojas de estilo en cascada (CSS), sino también del
comportamiento de la página y su funcionalidad, algo que es proporcionado
por las secuencias de comando de JavaScript.

• Esta tendencia es conocida como JavaScript no obstructivo o intrusivo

(Unobtrusive JavaScript).
 Utilizando javascript: en el atributo de enlace HREF

<!DOCTYPE html>
<html><head><title>E</title>
<meta charset="utf-8">
</head>
<body><h3>Ejemplos JavaScript</h3>
<a
href="javascript:void(document.body.style.backgroundColor='yellow');">
Presione aquí para cambiar a color de fondo amarillo</a>
</body>
</html>
 Formas de introducir JavaScript – uobtrusive JavaScript

• La siguiente imagen muestra la idea que hay detrás de la realización de

código con JavaScript no intrusivo (u obstrusivo).
 Formas de introducir JavaScript – uobtrusive JavaScript
• JavaScript Intrusivo

• <input type=“button” id=“btn” value=“hacer clic aquí”

onclick=”helloWorld();” />

• Esto es javascript intrusivo, ya que como atributo del input, estamos

suscribiendo un evento (onclick)
 Formas de introducir JavaScript – uobtrusive JavaScript
• JavaScript no Intrusivo
• Veamos ahora como conseguir esto mismo, pero por medio un Javascript no
intrusivo:
<input type=“button” id=“btn” value=“hacer clic aquí” />

Y en head (o en un archivo js externo) pondríamos el código del onclick de la siguiente

forma:
<head>
<script language=”javascript” type=”text/javascript”>
window.onload = function()
{
document.getElementById(“btn”).onclick = helloWorld;
}
function helloWorld()
{
alert(“hola”);
}
</script>
</head>
 Mostrar mensajes y cuadros de diálogo en JS
• JavaScript prompt, su finalidad es la de mostrar por pantalla mensajes de
alerta encuadrados en una pequeña ventana modal en la cual se puede
rellenar información.
prompt("Texto descriptivo","Texto por defecto");

• Texto descriptivo: Es el mensaje que se mostrará por pantalla pidiendo la

inserción o rellanado de información.
• Texto por defecto (Opcional): Podemos dejar un valor por defecto para
que el usuario no tenga que escribirlo o rellenarlo.
 Mostrar mensajes de alerta en JS
• JavaScript alert, su finalidad es la de mostrar por pantalla mensajes de
alerta encuadrados en una pequeña ventana modal.
alert("Mi primer alert");

• Tal y como se puede ver el ejemplo es muy básico y es muy fácil mostrar
mensajes por pantalla en caso que necesitemos informar al usuario de
manera muy llamativa.
CONTROL DE FLUJO DE
PROGRAMA

SENTENCIAS CONDICIONALES
 Sentencias condicionales

• Existen dos sentencias condicionales en JavaScript que son el if y el switch.

La sentencia if más simple únicamente lleva la palabra reservada if, una
sentencia if más compleja se utiliza junto con el else.

• Adicionalmente, se tiene una sentencia if que puede incluir, uno o varios

else if, y terminar, opcionalmente, con un else.
 Sentencia if
• Una sentencia if simple es una sentencia con la siguiente estructura
sintáctica:
if(condicion) sentencia;
O bien,
if(condicion){
sentencias;
}
La primera forma puede utilizarse únicamente si el bloque de instrucciones
if posee una sola instrucción. En el caso de la segunda, puede utilizarse sin
importar cuántas sentencias componen el bloque de instrucciones.
 Sentencia if-else

• Con una sentencia condicional if-else puede crear dos bloques de

instrucciones, de los cuales, uno se ejecutará si la condición es evaluada
verdadera. El otro se ejecutará si la condición se evalúa como falsa. Pero
nunca se podrá ejecutar ambos.

• En caso de tener múltiples bloques de instrucciones que dependan de

condiciones diferentes puede utilizar una estructura if-else if-else
 Sintaxis de la sentencia if-else if-else

• La sentencia if-else tiene la siguiente sintaxis:

if (condición)[{]
sentencia_1;
[}else{]
sentencia_2; }]

• La sentencia if-else if-else tiene una sintaxis similar

if (condición 1)[{]
sentencia_1;
[}else if (condición 2){
sentencia_2;
...
else sentencia_3;]
 Consideraciones sobre la sentencia if-else

• La condición en una sentencia if puede ser cualquier expresión lógica

sintácticamente bien construida que devolverá únicamente verdadero
(true) o falso (false).

• La sentencia if puede ir sola, no necesariamente con un else o un else if. En

ese caso se tendrá la sentencia if más simple posible.

• Es importante tener presente que JavaScript considera equivalentes a false

los siguientes valores: 0, "", null y undefined. Cualquier otro valor será
considerado verdadero al igual que true.
 Ejemplo de sentencia if
var precio = prompt("Ingrese el precio: ","");

var timpuesto = prompt("Introduzca la tasa de impuesto: ","");

var total;

if(precio >= 0 && timpuesto >= 0){

total = precio / (1 + timpuesto);

alert("Total a pagar: ", total);

}
 Sentencia switch
• Es una sentencia condicional múltiple que permite evaluar una expresión y
comparar el resultado de esta con las etiquetas de varios casos de prueba. Si
existen coincidencia entonces se ejecuta el bloque de instrucciones
correspondiente a ese caso de prueba.
• Los valores de prueba se colocan en sentencias case.
• Si no se da coincidencia con ninguno de los valores de los case se ejecuta lo
que se incluya en la sentencia default.
 Sintaxis del switch

switch (expresion) {
case etiqueta_1:
sentencias_1;
[break;]
case etiqueta_2:
sentencias_2;
[break;] ...
[default:
sentencias_por_defecto;
[break;] ]
}
 Efecto de caída en cascada en un switch
• Una sentencia switch puede producir un efecto de caída en cascada si
queremos que dos valores de prueba de case diferentes ejecuten
instrucciones similares.
case 'A':
case 'B':
alert("Excelente nota");
break;
 Operador condicional
• El operador condicional, representado por ?: se utiliza para crear una
línea condicional rápida.
• La sintaxis de este operador es la siguiente:
(expresion) ? Intruccion si true : instruccion si false;
• Donde, expresion es cualquier expresión que se pueda evaluar como
verdadero (true) o como falso (false).
 Operador condicional
• Si la expresión condicional es true se ejecutar la instrucción a la
izquierda de los dos puntos.
• Si la expresión condicional se evalúa false, entonces se ejecutará la
instrucción a la derecha de los dos puntos.
• Básicamente, el operador condicional ?: es una manera abreviada de
escribir una sentencia condicional if-else.
CONTROL DE FLUJO DE
PROGRAMA
SENTENCIAS REPETITIVAS
 Sentencia for

• Es una sentencia repetitiva que incluye una inicialización, una

condición de paro y una instrucción de iteración conocida
como incremento/decremento.
• Este tipo de lazo o bucle es conveniente cuando se conoce
con exactitud el número de veces que se va a ejecutar el lazo
o cuando se conocen los límites inferior y superior del mismo.
Sintaxis del for
 Sintaxis del for

for(inicialización;condición;incremento) {
//bloque de instrucciones
}

Ejemplo:
count = 0;
for (i=1; i<10; i+=2){
count += i;
}
 Sentencia while

• Es el ciclo, lazo o bucle más básico de JavaScript cuyo propósito es

ejecutar una instrucción o un bloque de instrucciones una o más
veces mientras una expresión condicional sea evaluada como
verdadera.
• El lazo termina cuando la expresión condicional es evaluada como
falsa o cuando se encuentre una instrucción break dentro del bloque
de instrucciones; lo que suceda primero.
• Un lazo o bucle while puede no ejecutarse ni una vez si la condición
es evaluada falsa desde la primera vez.
Sintaxis del while
 Sintaxis del while
while (condicion) {
//bloque de instrucciones
}
--------------------------------------------------------
Ejemplo:
var i=0,count = 0;
while (i<10){
count++;
i+=2;
}
document.write(count);
 Sentencia do-while
• Es muy similar al ciclo while, con la diferencia que en este lazo primero
se ejecutan las instrucciones del bloque y por último se evalúa la
condición en cada iteración.

• Esto implica que el bucle siempre se ejecutará, al menos una vez,

independientemente del resultado de la condición.

• Si al evaluar la condición resulta verdadera, entonces el bucle se sigue

ejecutando. El bucle se detiene si la evaluación de la condición resulta
falsa.
Sintaxis del do-while
 Sintaxis del do-while

do {
//Bloque de instrucciones
}while(condicion);

Ejemplo:
do {
r=confirm("¿Desea continuar (S/N)?");
}while(r!=false);
 Sentencia for-in

• Esta instrucción se utiliza para realizar un recorrido por todas

las propiedades de un objeto, a manera de bucle o ciclo.
• Esta sentencia termina automáticamente después de acceder a
la última propiedad del objeto.
• No debe utilizarse esta instrucción con un tipo de dato que no
sea un objeto. Hacerlo produciría un error en tiempo de
ejecución
 Sintaxis de la sentencia for-in

for (variable in objeto) {

//bloque de instrucciones
}

Ejemplo:
for (property in window){
document.write(property);
document.write("<br>");
}
 Sentencias de control de ciclo

• break
Permite terminar prematuramente la ejecución del ciclo o lazo, sin
tener que esperar hasta que se llegue hasta la última iteración del
mismo.

• continue
Permite saltarse el resto de sentencias que haga falta ejecutar de
una iteración específica y seguir de una vez con la siguiente.
 Sentencias de control de ciclo

• Ejemplos

• break Este ejemplo corta la

• for (i = 0; i < 10; i++) { estructura del for al llegar al
if (i === 3) { break; }
text += "El numero es: " + i + "<br>"; valor de 3
}

• continue Este ejemplo omite el valor

• for (i = 0; i < 10; i++) { de 3
if (i === 3) { continue; }
text += "El numero es: " + i + "<br>";
}
FUNCIONES
 Definición de función
• Las funciones son uno de los elementos más importantes de cualquier
lenguaje de programación actual, mucho más en JavaScript, que de hecho es
presentado como un lenguaje funcional.

• Si bien es cierto, las funciones se pueden definir como un bloque de código

independiente que se identifica con un nombre o identificador y que se puede
invocar una o varias veces usando ese identificador para ejecutar las
instrucciones definidas en la función. Además pueden recibir parámetros o
argumentos y también devolver valores, cabe indicar que en JavaScript las
funciones son objetos de primera clase.
 Definición de función

• Que las funciones sean objetos de primera clase significa entre otras cosas
que una función es un tipo especial de objeto que puede hacer lo que
cualquier objeto puede hacer.
 Definición de función
• Una función es una instancia del objeto Object.
• Las funciones pueden ser datos y por tanto asignarse a variables, a
propiedades de un objeto, presentarse como elementos de una
matriz, pasarse como argumentos de otras funciones o devolverse
como valor de retorno de otra función.
• Las funciones pueden ser métodos y asignarse como propiedad de
un objeto.
• Las funciones pueden ser constructores de un objeto.
• Las funciones se pueden definir con el constructor Function().
• Las funciones definidas como funciones inmediatas o funciones
anónimas autoinvocadas.
 Sintaxis de las funciones
function nombre_funcion([arg1, arg2,…, argn]){
//sentencia(s);
}
Donde:
function, es una palabra reservada de JavaScript que le indica al navegador que lo que
viene a continuación es una función.
nombre_funcion, es el nombre con el que se identificará a la función y mediante el cual se
realizará la llamada.
arg1, arg2, … , argn, son los argumentos o parámetros que recibirá la función. Van
entre corchetes porque son opcionales.
sentencia(s), representan las instrucciones que se ejecutarán al llamar a la función y
con las cuales se realizará la tarea o cálculo para el que se ha diseñado la función.
 Precaución con el uso de funciones
• Hay que poner especial atención a la hora de crear la funciones, para no
repetir los nombres, principalmente porque esto no genera errores en
JavaScript, y puede suponer quebraderos de cabeza cuando un script no
funciona pero la consola de errores no muestra mensaje alguno.

• Si definimos dos funciones con el mismo nombre, como en este ejemplo:

function alerta(msg){
alerta(msg);
}
function alerta(){
alerta(msg);
}
• Sólo funcionará la segunda, que ha sido la última definida.
 Llamada a una función
Desde un manejador de evento en una etiqueta HTML:
<etiqueta_html manejador_evento=
"nombre_funcion([val1,val2,…,valN]);">

Desde un pseudo-enlace HTML:

<a href="javascript:nombre_funcion([val1,val2,…,valN]);">

o también, desde otra parte del script:

[variable=]nombre_funcion(valor1,valor2,valorN);

OBSERVACIÓN: Aunque esta forma de invocar a las funciones desde el código del
documento HTML sigue siendo válida, es preciso señalar que las nuevas
tendencias de codificación en donde se separa la funcionalidad proporcionada por
JavaScript indican que ya no debe hacerlo así.
 Manejadores de eventos
Las llamadas a las funciones pueden realizarse desde un manejador
de eventos.

Un manejador de eventos es un mecanismo por el cual se pueden

detectar las acciones que realiza el usuario sobre la página web.
Sintaxis de una llamada a función a través de un manejador de
eventos:

<etiqueta_html nombre_manejador_evento="nombre_funcion([parametros]);">
 Manejadores de eventos
• En el control avanzado de eventos definido en el DOM Nivel 2, permite
utilizar funciones como controladores o manejadores de eventos.

• Estas funciones que trataremos como manejadores de eventos se activan al

producirse ese evento en la página web.

• Veamos un ejemplo de manejador de evento con el evento onload.

 Manejadores de eventos

• Tenemos el siguiente documento:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Enlaces</title>
</head>
<body>
<h2>
<a href="pagina.html" id="redirect">Google</a>
</h2>
</body>
</html>
 Manejadores de eventos

• El código JavaScirpt:
window.onload = initAll;
function initAll(){
document.getElementById("redirect").onclick = initRedirect;
}

function initRedirect(){
window.location = "http://www.google.com";
return false;
}
 Manejadores de eventos de JavaScript

Atributo de evento Descripción

onclick Indica que se ha hecho clic en un elemento.
Indica que el elemento ha recibido el foco; concretamente que se ha
onfocus
seleccionado para operar con él o para ingresar datos.
Indica el evento de que una ventana o conjunto de marcos se han
onload
terminado de cargar.
onmouseover Indica que el ratón se ha posicionado sobre el elemento.
onmouseout Indica que el ratón se ha posicionado fuera del elemento.
Indica que el formulario va a ser enviado como producto de un clic sobre
onsubmit
un botón de envío.
Indica que el formulario ha sido restablecido a sus valores iniciales como
onreset
producto de la pulsación sobre un botón reset.
 Paso de argumentos y valores devueltos

• Parámetros o argumentos
• Las funciones pueden recibir parámetros o argumentos que funcionan como variables
locales cuyo valor se establece en el momento en el que se invoca a la función desde
alguna parte del script.

• Los valores que son enviados a una función para que realice o resuelva una tarea son
denominados argumentos o parámetros de la función.

• Casi siempre se necesitará que la función realice una tarea, para lo cual puede resultar
conveniente enviarle valores a la función.
 Paso de argumentos a las funciones
• Con respecto al paso de argumentos, debe tomar en cuenta que
JavaScript trabaja con tipología débil de datos.
• Esto implica que los argumentos, al igual que ocurre con las
variables, no se declaran de un tipo específico.
• Otro punto importante es el hecho que cuando se llama a una
función con menos argumentos que los declarados, los
argumentos no utilizados tendrán un valor undefined.
 Devolución de valores

• Técnicamente, una función debería devolver un valor al punto del script

desde donde se realiza la llamada a la función.
• JavaScript permite que se creen funciones que no devuelvan valor, pero
realmente se está creando una función que devuelve un valor undefined.
• Para que la función devuelva un valor debe utilizarse la instrucción return.
 Ejemplo de paso de argumentos
//Función que calcula la distancia entre dos puntos
//del plano cartesiano
function distance(x1, y1, x2, y2){
var dx = x2 – x1;
var dy = y2 – y1;
return Math.sqrt(dx*dx + dy*dy);
}
-----------------------------------------------
//Función que calcula el factorial de un número
function factorial(x){
if (x <= 1)
return 1;
return x * factoria(x-1);
}
 Ámbito local y ámbito global

• Cuando se trabaja con funciones, es importante comprender el

hecho que las variables que se declaran dentro del bloque de una
función tienen ámbito local.
• En tanto que las variables que se definen afuera del bloque de
una función tienen ámbito global.
• A las variables de ámbito local sólo se puede acceder desde
dentro del bloque donde fueron definidas.
 Funciones como objetos de primera clase

• Tenga en cuenta que, aunque se han realizado hasta este punto

muchos ejemplos usando instrucciones como alert() y
document.write(), ambas son consideradas actualmente unos
dinosaurios por lo que no es tan recomendable su utilización.

• Existen mejores formas de crear páginas web dinámicas, unas que

tienen que ver con lenguajes del lado del servidor, y otras que
involucran la manipulación del DOM desde el lado del cliente con
JavaScript.
 Formas de definir funciones en JavaScript

Forma tradicional Como literales de

Funciones como
con la instrucción función (funciones
métodos
function anónimas)

Usando el
Funciones Funciones
constructor
constructoras inmediatas
Function()
 Funciones con instrucción function
• En la siguiente imagen se ilustra lo que tradicionalmente se nos presenta
como función, que también es válido utilizar en JavaScript.
 Funciones con instrucción function

• Ejemplo 1:
function distance(x1,y1,x2,y2){
var dx = x2 – x1;
var dy = y2 – y1;
return Math.sqrt(dx*dx + dy*dy);
}
-------------------------------------------
function factorial(n){
if(x<=1)
return 1;
return n * factorial(n-1);
}
 Funciones con instrucción function

• Llamada o invocación a las funciones anteriores:

distance(3,1,5,6);
distance(2.3,5.2,1.2,4.7);
-------------------------------------------
factorial(0);
factorial(5);
factorial(parseInt(prompt("Ingrese el número","")));
factorial(parseInt(document.formName.txtnumber.value));
 Funciones con literales de función
• A los literales de función también se les denomina funciones anónimas,
por el hecho que no se declara en la instrucción un identificador o
nombre para la función.
• Un literal de función es una expresión que define una función sin
nombre.
• La sintaxis de un literal de función es prácticamente similar a la de una
instrucción function, con la diferencia que no se utiliza como una
instrucción si no como una expresión en la que no se requiere el
nombre de la función.
• Ejemplos:
function f(x){ return x*x; } //Usando instrucción function
var f = function(x){ return x*x; } //Usando literales de función
 Funciones con literales de función
• Ejemplo:
function dividirNumeros(x, y){
if(y==0) throw new Error("División entre cero");
return x/y;
}
-------------------------------------------------------
------
var dividirNumeros = function(x, y){
if(y==0) throw new Error("División entre cero");
return x/y;
}
 Funciones con literales de función
------------------------------------------------------
//El código que invocará a la función dividir números
function init(){
var n1 = document.form.number1.value;
var n2 = document.form.number2.value;
var calcular = document.getElementById("calcular");
calcular.addEventListener("load", funtion(){
dividirNumeros(n1/n2);
}, false);
}
window.addEventListener("load", init, false);
 Funciones como métodos
• Un método no es más que una función de JavaScript que se asigna en la
propiedad de un objeto y se invoca a través de dicho objeto.
• Debe tener presente que en JavaScript las funciones son valores de
datos y que no hay nada especial acerca de los nombres con los que se
definen.
• Es por esa razón que una función se puede asignar a cualquier variable,
o incluso, a la propiedad de un objeto.
• En el contexto de un método existe un objeto especial al que se le
denomina this. Es el objeto mismo de la clase el que se invoca con esa
palabra clave para hacer referencia a las propiedades y métodos
definidos dentro de la clase.
 Funciones como métodos
• Ejemplo:
//Definiendo la clase alumnoUFG haciendo uso de sintaxis de función
function alumnoUFG(nombre, apellido, edad, genero, carrera){
//Propiedades de la clase
this.nombre = nombre;
this.apellido = apellido;
this.edad = edad;
this.genero = genero;
this.carrera = carrera;
this.numCarnet = null;
//Métodos de la clase
this.matricular = function(){
var fecha = new Date();
var year = fecha.getFullYear();
var day = fecha.getDate();
var sec = fecha.getSeconds();
this.numCarnet = this.nombre.substring(0,1) + this.apellido.substring(0,1) + this.formato(sec) + this.formato(day) +
year;
}
}
 Funciones constructoras
• Básicamente una función o, más correctamente dicho en el lenguaje de la
programación orientada a objetos, método constructor es el encargado de
inicializar las propiedades definidas del objeto.
• Ejemplo:
function carro(manufacturer, model, year) {
this.fabricante = manufacturer;
this.modelo = model;
this.año = year;
}
------------------------------------------------------
carronissan = new carro("Nissan", "Versa", 20017);
carrotoyota = new carro("Toyota", "Corolla", 2019);
carrohonda = new carro("Honda", "Civic", 2015);
 Funciones con el constructor Function()
• JavaScript también permite crear funciones haciendo uso del constructor
Function(). Recuerde que en JavaScript, todo o casi todo es objeto,
incluso las funciones y por tanto, al ser objetos, las funciones también
poseen un método constructor.

• Normalmente, crear una función con el constructor Function() es mucho

más complejo que hacerlo con un literal de función o con la instrucción
function, explicadas anteriormente. Por esta razón su uso no es muy
común.
 Funciones con el constructor Function()
• El constructor Function() puede recibir cualquier número de
argumentos de cadena, cada uno de ellos son los parámetros que
recibe la función a excepción del último que es el cuerpo o código
que ejecutará la función.
• Si la función no recibirá argumentos, únicamente se proporciona un
solo parámetros que sería el código que ejecutaría la función.
• El último argumento puede contener muchas instrucciones, no solo
una. En el caso de tener más de una instrucción se separan por punto
y coma cada una y encerrando todo el conjunto de instrucciones
entre comillas.
 Funciones con el constructor Function()

• Sintaxis:
var functionName = new Function("Arg1","Arg2",...,"Function Body");

• Ejemplo:
//Creando la función con el constructor Function()
var add = new Function("n1", "n2", "return n1+n2");
//Invocar la función anterior
var suma = add(2.75, 11.5);
 Funciones inmediatas
• Las funciones inmediatas, denominadas también funciones anónimas
autoinvocadas, representan una construcción importante del lenguaje
JavaScript que se basa en el correcto uso de las clausuras(1).

• La sintaxis básica de una función inmediata o autoinvocada es la siguiente:

(function(){ //Instrucciones; })()

NOTAS: (1)Una clausura es el ámbito que se crea cuando se declara una función permitiendo
que dicha función acceda y manipule variables externas a ella. En otras palabras, una clausura
hace que una función acceda a todas las variables y a otras funciones que están en el ámbito
cuando se declara.
 Funciones inmediatas

• La construcción anterior posee tres partes que son:

1. La función anónima.
• (function(){})
2. El código de la función en sí.
• //Instrucciones
3. Los paréntesis añadidos al final de todo
• ()
• Los paréntesis del final hacen que lo que está antes sea ejecutado de forma
inmediata.
• Ya sabemos que una función se invoca usando la siguiente sintaxis:
nombreFuncion(), pero como en JavaScript podemos usar cualquier expresión
que se refiera a una de sus instancias.
 Funciones inmediatas
• Por ejemplo:
var someFunction = function(){ … }
result = someFunction();
• Lo siguiente sería absolutamente equivalente y válido:
var someFunction = function(){ … }
result = (someFunction)();
• La diferencia es que el primer juego de paréntesis se utiliza como un mero
delimitador, como cuando agrupamos una expresión matemática como:
(x+5)*3, mientras que el segundo juego de paréntesis se interpreta como un
operador.
• Al final, todo lo que está dentro del primer juego de paréntesis es considerado
una referencia a la función que se va a ejecutar.
 Funciones inmediatas

• Ejemplo:
(function(){
var numclicks = 0;
document.addEventListener("click", function(){
alert("Van: " + (++numclicks) + " clicks");
}, false);
})();
 Funciones recursivas

• Una función recursiva es una función que se invoca a sí misma.

• La solución recursiva a un problema computacional no es siempre

la más eficiente, sin embargo, suele resultar muy elegante plantear
una solución recursiva en determinados problemas.

• Es muy importante asegurarse que exista siempre una

comprobación que garantice que las llamadas a la función
terminen en determinado momento.
 Ejemplo de recursión
//La función factorial se llama a sí misma un número
//de veces que estará determinado por una llamada
//con un valor de cero para el argumento n.
function factorial(n){
if(n==0)
return 1;
else
return n * factorial(n-1)
}