4.1 Objets du navigateur
Comme vous le savez déjà, le langage JavaScript fonctionne à l'intérieur du navigateur, il doit donc en quelque sorte interagir avec ce même navigateur. Pour ce faire, le navigateur dispose de plusieurs objets et fonctions disponibles depuis JavaScript.
Le premier est an object window, qui décrit la fenêtre du navigateur. Ou plutôt, j'avais l'habitude de décrire quand les navigateurs étaient sans onglets. Maintenant, l'objet window décrit l'onglet actuel du navigateur dans lequel la page avec le script est chargée.
Deuxièmement, c'est an object documentcelui qui est responsable du document affiché dans l'onglet. Cela pourrait être un peu déroutant. Pour plus de simplicité, disons que le document est ce qui est affiché à l'utilisateur et que la fenêtre est ce dans quoi ce document est affiché.
Troisièmement, c'est an object consolecelui qui est responsable de la sortie vers la console du navigateur. Oui, les navigateurs ont aussi une console, elle sert principalement à déboguer le script et à afficher les messages d'erreur. Vous pouvez généralement l'ouvrir en appuyant sur le bouton F12 de votre navigateur.
Object window, est l'objet de niveau supérieur pour tous les objets de page. Et bien que vous puissiez écrire directement les noms d'objets documentdans consolevotre script, en fait, leurs noms window.documentet window.console.
4.2 Dialogues en JavaScript
méthode alert()
Il an object windowa également plusieurs fonctions qui sont visibles pour le script de la page. Le plus couramment utilisé est le alert(). Il vous permet d'afficher une boîte de dialogue avec un message à l'utilisateur. Le script est alors suspendu jusqu'à ce que l'utilisateur clique sur OK.
Exemple:
alert("JavaScript is the best!");méthode prompt()
Il existe également une fonction avec laquelle vous pouvez demander à l'utilisateur d'entrer une valeur - c'est-à-dire prompt().
Exemple:
var age = prompt("Enter Year of Birth");méthode confirm()
Vous pouvez afficher une boîte de dialogue avec deux boutons Ok- Canceldemandez à l'utilisateur d'effectuer une action.
Exemple:
var isOK = confirm("Are you ready");4.3 événement onload()
Et encore un moment utile et intéressant. La fenêtre du navigateur comporte un événement qui se déclenche lorsque le document est entièrement chargé. Vous pouvez spécifier le code à exécuter après le chargement et l'affichage du document.
Cela peut se faire de trois manières.
Tout d'abord, vous pouvez intégrer du code JavaScript directement dans une page HTML en tant que valeur d'attribut :
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>Deuxièmement, vous pouvez simplement intégrer du code JavaScript dans une page HTML :
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>Troisièmement, nous pouvons l'écrire un peu plus court en déclarant une fonction anonyme :
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>4.4 événement onclick()
Et enfin, un autre événement important (événement) est event OnClick. Qui se produit sur n'importe quel élément sur lequel l'utilisateur a cliqué. Tout comme event OnLoadil peut être configuré de différentes manières, nous ne donnerons que la plus simple :
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>