4 de octubre

explicacion del tema por parte del docente ,dudas

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las mismas instrucciones. Un script para una tienda de comercio electrónico por ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir los impuestos y los gastos de envío.

Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el código fuente de la aplicación, ya que:

• El código de la aplicación es mucho más largo porque muchas instrucciones están repetidas.
• Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantas modificaciones como veces se haya escrito esa instrucción, lo que se convierte en un trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

En el siguiente ejemplo, las instrucciones que suman los dos números y muestran un mensaje con el resultado se repiten una y otra vez:

var resultado;
 
var numero1 = 3;
var numero2 = 5;
 
// Se suman los números y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
 
numero1 = 10;
numero2 = 7;
 
// Se suman los números y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
 
numero1 = 5;
numero2 = 8;
 
// Se suman los números y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
...

Aunque es un ejemplo muy sencillo, parece evidente que repetir las mismas instrucciones a lo largo de todo el código no es algo recomendable. La solución que proponen las funciones consiste en extraer las instrucciones que se repiten y sustituirlas por una instrucción del tipo "en este punto, se ejecutan las instrucciones que se han extraído":

var resultado;
 
var numero1 = 3;
var numero2 = 5;
 
/* En este punto, se llama a la función que suma
    2 números y muestra el resultado */
 
numero1 = 10;
numero2 = 7;
 
/* En este punto, se llama a la función que suma
    2 números y muestra el resultado */
 
numero1 = 5;
numero2 = 8;
 
/* En este punto, se llama a la función que suma
    2 números y muestra el resultado */
...

Para que la solución del ejemplo anterior sea válida, las instrucciones comunes se tienen que agrupar en una función a la que se le puedan indicar los números que debe sumar antes de mostrar el mensaje.

Por lo tanto, en primer lugar se debe crear la función básica con las instrucciones comunes. Las funciones en JavaScript se definen mediante la palabra reservada function, seguida del nombre de la función. Su definición formal es la siguiente:

function nombre_funcion() {
  ...
}

El nombre de la función se utiliza para llamar a esa función cuando sea necesario. El concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis cuyo significado se detalla más adelante. Por último, los símbolos { y } se utilizan para encerrar todas las instrucciones que pertenecen a la función (de forma similar a como se encierran las instrucciones en las estructuras if ofor).

Volviendo al ejemplo anterior, se crea una función llamada suma_y_muestra de la siguiente forma:

function suma_y_muestra() {
  resultado = numero1 + numero2;
  alert("El resultado es " + resultado);
}

Aunque la función anterior está correctamente creada, no funciona como debería ya que le faltan los"argumentos", que se explican en la siguiente sección. Una vez creada la función, desde cualquier punto del código se puede llamar a la función para que se ejecuten sus instrucciones (además de "llamar a la función", también se suele utilizar la expresión "invocar a la función").

La llamada a la función se realiza simplemente indicando su nombre, incluyendo los paréntesis del final y el carácter ; para terminar la instrucción:

function suma_y_muestra() {
  resultado = numero1 + numero2;
  alert("El resultado es " + resultado);
}
 
var resultado;
 
var numero1 = 3;
var numero2 = 5;
 
suma_y_muestra();
 
numero1 = 10;
numero2 = 7;
 
suma_y_muestra();
 
numero1 = 5;
numero2 = 8;
 
suma_y_muestra();
...

El código del ejemplo anterior es mucho más eficiente que el primer código que se mostró, ya que no existen instrucciones repetidas. Las instrucciones que suman y muestran mensajes se han agrupado bajo una función, lo que permite ejecutarlas en cualquier punto del programa simplemente indicando el nombre de la función.

Lo único que le falta al ejemplo anterior para funcionar correctamente es poder indicar a la función los números que debe sumar. Cuando se necesitan pasar datos a una función, se utilizan los "argumentos", como se explica en la siguiente sección.

4.1.1. Argumentos y valores de retorno

Las funciones más sencillas no necesitan ninguna información para producir sus resultados. Sin embargo, la mayoría de funciones de las aplicaciones reales deben acceder al valor de algunas variables para producir sus resultados.

Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además, al invocar la función, se deben incluir los valores que se le van a pasar a la función. Los argumentos se indican dentro de los paréntesis que van detrás del nombre de la función y se separan con una coma (,).

Siguiendo el ejemplo anterior, la función debe indicar que necesita dos argumentos, correspondientes a los dos números que tiene que sumar:

function suma_y_muestra(primerNumero, segundoNumero) { ... }

A continuación, para utilizar el valor de los argumentos dentro de la función, se debe emplear el mismo nombre con el que se definieron los argumentos:

function suma_y_muestra(primerNumero, segundoNumero) { ... }
  var resultado = primerNumero + segundoNumero;
  alert("El resultado es " + resultado);
}

Dentro de la función, el valor de la variable primerNumero será igual al primer valor que se le pase a la función y el valor de la variable segundoNumero será igual al segundo valor que se le pasa. Para pasar valores a la función, se incluyen dentro de los paréntesis utilizados al llamar a la función:

// Definición de la función
function suma_y_muestra(primerNumero, segundoNumero) { ... }
  var resultado = primerNumero + segundoNumero;
  alert("El resultado es " + resultado);
}
 
// Declaración de las variables
var numero1 = 3;
var numero2 = 5;
 
// Llamada a la función
suma_y_muestra(numero1, numero2);

En el código anterior, se debe tener en cuenta que:

• Aunque casi siempre se utilizan variables para pasar los datos a la función, se podría haber utilizado directamente el valor de esas variables: suma_y_muestra(3, 5);
• El número de argumentos que se pasa a una función debería ser el mismo que el número de argumentos que ha indicado la función. No obstante, JavaScript no muestra ningún error si se pasan más o menos argumentos de los necesarios.
• El orden de los argumentos es fundamental, ya que el primer dato que se indica en la llamada, será el primer valor que espera la función; el segundo valor indicado en la llamada, es el segundo valor que espera la función y así sucesivamente.
• Se puede utilizar un número ilimitado de argumentos, aunque si su número es muy grande, se complica en exceso la llamada a la función.
• No es obligatorio que coincida el nombre de los argumentos que utiliza la función y el nombre de los argumentos que se le pasan. En el ejemplo anterior, los argumentos que se pasan son numero1y numero2 y los argumentos que utiliza la función son primerNumero y segundoNumero.

A continuación se muestra otro ejemplo de una función que calcula el precio total de un producto a partir de su precio básico:

// Definición de la función
function calculaPrecioTotal(precio) {
  var impuestos = 1.16;
  var gastosEnvio = 10;
  var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
 
// Llamada a la función
calculaPrecioTotal(23.34);

La función anterior toma como argumento una variable llamada precio y le suma los impuestos y los gastos de envío para obtener el precio total. Al llamar a la función, se pasa directamente el valor del precio básico mediante el número 23.34.

No obstante, el código anterior no es demasiado útil, ya que lo ideal sería que la función pudiera devolver el resultado obtenido para guardarlo en otra variable y poder seguir trabajando con este precio total:

function calculaPrecioTotal(precio) {
  var impuestos = 1.16;
  var gastosEnvio = 10;
  var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
 
// El valor devuelto por la función, se guarda en una variable
var precioTotal = calculaPrecioTotal(23.34);
 
// Seguir trabajando con la variable "precioTotal"

Afortunadamente, las funciones no solamente puede recibir variables y datos, sino que también pueden devolver los valores que han calculado. Para devolver valores dentro de una función, se utiliza la palabra reservada return. Aunque las funciones pueden devolver valores de cualquier tipo, solamente pueden devolver un valor cada vez que se ejecutan.

function calculaPrecioTotal(precio) {
  var impuestos = 1.16;
  var gastosEnvio = 10;
  var precioTotal = ( precio * impuestos ) + gastosEnvio;
  return precioTotal;
}
 
var precioTotal = calculaPrecioTotal(23.34);
 
// Seguir trabajando con la variable "precioTotal"

Para que la función devuelva un valor, solamente es necesario escribir la palabra reservada returnjunto con el nombre de la variable que se quiere devolver. En el ejemplo anterior, la ejecución de la función llega a la instrucción return precioTotal; y en ese momento, devuelve el valor que contenga la variable precioTotal.

Como la función devuelve un valor, en el punto en el que se realiza la llamada, debe indicarse el nombre de una variable en el que se guarda el valor devuelto:

var precioTotal = calculaPrecioTotal(23.34);

Si no se indica el nombre de ninguna variable, JavaScript no muestra ningún error y el valor devuelto por la función simplemente se pierde y por tanto, no se utilizará en el resto del programa. En este caso, tampoco es obligatorio que el nombre de la variable devuelta por la función coincida con el nombre de la variable en la que se va a almacenar ese valor.

Si la función llega a una instrucción de tipo return, se devuelve el valor indicado y finaliza la ejecución de la función. Por tanto, todas las instrucciones que se incluyen después de un return se ignoran y por ese motivo la instrucción return suele ser la última de la mayoría de funciones.

Para que el ejemplo anterior sea más completo, se puede añadir otro argumento a la función que indique el porcentaje de impuestos que se debe añadir al precio del producto. Evidentemente, el nuevo argumento se debe añadir tanto a la definición de la función como a su llamada:

function calculaPrecioTotal(precio, porcentajeImpuestos) {
  var gastosEnvio = 10;
  var precioConImpuestos = (1 + porcentajeImpuestos/100) * precio;
  var precioTotal = precioConImpuestos + gastosEnvio;
  return precioTotal;
}
 
var precioTotal = calculaPrecioTotal(23.34, 16);
var otroPrecioTotal = calculaPrecioTotal(15.20, 4);

Para terminar de completar el ejercicio anterior, se puede rendondear a dos decimales el precio total devuelto por la función:

function calculaPrecioTotal(precio, porcentajeImpuestos) {
  var gastosEnvio = 10;
  var precioConImpuestos = (1 + porcentajeImpuestos/100) * precio;
  var precioTotal = precioConImpuestos + gastosEnvio;
  return precioTotal.toFixed(2);
}
 
var precioTotal = calculaPrecioTotal(23.34, 16);

EJERCICIO 8 

Escribir el código de una función a la que se pasa como parámetro un número entero y devuelve como resultado una cadena de texto que indica si el número es par o impar. Mostrar por pantalla el resultado devuelto por la función.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 8 - Funciones básicas</title>
 
<script type="text/javascript">
var numero = prompt("Introduce un número entero");
 
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
 
function parImpar(numero) {
  if(numero % 2 == 0) {
    return "par";
  }
  else {
    return "impar";
  }
}
</script>
</head>
 
<body>
</body>
</html>

tomado de: http://librosweb.es/libro/javascript/capitulo_4/funciones.html

Funciones












En programación es muy frecuente que un determinado procedimiento de cálculo definido por un grupo de sentencias tenga que repetirse varias veces, ya sea en un mismo programa o en otros programas, lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces aparezca dicho proceso.
La herramienta más potente con que se cuenta para facilitar, reducir y dividir el trabajo en programación, es escribir aquellos grupos de sentencias una sola y única vez bajo la forma de una FUNCION.
Un programa es una cosa compleja de realizar y por lo tanto es importante que esté bien ESTRUCTURADO y también que sea inteligible para las personas. Si un grupo de sentencias realiza una tarea bien definida, entonces puede estar justificado el aislar estas sentencias formando una función, aunque resulte que sólo se le llame o use una vez.
Hasta ahora hemos visto como resolver un problema planteando un único algoritmo.
Con funciones podemos segmentar un programa en varias partes.
Frente a un problema, planteamos un algoritmo, éste puede constar de pequeños algoritmos.
Una función es un conjunto de instrucciones que resuelven una parte del problema y que puede ser utilizado (llamado) desde diferentes partes de un programa.
Consta de un nombre y parámetros. Con el nombre llamamos a la función, es decir, hacemos referencia a la misma. Los parámetros son valores que se envían y son indispensables para la resolución del mismo. La función realizará alguna operación con los parámetros que le enviamos. Podemos cargar una variable, consultarla, modificarla, imprimirla, etc.

Incluso los programas más sencillos tienen la necesidad de fragmentarse. Las funciones son los únicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente estructura:
function <nombre de función>(argumento1, argumento2, ..., argumento n) 
{ 
  <código de la función> 
} 

Debemos buscar un nombre de función que nos indique cuál es su objetivo (Si la función recibe un string y lo centra, tal vez deberíamos llamarla centrarTitulo). Veremos que una función puede variar bastante en su estructura, puede tener o no parámetros, retornar un valor, etc. 

Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto:
'Cuidado'
'Ingrese su documento correctamente'

'Cuidado'
'Ingrese su documento correctamente'

'Cuidado'
'Ingrese su documento correctamente'

La solución sin emplear funciones es:
<html>
<head>
</head>
<body>

<script type="text/javascript">
  document.write("Cuidado<br>");
  document.write("Ingrese su documento correctamente<br>");
  document.write("Cuidado<br>");
  document.write("Ingrese su documento correctamente<br>");
  document.write("Cuidado<br>");
  document.write("Ingrese su documento correctamente<br>");
</script>

</body>
</html>

Empleando una función:
<html>
<head>
</head>
<body>

<script type="text/javascript">
  function mostrarMensaje()
  {
    document.write("Cuidado<br>");
    document.write("Ingrese su documento correctamente<br>");
  }

  mostrarMensaje();
  mostrarMensaje();
  mostrarMensaje();
</script>

</body>
</html>

Recordemos que JavaScript es sensible a mayúsculas y minúsculas. Si fijamos como nombre a la función mostrarTitulo (es decir la segunda palabra con mayúscula) debemos respetar este nombre cuando la llamemos a dicha función.
Es importante notar que para que una función se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()).
Cada vez que se llama una función se ejecutan todas las líneas contenidas en la misma.
Si no se llama a la función, las instrucciones de la misma nunca se ejecutarán.
A una función la podemos llamar tantas veces como necesitemos.
Las funciones nos ahorran escribir código que se repite con frecuencia y permite que nuestro programa sea más entendible.

TOMADO DE http://www.tutorialesprogramacionya.com/javascriptya/temarios/descripcion.php?inicio=10&cod=15









Entrada de datos por teclado.














Para la entrada de datos por teclado tenemos la función prompt. Cada vez que necesitamos ingresar un dato con esta función, aparece una ventana donde cargamos el valor. Hay otras formas más sofisticadas para la entrada de datos en una página HTML, pero para el aprendizaje de los conceptos básicos de JavaScript nos resultará más práctica esta función.
Para ver su funcionamiento analicemos este ejemplo:
  <html>
  <head>
  </head>
  <body>
  <script type="text/javascript">
    var nombre;
    var edad;
    nombre=prompt('Ingrese su nombre:','');
    edad=prompt('Ingrese su edad:','');
    document.write('Hola ');
    document.write(nombre);
    document.write(' asi que tienes ');
    document.write(edad);
    document.write(' años');
  </script>
  </body>
  </html>

La sintaxis de la función prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor 
  inicial a mostrar en la ventana>);

La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor inicial a mostrar.

TOMADO DE http://www.tutorialesprogramacionya.com/javascriptya/temarios/descripcion.php?cod=4&inicio=


EJERCICIO DEL PROMPT

<!DOCTYPE html>

<html>

<body>




<p>Click the button to demonstrate the prompt box.</p>




<button onclick="myFunction()">Try it</button>




<p id="demo"></p>




<script>

function myFunction() {

    var person = prompt("Please enter your name", "Harry Potter");

    

    if (person != null) {

        document.getElementById("demo").innerHTML =

        "Hello " + person + "! How are you today?";

    }

}

</script>




</body>

</html>



MÉTODO

UTILIDAD

EJEMPLOS aprenderaprogramar.com



alert (mensaje)

Muestra una ventana de diálogo con la cadena especificada o con la conversión a string del objeto pasado como parámetro y un botón “Aceptar”

alert('hola usuario');


confirm (mensaje)

Abre un cuadro de diálogo con un mensaje y dos botones, Aceptar y Cancelar. Devuelve un valor booleano: true si se pulsa aceptar o false si se pulsa cancelar.

if (window.confirm("Va a salir de la aplicación ¿Desea salir realmente?")) { window.alert('Gracias por visitarnos'); }

// Si usuario pulsa aceptar se cumple la condición


clearInterval (referenciaTimer)

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.


clearTimeout (referenciaTimer)

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.


open (opURL, opName)

Uso habitual var nuevaVentana = window.open (…) donde nuevaVentana es una referencia al objeto window que se crea. opURL es un parámetro opcional, url a cargar en una nueva pestaña. opName nombre opcional que puede usarse para fijar atributo target en un link.

var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre');

//Si no se especifica url de destino, se abre una pestaña en blanco


open (opURL, opName, opParametros)

Uso habitual var nuevaVentana = window.open (…) donde nuevaVentana es una referencia al objeto window que se crea. opURL es un parámetro opcional, url a cargar en la nueva ventana. opName: nombre, opcional, puede usarse para fijar atributo target en un link. opParametros es una lista de parámetros como left ó top para posición, height o width para dimensiones, outerHeight, outerWidth, innerHeight, innerWidth, menubar, toolbar, location, resizable, scrollbars, status, titlebar…

var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', ', , resizable=true, menubar=yes');

// Puede haber diferencias entre navegadores en la respuesta a algunos de los parámetros


close()

Cierra una ventana. Sólo se pueden cerrar ventanas que hayan sido abiertas por un script. No es posible cerrar la ventana principal del navegador por no abrirse por un script.

nuevaVentana.close();

//Cierra la ventana


moveBy (valorX, valorY)

Desplaza el objeto window una distancia valorX en horizontal y valorY en vertical, en píxeles, respecto de su posición inicial (movimiento relativo). No se pueden desplazar ventanas no creadas con scripts.

nuevaVentana.moveBy(200, 200);

nuevaVentana.focus();

// Si no usamos focus() la ventana puede perder el foco y no ser visible.

Si la ventana contiene una url que no pertenece al mismo directorio-dominio que la ventana madre podemos obtener un error de tipo Error: Permission denied to access property 'moveBy'


focus()

Pone el foco en una ventana que lo ha perdido

nuevaVentana.focus();


moveTo(coordX, coordY)

Coloca el objeto window en una posición valorX en horizontal y valorY en vertical, en píxeles, respecto de la esquina superior izquierda de la pantalla. No se pueden desplazar ventanas no creadas con scripts.

nuevaVentana.moveTo(0, 0);

nuevaVentana.focus();

// Si no usamos focus() la ventana puede perder el foco y no ser visible.


print()

Abre el cuadro de diálogo para imprimir por impresora el contenido de la ventana

window.print();


prompt(msg, opValorDefecto)

Muestra un cuadro de diálogo pidiendo una entrada al usuario y, opcionalmente, un valor de defecto. Devuelve un objeto String con el contenido introducido por el usuario, o null si se pulsa la tecla cancelar. Si se pulsa aceptar sin introducir nada retorna una cadena vacía.

var persona = prompt("¿Cuál es tu nombre?", "Barack Obama");

if (persona != null) {alert("Hola " + persona);}

//Por ejemplo <<Hola Pedro>>


resizeBy (varX, varY)

Modifica el tamaño de la ventana agrandándola o empequeñeciéndola en la cantidad de pixels indicada por varX para la dimensión horizontal o varY para la dimensión vertical. No se pueden redimensionar ventanas no creadas con scripts.

nuevaVentana.resizeBy(250, 250);

nuevaVentana.focus();

// Si no usamos focus() la ventana puede perder el foco y no ser visible.


resizeTo(ancho, alto)

Modifica el tamaño de la ventana y lo establece a los valores de ancho y alto especificados. No se pueden redimensionar ventanas no creadas con scripts.

nuevaVentana.resizeTo(100, 100);

nuevaVentana.focus();

// Si no usamos focus() la ventana puede perder el foco y no ser visible.


scrollBy(varX, varY)

Hace scroll en la ventana en la cantidad de pixels indicada por varX para la dimensión horizontal o varY para la dimensión vertical.

window.scrollBy(0, 400);

//Desplaza el scroll 400 píxeles hacia abajo


scrollTo(posX, posY)

Hace scroll hasta dejar como la esquina superior izquierda a posX pixeles del origen en horizontal y posY píxeles en vertical.

window.scrollTo(0, 400);

//Coloca el scroll 400 píxeles por debajo del origen


scrollByLines(numLin)

Hace scroll hacia arriba o abajo en el número de líneas especificado. Una línea se corresponde con un párrafo <p>.

window.scrollByLines(20);


setInterval(…)

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.


setTimeout

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.


stop()

Detiene la carga de los contenidos de la ventana de la misma manera que si el usuario pulsara el botón para detener la carga en el navegador.

window.stop();


Otros

blur() quita el foco, btoa('cadena') codifica en base-64 una cadena y atob(referencia) decodifica una referencia codificada en base-64, fullScreen() indica si la ventana está a pantalla completa o no, find('cadena') para buscar una cadena en la ventana, minimize() para minimizar la ventana

Algunos de estos métodos no son soportados por todos los navegadores. No vamos a ver ejemplos de ellos.


TOMADO DE 

http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=862:window-javascript-metodos-efectos-confirm-prompt-open-moveby-moveto-focus-resize-close-cu01174e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

 Investigar sobre ventanas emergentes o ventanas popup en javascript.


La forma correcta de lanzar una ventana pop-up con Javascript

El siguiente es el código a utilizar para lanzar un pop-up:

<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>Lanzar correctamente

Simplemente cambiar en href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en pixeles).

El problema con las otras formas de lanzar un pop-up

La forma más común de lanzar un pop-up erroneamente es la siguiente:

<a href="#" onClick="window.open('/index.htm','popup','width=300,height=400')">Lanzar mal</a>Lanzar mal

Aquí, el autor utiliza el atributo href="#" simplemente para obtener el efecto visual de la manito y el subrayado sobre el link. Luego, utiliza el evento onClick sobre ese link para abrir la ventana. Lo probamos en el navegador, y funciona perfectamente.

Sin embargo, veamos los problemas que resultan de este link.

El 10% de navegantes que va por la vida sin Javascript jamás podrá ver el contenido que se lanza en ese pop-up. Nada ocurrirá al clickear en el link. Ese contenido quedará inaccesible.
Los buscadores, en su recorrido indexando la Web, no podrán seguir el link y archivar la página.. Si el contenido no puede encontrarse, ¿existe?.
Es imposible agregar el link a Favoritos (o Marcadores). "Agregar a Favoritos" toma el link desde el <a href="pagina.htm">. Si en lugar de una dirección web tenemos <a href="#">, resulta que nada se agregará a Favoritos.
Al pasar el mouse sobre el link, no puede verse la dirección de la página a la que nos lleva, solo veremos "#" en la barra de estado.
El navegante que haga click derecho para "Abrir en ventana nueva", es decir, desee explícitamente lanzar el contenido de ese link en otra ventana, lanzará en su lugar el contenido de la misma página que estaba viendo.
Peor aún, quien haga Shift + Click en el link para lanzarlo en otra ventana, obtendrá no una sino dos ventanas inútiles.
Por último, cabe recordar que existe un estándar que indica el simple <a href="..."> como la forma correcta de relacionar un documento con otro en la Web. Esta forma siempre será válida, no dependerá de ninguna tecnología de script.


Y todo puede ser peor... Existe una forma aún más perversa, que consiste en utilizar el pseudo-protocolo javascript: para utilizar el código directamente desde el href.

<a href="javascript:window.open('popups.htm','popup','width=300,height=400');">Lanzar peor</a>Lanzar peor

Intenta hacer click derecho y Abrir en una ventana nueva. Lanzará una ventana en blanco, y de esta, con suerte, el pop-up. Una vergüenza.

Para quienes crean que pueden quedarse tranquilos confiando en que su herramienta visual lo hace bien, lamento decirles que la herramienta más usada para crear sitios web hoy en día también lo hace mal. Habrá que aprender a hacerlo a mano.

El funcionamiento de la forma correcta

<a href="/index.htm" target="popup" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>

Vemos aquí el código para hacer correctamente el link que lanza el pop-up. Simplemente, en lugar de definir la dirección del nuevo .htm dentro de la función window.open, lo que hacemos es indicarle que desde el mismo tag (this) deberá tomar el valor del atributo href.

Con esto logramos conservar el valor semántico del href, la dirección de la página con que se vincula, y le sumamos, si el cliente dispone de Javascript, el que se abra en un popup. Pero si no dispone de Javascript, si es un navegador sólo-texto, si es un motor de búsqueda, funcionará igual.

Y al ser un link normal, con href, podrá ser agregado a Favoritos, indexado por buscadores

Finalmente, si el cliente tiene Javascript y el link se lanza como pop-up, el agregado de return false al final hará que la página inicial no de "saltos" o se cargue de nuevo luego de 



Ventanas emergentes en sitios web

El término denomina a las ventanas que emergen automáticamente (generalmente sin que el usuario lo solicite). A menudo, las ventanas emergentes se utilizan con el objeto de mostrar un aviso publicitario de manera intrusiva. Una técnica relacionada a esta es la denominada pop-under (que consiste en abrir de manera intempestiva nuevas ventanas que se sitúan detrás de la ventana en uso).

Los anuncios pop-under (como dicho anteriormente) son una variedad de lo que son los pop-up. Este abre una ventana nueva en el navegador, detrás de ventana activa. Los pop-unders interrumpen menos a los usuarios, pero no son vistos hasta que el usuario cierre las ventanas que está utilizando, haciendo que sea más difícil para el usuario determinar qué página web las abrió.

En ocasiones, la ventanas emergentes o pop-ups, activan nuevas ventanas, lo que puede dar lugar a un bucle infinito, sea intencionado o no.

Debido a que la publicidad en formato ventana emergente es considerada molesta por muchos usuarios, continuamente aparecen técnicas y programas que, bajo el nombre común de anti pop-ups o en inglés pop-up Killers o pop-up blocker, evitan la aparición de este tipo de ventanas emergentes. Desde 2004, algunos de los sitios web más importantes comenzaron a limitar el uso de las ventanas emergentes por considerarlas un formato publicitario demasiado intrusivo. Tal es el caso de MSN.

Actualmente, muchos navegadores de Internet incorporan un sistema que evita la aparición de ventanas emergentes no solicitadas. Para determinar si una ventana emergente ha sido solicitada o no, se suele usar un antiguo principio de la programación HTML, que dice que una ventana sólo debe abrirse mediante un clic y que un solo un clic no debe abrir más de una ventana.

TOMADO DE https://es.wikipedia.org/wiki/Ventana_emergente