Ejercicio Javascript 1

Parte 1: Obtener la lista de elementos de etiqueta ‘p’ y mostrarlos en un alert de JavaScript.

// lista de párrafos en un array
var pes = document.getElementsByTagName('p');

// recorremos el array con un for


var texto = "";
for (i = 0 ; i < pes.length ; i++) {

  //Aquí lo mostramos en consola
  console.log(pes[i]);


  // sin el método innerHTML no podríamos ver el contenido
  texto = texto + pes[i].innerHTML; 
}
alert(texto);

Parte 2: Añadir un nuevo elemento p con el texto “Texto del nuevo párrafo” y que sea hijo del body.

// Creamos el párrafo y su texto
let p = document.createElement("p");
let pTexto = document.createTextNode("Ejemplo");

// Añadimos el texto al párrafo
p.appendChild(pTexto);

// Añadimos el párrafo como hijo del body
document.body.appendChild(p);

https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp

Javascript, arrays

Este sencillo ejercicio con HTML y Javascript puede servir de introducción para hablar de los arrays en Javascript.

Al cargar una web que contenga este código, se ejecutará mostrando los elementos de un array de diversas formas, como viene comentado en el código.

<!DOCTYPE html>
<html>
<body>

<i><p id=»listatostring»></p></i>
<i><p id=»unelemento»></p></i>
<i><p id=»0″></p>
<p id=»1″></p>
<p id=»2″></p>
<p id=»3″></p></i>
<i><p id=»todo»></p></i>

<script>

// crear un array
var fruits = [«Banana», «Orange», «Apple», «Mango»];

//limpia elementos vacíos
fruits = fruits.filter(Boolean);

// mostrar el array
// El método <i>toString()</i> devuelve un array como una string con los elementos del array separados por comas
document.getElementById(«listatostring»).innerHTML = fruits.toString();

// Sintaxis para enseñar un elemento de un array: <i>element[index]
document.getElementById(«unelemento»).innerHTML = fruits[3];

//recorrer el array
for (var i=0; i<fruits.length; i++) {

// Mostrar el array separado en distintos elementos HMTL
// permite filtrado e elementos con condicionales
if (fruits[i]!=»Apple») {
document.getElementById(i).innerHTML = fruits[i];

// mostrarlo de otra forma, quizá más elegante
// Mostrar el array dentro de un elemento HTML sin usar toString(),
// añadiendo un espacio entre elementos
document.getElementById(«todo»).innerHTML += » «+fruits[i];

}

}

</script>

</body>
</html>

Javascript relojes y repeticiones

Usar setInterval(función, milisegundos) para ejecutar una función con un retraso de milisegundos.
No lo hace repetidamente, pero una estrategia común es ejecutar el código y llamar a setTimeout al final del script.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById(‘txt’).innerHTML =
h + «:» + m + «:» + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = «0» + i};  // add zero in front of numbers < 10
return i;
}
</script>
</head>

<body onload=»startTime()»>

<div id=»txt»></div>

</body>
</html>

Cuenta Atrás

var count=30;

var counter=setInterval(timer, 1000);

function timer()
{
count=count-1;
if (count &lt;= 0)
{
clearInterval(counter);
//termina el contador
return;
}

//Aquí el código para mostrar los segundos
document.getElementById(‘contador’).innerHTML = count;
}

<div id=»contador»></div>

Evento onclick en Javascript

Usando el siguiente div:

<div id=»probando»
style=»display:block;height:50px;width:50px;»
onclick=»myFunction()»>
Prueba con javascript
</div>

Vamos a realizar algunos ejercicios con el evento onclick de javascript.

 

«Herramientas»:


– Obtener un elemento por su ID: document.getElementById(«id») en cada ejemplo.
– Un poco de HTML (el div anterior), con algo de estilo y el evento onclick asociado a una función que hemos llamado myFunction
– Para el primer ejemplo, obtenemos las medidas del elemento con .offsetWidth y .offsetHeight
– Para el segundo, establecemos el color con .style.color
– Para el primero y el tercero, establecemos las medidas con .style.width y .style.height


1- Ampliar y reducir según tamaño


<script>

function myFunction() {

var ancho = document.getElementById(«probando»).offsetWidth;
var alto = document.getElementById(«probando»).offsetHeight;

if (ancho<100) {
document.getElementById(«probando»).style.width = «100px»;
document.getElementById(«probando»).style.height = «100px»;
} else {
document.getElementById(«probando»).style.width = «50px»;
document.getElementById(«probando»).style.height = «50px»;

}
}

</script>


2- Cambiar color de fondo


<script>
function myFunction() {
document.getElementById(«probando»).style.color = «red»;
}
</script>


3- Establecer tamnaño

<script>
function myFunction() {
document.getElementById(«probando»).style.width = «100px»;
document.getElementById(«probando»).style.height = «100px»;

}
</script>