0% ont trouvé ce document utile (0 vote)
157 vues40 pages

Java Script

Ce document traite de la programmation en JavaScript. Il est divisé en deux parties et aborde des sujets comme les variables, les types de données, les opérateurs, les structures de contrôle, les boucles, les objets et les fonctions en JavaScript.

Transféré par

Takwa Dridi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
157 vues40 pages

Java Script

Ce document traite de la programmation en JavaScript. Il est divisé en deux parties et aborde des sujets comme les variables, les types de données, les opérateurs, les structures de contrôle, les boucles, les objets et les fonctions en JavaScript.

Transféré par

Takwa Dridi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 40

LE LANGAGE

JAVASCRIPT
Plan
• Partie 1 • Partie 2
▪ JavaScript? ▪ Déclaration des fonctions
▪ HTML et JavaScript ▪ Méthodes utilisées
▪ Les Variables ▪ L’ Accès aux éléments
▪ Les Types
▪ Les Boites de dialogue
▪ Les Opérateurs Javascript
▪ Les Structures conditionnelle
▪ Les Itérations
▪ Hiérarchie d’objets en
JavaScript
▪ Fonctions Prédéfinis
2
Partie 1
JavaScript?

✓ Javascript permet de rendre intéracatif un site internet


développé en HTML.
✓ Javascript permet de développer de véritables
applications fonctionnant exclusivement dans le cadre
d'Internet.
✓ Javascript a été initialement élaboré par Netscape en
association avec Sun Microsystem.
✓ Javascript est standardisé par un comité spécialisé,
l'ECMA (European Computer Manufactures Association).
✓ Langage interprété au chargement de la page par le
navigateur client

3
Partie 1
HTML et JavaScript
Interne
2 possibilités
Externe
Interne: le code de JavaScript sera placé dans l’entête
du document HTML

4
Partie 1
HTML et JavaScript

Externe: Regrouper les instructions de JavaScript dans un


fichier (.js) externe au fichier HTML

5
Partie 1
Les Variables

JavaScript est un langage pauvrement typé, il n’est


pas indispensable de déclarer préalablement le type
de variable.

➔ Utiliser var pour déclarer les variables


➔ Utiliser « ; » en fin d’instruction

Exemple:
var saluer=“Bonjour”;
var nom =“Ali”; 6
Partie 1
Les Types prédéfinis

✓ String, Number, Boolean, NaN, Null, etc.

➔NaN est le sigle de "Not a Number", c’est à dire


"Ce n'est pas un nombre !" C'est en fait le résultat
d'une opération mathématique sans sens (la
division de 0 par 0, la racine carrée d'un nombre
négatif, etc.)

➔NULL sert à spécifier une variable sans valeur


7
Partie 1
Les Boites de dialogue
PROMPT : prompt(‘MSG’,’Valeur ’);

Ex: var x = prompt(‘ veuillez mettre un message‘,’valeur’)

➔ X prend la valeur entrée ou Null si aucune


valeur n’est entrée

8
Partie 1
Les Boites de dialogue

Alert (retourne la valeur UNDEFINED)

Ex: alert(‘Bienvenue à ESPRIT’);

Confirm (retourne la valeur true ou false)


Ex: confirm(‘Bienvenue à ESPRIT’);
9
Partie 1
Les Commentaires

Commentaires en JavaScript :

• Utiliser // pour les commentaires sur une ligne.

• Utiliser au début /* et à la fin */ pour les


commentaires sur plusieurs lignes.

10
Partie 1
Les Opérateurs JavaScript
• Arithmétiques : + - / * ++ --

• Comparaison: < <= == != >= >

• Concaténation des chaînes : +

• Assignation : =

•Spéciales: == et != convertissent les opérandes

de même type avant la comparaison 11


Partie 1
La Structure Conditionnelle
✓ If (condition) instruction;

✓ If (condition) instruction else instruction;

Exemple:

➔REMARQUE: Mettre des { …} pour plusieurs instructions dans un block conditionnel

12
Partie 1
Les Itérations
✓ While (condition) instruction;
✓ Do instruction While (condition);
✓ For (initialisation; condition; incrémentation) instructions;

Exemple:

➔ REMARQUE: Mettre des { …} pour plusieurs instructions dans un block itératif.

13
Partie 1
Notion d’hiérarchie d’objets

✓ JavaScript n’est pas un langage orienté objet mais


un langage basé sur les objets.
✓Un objet est une entité prédéfinie propre à
Javascript.

La page Web est considérée comme un


ENSEMBLE D’OBJETS
14
Partie 1
Notion d’hiérarchie d’objets

➢ Ces objets sont crées par javascript automatiquement si les éléments correspondants
existent dans la page
➢ Certains existent toujours
• navigator
• window
• document
• location 15
• history
Partie 1
Notion d’hiérarchie d’objets
• navigator
– Contient le nom et la version du navigateur, les plugins installés…

• window
– Propriétés qui s’appliquent à la fenêtre tout entière

• document
– Propriétés sur le contenu du document (titre, couleur…)

• location
– URL actuelle

• history
– URLs visitées

16
Partie 1
Objet Array
Création de l’objet :
var mycars=new Array() ;
mycars[0]="Saab" ;
mycars[1]="Volvo" ;
mycars[2]="BMW" ;

Ou bien :
var mycars=new Array("Saab“ ,"Volvo“ ,"BMW") ;

➔Pour contrôler la grandeur du tableau :


var myArray=new Array(3) ;

17
Exercice: Affichage de Partie 1

la date du jour
<HTML>
<HEAD> <TITLE> Exemple Date </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dt=new Date;
var jour=dt.getDay( ); // renvoi un jour [0..6]
var numero=dt.getDate( ); // renvoi le numéro dans le
mois
var mois=dt.getMonth( ); // renvoi le mois [0..11]

var tab_jour=new Array("Dimanche","Lundi","Mardi",


"Mercredi","Jeudi","Vendredi","Samedi");
var tab_mois=new Array("Janvier","Février","Mars","Avril","Mai",
"Juin","Juillet","Août","Septembre",
"Octobre","Novembre","Décembre");

document.write("Nous sommes le "+tab_jour[jour]+" "


+numero+" "+tab_mois[mois]);

</SCRIPT> 18
</BODY>
Partie 1
Fonctions Prédéfinies

• Parsefloat ()

• Parseint ()

• String ()

• Number ()

• Length()

19
Partie 1
Fonctions Parsefloat
✓ parsefloat(une_chaine);
➔ Convertit une chaîne en nombre à
virgule flottante si la chaîne commence par un
caractère numérique.
Exemple:

20
Partie 1
Fonctions Parseint
✓ parseInt(chaine_de_caractère);
➔ Convertit l'argument en un nombre entier
➔ Renvoie NaN si la conversion est impossible
Exemple:
Partie 1
Fonctions String
✓ String (une_chose);
➔Convertit l'argument en une chaîne
Exemple:

Resultat :

22
Partie 1
Fonctions Number
✓ Number(une_valeur);
➔Convertit l'argument en un nombre
➔Renvoie NaN si la convertion est impossible

Exemple:

23
Partie 2
Les Fonctions
Définies dans la partie <head> et appelé dans la
partie <body>

24
Partie 2
Les Méthodes Utilisées

Instruction Description
C'est un entier qui indique la longueur de la
length
chaîne de caractères.
Méthode qui permet d'accéder à un caractère
charAt()
isolé d'une chaîne.
Méthode qui renvoie la position d'une chaîne
partielle à partir d'une position déterminée.
indexOf()
(en commençant au début de la chaîne
pricipale soit en position 0).
Méthode qui renvoie la position d'une chaîne
partielle à partir d'une position déterminée.
lastIndexOf()
(en commençant à la fin soit en position length
moins 1).
Méthode qui renvoie un string partiel situé
substring(x,y)
entre l position x et la position y-1.
toLowerCase() Transforme toutes les lettres en minuscules.
toUpperCase() Transforme toutes les lettres en Majuscules. 25
Partie 2
La Propriété Length

• La propriété length retourne un entier qui indique le nombre


d'éléments dans une chaîne de caractères. Si la chaîne est vide ("
"), le nombre est zéro.

La syntaxe est simple :


x=variable.length;
x=("chaîne de caractères").length;

26
Partie 2
La Propriété Length

• La propriété length ne sert pas que pour les Strings, mais aussi
pour connaître la longueur ou le nombre d'éléments :
✓ Formulaires: Combien a-t-il de formulaires différents ?
✓ Boutons radio: Combien a-t-il de boutons radio dans un groupe ?
✓ Cases à cocher: Combien a-t-il de cases à cocher dans un groupe ?
✓ Options: Combien a-t-il d'options dans un Select ?

27
Partie 2
La Méthode CharAt()

Il faut d'abord bien noter que les caractères sont comptés de gauche à
droite et que la position du premier caractère est 0. La position du
dernier caractère est donc la longueur (length) de la chaîne de
caractère moins 1.
chaîne : Javascript (longueur = 10)
||||||||||
position : 0123456789 (longueur - 1)
Si la position que vous indiquer est inférieure à zéro ou plus grande
que la longueur moins 1, Javascript retourne une chaîne vide.
28
Partie 2
La Méthode CharAt()
La syntaxe de charAt() est :
chaîne_réponse = chaîme_départ.charAt(x);
NB : où x est un entier compris entre 0 et la longueur de la chaîne à
analyser moins 1
var str="Javascript";
Notez l’exemple suivant : var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var
chr=charAt("Javascript",0);
➔ La réponse est "J".
29
Partie 2
La Méthode IndexOf()

Cette méthode renvoie la position, soit x, d'un string partiel (lettre


unique, groupe de lettres ou mot) dans une chaîne de caractères en
commençant à la position indiquée par y. Cela vous permet, par
exemple, de voir si une lettre, un groupe de lettres ou un mot existe
dans une phrase.

variable="chaîne_de_caractères";
var="string_partiel";
x=variable.indexOf(var,y);

30
Partie 2
La Méthode IndexOf()

✓ Où y est la position à partir de laquelle la recherche (de gauche


vers la droite) doit commencer. Cela peut être tout entier compris
entre 0 et la longueur - 1 de la chaîne de caractères à analyser.
Si y n'est pas spécifié, la recherche commencera par défaut à la
position 0.

➔ Si le string partiel n'est pas trouvé dans la chaîne de caractères à


analyser, la valeur retournée sera égale à -1.

31
Partie 2
La Méthode IndexOf()

Exemple:
variable="Javascript"
var="script"
x=variable.indexOf(var,0);
➔ x vaut 4
variable="VanlanckerLuc&ccim.be"
var="@"
x=variable.indexOf(var);
➔ x vaut -1

32
Partie 2
La Méthode substring()

La méthode substring() sera particulièrement utile, par exemple, pour


prendre différentes données dans une longue chaîne de caractères.
variable = "chaîne de caractères"
resultat=variable.substring(x,y)
➔ Résultat est un sous ensemble de la chaîne de caractère (ou de la
variable).
Les x et y sont des entiers compris entre 0 et la longueur moins 1 de la chaîne
de caractères.

NB : Si x est égal à y, substring() retourne une chaîne vide.


33
Partie 2
La Méthode substring()
Javascript
||||||||||
0123456789
Exemple :
str="Javascript";
str1=str.substring(0,4);
str2="Javascript".substring(0,4);
str3=str.substring(6,9);
Les résultats sont :
str1="Java"; soit les positions 0,1,2 et 3.
str2="Java"; soit les positions 0,1,2 et 3.
str3="rip"; soit les positions 6,7 et 8
34
Exercice: calculatrice Partie 2

javascript
Dans cette réalisation, le calcul repose
sur la fonction eval() de javascript.
Attention, comme les fonctions
mathématiques de javascript
appartiennent à la classe Math, il faut,
par exemple, évaluer Math.sin(x) pour
obtenir sin(x).

35
Partie 2
Accès aux objets du
Formulaire
1

Window.document.forms[n].name_d’obje
2
3
1 2 t 3

• forms[n] (c’est le tableau des formulaires) peut être remplacé par le nom de la
balise form ou par getElementById(id de la balise form).

• Puisque Window occupe la première place dans l’hiérarchie, il devient facultatif.


36
Partie 2
Accès aux éléments de Type
Input
Les zones de texte:
La principale action en javascript sur une zone de texte est de manipuler son
contenu.
➢Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

37
Partie 2
Accès aux éléments de Type
Input
Les radio boutons:
Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked

38
Partie 2
L’accès aux éléments de
types Select

39
MERCI POUR VOTRE ATTENTION

40

Vous aimerez peut-être aussi