Utiliser la souris et le clavier

ressource informatique ordinateur

Réimplémentation des exercices sur le clavier et la souris de LesBonsClics.

▶ Télécharger les fiches récapitulatives (PDF)

1. La Souris

1.1. Les parties de la souris

parties_de_la_souris

  • Le clic gauche : c'est ce bouton que vous aller utiliser le plus souvent.
  • Le double clic : lorsqu'on appuie deux fois rapidement sur le bouton gauche de la souris, on fait un double-clic.
  • La molette : comme un ascenseur, la molette permet de faire monter et descendre la barre de défilement.
  • Le clic-droit : le bouton droit de la souris permet d'ouvrir un petit menu contextuel.

1.2. Les types de curseur

Lorsque vous déplacez votre souris, la flèche peut changer d'apparence. Elle vous indique ce que vous allez pouvoir faire !

Curseur Signification
curseur_fleche La flèche joue le rôle de pointeur. Elle indique les endroits où vous pouvez cliquer.
curseur_ecrire Ce symbole indique que vous allez pouvoir écrire.
curseur_main La main vous indique que vous allez pouvoir mettre en action quelque chose.
curseur_attente Ce symbole vous indique que vous devez patienter.

À votre avis, parmis les deux zones ci-dessous, laquelle vous permet de taper du texte ?

1.3. La molette

Découvrez différents mots mystères en utilisant la molette de votre souris.

Quel est le premier mot mystère ?
GRENOUILLE
Quel est le deuxième mot mystère ?
GIRAFE

Quel est le troisième mot mystère ?
RENARD

1.4. Le double clic

Double cliquez sur des portes pour découvrir derrière laquelle d’entre elles se cache la chouette.

<style> .door { max-width: 90%; max-height: 90%; opacity: .9; transition: .2s ease; cursor: pointer; } .door:hover { opacity: 1; } .door.seen { filter: saturate(0); } </style>
<script> const door_images = ["ours.jpg", "lama.jpg", "ecrevisse.jpg", "marmotte.jpg", "papillon.jpg", "meduse.jpg", "araignee.jpg", "crabe.jpg", "lynx.jpg", "chouette.jpg", "coccinnelle.jpg", "zebu.jpg"]; window.addEventListener("load", () => { document.querySelectorAll(".door").forEach((door, index) => { door.addEventListener("dblclick", () => { if (door_images[index] == "chouette.jpg") { document.getElementById("modal-chouette-message").innerHTML = "Bravo !"; } else { document.getElementById("modal-chouette-message").innerHTML = "Ce n'est pas encore la chouette…"; } document.getElementById("modal-chouette-img").src = "utiliser-la-souris-et-le-clavier/" + door_images[index]; document.getElementById("modal-chouette").classList.add("active"); door.classList.add("seen"); }); }); }); </script>

1.5. Le glisser-déposer

Glissez différents déchets dans la poubelle.

<style> .dropbin-el { cursor: grab; } .dropbin-el.grabbed { cursor: grabbing !important; } .dropbin-el:active { cursor: grabbing !important; } </style>
<script> window.addEventListener("load", () => { var currently_dragging = null; var original_transform = ""; var drag_start = { x: null, y: null }; var todrag = 10; document.querySelectorAll(".dropbin-el").forEach(el => { el.style.zIndex = "1"; el.classList.add("dragged"); el.addEventListener("dragstart", (event) => { el.style.zIndex = "10"; currently_dragging = el; drag_start.x = event.clientX; drag_start.y = event.clientY; original_transform = el.style.transform; var img = new Image(); img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='; event.dataTransfer.setDragImage(img, 0, 0); event.dataTransfer.effectAllowed = "copyMove"; }); }); document.getElementById("dropbin-container").addEventListener("dragover", (event) => { event.dataTransfer.dropEffect = "move"; currently_dragging.style.transform = `translate(${ event.clientX - drag_start.x }px, ${ (event.clientY - drag_start.y) }px) ` + original_transform; event.preventDefault(); }); document.getElementById("dropbin-container").addEventListener("dragend", (event) => { event.preventDefault(); const target = document.getElementById("dropbin"); const target_bounds = target.getBoundingClientRect(); if (event.clientX >= target_bounds.left && event.clientX <= target_bounds.right && event.clientY >= target_bounds.top && event.clientY <= target_bounds.bottom) { currently_dragging.classList.add("d-none"); todrag--; if (todrag <= 0) { alert("Bravo !"); } } else { } currently_dragging.style.transform = original_transform; currently_dragging.classList.remove("dragged"); }); }); </script>

2. Le clavier

2.1. Présentation des touches du clavier

clavier

  • en jaune : les lettres minuscules
  • en vert : les lettres avec accents
  • en rouge : la touche espace, qui permet de laisser un blanc entre deux mots

Il y a également quelques touches spéciales :

La touche Entrée qui permet d'aller à la ligne
La touche Effacer qui permet d'effacer le caractère à gauche du curseur
La touche Majuscule qu'il faut maintenir enfoncée pour écrire les majuscules ou les chiffres

2.2. Exercice

Recopiez le texte suivant :

<script> function checkTyping(event) { if (document.getElementById("keyboard-target").textContent.trim() == event.target.value.trim()) { alert("Bravo !"); } else if (document.getElementById("keyboard-target").textContent.trim().startsWith(event.target.value.trim())) { event.target.classList.add("is-success"); event.target.classList.remove("is-error"); } else { event.target.classList.add("is-error"); event.target.classList.remove("is-success"); } } </script>

Le clavier est un outil très pratique, qui permet notamment : d'écrire des lettres minuscules, des lettres majuscules (A, Z, E, ...) et même des chiffres (0, 1, 2, ...). Il y a aussi les accents, é, è, à ou la cédille : ç. C'est peut-être l'outil le plus important de l'ordinateur.

<textarea class="form-input" oninput="checkTyping(event)"></textarea>

Article précédent Article suivant