Chapitre 2:JavaScript & BOM(Browser Object Model)

Définition
Le BOM ou Browser Objec Model permet à JavaScript de communiquer avec le navigateur

La structure BOM

Window

window.alert()

screen navigator history document location

L’objet Window
Actuellement l’objet window est supporté par tous les navigateurs récents

Tous les objets JavaScript global, fonctions et variables sont des membres de l’objet window

Propriétés:
 window.innerHeight : détermine l’hauteur du navigateur
 window.innerWidth – détermine la largeur du navigateur

Méthodess
Quelques méthodes:

 window.open() - open a new window

 window.close() - close the current window
 window.moveTo() -move the current window
 window.resizeTo() -resize the current window

L’objet Screen

L’Objet windowscreen contient des informations à propos de l’écran de l’utilisaeur

Quelques propriétés

 screen.availWidth - available screen width

 screen.availHeight - available screen height

L’objet Location
L’objet windowlocation peut être utilisé pour récupérer l’URL courante et pour redériger le
navigateur vers une nouvel page

Quelques propriétés et méthodes

 location.hostname returns the domain name of the web host

 location.pathname returns the path and filename of the current page
 location.port returns the port of the web host (80 or 443)
 location.protocol returns the web protocol used (http:// or https://)
 location.href: retourne l’URL de la page en cours
 location.assign() method loads a new document.

L’objet history

L’objet history contient l’historique du navigateur

Quelques propriétés et méthodes

 history.back() - same as clicking back in the browser

 history.forward() - same as clicking forward in the browser

L’objet navigator
L’objet navigator contient des informations sur le navigateur

Exemple d’utilisation

<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

Les fenêtres pop-up

L’objet window offre trois types de pop-up :

 Message d’alerte: window.alert(message);

 Message de confirmation avec confirmation ou annaulation:
window.confirm(message)
Exemple:

var r=confirm("Press a button");

if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}

 Prompt Box: le message prompt est utilisé pour insérer une valeur à l’aide d’une
boite de dialogue : window.prompt ("sometext","defaultText");

exemple

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

if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById ("demo").innerHTML=x;
}