Rappel - salihayacoub.com
17
Rappel Rappel • Langage JavaScript: définition • Insertion du code JavaScript dans code html • Insertion des balises html dans le code javascript <html> <html> <body> <script type="text/javascript"> document.write("<h1> bonjour!</h1>"); </script> </body> </html>
Transcript of Rappel - salihayacoub.com
RappelRappel
• Langage JavaScript: définition • Insertion du code JavaScript dans code html• Insertion des balises html dans le code javascript<html><html><body><script type="text/javascript">document.write("<h1> bonjour!</h1>");</script>
</body></html>
RappelRappel• Déclaration de variables<html><body><script type="text/javascript">var nom;var nom;nom="Fafar";document.write(nom);document write("<br />");document.write( <br /> );nom="Pigeon";document.write(nom);</script>/ p• Commentaires: // une ligne de commentaire/* plusieurs lignes de commentaires*/
JavaScript: les fonctionsJavaScript: les fonctions
• Une fonction contient des instructions qui seront exécutées lors d’ é è t d’ l li it à tt f tid’un évènement ou d’un appel explicite à cette fonction.
• Il est recommandé de placer les fonctions dans <head> ou dans un fichier externe.
• Déclaration d’une fonction avec le mot réservé : functionfunctionMafonction(var1,var2,...,varX) {{ code de la fonction }
L l f i d i é l il f l i• Lorsque la fonction doit retourner un résultat, il faut la terminer par l’instruction return
JavaScript: les fonctionsJavaScript: les fonctions
<html><head> <title> somme des entiers</title><script type="text/javascript">function somme_N_entiers (nb){var somme=0;var somme=0;for (i=1; i <=nb ; i++){somme=somme + i ;document.write("Pour i = " + i + " , somme = " + somme + "<br />");}return somme;}</script></head><body>body<!‐‐ appel de la fonction ‐‐>Entrer un nombre <br /><input type="text" name="nbre"/><input type = "button" value ="calculer" name = "Bouton2" onClick="somme_N_entiers (nbre.value)"/>/b d /ht l</body></html>
Les instructions de contrôlesLes instructions de contrôles
• L’ alternative<html> <body> <script type="text/javascript"> var note = prompt(note);var note = prompt(note);if (note >= 60) { document.write("<b>Admis</b>"); } else{ document.write("<b>NON Admis</b>");document.write( b NON Admis /b ); }</script> </body> /ht l</html>
Les instructions de contrôlesLes instructions de contrôles Le Switch … caseht l<html><head><title>les listes</title><script type="text/javascript">p yp /j pfunction Menu(x){ switch(x)
{ case 1 : document location href='programmeur html';break;{ case 1 : document.location.href= programmeur.html ;break; case 2 : document.location.href='outils.html';break; case 3 : document.location.href='interets.html';break; case 4 : document.location.href='formulaire.html';break;default:document.location.href="http://www.clg.qc.ca";}
}</script></head></script></head>
Suite de l’exempleSuite de l exemple
Appel de la fonction <body> <form name="forme1"><select name="selection"onChange="Menu(document.forme1.selection.selectedIndex)"><option>Choisissez une option :</option><option >La fonction de programmeur</option><option >Nos outils</option><option >Nos intérêts</option><option >Soumettre sa candidature</option>p / p</select> </form></body></html>
Les instructions de contrôlesLes instructions de contrôles • Les itératives Le for <html>
<body><body> <script type="text/javascript"> for (i = 0; i <= 5; i++) {{ document.write(“le nombre est" + i); document.write("<br />"); } }</script> </body> </html>
Les instructions de contrôlesLes instructions de contrôles • Les itératives L hilLe while<html> <body> <script type="text/javascript"> p yp /j pvar i=0; while (i<=5) { document write(“le nombre est " + i);document.write( le nombre est + i); document.write("<br />"); i++; } </script> </body> </html>
Les instructions de contrôlesLes instructions de contrôles • Les itératives L d hilLe do while<html> <body> <script type="text/javascript"> p yp /j pvar i = 0; do { document write(“le nombre est" + i);document.write( le nombre est + i); document.write("<br />"); i++; } while (i <= 5) </script> </body> </html></html>
Quelques objets de JavaScriptQuelques objets de JavaScript
• Un objet est définit par un ensemble d’attributs (variables) et d’opérations (actions, fonction ou méthodes) .
• JavaScript manipule différents objets qui sont hiérarchisés
L’objet windowLobjet window
L’ bj t Wi dL’objet Window
C’est l’objet qui représente une fenêtre de navigation dans le navigateur. C’est l’objet qui contient entre autre l’objet document et l’objet location
Quelques méthodes de l’objet window. • Méthodes Description • alert() La méthode alert() permet d'afficher dans une boîte composée
d'une fenêtre et d'un bouton OK le texte qu'on lui fournit en qparamètre
• close() Permet de fermer la fenêtre en cours • confirm() La méthode confirm() est similaire à la méthode alert(), si ce n'est
qu'elle permet un choix entre "OK" et "Annuler". q p• open() Permet d’ouvrir une nouvelle fenêtre • prompt() Elle permet à un utilisateur de rentrer une valeur • resizeTo() Redimensionne une fenêtre : window.resizeTo(500,300). Les
valeurs doivent être en pixelsvaleurs doivent être en pixels
L’objet documentLobjet document
• Objet documentObjet document
L’ensemble des informations inscrites dans la fenêtre sont écrites dans un objet documentfenêtre sont écrites dans un objet document
Une des opérations de l’objet document est i ()write()
Cet objet sera détaillé plus loin.
Accès aux éléments d’un formulaireAccès aux éléments d un formulaire
• L’objet document peut contenir un formulaire qui à son tour peut contenir des zones de texte, des boutons…
• Pour accéder à un élément d’un formulaire, il faut connaître son nom (name) ou son id.
• Exemple: Pour accéder à une ligne de texte et chercher sa valeur on écrira :
document.forme1.texte1.value :document.forme1.texte1.value : où Forme1: désigne le nom de la forme dans laquelle se trouve la
ligne de texte :ligne de texte : Texte1: désigne le nom de la ligne de texte. value est une opération de l’objet texte.
Exemple 1Exemple 1
<html><head> <title> Exemple 9</title> <script type="text/javascript">function doubler(nb)
{var Resultat;
Resultat=nb*2 ;
return Resultat;;}</script></head>/
Exemple 1: suiteExemple 1: suite
<body><!‐‐ appel de la fonction ‐‐>Entrer un nombre <br />i t t "t t" " b "/<input type="text" name="nbre"/>
<!‐‐l'instruction qui suit est sur une seule ligne ‐‐><! l instruction qui suit est sur une seule ligne ><input type = "button" value ="calculer" name = "Bouton2" onClick="res.value=doubler(nbre.value)" />i " " " "/<input type="text" name="res"/></body></html></html>
ExerciceExercice
Écrire une fonction javascript qui calcule le salaire horaire d'un employé. Le salaire se calcule comme suit:
Si le nombre d'heure est inférieur ou égal à 40 alors le salaire est égale à nombre d'heure * taux horairesalaire est égale à nombre d heure taux horaire
Sinon le salaire est égal à 40*taux horaire +( (nombre d'heure‐40)*2*taux horaire.)
V d dé l l i bl Nb h T tVous devez déclarer les variables: Nb_heures, Taux et Salaire.
La fonction reçoit comme paramètres la variable Taux et ç pla variable Nb_heures.
La fonction doit se situer entre les balise <head> et </head> et doit être appelée sur un click de bouton</head> et doit être appelée sur un click de bouton.
