» » Objetivo Propio Del Navegador JS

Objetivo Propio Del Navegador JS

El objeto navigator es uno de los primeros objetos que incluyó el DOM y permite obtener información sobre el propio navegador. En Internet Explorer, el objeto navigator también se puede acceder a través del objeto clientInformation.

Aunque es uno de los objetos menos estandarizados, algunas de sus propiedades son comunes en casi todos los navegadores. A continuación se muestran algunas de esas propiedades:

Objetivo


Utilizar los objetos relacionados con el navegador en una aplicación jаvascript

Lecturas propuestas



Objetos del Navegador


Cuando se carga una página en un navegador se crean un número de objetos característicos del navegador según el contenido de la página.

La siguiente figura muestra la jerarquía de clases del Modelo de Objetos del Documento (Document Object Model).
El objeto window es el de más alto nivel, contiene las propiedades de la ventana y en el supuesto de trabajar con marcos (frames), se genera un objeto window para cada uno. El objeto document contiene todas las propiedades del documento actual, como son: su color de fondo, enlaces, imágenes, etc. Véase la figura.
Objetos del Navegador
El objeto navigator contiene las propiedades del navegador. El objeto location contiene las propiedades de la URL activa. El objeto history contiene las propiedades que representan a las URL que el usuario ha visitado anteriormente. Es como una caché. El objeto screen contiene información referente a la resolución de la pantalla que muestra la URL.

El Objeto window

Contine las propiedades básicas de la ventana y sus componentes. Algunas de los datos más elementales son:

  • defaultStatus contiene el mensaje que aparece en la barra de estado)
  • frames es una matriz que representa todos los frames de la ventana
  • length contiene el número de frames de la ventana
  • name contiene el nombre de la ventana
  • self hace referencia a la ventana activa

El siguiente ejemplo muestra cómo modificar el mensaje que aparece en la barra de estado del navegador.
<html>
<head><title> Ejemplo del Objeto window</title> </head>
<body>
<script language=jаvascript>

window.defaultStatus = "Hola ;-), este mensaje aparece en la barra de estado";

</script>
</body>
</html>
El objeto window también posee una serie de métodos que permiten ejecutar funciones específicas con las ventanas, como por ejemplo, crear ventanas y cuadros de diálogo. Tambiés es posible determinar el aspecto que tendrá la nueva ventana del navegador mediante los campos de datos que permiten configurar el menú, la barra de herramientas, la barra de estado, etc. El siguiente ejemplo muestra cómo abrir una nueva ventana desde la ventana actual.
<html>
<head>
<title>Ejemplo de creación de ventana</title>

<script language="jаvascript">

function AbrirVentana() {
  ventana=open("","nueva","toolbar=no,directories=no,menubar=no,width=180,height=180");
  ventana.document.write("<head><title>Nueva Ventana </title></head><body>");
  ventana.document.write("<font size=4 color=red>Nueva Ventana</font><br><br><br>");
  ventana.document.write("<form><input type='button' VALUE='Cerrar' onclick='self.close()'></form>");
}
</script>
</head>
<body>
  <form>
    <input type="button" value="Abrir una ventana" onclick="AbrirVentana();">
    <br>
  </form>
</body>
</html>

Ver Ejemplo.

El Objeto location


El objeto location contiene toda la información sobre la URL que se esta visualizando, así como todos los detalles de esa dirección (puerto, protocolo, etc.).

El Objeto screen


Permite obtener información sobre la resolución de la pantalla. En el siguiente ejemplo, se estable el color de fondo de la página de acuerdo a la resolución que soporte la pantalla del usuario.
<html>
<head><title> Ejemplo del Objeto screen</title> </head>
<body>
<script language=jаvascript>
switch (window.screen.colorDepth)
{
   case 1: case 4:
      document.bgColor = "white";
      break;
   case 8: case 15: case 16:
      document.bgColor = "blue";
      break;
   case 24: case 32:
      document.bgColor = "skyblue";
      break;
   default:
      document.bgColor = "white";
}
document.write("Su pantalla soporta color de " + window.screen.colorDepth +" bit");
</script>
</body>
</html>
Ver Ejemplo.

El Objeto document


El objeto document La página en sí, hace referencia a determinadas características de la página, como son su color de fondo (bgColor), el color de su enlaces, etc.

El código que se muestra a continuación carga una imagen dependiendo de la elección que haga el usuario.
<html>
<head><title> Ejemplo del Objeto document</title>
<!-- Se muestra un número diferente de imágenes dependiendo 
  -- del valor que introduzca el usuario 
  -- dato: src 
  -->
</head>
<body>

<img name=img1 src="" border=0 width=300 height=250>

<script language=jаvascript>
   var myImages = new Array("https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533769556_curso-de-bsico-de-js_tutoriales_en_linea.jpg","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533826520_estructuras-de-control-de-flujo-js_tutoriales_en_linea.jpg","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533820966_operadores_js_tutoriales_en_linea_.jpg","https://tutorialesenlinea.es/uploads/posts/2018-08/thumbs/1533828061_funciones-js_tutoriales_en_linea.jpg");
   var imgIndex = prompt("Enter a number from 0 to 3","");
   document.images["img1"].src = myImages[imgIndex];
</script>
</body>
</html>

Ver Ejemplo.

A continuación vemos un ejemplo que permite conectar código a los eventos de la página web. El primero de ellos simplemente muestra una ventana de alerta, mientras que el segundo va modificando de forma aleatoria la imagen que se carga.
<html>
<head><title> Ejemplo de Eventos</title>
</head>
<body>
<script language=jаvascript>
function linkSomePage_onclick() {
   alert('Este enlace no lleva a ninguna parte');
   return false;
}
</script>

<A HREF="somepage.htm" NAME="linkSomePage">
   Pincha Aquí 
</A>

<script language=jаvascript>
   window.document.links[0].onclick = linkSomePage_onclick;
</script>
</body>
</html>
Ver Ejemplo.

El Objeto history


El objeto history contiene información sobre los enlaces que el usuario ha visitado. Se utiliza principalmente para generar botones de avance y retroceso.

El Objeto navigator


El objeto navigator permite obtener información del navegador con el que se está visualizando el documento. El siguiente código jаvascript detecta el navegador que se está utilizando y abre la página específica del mismo.
<html>
<head><title> Ejemplo del Objeto navigator</title>
<!-- Se detecta el navegador con el que se ha abierto la página 
  -->
<script language=jаvascript>
<!--
function getBrowserName() {
   var lsBrowser = navigator.appName;
   if (lsBrowser.indexOf("Microsoft") >= 0) {
      lsBrowser = "MSIE";
   }
   else if (lsBrowser.indexOf("Netscape") >= 0) {
      lsBrowser = "NETSCAPE";
   }
   else {
      lsBrowser = "UNKNOWN";
   }
   return lsBrowser;
}

function getOS() {
   var userPlat = "unknown";
   var navInfo = navigator.userAgent;

   if ((navInfo.indexOf("windows NT") != -1)
       || (navInfo.indexOf("windows 95") != -1 )
       || (navInfo.indexOf("windows 98") != -1 )
       || (navInfo.indexOf("WinNT") != -1 )
       || (navInfo.indexOf("Win95") != -1 )
       || (navInfo.indexOf("Win98") != -1 )) {
      userPlat = "Win32";
   }
   else if(navInfo.indexOf("Win16") != -1) {
      userPlat = "Win16";
   }
   else if(navInfo.indexOf("Macintosh") != -1) {
      userPlat = "PPC";
   }
   else if(navInfo.indexOf("68K") != -1) {
      userPlat = "68K";
   }
   return userPlat;
}

function getBrowserVersion() {
   var findIndex;
   var browserVersion = 0;
   var browser = getBrowserName();

   if (browser == "MSIE") {
     browserVersion = navigator.userAgent;
     findIndex = browserVersion.indexOf(browser) + 5;
     browserVersion = parseInt(browserVersion.substring(findIndex,findIndex + 1));
   }
   else {
     browserVersion = parseInt(navigator.appVersion.substring(0,1));
   }
   return browserVersion;
}
-->
</script>
</head>
<body>
<script language=jаvascript>
<!--
var userOS = getOS();
var browserName = getBrowserName();
var browserVersion = getBrowserVersion();

if (browserVersion < 4 || browserName == "UNKNOWN" || userOS == "Win16") {
   document.write("<H2>Sorry this browser version is not supported</H2>")
}
else if (browserName == "NETSCAPE") {
   location.replace("/1930-curso-basico-de-jаvascript.html");
}
else {
   location.replace("/1930-curso-basico-de-jаvascript.html");
}
-->
</script>
<noscript>
   <H2>Esta página requiere un navegador que soporte jаvascript</H2>
</noscript>

<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Web Editor - Tutoriales En Linea</h1>
<center><object type="text/html" data="https://tutorialesenlinea.es/ads/ads.html" frameborder="0" allowfullscreen width="100%" height="100%"></object></center>

</body>
</html>ç
Ver Ejemplo.

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...
Que Hacer Si Su Telefono Fue Robado O Perdido

Que Hacer Si Su Telefono Fue Robado O Perdido

Si te robaron o perdiste tu teléfono móvil, podemos asegurarnos de que nadie pueda usar tu cuenta de WhatsApp. Qué hacer Bloquea tu tarjeta SIM. Primero debes llamar a tu operador de telefonía móvil y pedir que bloqueen tu tarjeta SIM. Después del bloqueo, ya no será posible verificar la cuenta de...