Ctrl+K

NSI

Exercices

Exercices#

Exercice 9#

On reprend le document web créé dans les 2 parties précédentes

  1. Ajouter la balise pour créer un script JAVASCRIPT entre les <head> et </head> de votre document HTML.

  2. On donne un premier script JAVASCRIPT:

    alert('mon premier script');

    Placer ce script entre les balises javascript de votre document puis actualiser la page web.

  3. On propose de compléter le script précédent avec l’instruction:

    console.log('mon premier script');

    Actualiser la page web puis ouvrir les outils de développement (F12 ou CTRL MAJ I) et sélectionner l’onglet « Console ». Afficher les journaux et actualiser la page si nécessaire.

    Important

    Cette astuce utilisant l’instruction console.log() est très utile pour debugger les programmes !

  4. On remplace notre script par les instructions suivantes:

    nom = prompt('Quel est ton nom ?');
alert(nom);

    1. Modifier votre document HTML avec ce nouveau script puis actualiser votre page dans le navigateur.

      image

    1. Compléter le script avec une troisième ligne de code pour afficher le nom en console.

    2. On peut améliorer l’affichage en concaténant la variable nom et un texte grâce au signe d’addition.

      Ajouter le texte Votre nom est pour obtenir l’affichage d’alerte ci-dessous.

      image

Exercice 10#

On reprend le document web créé dans les 2 parties précédentes

  1. On peut utiliser des scripts javascript placés dans un fichier externe. Dans ce cas, on ajoute dans la balise <head>...</head> la balise suivante :

    <script type="text/javascript" src="script.js"></script>

  2. Télécharger sur l’ENT le fichier script.js dans le même dossier que votre fichier html. Ce fichier contient de petites fonctions en javascript pour agir sur le document HTML.

  3. L’événement onClick écoute le clic de souris dans le document WEB. Celui-ci est limité à une zone du document.

    1. Remplacer la balise <body> par la balise suivante:

      <body onclick="colorer()">

    2. Recharger la page puis tester votre événement en cliquant dans le corps de la page WEB. Vous pouvez supprimer cet événement après les tests.

  4. Il n’y a qu’une seule balise <body> ! Mais certaines balises sont multiples comme les titres, les paragraphes ou les images. On peut identifier les balises d’un document html par un identifiant. Un identifiant est un mot unique du document HTML qui se note dans la balise par id="identifiant".

    1. Ajouter l’identifiant logo dans la balise <img> contenant le logo HTML de votre document.

    2. L’événement onmouseover écoute le survol d’un élément HTML du document pour exécuter la fonction associée.

      Ajouter dans la balise <img> de l’image avec l’identifiant logo l’instruction onmouseover="encadrer()".

    3. Vérifier dans votre document web que le survol du logo ajoute un cadre à l’image.

  5. En HTML, on peut ajouter des boutons qui permettent de créer de l’interactivité. Pour ajouter un bouton, il faut appliquer la syntaxe suivante :

    <button>Texte sur le bouton</button>

    1. Ajouter dans votre document HTML un bouton avec l’identifiant btn et contenant le texte « Cliquer ».

    2. Ajouter l’événement onClick sur le bouton en associant une instruction d’alerte qui affiche le message « Tu as cliqué sur le bouton ! ».

  6. Ouvrir avec l’éditeur notepad++ le fichier script.js. Ce fichier contient des fonctions écrites en javascript qui vont nous servir de modèle.

    1. Compléter la fonction alerter pour afficher le message « Tu as cliqué sur le bouton ! » puis associer cette fonction au bouton btn.

    2. Modifier la fonction alerter pour afficher le message en console.

Exercice 11#

On reprend le document web créé dans les 2 parties précédentes

Nous allons écrire un script qui ajoute un message dans le document HTML.

  1. Dans la page web, ajouter sous le bouton la balise <p id ="message"><\p>. Actualiser la page web sur votre navigateur et vérifier que rien n’apparait puisque la balise est vide.

  2. En javascript, on peut accéder à une balise de la page html grâce à son identifiant. L’instruction est la suivante:

    msg = document.getElementById('identifiant');

    Ajouter dans la fonction saisir_nom() cette instruction pour accéder à la balise <p> d’identifiant message.

  3. On peut ajouter un contenu dans le document html par l’instruction suivante:

    msg.innerHTML = "nouveau contenu";

    Ajouter dans la fonction saisir_nom() cette instruction pour ajouter le contenu "Mon nom est Bob !" dans la page web.

  4. Remplacer l’événement onclick='alerter();' pour obtenir l’affichage de notre message lorsqu’on clique sur le bouton.

  5. Modifier le script de la fonction saisir_nom() pour provoquer la saisie d’un nom et afficher le message précédent en remplaçant « Bob » par le nom saisi.

Contenu