2.13. Objetos del navegador (BOM). Window I
Resumen de Propiedades: https://www.w3schools.com/jsref/obj_window.asp
<body>
<p id="ventana"></p>
<script>
window.name = "Mi Ventana";
var texto = "";
// Nombre de la ventana
texto +="Nombre: "+window.name;
// Tamaño de la ventana con toolbar y scrolbar
texto +="<br>Ancho externo: "+window.outerWidth;
texto +="<br>Alto externo: "+window.outerHeight;
// Tamaño de la ventana sin toolbar y scrolbar
texto +="<br>Ancho interno: "+window.innerWidth;
texto +="<br>Alto interno: "+window.innerHeight;
// scroll Horizontal y vertical
texto +="<br>Scroll Horizontal "+window.pageXOffset;
texto +="<br>Scroll Vertical "+window.pageYOffset;
document.getElementById("ventana").innerHTML = texto;
/* PROPIEDADES CON IFRAMES:
- frames : devuelve todos los elementos iframe a la ventana
- framesElement: devuelve el frame en que la ventana esta insertada
- length : devuelve el numero de frame que tiene la ventana
PROPIEDADES CON OTRAS VENTANAS
- closed : devuelve un BOOLEANO sa la ventana está cerrada
- opener : Devuelve una referencia con la ventana que creó la ventana actual
- parent : devuelve la ventana padre de la ventana actual
- self : devuelve la ventana actual
OTRO OBJETOS DEL NAVEGADOR
window.document
window.navigator
window.screen
window.history
window.location
*/
</script>
</body>
// METODOS DE window mas importantes
var miVentana
//open(<URL>,<nombre>,<especificaciones>)
function crearVentana(){
//miVentana=window.open("http://www.google.com","","")
miVentana=window.open("","","width=500,height=300");
miVentana.document.write("<h1> Esta es mi ventana</h1>")
}
// close() cierra una ventana
function cerrarVentana(){
miVentana.closed();
}
//resizeBy(<no. pixeles,<no. pix>) redimensiona una ventana un numero de pixeles respecto a su tamaño actual
function redimensionarVentana(){
miVentana.resizeBy(10,10);
}
//moveBy(<no. pixeles,<no. pix>) mueve una ventana un numero de pixeles respecto a su posicion actual
function moverVentana(){
miVentana.moveBy(10,10);
}
//moveTo(<no. pixeles,<no. pix>) mueve una ventana a una posicion en concreto
// scrollBy(<no. pixeles,<no. pix>) mueve la barraScroll un numero de pixelesdesde la posicon actual
// scrollTo(<no. pixeles,<no. pix>) mueve la barraScroll a una posicion determinada
// focus()
function enfocar(){
miVentana.focus();
}
//stop() detener la carga de la pagina (para cuando se guinde por ej)
//print(): imprime la ventana indicada
function imprimir(){
//print();
miVentana.print();
}
</script>
<button onclick="crearVentana()"> Crear una Ventana </button>
<button onclick="cerrarVentana()"> Cerrar una Ventana </button>
<button onclick="redimensionarVentana()"> Redimensiona una Ventana </button>
<button onclick="moverVentana()"> Mover una Ventana </button>
<button onclick="enfocar()"> Ubicar el focus de una Ventana </button>
<button onclick="imprimir()"> Imprimir </button>
</body>
</html>
alert () Muestra un cuadro de alerta con un mensaje y un botón Aceptar
atob () decodifica una cadena codificada en base 64
blur () Elimina el foco de la ventana actual
btoa () codifica una cadena en base-64
clearInterval () Borra un temporizador establecido con setInterval ()
clearTimeout () Borra un temporizador establecido con setTimeout ()
close () Cierra la ventana actual
confirm () Muestra un cuadro de diálogo con un mensaje y un botón Aceptar y un botón Cancelar
focus () Establece el foco en la ventana actual
getComputedStyle () Obtiene los estilos CSS calculados actuales aplicados a un elemento
getSelection () Devuelve un objeto Selection que representa el rango de texto seleccionado por el usuario
matchMedia () Devuelve un objeto MediaQueryList que representa la cadena de consulta de medios CSS especificada
moveBy () Mueve una ventana relativa a su posición actual
moveTo () Mueve una ventana a la posición especificada
abrir () Abre una nueva ventana del navegador
print () Imprime el contenido de la ventana actual
prompt () Muestra un cuadro de diálogo que solicita la entrada del visitante
resizeBy () Cambia el tamaño de la ventana por los píxeles especificados
resizeTo () cambia el tamaño de la ventana al ancho y la altura especificados
scroll () Obsoleto. Este método ha sido reemplazado por el método scrollTo ().
scrollBy () Desplaza el documento por el número de píxeles especificado
scrollTo () Desplaza el documento a las coordenadas especificadas
setInterval () Llama a una función o evalúa una expresión a intervalos específicos (en milisegundos)
setTimeout () Llama a una función o evalúa una expresión después de un número específico de milisegundos
stop () Impide que se cargue la ventana
----------------
<script>
// alert(<mensaje) muestra un mensaje y no devuelve ningun valor
alert("Hola GOYO");
// prompt(<mensaje>[,<texto por defecto>]); retorna un valor
var respuesta = prompt("¿cual es tu nombre?", "Introduce tu nombre")
//confirm(<mensaje>) muestra un mensaje al usuario y 2 botones
alert("Hola"+respuesta);
var respuesta2 = confirm("Te gusta javascript?")
if(respuesta2) alert("Acabas de decir que TE GUSTA Javascript")
else alert("Acabas de decir que NO TE GUSTA Javascript")
// operador ternario
alert((respuesta2) ? "Te gusta Javascript" : "NO te gusta Javascript")
</script>
<body>
<p id="reloj"></p>
<script>
/*
EVENTO DE Tiempo
- El objeto window permite ejecutar intervalos de tiempo
Hay 3 metodos:
// setTimeout(<function>, <milisegundos>) Indica los segundo que deben pasar para ejecutar la funcion
*/
function saludar(){
alert("Pasaron 3 segundos para saludar con la funcion setTimeout");
}
// clearTimeout(<variable timeout>) si asignamos un setTimeout a una variable podemos detener su ejecucion con clearTimeout
function canc(){
clearTimeout(sal);
alert("Cancelado el saludo");
}
//setInterval(<function>,<milisegundos>) repite una funcion cada intervalo de tiempo
var int = setInterval(reloj, 1000)
function reloj(){
var fecha = new Date(); // Fecha actual
document.getElementById("reloj").innerHTML = fecha.getSeconds();
}
</script>
<button onclick="setTimeout(saludar,3000)">Saluda a los 3 segundos</button>
<button onclick="sal = setTimeout(saludar,3000)">Saluda a los 3 segundos (asignado a variable)</button>
<!--<button onclick="clearTimeout(sal)">Cancela el saludo (asignado a variable)</button>
-->
<button onclick="reloj()">Cancela el saludo (asignado a variable)</button>
<button onclick="clearTimeout(int)">Cancela los intervalos de segundo (asignado a variable int)</button>
</body>
navigator
Propiedades del objeto Navigator
Descripción de propiedad
appCodeName Devuelve el nombre del código del navegador
appName Devuelve el nombre del navegador
appVersion Devuelve la información de la versión del navegador
cookieEnabled Determina si las cookies están habilitadas en el navegador
geolocalización Devuelve un objeto de geolocalización que se puede usar para ubicar la posición del usuario
language Devuelve el idioma del navegador
onLine Determina si el navegador está en línea
plataforma Devuelve para qué plataforma se compila el navegador
product Devuelve el nombre del motor del navegador
userAgent Devuelve el encabezado de usuario-agente enviado por el navegador al servidor
Métodos del objeto Navigator
Descripción del método
javaEnabled () Especifica si el navegador tiene o no habilitado Java
<body>
<p id="navegador"></p>
<script>
var texto = "";
//appCodeName: CodeName del navegador
texto += "<br>CodeName: "+navigator.appCodeName;
//appName: Nombre del navegador
texto += "<br>Nombre: "+navigator.appName;
//appVersion: Version del navegador
texto += "<br>Version: "+navigator.appVersion;
//product: motor del navegador
texto += "<br>Motor: "+navigator.product;
//platform: Plataforma del navegador... sale win32
texto += "<br>Plataforma: "+navigator.platform;
//onLine: navegador online/offline
texto += "<br>OnLine: "+navigator.onLine;
//language: Idioma del navegador
texto += "<br>Idioma : "+navigator.language;
//cookieEnabled: cookie activada
texto += "<br>Cookie: "+navigator.cookieEnabled;
//userAgent: cabecera user-agent devuelta por el navegador al servidor
texto += "<br>CodeName: "+navigator.userAgent;
texto += "<br>Java activado: "+navigator.javaEnabled();
//javaEnabled(): devuelve true o false si esta activado java
document.getElementById("navegador").innerHTML = texto;
alert("Java activado: "+navigator.javaEnabled());
</script>
</body>
<p id="pantalla"></p>
<script>
var texto = "";
texto += "<br> Ancho con width: "+screen.width;
texto += "<br> Al con height: "+screen.height;
texto += "<br> Ancho sin barra con availWidth: "+screen.availWidth;
texto += "<br> Alto sin barra con availHeight: "+screen.availHeight;
document.getElementById("pantalla").innerHTML = texto;
</script>
<body>
<p id="Historial"></p>
<script>
//History guarda el historial de las url visitadas
//PROPIEDAD
//length: numero de url en el historial de la pagina
alert("URL del historial"+history.length)
//METODOS
//back: carga la url anterior en el historial
function Atras(){
history.back();
}
//foward: carga la url siguiente en el historial
function Adelante(){
history.foward();
}
//go(<numero|url>) va a la pagina indicada con el numero + positivo hacia delante - hacia a tras o a la url especificadala url siguiente en el historial
function Ir(){
var numero = prompt("indique el numero de pagina: ");
history.go(numero);
}
</script>
<button onclick="Atras()">Ir hacia atras</button>
<button onclick="Adelante()">Ir hacia adelante</button>
<button onclick="Ir()">Ir al numero indicado</button>
</body>
<body>
<p id="location"></p>
<script>
// Location guarda inf. de la URL actual
//PROPIEDADES
var texto = ""
//href: url de la pagina
texto += "<br> Href: "+location.href;
//hostname: nombre del host pagina
texto += "<br> Host: "+location.hostname;
//protocol: protocolo de la pagina
texto += "<br> Protocol: "+location.protocol;
//hasg: ancla de la pagina
texto += "<br> Ancla: "+location.hasg;
//host: nombre del hostname y del puerto
texto += "<br> HOST: "+location.host;
//origin: nombre del protocolo, hostname y del puerto
texto += "<br> HOST: "+location.origin;
//search: parte del url luego del signo interrogacion
texto += "<br> search: "+location.search;
document.getElementById("location").innerHTML = texto
//METODOS
//assign(<url>) asigna un nuevo documento a la pagina
function nuevodocumento(){
locattion.assign("http://www.google.com")
}
//reload() recarga la pagina
function recarga(){
locattion.reload()
}
//replace(<url>) sustituye la pagina por otra. DESAPARECE SU HISTORAL
function sustituye(){
locattion.replace("http://www.google.com");
}
</script>
<button onclick="nuevodocumento()">Ir a una nueva pagina</button>
<button onclick="recarga()">Ir a una nueva pagina</button>
</body>
No hay comentarios.:
Publicar un comentario