Scribd
Importer
120 vues34 pages

Cours 3

Le document décrit JavaScript, y compris sa syntaxe, ses structures de contrôle, ses objets et événements. Il explique comment utiliser JavaScript pour modifier le contenu HTML et interagir avec les utilisateurs.

Transféré par

Djamel Jamel
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
120 vues34 pages

Cours 3

Le document décrit JavaScript, y compris sa syntaxe, ses structures de contrôle, ses objets et événements. Il explique comment utiliser JavaScript pour modifier le contenu HTML et interagir avec les utilisateurs.

Transféré par

Djamel Jamel
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/ 34

JavaScript

Intérêt
Exemple
• <html>
• <head>
• <title>Page statique</title>
• </head>
• <body>
• <div>
• Nous sommes le 06/03/2019
• </div>
• </body>
• </html>
Intérêt
Exemple

• <html>
• <head>
• <title>Page dynamique</title>
• </head>
• <body>
• <script type = "text/javascript">
• date = new Date();
• document.writeln("Nous sommes le ", date);
• </script>
• </body>
• </html>
Script
• Portion de code qui vient s'insérer dans une page HTML
• Le code du script n'est toutefois pas visible dans la fenêtre du
• navigateur car il est compris entre des balises spécifiques qui
signalent
• au navigateur qu'il s'agit d'un script écrit en langage JavaScript
• Interprète du côte client
*interne
• <script type = "text/javascript">
• code javascript
• </script>

*externe
• <script type = "text/javaScript" src = "url/script.js">
• </script>
• les éléments situes dans l'en-tete se comportent comme des
• déclarations, ils ne s'exécutent pas directement
• les éléments situes dans le corps s'exécutent au fur et a
mesure du chargement de la page
Javascript n'est pas Java
• Java a été développe par Sun
• JavaScript a été développe par Netscape en 1995 sous le nom de
• Live Script
• Microsoft développe le langage Script en 1995
• ) norme des langages de script par l'ECMA (European Computer
• Manufactures Association)
• base sur les objets pas de classe
• Java est compile (applets), JavaScript est interprète (scripts)
• ne peut pas lire/écrire dans les fichiers
• ne peut pas exécuter d'autres programmes
• Utilisation de la balise <script>...</script> :
• I déclaration de fonctions dans l'en-tête HTML/XHTML (entre <head>
• et </head>)
• I appel d'une fonction ou exécution d'une commande JavaScript dans
• <body>...</body>
• I insertion d'un fichier externe (usuellement '.js')
• Utilisation dans une URL, en précisant que le protocole utilise
est du JavaScript ex :
• <a href="javascript:instructionJavaScript;">Texte</a>
• Utilisation des attributs de balise pour la gestion évènementielle
:
• <balise onEvenement="instructionJavaScript">...</balise>
<html>
<head>
<title>Exemple de page HTML contenant du JavaScript</title>
<script type="text/javascript">
<!--
function texte() { document.write("Texte genere."); }
// -->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Vous pouvez mettre du code javascript dans le corps du document.");
// -->
</script>
<p>
Ou bien dans une fonction appelee en cliquant
<a href="Javascript:texte()">ici</a>,
<p>
ou en passant la souris au-dessus de
<a href="" onMouseOver="texte()">cela</a>...
</body>
</html>
4 types de base
• entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)
• flottant : 0.123, -0.4e5, .67E-89
• booleen : true, false
• Chaîne de caractères : "chaine" ou 'chaine'
Typage et Variable
Pas de déclaration des variables
nbr = 10;
fl = 3.141;
str1 = "L‘étoile";
str2 = 'brille';
lien = '<a href="index.htm">Home</a>';

Portée des variables


locale (uniquement dans le script ou la fonction)
var vloc = 0 ;
globale (en tout point du document)
vglob = 0 ;
Operateurs
• affectation
• +=, -=, *=, /=, %=, &=, |=, <<=, >>=
• comparaison
• ==, !=, <, <=, >, >=
• arithmétique
• %, ++, --
• logique
• &&, ||, !
Structures de contrôle
• if else,
• switch case,
• for, while,
• break,
• do while
Fonctions
*Denition
• function nomfonction(param1, ..., paramN) {
• // code JavaScript
• return expression ;
•}

*Appel
• nomVariable = nomfonction(exp1, ..., expN);
• passage des paramètres par valeur
Exemple
• function somme() {
• var argv = somme.arguments;
• var argc = somme.arguments.length;
• var result = 0;
• for (var i = 0 ; i < argc ; i++) {
• result += argv[i];
• }
• return result;
• }
• somme(1,2,3) retourne 6 et somme(2) retourne 2
Lire/Ecrire
*prompt()
• Ouvre une boîte de dialogue avec une zone saisie et 2 boutons OK et
Annuler, retourne l'information lue

*confirm()
• Ouvre une boîte de dialogue avec 2 boutons OK et Annuler, retourne un
Booleen

*alert()
• Permet d‘écrire un message dans une fenêtre
• Thierry
Exemple
• <html>
• <head>
• <title>Utilisation de prompt() et d'alert()</title>
• </head>
• <body>
• <script type = "tet/javascript">
• annee = prompt('En quelle année sommes-nous ? ', 2019);
• alert('Vous avez répondue : ' + annee);
• </script>
• </body>
• </html>
Ecrire, afficher des informations dans la
fenêtre HTML
• <html>
• <head>
• <title>Utilisation de document.write</title>
• </head>
• <body>
• <script type = "text/javascript">
• document.write('Hello word <br/>');

• </script>
• </body>
• </html>
Ouverture d'une fenêtre
• open(url, name, options)
• Permet d'ouvrir une fenêtre et d‘écrire dedans

<script type = "text/javascript">


fenetre = open('', '', 'height=50, width=300, status=yes');
fenetre.document.write('<html>');
fenetre.document.write('<head>');
fenetre.document.write('<title>' + 'Titre fenetre' + '</title>');
fenetre.document.write('</head>');
fenetre.document.write('<body>');
fenetre.document.write('Texte dans la fenetre');
fenetre.document.write('</body>');
fenetre.document.write('</html>');
</script>
Ouverture d'une fenêtre
• Les options
• directories : barre de liens
• menubar : barre de menu
• status : barre de statut
• location : barre d'adresse
• scrollbars : ascenseurs
• resizable : redimensionnement par l'utilisateur
• height : hauteur
• width : largeur
• left : position gauche
• top : position haute
• fullscreen : plein ecran
Les objets prédéfinis
Les évènements
• onclick : un clic du bouton gauche de la souris sur une cible
• onMouseOver : passage du pointeur de la souris sur une cible
• onblur : une perte de focus d'une cible
• onfocus : une activation d'une cible
• onselect : une sélection d'une cible
• onchange : une modification du contenue d'une cible
• onsubmit : une soumission d'un formulaire
• onload : un chargement d'une page
• onunload : la fermeture d'une fenêtre ou le chargement d'une page
autre que la courante
• Thierry
• Exemple
• <a href="" onclick="alert('Bonjour')">Cliquez</a>
L'objet Date
• var maDate = new Date()
• getYear() : 2 chiffres
• getFullYear() : 4 chiffres
• getMonth() : 0 { 11
• getDate() : 1 { 31
• getDay() : 0 { 6 (dimanche { samedi)
• getHours() : 0 { 23
• getMinutes : 0 { 59
• getSeconds() : 0 { 59
L'objet form
Attributs
• name : nom
• action : fichier
• method : get ou post
• enctype : encodage
• target : cadre cible (_blank pour une nouvelle page)

Methodes
• submit() : soumission
• reset() : remise a zero

Evenements
• onSubmit() : lors de la soumission
• onReset() : lors de la remise a zero
Les éléments de formulaires
• input text
• <input type="text" id="motclef" value="Mot clef">
document.forms["monFormulaire"].elements["motcle"]

Les propriétés :
• value : valeur
• defaultValue : valeur par defaut
• form : objet formulaire
• maxLength : longueur maximale

Les méthodes :
• blur() : perte de focus
• focus() : prise de focus
• select() : donne le focus et selcetionne la zone de saisie

Les évènements :
• onBlur : lors de la perte de focus
• onChange : lors d'un changement
• onFocus : lors de la prise de focus
• Thierry Lecroq (Univ. Rouen) Javascript
Les éléments de formulaires
• input button

Les propriétés :
• value : libelle

Les méthodes :
• click() : clic

Les évènements :
• onClick : lors d'un clic
• Thierry
Les éléments de formulaires
• select
Les propriétés :
• size : nombre de lignes
• options : tableau
• I value : valeur
• Itext : libelle
• I defaultSelected : true of false
• I selected : true of false
• selectedIndex : indice de la ligne selectionnee
Exemple
• <script type="text/javascript">
• <!--
• function basculer(orig, dest) {
• if (orig.options.selectedIndex >= 0) {
• var o = new Option(orig.options[orig.selectedIndex].text,
• orig.options[orig.selectedIndex].value);
• dest.options[dest.options.length]=o;
• orig.options[orig.selectedIndex]=null;
• }
• else {
• alert("Aucune ligne sélectionnée");
• }
• }
• <FORM name="form" >
• <SELECT NAME="liste">
• <OPTION>Chemises function affi()
• <OPTION>Polos
{
• <OPTION>T-shirts
• </SELECT>
i = document.form.liste.selectedIndex;
• <SELECT NAME="taille"> j= document.form.taille.selectedIndex
• <OPTION>T. Small document.form.txt.value=nom[i][j];
• <OPTION>T. Médium
}
• <OPTION>T. Large
• </SELECT>
• <INPUT TYPE="button" VALUE="Donner le prix" onClick="affi(this.form)">
• <INPUT TYPE="TEXT" NAME="txt">
• </FORM>
Body :
<body>
<form id="myForm">
<span class="form_col">Sexe :</span>
<label><input name="sex" type="radio" value="H"
/>Homme</label>
<label><input name="sex" type="radio" value="F"
/>Femme</label>
<span class="tooltip">Vous devez sélectionnez votre
sexe</span><br /><br />
<label class="form_col" for="lastName">Nom :</label>
<input name="lastName" id="lastName" type="text" />
<span class="tooltip">Un nom ne peut pas faire moins de
2 caractères</span><br /><br />
<label class="form_col" for="firstName">Prénom
:</label>
<input name="firstName" id="firstName" type="text" />
<span class="tooltip">Un prénom ne peut pas faire moins
de 2 caractères</span><br /><br />
<label class="form_col" for="age">‫آ‬ge :</label>
<input name="age" id="age" type="text" />
<span class="tooltip">L'âge doit être compris entre 5
et 140</span><br /><br />
<label class="form_col" for="login">Pseudo :</label>
<input name="login" id="login" type="text" />
<span class="tooltip">Le pseudo ne peut pas faire moins
<label class="form_col" for="pwd1">Mot de passe
:</label>
<input name="pwd1" id="pwd1" type="password" />
<span class="tooltip">Le mot de passe ne doit pas faire
moins de 6 caractères</span><br /><br />
<label class="form_col" for="pwd2">Mot de passe
(confirmation) :</label>
<input name="pwd2" id="pwd2" type="password" />
<span class="tooltip">Le mot de passe de confirmation
doit être identique à celui d'origine</span><br /><br />
<label class="form_col" for="country">Pays :</label>
<select name="country" id="country">
<option value="none">Sélectionnez votre pays de
résidence</option>
<option value="en">Angleterre</option>
<option value="us">‫ة‬tats-Unis</option>
<option value="fr">France</option></select>
<span class="tooltip">Vous devez sélectionner votre
pays de résidence</span><br /><br />
<span class="form_col"></span>
<label><input name="news" type="checkbox" /> Je désire
recevoir la newsletter chaque mois.</label><br /><br />
<span class="form_col"></span>
<input type="submit" value="M'inscrire" /> <input
type="reset" value="Réinitialiser le formulaire" />
</form>
Script :
<script>
(function() { // On utilise une IEF pour ne pas polluer
l'espace global
// Fonction de désactivation de l'aff des « tooltips »
function deactivateTooltips() {
var spans = document.getElementsByTagName('span'),
spansLength = spans.length;
for (var i = 0 ; i < spansLength ; i++) {
if (spans[i].className == 'tooltip') {
spans[i].style.display = 'none';
} } }
// La fonction ci-dessous permet de récupérer la
« tooltip » qui correspond à notre input
function getTooltip(element) {
while (element = element.nextSibling) {
if (element.className === 'tooltip') {
return element;
} } return false; }
// Fonctions de vérification du formulaire, elles
renvoient « true » si tout est OK
var check = {}; // On met toutes nos fonctions dans un
objet littéral
check['sex'] = function() {
var sex = document.getElementsByName('sex'),
tooltipStyle = getTooltip(sex[1].parentNode).style;
if (sex[0].checked || sex[1].checked) {
tooltipStyle.display = 'none';
return true;
} else {
tooltipStyle.display = 'inline-block';
return false; } };
check['lastName'] = function(id) {
var name = document.getElementById(id),
tooltipStyle = getTooltip(name).style;
if (name.value.length >= 2) {
name.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
name.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false; } };

Vous aimerez peut-être aussi