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.
Existen varias formar de iterar con arrays y en ocasiones todas nos parecen iguales, pero la verdad es que existen pequéñ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 contine n****/
forEach
Itera por cada uno de los elemento del array ejecuatando 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
Es la evolucion generada en el años 2015 del lenguaje JavaScript. En 1996 nace Netscap un navegador basado en el lenguaje JavaScript auque 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 moemnto.
Igual que W3c se encarga de los estandares web. ECMA International se encarga de los estandares y desarrollo de JavaScript. En su evolución sexta nos ha traido cosas tan interesantes como:
ES6 nos facilita una solución elegante y sencilla para inyectar variables en textos.
Hasta ahora cuando deseavamos crear cadenas de texto e insertarle varialbes necesitavamos hacerlo de la siguiente forma:
Insertando el primer fragnmento 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 habreis 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 ` (simbolo 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 nuesrta 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 jemplo 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()
var 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 tranquillo es una forma de ahorrarte unas líneas de código cosa que los motores de busqueda te agradecerán, a mayor velocidad de carga con buen contenido, mejor posicionamiento.
Una función tal y como conecmos has ahora se hace utilizando la palabra reservada function, nombrando unos paramatros y crando 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 creda para modificar arrays. Las funciones flechas cuando actuan como una función anónima se generan así. parámetro => code....
var miArray2=[4,6,9,7,8,6,3,8];
var miArray3= miArray2.map( n => n*2);
$("#dos").after(miArray3[1]);
Parametros por defecto
Antes de ES6 caundo declarabamos una función podiamos añadirle una serie de parámetros. Cuando indicabamos que una función tenía un parametro cada vez que la llamavamos tenias que indicar el valor de ese parámetro.
En ECMAScript 6 aparecen los parametros por defecto. Puedes indicarle que un parámetro si no se ha rellmado 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"));
Tambien 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í accediamos a un valor de un array hasta ahora:
let misDatos=["David", "Gimenez 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 varialbes y lo igualamos al array previamente creado. Con ello estamos igualando cada varible creada a una de las posiones del array, hacemos algo parecido a un literal o varialbe objeto.
/*creaamos el array*/
const miArray = ["David", "Gimenez 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 podriamos poner parametros por defecto en este caso podemos dar valores por defecto a nuestro array. En el siguiente ejemplo si no definimos la tematica del blog por defecto cargara no definada.
const miArray = ["David", "Gimenez 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 Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Si desemoa no llamar una de las posines del array tenemos que dejar un espacio vacion entre dos comas
const miArray = ["David", "Gimenez 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 Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
Destructuración de objetos
La verdad es que podemos hacerlo de la misma foma que con los arrays. Cuando destructuramos un objeto, a diferencia de los array destructurados, no hace falta que nombremos todos regitros. Podemos saltar registros sin tener que dejar el espacio con comas.
let alumno={
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
};
let{ nombre, blog, profesion } = alumno;
document.write( `el blog ${blog} es de ${nombre}`);
Es muy normar que desestructuremos un objeto pasandolo por parámetros a una funcion arrow o flecha.
let alumno = {
nombre: "David",
apellidos:"Gimenez Plaza",
edad: 42,
blog: "https://cvdgp.blogspot.com",
profesion: "administrativo"
}
constcargaInformacion = ( { nombre, blog, profesion }) =>console.log(`Mi nimbre 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.
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
Clases JavaScript
Las clases en JS se nombran con la palabra reservada class. 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 podiamos crear objeto utilizando los literales o variables objeto, 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 calses 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',"Gimenez", "Plaza", "17/12/1977");
console.info(formularion1.metodoImpresor());
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 reserbada 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 modifificaremos 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. introduciendosuper.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;
}
}
var ventas_Movil = new formulario2 ("Francisco", "Gomez","Rubio","15/10/1985","undefined" ,"tablet", 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 asincrona (AJAX). Una promesa se compone de 3 estados y no podrá tener núnca dos estado al mismo tiempo:
Pendiente
Resuleta
Rechazada
En primer lugar construimos uno objeto promesa al que pasamos por parametros una función anónima que contine dos parámetros resolve y recject
<script type="text/javascript">
let promesa = newPromise((resolve,reject)=>{
});
</script>
Antes dijimos que el objeto promise recibe dos parametros:
resolve: Nos regresa el resultado cuando nuestra conexión a sido correcta.
reject: Nos regresa el error ocurrido en nuestra conexion 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 rosolve y recject que hemos pasado por parámetos, recuperaremos esos valores con los métodos:
then(response): Esta variable recivira 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*//*instanciamos 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 podra estar en dos estado a la vez primero estará en proceso y posteriormente estará resuelta o caerá en error. Esto la combierte en elemento perfecto para los envios de formularios con AJAX. Supongo que habreis visto los tipicos 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 .
El DOM bien del ingles Document Objet Model. Cuando nosotros creamos un docuamento con html vamos cargando nodos con las etiquetas que estamos creaando, eso es el DOM. Cuando necesitas acceder a una parte determinada del docuamento con css, js, phputilizaremos el DOM para acceder a la parte del docuemnto que deseamos modificar, selecionar o guardar.
Existen varias formar de acceder pero una de ellas es con los siguientes métodos de JS.
getElementById ("id"):Acemos 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 por los name.
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 metodo textContent.
Una vez obtenidos los textos de mis h2 los cargaré en un alert, en consola y por ultimo los capiare en un div.
Aquí os dejo mi código:
window.addEventListener("load", function(){
var cargah2, copiar;
var copiador="";
//crea un array con los h2 con selector de etiquetas
cargah2 = document.getElementsByTagName("h2");
//selector de id
copiar=document.getElementById("REpetir");
for (var i = 0; i < cargah2.length; i++) {
//cargar en un mensaje pnatalla
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
<script type="text/javascript">
window.addEventListener("load", function(){
var cargah2, copiar;
var copiador="";
//crea un array con los h2 con selector de etiquetas
cargah2 = document.getElementsByTagName("h2");
//Crea un objeto que luego pasaremos a una etiqueta div con id REpetir
copiar=document.getElementById("REpetir");
var contadorEtiquetasT=0;
for (var i = 1; i < cargah2.length; i++) {
//cargar en consola
console.log(cargah2[i].textContent);
//SI EXISTE UNA ETIQUETA H2 CON TEXTO Buscar este blog SAL DEL BUCLE
if (cargah2[i].textContent=="Buscar este blog") {breack; }
/*cargarlo en otro lugar, en este caso en el div con id REpetir.
Cada vuelta de bucle creara una etiqueta lista con una hipervinculo
creado con una etiqueta a y la referencia sera a un id que incrementará 1
en cada vuelta, tenemos que dedar todos nuestros h2 con un id = T1, T2, T3...*/
copiador += "<li id='subindice'><a href='#T" + contadorEtiquetasT + "'>" + cargah2[i].textContent + "</a></li>";
//pega copiador en el div con id REpetir
copiar.innerHTML = copiador;
contadorEtiquetasT++;
}
},false);
</script>
<ol id="indice" class="indice">
<div id="REpetir"></div>
<ol>
Script para llenar un datalist.
Un data list es un conjuto de option, en este caso en lugar de reptir el código, crearemos un array con las diferentes opciones y se lo pasaremosa 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">
var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
for(var 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áginay dibujara nuestros dos cuadrados utlizando 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");
var subObjetoCamvas, subObjetoCanvas2;
var x = 10; var y = 10;var ancho=50;var 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 degradao 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 rectangulo con el tamaño de todo nuestro canvas para que se vea.
ctx.fillRect(0, 0, 300, 300);
}
Crear un canvas con degradao circular:
Para crearlo nesitaremos utilizar
createRadialGradient(x1,y1,r1,x2,y2,r2): con x1 e y1 designaremos el punto de inico 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 radialcon 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 líneal con canvas
Para relizar este canvas hemos necesitado los métodos:
beginPath(): Incio
moveTo(x,y) : Ir al punto
closePath(): Cerar 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 despazamos a la coordenada de incio 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 incial 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.
Lenguage programación
Uso
En primer lugar necesitamos crear una estructura html5.
<table>
<caption>Esta tabla la hemos creado utilizando JavaScript.
<thead>
<tr>
<td>Lenguage programación</td>
<td>Uso</td>
</tr>
</thead>
<tbody>
*******aquí es donde ira nuestro script
</tbody>
</table>
Ahora cesesitamos dos arrays de JavaScript, uno por fila
var funcion = ['html','JavaScript','Sql','Php','Java','JQuery' ];
var uso = ['FrontEnd', 'FrontEnd','FrontEnd', 'BackEnd','BackEnd','FrontEnd'];
Ahora creamos un bucle for para crear las etiquetas y escribir en las celdas
for (var i = 0; i <funcion.length; i++) {
document.write("<tr>"+
"<td>" + funcion[i] +"</td>"+
"<td>"+ uso[i] + "</td>"+
"</tr>");
}
Así sería nuestro código completo:
<table>
<caption>Esta tabla la hemos creado utilizando JavaScript.
<thead>
<tr>
<td>Lenguage programación</td>
<td>Uso</td>
</tr>
</thead>
<tbody>
<script type="text/javascript">
var funcion = ['html','JavaScript','Sql','Php','Java','JQuery' ];
var uso = ['FrontEnd', 'FrontEnd','FrontEnd', 'BackEnd','BackEnd','FrontEnd'];
for (var i = 0; i <funcion.length; i++) {
document.write("<tr>"+
"<td>" + funcion[i] +"</td>"+
"<td>"+ uso[i] + "</td>"+
"</tr>");
}
<script>
</tbody>
</table>
En el siguiente ejemplo juntaré varios imputs de un formulario y les daré un diseño.
Existen varias formas con las que podemos distribuir nuestro formulario en el panel: utilizando una
tabla o utilizando css. A mi personalmente me gusta utilizar Css ya que un formulario no es lo mismo
que una tabla. Pienso que si utilizamos la etiqueta table para un uso al que no fue pensada
se convierte en un mal uso y confunde al buscador. Se que al principio de html se utilizaba la etiqueta
table para diseñar los espacios del body, pero desde la entrada de html5 eso ha canbiado y la etiqueta
label representa una tabla.
En el sigueinte ejemplo hemos utilizado javaScript para que cuando se introduzca el usuario, login y pulsemos Logarse,
nos regrese un mesaje con los datos escritos.
Con este javaScript conseguimos que nuestro formulario nos regrese un alert con los datos rellenos
Con el siguiente script podemos confirmar que no quedan inputs sin rellenar
y nos regrese un alert con los datos guardados
window.addEventListener("load", function(){
var login, user, boton;
/* nombrar objetos oyentes */
login= document.getElementById("LOGIN");
user= document.getElementById("USUARIO");
boton = document.getElementById("form3");
/* poner a la escucha los objetos */
user.addEventListener("input",aviso_relleno, false );
login.addEventListener("input", aviso_relleno, false);
boton.addEventListener("submit", validar, false);
user.style.background="red";
login.style.background="yellow";
function validar() {
aviso_relleno();
alert("loging: " + login.value + " user: " + user.value);
};
function aviso_relleno(){
if(login.value =="" || user.value==""){
user.setCustomValidity("falta usuario o login");
/* setCustomValidity("texto") avisos en formulario */
}else{
user.setCustomValidity("");/* reseteamos a no valor el set custom para que nos deje salir */
user.style.background="green";
login.style.background="green";
};
};
}, false);
Formulario con un output que nos regrese el resultado de un <input type="range">
En el siguiente formulario hemos utilizado css para cargarle un fondo y
distribuir los elementos igual que en el anterior, luego con javaScrip hemos puesto a la escucha la barra
y le hemos indicado que regrese en el output el valor de la barra
window.addEventListener("load", function(){
var form4range;
form4range= document.getElementById("EdadCL");
/* al cambiar el estado del elemento */
form4range.addEventListener("change", barra, false);
function barra(){
var salidaDatos= document.getElementById("EdadNumero");
var edad= form4range.value-20;
Construir un formulario y conectarlo a un localhost
La función principal de un formulario es la de guardar registros de una forma ordenada.Para ello necesitaremos
conectar a una BBFF. En los formularios anteriores henos utilizao tan solo html, css y javaScript
(FontEnd). Una vez tengamos alojada nuestra pagina en el servidor,
puede ser virtual (en tu propio ordenador, como es mi caso) o de pago.
Porque cuando pulso submit en mi formulario aparece una pagina con el códio php
Php es un lenguaje del lado del servidor(BackEnd)porlo que nuestra pagina ha de
estar alojada en el servidor. En mica caso utilizo el paqueta wamp por lo que tengo que
buscar en mi ordenador la ruta C:\wamp64\www\ y alojar en esta carpeta mi carpeta con los archivos
htlm, css, javaScript y php.En caso de estar la carpeta e un lugar que no sea el servidor
no la reconocerá como código php. Una vez alojada tu carpeta en C:\wamp64\www\ tines que
habrir tu buscador de internet y cargar en la zona de URL http://localhost/carpetaCreada/.
Una vez hemos creado nuestro formlario con html, css y javaScript
Por supuesto no podreis ver como funciona por detras por que el Backend, esta siempre oculto para
el usuario pero os pegare el código php mas abajo por eso se dice que es
del lado del servidor.
Este será nuestro JavaScript con el que llenar la etiqueta datalist,
lo podeis alojar en línea con un script dentro del datalist o
linkarlo en una hoja de estilos esterna.
window.addEventListener("load", function(){
var BoxEstadoCivil= new Array( 'soltero/a',
'casado/a',
'divorciado/a',
'vidudo/a',
'separado/a');
var e_option ='';
for(i=0;i<BoxEstadoCivil.length;i++){
e_option += '<option value="'+BoxEstadoCivil[i]+'"/>';
document.getElementById("lista").innerHTML= e_option;
}
},false);
Por ultimo nuestro php para conecta a la BBDD:
echo "<h1>ESTAS DENTRO GRUAPO</h1>";
$Nombre= $_POST['Nombre'];
$Apellidos= $_POST['Apellidos'];
$Email= $_POST['Email'];
$EstadoCivil= $_POST['EstadoCivil'];
$link= mysqli_connect(
$host = 'localhost',
$user = 'root',
$password = '',
);
if(mysqli_connect_errno()){
echo "<br><br><h1 style = color: red> No te ha conectado al Host</h1>";
exit();
};
mysqli_select_db(
$link,
$dbname= 'cursohtml'
)or die ("<h2 style= 'color : red'>upssssss la em fotut no esta la BBDD</h2>");
$setquery=mysqli_query(
$link,
$query="INSERT INTO form5
VALUES('$Nombre',
'$Apellidos',
'$Email',
'$EstadoCivil')"
) or die ("<br> <h2 style= 'color : red'> la has cagado con tu consulta, hazlo otra vez so torpe");
echo
" <br><a href='http://localhost/MisPaginasWeb/Practica_4/'
>Atras</a>";
que utilizan las calses para organizar mucho mejor el código.
