STIC I

Introduction à JavaScript côté-client

Présentation interactive

JavaScript et le navigateur web

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Une page HTML5</title>
	<meta charset="UTF-8">
	<!-- Téléchargement du CSS -->
	<link href="assets/css/style.css" rel="stylesheet">
</head>

<body>
	<!-- Téléchargement du fichier JS -->
	<script src="assets/js/app.js"></script>
</body>
</html>

Les instructions sont téléchargées avec la page.

L'objet global window

JavaScript peut contrôler (avec des limitations) le navigateur à travers l'objet global window.
  • Ouvrez la console du navigateur F12
  • Entrez window
  • Après entrez window.innerHeight
  • Enfin entrez window.location.href

Accès au DOM de la page

À l'intérieur de l'objet window, vous avez l'objet window.document qui donne accès au DOM.
  • Entrez window.document in the console
  • Puis seulement document
  • Maintenant entrez document.title
  • Puis document.title = 'I have changed the title!'
  • Et enfin document.body

Manipulation du DOM

À travers l'accès au DOM vous pouvez manipuler les différents éléments de la page.
  • Entrez document.getElementById('slideTitle').innerHTML
  • Puis document.getElementById('slideTitle').innerHTML = 'On peut faire mieux !'

Instructions pour cette présentation

Cette présentation utilise du code de Reveal.js, une bibliothèque pour créer des slides en HTML.
  • Entrez Reveal dans la console
  • Puis entrez Reveal.getTotalSlides()
  • Et finalement entrez Reveal.next()

Facile, n'est-ce pas ?

Maintenant regardez le code HTML du bouton.

<button onclick="Reveal.next()">Prochaine slide</button>

Que ce passe-t-il si vous cliquez ?

Voilà !

Vous avez déclenché une instruction depuis un élément HTML de la page.

Les applications interactives en JavaScript se construisent par extension de ce mécanisme de base.