Solucions dels Exercicis UT03 - Model d'Objectes Predefinits a JavaScript¶
Objecte Window¶
51. Obrir i tancar finestres¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 51</title>
<script>
let novaFinestra;
const obrir = () => {
novaFinestra = window.open("https://www.wikipedia.org", "wikipedia", "width=600,height=400");
};
const tancar = () => {
if (novaFinestra) {
novaFinestra.close();
novaFinestra = null;
}
};
</script>
</head>
<body>
<button onclick="obrir()">Obrir Wikipedia</button>
<button onclick="tancar()">Tancar Finestra</button>
</body>
</html>
52. Propietats de la finestra¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 52</title>
<script>
const mostrarPropietats = () => {
console.log("innerWidth: " + window.innerWidth);
console.log("innerHeight: " + window.innerHeight);
console.log("outerWidth: " + window.outerWidth);
console.log("outerHeight: " + window.outerHeight);
document.getElementById("resultat").innerHTML = `
<p>innerWidth: ${window.innerWidth}px</p>
<p>innerHeight: ${window.innerHeight}px</p>
<p>outerWidth: ${window.outerWidth}px</p>
<p>outerHeight: ${window.outerHeight}px</p>
`;
};
</script>
</head>
<body>
<button onclick="mostrarPropietats()">Mostrar Propietats</button>
<div id="resultat"></div>
</body>
</html>
53. Alert, Confirm i Prompt¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 53</title>
<script>
const mostrarAlerta = () => {
window.alert("Això és una alerta!");
console.log("Alerta mostrada");
};
const mostrarConfirmacio = () => {
const resposta = window.confirm("Desitges continuar?");
console.log("Confirmació: " + resposta);
document.getElementById("resultat").innerHTML = "Resposta: " + resposta;
};
const demanarNom = () => {
const nom = window.prompt("Quin és el teu nom?", "Escriu aquí");
console.log("Nom introduït: " + nom);
document.getElementById("resultat").innerHTML = "Hola " + nom + "!";
};
</script>
</head>
<body>
<button onclick="mostrarAlerta()">Mostrar Alerta</button>
<button onclick="mostrarConfirmacio()">Mostrar Confirmació</button>
<button onclick="demanarNom()">Demanar Nom</button>
<div id="resultat"></div>
</body>
</html>
54. Comptador amb setInterval i clearInterval¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 54</title>
<script>
let comptador = 0;
let intervalo = null;
const iniciar = () => {
comptador = 0;
intervalo = setInterval(() => {
comptador++;
document.getElementById("comptador").innerHTML = comptador;
}, 1000);
};
const aturar = () => {
clearInterval(intervalo);
intervalo = null;
};
const reiniciar = () => {
aturar();
comptador = 0;
document.getElementById("comptador").innerHTML = "0";
};
</script>
</head>
<body>
<h3>Comptador: <span id="comptador">0</span></h3>
<button onclick="iniciar()">Iniciar</button>
<button onclick="aturar()">Aturar</button>
<button onclick="reiniciar()">Reiniciar</button>
</body>
</html>
55. Finestra emergent centrada¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 55</title>
<script>
const obrirCentrada = () => {
const amplada = 600;
const alçada = 400;
const esquerra = (screen.width - amplada) / 2;
const dalt = (screen.height - alçada) / 2;
window.open(
"https://www.google.com",
"centrada",
`width=${amplada},height=${alçada},left=${esquerra},top=${dalt}`
);
};
</script>
</head>
<body>
<button onclick="obrirCentrada()">Obrir Finestra Centrada</button>
</body>
</html>
Objecte Location¶
56. Propietats de location¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 56</title>
<script>
window.onload = () => {
const taula = `
<table border="1">
<tr><th>Propietat</th><th>Valor</th></tr>
<tr><td>href</td><td>${location.href}</td></tr>
<tr><td>protocol</td><td>${location.protocol}</td></tr>
<tr><td>host</td><td>${location.host}</td></tr>
<tr><td>hostname</td><td>${location.hostname}</td></tr>
<tr><td>port</td><td>${location.port || "Per defecte"}</td></tr>
<tr><td>pathname</td><td>${location.pathname}</td></tr>
<tr><td>search</td><td>${location.search || "Cap"}</td></tr>
<tr><td>hash</td><td>${location.hash || "Cap"}</td></tr>
</table>
`;
document.getElementById("taula").innerHTML = taula;
};
</script>
</head>
<body>
<h2>Propietats de location</h2>
<div id="taula"></div>
</body>
</html>
57. Navegació amb assign()¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 57</title>
<script>
const navegar = () => {
const url = document.getElementById("url").value;
if (url) {
location.assign(url);
} else {
alert("Si us plau, introdueix una URL válida");
}
};
</script>
</head>
<body>
<h2>Navegació a URL</h2>
<input type="text" id="url" placeholder="https://www.exemple.com">
<button onclick="navegar()">Navegar</button>
</body>
</html>
58. Recarregar pàgina amb comptador¶
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Exercici 58</title>
<script>
window.onload = () => {
let comptador = localStorage.getItem("recarregues") || 0;
comptador = parseInt(comptador) + 1;
localStorage.setItem("recarregues", comptador);
document.getElementById("comptador").innerHTML = comptador;
};
const recarregar = () => {
location.reload();
};
const reiniciar = () => {
localStorage.removeItem("recarregues");
document.getElementById("comptador").innerHTML = "0";
};
</script>
</head>
<body>
<h2>Vegades que s'ha recarregat: <span id="comptador">0</span></h2>
<button onclick="recarregar()">Recarregar Pàgina</button>
<button onclick="reiniciar()">Reiniciar Comptador</button>
</body>
</html>
Notes importants¶
-
Seguretat: Algunes propietats del
navigatorilocationestan restringides per motius de seguretat en contexts de navegador. -
Compatibilitat: Les solucions utilitzen mètodes moderns de JavaScript. Per a navegadors més antics, pot ser necessari adaptar el codi.
-
HTML: Els exemples que necessiten HTML estan complets però simplifícats. En un projecte real, hauries d'afegir més estils CSS i estructurar millor el codi.
-
localStorage: Algunes solucions utilitzen
localStorageque requereix que el codi s'executi en un servidor o localment (no funciona sempre en fitxers locals per a alguns navegadors).