docJavascript
download 
Plainte Transcription
Javascript
JAVASCRIPT
Voir le chapitre 1 : introduction au langage HTML
SOMMAIRE :
I.
II.
III.
IV.
Introduction au langage Java
Déclaration et affectation des variables
Les opérateurs
Les structures de contrôle
I- Introduction au langage script
Le javascript est le langage de programmation de Netscape. Il sert à dynamiser les pages web,
il est possible d'ajouter des scripts (animation, ...) qui sont directement intégrés dans les pages
HTML. Ces codes sont directement interprétés par le navigateur au moment de l'éxécution.
Ces applications sont toutefois limitées.
<HTML>
<HEAD><TITLE> mon 1er script </TITLE>
<SCRIPT LANGUAGE="javascript">
function action( )
{
alert ("bienvenue")
}
</SCRIPT> </HEAD>
<BODY ONLOAD="action ( ) ;">
<a href="http:// ..."> allez sur le site WBC </a>
</BODY></HTML>
Bases du langage Java :
<script language="javascript"> - on peut rajouter éventuellement la version
instructions ;
</script>
exemple : <script language="javascript 1.2" SRC="emplacement du fichier script">
document.write ("support de la version 1.2 de
java") ;
</script>
Script :
•
•
soit placé directement sur la page web (idéalement dans <head>)
soit placé dans un fichier externe à la page (idéal si le script est utilisé sur plusieurs
pages, utilisation de l'extension .js )
A l'intérieur des balises, on n'utilise que du code java, pas de code HTML !!!
Commentaires : si le commentaire tient sur une ligne, on le fait précéder de 2 //, s'il tient sur
plusieurs lignes : /* ... ... ...*/
II - Les variables :
Variables : élément à qui on attribut une valeur, qui pourra ensuite être utilisée ou modifiée
lors de l'éxécution du programme. Doit commencer par une lettre ou un _ (underscore) et ne
doit pas contenir d'espaces ni de &.
Déclaration et affectation : var NomVariable= valeur ; - exemple : var age = 35 ;
Les quatres types de variables :
Nombres
Les chaines de caractères
entouré par ' ' ou " "
Booléen
2 valeurs possibles : true ou false
Null (constante)
\n : passage à la ligne
\t : tabulation
\\ : interprétation du caractère \ comme caractère
exemples :
var message = 'C\'est moi ;
var taux = 19/100
Portée d'une variable : selon comment on la déclare, une variable peut être locale ou glogale.
locale : n'existe que dans la fonction dans laquelle elle a été déclarée
globale : disponible pour l'intégralité du script
III - Les opérateurs
Opérateurs : manipuler des variables pour des opérations et des comparaisons
1. de calcul
+ - / * % (reste de la division)
var nb=25 ;
resultat = nb * 2 ;
2. d'affectation =
synthaxe : variable=expression ; peut être une autre variable, une valeur, une
expression quelconque
3. d'assimilation : += -= *= /=
si nb a pour valeur 10 : nb * = 2 ; -------------> (nb = nb * 2)
4. d'incrémentation ++
de décrémentation -Exemple : nb ++ : expression calculée avec le contenu de la variable avant
l'incrémentation
nb -- : c'est l'inverse !
<HTML><HEAD>
Affiche :
<script language="javascript">
var nb= 5 ;
5
document.write (nb ++ "<br>" + ++
7
nb) ;
</script></head>
<BODY></BODY></HTML>
5. comparaison
==
<=
!=
>
>=
<
6. logiques
|| (alt gr + ou
6)
}
et
&&
! non
opérations
binaires
opération
unaire
7. Concaténation : + : assembler chaine de caractères entre elles
IV - Les structures de contrôle :
Structures de controle : ---> instructions conditionelles
permet d'éxécuter une
instruction si et seulement
si l'instruction est réalisée.
(ex : mot de passe valide)
instructions
répétitives :
•
•
•
•
{
if ... else ...
opérateurs ternaires
switch
synthaxe :
if
(condition)
{
instruction
1;
}
else
{
instruction
2;
}
<script language="javascript">
var motdepasse='mdp'
var motuser = prompt("entrer votre mot de passe") ;
if (motuser = = mot de passe)
{
alert ("vous pouvez entrer") ;
}
else
{ alert ("pas possible" ; }
</script>
condition ? instr 1
switch (variable)
: instr 2 ;
{
var nb1 = 8 ;
case cas1 :
var nb 2 =
{ instruction 1 ;
(nb1>10)
break ; }
? nb1 : nb1 * 2
document.write
case cas2 :
(nb2) ;
{ instruction 2 ;
break ; }
for
for in
while
do while
default : {instruction ; }
}
FOR - synthaxe :
for (initialisation ; condition d'arrêt ; mode d'évolution ;)
{ instruction ; }
for (var i=0 ; i<5 ; i++)
{ document : write("boucle num" +i+ "<br>") ; } -------> 5 passages (boucle num 0 à
num 4)
while (condition)
{ instruction ; }
do
{ instruction ; } while
(condition) ;
var i=0 ;
write (i<5)
{document.write : (1 +
"<br>")
i+1;}
Fonction : sous programme qui permet d'effectuer un ensemble d'instructions par simple
appel de la fonction dans le corps du programme principal.
function NomFonction ([arguments])
{ instructions ; }
Termine son exécution soit lorsque toutes les instructions sont terminées, ou soit lorsqu'il y a
une instruction return ; : permet de renvoyer une valeur de retour.
<script ... >
function addition (nb1 + nb2 + nb3)
{return (nb1 + nb2 + nb3) ; }
document.write (addition (4, 5, 6)) ;
</script>
Ecrire le code java pour la table de multiplication par 9 dans un tableau
CODE :
<script language="javascript">
function nul (nb)
{ return (nb + 0) ; }
document.write ('<table border=1>')
for (1=0 , 1<11 , i++)
{
document.write('<tr><td>'+i+'</td><td>'+nul(i)+'</td></tr>')
}
document.write('</table>')
</script>
V - Les évênements:
Les objets :
différents types :
•
•
•
•
•
clic de la souris
passage de la souris
appui sur une touche
chargement de la page
fermeture de la page
Pour associer des évênements aux actions, on utilise des gestionnaires d'évênements.
synthaxe : onEvenement="fonction();"
Exemple : OnClick="alert("message");
Quelques gestionnaires d'évênements :
onLOad : quand la page se charge
onUnload : quand la page se ferme
Exemple :
<html><head><title></title><script language="javascript">
function bienvenue()
{
alert("bienvenue sur mon site");
}
function aurevoir()
{
alert("Au revoir et à bientôt");
}
</head>
<body onLoad="bonjour');" onUnload="aurevoir();">
</body>
</html>
Les objets : Hiérarchie
DOCUMENT
WIN
DOW
S
ANCHORS
NAVI
GAT
OR
DOC
UME
NT
HIST
ORY
Autres objets :
date
array
string
number
RegExp
un objet a :
FORMS – ELEMENTS
(boutons, cases à cocher, …)
IMAGES
LINKS
•
•
des méthodes ( ex : window.alert(" ....... ") )
des propriétés ( ex : document.bgcolor )
Ecrire un script qui découpe une phrase en plusieurs fragments :
document.write(.....)
tableau qui va afficher les mots (1 par ligne)
Nombre d'éléments du tableau (NomduTableau,lenght)
Méthode split (séparateur) : de l'objet string
<html>
<head><title></title>
function affichermots(chaine)
{
var tableau=chaine.split("");
for (i=0; i<tableau.lenght; i++)
{
document.write(tableau[i]+"<br>");
}
}
</script></head>
<body><script language="javascript">
chaine="bonjour";
affichermots(chaine);
</script>
</body></html>
Création d'une "combo box" :
<html>
<head><title></title>
<script language="javascript">
function aller()
{
location.href=combo.librairie.options[combo.librairie.selected index].value ;
}
</head>
<body>
<form name="combo">
<select name="librairie">
<option value="http://www. ...... .com"> NOM </option>
</select>
<input type="button" value="aller sur la page" onCick="aller();">
</form>
</body></html>
