miércoles, 22 de febrero de 2017

Evaluación, Ventanas

-Este es el cronograma del primer bimestre:
cronograma-1
-Este día realizamos una evaluación escrita sobre innerhtml la respuesta era la siguiente :
<script>

  document.getElementById("rta").innerHTML=rta;

 </script>
 ventanas 
ventana secundaria a una ventana principal.

Ventana emergente
Las ventanas emergentes o popups son esas ventanas que aparecen de forma automática sin que el usuario las haya solicitado. Su contenido suele ser de tipo publicitario y no tienen un tamaño fijo, aunque lo más habitual es que no ocupen la totalidad de la pantalla.
Aunque cada vez van siendo menos usadas, debido principalmente a los sistemas de bloqueos y restricciones que posibilitan los propios navegadores, conviene conocer precisamente el sistema de protección que tenemos ante estos elementos emergentes que la mayoría de las veces son involuntarios para el usuario.
En cuanto a su forma de presentarse, aunque se utilice la denominación general de ventanas emergentes, pueden ser:

  • Emergentes: Se presentan en primer plano superponiéndose a la ventana activa. Su contenido suele ser principalmente publicitario y su uso suele ser muy abusivo.
  • Sumergidas: En este caso aparecen bajo la ventana principal y pueden ser bastante más peligrosas que las emergentes, ya que la función publicitaria no parece que se ajuste a esta forma de presentación y en algunos casos pueden llevar códigos ocultos destinados a escribir cookies u otras funciones de control.


ejercicio:
<html>
<head>
<title>emergente</title>

</head>
<body>
<a href="" onclick='javascript:window.open("pagina.html","miventana","width=300,height=200,menubar=no,top=130,left=930")'>Abrir</a>
</body>
</html>
Ventana modal con html y javascript 

Según se afirma en la Wikipedia, la aparición de Lightbox animó a otros desarrolladores a crear proyectos similares, como el popular Thickbox, basado en jQuery. Lightbox y sus descendientes son aplicaciones escritas en Javascript que hacen un uso intensivo del DOM para mostrar contenido web de forma modal y visualmente atractiva. Andrés Nieto ha recopilado en su página más de veinte de esos proyectos.
Si bien es cierto que no hay que estar inventando la rueda todos los días, porque ya alguien lo hizo por nosotros, hay circunstancias en las que necesitamos una rueda hecha a medida. Por eso, saber cómo se han hecho otras ruedas puede sernos útil para hacer la nuestra.
A continuación explicaré los elementos básicos que necesitamos para hacer una rueda, perdón, una simple ventana modal con HTML y Javascript… 🙂

Primero necesitamos un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente ésto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta. Y por último, necesitaremos también alguna forma de ocultar el contenedor. ¡Manos a la obra!
Pega al final de la sección body de tu página web el siguiente código:
<div id=”miVentana” style=”position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;”>
Aquí pones tu contenido web
</div>
Los atributos más importantes de este DIV son:
id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).
Dentro del DIV deberás colocar el contenido web que deseas mostrar. ¡Procura que quepa dentro del contenedor!
Luego crea un elemento de script en tu código HTML e inserta las siguientes líneas:
function mostrarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.marginTop = “100px”;
    ventana.style.left = ((document.body.clientWidth-350) / 2) +  “px”;
    ventana.style.display = ‘block’;
}
Esta función Javascript obtiene una referencia al contenedor a través de su id, lo coloca en el centro del documento mostrado en el navegador, y lo hace visible.
Por último, agrega éstas líneas de código:
function ocultarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.display = ‘none’;
}
Esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible.
Y ya ‘tá. 🙂 Con ésto tenemos todos los elementos básicos para hacer una simple ventana modal con HTML y Javascript. A partir de aquí puedes mejorar el proyecto con todo lo que se te ocurra, o simplemente con las funcionalidades que requiera tu proyecto web.

Ventana modal Bootstrap
Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> deberemos añadir los estilos de Bootstrap.
<link href="bootstrap.css" rel="stylesheet">
La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.
En nuestro <body> necesitaremos crear un link que abrirá la ventana:
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir ventana modal</a>
Ahora tendremos justo debajo el código que representa la ventana en display:none.
<div id="example" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close">×</a>
        <h3>Cabecera de la ventana</h3>
     </div>
     <div class="modal-body">
         <h4>Texto de la ventana</h4>
        <p>Mas texto en la ventana.</p>                
    </div>
    <div class="modal-footer">
        <a href="index.html" class="btn btn-success">Guardar</a>
        <a href="#" data-dismiss="modal" class="btn">Cerrar</a>
    </div>
</div>
Y finalmente solo faltará incluir los scripts antes de la etiqueta de cierre </body>:
<script src="jquery.js"></script>
<script src="bootstrap-modal.js"></script>

vENTANA MODAL SENCILLA SIN JAVASCRIPT

Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.
Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
   ‹a href=”#cerrar”›‹/a›
   ‹div id=”modalContent”›
      ‹h1›Soy una ventana modal‹/h1›
      ‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
      ‹a href=”#cerrar”›X‹/a›
   ‹/div›
‹/div›

tomado de:http://www.psychotik.net/ventanas-de-alerta-chulas-y-animadas-con-css3/#cerrar
ejercicio:
file:///F:/camila%20DECIMO/ventana_modal/index.html


Publicadas por a la/s No hay comentarios.:

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.:
Suscribirse a: Entradas (Atom)