2022-12-06

IV- Site web dynamique: évènement (JS) :

 JAVASCRIPT

   Créer une interface utilisateur interactive dans une page Web (par exemple, menu, alerte pop-up, fenêtres,...) 

Manipuler dynamiquement le contenu Web:

 Modifier le contenu et le style d'un élément.
 Remplacer des images sur une page sans recharger la page.  
 Masquer/Afficher le contenu.

Il fonctionne dans tous les principaux navigateurs.

Introduction:  JavaScript est:

 PAS Java : la similitude de syntaxe est due au langage C.
 un langage de script : langage de programmation léger.
 le langage de script le plus populaire sur Internet.
 un langage interprété : les scripts s'exécutent sans compilation préliminaire.
 exécuté côté client : le navigateur.
 généralement intégré directement dans les pages Web.

Comment insérer Javascript ?

Javascript peut être ajouté aux éléments HTML en 2 façons:

 Javascript interne : dans la page HTML

 peut être placé dans le <body>, ou dans la section <head> d'une Page HTML, ou dans les deux.

Javascript externe : En dehors de la page HTML

 dans un fichier javascript séparé (.js)

 pratique lorsque le même code est utilisé dans plusieurs pages Web différentes.

INTERNE

<!DOCTYPE html>
<html>
<body>
<h1>bonjour tous le monde</h1>
<script type="text/javascript">
 document.write(" c'est tout");
 alert("c'est mon premier javascript exemple");
</script>
</body>
</html>
EXTERNE

 
<!DOCTYPE html>
<html>
<body>
<h1>bonjour tous le monde</h1>
<script type="text/javascript">
 document.write(" c'est tout");
</script>
</body>
</html>                                                  //Dans le fichier .html
alert ('\c\'est mon premier javascript exemple');        //Dans le fichier.js
REMARQUES

  <script type="text/javascript” >
L'attribut type n'est PAS obligatoire. JavaScript est la valeur par défaut langage de script en HTML.
 Vous pouvez placer une référence de script externe dans <head> ou <body> comme vous le souhaitez.
 Le script se comportera comme s'il se trouvait exactement à l'endroit où la balise <script> est localisée.
Déclarations Javascript

    Valeurs, opérateurs, expressions, mots-clés et commentaires.
    var x, y, z ; // Énoncé 1
    x = 5 ; // Énoncé 2
    y = 6 ; // Énoncé 3
    z = x + y ; // Énoncé 4
 Un programme JavaScript est une liste de instructions de programmation.
 En HTML, les programmes JavaScript sont exécutés par le navigateur web.
                     alert ('\c\'est mon premier javascript exemple');
  Avec les langages de programmation traditionnels, comme C++ et Java, chaque instruction de code doit se terminer par un point-virgule (;).
 Avec javascript, les déclarations de fin avec un point-virgule ne sont pas obligatoire (facultatif), mais fortement recommandé.
 Cependant, les points-virgules sont nécessaires si vous souhaitez mettre plus plus d'une instruction sur une seule ligne.
Variables
 Les variables sont utilisées pour stocker des données.
 Une variable est un "conteneur" pour les informations que vous souhaitez stoker.
 La valeur d'une variable peut changer au cours du script.
 Vous pouvez faire référence à une variable par son identifiant (nom) pour voir sa
valeur ou de la modifiée.
   Règles pour les identifiants de variables:
 Les identifiants de variables sont sensibles au changement
 Nom, NOM et nom font référence à 3 variables différentes.
 Ils DOIVENT commencer par une lettre ou le tirer bas.
 ex : nom ,    _nom

Déclaration : avec le mot clé var  
  
 Vous n'avez pas besoin de spécifier le type d'une variable à la déclaration
 var n'est utilisé qu'une seule fois à la déclaration
Remarque :
 ex : VAR , var et Var sont le même mot clé
var x; // x is: undefined
x=10.0; // x is 10
x=“Hello“; // x contains the string “Hello”
var y =6; //y is 6
EXEMPLES SIMPLES  JS

 
  <script type="text/javascript">
     var x="Hello World!" ;
     document.write(x);
  </script>

EXEMPLE

  <script type="text/javascript">
     var x="World" ;
     document.write("Hello"+ x);
  </script>

  La méthode document.write() ne doit être utilisée que pour essai.
 Utilisation de document.write() après qu'un document HTML est exécuté , supprimera tout le code HTML existant.
<!DOCTYPE html>
<html>
<body><h1>Salut tous le monde </h1>
<p> Votre premier paragraphe.</p>
<button type="button" onclick="document.write(5+6)"> Cliquer sur le bouton!</button>
</body>
</html>

 window. alert

<script>
  window.alert("message");
</script>

 window.prompt

<script>
  var nom=window.prompt("Insert your name:");
</script>

 window.confirm

<script>
  var rep=window.confirm("Are you sure?");
</script>

 Avec les conditions if ... else

<script>
var x=prompt(" Enter a number ");
if(x<0)
{
   alert ("You entered a negative number");
}
else
{
    alert ("You entered a positive number");
}
</script>

   Le code JavaScript est exécuté lors du chargement de la page ou lorsque le navigateur déclenche un événement

 Toutes les instructions sont exécutées au chargement de la page

 Certaines instructions définissent simplement des fonctions qui peuvent être appelées ultérieurement

 Les appels de fonction ou le code peuvent être attachés comme "event handlers" via les attributs de balise

 Exécuté lorsque l'événement est déclenché par le navigateur

<body>
<img src="velo.png" onclick="alert('clicked!')" />
</body>

Les évènements

Un événement se produit à la suite d'une activité:

 Un utilisateur clique sur un lien dans une page

 Page terminée de ce chargée

 Le curseur de la souris entre dans une zone

 Un laps de temps prédéfini s'écoule

 Un formulaire est en cours de soumission


MOHAMED BECHIR