Ejemplos
6. Ejemplos JavaScript:
Estos ejemplos te permitirán poner en práctica los conceptos aprendidos en este manual. Te
bastará con una
A. Operadores
Enunciado
Se trata de crear una sencilla función para sumar dos números, que se le pasan como argumentos. La función devolverá la suma de ambos números.
El código
function sumar(sum1, sum2) {
let resultado;
resultado = sum1 + sum2;
return resultado;
}
logger.warn('4 + 10 = ' + sumar(4, 10)); /* Mostrar resultado */
Comentarios
En este sencillo ejemplo creamos la función mediante la palabra clave function a la que sigue el nombre en este caso sumar. Entre paréntesis escribimos los nombres que damos a los argumentos que usa la función: sum1 y sum2 en el ejemplo. Cuando llamemos a la función entre paréntesis escribiremos dos valores que se guardarán en estas variables.
También vemos como crear una variable usando la palabra clave var seguida del nombre de la variable, en el ejemplo resultado. El símbolo = es el operador asignación con el que guardamos la suma en la variable resultado.
Por último usamos return para devolver el resultado al programa que usa la función sumar. Los símbolos / y */* encierran cualquier comentario personal para clarificar el programa.
En el cuerpo de las pruebas usaremos logger.warn para mostrar en la parte inferior (log) el resultado de la suma.
B. Media Aritmética
Enunciado
Crear una función que calcule la media aritmética (suma de datos dividido por número de valores) de un conjunto de datos numéricos que se le pasan como argumentos. El número de datos es variable.
El código
function media() {
let total = 0, res, numDatos, item;
numDatos = arguments.length;
for (item = 0; item < numDatos; item++) {
total += arguments[item];
}
res = total / numDatos;
return res;
}
logger.warn(media(3, 50, 40, 25, 10));
Comentarios
Se crea la función como es habitual con function. Se declaran las variables que se van a usar, en esta ocasión al mismo tiempo inicializamos el valor de una de ellas, total , que va a almacenar la suma de los datos.
Guardamos en numDatos el número de argumentos pasados mediante la propiedad length de la propiedad arguments del objeto Function.
Mediante un bucle for recorremos la matriz argumentos y vamos acumulando en total
los datos pasados a la función. Observa el uso del operador += que suma al contenido de la variable total el valor del elemento arguments[item].
Calcula la media dividiendo total por el numDatos y por último devuelve el resultado almacenado en res.
Este código podría ser mas corto pero he preferido detallarlo lo más posible para ilustrar el uso de operadores y hacer el programa mas claro.
C. Saludo
Enunciado
Este programa hará que tu
El código
function saludar(){
let tiempo = new Date();
let hora, cad = 'son las ';
with (tiempo) {
hora = getHours();
cad += hora + ':' + getMinutes() + ':' + getSeconds();
}
if (hora < 12) {
cad = 'Buenos días, ' + cad;
} else if (hora < 18) {
cad = 'Buenas tardes, ' + cad;
} else {
cad = 'Buenas noches, ' + cad;
}
return cad
}
logger.warn(saludar());
Comentarios
En este ejemplo usamos el objeto Date para determinar la hora del día, a continuación extraemos la hora del objeto tiempo y construimos una cadena cad con la hora, minuto y segundo del día para el saludo. La variable hora la comparamos con las 12 y las 18 mediante sentencias if...else anidadas.
Si es antes de las 12 ( hora < 12) el saludo a escribir será la cadena "Buenos días, son las..." seguido de la hora completa que está almacenada en la variable cad, si no es antes de las 12 comprobamos si es antes de las 18 si es así la cadena es "Buenas tardes son las..." y si no se da ninguno de los casos anteriores debe ser por la noche.
Observa el uso de la estructura with que permite trabajar con los elementos de un objeto sin tener escribir su nombre y el punto separador (tiempo.getDate() etc). Observa también como modificamos la variable cad anteponiéndole al valor que guarda (la hora completa) el prefijo con el saludo adecuado.
D. Array aleatorio
Enunciado
Este sencillo ejemplo trata de como rellenar una lista de longitud dada, en este caso 10, con números aleatorios comprendidos entre 0 y 20, todos enteros.
El código
function rellenar(matriz) {
let largo, valor, ind;
largo = matriz.length;
for (ind = 0; ind < largo; ind++) {
valor = Math.random()*20;
matriz[ind] = Math.round(valor);
}
}
let lista = new Array(10);
rellenar(lista);
document.write(lista);
Comentarios
En este programa es interesante observar como los valores dados al argumento dentro de la función permanecen al finalizar ésta, de forma que la variable lista antes de pasar por la función estaba vacía y después de ejecutarse rellenar posee valores numéricos aleatorios.
Esto ocurre así porque ese argumento es un objeto Array , es el único caso en que JavaScript usa paso de argumentos por referencia. Otro punto es que esta función no usa return ya que no devuelve ningún valor. El resto del código es muy simple: un bucle for() para recorrer la matriz e irle dando valores calculados con el método random del objeto Math redondeados al entero más próximo mediante el método round.
E. Comprobar E-mail 1
Enunciado
Esta es una función que puede resultar bastante útil para comprobar direcciones de correo. Se trata de ver si una dirección de email contiene el carácter @ y el punto en su lugar.
El código
function checkemail(email) {
let ind1, ind2, ind3;
ind1 = email.indexOf('@');
ind2 = email.indexOf('.');
ind3 = email.lastIndexOf('@');
if ((ind1<=0) || (ind2<ind1) || (ind3 != ind1)) {
return 'No es correcto';
} else {
return 'Correcto';
}
}
let dire = 'javascript@adquio.com';
logger.warn(dire + ' ' + checkemail(dire));
dire = 'mal@adquio.pro@es';
logger.warn(dire + ' ' + checkemail(dire));
Comentarios
Sin comentarios que destacar.
F. Comprobar E-mail 2
Enunciado
Esta es una función que puede resultar bastante útil para comprobar direcciones de correo. Se trata de ver si una dirección de email contiene caracteres correctos y sigue el esquema habitual: usuario@servidor , usuario y servidor podrán contener caracteres alfanuméricos mas _ (guión bajo) y - (guión normal).
El código
function checkMail(cadena) {
let plant = /[^\w^@^\.^-]+/gi;
if (plant.test(cadena)) {
alert(cadena + ' contiene caracteres extraños.');
} else {
plant = /(^\w+)(@{1})([\w\.-]+$)/i;
if (plant.test(cadena)) {
alert(cadena + ' es correcta.');
} else {
alert(cadena + ' no es válida.');
}
}
}
Comentarios
La función checkMail() comprueba primero si existe algún carácter extraño para lo cual usa la expresión regular: /[^\w^@^\.^-]+/gi , comprueba si existe algún carácter no alfanumérico, o diferente de @, del punto o del guión.
Una vez ha hecho esto pasa a comprobar la estructura de la cadena mediante otra expresión regular, en este caso comprueba que la cadena comienza con un carácter alfanumérico (^ indica aquí inicio de cadena y \w caracteres alfanuméricos) seguido de otros similares, este grupo debe ir seguido por un sólo símbolo arroba (@{1}) tras el cual puede existir cualquier grupo de alfanuméricos incluido el punto o el guión ( [\w.-]) hasta llegar al final de la cadena ($).
Si tienes dudas consulta el apartado descriptivo de las expresiones regulares y el dedicado a sus métodos.
G. Buscar en un Array
Enunciado
En esta ocasión tenemos una lista de nombres y deseamos determinar si un nombre en concreto está en la lista, y si es así en que posición se encuentra. Si el nombre no está en la lista la función debe devolver un valor negativo.
El código
function buscarItem(lista, valor) {
let ind, pos;
for(ind = 0; ind < lista.length; ind++) {
if (lista[ind] == valor) {
break;
}
}
pos = (ind < lista.length)? ind : -1;
return (pos);
}
let lista1 = new Array('Juan', 'Pedro', 'Luis', 'María', 'Julia');
let cad = 'María';
let pos = buscarItem(lista1, cad);
if (pos >=0) {
logger.warn(cad + ' está en la posición '+ pos );
} else {
logger.warn(cad + ' no está.');
}
Comentarios
La lista se construye como un Array en el que almacenamos nombres. La variable cad contiene el nombre que deseemos buscar. La función funciona con dos argumentos: la lista de nombres y el valor a buscar, en ella hacemos un bucle para recorrer la variable lista hasta encontrar el nombre buscado, si lo encontramos detenemos el bucle con la instrucción break.
Si el bucle ha terminado sin encontrar el nombre la variable ind será igual a la longiutd del Array (recuerda que los índices van desde 0 a la longitud del array menos 1), mientras que si se ha encontrado el nombre su valor será menor que esa longitud..
Observa la sentencia después del bucle: en pos ponemos el valor del ind si se ha encontrado el nombre y si no ponemos -1, es la forma abreviada de usar una sentencia if...else.
H. Extraer subcadena
Enunciado
Partimos de un texto y veremos como leer una parte del mismo. La parte a leer va a estar delimitada por dos etiquetas una de principio y otra de fin. La etiqueta de inicio será / y la de fin será */*.
El código
function extraer(texto, etqini, etqfin) {
let ind0, ind1, parte = '';
ind0 = texto.indexOf(etqini);
if (ind0 >=0) {
ind1 = texto.indexOf(etqfin);
if (ind1>ind0) {
parte = texto.substring(ind0 + etqini.length, ind1);
}
}
return parte;
}
let cadena = 'Esta cadena es la que, /*en el ejemplo*/, se va a procesar';
logger.warn('Cadena: ' + cad);
logger.warn('Cadena extraida: ' + extraer(cadena, '/*','*/'));
Comentarios
En este ejemplo vemos como extraer de un texto una parte delimitada por etiquetas. En primer lugar buscamos la posición de la etiqueta de inicio, etqini , que guardamos en ind0; si existe esta etiqueta (ind0 >= 0) buscamos la etiqueta de final, etqfin , que debe estar después de la de inicio, por eso comparamos (ind1> ind0). Por último extraemos los caracteres comprendidos entre el final de la etqini ( ind0 + longitud de etqini ) y el inicio de la etqfin usando el método substring.
I. Creando Objetos
Enunciado
Vamos a crear un objeto usado para representar un artículo de una tienda. El artículo se va a caracterizar por una descripción, un código y un precio, y debe permitir el cálculo de su correspondiente impuesto.
El código
function impuesto() {
return Math.round(this.valor * 0.21);
}
function total(reb) {
let precio = this.impuesto() + this.valor;
precio = precio - precio * reb / 100;
return Math.round(precio);
}
function obj_articulo(desc, cod, precio) {
this.desc = desc;
this.codigo = cod;
this.valor = precio;
this.impuesto = impuesto;
this.pvp = total;
}
let item = new obj_articulo('Raton PS2', 'PerRt-01', 50);
logger.warn('Artículo: ' + item.desc + ' (' + item.codigo + ')');
logger.warn('Precio: ' + item.valor + ' €');
logger.warn('IVA: ' + item.iva() + ' €');
logger.warn('Precio venta: '+ item.pvp(10)+ ' € (Dto 10%)');
Comentarios
Este ejemplo ilustra como crear un Objeto con sus propiedades y métodos. La función obj_articulo es el constructor del objeto mientras que las funciones impuesto() y total(reb) son métodos para ese objeto. El argumento de la segunda indica un posible descuento.
Estas funciones son simples operaciones aritméticas y no requieren mas explicación. En cuanto al constructor las propiedades ( desc , codigo , valor ) se asignan directamente usando this para referirnos al propio objeto.
Para los métodos se hace exactamente igual pero asignándole funciones ( iva , total ). Tenemos un método que usa argumentos y otro sin ellos, es decir este ejemplo presenta todas las posibilidades en creación de objetos y podría ser la base para crear una lista de la compra una de cuyas propiedades serían un objeto del tipo aquí definido.