clase 2016-03-03

[fecha de publicacion: 2016-03-03]

¿Qué es una ventana emergente?
También conocidas como pop-ups o, su maliciosa variante, pop-under
En Internet, una ventana emergente (en inglés se le conoce como pop-up window) es una ventana de tu navegador de Internet que aparece automáticamente, sin ser solicitada y que usualmente tiene como finalidad desplegar publicidad, dirigir tráfico de Internet a ciertas páginas o recopilar direcciones de correo electrónico. También existen ventanas emergentes que son parte de la experiencia que te brinda una página, pero en realidad éstas son las menos frecuentes.

Una ventana emergente no solicitada es una molestia para los usuarios, ya que usualmente son muy intrusivas.

Comúnmente son disparadas por cierto tipo de contenido susceptible a usar este tipo de medios para publicitarse o invitar a visitar páginas de Internet; las páginas con contenido para adultos son el ejemplo más común.

Una nueva variante de las ventanas emergentes no solicitadas es tal que en lugar de que las ventanas aparezcan encima de las demás, aparecen por debajo de la ventana en la que está navegando el usuario, ocultando así qué página originó la ventana emergente y sólo te das cuenta si mueves la ventana principal o la cierras.

Por otro lado, como lo mencioné brevemente, existen también las ventanas que son parte del flujo normal de una página en Internet, por ejemplo páginas que abren una ventana para presentar formas de llenado de información o páginas que abren ventanas para presentar textos de ayuda. También existen páginas que ofrecen imágenes o fotos que presentan amplificaciones de las mismas usando ventanas emergentes. Este tipo de ventanas, las que son parte del flujo normal de una página, no son consideradas como candidatas a ser bloqueadas por los bloqueadores de páginas emergentes, sin embargo pudiera haber casos aislados (son los menos) en los que la desactivación del bloqueo sea necesario para completar un procedimiento de llenado de formas o de instalación de algún software descargado de Internet. Afortunadamente, la mayoría de los navegadores principales de Internet te avisan de alguna forma [sutil] si se bloqueó una ventana emergente.

Bloqueo de ventanas emergentes

Prácticamente todos los navegadores modernos de Internet cuentan con bloqueadores de ventanas emergentes no solicitadas y ya están activados por defecto. Si quieres probar que tu navegador esté bloqueando correctamente ventanas emergentes, puedes ir a esta página de verificación de bloqueo de ventanas emergentes. Si estás usando un navegador que no tiene bloqueador de ventanas emergentes, puedes visitar esta página con pruebas y sugerencias de bloqueadores escritos por terceros.

Nota que aún con bloqueado de páginas emergentes pudiera haber casos en los que algunas aparecieran (ya sean pop-up o pop-under).

No se debe confundir el bloqueo de ventanas emergentes con el bloqueo de publicidad en páginas de Internet. Para bloquear estos últimos en tu navegador de Internet, debes de usar extensiones o complementos escritos por terceros (los navegadores de Internet no lo incluyen por defecto).
Control de ventanas secundarias en Javascript


Una de las utilidades más interesantes de Javascript es el control de ventanas secundarias (popups en inglés). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser más pequeñas que las ventanas normales y generalmente no tienen los menús del navegador, barra de direcciones, etc.



Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar información de una ventana a otra, etc. En este manual veremos cómo se hacen todas estas cosas con las ventanas secundarias para aprender a controlarlas prefectamente.
Apertura y configuración de popups con javascript



En determinadas ocasiones es muy útil abrir un enlace en una ventana secundaria, es decir, una ventana aparte que se abre para mostrar una información específica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que:
El usuario no se marcha de la página donde estaba el enlace.
La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas más grandes o pequeñas y con más o menos menús.
En general, el grado de control de la ventana secundaria utilizando Javascript aumenta.
Pincha aquí para ver lo que es una ventana secundaria
Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos cada una de ellas

Abrir una ventana con HTML

Se puede conseguir abrir una ventana secundaria muy fácilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la página se abrirá en una ventana secundaria. También podemos poner target="xxx" para que el enlace se presente el la ventana llamada xxx o en el frame xxx.

El enlace tendría que tener esta forma:

<a href="mipagina.html" target="_blank">

El problema de abrir una página secundaria con HTML consiste en que no podemos definir la forma de ésta ni podremos ejercer mayor control sobre élla, tal como comentábamos entre las ventajas de abrir una ventana secundária con Javascript. La ventana que se abre siempre será como el usuario tenga definido por defecto en su navegador.

Abrir una ventana con Javascript

Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cómo abrir una ventana secundaria utilizando Javascript.

1. Sentencia Javascript para abrir una ventana

La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa función, pero ahora veremos que no reviste ninguna complicación.

La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo:

window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)

Veamos rápidamente cada uno de estos parámetros por separado.

URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com
nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML
forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc

Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria:

window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")

Esto quiere decir que abra la página inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras de desplazamiento.

Una aclaración adicional, si después de abrir esa ventana colocamos otro enlace en la página que abría la ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrará en la ventana secundaria.

2. Función que abre una ventana

Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de abrirla y que reciba por parámetro la URL que se desea abrir.

El script es sencillo, veámoslo a continuación:

<script language=javascript>
function ventanaSecundaria (URL){
   window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
</script>

3. Colocamos un enlace

Este enlace no debe estar dirigido directamente a la página que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsación de un enlace lo hacemos así:

<a href="javascript:sentencia_javascript_para_abrir_la_ventana">

4. El enlace llama a la función que abre la ventana

Ahora Veamos cómo quedaría todo ese enlace en la página.

<a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>

Que da como resulado:

Pincha en este enlace para abrir la ventana secundaria

(En la página que vayamos a colocar este enlace deberíamos tener el script que hemos hecho anteriormente que contenía la función para abrir la ventana.)

Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro de la función ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles.

Parámetros para dar forma a una ventana

Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria.

Width Ajusta el ancho de la ventana. En pixels
Height Ajusta el alto de la ventana
Top Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana.
Left Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana.
Scrollbars Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS).
Resizable Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo.
Directories
(barra directorios) A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegación que tienen los navegadores más populares, como podría ser la barra de menús o la barra de estado.

Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.
Location
(barra direcciones)
Menubar
(barra de menús)
Status
(barra de estado)
Titlebar
(la barra del título)
Toolbar
(barra de herramientas)

Abrir una ventana sin un enlace

En otras ocasiones desearemos abrir una ventana secundaria automáticamente, es decir, sin necesidad de que el usuario pulse sobre ningún enlace. En este caso, el código de la función ventanaSecundaria nos sirve también y habrá que añadir una línea de código Javascript a continuación de la función ventanaSecundaria. Esta línea a añadir simplemente será una llamada a la función que se ejecutará según se está cargando la página. Veamos como quedaría este código:

<script language=javascript>
function ventanaSecundaria (URL){
   window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}

ventanaSecundaria("http://www.desarrolloweb.com");
</script>

Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria, como está fuera de una función se ejecuta según se está cargando la página.

Referencias: Hemos publicado un manual en DesarrolloWeb.com que explica en detalle cómo controlar ventanas secundarias. No solo abrirlas, también aprendemos a cerrarlas, comunicar entre ventanas, etc. Control de ventanas en Javascript
También hemos propuesto crear un popup con Javascript y capas (DHTML), que evita los sistemas que bloquean ventanas secundarias, ya que no es exactamente una ventana.

tomado de:



Ejercicios
1. Crear un programa que averigue si un número positivo es par o impar. El programa leerá un número entero positivo y dará el resultado, adicional a ello debe mostrar su equivalente numero romano.
2. En la universidad el costo de la matrícula se calcula tomando las horas totales que el estudiante tomará en el semestre y cada hora se multiplica por $ 115000. Se desea construir un programa en el que el usuario ingrese las horas de clase y el sistema le imprima el costo de la matrícula para el semestre.
3. Programa que lee tres notas de un alumno, calcula el promedio e indicar el valor de la nota y la palabra "Excelente" si tiene un valor mayor que 8 , "Aprobado" entre 5 y 8 , "Suspendido" < 5. Las notas deben estar entre 0 y 10; si no lo son se debe mostrar un mensaje indicando que no se puede realizar la solucion del programa.
4. Cuando se contrata a un empleado a este se le descuenta del salario el 8% de lo que gana de forma que el 4% es para salud y el 4% para afiliación a riesgos profesionales. Construir un programa que permita leer el salario de una persona, cuánto le será descontado por cada concepto y cuánto termina recibiendo realmente.
5. Para un salario bruto hasta de $1.500, no hay retención. Para un salario bruto de $1500 a  $ 3.000 el porcentaje de retención es de 5%. Para un salario bruto mayor de $3000 el porcentaje de retención es 8%. Visualizar el nombre del empleado, el salario bruto, el valor de la retención y el salario neto. Se debe leer el nombre y el salario.
 
Para Tener en cuenta:
Como validar la cantidad de caracteres digitados.
<script>
        var n = prompt("Dato");
        if (n.length >= 10){
        alert("Correcto tiene mas o igual de 10 digitos");
        }
        else{
        alert("Tiene menos de 10 caracteres");
        }
        </script>



1. <script>

var n= parseInt(prompt("digite numero"));
 if(n%2==0){
  alert("par")
 }
 else{
  alert("impar")
 }
 document.write()
 </script>


1.<script>

var n= parseInt(prompt("digite numero"));
 if(n%2==0){
  alert("par")
 }
 else{
  alert("impar")
 }
 document.write()
 </script>

2.
<script>

var h = parseInt(prompt("digite numero de horas"));
 var v =115000
  var m = h*v

 document.write("el costo de la matricula para el semestre es " m);
 
  /*En la universidad el costo de la matrícula se calcula tomando las horas totales que el estudiante tomará en el semestre y cada hora se multiplica por $ 115000. Se desea construir un programa en el que el usuario ingrese las horas de clase y el sistema le imprima el costo de la matrícula para el semestre.*/
 </script>
3.
<script>
/*3. Programa que lee tres notas de un alumno, calcula el promedio e indicar el valor de la nota y la palabra "Excelente" si tiene un valor mayor que 8 , "Aprobado" entre 5 y 8 , "Suspendido" < 5. Las notas deben estar entre 0 y 10; si no lo son se debe mostrar un mensaje indicando que no se puede realizar la solucion del programa.*/

var n1 = parseFloat(prompt("digite n1"));
var n2 = parseFloat(prompt("digite n2"));
var n3 = parseFloat(prompt("digite n3"));

var n= (n1++n2+n3)/3

alert(n)
if(n>8){
alert("excelente")

}
if(n=>5||n=<8){
alert("aprobado")
}
if(n<5){
alert("suspendido")
}
</script>
4.
<script>
/*4. Cuando se contrata a un empleado a este se le descuenta del salario el 8% de lo que gana de forma que el 4% es para salud y el 4% para afiliación a riesgos profesionales. Construir un programa que permita leer el salario de una persona, cuánto le será descontado por cada concepto y cuánto termina recibiendo realmente.*/

var s = parseFloat(prompt("digite salario"));
var sa = (s*4)/100
var a = (s*4)/100
var sn= s-sa-a

document.write( "su salario es " + s + "- salud " + sa + "-afiliacion por riesgos profesionales " a + " terminara recibiendo " + sn)

</script>
5.
<script>
/*5. Para un salario bruto hasta de $1.500, no hay retención. Para un salario bruto de $1500 a  $ 3.000 el porcentaje de retención es de 5%. Para un salario bruto mayor de $3000 el porcentaje de retención es 8%. Visualizar el nombre del empleado, el salario bruto, el valor de la retención y el salario neto. Se debe leer el nombre y el salario.*/
var n = prompt("digite su nombre");
var s = parseFloat(prompt("digite salario"));
var r5= (s*5)/100
var r8= (s*8)/100
if(s<=1500){
alert(n + s + "no hay retencion"+ "salario neto " s);
}

if(s>=1500||s<=3000){
alert(n + s +"retencion" + r5 + "salario neto " (s+r5));
}
if(s<=1500){
alert(n + s +"retencion" + r8 + "salario neto " (s+r8))
}
 
 </script>

Comentarios

Entradas populares de este blog

TEMA: Tarea

Clase 2017-02-28

clase 2016-04-14