APUNTES de HTLM5, CSS, JavaScript, ES5, php, VBA, JAVA
Cuando empecé mi camino en la programación, me dí cuenta que en ocasiones no era tan fácil como creía encontrar apuntes y deseo compartir lo que voy aprendiendo por si a alguien le resulta de utilidad.
Ahora tengo una meta vivir de la programación, poco a poco intento sumar conocimientos y compartirlos con todos vosotros. Por el camino cometeré errores pero tengo las metas muy claras.
Seguidores
MIS WEBS
JavaScript y JQuery
JS ES6 JQUERY
Java Script para html
INDICE
Qué es JavaScript
Es un lenguaje del lado del cliente que utilizaremos para dar interactividad a nuestra pagina web creada con html. Gracias a JS podremos acceder a diferentes partes de nuestro documento y modificarlas, generar imágenes dinámicas, insertar y elimina textos, modificar nuestro CSS, cargar imágenes o páginas, eliminar objetos, mostrar u ocultar cualquier objeto (botones, párrafos, navegadores, artículos, pies de página...)
Un error frecuente es pensar que Java y Java Script son lo mismo. Son lenguajes diferentes y con características diferentes. Mientras que una aplicación creada con java se puede ejecutar en multitud de sitios, una creada con JavaScript tan solo se puede utilizar dentro de una pagina html
Java Script esta pensado para modificar el DON (document object model) de una pagina web y siempre se ejecutará en local y de forma inmediata. Jamas tendrá acceso al servidor para este fin utilizaremos lenguajes del lado sel servidor como pueden ser php, java, ASP, JSP, PERL, Pyton, Ruby...
Es verdad que en la actualidad utilizando la tecnología AJAX ( Asynchrony JavaScript and XML) todo esto está cambiando y podemos realizar aplicaciones con javaScript, que a pesar de seguir siendo del lado del cliente, para ello podemos utilizar framework, como NodeJS, pueden interactuar con nuestro servidor, modificando nuestro DOM sin tener que cargar nuestra página cada vez que hace una modificación. Pero este tema lo tocaremos más adelante.
Características JS:
Es un lenguaje del lado del cliente o Frontend. Se ejecuta en local (dentro de tu ordenador). Recuerda que en la actualidad esto esta cambiando.
Es interpretado: Nuestro ordenador ejecuta sentencia tras sentencia sin tener que compilar.
Es de respuesta inmediata.
Es un lenguaje de alto nivel: Esta más lejos del lenguaje máquina por lo que se acerca más a la lógica humana.
Es orientado a objetos y basado en prototipos o instancias de clase. Existen una gran cantidad de objetos creados que iremos realizando instancias conforme vallamos necesitando.
Es poco tipado, no es muy estricto en la declaración de variables. Podemos declarar una variable de tipo string y luego modificarla a tipo number.
Da interactividad a nuestro html (avisarnos si introducimos un dato incorrecto en un formulario, identificarnos al acceder con login en una página, modificar el color de un texto dependiendo de una acción, modificar los colores nuestra página, realizar animaciones de objetos...).
Es case sensitive : Sus variables y métodos son sensibles a mayúsculas y minúsculas.
Lo podemos utilizar para crear efectos dinámicos.
BUENAS PRAXIS EN JS
Usar snake_case para nombrar archivos, dividimos las palabras con guines bajos
nombre_de_mi_archivo
UPER_CASE para constantes, todo en mayúsculas y separación de palabras con guión bajo-
const NUMERO_PRIMO
UperCamelCase para nombrar Clases, cada palabra empezara por mayúsculas
class MiClaseJavaScript
loweCamelCase la utilizamos para variables, objetos y funciones, la primera palabra irá en minúsculas y el resto en mayúsculas
let miVariableJs;
const miObjetoJs(){.....};
¿Cómo organizar el código js?
Importación de módulos.
Declaración de variables.
Declaración de funciones.
Ejecución de código.
Importación y exportación de módulos en JS (import export)
En ocasiones deseamos importar módulos desde otro archivo js a nuestro archivo js . Así evitaremos tener que importar el archivo entero, tan solo importaremos el fragmento de código deseado.
En primer lugar tenemos que ir a nuestros archivo html y utilizar la propiedad type de nuestra etiqueta script para que el navegador interprete que nuestro archivo principal js puede importar módulos, de lo contrario no dará error.
< script src="amin.js" type="module">
En el archivo origin pondremos la palabra reservada code export delante de la variable, función u objeto que deseamos importar
export let myvar;
export let obj = {
nombre : "david",
PrimerApellido : "Giménez",
SegundoApellido : "Plaza",
edad=43
};
export funcition myFunction(){
code ...
};
Si deseamos que una de nuestras variables se exporte por defecto al importar nuestro módulo la nombraremos como export default
let myvar = "data";
export default myvar;
En el inicio de nuestro archivo js principal tenemos que importar todos los módulos que vamos a a utilizar. Las importaciones de módulos tienen q ponerse en el inicio del archivo. recuerda poner ./ en el archivo para que lo reconozca
import{myvar, obj, myFunction} from "./nombreArchivo.js"
VARIABLES EN JAVA SCRIPT
¿Qué es una variable?
Es un espacio vacío que reservamos en la memoria inmediata (RAM) de nuestro ordenador, para guardar más adelante un tipo de dato, el cual puede cambiar a lo largo de la ejecución de nuestro programa. Los datos que guardemos en es espacio pueden ser de varios tipos: texto, número entero, número decimal, byte, número largo (long), booleano(true, false), array ... Dependiendo del tipo de dato que guarde nuestra variable ese espacio reservado será inferior o superior.
TIPOS DE DATOS EN JS
Primitivos
String: Son variables de texto. El valor de un string tiene que ir entrecomillado " ".
Integer: Son número enteros.
Decimal: Son números decimales.
Booleans: Son variables cuyo valor es Verdadero o Falso o lo que es lo mismo 0 o 1.
Null
Nan: Es un booleano que nos regresa una respuesta a si es número o no el valor de un dato.
undefined
Compuestos
Array: Contiene una lista de valores.
Objetos: Es una variable donde almacenar las diferentes características de una cosa.
function
Class
Ejemplo de objeto en JS
let coche = {marca:'Renault', modelo:'Gran Scenic', plazas:7};
DECLARACIÓN, INICIALIZACIÓN
Declarar una variable
Es darle nombre a un espacio en la memoria del ordenador. Para declararla utilizaremos la palabra reservada let y acto seguido el nombre que deseemos darle para finalizar con ; let NombreVariable;
Todo esto ha cambiado con la entrada de ECMAScript6 al aparecer let y const que controlan el scope de nuestras variables y generan constantes.
Iniciar una variable
Es darle un valor a la variable. Podemos iniciar la variable en la misma línea que se declara o iniciarla más adelante.
Formas de declarar:
let nombreVarialbe;
Otra forma
let var1, var2, var3;
Formas de iniciar variables:
En línea:
let nombreVarialbe = 150;
Otra forma
let varTexto = "esto es un String", let Num = 150, varBoleana = true;
Iniciar una variable tras haberla declarado:
let Mivariable;
MiVariable = 15559;
¿Qué es una sentencia en JavaScript?
Una sentencia es una instrucción que le damos al ordenador para que realice una acción, este fragmento de código finalizará con un punto y coma. Un programa es un conjunto de instrucciones (sentencias) generadas en un orden determinado.
Nuestro navegador leerá nuestro programa JavaScript de arriba hacia debajo.
Valores verdad y falsedad (truthy and falsy)
Cuando una variable guarda en ella una dato verdad o trythy es que esta guardado un tipo de dato para el que está pensada( String, número, array, object...). Una variable contiene un valor fallido o falsy (Nan , 0, string vacío, nulo, no esta definida...) cuando recibe un valor para el que no está diseñada o se ha declarado pero no tiene valor.
falsy :
0
NaN (Not a number)
""
undefined
null
false
truthy :
string no vacío
Número diferente a cero
array
objeto
Ámbito de variables JS
Qué es el encapsulamiento o scope (alcance) en JavaScript
Una de las propiedades de la programación orientada a objetos es la encapsulación, esta propiedad hace que podamos crear una variable y hacerla accesible a un bloque determinado de código o a todo el código de nuestro programa, en JS la encapsulación es conocida como scope (alcance). La encapsulación en javaScript es muy utilizada, recuerda que hoy en día existen miles de librerías externas (JQuery, fancyBox, electron, Morris...) que podrían generar conflicto con variables nombradas en tu código. Por esa razón es tan importante restringir el ámbito de tus variables. Dependiendo de nuestras necesidades restringiremos en mayor o menor medida su ámbito.
Hasta la llegada de ECMAScript 6 tan solo teníamos una forma de nombrar variables. Con la palabra reservada var. Con la llegada de ES6 llegaron las funciones flecha y las variables let y const.
Ámbito de las variables
VARIABLES LOCALES: Se definen dentro de una función y su uso se restringe al espacio entre { y } de nuestra función. Para crearlas utilizaremos la palabra reservada var o let. Si intentamos llamar a esa variable fuera de la función nos cargará un fallo de undefined, debido a que esa variable no existe fuera de la función, esta encapsulada o bajo es scope:
function miFuncion(){
let mivarible = 10;
}
VARIABLES GLOBALES: Son aquellas que pueden ser leídas y modificadas en cualquier parte del programa. Para ello no están encapsuladas en ninguna función. Se declaran en el bloque central de código del programa utilizando la palabra reservada var.
VARIABLES GLOBALES AUTOMÁTICAS: Cuando no ponemos delante de de una variable la palabra reservada para nombrarla ( var , let , constant ) esta será accesible desde cualquier parte. myVar="Variable";
CONSTANTES: Aparece en la evolución ES6 (ECMAScript 6). Se nombraran con la palabra reservada const y tienen la cualidad que una vez iniciada no se puede modificar. Si bien es verdad que a una constante array pueden añadírsele registros, estos nunca se podrán eliminar.
VARIABLES DE BLOQUE Aparece en la evolución ES6 (ECMAScript 6): en ocasiones nos puede ser necesario generar una variable dentro de un bucle, en un condicional o en una función dentro de otra función en ese acaso es conveniente utilizar let o const.
Nuestras variables creadas con let tienen el scope a nivel de bloque de código, por lo que si declaramos un let dentro de un bucle for o while se quedará encapsulada en ese fragmento del código.
function miFuncion(){
let objCoche={
ruedas : 5,
marca:"Renault",
modelo:"Clio"
}
if(coche["ruedas"] == 5){
let variable = coche.ruedas + 2;
document.write(variable);
}
code ...
}
Diferencias entre variables JS (var) y ES6 (let const)
Una variable creada con let es imprescindible iniciarla.
Tanto las funciones let como const no pueden ser nombradas nuevamente dentro de su ámbito. Mientras que las variables nombradas con let podían duplicarse y crear conflicto let y const no actuarán de la misma forma.
let variable = "xxx";
code...
let variable = "yyy";
Podría generar conflicto en nuestras variables por sobre escritura pero el programa lo admite. Esto no lo permite let y const.
let y const son variables de bloque. Esto nos permite utilizar el mismo nombre de variable en todos nuestro if o for sin que generen conflicto. Cuando programas es normal utilizar nombres como comparador, contador, suma, text... así no te tienes que preocupar de que puedan sobrescribirse al tener el scope en el bloque de código.
Una variable const una vez iniciada no se pueda cambiar, salvo en el caso de los arrays a los que se les puede incluir registros pero nunca eliminarlos.
Objetos Console y window.
En JavaScript tenemos una serie de instrucciones básicas que podremos utilizar para modificar textos, sacar ventanas emergentes...
window.alert("mensaje");
Nos aparecerá un mensaje en una ventana emergente con el texto que le indiquemos, esta acción interrumpirá el flujo de ejecución de nuestro programa hasta que le demos al botón de aceptar.
window.confirm()
Nos cargará una ventana emergente con dos opciones (Aceptar y cancelar), nosotros podemos guardar el resultado (true o false) dentro de una variable para posteriormente poderlo utilizar en un if.
let aviso = window.confirm("DESEAS ELIMINARLO");
window.prompt("Texto para solicitar el dato")
Es uan ventana de entrada de datos a nuestro programa. Nos aparecerá una ventana emergente en la que nos solicitará que introduzcamos un dato. Igual que el alert detendrá el flujo de ejecución hasta que lo completemos,
document.write("texto");
Introducirá texto u html con textos en el html. Esta etiqueta esta desaconsejada, podemos hacer un uso puntual de ella pero no utilizar de normal.
document.selectorDOM.innerHTML
Lo utilizaremos para introducir u obtener textos de nuestro DOM.
Obtener texto de un documento html y guardarlo en una variable:
let myVariable= document.getElementById("id").innerHTML;
Cuenta el número de la vuelta del bucle que se carga el dato.
console.log("mensaje")
Introducirá mensajes en nuestra consola del desarrollador, es muy útil pata depurar código o generar pruebas (Ctrl + ↑ + i)
console.info("mensaje")
Introduce un mensaje de información en la consola de depuración.
console.time("mensaje") y console.timeEnd("mensaje")
Lo podemos utilizar para crear pruebas de testing en aplicaciones iniciará un cronometro con console.time() y finalizará nuestro cronometro con console.timeEnd(). Nos devolverá el tiempo en mili-segundos transcurrido entre uno y otro.
console.time("texto temporizador");
let myArray = Array(1000000);
for(let i=0; i myArray.lenght ; i++){
myArray[i] = i;
}
console.timeEnd("texto temporizador");
console.error("mensaje")
Introduce un mensaje de error en la consola de depuración.
console.warn("mensaje")
Genera un mensaje de warning en nuestra consola de depuración de código.
console.dir(objJS)
Nos genera un árbol indicándonos todas las partes de nuestro objete generado con JavaScript.
console.table(array/objLiteral):
Nos muestra un tabla en la consola con los datos de nuestro array.
console.table(["Ramón","Francisco","Esther","Rocío","Julio"]);
/////****Con un objeto literal **********////////
let miObjD = (nombre, Apellido, Edad) => {
return {
nombre, Apellido, Edad,
getData(){
return `Buenos Días ${nombre} ${Apellido} como estas a tus ${Edad} años `
}
}
}
console.table(miObjD("David", "Giménez Plaza", 42));
Ejemplo de instrucciones de entrada y salida de datos ↓↓↓↓↓↓
La refundición de un objeto es modificar el tipo que contiene. JS suele hacer esto de forma automática. Podemos declarar una variable string y más adelante introducir un numero. JavaScript es un lenguaje poco tipado, eso quiere decir que no es muy estricto con el tipo de dato que guarda el objeto. Pero en alguna ocasión es posible que nos toque modificarlo a mano. Para refundir un objeto de String a integer utilizaremos la función parseInt() y le pasaremos por parámetros la variable. parseInt(var);
Existen otro lenguajes fuertemente tipados como puede ser Java donde la refundición de objetos es algo común. Es más se convierte en algo imprescindible.
Si lo que deseanos es refundir number a String utilizaremos el método toString() number.toString();
Existe una función de JS que nos puede resultar útil en estros casos typeof(). Nos regresará el tipo de dato de la variable que le pasemos por parámetro. ejm de uso:
Imagina que introduces un número por un prompt, recuerda que el input emergente guarda los datos como String. Pero luego necesitas sumar dos números introducidos por un prompt.
<script type="text/javascript">
let num1 = prompt("introduce num1");
let num2 = prompt("introduce num2");
alert("El resultado es : " +
(parseInt(num1)+parseInt(num2))
);
</script>
También son conocidos como arreglos o matrices. Es una variable compuesta por un conjunto de valores ordenados en lista, cuando necesitemos acceder a un valor entraremos en la posición en la que lo tengamos guardado (referencia) y lo extraeremos. Los arrays de JS se diferencian de los de otros lenguajes de programación en que los datos almacenados no hace falta que sean del mismo tipo.
Existen dos tipos de variable unidimensionales y multidimensionales.
Formas de declarar arrays en JavaScript
Esta es la forma más habitual y mejor de hacerlo:
Podemos declararla y luego iniciarla: let Mivariable = []; Mivariable = [1, 2, 3, 4, 5];
Podemos declararlo e iniciarla al mismo tiempo:
let Mivariable = [1, 2, 3, 4, 5];
Otra forma sería declarar un objeto array utilizando la palabra reservada new y poniendo los valores entre paréntesis. Esta ultima forma puede dar problemas en algunos navegadores..
let Mivariable = new Array(1,2,3,4,5,6);
Recuerda que si los valores son String van entre comillas.
let Mivar = ["Texto", "otro", "otr mas"];
Cómo recuperar un valor guardado en un array
Para recuperar un valor tendremos que acceder a la posición en la que lo guardamos. El indice o referencia de un array iniciará en la posición cero por lo que si deseamos recuperar el segundo elemento le solicitaremos la posición 1.
En el siguiente ejemplo declararemos un array de 5 posiciones con valores String y recuperaremos todos los elemento uno por uno.
Nos indicará la longitud que tiene nuestro array. Resultará muy útil para recorrer arrays. MiVar.length;
Método
find(callback( element, index, array))
Nos regresa el primer elemento del array que cumpla con una función que le pasmos por parámetros como callback.
let arr = [1,2,6,9,8,7,10,98,20,1,89];
console.log(arr.find((element, index, array)=> element > 9
));
let arr = [1,2,6,9,8,7,10,98,20,1,89];
console.log(arr.find((element, index, array)=>{
return element > 9
}
));
push(value);
Agregara un elemento o varios elementos al final del array.
MiVar.push("uno", "dos", "tres", "cuatro");
Podemos utilizar un pront para llenar nuestro array desde una ventana emergente.
<script type="text/javascript">
let MiArray = [];
MiArray.push(prompt("Introduce un registro"));
</script>
unshift(values)
Agregaremos uno o varios elementos al inicio de nuestro array
MiVar.unshift("uno", "dos", "tres", "cuatro");
pop()
Elimina un registro del final del array. MiVar.pop();
Si igualamos pop() a una variable eliminará la última posición del array y la guardará en la variable que hemos seleccionado.
let copiador = MiVar.pop();
shift()
Elimina un registro del principio del array
MiVar.shift();
En el caso que igualemos nuestro método shift a una variable este eliminará el primer registro y lo guardará en nuestra variable.
let copiador = MiVar.shift();
.map(function(arrayPasado){return operación con array})
Está pensado para realizar una copia de un array y realizar una operación con el mismo. Imagina que tenemos un array de precios y deseamos duplicar el precio de los productos.
let miArray2=[4,6,9,7,8,6,3,8];
let miArray3= miArray2.map(function(x){return x*2});
$("#dos").append(miArray3[2]);
/*Nos imprime en el id 2 la posición 3ª del array
y multiplica su resultado por dos******/
/*******resultado 18*****/
let numeros = [100,10,1,2,3,300,5,9,1,8,6,7,1];
console.log(numeros.map(valofigurer => Math.pow(valor,2)));
delete nombreArray[position]
Elimina el registro de la posición que le pasemos por parámetros, dejando esta posición vacía (undefined). Los métodos pop y shift eliminan la posición completa mientras que delete tan solo borra el dato almacenado en ella.
.sort()
Lo utilizaremos para ordenar un array de forma descendente o alfabética. miArray.sort();
Otra forma podría ser la siguiente miAray=["x","b","a"].sort() //resultado ["a","b","x"]
Si lo que deseamos es realizar una ordenación de números tenemos que utilizar un algoritmo de ordenación(a,b) => a-b; el resultado sería el siguiente.
let numeros = [10,1,2,3,5,9,1,8,6,7,1];
console.log(numeros.sort((a,b)=>a-b));
reverse()
invierte el orden de un array.
Array.isArray(VarEvalua)
Nos regresará un true si la variable es una array y un false en el caso de que la variable no sea un array.
(variable instanceof Array)
Nos regresará un true si la variable es una array y un false en el caso de que la variable no sea un array.
.toString
Convierte un array en cadena de texto mostrando los datos guardados en las posiciones separados por comas.
split(string)
Genera un array de cadenas, le pasaremos por parámetros un string, cada vez que se encuentre con este string el método lo eliminará y partirá la cadena guardándola en una nueva posición del array.
let mitexto = "esto es un texto de js ";
console.log(mitexto.split(""));
console.log(mitexto.split(" "));
console.log(mitexto.split("e"));
/***resultado por consola***/
[ 'e','s','t','o',' ','e','s',' ','u','n',' ','t','e','x','t','o',' ','d','e',' ','j','s',' ' ]
[ 'esto', 'es', 'un', 'texto', 'de', 'js', '' ]
[ '', 'sto ', 's un t', 'xto d', ' js ' ]
join(string /array[])
Convierte una array en cadena de texto y entre posición y posición escribirá el string pasado por parámetros. También podemos utilizarlo para convertir en un array de cadenas en un testo único.
texto2 = ["texto 1 ", mitexto, " texto 3", " texto 4"];
console.log(texto2.join(""));
console.log(texto2.join("__*****___"));
///****resultado en consola****///
texto 1 esto es un texto de js texto 3 texto 4
texto 1 __*****___esto es un texto de js __*****___ texto 3__*****___ texto 4
filter(callback())
Genera un nuevo array en el que almacena aquellos elementos del array actual que cumplan las condiciones del callback.
<script type="text/javascript">
let MyArray =["Block", "de", "CVDGP"];
/* añadimos registros al array*/
MyArray.unshift("Este","es","el");
/*Elimina el ultimo registro*/
MyArray.pop();
/*conversión a string*/
document.write("------RESULTADO---<BR>")
document.write("Esto es toString : "+ MyArray.toString()+ "<br>");
document.write(" Esto es join: <br> "+ MyArray.join("<br>"));
document.write("La variable MyArray es un array?: "+ Array.isArray(MyArray)+ "<br>");
document.write("La variable MyArray es un array?: "+ (MyArray instanceof Array) + "<br>");
</script>
Cómo pasar un array por parámetros
Con este ejemplo de función podemos crear una tabla con dos filas, crear dos arrays y luego pasárselo por parámetros a nuestra función junto con el id del tbody en el que deseamos insertar los registros.
function Tabla2Filas(Array_1 =[], Array_2 =[], IdCaja){
for (let i = 0; i < Array_2.length; i++) {
let Nodo= $("<tr></tr>")
.append(
"<td>" + Array_1[i] +"</td>"+
"<td>" + Array_2[i] + "</td>"
);
$(IdCaja).append(Nodo);
}
}
Diferencian entre forEach , find, map y filter
Existen varias formar de iterar con arrays y en ocasiones todas nos parecen iguales, pero la verdad es que existen pequeños matices entre unos métodos y otros. Según nos interese utilizaremos un método u otro
find
Nos regresará el primer elemento que cumpla los parámetros del callback
let arr = ["David", "Pedro", "juan", "manuel", "David"];
console.log(arr.find((element)=> element.includes("n") ));
/***nos regresa juan que es el primer elemento que contiene n****/
forEach
Itera por cada uno de los elemento del array ejecutando una acción pasa por el callback
let arr = ["David", "Pedro", "juan", "manuel", "David"];
arr.forEach((item)=>{
(item.includes("n"))
? console.log(item)
: console.log(`${item} ...... no contine n`)
});
map
Crea un nuevo array en el que carga los datos modificados por el callback
let arr = [7,8,5,41,256,3,6,9,88,774,5,82,3,58];
const arr2 = arr.map(((item)=>item*10));
arr2.forEach((i)=>console.log(i));
filter
Crea un nuevo array en el que carga aquellos datos que cumplan la condición pasada por callback
POO o programación orientada a objetos, proviene del ingles OOP (Object Oriented programming) y es un paradigma de la programación en el que vinculamos cada parte de nuestros programas a objetos. Buscando esta similitud con la vida real conseguiremos de dar un sentido a algo tan abstracto como es programar.
Existen dos grandes grupos de lenguajes de programación: orientados a objetos y orientados a procedimientos
En JavaScript tenemos varios tipos de objetos
Datos primitivos
String
Number
Boolean
Undefined
Null
Objetos nativos:
String
Number
Boolean
Data
Math
RegExp
Array
Function
Object
Objetos de alto nivel (son los que dependen del navegador)
window
Screen
Navigator
Location
History
Document
Propiedades y métodos
Un objetos es una entidad compuesta de propiedades y métodos:
Propiedades: Son las variables que tiene nuestro objeto Como es (altura, precio, precioConIva, edad...)
Métodos: Son las funciones setter y getter que tendrá nuestro objeto. ¿que es lo que puede hacer? (ObtenvelocidadActual, EstablecesaldoDeLaCuenta, getEdadActual...)
Instanciar
Los objetos son moldes que luego tu personalizaras a tu gusto. JS tiene un objeto llamado button, este objeto tiene una serie de características por defecto que tu podrás modificar para personalizarlo. Crearemos una variable con un objeto del DOM en este caso seleccionaremos nuestro id para escoger el botón. Esta variable que apunta al objeto botón es una instancia.
En este caso Boton1 es una instancia del objeto con id MiBoton
Nomenclatura del punto para acceder a los atributos de un objeto
Imagina que tu tienes un botón de formulario y deseas modificar el alto y el ancho o el color (propiedades) o llamar a un método. Por supuesto esto lo podrías hacer con css, pero imagina que deseas hacerlo con JS. Accedemos al objeto, luego colocamos un punto y el atributo a modificar. Ejemplo
let gato = new Object();
gato.nombre = "Peluche";
gato.raza = "Angora";
gato.edad = 15;
gato.peso = 10;
Definir un constructor y crear objetos del tipo definido
function mascota(nom,raz,ed,kg){
this.nombre = nom;
this.raza = raz;
this.edad = ed;
this.peso = kg;
}
let Peluche = new mascota("Peluche","angora",15,10);
let Julio = new mascota("julio", "Gato común europeo", 18, 15);
Objeto Date
El objeto date es utilizado para generar variables de tipo fechas y horas. Para generar una fecha podemos utilizar los siguientes constructores:
Constructores New Date
/*
Ten en cuenta que los valores inician en 0:
meses 0 Enero; 1 Febrero, 2 Marzo, 3 Abril ...
días semana : 0 lunes , 1 martes, 2 miércoles....
*/
let fecha = new Date(); // fecha de hoy
let fecha = new Date(mili segundos); //mili segundos transcurridos desde 01/01/1970
let fecha = new Date("Date in String");
let fecha = new Date("yyyy-mm-dd");
let fecha = new Date("yyyy-mm-ddThh:mm:ss");
let fecha = new Date("yyyy/mm/dd");
let fecha = new Date(año, mes, dia);
let fecha = new Date(año, mes, día, hora, minutos, segundos);
En el siguiente ejemplo vamos a calcular los años que tiene una persona, solicitaremos con un prompt la fecha de nacimiento con formato año-mes-dia y nos regresará una alert con los años que tiene nuestro usuario. Podemos utilizar esta función para cualcular si un usuario es mayor de edad en un formulario
En primer lugar necesitaremos la fecha actual: let hoy = new Date();
Ahora calcularemos cuantos milisegundos tiene un año, ten en cuenta que para cualcular fechas tiene que transformar el objeto fecha en número, para ello utilizaremos el método getTimeDate() y este método no regresa la fecha en milisegundos:
1 sec= 1000 miliseconds
1 min = 1 seg * 60
1 h = 1 min * 60
1 day = 1h * 24
1 month = 1 day * 30
1 year = 1 month * 12
diferencia años = X milisec / (1000*60*60*24*30*12)
Ya tan solo queda restarle a la fecha de hoy la fecha nacimiento y tendremos los años del usuario:
let difDate = hoy.getTime() - fechaNacimiento.getTime();
Así sería el código completo:
function years (fechaNacimiento) {
fechaNacimiento = new Date(fechaNacimiento);
let hoy = new Date();
const yearInMiliseconds = (1000 * 60 * 60 * 24 * 30 * 12);
let difDate = hoy.getTime() - fechaNacimiento.getTime();
return alert(Math.round(difDate / yearInMiliseconds));
}
years( prompt("Dime cuando naciste yyyy-mm-dd"));
Objeto Window
El objeto window es la ventana que nos muestra nuestro navegador y donde se carga nuestra pagina web o documento con nuestro DOM. Es la pagina completa con el menú, barras de scroll,documento, navegador, historial etc. Cada vez que cargamos una página web abrimos un nuevo objeto window implementando la interface Window, cada pestaña de nuestro navegador sera una nueva ventana. Bajo esta super clase existen objetos hijos tan importantes como:
window.document
forms
input text
input button
input textarea
input checkBox
input checkRadius
input select
option
option
option
option
input hidden
input email
input url
anchor
image
link
applets
embeds
layers
plugging
window.navigator
window.screen
window.history
window.location
Propiedades del obj Window
Window.closed
Nos regresará el estado de nuestra ventana. False representa que nuestra ventana esta abierta, mientras que true nos indica que la venta esta cerrada.
window.document
Creará una lista con el elemento del DOM que le indiquemos.
let docu = window.document;
console.log(docu.body);
window.innerHeight
Nos regresará el alto de la ventana, desde la barra menú hasta la barra de scroll.
window.innerWidth
Nos regresa el ancho de la ventana sin incluir las barras de scroll.
window.length
Nos mostrará el número de iframe o frame abiertos en esta ventana.
Creará una nueva ventana, existen diferentes constructores para open, uno de ellos es poner tan solo la URL ( MyWindow.open("https://google.es") ). Si deseamos abrir una ventana nueva que no apunte a ninguna página existente lo haremos así : myWindow.open("","","") Esto crearía una ventana en blanco.
let ventana1;
$(".abrir").click(function(){
let especificacionesVentana1 =
"width =250, height=250";
let URl = "";
ventana1=window.open(URl, "Ventana_1",especificacionesVentana1);
ventana1.document.write(
"<!DOCTYPE html>"+
"<html lang='es'>"+
"<head>"+
"<title>ejemplo open</title>"+
"<meta charset='utf-8'>"+
"</head>"+
<body>" +
"<h1>Ventana hecha con método open() de JS</h1>"+
"</body" +
"</html>"
);
ventana1.moveTo(500,200);
});
.close()
Cerrará la ventana determinada.Le indicaremos el objeto que deseamos cerrar un punto y la instrucción close. Ventana_1.close();
Si lo que deseamos cerrar es la ventana en la que se encuentra el foco la instrucción seria: window.close();
.moveTo(x,y)
Sitúa el objeto ventana que le indicamos x pixel a la derecha e y pixel hacia abajo. Desde la esquina superior izquierda de nuestra pantalla.
.moveBy(x,y)
Desplaza el objetos desde el punto actual donde esta situado. X pixel a la derecha e Ypixel hacia abajo.
.scrollBy(x,y)
Desplaza las barras de scroll desde el punto actual
.scrollTo(x,y)
Desplaza las barras de scroll a un punto determinado.
.focus()
Este método hará que el foco se posicione en nuestra ventana que haga la llamada a este método. En este ejemplo deseamos que foco se ponga en el objeto window myVentana: myVentana.focus();
.print()
Imprimirá lo que existe en la ventana que le indiquemos.
.resizeBy(width,height)
Redimensionar el tamaño de nuestra ventana la cantidad de pixel que le indiquemos por parámetros. Cuando redimensionamos el tamaño de un objeto lo que estamos haciendo es aumentar o disminuir su tamaño, por lo que el ancho y alto que le pasamos por parámetros es el ancho y alto que aumenta o disminuye. Para aumentar pasaremos números positivos y para disminuir pasaremos negativos.
En el siguiente ejemplo tenemos unos botones con la clase remenMas para aumentar y redimenMenos para disminuir. Cuando hacemos click en ellos aumentará o disminuirá nuestra ventana.
Redimensiona la ventana al ancho y alto que nosotros le indiquemos. Por lo que pasa a tener el tamaño que le pasemos por parámetros.
.print()
Imprimirá la página actual
Cuadros de dialogo
.confirm("String a confirmar ")
Saltará un ventana de confirmación, con un texto y un boton de aceptar y otro de cancelar. Podemos utilizar estos botones para obtener respuestas de confirmación (imagina que tienes que eliminar un registro, preguntaremos con un confirm al usuario si desea eliminar el registro.
<script type="text/javascript">
$("#cuADRO").click(
function(){
let cuadroConfirm=confirm("Esto es una cuadro confirmación");
(cuadroConfirm) ?
alert("Has pulsado Verdadero") :
alert("has pulsado Cancelar");
});
</script>
.alert("string")
Saldrá una ventana emergente con el mensaje que le pasemos por parámetros.
.prompt("window String", "input String")
Lo utilizaremos para introducir datos en el sistema por una ventana emergente. Nos aparecerá un cuadro de texto con un input type text dentro y un boton. El dato lo almacenaremos en una variable. let xxx = prompt("dime tu number"); Así sería el código para almacenar un prompt y después cargarlo en un contenedor
<script type="text/javascript">
$("#ejmprompt").click(function(){
let xxx = prompt("what's your number");
if(xxx != null){
document
.getElementById("EjemploPrompt")
.innerHTML=
" Tu nombre es " + xxx;
}
});
</script>
Métodos para eventos temporales
.setTimeout(function, mili segundos)
Tiene dos parámetros el primero será la acción a realizar, y el segundo el intervalo de tiempo en mili segundos que se detiene para realizar la.
$(".redimenMas").click( function(){
function aumenta(){ventana1.resizeBy(10,10);}
setTimeout(aumenta, 200);
ventana1.focus();
});
.clearTimeout(variable)
Detiene la acción desencadenada por un método setTimeout(), para poder hacerla tenemos que asignar el setTimeout a una variable let EstableceParada = setTimeout(aumenta, 200) y ahora se lo pasamos a nuestro método, clearTimeout(EstableceParada);
.setInterval(función, mili segundos)
Repetirá la función pasada por parámetros cada x mili segundos pasados por parámetros.En el siguiente ejemplo crearemos un reloj con minutos y segundos. Si deseáramos detener el flujo d ejecución de nuestro reloj podríamos incluir un botón con una función crearTimeout().
Storage es un objeto hijo de window creado en html5, lo utilizaremos para generar cookies de forma segura y soportada por los navegadores actuales. Este objeto permitirá almacenar datos del usuario en el navegador. Podemos utilizarlo de dos formas:
localeStorage:Para almacenar datos sin fecha de expiración.
sesionStorage:Almacenará datos hasta que expire la sesión, cuando cerremos la ventana o el navegador desaparecerán nuestro datos almacenados.
Cómo confirmamos que nuestro navegador soporta Storage
Ejemplo de Guardado de datos con setStorage y getStorage
En el siguiente ejemplo, si pulsas el boton on-of, te saltará un cuadro de dialogo en el que introduces un texto, este texto se guardará en un storage y lo imprimirá en pantalla.Cuando pulses una segunda vez el boton, se borrará el webStorage y el boton quedará en rojo para que nos loguemos. He utilizado javaScript en todo el código menos en la modificación del color de los objetos svg que me daban problemas y opte por Jquery que suele dar menos al estar más testado.
Este objeto representará la pantalla de nuestro usuario, las propiedades de la pantalla del usuario puede resultar útil para que JS modifique la distribución de la pantalla dependiendo de su tamaño (movil, pc, tableta).
screen.width
Ancho pantalla del usuario.
screen.availWidth
Es el ancho de la pantalla menos la barra de menús windows si esta puesto en posición horizontal.
screen.height
Es el alto de la pantalla del usuario
screen.availHeight
Es el alto de la pantalla menos la barra de menús windows
screen.pixelDepth
Regresará la resolución de nuestra pantalla.
let pantalla ="<div style= 'background:grey; color:brown; padding:10px; margin-top:25px; width:25%;' >";
pantalla +="<br> El alto pantalla con barras es : " + screen.height;
pantalla +="<br> El alto pantalla sin barras es : " + screen.availHeight;
pantalla +="<br> El ancho pantalla con barras es : " + screen.width;
pantalla +="<br> El ancho pantalla sin barras es : " + screen.availWidth;
pantalla +="<br> La resolución de tu pantalla es: " + screen.pixelDepth + " bits por pixel";
pantalla += "</div>";
document.getElementById("MIpantalla").innerHTML= pantalla;
Objeto History
Este objeto de JavaScript almacenará un historial de las URL visitadas por el usuario dentro de la hoja del navegador abierto en este momento.
Unica propiedad de History
length: Nos regresa el número de ventana abierta dentro de nuestra hoja.
Métodos history
.back()
Regresa a la pagina anterior en el historial
.forward()
Regresa al puesto anterior al back.
.go(num | url)
Nos envía a una página concreta del buscador. Si le indicamos una URL nos mandará a esa en concreto, si le indicamos un número positivo irá hacia delante un número determinado de páginas, si le indicamos un número negativo retrocederá el número determinado de páginas.
OBJETO LOCATION
Nos permite recabar información de la URL insertada en este momento. Recargar la o insertar en ella datos.
Propiedades
reload()
Recarga la página actual. location.reload()
replace()
Sustituye una página por otra y la anterior desaparece del historia por lo que no podremos volver atrás.
assign()
Cargará una nueva página.
Cómo crear Objetos propios en JS
Un objeto se genera con una variable objeto de JavaScript también conocida como literal. Un objeto tiene propiedades y métodos por lo que nuestros objetos propios también los tendrán.
Comparadores de condición, iteradores y caracteres especiales o de escape
CARACTERES DE ESCAPE
En ocasiones nos interesa darle una instrucción a javaScript dentro de un String o cadena de texto, como que unas comillas no las interprete, que realice un salto de línea, para ello se han creado una serie de carácteres comodín que llamaremos caracteres de escape, estos caracteres no son interpretados por el programa de forma líteral sino como una instrucción para que realice algo. Aquí os dejo una lista de algunos:
Tabla Caracteres Escape
Operador
Uso
Comparadores entre expresiones o variables
Cuando comparamos dos variables es importante saber que símbolos dan igualdad entre ellos, mayor que el otro, igual tipo y valor, diferente que ...
Tabla de Operadores
Operador
Uso
En el siguiente ejemplo utilizaremos el comparador % para ver si obtenemos un número entero o no:
Una condicional es una pregunta con dos posible respuesta verdadero o falso. Un condicional If analizará si se cumple la condición dada, en caso de que así sea entrará en el código, en caso contrario pasará a evaluar la siguiente y si no se cumple ninguna condición entrará en el else.
Sintaxis del if
Un if puede combinarse con un else para que en caso de que no se cumpla la primera condición entre en la otra.
if(condicion){
código...
}else{
código...
}
Si deseamos encadenar mas de un if utilizaremos else if(condición), esta instrucción valorará cada uno de los else if y accederá a cada uno de ellos que cumpla la condición. En caso de no cumplirse ninguno accederá al else
Es una forma de usar un condicional de forma más sencilla. Con el operador ternario podemos valorar una condición y en caso de ser verdadera hacer una cosa y cuando la condición no se cumpla hacer otra cosa. Este operador ternario es utilizado también en otros lenguajes como PHP.
let resultado=10;
let num1=parseInt(prompt('num1'));
let num2=parseInt(prompt('num2'));
(resultado==(num1+num2)) ?
alert("verdadero") :
alert("falso");
Operador de corto circuito
El operador de corto circuito evalua dos condiciones, en caso de que se cumpla se quedará con la que le indiquemos.
|| : Evalúa el primer dato si es incorrecto el resultado será el segundo.
&& : Evalúa el segundo dato si es incorrecto nos regresará el primero.
En el siguiente ejmplo creamos una variable y no le damos valor inicial por lo que al ser llamada nos daría un fallo de undefined al no terner valor dentro.En el siguiente ejmplo se imprime en consola 2:
let one;
let two = one || 2;
console.error(two);
En el siguiente ejemplo evalua el segundo elemento y si es false regresa el primero.
let one;
let two = 2 && one;
console.error(two);
Bucles JavaScript
Existen dos grandes grupos de bucles los determinados en los que sabemos cuanto falta hasta que se cumpla la condición y los indeterminados en los que le indicaremos que continue realizando nuestro fragmento de código mientras se cumpla nuestra condición:
Instrucciones break y continue
break
Hará que salgamos del bucle.
continue
Saltará una iteración o vuelta de bucle.
Determinado:
for
forEach
forIn
forOf
Indeterminado:
While
Do While
switch
switch
Para mí es el bucle perfecto para evaluar varias condiciones en lugar de encadenar muchos if, pero para gustos los colores. Le indicaremos una variable y diferentes posibilidades a evaluar. Si encuentra una que cumpla la condición accederá a ella y saldrá del bucle, en caso contrario hará lo que le indica el default. Tiene la ventaja sobre el if en que evalua una única condición no todas.
switch(var){
case xxx:
code...
break;
case yyy:
code...
break;
case uuu:
code...
break;
default:
code...
}
Si lo que deseamos comparar son números con rangos entre y, tenemos que tener en cuenta una serie de cosas:
Al utilizar un prompt por defecto el dato introducido se crea como String y nosotros necesitamos un número. por lo que tendremos que hacer una refundición.
Como condición del switch le indicaremos que mientras sea verdadero.
var Edad = parseInt(prompt("Dime tu edad"));
switch(true){
case (Edad <18&& Edad >0):
document.write("eres menor de edad");
break;
case (Edad >=18&& Edad <30):
document.write("eres adolescente");
break;
case (Edad >=30&& Edad <65):
document.write("estas en plena etapa laboral");
break;
default:
document.write("Estas jubilado ");
break;
}
While
Se repetirá el código mientras que se cumpla la condición establecida.
while(condicion){
code...
}
Ejemplo de while. Vamos a recorrer un array con un while
let diasSemana= ['lunes', 'marte', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
let contador = 0;
while(contador<diasSemana.length){
document.write(diasSemana[contador] + "<br>");
contador++;
}
Do While
Se ejecutará el código hasta que se cumpla condición. La diferencia con while es que do While ejecuta el el código como mínimo en una ocasión debido a que la condición se evalúa al final.
Sintaxis:
do{
code...
}while(condición);
En el siguiente ejemplo crearemos un número aleatorio entre 0 y 100. Luego crearemos un prompt para introducir un numero y el programa examinará si es igual al nuestro, en caso contrário mirará si es inferior o superior y nos lo indicará hasta que acertemos.
//creamos una variable donde introducimos un número aleatorio entre 0 y 100
let MiAleat= Math.round(Math.random()*100);
//contador de intentos
let Intentos=0;
do{
//prompt o venta input de datos
let MiNum = prompt("Introduce un número entre 0 y 100", "número");
if (MiNum>MiAleat) {
alert("Introduce un número inferior");
} else if (MiNum < MiAleat) {
alert("Introduce un número mayor");
}
Intentos++;
}while(MiAleat!=MiNum ); //Mientras que aleatorio sea diferente de mi num Ejecuta código
alert("Has salido del bucle el número es correcto, te ha costado " + Intentos + " intentos" );
En el siguiente ejemplo solicitamos el password al usuario. En la primera vuelta de bucle aparecera un prompt para llenar la variable pass, y no saldrá del bucle mientras que sea diferente a la de passwordCL o cumpla 3 intentos.
let passworCL= 'CVDGP', pass;
let contador=0
do {
pass= prompt("Introduce password");
contador++;
if(contador>2) {
alert("No has acertado el password");
break;
}
if(pass===passworCL) alert("okkkkk");
}while(pass!==passworCL);
Bucle for
Repetirá el código un número determinado de veces, es uno de los bucles más utilizados en todos los lenguajes de programación
for (let i = 0; i >= valor; i++) {
code...
}
Ejemplo básico de for. Le diremos que imprima 10 veces el texto:
for(let i = 0; i<10; i++){
document.write("<p> Repetición " + i + " del bucle </p>");
}
Recorrer un array con un for y regresar solo los valores pares (i+=2):
let MiArray = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
for (let i = 0; i < MiArray.length; i++) {
document.write(MiArray[i]+ "<br>");
}
Resultado en consola:
En el siguiente ejemplo le iremos introduciendo por un pront Números de tel. esos números se irán guardando en un array. Cuando introduzcamos la palabra clave fuera en el prompt este saldrá del bucle e imprimirá todas las palabras.
let telefonos = []; //declaramos arry vacío
let nTel = ""; //String vacío
//mientras que el dato introducido en el prompt sea diferente a fuera.
while(nTel!= "fuera"){
let nTel = prompt("introduce tel", "fuera");
// inserta valor al final del aray
telefonos.push(nTel);
}
// método pop() para borrar el ultimo registro (fuera)
telefonos.pop();
//hasta final del array...
for (let i = 0; i < telefonos.length; i++) {
document.write(telefonos[i] + "<br>");
}
Bucle for in para recorrer propiedades de un objeto
Lo podemos utilizar para recorrer las propiedades de un objeto, para ello realizaremos un for y le pasaremos por parámetros una variable, la palabra reservada in y la variable objeto a recorrer. Lo podemos utilizar para recorrer arrays y un objeto es un array de propiedades. El bucle for in permite el uso de break y continue
for( contador in VariableObjeto ){
code...
VariableObjeto[contador];
}
let Persona = {
nombre: "David",
Apellidos : "Giménez Plaza",
Edad: 42,
Estatura: 1.72,
Peso: 80
};
let texto="";
for( x in Persona ){
texto +=Persona[x] + "<br>";
}
document.getElementById("forin").innerHTML=texto;
También lo podemos utilizar para recorrer un array
constmyArry =["Juan", "Pedro", "Francisco", "Julián", "Paco", "Longanizo"];
for (let i inmyArry){
console.info(myArry[i]);
}
Bucle forEach
El bucle forEach nos puede resultar útil para recorrer variables objeto o para recorrer un array, tiene una sintaxis muy sencilla. Este bucle no permite el uso de break y continue
Recorrer un array con forEach
let car = ["Seat","Ford","Renault"];
car.forEach((data, index)=>console.log(`en la podicion ${index} : ${data}`))
En el siguiente ejemplo utilizamos un bucle forEach para recorrer una variable objeto e imprimir en el div con id forEach todos los nombres del objeto obj.
Nos permite iterar sobre los elementos de un arry pudiendo utilizar break y continue. Crearemos una varible que representa la posición del array (myArray[i[).
function* miGenerador(){
yield "primer retorno";
yield "segundo retorno";
yield "terecer retorno";
yield "cuarto retorno";
yield "quinto retorno";
yield "sexto retorno";
yield "septimo retorno";
}
let gen = miGenerador();
for (const elem of gen){
console.log(elem);
}
Funciones en Java Script
Es un conjunto de instrucciones almacenadas para poder ser utilizadas cuando nos resulten necesario, existen de dos tipos:
Predefinidas:Son aquellas creadas por la comunidad y que podemos reutilizar. Tal y como vimos antes JQuery es una librería compuesta por un conjunto de funciones creadas por la comunidad.
Propias: Son aquellas que tu puedes crearte para tu uso.
Cómo crear una función
Para crear una función utilizaremos la palabra reservada function, se desaconseja para nombrar a las funciones utilizar ñ, acentos, interrogantes. Por ultimo colocaremos unos () conocidos como zona de parámetros o argumentos.
function MiFuncion(){
code....
}
Cómo llamar o invocar a una función
Utilizaremos el nombre que le dimos y ();. Cuando llamemos a nuestra función en un punto determinado de nuestro código este ejecutará todo lo que exista entre la llave de apretura { y la llave de cierre } de nuestra función.
MiFuncion();
Podremos escribir nuestro script en la zona superior u otra hoja y llamar a nuestra función cuando la necesitemos.
Pasar por parámetro un valor a una función JS
En ocasiones nos puede resultar útil ingresar argumentos en nuestra función. Es lo conocido como BlackBox o caja contenedor. El usuario conoce el dato introducido y el resultado pero el proceso interno ni lo conoce ni se tiene que preocupar por él.
Imagina que tenemos que crear una función que realice sumas. Puede resultarnos útil pasar por parámetros a esa función dos números y que ella nos regrese el resultado de su suma. Tal y como dijimos antes una vez creada y confirmada que no falla, tan solo nos preocuparemos de introducir dos número y recibir el resultado. El resto del proceso queda aislado en la función (encapsulado).
Propiedad arguments del objeto function
El objeto function tiene una propiedad que es arguments, esta propiedad es un array en la que se acumulan todos los parámetros que le pasamos a una función.
function dd(num1,num2){
return (num1+num2) +
" numero argumentos " +
arguments.length
;
}
alert(dd(50,25));
function areaCuadrado(base, altura){
let Cuadrado = base*altura;
let Triangulo = (base*altura)/2;
document.write(resultado);
document.write(Triangulo);
}
areaCuadrado(10,20);
Funciones y métodos para tratamientos de textos (String function)
El objeto String es un conjunto de caracteres de texto (char) que forman una cadena de texto. Al ser un objeto tiene una serie de propiedades y métodos.
Propiedades:
length()
Nos regresará el tamaño que tiene nuestra cadena de texto.
Métodos búsqueda:
CharAt(num)
Nos regresa el carácter que se encuentra en la posición designada.
indexOf(letraBuscada, posiciónInicial)
Nos regresa la primera posición de un carácter determinado. El parámetro de posiciónInicial podemos incluir o no y le indica la posición desde donde genera la búsqueda, en caso de no ponerlo es la posición 0.
lastIndexOf(letra)
Busca la letra introducida desde el final del String hacia el principio.
search(<string|expressionRegular)
Buscará una cadena o expresión regular dentro de otra cadena. Nos regresará la posición en la que se inicia la primera palabra.
match(<expresión regular>)
Busca una expresión regular en otra cadena.
Métodos comparación:
includes(string)
Da un resultado booleano, compara la cadena pasada por parámetros con nuestra variable String. En caso de que el string pasado por parámetros se encuentre en el texto de nuestra variable regresará true.
startsWith(<String>)
Nos regresa un booleano, si la cadena de nuestra variable empieza por la palabra/as introducida/as en el parámetro el resultado será true.
endsWith(<String>)
Nos regresa un booleano, si la cadena de nuestra variable termina por la palabra/as introducida/as en el parámetro el resultado será true.
Métodos Extracción textos:
slice(posición Inicial , Posición final)
Extrae textos tiene dos parámetros de tipo número, el primero marca la posición inicial de la extracción y el segundo parámetro indica donde cesa la extracción.
substring(int)
Regresara el texto a partir del numero introducido. Funciona como la función extrae de Excel. Ten en cuenta que los espacios en blanco computan como una posición.
substr(posiciónInicial, número Caracteres)
Regresará tantos caracteres como le indiquemos desde una posición inicial
split(char, nº divisiones)
Sustituye el carácter pasado por parámetros por una coma (,). El nº divisiones es opcional, si no lo ponemos eliminará el texto a partir de nº divisiones que le demos.
let texto =
"Esto es un texto de practica" +
" para uso de métodos string";
document
.getElementById("CuadroEscrito")
.innerHTML =
texto.split(" ",5);
//resultado:
Esto,es,un,texto,de
trim(string)
Eliminará los espacios en blanco anteriores y posteriores a la cadena. Imagina que nuestra variable texto tiene espacios en blanco delante y detrás, este método los elimina y nos regresa tan solo el texto.
let texto =
" ejemplo de trim ";
document
.getElementById("mydiv")
.innerHTML =
texto.trim();
//resultado:
ejemplo de trim
Métodos Inserción textos:
replace(textBuscado, newTex)
Remplazará textos, tiene dos parámetros el primero es el texto que estamos buscando y el segundo texto por el que lo remplazamos. Remplazará el primer texto coincidente que encuentre.
replace(/textoBuscado /gi , newTex)
Remplaza el texto buscado tantas veces como aparecca en el String.
String.fromCharCode(e.which)
Se utiliza en el evento keydown o keyup para saber la tecla presionada la función fromCharCode convierte el código unicode de la tecla presionada por la letra o número.
repeat(number)
Repite nuestra cadena tantas veces como le pasemos por el parámetro.
Métodos mayúsculas y minúsculas:
toLowerCase()
Convierte la cadena de texto a minúscula, es un método del objeto String.
let MiTexto = prompt("introduce texto").toLowerCase()
toUpperCase()
Convierte la cadena de texto mayúsculas, es un método del objeto String.
let MiTexto = prompt("introduce texto").toUpperCase()
Métodos numéricos
isNaN()
Is not a number Nos indicará si un valor no es un número . Le introduciremos por parámetros un valor o una variable y la funcion nos regresará un booleano. Si no es un número sera true en caso de ser número false. En el siguiente ejemplo decimos si num1 es número (no es not a number) ejecuta el código.
if(!isNan(num1)){
code...
}
Segundo ejemplo de isNaN():
let num1 = "esto es texto";
// nos regresa true porque no es number
alert(isNaN(num1));
let num2 = 258.6597;
//nos regresa false porque es number
alert(isNaN(num2));
El objeto number es un tipo de objeto primitivo en javaScript, con el podremos representar números. Al ser un objeto podríamos generar nuevas instancias de él let n = new Number(20); , pero es muy desaconsejado hacer instancias del objeto number porque no sería un número si no una hijo del objeto numero que estaría heredando sus propiedades y métodos pero seria un objeto totalmente diferente. De hecho si utilizamos la función typeof para saber que tipo de dato almacena nuestra variable n veremos lo siguiente:
<span id="ObjNumber"></span><br>
<script type="text/javascript">
let n = new Number(258);
document
.getElementById("ObjNumber")
.innerHTML =
typeof n;
</script>
//resultado
object
Tal y como has comprobado nos regresará como tipo de objeto (object) en lugar de número. Al instanciarlo se convierte en un objeto diferente al original o padre y eso nos puede causar problemas al comparar con el resto de variables del tipo número. Por esa razón se desaconseja instanciar el objeto Númber. Con el objeto number se generan variables de tipo número ( let entero = 10, decimal = 10.5 , científico= 58e10;)
Propiedades
MAX_VALUE : Es el valor máximo que puede tener una variable number
MIN_VALUE : Es el valor mínimo que puede tener una variable number
Infinity: Es el finito de una varialbe number.
NaN (Not A Number): Es una propiedad que nos indica que una variable es un número o no.Por ejemplo en este caso la variable n que antes hemos creado como instancia del objeto Number nos indicaría que si es un número, porque a pesar de ser otro objeto siguiendo un número. Para el ejemplo utilizaré el método isNaN() que nos regresa false si es número y true si no lo es.
<script type="text/javascript">
let n = new Number(258);
let tex = "texto";
let num = 128;
alert(
" ¿n NO es number? " +
isNaN(n) +
" \n ¿tex NO es number? " +
isNaN(tex)+
" \n ¿num NO es number? " +
isNaN(num)
);
</script>
//resultado
false true false
Pero si le pregunto si un nuevo objeto number es del mismo tipo que otro, nos diría que no. Recuerda que el símbolo === era igual valor y tipo.
let x = new Number(258);
let y = new Number(258);
let z = 258;
let o = 258;
alert(
" \n x tiene igual valor y tipo que y " +
(x===y) +
" \n x tiene igual valor y tipo que z " +
(x===z) +
" \n y tiene igual valor y tipo que z " +
(y===z) +
" \n z tiene igual valor y tipo que o " +
(z===o)
);
// resultado:
false
false
false
true
Métodos
toFixed(num): Le pasaremos por parámetros el número decimales que deseamos que muestre. El método redondea nuestro número quitándote los decimales no deseados.
toExponencial: Regresa un String con el número en anotación científica
toString: Convierte un número en String
valueOf: Regresa el tipo primitivo de un objeto.
Number():Regresa el valor número de una variable
Si la variable es un booleano true regresa 1
Si la variable es un booleano false regresa 0
Si la variable es una fecha (new Date()) regresa el tiempo en mili segundos desde el día 1/1/1970.
Si la variable es un String con un número, regresa el número de la cadena. Number("58");
Si la variable es un String texto regresará NaN (Not A Number).
Funciones matemáticas Math
El objeto Math de JS se creo para realizar operaciones matemáticas dentro de un programa hecho con java Script. No tenemos posibilidad de acceder al constructor y la forma de utilizarlo es poniendo Math.Propiedad; o en su defecto Math.Método;
Propiedad PI Math.PI
El número pi es 3.14159265389...Se utiliza para calcular el área de una circunferencia entre otras muchas cosas
El DOM bien del ingles Document Object Model. Cuando nosotros creamos un documento con html vamos cargando nodos con las etiquetas que estamos creando, eso es el DOM. Podemos decir que es un mapa con nuestras etiquetas. Cuando necesitas acceder a una parte determinada del documento con css, js, php utilizaremos el DOM para acceder a la parte del documento que deseamos modificar, seleccionar o guardar.
El DOM tiene en cuenta las etiquetas y su nivel jerárquico, se comporta como un árbol, cada una de estas cajas se conocen como nodos:
SELECTORES JavaScript
Existen varias formas de acceder pero una de ellas es con los siguientes métodos de JS.
getElementById ("id"):Accedemos por los Id de los nodos.
getElementsByClassName("class"):Accedemos por las clases de los nodos.
getElementsByTagName("etiqueta"): Accedemos por las etiquetas de los nodos.
getElementsByName(name): Accederemos a aquellos elementos con el atributo name que le indiquemos
En getElementsByClassName, getElementsByName(name) y getElementsByTagName nos crea un array de elementos por lo que si deseamos acceder a un elemento determinado podremos hacerlo como cualquier array: getElementsByTagName("h2")[2]; // Accederemos a la tercera etiqueta h2.
getElementsByName("name"):Accederemos por los name.
querySelector("tag.selectorCss"):Accederemos por un selector css, con esta instrucción por defecto accederemos al primero. Puede ser un sector de etiqueta (div) de id (p#nombreIde) o de clase (div.Miclase) cualquier selectos css que hayas utilizado.
querySelectorAll("tag.selectorCss"):Accederemos por todos los selectores css.
SelectorPadre.lastChild : Acederá dentro de un elemento y seleccionará el ultimo de sus hijos. En el siguiente ejemplo accederá al elemento cuyo atributo id sea myId y seleccionará el ultimo de sus hijos.
let eT = document.getElementById("myId");
eT.lastChild.innerHTML = "cvdgp";
SelectorPadre.firstChild : Seleccionará el último elemento hijo dentro de otro elemento padre.
Con JQuery accederíamos a los nodos de la misma manera que lo hace CSS3:
$(".NameClass"): Accederémos a la clase.
$("#id"): Accederémos al id.
$("Tang"): Accederémos al las etiquetas que deseémos.
$("input[type='text']"): Seleccionar todas las etiquetas input cuyo atributo type sea texto.
$("#ListaSelectoresJQuery li strong"):Selector en cascada Seleccionámos el id ListaSelectoresJQuery dentro de este id todos los li que tengan un strong.
$("input[style *='red']")Todos los input que contengan un estilo rojo.
$("a[href ^='https://']")Todas las etiquetas a que su href empiece por https://.
$("a[href $='.com']")Todas las etiquetas a que su href finalice en .com.
$(".obj1 button:eq(2)"): Accede a la clase obj1 y selecciona el botón tercero (recuerda que cuenta desde el 0).
$("li :visible") : Selecciona todas las etiquetas li que están visibles en este momento.
En el siguiente ejemplo al cargar el documento seleccionaremos las etiquetas con id ListaSelectoresJQuery dentro de este id los li y dentro de los li los Strong. y le modificaremos el color de texto en marrón.
$(document).ready(function(){
$("#ListaSelectoresJQuery li strong").css({"color":"brown"});
Con JQuery podremos encadenar varias funciones, imagina que quieres cambiar el ancho y alto y darle un efecto de fadeIn
Funciones Jquery para selección de elementos (traversing)
Jquery además de los selectores por defectos nombrados anteriormente, poseé un serie de funciones que nos alludan a la selección de elementos.
.has("Element"): Regresa aquellos elementos que continen elementos desdcendientes coincidentes con lo nombrado en el has. Ejemplo: Regresará aquellos h2 que contengan una etiqueta span dentro. $("h2").has("span");
.not("Element"): Regresa aquellos elementos que no contienen lo nombrado en el not. Ejemplo: Seleciona aquellos div con id texto que no contengan una etiqueta strong dentro de ellos. $("div#texto").not("strong");
.filter("Element"): Regresa aquellos elemento que coincide con la busqueda del filter. Ejemplo: Seleciona aquellos p que sean de la clase jamon. $("p").filter(".jamon");
.first(): Primer elemento hijo nombrado. Ejemplo: Pon de color rojo el primer li dentro de una lista. $("li").first().css("color","red");
.last(): Ultimo elemento existente dentro de una lista de elementos. Ejemplo: Seleciona todos los lemento p del documento, quedaté con los que tengan etiquetas soan dentro, selecina la última etiqueta spamn y pon la letra en verde
.eq(number) : Regresa el elemento descendiete que conicide con la posición indicada. Ejemplo: Seleciona el 5 li de una lista ul con id lista. $("ul#lista").find("li").eq(4);
.end() : Cuando encadenamos varias funciones de selección en ocasiones nos puede resultar útil volver a la selción anterior del elemento para continuar haciendo indicaciones. ejemeplo: Sleciona el 1 y 4 lemento de una lista de la clase lista y modifica su texto. Cada vez que utilicemos end() regresa al selector de los li
$("ul.lista")
.find("li")
.eq(0)
.html("Primer li modificado")
.end()
.eq(3)
html("Cuarto li modificado");
.parent() : Obtiene el objeto padre.
.parents() : Obtiene todos los antecesores del documento hasta html.
.parentsUntil("selector") : Obtiene todos los antecesores del documento hasta el marcado en la función.
closest("etiqueta"): El antecesor mas cercano con la etiqueta indicada. En el siugiente ejemplo iniciamos la busqueda en el id hijo y asciendo buscando la etiqueta ul mas cercana. $("#hijo").closest("ul");
.children(): seleciona todos los hijos de un elemento.
.find("ChildElement"): Nos regresará los elementos hijos (child) o descendiente que le inquemos. Ejemplo: Nos regresa todos los p que estén dentro de un articulo con id noticia1. $("article #noticia1").find("p")
.siblings() : Seleciona todos los hermanao de una etiqueta.
.next(): Proximo hermanao.
.nextAll(): Todos los siguientes hermanao.
.prev(): Anterior hermanao.
.prevAll(): Todos los anteriores hermanao.
Modificar el DOM con JS
Cómo modificar los atributos dentro de los Elementos del DOM con JS
Una vez hemos seleccionada un elemento con java Script podremos acceder dentro de él para modificar sus propiedades o atributos: class, Name, estilo Css (style), src, href, alt, value....
value: Nos facilita el valor introducido dentro de un input:
let inputinsertaAno = document.querySelector("#insertaAños");
let inputEnviar = document.querySelector("#Enviar");
let inputFecha = document.querySelector("#miFecha");
inputinsertaAno.textContent = inputFecha.value;
textContent: nos regresará el texto que existe dentro de la etiqueta.
let txt = document.getElementsByTagName("p")[2].textContent;
Crear un elemento
const item= document.createElement("li");
Añadir contenido al elemento.
item.textContent = ``;
Añadrir un grupo de elementos al DOM
parent_label.appendChild(item);
Fragmentos de código:
document.createDocumentFragment()
Inyección de código en el DOM con JS:
parent.before(itemInsert) - Antes de que empiece (hermano anterior)
parent.prepend(itemInsert) - después de que empiece (primer hijo)
parent.append(itemInsert) - antes de que acabe (último hijo)
parent.after(itemInsert) - después de que acabe (hermano siguiente)
<script>
const cargandoEnUl = document.getElementById("cargandoEnUl");
const item= document.createElement("li");
item.textContent = " datos cargados desde Java Script";
cargandoEnUl.append(item);
</script>
Cómo inyectar un fragmento de código con JS
Si iyectamos elemento a elemento en el Dom estamos gastando una gran cantidad de recurcos porque cada vez que cargamos un elemento tenemos que pasar por todo el arbol de nodos. Por esa razón es mas recomendable cargar un fragmento de código que cargar elemento a elemento. Para este fin JS tiene el método createDocumentFragment().
const meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto", "Septiempbre", "Octubre", "Nobiembre", "Diciembre" ];
/* 1. Creamos una variable con el nodo dentro del q desea,ps inyectar*/
const contenedor = document.getElementById("Contenedor");
/* 2. creamos variable de fragmento dódigo a inyectar*/
const fragment = document.createDocumentFragment();
/* 3. iteramos cargadno los nodos dentro de la variable fragment*/
for (let mes in meses) {
const li_item = document.createElement("li");
li_item.textContent = meses[mes];
fragment.appendChild(li_item);
}
/*4. cargamos los nnuevos nodos guardados en la variable fragment dentro del nodo padre*/
contenedor.appendChild(fragment);
Cómo borrar elementos del DOM con JS
removeChild("Element"): Eliminará el ultimo elemento.
Cómo remplazar un elemento por otro
replaceChild(newTag, OldTag): Sustituirá una etiqueta por otra.
Es una librería de código JavaScript open source que puede utilizar cualquier programador en su proyecto.
Nos ayuda a programar en Js haciéndolo más simple. Podremos reutilizar funciones ya creadas por otros programadores. Hoy en día se utiliza en la mayoría de sitios web.
Las funciones que tenemos en JQuery están testadas para que funcione en todos los navegadores, que es uno de los puntos flacos de JavaScript. Evitaremos el escribir tanto código reutilizando y modificando el ya escrito por otros y que sabemos que funciona.
CÓMO ENLAZAR CON UNA SCRIPT DE LA BIBLIOTECA JQUERY A NUESTRA PÁGINA WEB
En primer lugar dentro de nuestro head cargamos una etiqueta script y en el atributo src le indicamos la dirección del scrip seleccionado, pude ser una url o una ruta de archivo en local.
Ahora llamaremos a las funciones que tiene la hoja externa con form nos resulte necesitaría, en la zona que necesitemos abriremos un script y utilizaremos las funciones que necesitemos, para ello crearemos una función que iniciaremos con el signo del dolar $ he introduciremos el código dentro.
Script para copiar todas las etiquetas h2 de mi documento
En el siguiente fragmento de código accederemos al DOM de nuestro documento html y buscaremos las etiquetas h2, utilizando getElementsByTagName y el método textContent.
Una vez obtenidos los textos de mis h2 los cargaré en un alert, en consola y por ultimo los copiará en un div.
Aquí os dejo mi código:
window.addEventListener("load", function(){
let cargah2, copiar;
let copiador="";
//crea un array con los h2 con selector de etiquetas
cargah2 = document.getElementsByTagName("h2");
//selector de id
copiar=document.getElementById("REpetir");
for (let i = 0; i < cargah2.length; i++) {
//cargar en un mensaje pantalla
alert(cargah2[i].textContent);
//cargar en consola
console.log(cargah2[i].textContent);
//cargarlo en otro lugar en este caso en el div con id REpetir
copiador += "<p>" + cargah2[i].textContent + "</p>";
copiar.innerHTML = copiador;
}
}, false);
Script para crear un índice con los h2 de mi pagina actual
Utilizaremos la función text() para recuperar el texto de nuestra etiqueta y la funcion append() para copiarlo dentro de nuestro div. JQuery hace un código más sencillo.
Un data list es un conjunto de option, en este caso en lugar de repetir el código, crearemos un array con las diferentes opciones y se lo pasaremos a un bucle for para
cargar nuestro datalist.
Este es el código:
<input name="DatalistConAray" list="ListaD" />
<datalist id="ListaD">
<script type="text/javascript">
let lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
let options = '';
for(let i = 0; i < lista.length; i++){
options += '<option value="'+lista[i]+'" />';
document.getElementById('ListaD').innerHTML = options;
}
</script>
Script canvas
En el siguiente Script podemos ver como generar dos cuadrados, vaciarlos por dentro, crearemos la una función que cargará al cargar la página y dibujara nuestros dos cuadrados utilizando los métodos:
getContext("2d")
fillRect(x,y,ancho,alto)
strokeRect(x,y,ancho,alto)
clearRect(x,y,ancho,alto)
fillStyle= "color"
strokeStyle= "color"
globalAlpha
Este será el código:
window.addEventListener("load", function Dibujar(){
objCanvas1 = document.getElementById("Dibujo");
let subObjetoCamvas, subObjetoCanvas2;
let x = 10; let y = 10;let ancho=50;let Alto=50;
subObjetoCamvas = objCanvas1.getContext("2d");
subObjetoCamvas2 = objCanvas1.getContext("2d");
subObjetoCamvas.fillRect(x,y,ancho,Alto);
subObjetoCamvas.clearRect(x+10,y+10,ancho-20,Alto-20);
subObjetoCamvas2.fillStyle="#3B6845";
subObjetoCamvas2.fillRect(x+50,y+50,ancho,Alto);
subObjetoCamvas.clearRect(x+60,y+60,ancho-20,Alto-20);
}, false );
Cómo crear un degradado de canvas
Para crear un degradado necesitaremos los métodos anteriormente mencionados, los siguientes:
createLinearGradient(x1,y1,x2,y2)
addColorStop(0, 'color')
fillStyle
Este sería el código:
function SegundoDibujo(){
//construimos el canvas
const canvas = document.getElementById('Dibujo_2');
const ctx = canvas.getContext('2d');
//construimos el degradado
let gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, 'yellow');
//le indicamos que el color de nuestro canvas es el obj. degradado
ctx.fillStyle = gradient;
//cargamos un rectángulo con el tamaño de todo nuestro canvas para que se vea.
ctx.fillRect(0, 0, 300, 300);
}
Crear un canvas con degradado circular:
Para crearlo necesitaremos utilizar
createRadialGradient(x1,y1,r1,x2,y2,r2): con x1 e y1 designaremos el punto de início de nuestro primer circulo y con r el radio. Con x2, y2, r2 generamos el segundo circulo.
Este es el código de un degradado radial con canvas:
window.addEventListener("load", function(){
//constructor de canvas
const canvas = document.getElementById("Dibujo_4");
const Dibujo = canvas.getContext("2d");
//constructor de estilo degradado circular
let gradientCircle = Dibujo.createRadialGradient(160,75,50,160,75,200);
gradientCircle.addColorStop(1,"red");
gradientCircle.addColorStop(0,"green");
//cargamos estilos a nuestro objeto canvas 2d
Dibujo.fillStyle= gradientCircle;
Dibujo.fillRect (0,0,300,300);
}, false);
crear un dibujo lineal con canvas
Para realizar este canvas hemos necesitado los métodos:
beginPath(): Inicio
moveTo(x,y) : Ir al punto
closePath(): Cerrar figura
stroke(): Mostrar líneas del contorno.
fill(): Mostrar interior de la figura.
Este el código JS:
window.addEventListener("load", function Dibujante3(){
//constructor del obj. Dibujo em 2d
const canvas = document.getElementById("Dibujo_5");
const Dibujo = canvas.getContext("2d");
//Indicamos que inicia el trazado
Dibujo.beginPath();
//nos desplazamos a la coordenada de inicio de nuestro trazado
Dibujo.moveTo(50,50);
//indicamos donde finaliza nuestra línea
Dibujo.lineTo(150,120);
//marcamos una segunda y tercera línea.
Dibujo.lineTo(150,50);
Dibujo.lineTo(200,100);
Dibujo.lineTo(20,60);
//cerramos el objeto regresando al punto inicial beginPath()
Dibujo.closePath();
//hace visible el objeto creado
Dibujo.stroke();
}, false );
Crear una tabla y llenarla con los datos de varios arrays utilizando un bucle for
Esta tabla la hemos creado utilizando JavaScript.
Lenguaje programación
Uso
En primer lugar necesitamos crear una estructura html5.
<table>
<caption>Esta tabla la hemos creado utilizando JavaScript.</caption>
<thead>
<tr>
<td>Lenguaje programación</td>
<td>Uso</td>
</tr>
</thead>
<tbody>
*******aquí es donde ira nuestro script
</tbody>
</table>
Ahora necesitamos dos arrays de JavaScript, uno por fila
let funcion = ['html','JavaScript','Sql','Php','Java','JQuery' ];
let uso = ['FrontEnd', 'FrontEnd','FrontEnd', 'BackEnd','BackEnd','FrontEnd'];
Ahora creamos un bucle for para crear las etiquetas y escribir en las celdas
for (let i = 0; i <funcion.length; i++) {
document.write("<tr>"+
"<td>" + funcion[i] +"</td>"+
"<td>"+ uso[i] + "</td>"+
"</tr>");
}
Utilizar la librería JQUERY simplifica mucho programar en JS existen otras librerías de JavaScript:
Prototype
Mootools
Dojo
Yahoo User interface
Una librería es un archivo compuesto por funciones de nuestro lenguaje. En la actualidad la librería más utilizada en JavaScript es JQuery.
Como cargar jQuery en nuestro proyecto
Existen dos formas la primera de ellas sería vincular nuestra web al archivo js en línea, mientras que la segundo forma sería descargarnos el archivo y colgarlo en nuestro servidor como hoja externa de nuestro proyecto.
Vinculo a librería JQuery
Cargaremos esta etiqueta script en el head de nuestro documento.
Inserción de textos dentro de contenedores con JQuery
Es fácil que tengamos que acceder a nuestro html y modificarlo con JS. Para esto vamos a necesitar las funciones de tratamiento de textos.
Funciones Tratamiento texto
.html():
La utilizamos par sustituir un texto por otro. Eliminará el texto existente y pondrá el nuestro.
$(document).ready(function(){
$(".append").append("<p>Texto de JQuery</p>");
.tex():
Podemos utilizar esta función para obtener el texto de un objeto o para insertar texto dentro de él. Si introducimos un texto con esta función lo insertará con etiquetas html y todo.
Obtener texto de un objeto
let miVariable = $("p").text();
Insertar textos dentro de un objeto
$(document).ready(function(){
$(".tex").append("<p>Texto de JQuery</p>")
.append():
Inserta texto a continuación de lo que tenga escrito en el contenedor y dentro de el. En realidad lo que hace append es inserta objetos hijos dentro de otro creado anteriormente. Puende ser etiquetas p, div, img...
En el siguiente ejemplo insertaremos una etiqueta p con un texto dentro. Selecionaremos el objeto con clase append e insertaremos el testo : "Texto de Jquery" que a su vez estará dentro de un parrafo.
$(document).ready(function(){
$(".append").append("<p>Texto de JQuery</p>");
.appendTo(conjunto)
Iserta un elemento al final de un conjunto de lementos hijos de un contenedor.
En el siguiente ejemplo clonamos el elemento con clase ElemetWhatCopy y utilizamos appendTo para copiarlo al final del elemeonto con clase miDiv.
$(".ElemetWhatCopy").clone().appendTo(".miDiv");
.prepend():
Agrega un texto antes del contenido actual y dentro del contenedor al que apunta. Genera un hijo dentro de la seleción y lo coloca antes de los hermanos ya escrito.
$(document).ready(function(){
$(".append").preppend("<p>Texto cargado con prepend() antes del texto actual dentro del contenedor</p>");
.before():
Cargará el texto o código antes del contenedor.
$(document).ready(function(){
$(".append").before("<p>Texto cargado con before() cargará por encima del contenedor al que apuntas</p>");
.after():
Cargará el código después del contenedor.
$(document).ready(function(){
$(".append").after("<p>Texto cargado con after() antes del texto actual dentro del contenedor</p>");
.empty("contenedor"):
Elimina los elementos hijos que existen dentro del elemento que seleccionemos.
.remove("contenedor") :
Eliminará el elemento que seleccionemos. Mientras que empty elimina los elementos hijos remove elimina el elemento entero.
.clone() :
Clonará un elmento selecionado.
En el siguiente ejemplo le decimos que clone la etiqueta h2 y pegue una copia al final del div con id contenedor.
Los métodos que utilizaremos para saber el tipo de datos que contine una variable.
$.isFunction(variable) : Nos regresa true si es una función.
$.isEmptyObject (variable) no considera el tipo de objeto, o cómo se creó; siempre que no tenga ninguna propiedad, esta función devuelve verdadero.
$.isPlainObject (varibale) devuelve true para los objetos que son instancias puras de Object; false para objetos que son de cualquier otro tipo, por ejemplo, Número, cadena, función o un tipo personalizado.
$.isArray(varibale) : Nos regresa true si es es un array.
$.isNumeric(varibale) : Nos regresa true si es una variable de tipo número.
$.type(variable) : Nos regresará el tipo de lemento.
Modificar el tamaño de un elemento
Existen varios métodos que nos pueden alludar a modificar un elemen:
width(): ancho elemento.
height(): alto elemento.
innerWidth() : ancho del elemento con el padding .
Remplazar y eliminar elementos remove() y replacewith()
.remove(): Lo utilizaremos para elimina un elemento de nuestra página.
.replaceWith(elementoInserta): Remplazará un elemento por otro.
Ejemplo de remove()
En el siguiente ejemplo crearemos un botón, al pulsarlo aparecerá un banner, ese banner tendrá un botón para eliminarlo que he llamado remove(). Al pulsarlo eliminamos el banner.
En el siguiente ejemplo ves 3 objetos dentro de un div. Cuando pulses en alguno de ellos desaparecerá y en su lugar cargará un carter en el que diga "Elemento seleccionado".
Elemento 1
Elemento 2
Elemento 3
Este es le código con el que hemos hecho el ejemplo de replaceWith().
▼↓↓▼
He creado un pequeño formulario con el que practicar las formulas que hemos aprendido para generar textos utilizando JQuery. Lo hemos diseñado para que cuando enviemos el formulario dejando uno de los input sin rellenar nos rellene un texto al lado de el indicando que falta rellenar el texto.
Funciones JQuery submit(), blur(), focus() para formularios
Un formulario es un objeto muy importante de nuestro DOM y tenemos que saber utilizarlo. Como objeto importante que es de nuestro html existen múltiples funciones JQuery para los formularios.
.submit(): Se desencadena cuando hacemos click en el input submit o enviar de nuestro formulario.
.focus() : Se desencadena al entrar el foco en un input. Se utiliza para llevar el foco a un elemento o para desencadenar un evento cuando entre el foco en un elemento del formulario.
.blur(): Al perder el foco. Este evento se desencadena cuando el foco sale del elemento.
.change(): Desencadenará un evento al cambiar el estado del objeto. Es muy útil para recoger datos de una lista desplegable.
REFRESCAR UNA WEB CADA X MIN O AL EVENTO CLICK DE UN BOTÓN USANDO JQUERY
HTML5 tiene una etiqueta meta que podría hacer este trabajo:
<meta http-equiv= "refresh" content = "tiempo en milisegundos">
En primer lugar para recargar una pagina web necesitaremos la función JS location.reload() esta funcion tiene un parámetro booleano. .
True que es el que tiene por defecto cargará desde el servidor
False desde el cache de nuestro ordenador.
Por otro lado necesitaremos la función setTimeout que establecerá el tiempo de intervalo. Posé dos parámetros en primer lugar función a ejecutar cada intervalo y en segundo lugar tiempo de intervalo en milisegundos. Por lo que si deseamos que el intervalo sea de 5 minutos (5*60)*1000=300000
La función setInterval nos permitirá realizar una acción cada x milisegundos, tiene dos parámetros la función que le pasamos y el tiempo en milisegundos que retrasa su ejecución.
En el siguiente ejemplo se modificara el color del texto de nuestra imagen svg cada x segundos. Como setInternal ejecuta nuestra función hasta que finalice he creado un array con los colores que le pasamos a la función y luego la he llamado dentro de otro setInternal. Es como un bucle anidado.
Con Jquery podemos acceder al css de nuestro documento html y modificarlo de una forma dinámica. Insertando y quitando estilos de CSS. Podemos decirle al documento que cuando un usuario haga click en un punto determinado se modifique el color de pagina, cargue una imagen, generar animaciones...
Pero tenemos una serie de funciones que podemos utilizar para modificarlo de otro forma.
addClass("EstiloClasse")
Añade un estilo de clase.
removeClass()
Retira un estilo de clase.
toggleClass()
Alterna el estilo de clase dando a nuestro elemento un estado de on/off. Cuando nuestro objeto este en estado de on tendrá un comportamiento y cuando este en estado de off otro. Podemos utilizar esto con checkBox
addClass("EstiloClasse")
Crearemos un estilo de clase en nuestro CSS.
Luego le daremos ese estilo a nuestro elemento. $("Elemento").addClass("EstiloCSS);
removeClass("EstiloRetirado")
$("Elemento").removeClass("StyleCSSremove);
toggleClass(): Cuando chequeemos un checkbox agregará un estilo de clase y cuando deseemos quitará el estilo introducido.
En el siguiente ejemplo crearemos un frame en la parte superior 4 check box uno por cada elemento. En la parte inferior 4 elementos cuando chequeemos un check box el fondo del elemento se pondrá verde, la fuente en amarillo y el borde en color aqua y lo deschequeemos volverá a su color original. En ocasiones los estilos css de un contenedor hijo puede entrar en conflicto con los del hijo, en estos casos tendremos que poner !important entre la propiedad y el punto y coma (border: 5px ridge aqua !important ;)
Igual que podemos quitar o remplazar elementos podemos acceder a los atributos de nuestras etiquetas y modificarlos. Antes vimos cómo modificar el css ahora veremos cómo modificar cualquier atributo. Para ello nesitaremos dos funciones:
attr("atributo","Valor"): Lo podemos utilizar para asignar el valor a un atributo. Pero si deseamos obtener un atributo de un objeto lo utilizaremos así:
let ruta = $("img").attr("src") En el anterior ejemplo seleccionamos el objeto imagen y utilizamos la función attr para acceder a la ruta de la imagen y almacenarla en nuestra variable ruta.
Si lo que deseamos es modificar varias propiedades de un obejto los realizarariamos utilizando un objeto JSON:
Cómo crear un cuadro de código con html5, JQuery, CSS
En el siguiente ejemplo vamos a crear un cuadro de código. En primer lugar generaremos un div. dentro de él 4 botones, y cuatro div uno por cada tipo de código (html, php, css, javaScript). Con JQuery le indicaremos que se mantengan ocultos todos ellos menos el de html. Para esto utilizaremos la función hide()
Dentro de cada caja de código que hemos creado un div que hemos llamado numeral. JS hemos creado un bucle for y hemos cargado en él 100 filas.
Cada vez que pulsemos un botón este desencadenará el evento click y hará visible nuestro div de código con la función show()
Una función anónima no tendrá nombre y se utilizará como argumento de otro función:
$("p").each( function(){ code...});
Función each()
La función each() es un bucle que se cumplirá mientra que nuestro contenedor tenga objetos.
Imaginemos que deseamos poner todos los párrafo s en negrita. Podríamos utilizar la nomenclatura del punto.
$("p").css({"font-weight":"bold"});
Ahora imagina que tienes que insertar condicionales dependiendo de el principio del párrafo . Eso nos complicaría las cosas. para eso esta pensado crear una función anónima con un each
$("p").each( function(){ code...});
Si lo que deseamos es cargar todos los h2 en un sitio determinado lo pedemos hacer así.
En el siguiente ejemplo hemos creado un arrays de literales por lo que si deseamos mostrar todas las propiedades de cada uno de ellos debemos acceder primero a cada una de las posiciones del array, y una vez dentro de la posición recorrer el literal.
Sintaxis:
$.each(Arrayliteral,(posicionArray,literal)=>{
$.each(literal,(claveLiteral,valor)=>{code..}
}
Pulsa para ver ejemplo completo:
let Arrayliteral=[
{
Nombre: "David",
Apellidos : "Giménez Plaza",
Edad: 42,
Estatura: 1.72,
Peso: 80
}, {
Nombre: "Juan",
Apellidos : "Pérez",
Edad: 42,
Estatura: 1.72,
Peso: 80
}, {
Nombre: "Roman",
Apellidos : "Giménez Plaza",
Edad: 42,
Estatura: 1.72,
Peso: 80
}
];
/*bucle general del anidado para rrecorrer el array*/
$.each(Arrayliteral,(posicionArray,literal)=>{
$("#introTex")
.append(`<h3 class= "letraRojo">
El objeto nº ${posicionArray} del array contiene el literal:
</h3>`);
/* bucle interior del anidado: accede a literal dentro del array*/
$.each(literal,(claveLiteral,valor)=>
$("#introTex").append(`<i class="negrita">${claveLiteral}</i> es ${valor}<br>`));
});
OBJETO EVENTO
Un evento es un objeto para java script y como tal tiene sus propiedades y métodos:
Propiedades
target: nos regresa el elemento del DOM que dispara nuestro evento.
clientX: es el punto x donde nos encontramos.
clientY: es el punto y donde nos encontramos.
data: Dato trasmitido al evento utilizando la función bind().
type: Nos regresará el evento en el que a acontecido, puede resultar útil para manejar eventos.
Ejemplo de eventos con formularios usando javaScript
sotpPropagation: Evitará la propagación de eventos por el resto de objetos situados en el mismo lugar. Por ejemplo si le decimos que se desencadene el evento tras hacer click en la imagen debemos de tener en cuanta que la imagen pertenece a body que a su vez pertenece al document que a su vez pertenece al html. Tu puedes haber generado un evento para el documento y otro para la imagen. En el siguiente código la imagen respondería al click del body y al click de la imagen.
preventDefault: Detiene el comportamiento determinado del elemento. Imagina que tu tienes un botón con una etiqueta <a> dentro, si tu haces doble click por defecto te llevara a la dirección que tenga en el atributo href, utilizando preventDefault evitará que al hacer doble click te dirija a esa URL.
which: Nos regresa un número entero que representa un número unicode que representa la tecla presionada por un keypress
En el siguiente ejercicio utilizamos las propiedades clientX y clientY para ver en que punto de la pagina haces click.
En el siguiente ejemplo creamos una imagen svg con un circulo que seguirá el ratón. Cuando arrastremos el ratón dentro del svg el circulo irá tras nuestro ratón.
Un evento es un desencadenante de una acción (cargarse la pagina, salir de la página, hacer click en un punto, mover el ratón, pasar el ratón por un objeto, pulsar intro ...). Una acción es lo que ocurre una vez sucede el evento.
Podemos traducir evento algo que hace un objeto(página, ratón, teclado,formulario) y acción como la qué es lo que pasa cuando luego.
Ejm Cuando hagamos click en una etiqueta a nos llevará a otro pagina. En este caso el evento es hacer click y el evento desencadenado es ir a la pagina xxx.
Los eventos pueden ser de varios tipos:
Eventos de ratón:
click
dblclick
mousedown
mouseup
mouseover
mousemove
mouseenter
mouseeleave
Eventos de teclado:
keypress
keydown
Eventos de documento o ventana:
load
resize
scroll
unload
Eventos de formulario:
submit
reset
change
focus
blur
keyup
Eventos JQuery
Podemos utilizar los evento en jquery de dos formas:
Pasarle una función por parámetros al evento.
$("div").click(myfuncion);
function myfuncion(){...code...}
Crear una función anónima: $("div").click(function(){....code....});
Lo utilizaremos para trabajar con el evento click, con el aparecerá y desaparecerá nuestro elemento cada vez que hagamos click. Se puede utilizar si queremos hacer una etiqueta <details> personalizada.
La función next("objeto") nos ayudará a apuntar al próximo objeto que determinemos dentro del actual. Por ejemplo Si le decimos $("article").next("p") apuntará a la primera etiqueta p de cada articulo.
bind("eventCallback", data, open)
La función bind está en desuso actualmente utilizaremos .on("eventos", acción).
Si deseamos que un objeto responda a dos o mas eventos (click, hover..) y al responder a ellos desencadene la misma función podemos utilizar bind().
Hasta el momento teníamos que hacer lo siguiente:
<$("p").click(funcionA).hover(funcionA)
/pre>
Con bing lo podemos hacer bind("click hover", data, miFuncion)
data será un dato o variable con un dato que le pasamos a nuestra variable
.on("evento/os", CallBackDesencadenada)
En los eventos podemos poner tantos eventos como deseemos que desencadenen nuestra acción, para ello los nombraremos separados con espacios:
$('.h2').on({ click:hacerclick, mouseover:hacerhover});
function hacerclick(e) {
e.preventDefault();
console.log('has hecho click');
}
function hacerhover() {
console.log('pasó el ratón');
}
Delegación de eventos
La delegación de eventos es una propiedad del objeto evento que nos puede resultar muy útil para identificar el elemento del DOM que dispara el evento y sus atributos. Sabiendo este dato podremos solicitar su modificación posterior mente.
En este ejemplo utilizamos la funcion .on() y le indicamos en primer lugar el elemento padre desde el que deseamos empezar la búsqueda $("ElementoPadre") y dentro de la función on le pasaremos por parámetros, los eventos desencadenantes de la acción, el hijo que debe identificarnos y por ultimo acción que desencadena.
Relaizará la funcion dada solo la primera vez que se desencadene el evento.
.off()
Hace que las funciones de evento vinculadas al elmento se apaguen. Si le indicamaos lo siguiente $("div").off();. El elemento div dejara de tener a la escucha todos los eventos, por lo que dejarán de desencadenarse cuando se produzcan.
En el siguiente ejemplo crearemos dos imágenes, cuando hagamos click o carguemos la página copiara la ruta de la imagen1 y se la dará a la imagen 2, poniéndola visible (Show), cuando pasemos el ratón por la imágen 2 esta desaparecerá, utilizaremos el método stopPropagation() del objeto evento para evitar que se propague en otro objetos como el body:
Lo utilizaremos para modificar propiedades css de nuestro DOM
toggleClass(NameNewClass)
Alternará entre la clase que le indiquemos como parámetro y la anterior que ya tenía.
Interrupciones en el flujo
delay(tiempoInterrupción)
Interrumpe el flujo de ejecución en un tiempo dado.
clearInterva(nameSetInterval)
Para el set intevar indicado
setInterval(funcion,TiempoIntervalo)
Interrumpen el flujo de la función indicada en primer lugar tantos mili segundo como introduzcamos en el segundo parámetro.
.stop(stopAll, goToEnd)
Detenie el flujo de ejecución. Tanto stopAll como goToEnd son parámetros booleanos. Le indicaremos:
stopAll true cuando desemos parar todos las funciones Jquery del objeto que esten en proceso o tengan un temporizador abierto.
goToEnd tru cudno desemos ir al final del flujo.
PARÁMETROS DE LA FUNCIÓN ANIMATE(propiedadesCSS,duraciónEnMilisegundos,easing,Función)
propiedadCSS (obligatorio): Propiedades de estilos CSS que queremos animar, los valores son los del listado anterior. El valor ha de ser numérico. Por lo que propiedades como background-color no son modificables.
duraciónEnMilisegundos (opcional): Velocidad de la duración del efecto en mili segundos. También pueden pasarse los valores ‘fast‘, ‘slow‘ y ‘normal‘. El valor por defecto en este parámetro sería 400 milisegundos.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
Función (opcional): Función que se desencadena al finalizar la animación.
Ejercicio de animaciones
En el siguiente ejemplo crearemos un menú con iconos realizados con svg que responderán a eventos.
En el siguiente ejemplo al pasar el ratón por el cohete se desplazará hacia la izquierda, una vez llegue al fin aparecerá otra imágen con una explosión.
Jquery es una librería genérica de JavaScript que recopila una seríe de funciones creadas y testadas por otros desarrolladores. Un plugin es una liberia realizada para un tipo de necesidad específica. La traducción literal de plugins es complementos.
Cuando deseemos atajos en nuestro trabajo buscaremos en un browser "plugins" y nos aparecerán multitud de ellos. Un ejemplo de pluging es FancyBox3 que se puede utilizar par el tratamento de imigenes.
Plugin FancyBox3
Es un efecto con imágenes, colocamos un conjúnto de imágenes en miniatura y cuando seleccionamos una de ellas esta aumenta el fondo se pone en difuminado y aparece una flecha en el lateral para que podamos ver el resto de imágenes. Este tipo de efectos se puede conseguir en muchas librerías en este caso la librería FancyBox
Viene del ingles Aasynchrony JAvaScript and Xml (Asíncrono JavaScript Y Xml). Es la tecnología con la que se están creando aplicaciones en web, nos evitará que cuando realicemos peticiones al servidor la página tenga que cargar por completo. Cuando carguemos nuestra página se creará una base y sobre esta base se irán generando las modificaciones, el hecho de ser asíncrono hace que podamos realizar varias peticiones al mismo tiempo por lo que podemos crear aplicaciones multi hilo.
Cuando carguemos nuestra página esta realizará una solicitud al servidor con los datos de inicio. Cuando nosotros hagamos una nueva solicitud al servidor (incluir un producto a la compra, realizar una búsqueda, pedir un tipo de letra, enviar login, modificar configuración de menú a razón de perfil...), este nos regresará una respuesta que será tratada con nuestro javaScript que es el encargado de hacer las modificaciones en nuestra página sin tener que cargarla de nuevo. Todo este proceso se realizara del lado del cliente
Que elementos componen la tecnología AJAX
Navegador o browser
JavaScript: Será el que procese las respuestas del servidor modificando el DOM.
Servidor: Es donde se encuentran nuestras BBDD con la información.
XMLHttpRequest (XHR): Es conocido como el core AJAX
Pasos de una conexión AJAX
Crear instancia del objeto XMLHttpRequest:
let Variable= new XMLHttpRequest()
Utilizaremos el método open del objeto XMLHttpRequest para abrir la conexión al servidor.
Le pararemos dos parámetros:
Elegiremos GET u POST:
GET: La información se carga en una URL
POST: Consultas de Actualización de BBDD
La dirección de nuestro servidor.
Variable.open("GET", "//files");
Modificaremos el DOM con una función JavaScript.
Recibiremos respuesta del servidor con datos JSON, text, HTML, XML...
Objeto XMLHttpsRequest;
Es el objeto del navegador que actualmente tienen incorporado todos los browser para poder realizar consultas con un servidor. Es conocido como el core AJAX y su siglas son XHR.
Propiedades
readyState
Es el estado en el que se encuentra, en este justo momento, el objeto XMLHttpRequest
0 : Respuesta sin iniciar
1 : Conectado al servidor
2 : Solicitud recibida por el servidor.
3 : Procesando respuesta.
4 : Solicitud preparada y consulta finalizada. Es el estado que más nos va interesas. Porque nos indica que ya está disponible nuestra respuesta.
status
Nos indicará el estado actual de nuestra solicitud.
200 : respuesta de la solicitud preparada.
402 : respuesta incorrecta.
404 : no se encuentra.
0 : el navegador se negó a cumplir la solicitud
onreadystatechange
Llamara a una función cuando cambie el estado de la propiedad llamada al estado (readyState) del objeto XMLHttpsRquest.
let hl = new XMLHttpsRquest;
hl.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
code....
}
};
responseText
Nos regresa los datos de la consulta como un String. Si cuando utilicemos el método open() le indicamos como dirección del servidor un archivo txt alojado en nuestro host, podremos cargar este texto en una etiqueta de nuestro html.
responseXML
Nos regresa los datos de la consulta como un XML.
MÉTODOS
open("GET or POST", "//files", bolean)
Genera la conexión con el servidor para realizar la solicitud. Si utilizamos el método GET realizará la solicitud por la barra navegación, mientras que si utilizamos POST para consultas mas largas (es el más utilizado). Como segundo parámetro le pasaremos el archivo que soporta la consulta que puede ser de múltiples tipos: txt, php, json, xml. El último parámetro será un booleano que indica el método de envío: true genera un envío asíncrono, mientras que false un envío síncrono, por lo que tendrá que recargar la página.
sed()
Envía nuestra solicitud al servidor. Si hemos elegido GET para nuestro formulario lo haremos así
get()
con POST
send("VarPasada"=+ VarJS);
abort()
Cancela una solicitud enviada.
setRequestHeader()
Lo utilizaremos cuando creemos un open() pasándo le por parámetros un POST, para cargar en el navegador el resultado de nuestra consulta a un archivo php. XMLHttpsRquest. setRequestHeader("Content-type","aplication/x-www-form-urlencode");
Ejemplo para cargar un archivo txt en un div
En el siguiente ejemplo el archivo documentoExterno.txt se encuentra alojado en mi host en la misma carpeta de esta página.
<div
id="cargaAjax"
style="background: lavender;
border: 5px groove black;
height: 150px;width: 80%;
margin: 50px 0;" >
</div>
<input type="button" class ="BotonAjax" value="AJAX">
<script type="text/javascript">
let botonAjax = document.querySelector(".BotonAjax");
let cajaTexto = document.querySelector("#cargaAjax");
botonAjax.addEventListener("click", function(){
/***cargo un objeto XMLHttpRequest *****/
let ajax = new XMLHttpRequest;
//**cuando XMLHttpRequest cambie de estado ejecuta la función***//
ajax.onreadystatechange = function(){
//**si la solicitud esta preparada y la respuesta también**//
if (this.readyState == 4 && this.status == 200){
//imprime el texto del archivo XMLHttpRequest
cajaTexto.innerHTML = this.responseText;
}
};
/**ABRIMOS CONTACTO CON EL SERVIDOR U ARCHIVO EXTERNO**/
ajax.open("GET","documentoExterno.txt", true );
//**Enviar**//
ajax.send();
});
</script>
Ejemplo para cargar un archivo XML en una tabla
Archivo XML
En mi caso el nombre del archivo es documentoExterno.xml y está alojado en la misma carpeta de el index.html de esta página.
VAmos a generar un boton, al pulsarlo cargará el texto xml utilizando las etiquetas para repartilo en las columnas.
<input type="button" value="responseXML" id="CargaXML">
<script type="text/javascript">
let myXml= document.querySelector("#CargaXML");
myXml.addEventListener("click", function(){
let ajax = new XMLHttpRequest;
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
cargaTabla(this);
}
}
ajax.open("GET", "documentoExterno.xml", true);
ajax.send();
});
function cargaTabla(xml){
let documentoXML = xml.responseXML;
let estudiantes = documentoXML.getElementsByTagName("alumno");
let CargaTabla = "<table><tr>"+
"<th> Nombre </th>"+
"<th> Primer Apellido </th>"+
"<th> Segundo Apellido </th>"+
"<th> Edad</th>"+
"<th> Curso </th>" ;
for (let i = 0; i < estudiantes.length; i++) {
CargaTabla +=
"<tr><td>" +
estudiantes[i].getElementsByTagName("nombre")[0].textContent +
"</td><td>" +
estudiantes[i].getElementsByTagName("apellido_1")[0].textContent +
"</td><td>" +
estudiantes[i].getElementsByTagName("apellido_2")[0].textContent +
"</td><td>" +
estudiantes[i].getElementsByTagName("edad")[0].textContent +
"</td><td>" +
estudiantes[i].getElementsByTagName("curso")[0].textContent +
"</td></tr>";
}
CargaTabla+="</tr></table>";
document.getElementById("TablaXML").innerHTML = CargaTabla;
}
</script>
FUNCIONES JQ PARA AJAX
JQuery como siempre nos facilitará atajos, existen funciones creadas y testadas por otros desarrolladores para la carga de datos con AJAX. Con ellas podremos desde cargar una pagina en un div, solicitar artículos en un carrito de compra, cargar imágenes desde una BBDD...
FUNCIÓN LOAD() DE JQUERY PARA AJAX (función obsoleta desde versión versión 1.8)
Con la función load a quedados desaconsejada desde las versión 1.8, por lo que se recomienda que en lugar de ella utilices get() o post()
función $.ajax({})
La función ajax de jquery esta realiza para generar una conexion completa con un servidor de forma asíncrona. Se compone de un parametro que es un objeto literal con varias propiedades, en la siguiente lista tenemos algunas de esas propiedades que podemos sobrescribir para relizar nuestra conexion asícrona con Jquery.ajax :
url: Dirección de nuestro archivo que puede ser un php con coenexión a una BBDD, un archivo JSON, un archivo XML...
data: Son los datos que le pasamos desde nuestro archivo JavaScript hacia el archivo con el que conectamos. Puede ser un literal un Json o una cadena.
success(result,status,xhr): Función que se ejecutará en el caso de que la conexión nos regrese una respuesta. Callback respuesta.
error(xhr,status,error): Función que se ejecutará en caso de no obtener respuesta. Callback Error
complete : Función que se desencadena al finalizar, esta función puede recibir xhr y status de nuestra conexion .
beforeSend(xhr) : callback que se ejecuta antes de la conexión.
timeout: parada en milisegundos para la respuesta.
En el siguiente ejemplo conectaremos con el archivo documentoExterno.php que nos regresa los datos introducidos dentro de nuestro literal dataSet.
Con esta opción podremos cargar una página dentro de un div sin tener que utilizar iframe, conectar con un servidor y realizar una consulta de productos, cargar un archivo txt, cargar un archivo XML, enviar datos de un formulario a una BBDD alojada en un servidor... Ajax nos dará soluciones sin recargar constantemente la página.
URL : Es la dirección de nuestro archivo o servidor.
datosEnviados: Son aquellos datos con los que realizaremos la consulta
funciónRespuesta: Es la función con la que procesaremos la respuesta JS.
En la actualidad son las dos funciones que podemos utilizar. Con ellas podemos cargar una página dentro de un div. En el siguiente ejemplo vamos a crear 3 div y un boton, cuando lo pulsemos cargará el php en el primer div, el txt en el segundo y el xml en el tercero. Cuando colocamos a pulsar el boton este vaciará los div de contenido. Tener en cuenta que los archivos han de estar en vuestro host.
<!DOCTYPE html>
<html lag="es">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header>
<h1>AJAX CON JQUERY</h1>
</header>
<section>
<article>
<h2>h2</h2>
<input type="button" value="toca el boton">
<div id="pagina-js">Aquí cargará php</div>
<div id="pagina-js2">Aquí cargará txt</div>
<div id="pagina-js3">Aquí cargará xml</div>
<p> texto del articulo</p>
</article>
<article>
</article>
</section>
</body>
<script type="text/javascript">
$(document).ready(function(){
let checado=true;
$("input[type='button']").
click(function(){
if(checado==true){
//cargar una pagina php en
$.get("http://localhost/MisPaginasWeb/APUNTEShtml5/APUNTES_PHP/index.php", function(data){
$("#pagina-js").html(data);
$("input[type='button']").val("Haz Click para vaciar div");
});
//cargar un archivo txt en un div
$.post("documentoExterno.txt", function(data){
$("#pagina-js2").html(data);
$("input[type='button']").val("Haz Click para vaciar div");
});
//cargar con post un todas las etiquetas nombre de un archivo xml
$.post("documentoExterno.xml", function(data){
let cargador="";
for (let i = 0; i < data.getElementsByTagName("nombre").length; i++) {
cargador += data.getElementsByTagName("nombre")[i].textContent + " ";
}
$("#pagina-js3").html(cargador);
$("input[type='button']").val("Haz Click para vaciar div");
});
checado=false;
}else{
$.get("", function(data){
//seleccionamos todos los div que su id contenga pagina-js
$("div[id *= 'pagina-js']").html("no cargada");
$("input[type='button']").val("Haz Click para cargar div !!!!!!!! ");
checado=true;
});
}
});
});
</script>
<html>
ajaxStar() y ajaxStop()
Esta función Jq detecta cuando se desencadena el evento de conexión ajax. Con ajaxStart detecta el inicio de la conexión con el archivo, con ajaxStop detecta el final o recepción de datos
En el siguiente ejemplo tenemos un html en el que hemos puesto un div con id cargaDatos. Lo hemos dejado oculto con css (display:none). Si lo deseas hacer con Jquery puede hacerlo así $("#cargaDatos").hide();. Cuando cargue nuestra consulta con ajax lo mostrará con la funcion show() y una vez finalice la consulta se desvanecerá hacia la parte superior de nuestro documento con slideUp()
Ahora utilizaremos la función Jquery get(URL, {data}, functionReturn) para introducir las propiedades de nuestra variable objeto misDatos dentro del parámetro data de nuestra función get. Ten en cuenta que por defecto un submit tiene que recargar la página, por esa razón al final le indicaremos return false para evitar que realice su función por defecto (load).
Si en lugar de 2 registros como es nuestro caso tenemos un formulario con muchos registros, podremos utilizar la función serialize() para cargar todos los registros dentro de nuestra variable de tipo objeto misDatos;
$("#miFormularaio")
.submit(function(){
/*this en este caso se refiere a #miFormularaio que sería el objeto que
dispara el evento submit*/
let misDatos = $(this).serialize();
$.get("url.php", misDatos, functionReturn);
return false;
});
Depuración de errores con ajax
Cuando creemos un formulario y lo conectamos a php y a su vez este lo conectemos a una BBDD en un servidor, pueden suceder miles de errores, que la dirección de la pagina php sea incorrecta, que se caiga el servidor, que la consulta sea incorrecta. Si no realizamos una depuración de errores nosotros pulsaríamos enviar a nuestro formulario y no veríamos que esta pasando ni sabiendo si los datos han llegado al servidor. Para evitar esto existe la funcion .fail(function(){})
La función .error() está obsoleta desde JQ 3.0
Lo que haremos es encadenar la funcion .fail() a la función get o post utilizada para la conexión.
Proviene de acrónimo JavaScript Object Note y es un estándar basado en texto con el que convertiremos los objetos literales JavaScript en una anotación o formato texto. A pesar de us nombre JSON en la actualidad es reconocido por muchos lenguajes de programación no solo por javaScript. Al poder ser leído tanto por Backend(php, java, Pyton, Ruby) como por el Frontend (javaScript, html) podremos trasferir e importar datos del servidor de una forma más liviana, la utilizaremos junto Ajax en nuestras páginas.
JSON puede representar cadenas, números, booleanos, valores nulos , objetos y arreglos.
Hasta ahora hemos visto las variables objeto o literal a la que podemos introducir varias propiedades con sus respectivos valores:
Hasta ahora habíamos comunicado con nuestro servidor con get() o post(), para comunicar con nuestro servidor pasando por parámetros un JSON necesitaremos utilizar la función utilizaremos getJSON.
Ejemplo de get con ajax
Cómo crear un formulario y pasar los datos a nuestra BBDD
Nuestra BBDD estará alojada en un servidor y utilizaremos php y una consulta sql para enviar los datos.
Si deseamos que el resultado cargue en un div cada x milisegundo utilizaremos un setInterval(function, milisegundo)
$("#VemtasSvliente input[type='text']" || "#VemtasSvliente input[type='date'").blur(function(e){
($(this).val() == "") ? $(this).css({"background":"lime"}) : $(this).css({"background":"#85C1E9"});
});
$("#VemtasSvliente").submit(function(e){
/*con preventDefault le indicámos que no recargue la página al hacer submit*/
e.preventDefault();
let enviar = window.confirm("deseas enviar Formulario");
if (enviar) {
/**Con serialize cargamos los input del formulario en una variable literal*/
let formulario = $(this).serialize();
let validador=true;
/*utilizamos for in para recorrer el literal formulario para confirmar que no se quedan espacios
sin rellenar. En caso de quedarse algún input en blanco lo pone en rojo*/
for( X in formulario ){
if(formulario[X]=="") {
validador=false;
$(formulario[X]).css({"background":"red"});
}
}
/*validador (booleano) evalua si todos los input están rellenos envía los datos a php y vacía los input en caso contrario
nos avisará que faltan datos por cargar*/
/*getJSON utilizamos getJSON para pasar el literal*/
if (validador) {
$.get("BackEnd.php",formulario, function (dataEcho){
$("#escio").append("<h3> Los tres mejores vendedores son : </h3>" + "<div>" + dataEcho +"</div>" );
});
$("#VemtasSvliente input[type='text']" || "#VemtasSvliente input[type='date']").val("");
return false;
}else{
alert("faltan por cargar datos");
}
}else{
alert("has decidido no enviar datos");
return false;
}
});
//vaciar los hijos de article
$("input[type ='button']").click(function(){$("article").empty();});
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'david';
$lenguage="utf8";
/******Cargaremos los input en variables, lo he intentado con arrays pero no me lo permite.********/
$idcl = isset($_GET["idCl"]) ? $_GET["idCl"] : $_POST["idCl"];
$Nombre = isset($_GET["Nombre"]) ? $_GET["Nombre"] : $_POST["Nombre"];
$Apellido1 = isset($_GET["Apellido_1"]) ? $_GET["Apellido_1"] : $_POST["Apellido_1"];
$Apellido2 = isset($_GET["Apellido_2"]) ? $_GET["Apellido_2"] : $_POST["Apellido_2"];
$DNI = isset($_GET["DNI"]) ? $_GET["DNI"] : $_POST["DNI"];
$telPortado = isset($_GET["tel_Portado"]) ? $_GET["tel_Portado"] : $_POST["tel_Portado"];
$FECHANACIMIENTO = isset($_GET["FECHA_NACIMIENTO"])? $_GET["FECHA_NACIMIENTO"] : $_POST["FECHA_NACIMIENTO"];
$idVendedor = isset($_GET["id_Vendedor"]) ? $_GET["id_Vendedor"] : $_POST["id_Vendedor"];
$idproducto = isset($_GET["id_producto"]) ? $_GET["id_producto"] : $_POST["id_producto"];
$idoperador = isset($_GET["id_operador"]) ? $_GET["id_operador"] : $_POST["id_operador"];
$fechaVenta = isset($_GET["fecha_Venta"]) ? $_GET["fecha_Venta"] : $_POST["fecha_Venta"];
$CALLE = isset($_GET["CALLE"]) ? $_GET["CALLE"] : $_POST["CALLE"];
$NUMERO = isset($_GET["NUMERO"]) ? $_GET["NUMERO"] : $_POST["NUMERO"];
$CP = isset($_GET["CP"]) ? $_GET["CP"] : $_POST["CP"];
$provincia = isset($_GET["provincia"])? $_GET["provincia"] : $_POST["provincia"];
$población = isset($_GET["población"])? $_GET["población"] : $_POST["población"];
$link= mysqli_connect($host, $user, $password);
if (mysqli_connect_errno()) {
echo "no has podido conectar a la bbdd";
exit();
}
mysqli_select_db($link, $database) or die ("no esta la BBDD");
mysqli_set_charset($link, $lenguage);
/*nombre empieza por D y apellido empieza por P*/
$query = "
SELECT
id_cl,
Nombre,
Apellido_1,
Apellido_2,
DNI,
tel_Portado,
FECHA_NACIMIENTO,
id_Vendedor,
id_producto,
id_operador,
fecha_Venta,
CALLE,
NUMERO,
CP,
provincia,
población
FROM
ventas_sin_aleatorios
WHERE
Nombre LIKE 'd%'
AND
Apellido_2 LIKE 'p%'
";
/**Inserta los datos del formulario en la BBDD utilizando las variables que tienen los input como valores **/
$queryIsertInto= "
INSERT INTO `ventas_sin_aleatorios`
(
`id_cl`,
`Nombre`,
`Apellido_1`,
`Apellido_2`,
`DNI`,
`tel_Portado`,
`FECHA_NACIMIENTO`,
`id_Vendedor`,
`id_producto`,
`id_operador`,
`fecha_Venta`,
`CALLE`,
`NUMERO`,
`CP`,
`provincia`,
`población`
)
VALUES (
'$idcl',
'$Nombre',
'$Apellido1',
'$Apellido2',
'$DNI',
'$telPortado',
'$FECHANACIMIENTO',
'$idVendedor',
'$idproducto',
'$idoperador',
'$fechaVenta',
'$CALLE',
'$NUMERO',
'$CP',
'$provincia',
'$población')";
/**Query para consultar el mejor vendedor del día.***/
$queryMejorVendedorDeHoy =
"
SELECT MAX(id_Vendedor)
AS VENDEDOR_DEL_DÍA
FROM ventas_sin_aleatorios
WHERE fecha_Venta = DATE_FORMAT( NOW( ) , '%y-%m-%d' )
";
$queryMejorVendedorSemana=
"
SELECT
id_Vendedor,
Count(id_Vendedor)
FROM
ventas_sin_aleatorios
WHERE
fecha_Venta
BETWEEN
SUBDATE(CURDATE(), INTERVAL 3 DAY)
AND
NOW()
GROUP BY
id_Vendedor
ORDER BY
Count(id_Vendedor) DESC LIMIT 3
";
/**tres mejores Venddores de todo el tiempo**/
$query3mejores =
"
SELECT
id_Vendedor,
Count(id_Vendedor)
FROM
ventas_sin_aleatorios
GROUP BY
id_Vendedor
ORDER BY
Count(id_Vendedor) DESC
LIMIT 3
";
$result = mysqli_query($link, $queryIsertInto);
$top3 = mysqli_query($link, $query3mejores);
while ($dato= mysqli_fetch_row($top3)){
echo "<br>";
for ($i=0; $i < count($dato) ; $i++) {
echo $dato[$i];
}
?>
Dashboard de ventas
En el siguiente ejercicio vamos a generar 3 consultas sobre nuestra BBDD alojada en el servidor.
Los 3 mejores vendedores del mes
Los 3 mejores vendedores del semana
Los 3 mejores vendedores del día
Crearemos una pagina con 3 div y en cada uno de los div cargará una consulta en ajax que recargará cada 5 min. Para recargar la página utilizaremos setInterval(funcion, tiempoEnMilisegundos)
$(".cargaSql label").append("Top Ventas ").css({"font-size":"1.5em"});
$(".cargaSql:eq(1) label").append("semana:");
$(".cargaSql:eq(2) label").append("mes:");
/*carga la primera vez datos en la página*/
EnvioDatosAjax();
/**actualiza datos cada 5 min*/
setInterval(EnvioDatosAjax, 5*60000);
/*Esta funcion actualiza con AJAX los datos de los 3 div que utiliza para cargar los query realizados con php
*/
function EnvioDatosAjax(){
let filtro={
filtro1 : "mes" ,
};
$.get("backEnddd.php",filtro, function(data){
$(".cargaSql:eq(0)").html("<h2>Top mes:</h2>").append("<p></p>").append(data);
}).fail( x=( jqXHR, textStatus, errorThrown )=> {
$(".cargaSql:eq(0)").append("<p></p>").append("Error!! ") ;
});
filtro.filtro1="semana";
$.get("backEnd.php",filtro, function(data){
$(".cargaSql:eq(1)").html("<h2>Top semana:</h2>").append("<p></p>").append(data);
});
filtro.filtro1="dia";
$.get("backEnd.php",filtro, function(data){
$(".cargaSql:eq(2)").html("<h2>Top Dia:</h2>").append("<p></p>").append(data);
});
}
php
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'david';
$lenguage="utf8";
$link= mysqli_connect($host, $user, $password);
if (mysqli_connect_errno()) {
echo "no has podido conectar a la bbdd";
exit();
}
mysqli_select_db($link, $database) or die ("no esta la BBDD");
mysqli_set_charset($link, $lenguage);
$query_topmes= "
SELECT
id_Vendedor,
Count(id_Vendedor)
FROM
ventas_sin_aleatorios
WHERE
fecha_Venta
BETWEEN
SUBDATE(CURDATE(), INTERVAL 30 DAY)
AND
NOW()
GROUP BY
id_Vendedor
ORDER BY
Count(id_Vendedor) DESC LIMIT 3
";
$query_topSemana= "
SELECT
id_Vendedor,
Count(id_Vendedor)
FROM
ventas_sin_aleatorios
WHERE
fecha_Venta
BETWEEN
SUBDATE(CURDATE(), INTERVAL 7 DAY)
AND
NOW()
GROUP BY
id_Vendedor
ORDER BY
Count(id_Vendedor) DESC LIMIT 3
";
$query_topDia= "
SELECT
id_Vendedor,
Count(id_Vendedor)
FROM
ventas_sin_aleatorios
WHERE
fecha_Venta = CURDATE()
GROUP BY
id_Vendedor
ORDER BY
Count(id_Vendedor) DESC LIMIT 3
";
/**Con esta funcion podemos generar las consultas y regresará una tabla, con un encabezado determinado de dos filas le pasaremos por parámetros mysqli_connect guardado en la variable $link y el query que deseamos que ejecute. **/
function resConsulta($link,$queryIntroducido){
$query = mysqli_query($link, $queryIntroducido);
$text= "<table>
<thead>
<th>Agente</th>
<th>Ventas</th>
</thead>
<tbody>
";
while ($dato= mysqli_fetch_row($query)){
$text.= "<tr>";
for ($i=0; $i < count($dato) ; $i++) {
$text.= "<td>" . $dato[$i] ."</td>";
}
$text.= "</tr>";
}
$text.= "</tbody><table>";
return $text;
}
$dato_get = $_GET['filtro1'];
/***VAloramos el valor cargado de desde JScript y ***/
if($dato_get == "mes" ) echo resConsulta($link,$query_topmes );
elseif ($dato_get == "semana" ) echo resConsulta($link,$query_topSemana );
elseif ($dato_get == "dia" ) echo resConsulta($link,$query_topDia);
?>
Es la evolución generada en el años 2015 del lenguaje JavaScript. En 1996 nace Netscape un navegador basado en el lenguaje JavaScript aunque en ese momento se llamó LiveScript, pero con el paso de los años cuando java tenia tanta popularidad decidieron llamarlo javaScript nombre que ha perdurado hasta el momento.
Igual que W3c se encarga de los estándares web. ECMA International se encarga de los estándares y desarrollo de JavaScript. En su evolución sexta nos ha traído cosas tan interesantes como:
ES6 nos facilita una solución elegante y sencilla para inyectar variables en textos.
Hasta ahora cuando deseábamos crear cadenas de texto e insertarle variables necesitábamos hacerlo de la siguiente forma:
Insertando el primer fragmento de texto entre comillas
Insertamos un + la variable y otro +
Insertamos el siguiente fragmento de texto
Todo esto se complica y mucho cuando entran dentro del texto comillas simples y dobles. Supongo que en muchas ocasiones os habréis enfrentado a rompecabezas con comillas simples, comillas dobles, otra vez simples. Es una locura en ocasiones saber donde se cierran o no unas comillas:
Abriremos las comillas pero con ` (símbolo situado al lado derecho de la p en el teclado español).
Cada vez que deseemos concatenar una variable pondremos el signo $ y en tre corchetes nuestra varialbe. ${miVar}
Ten en cuenta que cuando inyectes un texto con document.write y hagas un enter dentro del template String este lo considerá como un <br> en el texto resultante.)
Este es el ejemplo anterior utilizando template string
varlista = newArray("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var i = 0; i <lista.length; i ++ ){
options +=`<option value="${lista[i]}" />`;
}
console.info(options) ;
En el siguiente ejemplo el texto lo inyecté con jquery utilizando append()
let uno = 1, dos =2, tres =3;
$(".templateString").append(`Esto es un texto de ES6 utilizando los template String,
la variable uno es ${uno},
la variable dos es ${dos} y
por ultimo en nuestra variable tre el resultado será de ${tres}, asi lo hemos hecho`);
/***** resultado ****///
Funciones de flecha de JavaScript o arrow
En la version ES6 (ECMAScript 2015), se realizo una evolución de javaScript para la que existen detractores y partidarios las funciones en flecha. Si le pillas el truco es una forma de ahorrarte unas líneas de código cosa que los motores de búsqueda te agradecerán, a mayor velocidad de carga con buen contenido, mejor posicionamiento.
Una función tal y como conectamos has ahora se hace utilizando la palabra reservada function, nombrando unos parámetros y creando un código.
function MiFuncion (param1,param2){
return param1+param2;
}
document.getElementById("Pobadorddd").innerHTML =MiFuncion(1500,200);
Para este ejemplo usaremos la función .map creada para modificar arrays. Las funciones flechas cuando actúan como una función anónima se generan así. parámetro => code....
let miArray2=[4,6,9,7,8,6,3,8];
let miArray3= miArray2.map( n => n*2);
$("#dos").after(miArray3[1]);
parámetros por defecto
Antes de ES6 cuando declarábamos una función podíamos añadirle una serie de parámetros. Cuando indicábamos que una función tenía un parametro cada vez que la llamábamos tenias que indicar el valor de ese parámetro.
En ECMAScript 6 aparecen los parámetros por defecto. Puedes indicarle que un parámetro si no se ha rellanado su valor será uno determinado por defecto cuando se cree.
function myFunction( param1, param2, param3 = "valor por defecto"){
code...
}
function miParamporDefecto(nombre,apellidos,pais="España"){
return `mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
}
$(".paramXdefetp").html(miParamporDefecto("David", "Giménez Plaza"));
También lo podemos hacer con una función flecha.
miParamporDefecto=(nombre,apellidos,pais="España")=>`mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`;
document.write (miParamporDefecto("David", "Giménez Plaza"));
Desctructurar arrays u Objetos (Destructuring assignment)
La sintaxis de destructuring assignment es una expresión que hace posible la extracción de datos de arrays u objetos, para ello generamos una variable por cada posición del literal o del arreglo.
Destructurar Arrays
Así accedíamos a un valor de un array hasta ahora:
let misDatos=["David", "Giménez Plaza", "https://cvdgp.blogspot.com"];
console.log(misDatos[2]);
Así lo haremos con destructuring assignment:
Declaramos un array como siempre.
Ahora con let o const creamos un array de variables y lo igualamos al array previamente creado. Con ello estamos igualando cada varible creada a una de las posiciones del array, hacemos algo parecido a un literal o varialbe objeto.
/*creamos el array*/
const miArray = ["David", "Giménez Plaza", "https://cvdgp.blogspot.com"];
/*igualamos un array de variables a nuestro array creado previamente*/
const[nombre,apellidos,web]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web}. `);
Igual que podríamos poner parámetros por defecto en este caso podemos dar valores por defecto a nuestro array. En el siguiente ejemplo si no definimos la temática del blog por defecto cargara no definida.
const miArray = ["David", "Giménez Plaza", "https://cvdgp.blogspot.com"];
const[nombre,apellidos,web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Giménez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Si deseamos no llamar a una posiciones del array tenemos que dejar un espacio vacío entre dos comas
const miArray = ["David", "Giménez Plaza", "https://cvdgp.blogspot.com"];
const [nombre , , web, tematicaBlog = "no definido"]=miArray;
document.write(`Mi nombre es ${nombre} , mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);
/*********resultado****/
Mi nombre es David, mis apellidos son Giménez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Desestructuración de objetos
La verdad es que podemos hacerlo de la misma forma que con los arrays. Cuando desestructuración un objeto, a diferencia de los array desestructurado, no hace falta que nombremos todos registros. Podemos saltar registros sin tener que dejar el espacio con comas.
let alumno={
nombre: "David",
apellidos:"Giménez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesión: "administrativo"
};
let{ nombre, blog, profesión } = alumno;
document.write( `el blog ${blog} es de ${nombre}`);
Es muy normal desestructurar un objeto pasándolo por parámetros a una funcion arrow o flecha.
let alumno = {
nombre: "David",
apellidos:"Giménez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
}
constcargaInformacion = ( { nombre, blog, profesion }) =>console.log(`Mi nombre es ${nombre}, visita mi blog en ${blog}. Soy ${profesion} y aprendo programación todo el tiempo que tengo.`);
cargaInformacion(alumno);
Spread Operator ...
Es un operador de ES6 en el que pondremos 3 puntos seguidos (...) y nos puede ser muy útil para:
Concatenar arrays
Convertir cadenas de texto en arrays de palabras
Convertir arrays en cadena de texto o String.
Hacer que una función tenga parametros indefinidos.
Eliminar duplicados en un array.
let arr=[1,2,3,4,5,6];
let arr2=[7,8,9,10];
let text= "texto";
let texto2 = ["Esto", "es", "un", "array"];
console.log([ ...arr , ...arr2]); //[1,2,3,4,5,6,7,8,9,10]console.info([ ...text]); //[ "t", "e", "x", "t", "o" ]console.log( ...texto2); // Esto es un array
En el siguiente ejemplo utilizamos el Spread Operator para indicarle que nuestra función flecha tiene tantos parametros como queramos introducir. Parametros Rest
const sumador = (... numeros) =>{
let sumando = 0;
for (let iterator of numeros){
sumando+=iterator
}
console.log(sumando);
}
sumador(2,5,6,4,7,8,9,63,2,1,4,5,9,89,8,7,350);
sumador(25,36,4,78,9,65,4,1,12,3,6,65,5,4,8,85,4,5,47,8,96,20000,89663);
sumador(5,10);
En el siguiente ejemplo eliminaremos los registros duplicados de nuestro array. Para ello utilizamos el objeto de javaScript set que podemos pasar a un Spread Operator
let numeros = [100,10,1,2,3,300,5,9,1,8,6,7,1];
console.log(eliminaDuplicador(numeros));
Clases JavaScript
Las clases en JS se nombran con la palabra reservada class. Java Script es un leguaje orientado a objetos que se basa en prototipos. El uso de clases ha sido utilizado por otros lenguajes de programación para la creación de objetos desde hace muchos años. En JS ya podíamos crear objeto utilizando el objeto Prototype , pero en ES6 han decido establecer una sintaxis más clara para la creación de objetos, utilizando las clases para tal fin. En la actualidad existen bibliotecas de JavaScript como React que utilizan las clases para organizar mucho mejor el código.
Utilizaremos la palabra reservada constructor para crear las propiedades de nuestro objeto y crearemos los métodos igual que cuando nombramos una función pero sin utilizar la palabra reservada function:
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = newDate();
}
metodoImpresor(){
return `El nombre es :${this.nombre}
El primer apellido es ${this.apellido1}
el segundo apellido es ${this.apellido2}
nacido en fecha ${this.fehcaNacimiento}
has generado el registro con fecha ${this.fechaRegistro}`;
}
}
const formularion1 = new formulario('David',"Giménez", "Plaza", "17/12/1977");
console.info(formularion1.metodoImpresor());
Métodos estáticos
¿Que es un método estático?
Es un método que puede ser llamado utilizando la clase sin tener que ser instanciado, por lo que podríamos decir que depende directamente de la clase. Para declarar un método o una propiedad como estatico pondremos la palabra reservada static delante de nuestro método u objeto.
let formularion1 = new formulario('David',"Giménez", "Plaza", "17/12/1977");
console.info(formularion1.metodoImpresor());
Método estático, llamamos directamente la clase sin instanciar:
formulario.imoresor();
Cómo heredar propiedades de una clase a otra
Una de las propiedades de POO (programación orientada a objeto) es la herencia. La herencia es la capacidad que tiene un objeto de adquirir todas las propiedades y métodos de otro anteriormente creado.
Para heredar de un objeto utilizaremos la palabra reservada extends al crear la clase. Y si deseamos cargar nuevas propiedades se las incluiremos en el constructor.
Cuando deseemos heredar propiedades le pasaremos por parámetros el nombre de las propiedades y dentro del constructor utilizaremos la palabra reservada super(propiedadHeredad,propiedadHerdada)
Si deseamos sobre escribir un método, lo nombraremos nuevamente en nuestra clase hija y lo modificaremos a nuestro antojo.
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**sobre escribir un metodo existente**/metodoImpresor(){
txt = `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
Si lo que deseamos es heredar las propiedades de un método ya creado y utilizarlo en uno nuevo. introduciremos super.MetodoObjPadre();
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
El ejemplo completo sería el siguiente:
<script type="text/javascript">
class formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fehcaNacimiento = fehcaNacimiento;
this.fechaRegistro = (new Date()).toDateString();
}
metodoImpresor(){
return `El nombre es :${this.nombre} <br>
El primer apellido es ${this.apellido1} <br>
el segundo apellido es ${this.apellido2}<br>
nacido en fecha ${this.fehcaNacimiento} <br>
has generado el registro con fecha ${this.fechaRegistro} <br>`;
}
}
class formulario2 extends formulario{
constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
this.articulo = articulo;
this.pvp = pvp;
}
/**crear un nuevo metodo**/
metodoImpresor2(){
let txt= super.metodoImpresor();
txt += `el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;
return txt;
}
}
let ventas_Movil = new formulario2 ("Francisco", "Gómez","Rubio","15/10/1985","undefined" ,"tableta", 200 );
//document.write(ventas_Movil.metodoImpresor());
document.write(ventas_Movil.metodoImpresor2());
</script>
Promesas Promise()
Qué son las promesas
Es un objeto que Js en su version ES6 utiliza para valorar el estado de una conexión asíncrona (AJAX). Una promesa se compone de 3 estados y no podrá tener núnca dos estado al mismo tiempo:
Pendiente
Resuelta
Rechazada
En primer lugar construimos uno objeto promesa al que pasamos por parámetros una función anónima que contiene dos parámetros resolve y reject
<script type="text/javascript">
let promesa = newPromise((resolve,reject)=>{
});
</script>
Antes dijimos que el objeto promise recibe dos parámetros:
resolve: Nos regresa el resultado cuando nuestra conexión a sido correcta.
reject: Nos regresa el error ocurrido en nuestra conexión ajax.
let promesa = newPromise((resolve,reject) =>{
if(true){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
Una vez creado el objeto promesa y cargadas los valores de las propiedades resolve y reject que hemos pasado por parámetros, recuperaremos esos valores con los métodos:
then(response): Esta variable recibirá por parámetros response que es el valor dado anteriormente a resolve
catch(error): Recibe por parámetros el objeto error que almacena reject.
/*instanciamos un objeto Promise*//*instáncia de un objeto Promise*/letpromesa = newPromise((resolve, reject)=>{
if(false){
resolve("Promesa resuelta");
}else{
reject("error al resolver la promesa");
}
});
/*cargamos los métodos then y catch *//*cargamos los métodos then y catch */promesa
.then((response)=> console.log(`resolve : ${response}`))
.catch((error)=>console.log(`error: ${error}`));
Tal y como hemos dicho antes una promesa tiene tres estados: en proceso , resuelto (resolve) y error (reject). Pero no podrá estar en dos estado a la vez primero estará en proceso y posteriormente estará resuelta o caerá en error. Esto la convierte en elemento perfecto para los envíos de formularios con AJAX. Supongo que habréis visto los típicos formularios que al enviarlos carga el circulo de carga y luego aparece como enviado o como error de envío.
Ejemplo de promesa con tres estados
En el siguiente ejemplo hemos utilizado un temporizador para que se vea el trascurso de los estado en un div con id contenedorCod .
Hasta ahora podiamos crear una función constructor para generar nuestro objeto pero ECMAScript 6 simplifica la creación de objetos, en primer lugar la función puede ser una funcion arrow, y las pripiedades que pasamos por el arrow no hace falta repetirlas:
Ejemplo repitiendo o igualando las propiedades al parámetro pasado por el arrow.
const objDavid = (nombre,apellidos,edad)=>{
return{
nombre,apellidos,edad,
getData(){
return`El nombre es ${nombre}, sus apellidos son ${apellidos}y su edad es ${edad} `
}
}
}
console.info(objDavid("David","Gimenez Plaza",42).getData());
console.dir(objDavid);
Métodos String ES6
startsWith (StringCompara)
Nos regresa un booleano que será el resultado de comparar la primera palabra o letra del texto con la que le pasemos por parámetros. En el caso que conincida regresará un true y en el caso de no se así un false. Ten en cuanta que es sensible a mayúsculas y minúsculas. text.startsWith("E")
lettext = "En un lugar de la Mancha de cuyo nombre no me quiero acordar ";
letmyText = window.prompt(`Dime la primera paralabra de este texto:
"En un lugar de la Mancha de cuyo nombre no me quiero acordar "`);
console.log(myText);
console.info(` El siguiente texto:
${text}
Empieza por ${myText}?
${text.startsWith(myText)}
`);
endsWith (SctringCompara)
Nos regresará un booleano con el resultado de valorar si el String a comparar esta al final de nuestro texto.
console.info(`En un lugar de la mancha`.endsWith("mancha"));
includes (StringCompare)
Lo utilizamos para consultar si el estring de comparación pasado por parámetros esta dentro del estring de comparación, en cualquier parte del texto. En tal caso no regresará un true.
console.info(`En un lugar de la mancha`.includes("lugar"))
Generadores
Son funciones que podemos pausar y activar dependiendo de nuestras necesidades. Usaremos un generador para crear una lista infinita y posteriormente ir solicitando sus resultados conforme sean necesarios. Para declarar un generador utilizaremos la palabra reservada function y acto seguido un asterisco, un espacio en blanco y el nommbre de nuestra función(function* migenerador(){...code...}). El generador realizara un return por cada punto de ruptura o pausa, estos puntos de retorno estarán divididos en bloques de código que empiezan por la palabra reservada yield.
Los iteradores tienen un método next() que nos permitirá acceder al proximo registro.
En el siguiente ejercicio creamos un generador con una lista infinita de números y cada vez que utilizamos el método next solicitamos un número que se imprimira en consola.
function* cronometro(){
let num =0;
while(true){
num++;
yield num;
}
}
const gen2 = cronometro();
console.log(gen2.next().value);
El verdadero uso que tine un generador es crear listas infinitas. Si tu creas una lista infinita tu programa se cae al no parar de operar calculos. En el siguiente ejemplo vemos como utilizar un generador para manejar cadena de Fibonacci y selecionar el número Fibonacci de la posición que le indiquemos en un prompt. Un número Fibonacci es el resultado de sumar el actual el actual por su predecesor:
1
(1+1) = 2
(2+1) = 3
(3+2) = 5
(5+3) = 8
(8+5) = 13
(13+8) = 21
function* miGenerador(){
let anterior = 1, comodin = 0, proximo = 0;
while(true){
proximo = anterior + comodin;
comodin = anterior;
anterior = proximo;
yield proximo;
}
}
const minum = parseInt(prompt("Posición Fibonancci que deseas recuperar "))-1;
let gen = miGenerador();
for ( i = 0; i < minum; i++){ gen.next()};
console.log(gen.next());
En el siguiente ejmplo vamos a crear un generador de segundos al que iremos llamando para incrementar el tiempo en un div con id hijo.
Son funciones que tienen otra función dentro de ellas, la segunda función será retornada por la primera. Ambas funciones serán dependientes.
En el siguiente ejemplo le pasamos por parámetos un número x a la primera función e y a la segunda función. La primera función nos regresa la segunda que a su vez nos regresa la suma de ambas.
function miSuma(x){
return function(y){
return x+y;
}
}
console.warn(miSuma(80)(200));
Esto mismo lo podemos hacer con funciones flecha de una forma más rápida
const sumador = x=> y=> x + y;
console.error(sumador(80)(20));
Métodos Getter y Setters de javaScript
Son métodos que podemos utilizar para obtener y modificar propiedades de una clase o un objeto de javaScript. Con la palabra reservada get indicamos que el método regresa propiedades, mientras que la palabra reservada set establece o modifica una propiedad.
Clases con get y set
//utilizamos un generador para hacer un autoincremento de números y crear un id
function* generatorId(){
let n = 0;
while(true) yield n++;
}
const id = generatorId();
class doSomeThing{
constructor(nombre, apellido1, apellido2, fechaNacimiento,contador){
this.contador = id.next().value;
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.fechaNacimiento = new Date(fechaNacimiento); //obj fehca al que le pasamos una fecha
}
get impresor(){
return `
ID : ${this.contador}
${this.nombre}
${this.apellido1}
${this.apellido2}
${this.fechaNacimiento}
`;
}
set modificadorNombre(name){
this.nombre = name;
}
}
const c = console.log;
const someThing = new doSomeThing("David","Gimenez","Plaza", "1977-17-12");
const someThing2 = new doSomeThing("David","Gimenez","Plaza", "1977-17-12");
const someThing3 = new doSomeThing("Rocio", "Madrigal", "Arias", "1985-15-02");
//utilizamos el setter
someThing3.modificadorNombre = "Maria Rocio";
//utilizamos el getter
c(someThing.impresor);
c(someThing2.impresor);
c(someThing3.impresor);
Objetos con get y set
const c = console.log;
const obj ={
nombre : "David",
apellidos: "Gimenez Plaza",
edad: 42,
get Datos() {
return `El nombre es ${this.nombre}, sus apellidos son ${this.apellidos}y su edad es ${this.edad} `
},
set DatosNombre(nombre){
this.nombre = ` ___________ ${nombre} _____________________` ;
}
}
obj.DatosNombre="Roco";
c(obj.Datos);
Drag & Drop (objeto dataTransfer)
Es una API de javaScript con la que podemos arrastrar un objeto y soltarlo en otro punto determinado .
En primer lugar existiran dos objtos que debemos tener en cuenta: él objeto que deseamos arrastrar y el contenedor donde lo deseamos dejar. Puede darse el caso de que tengamos un objeto y varios destinos o varios objetos y un destino.
Propiedades del objeto arrastrado
Por defecto etiquetas ocmo img son arrastrable pero existen otras etiquetas que debemos de indicarselo como propiedad utilizando <div draggable = "true">
Eventos del objeto arrastrado
dargstart
Evento desencadenado al inciar el arrastre del objeto.
dag
Evento desencadenado mientras estamos arrastrando el objeto.
dragend
Evento desencadenado al soltar el botón y dejar de arrastrar el objeto.
Eventos de la zona destino o contenedor destino
dargEnter
Evento desencadenado cuando el objeto arrastrado entra en la zona destino.
dragover
Evento disparado cuando el raton se mueve por dentro de la zona destino. Es imprescindible que lo utilicemos siempre el evento, en caso contratario no detectará el elemento destinatario del drop.
drop
Evento desencadenado cuando el objeto es soltado en el area destino.
dragleave
Evento disparado cuando el objeto arrastarado sale de la zona destino.
Objteo dataTransfer
El objeto dataTransfer tiene dos métodos que nos pueden resultar útiles:
setData: declara que datos serán transferidos.
getData: declara que datos seran obtenidos.
let darg1 = document.getElementById("drag1");
let darg2 = document.getElementById("drag2");
let darg3 = document.getElementById("drag3");
let receptor = document.getElementById("receptor");
drag1.addEventListener("dragstart",drag);
drag2.addEventListener("dragstart",drag);
drag3.addEventListener("dragstart", drag);
receptor.addEventListener("dragenter",drag_enter);
//Si no utilizamos dragover no cargará drop ni drag enter
receptor.addEventListener("dragover", (e)=> e.preventDefault());
receptor.addEventListener("drop",on_drop);
function drag(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
console.info(ev.target.id);
this.style.opacity=0.5;
}
function drag_enter(ev) {
ev.preventDefault();
}
function on_drop(ev) {
ev.preventDefault();
console.log("soltado " + ev.dataTransfer.getData("text"))
let data = document.getElementById(ev.dataTransfer.getData("text"));
receptor.append(data);
data.style.opacity=1;
data.style.background="red"
data.style.border = "5px solid black";
data.style.width = "100px"
}
que utilizan las clases para organizar mucho mejor el código.
No hay comentarios:
Publicar un comentario