0% ont trouvé ce document utile (0 vote)
17 vues14 pages

JavaScript1

Transféré par

Yvann Assale
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)
17 vues14 pages

JavaScript1

Transféré par

Yvann Assale
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/ 14

Javascript

◼Qu’est-ce que c’est


• Extension du langage HTML incluse dans le code
• Langage de programmation apportant améliorations au
langage HTML en permettant l’exécution de commandes
• Utilisé en complément des pages HTML pour :
✓ Afficher les informations variables telles que date, heure, etc.
✓ Interagir avec les utilisateurs par le biais de boite de dialogue
✓ Créer des menus dynamiques
✓ Etc.

• Javascript est :

ASSALE Adjé Louis JavaScript 1


Javascript
◼Qu’est-ce que c’est
• C’est :
✓ Un langage orienté objet
✓ Destiné à créer de « petits programmes » appelés scripts
✓ Intégré aux pages HTML
✓ Directement exécuté par un programme navigateur
✓ Sans relation directe avec le langage Java
✓ Crée par NestScape et intégré à NetScape Navigator pour la 1ère
fois en 1996
✓ Standardisé par l’ECMA= organisme de standardisation suisse,
en 1997 ➔ Norme ECMAScript
ASSALE Adjé Louis JavaScript 2
Javascript
◼Qu’est-ce qu’un script
• Portion de code inséré dans une page HTML
✓ Balises annonçant code Javascript :
◼ <SCRIPT LANGUAGE=Javascript>
placer ici le code du script
</SCRIPT>
• 3 façons d’inclure du script dans une page HTML
✓ Grâce à la balise <SCRIPT> contenant le code, placée dans la
balise d’entête (<HEAD> </HEAD>)
✓ En mettant le code dans un fichier et en utilisant la balise
◼ <SCRIPT LANGUAGE=Javascript src=url/fichier.js> </SCRIPT>
✓ Grâce aux évènements dans une balise dont attribut est un nom
d’évènement : <balise nom_évène=code script à insérer>
ASSALE Adjé Louis JavaScript 3
Javascript
◼Éléments du langage
• Lecture et affichage de données
✓ Fonction alert() sert à afficher une valeur dans une boite de
message. Exemple : alert(Bonjour toto)
✓ Fonction prompt() sert à lire une valeur à travers une boite de
saisie. Exemple : prompt(Entrer une valeur)
• Les variables
✓ Elles n’ont pas besoin d’être déclarées. Mais la déclaration est
conseillée et s’effectue à l’aide du mot clé « var »
✓ 4 types de données :
◼ Nombres : entier ou à virgules flottantes. Exemples : var i; i=0;
var PI=3.1415; k=5;
ASSALE Adjé Louis JavaScript 4
Javascript
◼Éléments du langage
• Les variables
✓ 4 types de données :
◼ Booléens : false ou true. Exemple : reponse=false;
◼ Chaines de caractères : suite de caractères délimitée par des guillemets
simples ou doubles. Caractères spéciaux : \b, \n, \r, \t, …
Exemple : chaine=‘bonjour les amis’;
◼ Variable de type null : mot clé pour indiquer qu’il n’y a pas de données
✓ Opérations sur les variables
◼ Opérateurs arithmétiques : +, -, /, %
◼ Opérateurs de comparaison : ==, !=, >, >=, <, <=
◼ Opérateurs logiques : &&, ||, !

ASSALE Adjé Louis JavaScript 5


Javascript
◼Éléments du langage
• Les instructions
✓ 2 types de commentaires :
◼ Symbole // définit un commentaire sur une ligne
◼ Symboles /* et */ définissent un commentaire sur plusieurs lignes
✓ Affectation
◼ Symbole = pour l’affectation
◼ Symbole op= pour raccourci d’affectation op  {+, -, /, *, %, <<, …}
Exemple : i+=2;  i=i+2;
◼ Incrémentation/décrémentation : symboles ++/--
Exemple : i++;  i=i+1;

ASSALE Adjé Louis JavaScript 6


Javascript
◼Éléments du langage
• Les instructions
✓ Conditionnelles switch(expression)
{
if(expression) case val1 : instructions; break;
{instructions;} case val2 : instructions; break;
else …
{instructions;} case valn : instructions; break;
default : instructions;
}
✓ répétitions
while(expression) do for(expr1;expr2;expr3) for(variable in objet)
{ { { {
instructions; instructions; instructions; instructions;
} } while(expression); } }
ASSALE Adjé Louis JavaScript 7
Javascript
◼Éléments du langage
• 2 types de sous-programmes
✓ Les procédures qui ne retournent pas de valeurs
◼ Déclaration : function nom_procedure (para1, para2, …){
Instructions; }
✓ Les fonctions qui retournent une valeur, donc contiennent
l’instruction return(expression);
◼ Déclaration : function nom_fonction(para1, para2, …){
Instructions + au moins une instruction de la forme
return(expression);}
✓ Voir plus loin, chapitre « les fonctions »
✓ Il existe des fonctions prédéfinies:
◼ eval(chaine) – parseFloat(chaine) – parseInt(chaine) …
ASSALE Adjé Louis JavaScript 8
Javascript
◼Éléments du langage
• Les objets
✓ les chaines de caractères
◼ définissent un objet String implicitement.
◼ var machaine = new String('toto')  var machaine = 'toto'
◼ L’objet String dispose de propriétés et méthodes: la propriété length
donne le nombre de caractères n = machaine.length;
quelques méthodes : charAt(position) – indexOf(sous-chaine, position)
✓ Les tableaux
◼ Déclaration s’effectue à l’aide de la fonction Array()
var montableau = new Array(); // tableau dont la taille n’est pas définie
var tab = new Array(10); // tableau de 10 éléments
var letableau = new Array(val1, val2, … valn);
◼ Les indices commencent à 0, les vali peuvent être de types différents
◼ La taille du tableau est dynamique, propriété length retourne la taille
Javascript
◼Éléments du langage
• Les objets
✓ Les tableaux
◼ Tableau associatif dont l’index n’est pas un entier mais chaine de
caractères : var Tab = new Array();
Tab['num']=1; // le 1er index est la chaine num
Tab['nom'] = "Assalé"; // le 2nd index est la chaine nom
Tab['prénom'] = "Louis"; //le 3ème index est la chaine prénom
◼ Un tableau est un objet prédéfini possédant des propriétés et des
méthodes. Ainsi, un tableau associatif est considéré comme un objet
avec des propriétés : Tab['nom’]  Tab.nom
◼ De même un objet est considéré comme un tableau associatif, on peut
parcourir les propriétés d’un objet window par :
for(lapropriété in window)
ASSALE Adjé Louis JavaScript 10
Javascript
◼Éléments du langage
• Les objets
✓ La classe Date()
◼ Le constructeur sans paramètre crée un objet référençant la date actuelle
var aujourd’hui = new Date();
◼ On peut créer des variables en spécifiant des dates
var ladate = new Date(année, mois, jour);
var ladate = new Date(année, mois, jour, heure, minute, seconde);
mois entier compris entre 0 et 1
◼ Quelques méthodes : getDate() – getDay() – getMonth(), …
✓ La classe Image()
◼ Déclaration : var mon_image = new Image();
◼ Dispose de 4 propriétés : src (url image) – height (haute image) – width
(largeur image) – complete (retourne true quand image chargée)
ASSALE Adjé Louis JavaScript 11
Javascript
◼Éléments du langage
• Les objets
✓ La classe statique Math()
◼ Possède des propriétés qui sont des constantes et des méthodes qui sont
les principales fonctions mathématiques
◼ Quelques propriétés : E – PI – LN10 – LN2
◼ Quelques méthodes : ab(nombre) – acos(nombre) – pow(base,
exposant) …
✓ Les objets prédéfinis du navigateur
◼ Le navigateur dispose d’un ensemble d’objets hiérarchisés, on a au:
◼ Niveau 1 on a : navigator – window
◼ Niveau 2 : document – history – frames – parent – location
◼ Niveau 3 tous les autres objets : images – forms – links – anchors …
ASSALE Adjé Louis JavaScript 12
Javascript
◼Éléments du langage
• Les évènements
✓ Action de l’utilisateur donnant lieu à une interactivité
✓ 2 façons d’associer une action à un couple(objet, évènement)
◼ Utilisation d’attributs de balises spécifiques associés aux évènements :
<a href="index.html" onMouseOver="alert('bonjour') ;">cliquez ici
</a>
◼ Indication pour un élément et un évènement donnés la fonction qui
devrait être exécutée :
<body><a id="Lien1" href="index.html">cliquez ici</a></body>
<script language="Javascript">
function bonjour() {alert('bonjour');};
document.links[0].onMouseOver=bonjour;
</script>
ASSALE Adjé Louis JavaScript 13
Javascript
◼Travaux pratiques Nº1
• Exercices 1 à 9 du poly JScript

ASSALE Adjé Louis JavaScript 14

Vous aimerez peut-être aussi