Leçon 1 : Introduction au langage JavaScript

1D Lecon1_JS

Leçon 1 : ?

Compétences

  • Définir : JavaScript, Script
  • Énoncer les limites du HTML liées à l’interactivité ;
  • Énoncer les avantages et limites de JavaScript ;
  • Utiliser la balise <script>…</script> ;
  • Déclarer les variables en JavaScript ;
  • Effectuer les opérations d’entrée/sortie en JavaScript (alert, prompt, confirm,Document.write)
  • Effectuer les conversions de type (ParseInt, ParseFloat) ;

Situation de vie

Il vous arrive parfois de réviser des cours avec votre camarade qui fréquente au collège Saint Thomas. À la fin du cours d’informatique de la semaine, le professeur a donné un exercice comportant le texte suivant :
1. <html>
2.    <head>
3.     <title>ma page web</title>
4.    </head>
5.   <body>
6.      <script language='javascript'>
7.       var a,b=4;
8.       a = b*2;
9.       document.write("valeur de a="+a) ;
10.      </script>
11.   </body>
12. </html>
Ne comprenant pas assez cet exercice, il apporte l’exercice pour que vous traité ensemble.
CONSIGNE : Aidez ton camarade a traité son exercice.
TRAVAIL A FAIRE
  • 1 Quel nom peut-on attribué à ce texte ?
    • Page du journal
    Page web
    Page Test
    Page de garde

    Observez attentivement le texte de la ituation de vie.

  • 2 Quels langages a-t-on utilisés pour écrire ce texte ?
    • Langage HTML
    Langage JavaScript
    Langage HTML et langage JavaScript
    Langage CSS

    Exploitez les lignes 1 et 6 du texte.

  • 3Définir le sigle HTML
    • HyperText Markup Language
    HyperText Markup Langage
    HyperTexte Markup Language
    HyperTexte Markup Language

    Chaque lettre est transcrit en Anglais.

  • 4 Quel nom donne-t-on aux mots se trouvant dans les symboles < et > ?
    • Page web
    Langage HTML et le langage JavaScript
    HyperText Markup Language
    Balise

    Exploitez les questions précédentes.

  • 5Définir Balise
    • C’est le langage de la programmation web
    Est un caractère ou groupe de caractères utilisé pour la mise en forme ou mise en page d’un texte.
    Est la définition du sigle HTML
    Est le logiciel utilisé pour écrire des pages web.

    Exploitez vos connaissances en informatiques.

  • 6Énumérer toutes les balises utilisées dans ce texte.
    • <html>…</html>, <head>…</head>, <body>…</body>, <script>…</script>
    <html>…</html>, <head>…</head>, <title>…</title>,<script>…</script>
    <html>…</html>,<title>…</title>,,, <body>…</body>, <script>…</script>
    <html>…</html>, <head>…</head>, <title>…</title>, <body>…</body>, <script>…</script>

    Comptez toutes les balises utilisés dans le texte.

  • 7Dans quelle balise insère t-on le code JavaScript ?
    • la balise <script>…</script>
    la balise <html>…</html>
    la balise <body>…</body>
    la balise </script>…<script>

    Exploitez la ligne 6 de la page web.

  • 8 À quoi correspond la ligne 7 du texte?
    • à une déclaration de constantes
    à un commentaire sur une ligne
    à une déclaration de variables
    à un commentaire sur plusieurs lignes

    Exploitez la ligne 7 de la page web.

  • 9À quoi correspond la ligne 8 du texte?
    • à une déclaration de variables
    à une instruction d’affectation
    au symbole =
    à l’opérateur de multiplication *

    Exploitez cette ligne pour répondre à la question.

  • 10Quel symbole utilise-t-on pour modifier le contenu d’une variable dans un script JavaScript ?
    • *
    ;
    =
    +

    Exploitez la question précédente.

  • 11 Effectue-t-on un calcul dans la balise script ?
    • Non
    Oui
    Oui, c’est l’exemple de la ligne 6 de la page web
    Oui, c’est l’exemple de la ligne 9 de la page web

    Exploitez la ligne 8 de la page web.

  • 12Quelle famille de logiciel utilise-t-on pour écrire ce texte ?
    • Éditeur de texte
    Navigateur web
    Tableur
    Texteur

    Cherchez un synonyme du verbe «écrire»

  • 13Donner un exemple d’éditeur de texte.
    • Paint
    MS Word 2007
    Bloc note
    Ms Excel 2007

    Exploitez vos connaissances sur les logiciels infomatiques.

  • 14Quels autres logiciels peut-on utiliser pour écrire une page web ?
    • Bloc note
    Bloc note ; Paint ; VLC
    MS Word ; Bloc note
    Notepad++ ;UltraEdit ; gedit

    Exploitez la question précédente.

  • 15Quelle famille de logiciel utilise-t-on visualiser le résultat d’une page web ?
    • Navigateur web
    Éditeur de texte
    Texteur
    Tableur

    Exploitez la question 12.

  • 16Donner un exemple de navigateur web.
    • Bloc note
    Notepad++
    Firefox
    UltraEdit

    Exploitez les questions 13 et 14.

  • 17Quels autres logiciels peut-on utiliser pour visualiser le résultat d’une page web ?
    • Netscape ; Firefox
    Opéra ; Internet explorer ; Netscape
    Firefox
    Opéra , Firefox

    Exploitez la question précédente.

    Moyenne :

Note de cours

1. Définitions

  • ⇒Script est une portion de code qu’on insère dans une page web.
  • ⇒JavaScript : est un langage de programmation web utilisé pour rendre les pages web interactives.
  • ⇒Page web : C’est un fichier .html contenant des informations susceptibles d’être interprété par un navigateur.
  • ⇒Site web : est un ensemble de page web liée entre elles par des liens hypertextes.
  • ⇒Une balise est un caractère ou groupe de caractères utilisé pour la mise en forme ou mise en page d’un texte.

2. Outils de la programmation JavaScript

Pour écrire et exécuter un script JavaScript, il nous faut :
  • ⇒Un éditeur de textes : nous permet d’écrire et sauvegarder le code source de la page dans un emplacement de l’ordinateur.

    • Exemple

    • • Bloc note
    • • Notepad ++
    • • UltraEdit
    • • gedit
    • • sublime Text
  • ⇒Un navigateur web : nous permet d’interpréter le fichier sauvegardé afin de visualiser les résultats.

    • Exemple

    • • Opéra
    • • Mozilla Firefox
    • • Google Chrome
    • • Internet explorer
    • • UC browser

3. La balise script

Permet d’introduire un script dans une page web de la manière suivante
<SCRIPT type='text/javascript'>
//Placez votre script ici
</SCRIPT>
Remarque : L'attribut type='text/javascript' peut être remplacé par l'attribut language='javascript'
Notez Bien : Cette balise peut être introduire dans
  • • L’entête de la page web
  • • Le corps de la page web
  • • Une balise associée à un événement

4. Déclaration d’une variable en JS

Le JavaScript est sensible à la casse ; c’est-à-dire qu’il y a une différence entre une lettre majuscule et minuscule. Ainsi il y a une différence entre var et Var . La déclaration d’une variable commence par le mot var .

Exemple

<SCRIPT type='text/javascript'>
var a, b=0 ; // déclaration des variables a et b. b est initialisée à la déclaration.
</SCRIPT>

5. Avantage et limite du langage JS

5.1 Avantages du langage JavaScript

Le langage JavaScript nous permet de
  • • Vérifier la saisie des données d’un formulaire ;
  • • Effectuer les calculs ;
  • • Gérer les dates et heures ;
  • • Faire des animations graphiques (jeux, bannières rotatives).
  • • De gérer les événements de la souris
Notez Bien : Lorsque nous parlons des avantages du JS, on parle inversement des limites du html liés à l’interactivité.

5.2 Limite du langage JS

Le langage JavaScript ne permet pas de
  • • De lire sur le disque dur du visiteur ;
  • • D’écrire sur le disque dur du visiteur ;
  • • Se connecter à une base de données ;
  • • Échanger avec d’autres ordinateurs connectés;
  • • D’introduire un virus sur le poste du visiteur.
Activité d’intégration 1 : Manipulation d’un script Soit le script suivant

Exemple

1. <script language='javascript' >
2.       Var n, x=5,y ;
3.       n=prompt('Entrez un réel') ;
4.       x=parseInt(n) ;
5.       document.write(x);
6.       y = 2*x+n ;
7.       alert(y) ;
8. </script>
Consignes : Exploitez vos connaissances et le script ci-dessus pour répondre aux questions suivantes.
  • 1 A quoi correspond la ligne 2 de ce script ?
    • à un commentaire sur une ligne
    à une déclaration des variables
    à un commentaire sur plusieurs lignes

    Lisez la partie 4 du cours.

  • 2Quelle erreur est commise sur la ligne 2 de ce script ?
    • x est initialisé à 5
    y n’a pas de valeur à la déclaration
    le mot Var est écrit avec un v majuscule
    n, x et y sont déclarées sur la même ligne

    Lisez la partie 4 du cours.

  • 3L’instruction de la ligne 3 est une instruction
    • d’écriture
    de lecture et d’affectation
    d’affectation uniquement
    de lecture uniquement

    Exploitez le message qui se trouve dans les parenthèses de cette ligne.

  • 4L’instruction de la ligne 4 permet de convertir la variable n en un
    • entier et attribue le résultat à x
    entier
    réel et attribue le résultat à x
    réel

    Exploiter le mot Int qui se trouve dans parseInt.

  • 5L’instruction de la ligne 5 est une instruction
    • d’écriture
    de lecture
    d’affectation

    Traduire en français le mot write qui se trouve dans cette instruction.

  • 6Quelle autre instruction attire ton attention ?
    • x=parseInt(n) ;
    n=prompt("Entrez un réel") ;
    document.write(x);
    alert(y) ;

    Exploitez les questions précédentes.

  • 7Que fait cette instruction ?
    • affiche le contenu de la variable y dans la page du navigateur
    affiche le contenu de la variable y dans une petite fenêtre
    affiche le contenu de la variable x dans la page du navigateur
    affiche le contenu de la variable x dans une petite fenêtre

    Exploitez cette instruction.

Moyenne :

6. Les boîtes de dialogue

  • • L’instruction nomVariable=prompt(message) ; est une instruction de lecture. Elle récupère des valeurs dans une boîte de dialogue.
    • Script JavaScript Résultat
    <script language='javascript' >
          var x = prompt('Entrez un réel') ;
    </script>
  • • L’instruction nomVariable=confirm(message) ; est une instruction de lecture.
    • Script JavaScript Résultat
    <script language='javascript' >
          var stop= confirm('Voulez-vous continuez ?') ;
    </script>
    Remarque : stop prend la valeur true si l’utilisateur clique sur « Ok » et false sinon.
  • • L’instruction alert(message) ; est une instruction d’écriture qui affiche un message dans une boîte de dialogue.
    • Script JavaScript Résultat
    <script language='javascript' >
          var x= 15 ;
          alert(x) ;
    </script>
    Nous avons aussi l’instruction de sortie document.write(message) ; qui affiche un message dans la page du navigateur.

7. Conversion de données

  • • L’instruction nomVariable=parsetInt(expression) ; convertir une expression en un entier ;
  • • L’instruction nomVariable=parsetFloat(expression) ; convertir une expression en un réel ;
  • • L’instruction nomVariable=Number(expression) ;convertir une expression en un entier ;

Exemple : Considérons le script suivant :

<script language='javascript' >
      var a, b, c, n, m ,p;
      a = parseInt("125") ;
      b = Number("12.5") ;
      c = parseFloat("5107gtg") ;
      n = parseInt("89log2") ;
      m = parseFloat("tan60") ;
      p = Number("63sin") ;
      document.write("a= "+a+"<br>");
      document.write("b= "+b+"<br>");
      document.write("c= "+c+"<br>");
      document.write("n= "+n+"<br>");
      document.write("m= "+m+"<br>");
      document.write("p= "+p+"<br>");
</script>
Après exécution de ce script, nous avons le résultat suivant : 
a= 125
b= 12.5
c= 5107
n= 89
m= NaN
p= NaN
Remarque : NaN (Not a Number) signifie en français « n’est pas un nombre».

Jeu bilingue:

write= Ecrire ; document = document ; language = langage ; Number = nombre ; Int = Entier ; Float = Réel ; Text = texte ;

Téléchargement du cours

Format PDF(592Ko)
Format JPEG(513Ko)

Commentaires

Enregistrer un commentaire

Salut à tous.

Posts les plus consultés de ce blog

econu

Econu(École Numérique) est une plateforme à caractère éducatif d’Enseignement /Apprentissage. Elle a été mit sur pied pour permettre aux différents apprenants du secondaires de suivre les cours et de s’exercer à l’aide des outils numériques tels que les ordinateurs, téléphones multimédias, tablettes,… Vous trouverez dans cette plateforme des cours en adéquations avec l’APC(Approche Par les Compétences), des activités d’intégration, des anciens sujets d’examens, des conseils et des sujets de qualités proposés dans certains établissements du pays.   Ces différents contenus sont éventuellement accompagnés des corrigés et ont été proposé par des enseignants   qualifiés.
Lire la suite