Open Source Software Ensi Club
Formation JavaScript
Akram Rekik
akram1rekik@gmail.com
October 28, 2014
1
Plan
Généralités sur Javascript
Bases de JavaScript
Les Evènements
Les Tableaux
Les Objets Prédéfinis
Akram Rekik | Js
2
Généralités sur Javascript
Introduction
Le Javascript est un langage de programmation de scripts
orienté objet.
Le Javas...
3
Généralités sur Javascript
Intérêt
Page Statique
1 <html >
2 <head >
3 <title > Page statique </title >
4 </head >
5 <bo...
4
Généralités sur Javascript
Intérêt
Page Dynamique
1 <html >
2 <head >
3 <title > Page dynamique </title >
4 </head >
5 <...
5
Bases de JavaScript
Typage et Variables
4 types de base
entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)
flottant ...
6
Bases de JavaScript
Opérateurs
affectation
+=, -=, *=, /=, %=, &=, |=
comparaison
==, !=, <, <=, >, >=
arithmétique
%, +...
7
Bases de JavaScript
Structures de contrôle
!!! Même Syntaxe que le C !!!
Structures de contrôle
if else, switch case, fo...
8
Bases de JavaScript
Lire/Ecrire
prompt()
Ouvre une boite de dialogue avec une zone saisie et 2 boutons
OK et Annuler, re...
9
Bases de JavaScript
Exemple
Exemple
1 < script >
2 var nicks = ’ ’ , nick ,
3 proceed = true ;
4 while ( proceed ) {
5 n...
10
Les Evènements
onclick : un clic du bouton gauche de la souris sur une cible
onMouseOver : passage du pointeur de la so...
11
Les Evènements
Exemple
Exemple
1 <a href = " http :// www . ossec . tn "
2 onclick = " alert ( ’Bonjour ’) " > Cliquez ...
12
Les Tableaux
Tableaux Classiques
var T = new Array()
Tableau classique
var jours = new Array();
var jours = new Array("...
13
Les Tableaux
Tableaux Associatifs
Tableau associatif
var tableau = new Array();
tableau["un"] = "La première chaine";
t...
14
Les Tableux
Les Méthodes de l’objet Array
var tableau3=tableau1.concat(tableau2);
var chaine=tableau.join(séparateur);
...
15
Les Tableaux
Exemple 1
Exemple 1
1 var table = new Array("Pierre","Paul","Jacques");
2 table [3] = "Toto";
3 table.sort...
16
Les Tableaux
Exemple 2
Exemple 2
1 var table = new Array("Pierre","Paul","Jacques");
2 table [3] = "Toto";
3 table.reve...
17
Les Objets Prédéfinis
L’objet Date
L’Objet Date
getYear() : 2 chiffres
getFullYear() : 4 chiffres
getMonth() : 0 – 11
ge...
18
Les Objets Prédéfinis
L’Objet Math
L’Objet Math
Propriétés
Propriétés: Math.PI et Math.E
Méthodes
atan(), acos(), asin()...
19
Les Objets Prédéfinis
L’Objet Document
Objet Document
Attributs
title : titre
Méthodes
write() : écrire
getElementById("...
20
Les Objets Prédéfinis
L’Objet Form
Objet Form
Attributs
name : nom
action : fichier
method : get ou post
enctype : encoda...
21
Les Elèments d’un Formulaire
Input Text
<input type="text" id="motclef" value="Mot clef">
Les propriétés :
value : vale...
22
Les Elèments d’un Formulaire
input button
input button
Les propriétés :
value : libellé
Les méthodes :
click() : clic
L...
23
Les Elèments d’un Formulaire
select
select
Les propriétés :
size : nombre de lignes
options : tableau
value : valeur
te...
24
Les Elèments d’un Formulaire
Exemple
Exemple
1 // mettre cette fonction dans le script.js
2 function Selection(liste)
3...
25
Les Elèments d’un Formulaire
Exemple
Exemple
1 <img src="ossec.png" alt="" id="uneImage" />
2 document.getElementById("...
Merci !
Prochain SlideShare
Chargement dans…5
×

Foramtion Js

454 vues

Publié le

Formation JavaScript

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
454
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Foramtion Js

  1. 1. Open Source Software Ensi Club Formation JavaScript Akram Rekik akram1rekik@gmail.com October 28, 2014
  2. 2. 1 Plan Généralités sur Javascript Bases de JavaScript Les Evènements Les Tableaux Les Objets Prédéfinis Akram Rekik | Js
  3. 3. 2 Généralités sur Javascript Introduction Le Javascript est un langage de programmation de scripts orienté objet. Le Javascript s’inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l’utilisateur, des animations,comme par exemple : Afficher/masquer du texte Faire défiler des images Créer un diaporama avec un aperçu « en grand » des image Créer des infobulles Le Javascript est un langage dit client-side, c’est-à-dire que les scripts sont exécutés par le navigateur chez le client. Akram Rekik | Js
  4. 4. 3 Généralités sur Javascript Intérêt Page Statique 1 <html > 2 <head > 3 <title > Page statique </title > 4 </head > 5 <body > 6 <div > 7 Nous sommes le 28/10/2014 8 </div > 9 </body > 10 </html > Akram Rekik | Js
  5. 5. 4 Généralités sur Javascript Intérêt Page Dynamique 1 <html > 2 <head > 3 <title > Page dynamique </title > 4 </head > 5 <body > 6 <script type = "text/javascript"> 7 8 date = new Date (); 9 document.writeln(" Nous sommes le ",date ); 10 11 </script > 12 </body > 13 </html > Akram Rekik | Js
  6. 6. 5 Bases de JavaScript Typage et Variables 4 types de base entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16) flottant : 0.123, -0.4e5, .67E-89 booléen : true, false chaine de caractères : "chaine" ou ’chaine’ Pas de déclaration des variables nbr = 10; fl = 3.141; str1 = "L’étoile"; str2 = ’brille’; lien = ’<a href="index.htm">Home</a>’; Akram Rekik | Js
  7. 7. 6 Bases de JavaScript Opérateurs affectation +=, -=, *=, /=, %=, &=, |= comparaison ==, !=, <, <=, >, >= arithmétique %, ++, - - logique &&, ||, ! Akram Rekik | Js
  8. 8. 7 Bases de JavaScript Structures de contrôle !!! Même Syntaxe que le C !!! Structures de contrôle if else, switch case, for, while, break, continue, do while Akram Rekik | Js
  9. 9. 8 Bases de JavaScript Lire/Ecrire prompt() Ouvre une boite de dialogue avec une zone saisie et 2 boutons OK et Annuler, retourne l’information lue confirm() Ouvre une boite de dialogue avec 2 boutons OK et Annuler, retourne un booléen alert() Permet d’écrire un message dans une fenêtre Akram Rekik | Js
  10. 10. 9 Bases de JavaScript Exemple Exemple 1 < script > 2 var nicks = ’ ’ , nick , 3 proceed = true ; 4 while ( proceed ) { 5 nick = prompt ( ’Entrez un prenom : ’ ); 6 if ( nick ) { 7 nicks += nick + ’ ’; 8 } 9 else { 10 proceed = false ; 11 } 12 } 13 alert ( nicks ); 14 </ script > Akram Rekik | Js
  11. 11. 10 Les Evè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 selection 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 fenetre ou le chargement d’une page autre que la courante Akram Rekik | Js
  12. 12. 11 Les Evènements Exemple Exemple 1 <a href = " http :// www . ossec . tn " 2 onclick = " alert ( ’Bonjour ’) " > Cliquez </ a > Akram Rekik | Js
  13. 13. 12 Les Tableaux Tableaux Classiques var T = new Array() Tableau classique var jours = new Array(); var jours = new Array("Lundi", "Mardi", "Mercredi, "Jeudi", "Vendredi", "Samedi", "Dimanche"); jours[0] jours.length Akram Rekik | Js
  14. 14. 13 Les Tableaux Tableaux Associatifs Tableau associatif var tableau = new Array(); tableau["un"] = "La première chaine"; tableau["deux"] = "La deuxième chaine"; tableau["tnt"] = "pleib d’autres chaines"; tableau.length Akram Rekik | Js
  15. 15. 14 Les Tableux Les Méthodes de l’objet Array var tableau3=tableau1.concat(tableau2); var chaine=tableau.join(séparateur); tableau.pop(); tableau.reverse(); tableau.sort(); Le tri est irréversible ! Une fois trié, il est impossible de récupérer votre tableau dans l’ordre initial. Akram Rekik | Js
  16. 16. 15 Les Tableaux Exemple 1 Exemple 1 1 var table = new Array("Pierre","Paul","Jacques"); 2 table [3] = "Toto"; 3 table.sort (); 4 5 function lire1(tab) 6 { 7 var chaine = "Le tableau contient :" 8 for(var i=0; i<tab.length; i++) 9 chaine += "n" + i + " -> " + tab[i]; 10 11 alert(chaine ); 12 } 13 14 lire1(table ); Akram Rekik | Js
  17. 17. 16 Les Tableaux Exemple 2 Exemple 2 1 var table = new Array("Pierre","Paul","Jacques"); 2 table [3] = "Toto"; 3 table.reverse (); 4 5 function lire2(tab) 6 { 7 var chaine = "Le tableau contient :"; 8 for(var indice in tab) 9 chaine +="n" +indice+ " -> " +tab[indice ]; 10 11 alert(chaine ); 12 } 13 14 lire2(table ); Akram Rekik | Js
  18. 18. 17 Les Objets Prédéfinis L’objet Date L’Objet 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 Akram Rekik | Js
  19. 19. 18 Les Objets Prédéfinis L’Objet Math L’Objet Math Propriétés Propriétés: Math.PI et Math.E Méthodes atan(), acos(), asin(),tan(), cos(), sin(), abs(), exp(), log(), max(), min(), pow(), round(), sqrt(), floor(), random() Akram Rekik | Js
  20. 20. 19 Les Objets Prédéfinis L’Objet Document Objet Document Attributs title : titre Méthodes write() : écrire getElementById("id") getElementsByTagName("balise") Evénements onClick et onDblClick : lors d’un clic / double clic sur l’élément en question onMouseMove : lors d’un déplacement de la souris au-dessus de cet élément Akram Rekik | Js
  21. 21. 20 Les Objets Prédéfinis L’Objet Form Objet Form Attributs name : nom action : fichier method : get ou post enctype : encodage Méthodes submit() : soumission reset() : remise à zèro Evénements onSubmit() : lors de la soumission onReset() : lors de la remise à zèro Akram Rekik | Js
  22. 22. 21 Les Elèments d’un Formulaire Input Text <input type="text" id="motclef" value="Mot clef"> Les propriétés : value : valeur defaultValue : valeur par défault form : objet formulaire maxLength : longueur maximale Les méthodes : blur() : perte de focus focus() : prise de focus select() : donne le focus et sélectionne 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 Akram Rekik | Js
  23. 23. 22 Les Elèments d’un Formulaire input button input button Les propriétés : value : libellé Les méthodes : click() : clic Les événements : onClick : lors d’un clic Akram Rekik | Js
  24. 24. 23 Les Elèments d’un Formulaire select select Les propriétés : size : nombre de lignes options : tableau value : valeur text : libellé defaultSelected : true of false selected : true of false selectedIndex : indice de la ligne sélectionnée Akram Rekik | Js
  25. 25. 24 Les Elèments d’un Formulaire Exemple Exemple 1 // mettre cette fonction dans le script.js 2 function Selection(liste) 3 { 4 var numero = liste.selectedIndex; 5 var valeur = liste.options[numero ]. value; 6 alert("Vous avez choisi : " + valeur ); 7 } 8 //ce code dans la page html 9 Vous etes : 10 <select name="genre" onchange="Selection(this)"> 11 <option value="rien">Choisissez ...</ option > 12 <option value="garcon">Un garçon </option > 13 <option value="fille">Une fille </option > 14 <option value="saispas">Je ne sais pas </option > 15 </select > Akram Rekik | Js
  26. 26. 25 Les Elèments d’un Formulaire Exemple Exemple 1 <img src="ossec.png" alt="" id="uneImage" /> 2 document.getElementById("uneImage"). onclick = 3 function () 4 { 5 alert("Oui ?"); 6 } Akram Rekik | Js
  27. 27. Merci !

×