En esta práctica de JavaScript he puesto en práctica el acceso a algunas propiedades interesantes de una página web, tales como su dominio, título, fecha de la última modificación, nombre del navegador usado para abrirla y la resolución de pantalla del dispositivo desde el que se accede a dicha página web.
El usuario pulsará sobre una serie de textos y se le mostrará la información de la propiedades referidas anteriormente.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades location, title, lastModified, userAgent y screen. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
👉Enlace 1 👉Enlace 2 👉Enlace 3 👉Enlace 4 👉Enlace 5
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<h2>Pulse para:</h2>
<div id="caja"></div>
<p id="dominio">Ver dominio página web.</p>
<p id="titulo">Ver título página web.</p>
<p id="cambiaTitulo">Cambiar título página web.</p>
<p id="fecha">Fecha última modificación.</p>
<p id="navegador">Navegador usado.</p>
<p id="pantalla">Resolución pantalla.</p>
</body>
</html>Código CSS
#caja {
width: 400px;
height: 40px;
border: 1px solid black;
padding: 10px;
float: right;
}
p {
font-size: 1em;
font-family: arial;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("dominio").addEventListener("click", dominio, false);
document.getElementById("titulo").addEventListener("click", titulo, false);
document.getElementById("cambiaTitulo").addEventListener("click", cambiaTitulo, false);
document.getElementById("fecha").addEventListener("click", fecha, false);
document.getElementById("navegador").addEventListener("click", navegador, false);
document.getElementById("pantalla").addEventListener("click", pantalla, false);
}
function dominio() {
let nombre = location;
let caja = document.getElementById("caja");
caja.innerHTML = nombre;
}
function titulo() {
let titulo = document.title;
let caja = document.getElementById("caja");
caja.innerHTML = titulo;
}
function cambiaTitulo() {
let titulo = "Otras propiedades de las páginas";
document.title = titulo;
var caja = document.getElementById("caja");
caja.innerHTML = "Nuevo título de la página = " + titulo;
}
function fecha() {
let fecha = document.lastModified;
let caja = document.getElementById("caja");
caja.innerHTML = fecha;
}
function navegador() {
let navegador = navigator.userAgent;
let caja = document.getElementById("caja");
caja.innerHTML = navegador;
}
function pantalla() {
let ancho = screen.width;
let alto = screen.height;
let caja = document.getElementById("caja");
caja.innerHTML = ancho + "x" + alto + "px";
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.