SlideShare une entreprise Scribd logo
Enseignant : ILYES BRADAI Page 1 sur 10
Système Technologie etInternet 4ème SI-STI
1
Le Langage JavaScript
I. Le formalisme de base de JavaScript
<html>
<head>
<title>Page contenant un Script </title>
<script>
.....
</script>
</head>
<body>
<form>
....
</form>
</body>
</html>
II. Les formulaires
Activité 1
a. Créer une page web contenant le formulaire suivant :
b. Produire la balise obtenue présentant le formulaire.
………………………………………………………………………………..
c. Ajouter un nom à ce formulaire
………………………………………………………………………………..
Constatation : la balise <form> est composée des attributs suivants :
Attribut Rôle
method
action
name
1) Les objets d’un formulaire
A. L’objet Zone de Texte
1) Balise d’insertion
< input type ="text" name="nom_zone_texte" >
2) La propriété Value
Cette propriété retourne le contenue (valeur) de la zone de texte
Syntaxe :
nom_formulaire.nom_zone_text.value
B. L’objet Case d’option / Bouton Radio
1) Balise d’insertion
<input type ="radio" name="nom_radio" value="val">
2) La propriété Checked
Cette propriété retourne vrai (true) si l’option est cochée et retourne
faux (false) si l’option est non cochée
Code
javaScript
Les objetsdu
formulaire
Enseignant : ILYES BRADAI Page 2 sur 10
Système Technologie etInternet 4ème SI-STI
2
Syntaxe :
nom_formulaire.bouton_radio[i].cheked
NB. L’indice i représente l’ordre de d’option dans le groupe qui
commence à partir de la valeur zéro : 0
C. L’objet Case à cocher (checkbox)
1) Balise d’insertion
<input type ="checkbox"
name="nom_case_option" value="val">
2) La propriété Checked
Elle a le même rôle que la propriété checked du bouton radio
Syntaxe :
nom_formulaire.case_option.cheked
D. L’objet Liste déroulante
1) Balise d’insertion
<select size="taille" name="nom_liste">
< option value="Valeur1" > option1 </option>
< option value="Valeur2" > option2 </option>
…..
< option value="Valeur3" > optionN </option>
</select>
2) Les propriétés
a. La propriété length : retourne le nombre d’options d’une liste
Syntaxe :
nom_formulaire.liste.options.length
b. La propriété selectedIndex : désigne l’indice de l’option
séléctionnée dans la liste
Syntaxe :
nom_formulaire.liste.options.selectedIndex
c. La propriété options[i] : désigne l’option numéro i (à partir de
0)
Syntaxe :
nom_formulaire.liste.options[i]
d. La propriété text : désigne le contenue de l’option numéro i
Syntaxe :
nom_formulaire.liste.options[i].text
e. La propriété value : désigne la valeur de l’option numéro i
Syntaxe :
nom_formulaire.liste.options[i].value
E. Les boutons : Normal, Reset et Submit
 Le bouton normal permet d’effectuer des opérations sur les objets
de la même page ou bien permet d’ouvrir une autre page.
<input type="button" value="Bouton" name="B1">
 Le bouton reset permet d’annuler les modifications apportées à
tous les contrôles d’un formulaire et de revenir aux valeurs par
défaut.
<input type="submit" value="Envoyer" name="B2">
Enseignant : ILYES BRADAI Page 3 sur 10
Système Technologie etInternet 4ème SI-STI
3
 Le bouton submit valide le formulaire et envoi les données saisies
à l’URL (fichier) désigné dans l’attribut ACTION de la balise
<FORM>
<input type="reset" value="Rétablir" name="B3">
III. Les fonctions
1) Déclaration
Chaque fonction est déclarée dans la partie <script></script>
<script>
function nom_fontion (liste_paramètres)
{
…..
}
</script>
Activité 2
Dans cette page, on souhaite calculer le résultat des variables A et B par
l’opération sélectionnée. Déclarer une fonction « javascript » Calculer( )
2) Appel d’une fonction
L’appel d’une fonction se fait grâce à un évènement sur un objet du
formulaire ou un évènement sur le document (un click, déplacement
souris, appuyer sur une touche, ouverture de la page …)
Syntaxe :
OnEvénement = "nom_fonction()"
3) Les événements
Un évènement peut être :
a. onclick : est lancé lors du click avec le bouton gauche de la souris
sur une zone de texte ou un bouton.
b. onFocus : lorsque la zone de texte reçoit le focus
c. onBlur : lorsque la zone de texte perd le focus
d. onChange : lorsque la zone de texte perd le focus et change de
valeur.
e. onKeyUp : lorsque l’utilisateur relâche une touche (clavier)
f. onKeyDown : lorsque l’utilisateur appuie sur une touche.
g. onsubmit : lorsque l’utilisateur appuie sur un bouton de type
envoyer.
h. onload : lorsque une page est chargée (ouverture)
i. onunload: lorsque une page est déchargée (fermeture)
Activité 3
Ajouter un évènement de click sur le bouton calculer faisant un appel
à la fonction calculer( )
………………………………………………………………………………
4) Les variables
Les variables peuvent se déclarer de deux façons :
Façon explicite Façon implicite
var Numero = 1
var Prenom = "Lycée"
var trouve = true
Numero = 1
Prenom = " Lycée "
trouve = true
Début de la
fonction
Fin de la
fonction
Corps de la
fonction
Début du
script
Fin du
script
Enseignant : ILYES BRADAI Page 4 sur 10
Système Technologie etInternet 4ème SI-STI
4
5) Les opérations d’entrée/sorties
a) Les entrées
prompt ( ) est une méthode qui permet d’afficher une boîte de
dialogue avec un message et un champ de saisie.
Cette méthode appartient à l’objet window.
Syntaxe :
nom_variable = prompt ("message", "valeur par défaut")
b) Les sorties
 alert ( ) est une méthode qui permet d’afficher un message et/ou
une variable dans une boîte de dialogue. Cette méthode appartient
à l’objet window.
Syntaxe :
alert ("message"+nom-variable) ;
 write ( ) est une méthode qui permet d’afficher un texte et/ou une
variable dans une page WEB. Cette méthode appartient à l’objet
document.
document.write("message"+nom-variable) ;
Activité 4
Ajouter un code javascript permettant de :
 Afficher le messageBienVenue dans l’univers JAVASCRIT lors
de chargement de la page.
 A partir d’une boite de saisir donner ton nom et afficher à la fin
du document le message : « bonjour » suivit de ton nom
6) Les tests Javascript
Chaque formulaire doit obéir à une liste de conditions satisfaisant les
besoins de l’utilisateur à fin d’éviter les risques des données (valeurs)
erronées (incorrectes).
Les structures conditionnelles
La forme simple réduite La forme alternative
if (condition vraie)
{
Instructions ;
………
}
if (condition vraie)
{
Instructions ;
………
}
else
{
Instructions ;
………
}
La forme généralisée La forme à choix multiple
if (condition1 vraie)
{
Instructions ;
}
else
if (condition 2 vraie)
{ Instructions ; }
…………
else
{ Instructions ; }
switch (expression)
{
case valeur1 : instructions ;
break ;
case valeur2 : instructions ;
break ;
case valeur3 : instructions ;
break ;
default : instructions ;
}
Activité 5
Ajouter à la fonction calcule les testes suivants :
 Tester que le contenue des zones de texte A et B sont :
o Non Vide
o Numérique
 Tester qu’il ya une opération sélectionnée
 Calculer le résultat selon l’opération (+, -, *, /) sélectionnée.
Enseignant : ILYES BRADAI Page 5 sur 10
Système Technologie etInternet 4ème SI-STI
5
Produire le code JavaScript obtenu IV. Fonctions prédéfinies dans JavaScript
1) Le type numérique
fonctions Rôle Exemple
parseInt()
Extrait une valeur
numérique entière à partir
d’une chaîne de caractère
x=parseInt("25.75dt")
// x=……………
parseFloat
Extrait une valeur
numérique décimale à
partir d’une chaîne de
caractère
x=parseFloat("25.75dt")
// x=……………
isNaN()
Retourne "true" si une
valeur est numérique et
"false" sinon.
reponse=isNaN("25.75")
//reponse=……………
eval()
Retourne le résultat
numérique d’une
expression en paramètre
oper ="*" ;
v1=10 ;
valeur="v1"+oper+"5" ;
x=eval (valeur) ;
//x=……………
Number()
Convertit un objet en
valeur numérique.
chaine= "2009" ;
val = Number (chaine) ;
//x=……………
String()
Convertit un nombre en
une chaîne de caractère.
x = String(12) ;
y = String(45) ;
z = x+y ;//z=……………
2) L’objet Math
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
Enseignant : ILYES BRADAI Page 6 sur 10
Système Technologie etInternet 4ème SI-STI
6
Méthode Description Exemple
abs (nb)
Retourne la valeur absolue
d’un nombre
x=Math.abs (-3.26) ;
//x=3.26
ceil (nb)
Retourne l’entier supérieur
ou égale à la valeur
donnée en paramètre.
x=Math.ceil (3.01) ;
//x=……….
x=Math. ceil (3.99) ;
//x=……….
floor (nb)
Retourne l’entier inférieur
ou égale à la valeur
donnée en paramètre.
x=Math.floor (3.01) ;
//x=……….
x=Math.floor (3.99) ;
//x=……….
round (nb)
Retourne l’entier le plus
proche de la valeur
donnée en paramètre.
x=Math.round (3.01) ;
//x=……….
x=Math.round (3.99) ;
//x=……….
max (nb1,nb2)
Retourne le plus grand des
deux nombres donnés en
paramètres
x=Math.max (2,3) ;
//x=……….
//x=……….
min (nb1,nb2)
Retourne le plus petit des
deux nombres donnés en
paramètres
x=Math.min (-2,-3) ;
//x=……….
pow (nb1,nb2)
Retourne le nombre nb1 à
la puissance de nb2
x=Math.pow (2,3) ;
//x=……….
random ()
Retourne un réel aléatoire
compris entre 0 et 1
x = Math.random( )
//x=……….
sqrt(nb)
Retourne la racine carrée
du nombre passé en
paramètre
x=Math.sqrt(4) ;
// x=……….
3) L’objet String : chaîne de caractères
Instruction Description Exemple
ch.length ;
Propriété qui donne la
longueur de la chaîne
de caractères ch.
Ch="java" ;
x=ch.length ;
// x= ………..
ch.charAt (p) ;
Méthode retourne le
caractère situé à la
position p dans la
chaine ch.
Ch="java" ;
c=ch.charAt(2) ;
// c= ………..
ch.indexOf(chaîne,p) ;
Méthode retourne la
position d'une chaîne
ch1 dans une autre
chaîne de caractère ch,
en effectuant la
recherche de gauche à
droite, à partir de la
position p (facultatif)
spécifiée en paramètre.
Ch="javascript" ;
x=ch.indexOf("s",2) ;
// x= ………..
x=ch.indexOf("s") ;
// x= ………..
ch.substring(x,y) ;
Méthode qui renvoie la
sous-chaîne située
entre la position x et la
position y-1
Ch="javascript" ;
x=ch.substring(4,6) ;
// x= ………..
ch. substr(x,y) ;
Méthode qui renvoie la
sous-chaîne composé
de y caractère à partir
de la position x
Ch="javascript" ;
x=ch. substr(4,6) ;
// x= ………..
ch. toUpperCase() ;
Méthode qui renvoie la
conversion majuscule
d’une chaine ch
Ch="JAVAScript" ;
x=ch. toUpperCase();
// x= ………..
Enseignant : ILYES BRADAI Page 7 sur 10
Système Technologie etInternet 4ème SI-STI
7
ch.toLowerCase() ;
Méthode qui renvoie la
conversion minuscule
d’une chaine ch
Ch="javaScript" ;
x=ch. toLowerCase();
// x= ………..
Activité 6
Créer une page web « Location.html » suivante :
La liste déroulante « Modèle du voiture » contenant la liste des
modèles et leurs prix par jour :
Modèle Prix par jour
Clio 90
406 120
206 70
FIAT 50
1) L’appui sur le bouton « Générer un code » permet d’appeler
une fonction JavaScript « Code » qui réalise les actions
suivantes :
 Vérifier que les champs « Nom », « Prénom », « CIN » et
« Mail » non vides.
 Vérifier que les champs « Nom », « Prénom » commencent par
un caractère majuscule
 Vérifier que le champ « CIN » est numérique de 8 chiffres.
 Vérifier que le champ « Mail » contient le caractère @.
 Afficher dans la zone texte « code location » le code de location
du client, sachant que le code de location du client est la
concaténation de deux premières lettres de nom, trois premiers
chiffres de CIN et deux derniers lettres de prénom
.
Exemple : Nom=TAHRI CIN=08187261 Prénom=AHMED
 Code location=TA081ED
2) L’appui sur la zone texte « Prix de location » permet
d’appeler une fonction JavaScript « calcul » qui calcule et
affiche la prix de location dans la zone texte (Prix de location)
sachant que : Prix de location = Prix par jour * Nombre de
jours.
3) L’appui sur le bouton Valider appelle à une fonction JavaScript
« Verif » qui permet de vérifier que les champs « code
location » et « Prix de location» ne sont pas vides, si les
conditions sont satisfaisantes une page nommée
« Validation.html » sera appelée contenant le message
suivant : « MERCI POUR VOTRE VISITE »
Enseignant : ILYES BRADAI Page 8 sur 10
Système Technologie etInternet 4ème SI-STI
8
Produire le code JavaScript obtenu V. Les structures de contrôle itératives : les boucles
1) La structure itérative complète : for (pour)
Syntaxe Exemple
for (Val-initial ; condition_continuation ;
expression_de_progression)
{
Instructions ;
}
S = 0 ;
for (i=… ; i<= … ; i…..)
{
s= s+i ;
}
// pour i de 1 à 10
2) La structure itérative à condition d’arrêt : while (tant que)
Syntaxe Exemple
while (condition_continuation)
{
Instructions ;
}
i =1 ;
s = 0 ;
while (……………….)
{
s = s+i ;
i++ ;
}
3) La structure itérative à condition d’arrêt : do…while(répéter)
Syntaxe Exemple
do
{
Instructions ;
}
while (condition_continuation) ;
s =0 ;
i = 1 ;
do
{ s = s+i ;
i++ ;
} while (…………………) ;
Activité 7
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
Enseignant : ILYES BRADAI Page 9 sur 10
Système Technologie etInternet 4ème SI-STI
9
Soit la page Diviseyr.html suivante : Produire le code JavaScript de la fonction Calcul
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
Enseignant : ILYES BRADAI Page 10 sur 10
Système Technologie etInternet 4ème SI-STI
10
Activité 9
Créer une page Nettoyage.html permettant de saisir une chaîne de
caractères CH à partir d’une boite de dialogue de taille compris entre
5 et 20. On veut afficher si CH est palindrome ou non.
Activité 10
Créer la page eleve.html contenant la fonction verif() permettant de
vérifier si le nom de l’élève est alphabétique ou non.
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….

Contenu connexe

Tendances

Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41
megaplanet20
 
initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
Abdoulaye Dieng
 
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
ECAM Brussels Engineering School
 
Chapitre6: Surcharge des opérateurs
Chapitre6:  Surcharge des opérateursChapitre6:  Surcharge des opérateurs
Chapitre6: Surcharge des opérateurs
Aziz Darouichi
 
Meet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaireMeet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaire
Julien Vinber
 
Cours c#
Cours c#Cours c#
Cours c#
zan
 
Python avancé : Qualité de code et convention de codage
Python avancé : Qualité de code et convention de codagePython avancé : Qualité de code et convention de codage
Python avancé : Qualité de code et convention de codage
ECAM Brussels Engineering School
 
jQuery mobile [Part2]
jQuery mobile [Part2]jQuery mobile [Part2]
jQuery mobile [Part2]
Mohamed Tahar ZWAWA
 
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
megaplanet20
 
Diagramme uml pfe
Diagramme uml pfeDiagramme uml pfe
Diagramme uml pfe
Marwatta Dghaies
 
Comment Créer Un Site De Membres vol 03
Comment Créer Un Site De Membres vol 03Comment Créer Un Site De Membres vol 03
Comment Créer Un Site De Membres vol 03
Patrick Van Hoof
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Stéphanie Hertrich
 
3 vb reference
3 vb reference3 vb reference
3 vb referencekkatia31
 
Presentation Csharp et winforms
Presentation Csharp et winformsPresentation Csharp et winforms
Presentation Csharp et winforms
Christophe Zome
 
Aide mémoire de caml
Aide mémoire de camlAide mémoire de caml
Aide mémoire de caml
zan
 
PHP &amp; MySQL
PHP &amp; MySQLPHP &amp; MySQL
PHP &amp; MySQL
Saïd Radhouani
 
Corrige tp java
Corrige tp javaCorrige tp java
Corrige tp java
Maya Medjdoub
 
Chapitre3TableauxEnCppV2019
Chapitre3TableauxEnCppV2019Chapitre3TableauxEnCppV2019
Chapitre3TableauxEnCppV2019
Aziz Darouichi
 
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du toutHumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
florentpellet
 
Développement informatique : Programmation graphique
Développement informatique : Programmation graphiqueDéveloppement informatique : Programmation graphique
Développement informatique : Programmation graphique
ECAM Brussels Engineering School
 

Tendances (20)

Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41
 
initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
 
Programmation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulationProgrammation orientée objet : Object, classe et encapsulation
Programmation orientée objet : Object, classe et encapsulation
 
Chapitre6: Surcharge des opérateurs
Chapitre6:  Surcharge des opérateursChapitre6:  Surcharge des opérateurs
Chapitre6: Surcharge des opérateurs
 
Meet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaireMeet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaire
 
Cours c#
Cours c#Cours c#
Cours c#
 
Python avancé : Qualité de code et convention de codage
Python avancé : Qualité de code et convention de codagePython avancé : Qualité de code et convention de codage
Python avancé : Qualité de code et convention de codage
 
jQuery mobile [Part2]
jQuery mobile [Part2]jQuery mobile [Part2]
jQuery mobile [Part2]
 
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
UML : Diagrammes de cas d'utilisation -- modele detaille -- 15
 
Diagramme uml pfe
Diagramme uml pfeDiagramme uml pfe
Diagramme uml pfe
 
Comment Créer Un Site De Membres vol 03
Comment Créer Un Site De Membres vol 03Comment Créer Un Site De Membres vol 03
Comment Créer Un Site De Membres vol 03
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
 
3 vb reference
3 vb reference3 vb reference
3 vb reference
 
Presentation Csharp et winforms
Presentation Csharp et winformsPresentation Csharp et winforms
Presentation Csharp et winforms
 
Aide mémoire de caml
Aide mémoire de camlAide mémoire de caml
Aide mémoire de caml
 
PHP &amp; MySQL
PHP &amp; MySQLPHP &amp; MySQL
PHP &amp; MySQL
 
Corrige tp java
Corrige tp javaCorrige tp java
Corrige tp java
 
Chapitre3TableauxEnCppV2019
Chapitre3TableauxEnCppV2019Chapitre3TableauxEnCppV2019
Chapitre3TableauxEnCppV2019
 
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du toutHumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
 
Développement informatique : Programmation graphique
Développement informatique : Programmation graphiqueDéveloppement informatique : Programmation graphique
Développement informatique : Programmation graphique
 

Similaire à Javascript

Atelier18
Atelier18 Atelier18
Atelier18
ChaimaaKibal
 
cours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdfcours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdf
LamissGhoul1
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 
Code Week 2014 - atelier d'initiation à la programmation avec python
Code Week 2014 - atelier d'initiation à la programmation avec pythonCode Week 2014 - atelier d'initiation à la programmation avec python
Code Week 2014 - atelier d'initiation à la programmation avec python
bbourgois
 
Chapitre 04 : les fonctions
Chapitre 04 : les fonctionsChapitre 04 : les fonctions
Chapitre 04 : les fonctions
L’Université Hassan 1er Settat
 
mis
mismis
misISIG
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
coursuniv
 
Visual studio
Visual studioVisual studio
Visual studioISIG
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 
Convertisseur Pouce en cm et cm en pixel
Convertisseur  Pouce en cm et  cm en pixelConvertisseur  Pouce en cm et  cm en pixel
Convertisseur Pouce en cm et cm en pixel
Adad Med Chérif
 
generation_code.pdf
generation_code.pdfgeneration_code.pdf
generation_code.pdf
elmustafaayoub
 
Gantt
GanttGantt
Gantt
Musatge
 
[Tutoriel] Studio de développement RPG SilverDev Designer
[Tutoriel] Studio de développement RPG SilverDev Designer[Tutoriel] Studio de développement RPG SilverDev Designer
[Tutoriel] Studio de développement RPG SilverDev Designer
SilverDev by Experia
 
Chap2fonctionscpp
Chap2fonctionscppChap2fonctionscpp
Chap2fonctionscpp
Aziz Darouichi
 
Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02
Rahma Boufalgha
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
neuros
 
C++ 11/14
C++ 11/14C++ 11/14
C++ 11/14
Alexandre Hamez
 

Similaire à Javascript (20)

Atelier18
Atelier18 Atelier18
Atelier18
 
cours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdfcours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdf
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 
Code Week 2014 - atelier d'initiation à la programmation avec python
Code Week 2014 - atelier d'initiation à la programmation avec pythonCode Week 2014 - atelier d'initiation à la programmation avec python
Code Week 2014 - atelier d'initiation à la programmation avec python
 
Chapitre 04 : les fonctions
Chapitre 04 : les fonctionsChapitre 04 : les fonctions
Chapitre 04 : les fonctions
 
mis
mismis
mis
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
Visual studio
Visual studioVisual studio
Visual studio
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 
hotpot
hotpothotpot
hotpot
 
Convertisseur Pouce en cm et cm en pixel
Convertisseur  Pouce en cm et  cm en pixelConvertisseur  Pouce en cm et  cm en pixel
Convertisseur Pouce en cm et cm en pixel
 
generation_code.pdf
generation_code.pdfgeneration_code.pdf
generation_code.pdf
 
Gantt
GanttGantt
Gantt
 
[Tutoriel] Studio de développement RPG SilverDev Designer
[Tutoriel] Studio de développement RPG SilverDev Designer[Tutoriel] Studio de développement RPG SilverDev Designer
[Tutoriel] Studio de développement RPG SilverDev Designer
 
Windev extrait
Windev extraitWindev extrait
Windev extrait
 
Chap2fonctionscpp
Chap2fonctionscppChap2fonctionscpp
Chap2fonctionscpp
 
Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
 
C++ 11/14
C++ 11/14C++ 11/14
C++ 11/14
 

Dernier

Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
RDM-ROW history
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
Asher256
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
Asher256
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
ABO IPTV PREMIUM
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
Asher256
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
RDM-ROW history
 

Dernier (6)

Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
 

Javascript

  • 1. Enseignant : ILYES BRADAI Page 1 sur 10 Système Technologie etInternet 4ème SI-STI 1 Le Langage JavaScript I. Le formalisme de base de JavaScript <html> <head> <title>Page contenant un Script </title> <script> ..... </script> </head> <body> <form> .... </form> </body> </html> II. Les formulaires Activité 1 a. Créer une page web contenant le formulaire suivant : b. Produire la balise obtenue présentant le formulaire. ……………………………………………………………………………….. c. Ajouter un nom à ce formulaire ……………………………………………………………………………….. Constatation : la balise <form> est composée des attributs suivants : Attribut Rôle method action name 1) Les objets d’un formulaire A. L’objet Zone de Texte 1) Balise d’insertion < input type ="text" name="nom_zone_texte" > 2) La propriété Value Cette propriété retourne le contenue (valeur) de la zone de texte Syntaxe : nom_formulaire.nom_zone_text.value B. L’objet Case d’option / Bouton Radio 1) Balise d’insertion <input type ="radio" name="nom_radio" value="val"> 2) La propriété Checked Cette propriété retourne vrai (true) si l’option est cochée et retourne faux (false) si l’option est non cochée Code javaScript Les objetsdu formulaire
  • 2. Enseignant : ILYES BRADAI Page 2 sur 10 Système Technologie etInternet 4ème SI-STI 2 Syntaxe : nom_formulaire.bouton_radio[i].cheked NB. L’indice i représente l’ordre de d’option dans le groupe qui commence à partir de la valeur zéro : 0 C. L’objet Case à cocher (checkbox) 1) Balise d’insertion <input type ="checkbox" name="nom_case_option" value="val"> 2) La propriété Checked Elle a le même rôle que la propriété checked du bouton radio Syntaxe : nom_formulaire.case_option.cheked D. L’objet Liste déroulante 1) Balise d’insertion <select size="taille" name="nom_liste"> < option value="Valeur1" > option1 </option> < option value="Valeur2" > option2 </option> ….. < option value="Valeur3" > optionN </option> </select> 2) Les propriétés a. La propriété length : retourne le nombre d’options d’une liste Syntaxe : nom_formulaire.liste.options.length b. La propriété selectedIndex : désigne l’indice de l’option séléctionnée dans la liste Syntaxe : nom_formulaire.liste.options.selectedIndex c. La propriété options[i] : désigne l’option numéro i (à partir de 0) Syntaxe : nom_formulaire.liste.options[i] d. La propriété text : désigne le contenue de l’option numéro i Syntaxe : nom_formulaire.liste.options[i].text e. La propriété value : désigne la valeur de l’option numéro i Syntaxe : nom_formulaire.liste.options[i].value E. Les boutons : Normal, Reset et Submit  Le bouton normal permet d’effectuer des opérations sur les objets de la même page ou bien permet d’ouvrir une autre page. <input type="button" value="Bouton" name="B1">  Le bouton reset permet d’annuler les modifications apportées à tous les contrôles d’un formulaire et de revenir aux valeurs par défaut. <input type="submit" value="Envoyer" name="B2">
  • 3. Enseignant : ILYES BRADAI Page 3 sur 10 Système Technologie etInternet 4ème SI-STI 3  Le bouton submit valide le formulaire et envoi les données saisies à l’URL (fichier) désigné dans l’attribut ACTION de la balise <FORM> <input type="reset" value="Rétablir" name="B3"> III. Les fonctions 1) Déclaration Chaque fonction est déclarée dans la partie <script></script> <script> function nom_fontion (liste_paramètres) { ….. } </script> Activité 2 Dans cette page, on souhaite calculer le résultat des variables A et B par l’opération sélectionnée. Déclarer une fonction « javascript » Calculer( ) 2) Appel d’une fonction L’appel d’une fonction se fait grâce à un évènement sur un objet du formulaire ou un évènement sur le document (un click, déplacement souris, appuyer sur une touche, ouverture de la page …) Syntaxe : OnEvénement = "nom_fonction()" 3) Les événements Un évènement peut être : a. onclick : est lancé lors du click avec le bouton gauche de la souris sur une zone de texte ou un bouton. b. onFocus : lorsque la zone de texte reçoit le focus c. onBlur : lorsque la zone de texte perd le focus d. onChange : lorsque la zone de texte perd le focus et change de valeur. e. onKeyUp : lorsque l’utilisateur relâche une touche (clavier) f. onKeyDown : lorsque l’utilisateur appuie sur une touche. g. onsubmit : lorsque l’utilisateur appuie sur un bouton de type envoyer. h. onload : lorsque une page est chargée (ouverture) i. onunload: lorsque une page est déchargée (fermeture) Activité 3 Ajouter un évènement de click sur le bouton calculer faisant un appel à la fonction calculer( ) ……………………………………………………………………………… 4) Les variables Les variables peuvent se déclarer de deux façons : Façon explicite Façon implicite var Numero = 1 var Prenom = "Lycée" var trouve = true Numero = 1 Prenom = " Lycée " trouve = true Début de la fonction Fin de la fonction Corps de la fonction Début du script Fin du script
  • 4. Enseignant : ILYES BRADAI Page 4 sur 10 Système Technologie etInternet 4ème SI-STI 4 5) Les opérations d’entrée/sorties a) Les entrées prompt ( ) est une méthode qui permet d’afficher une boîte de dialogue avec un message et un champ de saisie. Cette méthode appartient à l’objet window. Syntaxe : nom_variable = prompt ("message", "valeur par défaut") b) Les sorties  alert ( ) est une méthode qui permet d’afficher un message et/ou une variable dans une boîte de dialogue. Cette méthode appartient à l’objet window. Syntaxe : alert ("message"+nom-variable) ;  write ( ) est une méthode qui permet d’afficher un texte et/ou une variable dans une page WEB. Cette méthode appartient à l’objet document. document.write("message"+nom-variable) ; Activité 4 Ajouter un code javascript permettant de :  Afficher le messageBienVenue dans l’univers JAVASCRIT lors de chargement de la page.  A partir d’une boite de saisir donner ton nom et afficher à la fin du document le message : « bonjour » suivit de ton nom 6) Les tests Javascript Chaque formulaire doit obéir à une liste de conditions satisfaisant les besoins de l’utilisateur à fin d’éviter les risques des données (valeurs) erronées (incorrectes). Les structures conditionnelles La forme simple réduite La forme alternative if (condition vraie) { Instructions ; ……… } if (condition vraie) { Instructions ; ……… } else { Instructions ; ……… } La forme généralisée La forme à choix multiple if (condition1 vraie) { Instructions ; } else if (condition 2 vraie) { Instructions ; } ………… else { Instructions ; } switch (expression) { case valeur1 : instructions ; break ; case valeur2 : instructions ; break ; case valeur3 : instructions ; break ; default : instructions ; } Activité 5 Ajouter à la fonction calcule les testes suivants :  Tester que le contenue des zones de texte A et B sont : o Non Vide o Numérique  Tester qu’il ya une opération sélectionnée  Calculer le résultat selon l’opération (+, -, *, /) sélectionnée.
  • 5. Enseignant : ILYES BRADAI Page 5 sur 10 Système Technologie etInternet 4ème SI-STI 5 Produire le code JavaScript obtenu IV. Fonctions prédéfinies dans JavaScript 1) Le type numérique fonctions Rôle Exemple parseInt() Extrait une valeur numérique entière à partir d’une chaîne de caractère x=parseInt("25.75dt") // x=…………… parseFloat Extrait une valeur numérique décimale à partir d’une chaîne de caractère x=parseFloat("25.75dt") // x=…………… isNaN() Retourne "true" si une valeur est numérique et "false" sinon. reponse=isNaN("25.75") //reponse=…………… eval() Retourne le résultat numérique d’une expression en paramètre oper ="*" ; v1=10 ; valeur="v1"+oper+"5" ; x=eval (valeur) ; //x=…………… Number() Convertit un objet en valeur numérique. chaine= "2009" ; val = Number (chaine) ; //x=…………… String() Convertit un nombre en une chaîne de caractère. x = String(12) ; y = String(45) ; z = x+y ;//z=…………… 2) L’objet Math ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ……………………………………………………………………………….
  • 6. Enseignant : ILYES BRADAI Page 6 sur 10 Système Technologie etInternet 4ème SI-STI 6 Méthode Description Exemple abs (nb) Retourne la valeur absolue d’un nombre x=Math.abs (-3.26) ; //x=3.26 ceil (nb) Retourne l’entier supérieur ou égale à la valeur donnée en paramètre. x=Math.ceil (3.01) ; //x=………. x=Math. ceil (3.99) ; //x=………. floor (nb) Retourne l’entier inférieur ou égale à la valeur donnée en paramètre. x=Math.floor (3.01) ; //x=………. x=Math.floor (3.99) ; //x=………. round (nb) Retourne l’entier le plus proche de la valeur donnée en paramètre. x=Math.round (3.01) ; //x=………. x=Math.round (3.99) ; //x=………. max (nb1,nb2) Retourne le plus grand des deux nombres donnés en paramètres x=Math.max (2,3) ; //x=………. //x=………. min (nb1,nb2) Retourne le plus petit des deux nombres donnés en paramètres x=Math.min (-2,-3) ; //x=………. pow (nb1,nb2) Retourne le nombre nb1 à la puissance de nb2 x=Math.pow (2,3) ; //x=………. random () Retourne un réel aléatoire compris entre 0 et 1 x = Math.random( ) //x=………. sqrt(nb) Retourne la racine carrée du nombre passé en paramètre x=Math.sqrt(4) ; // x=………. 3) L’objet String : chaîne de caractères Instruction Description Exemple ch.length ; Propriété qui donne la longueur de la chaîne de caractères ch. Ch="java" ; x=ch.length ; // x= ……….. ch.charAt (p) ; Méthode retourne le caractère situé à la position p dans la chaine ch. Ch="java" ; c=ch.charAt(2) ; // c= ……….. ch.indexOf(chaîne,p) ; Méthode retourne la position d'une chaîne ch1 dans une autre chaîne de caractère ch, en effectuant la recherche de gauche à droite, à partir de la position p (facultatif) spécifiée en paramètre. Ch="javascript" ; x=ch.indexOf("s",2) ; // x= ……….. x=ch.indexOf("s") ; // x= ……….. ch.substring(x,y) ; Méthode qui renvoie la sous-chaîne située entre la position x et la position y-1 Ch="javascript" ; x=ch.substring(4,6) ; // x= ……….. ch. substr(x,y) ; Méthode qui renvoie la sous-chaîne composé de y caractère à partir de la position x Ch="javascript" ; x=ch. substr(4,6) ; // x= ……….. ch. toUpperCase() ; Méthode qui renvoie la conversion majuscule d’une chaine ch Ch="JAVAScript" ; x=ch. toUpperCase(); // x= ………..
  • 7. Enseignant : ILYES BRADAI Page 7 sur 10 Système Technologie etInternet 4ème SI-STI 7 ch.toLowerCase() ; Méthode qui renvoie la conversion minuscule d’une chaine ch Ch="javaScript" ; x=ch. toLowerCase(); // x= ……….. Activité 6 Créer une page web « Location.html » suivante : La liste déroulante « Modèle du voiture » contenant la liste des modèles et leurs prix par jour : Modèle Prix par jour Clio 90 406 120 206 70 FIAT 50 1) L’appui sur le bouton « Générer un code » permet d’appeler une fonction JavaScript « Code » qui réalise les actions suivantes :  Vérifier que les champs « Nom », « Prénom », « CIN » et « Mail » non vides.  Vérifier que les champs « Nom », « Prénom » commencent par un caractère majuscule  Vérifier que le champ « CIN » est numérique de 8 chiffres.  Vérifier que le champ « Mail » contient le caractère @.  Afficher dans la zone texte « code location » le code de location du client, sachant que le code de location du client est la concaténation de deux premières lettres de nom, trois premiers chiffres de CIN et deux derniers lettres de prénom . Exemple : Nom=TAHRI CIN=08187261 Prénom=AHMED  Code location=TA081ED 2) L’appui sur la zone texte « Prix de location » permet d’appeler une fonction JavaScript « calcul » qui calcule et affiche la prix de location dans la zone texte (Prix de location) sachant que : Prix de location = Prix par jour * Nombre de jours. 3) L’appui sur le bouton Valider appelle à une fonction JavaScript « Verif » qui permet de vérifier que les champs « code location » et « Prix de location» ne sont pas vides, si les conditions sont satisfaisantes une page nommée « Validation.html » sera appelée contenant le message suivant : « MERCI POUR VOTRE VISITE »
  • 8. Enseignant : ILYES BRADAI Page 8 sur 10 Système Technologie etInternet 4ème SI-STI 8 Produire le code JavaScript obtenu V. Les structures de contrôle itératives : les boucles 1) La structure itérative complète : for (pour) Syntaxe Exemple for (Val-initial ; condition_continuation ; expression_de_progression) { Instructions ; } S = 0 ; for (i=… ; i<= … ; i…..) { s= s+i ; } // pour i de 1 à 10 2) La structure itérative à condition d’arrêt : while (tant que) Syntaxe Exemple while (condition_continuation) { Instructions ; } i =1 ; s = 0 ; while (……………….) { s = s+i ; i++ ; } 3) La structure itérative à condition d’arrêt : do…while(répéter) Syntaxe Exemple do { Instructions ; } while (condition_continuation) ; s =0 ; i = 1 ; do { s = s+i ; i++ ; } while (…………………) ; Activité 7 ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ……………………………………………………………………………….
  • 9. Enseignant : ILYES BRADAI Page 9 sur 10 Système Technologie etInternet 4ème SI-STI 9 Soit la page Diviseyr.html suivante : Produire le code JavaScript de la fonction Calcul ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ……………………………………………………………………………….
  • 10. Enseignant : ILYES BRADAI Page 10 sur 10 Système Technologie etInternet 4ème SI-STI 10 Activité 9 Créer une page Nettoyage.html permettant de saisir une chaîne de caractères CH à partir d’une boite de dialogue de taille compris entre 5 et 20. On veut afficher si CH est palindrome ou non. Activité 10 Créer la page eleve.html contenant la fonction verif() permettant de vérifier si le nom de l’élève est alphabétique ou non. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ………………………………………………………………………………. ……………………………………………………………………………….