jueves, 16 de febrero de 2017

Inner html, eventos

innerHTML
innerHTML cambia o devuelve la sintaxis HTML describiendo los descendientes del elemento.
Nota: Si un nodo <div>, <span>, o <noembed> tiene un texto de secundario que incluye los caracteres (&), (<), o (>), innerHTML devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use element.textContent para conseguir una copia correcta del contenido de estos nodos de texto.

SintaxisEDIT

const content = element.innerHTML;
Después de la llamada, content contiene el código HTML serializado describiendo todos los descendientes de element.
 element.innerHTML = content;
Elimina todos los descendientes de element, analiza la cadena content y asigna los nodos resultantes como descendientes de element.

EjemploEDIT

<html>
<head></head>
<body>
 <div          id="txt">
   <script     id="txt0"> x=0 </script>
   <noembed    id="txt1"> 1   </noembed>
   <noframes   id="txt2"> 2   </noframes>
   <noscript   id="txt3"> 3   </noscript>
   <div        id="txt4"> 4   </div>
   <div>
     <noscript id="txt5"> 5   </noscript>
   </div>
   <span       id="txt6"> 6   </span>
 </div>
 <div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>
<script> 
  for (i=0;i<7;i++){ 
    x="txt"+i; 
    document.getElementById(x).firstChild.nodeValue='&<>'
  }

document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
</script>
<body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Elaborados Superiores</p>
// </div>

d = document.getElementById("d");
dump(d.innerHTML);

// la cadena "<p>Content</p><p>Elaborados Superiores</p>"
// es lanzada a la ventana de la consola

NotasEDIT

Esta propiedad proporciona una forma sencilla de reemplazar completamente los contenidos de un elemento. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:
document.body.innerHTML = "";  // Replaces body content with an empty string.
La propiedad innerHTML de muchos tipos de elementos—incluyendo <body> o <html>—puede ser devuelta o establecida. También se puede usar para ver el fuente de una página que ha sido modificada dinámicamente:
// Copiar y pegar en la barra de direcciones como una línea simple
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es entrado en una caja de texto, Internet Explorer cambia el valor del atributo de la entrada de la propiedad innerHTML, pero los navegadores Gecko no lo hacen.

Consideración de seguridad

No es extraño que innerHTML sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.
var name = "Juan";
// asumiendo que 'el' es un elemento de HTML DOM
el.innerHTML = name; // sin peligro

// ...

name = "<script>alert('Soy Juan con una alerta molesta!')</script>";
el.innerHTML = name; // fíjese que el texto es molesto y no es realmente lo que se esperaba.
Este es un ejemplo burdo, pero a veces, el texto insertado viene de una entrada de usuario, luego guardado en una base de datos, < y > no han sido configurados y el texto se muestra a otros visitantes. En ese caso, cualquiera puede insertar un script y usarlo para hacer más daño que una alerta, como robo de cookies, por ejemplo. Este ataque se llama cross-site scripting.
Cuando solo tratamos con texto, es recomendable no usar innerHTML, sino textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

EspecificacionesEDIT

Tomado de:https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML

Eventos

onblur

Este elemento ha perdido el enfoque.
Ejemplo
<p>Cuando deselecciones este control, el color de su contenedor cambiará: <input type="text" onblur="changeColor(this.parentNode)"></p>
Cuando deselecciones este control, el color de su contenedor cambiará: 
onfocus
El elemento ha ganado el enfoque.
Ejemplo
<p>Cuando selecciones este control, el color de fondo de su contenedor cambiará: <input type="text" onfocus="changeColor(this.parentNode)"></p>
Cuando selecciones este control, el color de fondo de su contenedor cambiará: 


onkeypress
una tecla asociada con un carácter ha sido presionada mientras este elemento tenía el enfoque.
En contraste con onkeydown y onkeyup, este evento no será ejecutado por teclas que no están asociadas a caracteres de entrada (la mayoría imprimibles) como, por ejemplo, ALT, CTRL, INS y DEL.
Ejemplo
<p>Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor cambiará: <input type="text" onkeypress="changeColor(this.parentNode)"></p>
Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor cambiará: 

onkeydown
Una tecla ha sido presionada mientras este elemento tenía el enfoque.
Ejemplo
<p>Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor cambiará: <input type="text" onkeydown="changeColor(this.parentNode)"></p>
Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor cambiará: 

onkeyup
Una tecla ha sido soltada mientras este elemento tenía el enfoque.
Ejemplo
<p>Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor cambiará: <input type="text" onkeyup="changeColor(this.parentNode)"></p>
Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor cambiará: 

onload
El navegador ha completado la carga del recurso provisto por este elemento.


ejemplos en clase:
1 ejercicio

<script>
function sumar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}

function sumar2(a, b){
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}


function restar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a - b;
document.getElementById("mirespuesta").innerHTML= a - b;
}
function multi(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a * b;
document.getElementById("mirespuesta").innerHTML= a * b;
}


sumar2(32, 2);
</script>


<body>
<div id="mirespuesta">hola</div>
A: <input type="text" id="a"><br>
B: <input type="text" id="b"><br>
RTA: <input type="text" id="rta" readonly ><br>
<input type="button" value="Sumar" onclick="sumar();" ><br>
<input type="button" value="Restar" onclick="restar();" ><br>
<input type="button" value="multiplicar" onclick="multi();" ><br>

</body>


                                         2 ejercicio

<script>
function s(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
var rta = a + b;
document.getElementById("rta").value = rta;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi suma = " + (a + b ) + "</font></b></marquee>";
}
function r(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
document.getElementById("rta").value = a - b;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi resta = " + (a - b ) + "</font></b></marquee>";
}

</script>
<body>


<label>A:</label> <input type="text" id="a" autocomplete="off"><br>
B: <input type="text" id="b"><br>

Rta: <input type="text" id="rta" readonly ><hr>
&nbsp;&nbsp;<input type="button" value="Sumar" onclick="s();" >&nbsp;&nbsp;
<input type="button" value="Restar" onclick="r();">&nbsp;&nbsp;
<input type="button" value="Multiplicar" >

<hr>
<div id="holita">esto es mi mensaje</div>
<hr>

</body>
Publicadas por a la/s

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)