5.1 Javascript

Tema 5
Javascript
básico y
ejemplos
1
JavaScript
• Lenguaje de script para la creación de páginas web
dinámicas
• Ejecución de código en el lado del cliente
• Creación de visualizaciones más atractivas y mayor interactividad
• Podemos cambiar el aspecto de una página sin recargarla
• Lenguaje interpretado (no se compila)
• El navegador se encarga de interpretar y ejecutar el código
JavaScript
• JavaScript NO es Java, no tiene nada que ver
• Múltiples frameworks y tecnologías
• JQuery, MooTools, etc.
• JSON (JavaScript Object Notation) para transmisión de datos
• Ajax
• JavaScript en el servidor (tendencia en auge): Node.js
Tema 5.1: Código en el cliente - El lenguaje Javascript 2

Seguridad de JavaScript
• Por seguridad, los scripts sólo se pueden ejecutar dentro del

navegador y con ciertas limitaciones:
• No pueden comunicarse con recursos que no pertenezcan al mismo “origen”
desde el que se descargó el script (política same-origin)
• Da origen a los problemas de cross-domain
• No pueden cerrar ventanas que no hayan abierto esos mismos scripts
• No pueden acceder al sistema de ficheros, ni para leer ni para escribir
• No pueden acceder a las preferencias del navegador
• Si la ejecución de un script dura demasiado tiempo el navegador informa al
usuario de que el script está consumiendo demasiados recursos y le da la
posibilidad de detener su ejecución

Hola Mundo en JavaScript
holaMundo.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejecutando JavaScript</title>
</head>
<body>
<h1>Hola Mundo HTML</h1>
<script src="main.js"></script>
</body>
</html>
main.js
console.log("Hola Mundo JavaScript");

Inclusión de JavaScript en documentos HTML
• Código JavaScript en el documento HTML
• En un archivo externo (extensión .js). Más fácil para compartir código en varios
documentos Recomendado
<script type="text/javascript" src="/js/codigo.js">

</script>
• Dentro de los elementos (generalmente para manejar eventos o para escribir código
dentro de la página). Es menos mantenible.
<input type="button" value="Pulse este botón"

onclick="alert('¡Has pulsado el botón!');">

DOM (Document Object Model)
• DOM permite a los programadores web acceder y
manipular las páginas XHTML como si fueran
documentos XML
• JavaScript puede:
• cambiar todos los elementos HTML de la página
• cambiar todos los atributos HTML de la página
• cambiar todos los estilos CSS en la página
• eliminar elementos y atributos HTML existentes
• agregar nuevos elementos y atributos HTML
• reaccionar a todos los eventos HTML existentes en la página
• crear nuevos eventos HTML en la página
DOM (Document Object Model)
7
getElementByd, innerHTML
Método getElementById: La forma más común de tener acceso a
un elemento HTML es usar el identificador del elemento
Propiedad innerHTM: Se utiliza para obtener o reemplazar el

contenido de los elementos HTML.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Inclusión de JavaScript en documentos HTML
Ejemplo 01
• Con etiquetas <script> dentro de <head> o de <body>
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hoy hace sol</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hoy
está lloviendo"'>¡Pulsa para ver cómo cambio de opinión!
</button>
</body>
</html>

Cuando el navegador no soporta JavaScript
• La etiqueta <noscript> permite definir qué texto proporcionar al

usuario cuando el navegador no soporta o no tiene activado
JavaScript
• Se debe usar donde se hayan puesto los elementos <script>
<noscript>
<p> Esta página requiere JavaScript para su correcto
funcionamiento. Compruebe si JavaScript está
deshabilitado en el navegador. </p>
</noscript>

Ejemplo JavaScript
<html>
<head>
<title>Mi primera web con JavaScript</title>
<script>
var clicks=0;
function incrementar(){
clicks = clicks+1;
document.getElementById('contador').innerHTML= clicks;
}
</script>
</head>
<body>
<h4>Ejecución de código JavaScript en el navegador</h4>
<button type="button" onclick="incrementar()">Incrementar</button>
<p id="contador">0</p>
</body>
</html>
Consolas JavaScript
• Uso de consolas en navegadores En Chrome conviene activar la
opción Disable cache (while
• Cómodo para depuración y pruebas DevTools is open).

Sintaxis de JavaScript
• Distingue entre mayúsculas y minúsculas

• while (correcto)
• While, WHILE (incorrectos)
• Ignora espacios en blanco, tabuladores y saltos de línea
• El uso de ; al final de cada instrucción es opcional
• Pero recomendable (si no están los pone el intérprete y puede equivocarse…)
• Comentario de varias líneas entre /* y */
• Comentario hasta el final de la línea con //

Identificadores
• Similar a C/Java:
• Deben comenzar por una letra o por '_'
• Pueden contener letras, dígitos y '_'
• No pueden coincidir con las palabras reservadas
• Palabras reservadas de JavaScript

• break
• case, catch, continue
• default, delete, do
• else
• finally, for, function
• if, in, instanceof
• new
• return
• switch
• this, throw, try, typeof
• var, void
• while, with
Literales
• Números
• Internamente las operaciones se realizan en punto flotante
• Representación:
• Enteros: 0, -1, 44, ...
• Decimales (float): 0.20, 3.1415, -3.23e+6
• Hexadecimal, empiezan por 0x: 0xFF, 0x1A
• Valores lógicos (Booleanos)
• true y false
• Strings
• Secuencia de caracteres entre comillas dobles " o simples '
• Secuencias de escape, para representar caracteres especiales:
• \' Comilla simple \" Comilla doble
• \f Salto de página \n Salto de línea
• \t Tabulación \\ Barra inclinada \

Variables
• JavaScript es un lenguaje débilmente tipado, no se especifica el
tipo de las variables
var x, y, z; // How to declare variables

x = 5; y = 6; // How to assign values
z = x + y; // How to compute values
var length = 16; // Number
var lastName = "Johnson"; // String
var x = {firstName:"John", lastName:"Doe"}; // Object
https://www.w3schools.com/js/js_variables.asp

Expresiones
• Asignación
• Guarda un valor específico en una variable
• var x = 0;
• Expresiones numéricas
• Operadores aritméticos:
• + , ++, -, --, *, /, % (módulo), ^ (exponenciación)
• +=, -=, *=, /=, ^=, %=
• Expresiones lógicas
• Operadores lógicos: && (and), || (or), ! (not)
https://www.w3schools.com/js/js_operators.asp

Conversiones y comparaciones
• == y != aplican conversiones
var a = 1
var b = "1"
a == b; // true
a != b; // false
• === y !== no aplican conversiones

var a = 1
var b = "1"
a === b; // false
a !== b; // true
• Booleanos
"" == false // true, pero false con ===
0 == false // true, pero false con ===

Entrada y salida básica
• Muestra una ventana en la que el

var x = prompt("Texto a escribir"):
usuario puede escribir un texto. Tras pulsar en Aceptar la cadena
escrita se guarda en x
• console.log("Mensaje"): Escribe en la consola de JavaScript el mensaje
indicado. También puede ser el contenido de una variable o el
resultado de una expresión.
• alert("Mensaje"): Muestra una ventana emergente con el mensaje
indicado. Puede ser ser el contenido de una variable o el resultado
de una expresión.

Output
Escribir en un elemento HTML, utilizando innerHTML

Escribir en la salida HTML utilizando document.write()
Escribir en un cuadro de alerta, utilizando window.alert()
• Escribir en la consola del navegador, utilizando console.log()
https://www.w3schools.com/js/js_output.asp

Mensajes emergentes: confirm
<script>
Ejemplo 03
function myFunction() {
var txt;
if (confirm("Pulsa uno de los dos botones")) {
txt = "Pulsaste OK";
} else {
txt = "Pulsaste Cancel";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
https://www.w3schools.com/js/js_popup.asp
21
Mensajes emergentes: prompt
var person = prompt("Please enter your name", "Harry Potter");
if (person == null || person == "") {

txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?";
}
https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt
22
Control de flujo – Instrucciones condicionales
• Instrucciones condicionales
• if
if ( condición ) { // 0, "" y null equivalen a false
// Instrucciones
}
else { //También else if
// Instrucciones
}
• switch
switch ( expresión ) {
case valor1:
// Instrucciones caso 1
break; // para acabar el switch
case valor2:
// Instrucciones caso 2
break;
default: // opcional
// Instrucciones si no se diera ningún caso
}
Ejemplo
var adivinar = 50;
var numeroUsuario = prompt("Adivina qué número estoy pensando");
if (numeroUsuario==adivinar) {
alert("Has acertado");
}
else if (adivinar < numeroUsuario) {
alert("Lo siento mi número era menor");
}
else {
// Si no es igual ni menor entonces es mayor
alert("Lo siento mi número era mayor");
}

Control de flujo
• Bucles
• for for (var i=0; i<array.length; i++) {
procesa(array[i]);
}
var i;
var n = 10;
alert("Contemos hasta "+n);
for (i=1; i<=n; i++) {
alert(i);
};
• for … in
for (i in array) {
procesa(array[i]);
}
Bucle for
for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";
}
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
https://www.w3schools.com/js/js_loop_for.asp
Bucle while
while (i < 10) {

text += "The number is " + i;
i++;
}
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
text += cars[i] + "<br>";
i++;
} https://www.w3schools.com/js/js_loop_while.asp
Control de flujo
• Bucles
• while while( condicion ) {
//Cuerpo del bucle
}
• do ... while
do {
//Cuerpo del bucle
} while( condición )
• Sentencias para control de bucles

• Salir del bucle: break;
• Saltar a la siguiente iteración: continue;

Ejemplo
var adivinar = 50;
var numeroUsuario = prompt("Adivina qué número estoy pensando");
while (numeroUsuario != adivinar) {

if (adivinar < numeroUsuario) {
alert("Lo siento mi número era menor");
}
else {
alert("Lo siento mi número era mayor");
};
numeroUsuario = prompt("Adivina qué número estoy pensando");
}
// Si estoy fuera del bucle es porque el usuario ha adivinado el número
alert("Has acertado");

Control de flujo
• Excepciones: try..catch
try {
// Código a ejecutar
}
catch(err) {
// Gestión de errores
}
• Se puede lanzar una excepción con throw

Arrays y cadenas

Arrays
• toString() converts an array to a string of (comma separated) array values
• join() method also joins all array elements into a string, selecting the
separator
• pop() method removes the last element from an array
• push() method adds a new element to an array (at the end)
• shift() method removes the first array element and "shifts" all other elements
to a lower index
• unshift() method adds a new element to an array (at the beginning), and
"unshifts" older elements
• length property provides an easy way to append a new element to an array
fruits[fruits.length] = "Kiwi“; añade “Kiwi” a fruits
• concat() method creates a new array by merging (concatenating) existing
arrays
Iteración de arrays
• forEach() method calls a function (a callback function) once for each
array element
• every() method check if all array values pass a test
• indexOf() method searches an array for an element value and returns
its position
• findIndex() method returns the index of the first array element that
passes a test function
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
https://www.w3schools.com/js/js_array_iteration.asp
Arrays
• Objetos para guardar una colección de variables

• Pueden ser todas del mismo tipo o cada una de un tipo diferente
var nombre_array = [valor1, valor2, ..., valorN];
var lo_mismo = new Array(valor1, valor2, ..., valorN);
var sin_inicializar = new Array(5);
• Se accede a los elementos con nombre_array[índice]

• índice es un valor entre 0 y N-1

Arrays
• Es un tipo especial de objetos porque usa números para acceder a sus

miembros (los objetos usan nombres)
var persona = ["Ana", 24]; // array
persona[0] // "Ana"
persona[2] // undefined
var persona = {nombre:"Ana", edad:24}; // objeto

persona["nombre"] // "Ana"
persona.nombre // "Ana"

Arrays
• Propiedades y métodos
• length: número de elementos de un array
• Permite añadir un elemento nuevo al array
• colores[colores.length] = "Morado";
• concat(): concatenar los elementos de varios arrays
• a1 = [1, 2, 3];
• a2 = a1.concat(4, 5, 6); // a2 = [1, 2, 3, 4, 5, 6]
• a3 = a1.concat([4, 5, 6]); // a3 = [1, 2, 3, 4, 5, 6]
• pop(): elimina y devuelve el último elemento del array
• push(elemento): añade un elemento al final del array
• shift(): elimina y devuelve el primer elemento del array
• unshift(elemento): añade un elemento al principio del array

Arrays
• Clasificación en arrays
• sort(): clasifica los elementos del array alfabéticamente
• reverse(): clasifica los elementos del array en orden inverso
• Por defecto trabajan con los datos como strings
var numeros = [12, 323, -1, 9, 0, 12];
numeros.sort(); // -1,0,12,12,323,9
• ¿Cómo clasificar valores numéricos?

• Definiendo la función de comparación que devuelve un valor positivo, negativo o cero
numeros.sort(function(a, b){return a-b}); // -1,0,9,12,12,323

Ejemplo
var lote = [12,10,4,35];
var i;
console.log(lote.length) // 4
lote = lote.concat([0,23]);
console.log(lote.length) // 6
lote.sort();
// Veremos que no se muestra lo esperado
lote.sort(function(a, b) {
return a-b;
});
// Ahora deberíamos ver el orden esperado
for (i=0; i < lote.length; i++) {
console.log(lote[i]+ " ");}
resultadolote.splice(1,2, "otro", "número");
// El final es un array que mezcla números y cadenas
Strings
• Métodos:
• Length: Longitud
• Indexof: Posición donde se encuentra la primera ocurrencia
• LastIndexof: Posición donde se encuentra la última ocurrencia
Javascript considera la primera posición como 0
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate"); devuelve 7
var sln = txt.length;
var pos = str.lastIndexOf("locate"); devuelve 21
https://www.w3schools.com/js/js_string_methods.asp
Extraer partes de un string
• slice(start, end)
• substring(start, end)
• substr(start, length)
var str = "Apple, Banana, Kiwi";

var res = str.substr(7, 6); devuelve Banana
var res = str.substr(7); devuelve Banana, Kiwi

Cadenas
Las cadenas o string de JavaScript permiten realizar algunas de las operaciones
que usamos sobre los arrays. En particular, el operador + es equivalente a
concat():
var cadena = "hola" + " mundo";
console.log(cadena[0]); // Muestra la "h"
• toUpperCase(), toLowerCase(): Devuelve la cadena convertida en

mayúsculas/minúsculas.
• charAt(posicion): similar a cadena[posicion].
• indexOf(caracter), lastIndexOf(caracter): devuelve la posición de la primera/última
aparicicón de un determiando caracter o cadena. Devuelve -1 si no lo encuentra.
• slice(inicio, final): devuelve la cadena contenida entre las posiciones inicial y
final.
• split(separador): Devuelve un array con las cadenas formadas partiendo la
cadena original en los lugares en los que aparece separador.
Ejemplo
var mail = "minombre@dominio.es";
var i = mail.indexOf("@");
if (i===-1) {
alert("Dirección de correo no válida");
}
var frase = "Una frase separada por espacios en blanco";
var palabras = frase.split(" ");
console.log("La frase tiene "+palabras.length+" palabras");
for (i in palabras) {
console.log("Palabra "+i+" "+palabras[i]);
}
La frase tiene 7 palabras

Palabra 0 Una
Palabra 1 frase
Palabra 2 separada
Palabra 3 por
Palabra 4 espacios
Palabra 5 en
Palabra 6 blancoTema 5.1: Código en el cliente - El lenguaje Javascript 42
Funciones

Funciones
Una función JavaScript se define con la palabra clave function, seguida de
un nombre, seguido de paréntesis ()
Los nombres de función pueden contener letras, dígitos, guiones bajos y
signos de dólar (las mismas reglas que las variables)
Los paréntesis pueden incluir nombres de parámetros separados por
comas: (Parameter1, Parameter2,...)
• El código que se va a ejecutar, mediante la función, se coloca dentro de
{}
function name(parameter1, parameter2,
parameter3) {
// code to be executed
}
https://www.w3schools.com/js/js_functions.asp
44
Funciones
• function ()
• Entre paréntesis la lista de parámetros, sin tipo, separados
por comas
• Los parámetros siempre se pasan por valor
• El tipo de resultado no se declara, y se devuelve con return
function nombre_funcion ( arg1, arg2, ...){
// instrucciones
return resultado; //o return;
}
• Se pueden definir funciones anidadas

function hipotenusa(a, b) {
function cuadrado(x) { return x*x; }
return Math.sqrt(cuadrado(a) + cuadrado(b));
}

Validación datos
<script>
Ejemplo 02
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
// Aquí irían las validaciones
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname"> <input type="submit" value="Submit"> 46
Coordenadas del ratón
<script>
var IE = document.all?true:false; Ejemplo 04
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) {tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;}
else {tempX = e.pageX;tempY = e.pageY;}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;}
</script> 47
Funciones
<html>
La probamos con
<body>
html:
<h2>JavaScript Functions</h2>
<p>Ejemplo funciones</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html> Tema 5.1: Código en el cliente - El lenguaje Javascript 48
Funciones
function multiplicar(a, b) {
var prod = 0; La probamos en
var i = 1; la consola
while (i <= b) { javascript del
prod += a;
i++; navegador
}
return prod;
};
console.log(multiplicar(2, 3));
console.log(multiplicar(10, 100));

Funciones
function hipotenusa(a, b) {
function cuadrado(x) {
return x*x;
}
return Math.sqrt(cuadrado(a) + cuadrado(b));

}
var x = 10;
var y = 20;
res= hipotenusa(x,y);;
console.log(res);

Funciones
function intercambiar (a, b) {
var temp = a;
b = a;
a = temp;
};
var x = 10;
var y = 20;
intercambiar (x,y);
console.log(x);
console.log(y);
Los parámetros se pasan

siempre por valor, es decir, se
hace una copia de ellos antes de
ejecutar el bloque de la función

Funciones (arguments)
• El objeto arguments permite acceder a los argumentos de una función
como un array
• Los argumentos se acceden con arguments[i]
• El número de argumentos se accede con la propiedad length
function max( ){
var m = Number.NEGATIVE_INFINITY;
for(var i = 0; i < arguments.length; i++)
if (arguments[i] > m)
m = arguments[i];
return m;
}
...
max(10,30,42,21,19);

Funciones
var multiplicar = function(a, b) {
var prod = 0; Función anónima
var i = 1;
while (i <= b) {
prod += a;
i++;
}
return prod;
};
Función asignada
multiplicar(3,4); a una variable
var miFuncionProd = multiplicar;
miFuncionProd(1, 10); Uso de función
desde variable
multiplicar es una variable a la que se le ha asignado una

función anónima (no hemos definido el nombre de la función).
Funciones
• Las funciones también se pueden pasar como parámetros de otra
función
var operar = function(a, b, operacion) {
var resultado = operacion(a,b);
return resultado;
};
var multiplicar = function(a, b) {
return a*b;
};
var res = operar(3,2,multiplicar);
console.log(res); //muestra 6
// Podemos crear funciones anónimas "al vuelo"

res = operar(4,5, function(a,b) { return a+b; });
console.log(res)); //muestra 9

Funciones
• Las funciones pueden incluso devolver otras funciones

function ascendente() {
return function (a, b) {
return a <=b;
};
}
// f es la función resultado de ejecutar ascendente

var f = ascendente();
var x = 10;
var y = 20;
var siguiente = f(x,y) ? x : y;
console.log(siguiente); //muestra 10

JS Timing
• setTimeout(function, milliseconds): Executes a function, after waiting

a specified number of milliseconds.
• clearTimeout() method stops the execution of the function specified
in setTimeout().
• setInterval(function, milliseconds): Same as setTimeout(), but repeats
the execution of the function continuously.
https://www.w3schools.com/js/js_timing.asp
56
Ejemplo de setinterval y clearinterval
…. Ejemplo 07
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Para el reloj</button>
<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
…
57
Ejemplos de utilización

Ejemplo de setTimeout Slider automático de imágenes
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides,3000);
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
} 59
• Portfolio gallery
https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp
• Slideshow gallery
https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp
• Menú superior
https://www.w3schools.com/howto/howto_js_full_page_tabs.asp
• Search menu
https://www.w3schools.com/howto/howto_js_search_menu.asp
60
Validación de formularios
• https://www.w3schools.com/js/js_validation.asp
• En el cliente recuerda que las validaciones están incluidas en la clase

Formularioxxxx, en la función ProcesarFormulario
61
Validación datos
<script>
Ejemplo 02
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
// Aquí irían las validaciones
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname"> <input type="submit" value="Submit"> 62
Variables

Ámbito de las variables
• Locales
• Se definen dentro de una función con var
• Globales
• Se definen fuera de cualquier función
• Dentro de una función una variable local prevalece sobre la global
var m = "exterior";
function muestraMensaje() {
m = "interior";
console.log(m);
}
console.log(m);
muestraMensaje();
console.log(m);
Ámbito de las variables
• Argumentos de una función
• Son sólo visibles dentro de la función
• Caso especial: las funciones anidadas tienen acceso a todas las variables y argumentos
de la función que la contiene
function multiplicar(a, b) {
var prod = 0;
var i=1;
function sumar() { prod+=a; }

function incrementar() {i++; }
while (i<=b) {
sumar();
incrementar();
}
return prod;
};
Retrollamadas (callbacks)
• Es una función que se pasa como parámetro a otra función que la

ejecutará cuando ocurra un determinado evento.
• Es un mecanismo básico para coordinar llamadas entre funciones de
manera asíncrona.
• Cuando asignamos un callback estaremos indicando qué función
queremos que se ejecute cuando ocurra un determinado evento.
• Los callbacks son fundamentales para ejecutar acciones en
respuesta a los eventos que el usuario genera al interactuar con el
navegador

Callbacks
• En JavaScript hay dos métodos globales que permiten asociar la ejecución de
una función a un evento de tiempo:
• setTimeout ejecuta la función dada una vez transcurrido el tiempo
especificado (en milisegundos):
avisar = function() {
console.log("Por fin aparezco!");
}
setTimeout(avisar, 2000);
console.log("El callback no detiene la ejecución");

Callbacks
• setInterval ejecuta la función dada con el intervalo de tiempo
especificado (en milisegundos), indefinidamente o hasta que se invoque
a la función clearInterval
function darLaPlasta() {
var count = 0;
var funcionPlasta = function() {
count++;
console.log("He aparecido " + count + " veces!");
if (count >= 5)
clearInterval(intervalId);
}
var intervalId = setInterval(funcionPlasta, 1000);
}
darLaPlasta();

Objetos

Objetos
• Se dice que JavaScript es un lenguaje basado en objetos

• En JavaScript no se definen clases, sólo objetos
• Es un lenguaje basado en prototipos (no basado en clases)
• Se pueden crear objetos copiando prototipos de otros objetos
• Un objeto en JavaScript es un conjunto de variables con un nombre
• Las variables del objeto se denominan propiedades
• Las propiedades pueden ser valores de cualquier tipo de datos: arrays,
funciones y otros objetos
• Las propiedades que son funciones se llaman métodos

Objetos
• var car = {type:“Mini", model:“cooper", color:“blue"};
• var persona = {
firstName: “Carlos",
lastName : “Cervi",
id : 4444,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
this se refiere al propietario de la función (en
este caso el objeto persona)

Llamadas
name = person.fullName();
Carlos Cervi
name = person.fullName;
function() { return this.firstName + " " + this.lastName; }

Ejemplo
var flight = {
airline: "Oceanic",
number: 815,
departure: {
IATA: "SYD",
time: "2004-09-22 14:55",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2004-09-23 10:42",
city: "Los Angeles"
}
};

Objetos
• Se puede crear un objeto directamente indicando sus
propiedades
persona=new Object();
persona.nombre="Juan";
persona.id= 12893;
• O en una sola instrucción, indicando las propiedades entre llaves:

var persona = { nombre: "Juan", id: 12893 }
• También se pueden definir funciones

var persona = { nombre: "Juan", apellido: "Nadie",
nombreCompleto: function() {
return this.nombre + " " + this.apellido;
}
};

Objetos
• Acceso a sus propiedades:
noun = persona.nombre; // tres formas de acceder a

noun = persona["nombre"]; // una propiedad del
x = "nombre"; noun = person[x]; // objeto
• Para recorrer las propiedades de una persona
for (x in persona) {
console.log(x + " :" + persona[x]);
}

Objetos
• Se pueden añadir nuevas propiedades a un objeto

persona.nacionalidad = "española";
• También nuevos métodos
persona.apellidoNombre = function () {
return this.apellido + ", " + this.nombre;
};

Objetos con constructor
• Definir un constructor
• Como función independiente, no existen clases
function Persona(nombre, id) {

this.nombre=nombre;
this.id=id;
}
var juan = new Persona("Juan", 12893);

• Crear objetos invocando
var adela al constructor 23782);
= new Persona("Adela",

Objetos
• Se pueden definir métodos para un objeto dentro del constructor

function Persona(nombre, id) {
this.nombre=nombre;
this.id=id;
this.renombra=function renombra(nombre) {
this.nombre=nombre;
}
}
• Y se invocan sobre el objeto:

var juan=new Persona("Juan", 12893);
juan.renombra("Juanjo");

Objetos
En muchas ocasiones los objetos nos van a servir como espacios de nombres, es decir, como
contenedores de valores y funciones que queremos que estén juntas y que no se utilicen de manera
global:
MisFunciones = {
pi: 3.14159;
sumar : function(a, b) {
var suma = 0;
while (a <= b) {
suma += a;
a++;
}
return suma;
},
pintarSuma : function(a, b) {
console.log(MisFunciones.sumar(a, b);
}
};
MisFunciones.pintarSuma(3,4);
Objetos
De hecho, JavaScript ya nos proporciona algunos de estos espacios de nombres, como:

• Number: Tiene propiedades que representan valores especiales (máximo valor
representable, infinito…) y otros métodos.
• Math: Proporciona constantes matemáticas como Math.E o Math.PI y algunos
métodos como el de redondeo, raíz cuadrada o generador de números aleatorios.
• Date: Proporciona métodos para conseguir la fecha actual del sistema y
formatearla de distintas maneras.
• RegExp: Nos permite trabajar con expresiones regulares, una forma de buscar
patrones y correspondencias en una cadena.
• Objetos del navegador que veremos más adelante

Objetos del lenguaje

Objetos del lenguaje
• Todos los objetos del lenguaje tienen estas propiedades:

• constructor
• Devuelve la función que crea el objeto
• prototype
• Es una propiedad que permite añadir propiedades y métodos al objeto
• Se aplica a todos los objetos de ese tipo
Persona.prototype.nuevaFuncion=function() {
// código
}
Persona.prototype.nacionalidad = "española";
• Y los métodos:
• toString(): Devuelve una representación como string del objeto
• valueOf(): Devuelve el valor primitivo (true/false, un número, etc.) del objeto
https://www.w3schools.com/js/js_object_definition.asp

Objeto Boolean
• Permite convertir objetos no booleanos a booleanos

• Creación de un objeto booleano:
• var unBooleano=new Boolean(otro);
• El valor será false si se crea con uno de los siguientes valores
• 0
• -0
• null
• ""
• false
• undefined
• NaN
• En el resto de los casos el valor será true

Objeto Number
• Sólo hay un tipo de números, que se puede escribir con o sin decimales
• Todos los números se almacenan con 64 bits
• Creación de un objeto Number:
• var num = new Number(valor);
• Propiedades:
• MAX_VALUE: mayor número posible (1.7976931348623157e+308)
• MIN_VALUE: menor número posible (5e-324)
• NEGATIVE_INFINITY: -∞
• POSITIVE_INFINITY : ∞
• NaN: para indicar que el valor no es un número
• Métodos:
• toExponential(x): pone el número en notación científica (1.23e+3)
• toFixed(x): formatea el número con x decimales
• toPrecision(x): formatea el número con longitud x

Objeto Math
• Ofrece varias operaciones matemáticas
• Constantes matemáticas
• Math.E
• Math.PI
• Math.SQRT2: raíz cuadrada de 2
• Math.SQRT1_2: raíz cuadrada de 1/2 (inverso de la raíz cuadrada de 2)
• Math.LN2
• Math.LN10
• Math.LOG2E
• Math.LOG10E
• Métodos
• round(decimal): redondeo
• random(): devuelve un número aleatorio entre 0 y 1
• max(x, y)
• min(x, y)
Métodos sobre strings
• length: número de caracteres de un string: s.length
• Concatenación de strings: operador +
• Al igual que en Java, si el primer operando es un string, los demás operandos se convertirán a strings
para concatenarse
• var cad = "2"+2+2; <--"222"
• toUpperCase(), toLowerCase()
• var m = "Juan";
• var m2= m.toUpperCase(); // m2 = "JUAN"
• charAt(posicion) – equivalente a cad[posicion]
• indexOf(caracter), lastIndexOf(caracter)
• Cuenta desde 0. Si no estuviera el carácter devuelven -1
• var posicion = m.indexOf('a'); // posicion = 2
• substring(inicio, final)
• var resto = m.substring(1); // resto = "uan"
• split(separador)
• var letras = m.split(""); // letras = ["J", "u", "a", "n"]
• m="Hola Juan"; palabras=m.split(" ") // palabras=["Hola","Juan"]
Objeto Date
• Proporciona la fecha y hora
• new Date() // fecha y hora actual
• new Date(milisegundos) //milisegundos desde 1 de enero 1970
• new Date(string)
• new Date(anno, mes, dia, horas, minutos, segundos, milisegundos)
• Métodos:
• getTime(): devuelve el número de milisegundos desde 01.01.1970
• getFullYear(): devuelve el año (cuatro dígitos)
• getDate(): devuelve el día del mes (1..31)
• getDay(): devuelve el día de la semana (0..6)
• getHours(): devuelve la hora (0..23)
• getMinutes(): devuelve los minutos (0..59)
• Los equivalentes setDate, setHours, etc.
• toUTCString(): convierte la fecha a un string con formato de fecha de tiempo universal
(Wed, 30 Jan 2013 07:03:25 GMT)
Objeto Global
• Métodos globales para todos los objetos

• eval(string) – Evalúa una cadena de texto como si fuera un programa JavaScript
• parseInt(string, base) – Convierte una cadena de texto a un número entero
• base indica el sistema de numeración (2..36) (si no se indica se puede derivar del inicio del string
("0x" hex, "0" octal, o decimal)
• Si no puede hacer la conversión devuelve Number.NaN
• parseFloat(string) – Convierte una cadena de texto a un float
• isNan(valor) – Devuelve true si valor no es un número, false si lo es
• isFinite(valor) – Devuelve true si su argumento no es NaN o Infinity
• encodeURI(uri) – Codifica los caracteres especiales de una URI excepto , / ? : @ &
=+$#
• Para codificar también estos se usa encodeURIComponent()
• decodeURI(uri_codificada) – Descodifica una URI codificada
Ejemplos variados
Cambiar atributos
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the

light</button>
https://www.w3schools.com
Ejemplos variados
Funciones
<html>
<body>
<p>Click "Try it" to call a function with arguments</p>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<p id="demo"></p>
<script>
function myFunction(name,job) {
document.getElementById("demo").innerHTML = "Welcome " + name + ", the " + job + ".";
}
</script>
</body>
</html> Origen: https://www.w3schools.com
Licencia de uso
• Licencia Creative Commons
• Este documento tiene establecidas las siguientes
condiciones:
Reconocimiento (Attribution):
En cualquier explotació n de la obra autorizada por la licencia
hará falta reconocer la autoría.
No comercial (Non commercial):
La explotació n de la obra queda limitada a usos no comerciales.
Compartir igual (Share alike):
La explotació n autorizada incluye la creació n de obras derivadas
siempre que mantengan la misma licencia al ser divulgadas.
• Material elaborado por Juan Pavón Mestras, con modificaciones de Pablo

Moreno Ger, Manuel Freire Morán, Raquel Hervás Ballesteros, Carlos
Cervigón y Santiago Domínguez Salamanca

5.1 Javascript

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

5.1 Javascript

Caricato da

Copyright:

Formati disponibili

Tema 5

Tema 5.1: Código en el cliente - El lenguaje Javascript 2

• Por seguridad, los scripts sólo se pueden ejecutar dentro del

Tema 5.1: Código en el cliente - El lenguaje Javascript 3

Tema 5.1: Código en el cliente - El lenguaje Javascript 4

<script type="text/javascript" src="/js/codigo.js">

<input type="button" value="Pulse este botón"

Tema 5.1: Código en el cliente - El lenguaje Javascript 5

Propiedad innerHTM: Se utiliza para obtener o reemplazar el

Tema 5.1: Código en el cliente - El lenguaje Javascript 8

Tema 5.1: Código en el cliente - El lenguaje Javascript 9

• La etiqueta <noscript> permite definir qué texto proporcionar al

Tema 5.1: Código en el cliente - El lenguaje Javascript 10

Tema 5.1: Código en el cliente - El lenguaje Javascript 12

• Distingue entre mayúsculas y minúsculas

Tema 5.1: Código en el cliente - El lenguaje Javascript 13

• Palabras reservadas de JavaScript

Tema 5.1: Código en el cliente - El lenguaje Javascript 15

var x, y, z; // How to declare variables

Tema 5.1: Código en el cliente - El lenguaje Javascript 16

Tema 5.1: Código en el cliente - El lenguaje Javascript 17

• === y !== no aplican conversiones

Tema 5.1: Código en el cliente - El lenguaje Javascript 18

• Muestra una ventana en la que el

Tema 5.1: Código en el cliente - El lenguaje Javascript 19

Escribir en un elemento HTML, utilizando innerHTML

Tema 5.1: Código en el cliente - El lenguaje Javascript 20

if (person == null || person == "") {

Tema 5.1: Código en el cliente - El lenguaje Javascript 24

for (i = 0; i < 5; i++) {

var person = {fname:"John", lname:"Doe", age:25};

while (i < 10) {

• Sentencias para control de bucles

Tema 5.1: Código en el cliente - El lenguaje Javascript 28

while (numeroUsuario != adivinar) {

Tema 5.1: Código en el cliente - El lenguaje Javascript 29

• Se puede lanzar una excepción con throw

Tema 5.1: Código en el cliente - El lenguaje Javascript 31

• Objetos para guardar una colección de variables

var lo_mismo = new Array(valor1, valor2, ..., valorN);

var sin_inicializar = new Array(5);

• Se accede a los elementos con nombre_array[índice]

Tema 5.1: Código en el cliente - El lenguaje Javascript 34

• Es un tipo especial de objetos porque usa números para acceder a sus

var persona = {nombre:"Ana", edad:24}; // objeto

Tema 5.1: Código en el cliente - El lenguaje Javascript 35

Tema 5.1: Código en el cliente - El lenguaje Javascript 36

• ¿Cómo clasificar valores numéricos?

numeros.sort(function(a, b){return a-b}); // -1,0,9,12,12,323

Tema 5.1: Código en el cliente - El lenguaje Javascript 37

var str = "Apple, Banana, Kiwi";

Tema 5.1: Código en el cliente - El lenguaje Javascript 40

• toUpperCase(), toLowerCase(): Devuelve la cadena convertida en

La frase tiene 7 palabras

Tema 5.1: Código en el cliente - El lenguaje Javascript 43

• Se pueden definir funciones anidadas

Tema 5.1: Código en el cliente - El lenguaje Javascript 45

Tema 5.1: Código en el cliente - El lenguaje Javascript 49

return Math.sqrt(cuadrado(a) + cuadrado(b));

Tema 5.1: Código en el cliente - El lenguaje Javascript 50

Los parámetros se pasan

Tema 5.1: Código en el cliente - El lenguaje Javascript 51

Tema 5.1: Código en el cliente - El lenguaje Javascript 52