Scrips para trabajar con html
Acceder al DOM con JavaScript
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
| 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>
No hay comentarios:
Publicar un comentario