Akambi Fagbohoun http://twitter.com/afagbohoun
• Le JavaScript, langage dit client-side
Qu'est-ce que le JavaScript ?
• Langage interpreté et orienté objet
• Le JavaScript, pas que le Web
Qu'est-ce que le JavaScript ?
• Dynamiser une page HTML
- Interactions avec l’internaute
- Animations
- Aide à la navigation)
Apports du JavaScript
Petit historique du langage
• Développé par Brendan Eich (1995)
• standardisé par l'ECMA International sous le
nom d’ECMAS...
LES BASES DE JAVASCRIPT
Le javascript dans une page HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script type="te...
Afficher une boîte de dialogue
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
La syntaxe du JavaScript
Les instructions
Ou
instruction_1;
instruction_2;
instruction_3;
Instruction_1;Instruction_2
Inst...
Les variables
// Déclaration de variables
var myVariable;
// Affectation de valeur
myVariable = 2;
// Chaine de caractère
...
Type des variables
var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
var c...
Les opérateurs arithmétiques
Opérateur Signe
addition +
soustraction -
multiplication *
division /
modulo %
var result = 3...
Concacténation
var hi = 'Bonjour', name = 'toi', result;
result = hi + name;
alert(result); // Affiche : « Bonjourtoi »
//...
Concaténation - suite
var text = 'Voici un nombre : ', number = 42, result;
result = text + number;
alert(result); // Affi...
A retenir
Les conditions
var number = 4, text = '4', result;
alert(number == text;); // Affiche « true » alors que « number » est un...
Les opérateurs de comparaison
var number1 = 2, number2 = 2, number3 = 4,
result;
result = number1 == number2; // On spécif...
Les opérateurs logiques
var result = true && true;
alert(result); // Affiche : « true »
result = true && false;
alert(resu...
Combiner les opérateurs
var condition1, condition2, result;
condition1 = 2 > 8; // false
condition2 = 8 > 2; // true
resul...
Les structures conditionnelles
La structure if
if (true) {
alert("Ce message s'est bien affiché.");
}
if (false) {
alert("Pas la peine d'insister, ce mes...
La structure if….else
if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur "OK" si
c'est le ca...
La structure switch
var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :'));
switch (drawer) {
case 1:
ca...
Les ternaires
var startMessage = 'Votre catégorie : ',
endMessage,
adult = confirm('Êtes-vous majeur ?');
if (adult) { // ...
Conditions sur les variables
var conditionTest = 'Fonctionnera ? Fonctionnera pas ?';
if (conditionTest) {
alert('Fonction...
Incrémentation et décrémentation
var number = 0;
number++;
alert(number); // Affiche : « 1 »
number--;
alert(number); // A...
Les boucles
La boucle « while »
while (condition) {
instruction_1;
instruction_2;
instruction_3;
}
var number = 1;
while (number < 10)...
La boucle « while »
var nicks = '', nick;
while (true) {
nick = prompt('Entrez un prénom :');
if (nick) {
nicks += nick + ...
La boucle « do…while »
do {
instruction_1;
instruction_2;
instruction_3;
} while (condition);
var number = 1;
while (numbe...
La boucle « for »
for (initialisation; condition; incrémentation) {
instruction_1;
instruction_2;
instruction_3;
}for (var...
Les fonctions
• Mener une action précise
• Factoriser et simplifier le code
function myFunction(arguments) {
// Le code qu...
Les fonctions
function showMsg() {
alert('Et une première fonction, une !');
}
showMsg(); // On exécute ici le code conten...
Intérêt des fonctions
function byTwo() {
var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
alert(res...
La portée des variables
var ohai = 'Hello world !';
function sayHello() {
alert(ohai);
}
sayHello();function sayHello() {
...
La portée des variables - suite
var message = 'Ici la variable globale !';
function showMsg() {
var message = 'Ici la vari...
variables globales ou locales ?
var var1 = 2, var2 = 3;
function calculate() {
alert(var1 * var2); // Affiche : « 6 » (san...
Les arguments
function myFunction(arg) { // Notre argument est la variable « arg »
// Une fois que l'argument a été passé ...
Les arguments facultatifs
function prompt2(text, allowCancel) {
if (typeof allowCancel === 'undefined') {
allowCancel = fa...
Les valeurs de retour
function sayHello() {
return 'Bonjour !'; // L'instruction « return » suivie d'une valeur
alert('Att...
Les fonctions anonymes
function (arguments) {
// Le code de votre fonction anonyme
}
var sayHello = function() {
alert('Bo...
Structures vs instructions
function structure() {
// Du code…
}
var instruction = 1234;
var instruction = function() {
// ...
Isoler le code avec fonctions anonymes
// Code externe
(function() {
// Code isolé
})
(arguments);
// Code externe
functio...
Isoler le code avec fonctions anonymes
var test = 'noir'; // On crée une variable « test » contenant le mot « noir »
(func...
Isoler le code avec fonctions anonymes
var sayHello = (function() {
return 'Yop !';
})();
alert(sayHello); // Affiche : « ...
Comprendre le scope
var l=1;
function demandezunnombre() {
x= prompt("donnez un nombre > 13 svp :) ");
}
do {
demandezunno...
A retenir - fonctions
• Les variables déclarées avec var au sein d'une fonction ne
sont accessibles que dans cette fonctio...
Exercices
• Ecrire fonction triangle
*
**
***
****
*
**
***
****
Exercice carre
function carre()
{
var n=parseInt(prompt("donner un nombre entier : "));
var s="";
for(var i=0;i<n;i++)
{ v...
Exercice triangle rectangle
function triangle(){
var n=parseInt(prompt("Entrez un nombre entier : "));
var r="";
for(var i...
Exercice triangle isocèle
function losange(){
do{
var n=parseInt(prompt("Entrez un nombre impair : "));
}while(n%2==0);
va...
Exercice triangle isocèle
function losange(){
do{
var n=parseInt(prompt("Entrez un nombre impair : "));
}while(n%2==0);
va...
Les objets natifs
var myString = 'Ceci est une chaîne de caractères’;
// On affiche le nombre de caractères, au moyen de l...
Autres objets natifs
Number : l'objet qui gère les nombres
Boolean : l'objet qui gère les booléens
String : l'objet qui gè...
Les tableaux
Indice 0 1 2 3 4
Donnée Valeur 1 Valeur 2 Valeur 3 Valeur 4 Valeur 5
var myArray = ['Sébastien', 'Laurence', ...
Opérations sur les tableaux
var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];
alert(myArray[1]);...
Transformation chaine / tableau
var cousinsString = 'Pauline Guillaume Clarisse',
cousinsArray = cousinsString.split(' ');...
Parcourir un tableau
var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', ‘Guillaume'];
for (var i = 0; i < myArr...
Les objets littéraux
var family = {
self: 'Sébastien',
sister: 'Laurence',
brother: 'Ludovic',
cousin_1: 'Pauline',
cousin...
Syntaxe des objets
var myArray = [];
var myObject = {};
var family = {
self: 'Sébastien',
sister: 'Laurence',
brother: 'Lu...
Opérations sur les objets
family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle...
Utilisation des objets
function getCoords() {
/* Script incomplet, juste pour l'exemple */
return { x: 12, y: 21 };
}
var ...
Exercices
- Ecrire un programme qui saisit un entier au clavier et qui recherche si cet entier
appartient au tableau (répo...
Débogage de code javascript
va myVar = 'test; // Le mot-clé « var » est mal orthographié et il manque une apostrophe
Bug s...
Débogage de code javascript
va myVar = 'test; // Le mot-clé « var » est mal orthographié et il manque une apostrophe
Bug s...
Console de développement
Debogage erreur syntaxique
// Ici nous créons une fonction JavaScript, avec quelques erreurs de syntaxe.
functin test() {
...
Afficher variable dans la console
// On crée un objet basique.
var helloObject = {
english: 'Hello',
french: 'Bonjour',
sp...
Tester un code dans la console
// On déclare une variable contenant un texte quelconque.
var myVar = 'Hello';
// Toutes le...
Utiliser les points d’arrêt
// La fonction « a » affiche la valeur qu'elle reçoit de « b ».
function a(value) {
console.lo...
Utiliser les points d’arrêt
Utiliser les points d’arrêt
chrome Firefox
La pile d’exécution
chrome Firefox
Exercice point
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="...
Exercice point
<div id="myDiv" style="position:absolute;width:100px;height:100px;left:100px;background-color:red;"></div>
...
Exercice point
case 39:
//-Move right
x=x+3;
pixel.style.left = x+'px';
break;
case 38:
//-Move up
y=y-3;
pixel.style.top ...
Exercice point
var x=150,y=150;
pixel = document.createElement('DIV')
pixel.style.width = '10px'
pixel.style.height = '10p...
Manipuler les éléments HTML
Objet window
<script>
window.alert('Hello world!');
alert('Hello world!’);
var text = 'Variable globale !’;
console.log(wi...
Objet document
Objet document
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = document.getElementById...
Accès aux éléments
<div id="menu">
<div class="item">
<span>Élément 1</span>
<span>Élément 2</span>
</div>
<div class="pub...
Héritage
Editer les éléments HTML
<body>
<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié
dynamiquement</a>
...
Modifier la classe
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Le titre de la page</title>
<style>
.blue...
Modifier la classe
var div = document.querySelector('div');
// Ajoute une nouvelle classe
div.classList.add('new-class');
...
Modifier le contenu d’une balise
<body>
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div ...
Contenu textuel d’une balise
<body>
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = do...
Prochain SlideShare
Chargement dans…5
×

Cours javascript v1

829 vues

Publié le

Les bases de javascript. Introduction au langage javascript. Les boucles, les fonctions, scope local et global. Accès et modification des éléments du Dom (Document object model)

Publié dans : Internet
  • Soyez le premier à commenter

Cours javascript v1

  1. 1. Akambi Fagbohoun http://twitter.com/afagbohoun
  2. 2. • Le JavaScript, langage dit client-side Qu'est-ce que le JavaScript ? • Langage interpreté et orienté objet
  3. 3. • Le JavaScript, pas que le Web Qu'est-ce que le JavaScript ?
  4. 4. • Dynamiser une page HTML - Interactions avec l’internaute - Animations - Aide à la navigation) Apports du JavaScript
  5. 5. Petit historique du langage • Développé par Brendan Eich (1995) • standardisé par l'ECMA International sous le nom d’ECMAScript • Dernière version standardisée du JavaScript est basée sur l'ECMAScript 5, sorti en 2009. • ECMAScript 6
  6. 6. LES BASES DE JAVASCRIPT
  7. 7. Le javascript dans une page HTML <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script type="text/javascript" src="hello.js"></script> <script type="text/javascript" > // Un peu de code JavaScript...
  8. 8. Afficher une boîte de dialogue <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body>
  9. 9. La syntaxe du JavaScript Les instructions Ou instruction_1; instruction_2; instruction_3; Instruction_1;Instruction_2 Instruction_3 function toggle(elemID) { var elem = document.getElementById(elemID); if (elem.style.display == 'block') { elem.style.display = 'none'; Espace et indentation
  10. 10. Les variables // Déclaration de variables var myVariable; // Affectation de valeur myVariable = 2; // Chaine de caractère var text1 = "Mon premier texte"; // Avec des guillemets var text2 = 'Mon deuxième texte'; // Avec des apostrophes // boolean
  11. 11. Type des variables var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String var cars = ["Saab", "Volvo", "BMW"]; var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; /* Connaitre le type d’une variable */ alert(typeof text1); // Affiche : « string » typeof "John" // Returns string typeof 3.14 // Returns number typeof false // Returns boolean typeof [1,2,3,4] // Returns object typeof {name:'John', age:34} // Returns object
  12. 12. Les opérateurs arithmétiques Opérateur Signe addition + soustraction - multiplication * division / modulo % var result = 3 + 2; alert(result); // Affiche : « 5 » var number1 = 3, number2 = 2, result; result = number1 * number2; alert(result); // Affiche : « 6 » var divisor = 3, result1, result2, result3; result1 = (16 + 8) / 2 - 2 ; // 10 result2 = result1 / divisor;
  13. 13. Concacténation var hi = 'Bonjour', name = 'toi', result; result = hi + name; alert(result); // Affiche : « Bonjourtoi » // Simplification var text = 'Bonjour '; text += 'toi'; alert(text); // Affiche « Bonjour toi ». var userName = prompt('Entrez votre prénom :'); alert(userName); // Affiche le prénom entré par l’utilisateur Interaction avec l’utilisateur
  14. 14. Concaténation - suite var text = 'Voici un nombre : ', number = 42, result; result = text + number; alert(result); // Affiche : « Voici un nombre : 42 » var first, second, result; first = prompt('Entrez le premier chiffre :'); second = prompt('Entrez le second chiffre :’); result = first + second; result2 = parseInt(first) + parseInt(second); alert(result); Conversion de type
  15. 15. A retenir
  16. 16. Les conditions var number = 4, text = '4', result; alert(number == text;); // Affiche « true » alors que « number » est un nombre et « text » une chaîne de caractères
  17. 17. Les opérateurs de comparaison var number1 = 2, number2 = 2, number3 = 4, result; result = number1 == number2; // On spécifie deux variables avec l'opérateur de comparaison entre elles alert(result); // Affiche « true », la condition est donc vérifiée car les deux variables contiennent bien la même valeur Opérateur Signification == égal à != différent de === contenu et type égal à !== contenu ou type différent de > supérieur à >= supérieur ou égal à < inférieur à <= inférieur ou égal à Exemples
  18. 18. Les opérateurs logiques var result = true && true; alert(result); // Affiche : « true » result = true && false; alert(result); // Affiche : « false » result = false && false; alert(result); // Affiche : « false » Exemples avec ET Opérateur Type de logique Utilisation && ET valeur1 && valeur2 || OU valeur1 || valeur2 ! NON !valeur var result = true || true; alert(result); // Affiche : « true » result = true || false; alert(result); // Affiche : « true » var result = false; result = !result; alert(result); // Affiche « true » car on voulait l'inverse de « false » Exemples avec NONExemples avec OU
  19. 19. Combiner les opérateurs var condition1, condition2, result; condition1 = 2 > 8; // false condition2 = 8 > 2; // true result = condition1 && condition2; alert(result); // Affiche « false » var result = 2 > 8 && 8 > 2; alert(result); // Affiche « false »
  20. 20. Les structures conditionnelles
  21. 21. La structure if if (true) { alert("Ce message s'est bien affiché."); } if (false) { alert("Pas la peine d'insister, ce message ne s'affichera pas."); }if (2 < 8 && 8 >= 4) { // Cette condition renvoie « true », le code est donc exécuté alert('La condition est bien vérifiée.'); } if (2 > 8 || 8 <= 4) { // Cette condition renvoie « false », le code n'est donc pas exécuté Exemples
  22. 22. La structure if….else if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur "OK" si c'est le cas.')) { alert('Vous allez être redirigé vers le site.'); } else { alert("Désolé, vous n'avez pas accès à ce site."); } var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :")); if (floor == 0) { alert('Vous vous trouvez déjà au rez-de-chaussée.'); } else if (-2 <= floor && floor <= 30) { L’instruction « else if »
  23. 23. La structure switch var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :')); switch (drawer) { case 1: case 1: alert('Contient divers outils pour dessiner : du papier, des crayons, etc.'); break; case 2: alert('Contient du matériel informatique : des câbles, des composants, etc.'); break;
  24. 24. Les ternaires var startMessage = 'Votre catégorie : ', endMessage, adult = confirm('Êtes-vous majeur ?'); if (adult) { // La variable « adult » contient un booléen, on peut donc directement la soumettre à la structure if sans opérateur conditionnel endMessage = '18+'; } else { endMessage = '-18'; } alert(startMessage + endMessage); var startMessage = 'Votre catégorie : ', endMessage, adult = confirm('Êtes-vous majeur ?');
  25. 25. Conditions sur les variables var conditionTest = 'Fonctionnera ? Fonctionnera pas ?'; if (conditionTest) { alert('Fonctionne !'); } else { alert('Ne fonctionne pas !'); }var conditionTest1 = '', conditionTest2 = 'Une chaîne de caractères'; alert(conditionTest1 || conditionTest2); L’opérateur OU Tester l'existence de contenu d'une variable
  26. 26. Incrémentation et décrémentation var number = 0; number++; alert(number); // Affiche : « 1 » number--; alert(number); // Affiche : « 0 »var number = 0; var output = ++number; alert(number); // Affiche : « 1 » alert(output); // Affiche : « 1 » Ordre des opérateurs
  27. 27. Les boucles
  28. 28. La boucle « while » while (condition) { instruction_1; instruction_2; instruction_3; } var number = 1; while (number < 10) { number++; } Exemples
  29. 29. La boucle « while » var nicks = '', nick; while (true) { nick = prompt('Entrez un prénom :'); if (nick) { nicks += nick + ' '; // Ajoute le nouveau prénom ainsi qu'une espace juste après } else if (nick == ‘continue’) { continue; // On passe à l’itération suivante } else { Exemples avec liste de « prénom »
  30. 30. La boucle « do…while » do { instruction_1; instruction_2; instruction_3; } while (condition); var number = 1; while (number < 10) { number++; } Exemples
  31. 31. La boucle « for » for (initialisation; condition; incrémentation) { instruction_1; instruction_2; instruction_3; }for (var iter = 0; iter < 5; iter++) { alert('Itération n°' + iter); } Exemples for (var nicks = '', nick; true;) { nick = prompt('Entrez un prénom :'); continue; if (nick) { nicks += nick + ' '; } else {
  32. 32. Les fonctions • Mener une action précise • Factoriser et simplifier le code function myFunction(arguments) { // Le code que la fonction va devoir exécuter Structure d’une fonction
  33. 33. Les fonctions function showMsg() { alert('Et une première fonction, une !'); } showMsg(); // On exécute ici le code contenu dans la fonction Intérêt d’une fonction var result; result = parseInt(prompt('Donnez le nombre à multiplier par 2 :')); alert(result * 2); alert('Vous en êtes à la moitié !');
  34. 34. Intérêt des fonctions function byTwo() { var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :')); alert(result * 2); } byTwo(); alert('Vous en êtes à la moitié !'); byTwo();
  35. 35. La portée des variables var ohai = 'Hello world !'; function sayHello() { alert(ohai); } sayHello();function sayHello() { var ohai = 'Hello world !'; } Variables locales Variables globales
  36. 36. La portée des variables - suite var message = 'Ici la variable globale !'; function showMsg() { var message = 'Ici la variable locale !'; alert(message); } showMsg(); alert(message); Variables globales et locales du même nom
  37. 37. variables globales ou locales ? var var1 = 2, var2 = 3; function calculate() { alert(var1 * var2); // Affiche : « 6 » (sans blague ?!) } calculate();function calculate() { var var1 = 2, var2 = 3; alert(var1 * var2); } Variables locales Variables globales
  38. 38. Les arguments function myFunction(arg) { // Notre argument est la variable « arg » // Une fois que l'argument a été passé à la fonction, vous allez le retrouver dans la variable « arg » alert('Votre argument : ' + arg); } myFunction('En voilà un beau test !'); function moar(first, second) { // On peut maintenant utiliser les variables « first » et « second » comme on le souhaite : alert('Votre premier argument : ' + first); alert('Votre deuxième argument : ' + second); } Exemples
  39. 39. Les arguments facultatifs function prompt2(text, allowCancel) { if (typeof allowCancel === 'undefined') { allowCancel = false; } alert(text); } // On exécute la fonction seulement avec le premier argument, pas besoin du deuxième prompt2('Entrez quelque chose :'); function prompt2(allowCancel, text) { position des arguments facultatifs
  40. 40. Les valeurs de retour function sayHello() { return 'Bonjour !'; // L'instruction « return » suivie d'une valeur alert('Attention ! Le texte arrive !'); } alert(sayHello()); // Ici on affiche la valeur retournée par la fonction sayHello()
  41. 41. Les fonctions anonymes function (arguments) { // Le code de votre fonction anonyme } var sayHello = function() { alert('Bonjour !'); }; sayHello(); // Affiche : « Bonjour ! » cas pratiques
  42. 42. Structures vs instructions function structure() { // Du code… } var instruction = 1234; var instruction = function() { // Du code… }; Instructions Structures
  43. 43. Isoler le code avec fonctions anonymes // Code externe (function() { // Code isolé }) (arguments); // Code externe function test() { // Du code… } test(); (function test() { // Code. revient à : déclaration fonction + exécution
  44. 44. Isoler le code avec fonctions anonymes var test = 'noir'; // On crée une variable « test » contenant le mot « noir » (function() { // Début de la zone isolée // On crée une variable du même nom avec le contenu « blanc » dans la zone isolée var test = ‘blanc'; alert('Dans la zone isolée, la couleur est : ' + test); })(); // Fin de la zone isolée. Les variables créées dans cette zone sont détruites. Exemple :
  45. 45. Isoler le code avec fonctions anonymes var sayHello = (function() { return 'Yop !'; })(); alert(sayHello); // Affiche : « Yop ! » Valeur de retour zone isolée
  46. 46. Comprendre le scope var l=1; function demandezunnombre() { x= prompt("donnez un nombre > 13 svp :) "); } do { demandezunnombre(); }while((x=="") || (parseInt(x) < 13)); alert( "Merci, vous avez bien rentré le numéro : "+l +" valdez et allez faire vous calcules :)" ); Erreur à ne pas faire
  47. 47. A retenir - fonctions • Les variables déclarées avec var au sein d'une fonction ne sont accessibles que dans cette fonction. • Eviter le plus possible d’utiliser des variables globales. • Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner une valeur ou ne rien retourner du tout. • Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une partie du code.
  48. 48. Exercices • Ecrire fonction triangle * ** *** **** * ** *** ****
  49. 49. Exercice carre function carre() { var n=parseInt(prompt("donner un nombre entier : ")); var s=""; for(var i=0;i<n;i++) { var d=""; for (j=0;j<n;j++) { var k="*" d+=k; } var l=d s+=l+"n"; } return s; } var R = carre(); alert(R);
  50. 50. Exercice triangle rectangle function triangle(){ var n=parseInt(prompt("Entrez un nombre entier : ")); var r=""; for(var i=0;i<n;i++) { var d=""; for (j=0;j<i;j++) { var v="*" d+=v; } var w=d r+=w+"*n"; } return r; } var R = triangle(); alert(R);
  51. 51. Exercice triangle isocèle function losange(){ do{ var n=parseInt(prompt("Entrez un nombre impair : ")); }while(n%2==0); var r=""; for(i=1;i<=n;i=i+2){ var d=""; for (j=1;j<=i;j++){ var v="*";d+=v; } var a=""; for(var k=1;k<=(n-i)/2;k++){ var b=" " a+=b } var h=« *"; var c=a; var w=d; r+=c+w+c+"n"; } return r; } var R = losange(); alert(R);
  52. 52. Exercice triangle isocèle function losange(){ do{ var n=parseInt(prompt("Entrez un nombre impair : ")); }while(n%2==0); var r=""; for(i=1;i<=n;i=i+2){ var d=""; for (j=1;j<=i;j++){ var v="*"; d+=v; } var a=""; for(var k=1;k<=(n-i)/2;k++){ var b=" " a+=b } var h="*" var c=a; var w=d; r+=c+w+c+"n"; }
  53. 53. Les objets natifs var myString = 'Ceci est une chaîne de caractères’; // On affiche le nombre de caractères, au moyen de la propriété « length » alert(myString.length); // On récupère la chaîne en majuscules, avec la méthode toUpperCase() alert(myString.toUpperCase()); • un constructeur • des propriétés • des méthodes Les élément d’un objet
  54. 54. Autres objets natifs Number : l'objet qui gère les nombres Boolean : l'objet qui gère les booléens String : l'objet qui gère les chaînes de caractères Array : l'objet qui gère les tableaux
  55. 55. Les tableaux Indice 0 1 2 3 4 Donnée Valeur 1 Valeur 2 Valeur 3 Valeur 4 Valeur 5 var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', ‘Guillaume']; Syntaxe courte var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'); Syntaxe longue - dépréciée
  56. 56. Opérations sur les tableaux var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume']; alert(myArray[1]); // Affiche : « Laurence » myArray[1] = 'Clarisse'; alert(myArray[1]); // Affiche : « Clarisse » myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau myArray.unshift(‘Ludovic’); myArray.unshift(‘Ludovic’, ‘Pauline’); Ajout d’item myArray.pop(); // Retire le dernier élément myArray.shift(); // Retire le premier élément Supression d’item
  57. 57. Transformation chaine / tableau var cousinsString = 'Pauline Guillaume Clarisse', cousinsArray = cousinsString.split(' '); alert(cousinsString); alert(cousinsArray); var cousinsString_2 = cousinsArray.join('-'); alert(cousinsString_2); Tableau vers chaine Chaine vers tableau
  58. 58. Parcourir un tableau var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', ‘Guillaume']; for (var i = 0; i < myArray.length; i++) { alert(myArray[i]); } for (var i = 0, c = myArray.length; i < c; i++) { alert(myArray[i]); Optimisation Parcourir avec for
  59. 59. Les objets littéraux var family = { self: 'Sébastien', sister: 'Laurence', brother: 'Ludovic', cousin_1: 'Pauline', cousin_2: 'Guillaume' }; Identifiant self sister brother cousin_1 cousin_2 Donnée Sébastien Laurence Ludovic Pauline Guillaume Tableau des prénoms
  60. 60. Syntaxe des objets var myArray = []; var myObject = {}; var family = { self: 'Sébastien', sister: 'Laurence', brother: 'Ludovic', cousin_1: 'Pauline', cousin_2: 'Guillaume' }; Accès aux items family.sister; family[‘sister'];
  61. 61. Opérations sur les objets family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle » family.uncle = 'Didier'; // Même opération mais d'une autre manière Parcourir les objets for (var id in family) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family » alert(family[id]); Ajout d’un item
  62. 62. Utilisation des objets function getCoords() { /* Script incomplet, juste pour l'exemple */ return { x: 12, y: 21 }; } var coords = getCoords(); alert(coords.x); // 12 alert(coords.y); // 21 Valeur de retour
  63. 63. Exercices - Ecrire un programme qui saisit un entier au clavier et qui recherche si cet entier appartient au tableau (réponse de type oui/non). - Ecrire un programme qui saisit deux indices et échange les valeurs contenues dans le tableau à ces deux indices. Le programme affichera le contenu du tableau avant et après cette transformation - Reprendre la partie saisie du programme précédent pour écrire un nouveau programme qui re- cherche et affiche le plus grand élément du tableau.
  64. 64. Débogage de code javascript va myVar = 'test; // Le mot-clé « var » est mal orthographié et il manque une apostrophe Bug syntaxique // On veut afficher la valeur 6 avec les nombres 3 et 2 var myVar = 3 + 2; // Mais on obtient 5 au lieu de 6 car on a fait une addition au lieu d'une multiplication Bug algorithmique
  65. 65. Débogage de code javascript va myVar = 'test; // Le mot-clé « var » est mal orthographié et il manque une apostrophe Bug syntaxique // On veut afficher la valeur 6 avec les nombres 3 et 2 var myVar = 3 + 2; // Mais on obtient 5 au lieu de 6 car on a fait une addition au lieu d'une multiplication Bug algorithmique
  66. 66. Console de développement
  67. 67. Debogage erreur syntaxique // Ici nous créons une fonction JavaScript, avec quelques erreurs de syntaxe. functin test() { alert('Hello !'); script avec erreur syntaxique <script src="votre-fichier.js"></script>
  68. 68. Afficher variable dans la console // On crée un objet basique. var helloObject = { english: 'Hello', french: 'Bonjour', spanish: 'Hola' }; // Et on l'affiche. console.log(helloObject); // Tant qu'à faire, on affiche aussi un tableau.
  69. 69. Tester un code dans la console // On déclare une variable contenant un texte quelconque. var myVar = 'Hello'; // Toutes les secondes, on affiche le contenu de cette variable dans la console. setInterval(); setInterval(function() { console.log(myVar);}, 1000);
  70. 70. Utiliser les points d’arrêt // La fonction « a » affiche la valeur qu'elle reçoit de « b ». function a(value) { console.log(value); } // La fonction « b » incrémente la valeur reçue par « c » puis la passe en paramètre à « a ». function b(value) { a(value + 1); } // La fonction « c » incrémente la valeur reçue par la boucle for puis la passe en paramètre
  71. 71. Utiliser les points d’arrêt
  72. 72. Utiliser les points d’arrêt chrome Firefox
  73. 73. La pile d’exécution chrome Firefox
  74. 74. Exercice point <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Accueil</title> </head> <body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="bootstrap-3.3.6-dist/js/jquery-2.1.4.js"></script>
  75. 75. Exercice point <div id="myDiv" style="position:absolute;width:100px;height:100px;left:100px;background-color:red;"></div> <script> $(document).keydown(function(e){ switch (e.which){ case 37: // fleche gauche $('div').stop().animate({left:'-=30'}); break; case 38: // fleche haut $('div').stop().animate({top:'-=30'}); break; case 39: // fleche droite $('div').stop().animate({left:'+=30'}); break; case 40: // fleche bas $('div').stop().animate({top:'+=30'}); break; } }); </script> </body> </html>
  76. 76. Exercice point case 39: //-Move right x=x+3; pixel.style.left = x+'px'; break; case 38: //-Move up y=y-3; pixel.style.top = y+'px'; break; case 40: //-Move down y=y+3; pixel.style.top = y+'px'; break; default: break; } }; </script>
  77. 77. Exercice point var x=150,y=150; pixel = document.createElement('DIV') pixel.style.width = '10px' pixel.style.height = '10px' pixel.style.backgroundColor = '#000' pixel.style.position = 'absolute' pixel.style.left = x+'px' pixel.style.top = y+'px' document.body.appendChild(pixel) window.onkeydown = function(e) { var key = e.keyCode || e.which; switch (key) { case 37: //-Move left x=x-3; pixel.style.left = x+'px'; break;
  78. 78. Manipuler les éléments HTML
  79. 79. Objet window <script> window.alert('Hello world!'); alert('Hello world!’); var text = 'Variable globale !’; console.log(window.text); // On utilise une IIFE pour « isoler » du code (function() {
  80. 80. Objet document
  81. 81. Objet document <div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p> </div> <script> var div = document.getElementById('myDiv'); alert(div); var divs = document.getElementsByTagName('div'); for (var i = 0, c = divs.length ; i < c ; i++) { alert('Element n° ' + (i + 1) + ' : ' + divs[i]); } </script>
  82. 82. Accès aux éléments <div id="menu"> <div class="item"> <span>Élément 1</span> <span>Élément 2</span> </div> <div class="publicite"> <span>Élément 3</span> <span>Élément 4</span> </div> </div> <div id="contenu"> <span>Introduction au contenu de la page...</span> </div> var query = document.querySelector('#menu .item span'), queryAll = document.querySelectorAll('#menu .item span'); alert(query.innerHTML); // Affiche : "Élément 1" alert(queryAll.length); // Affiche : "2" alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : "Élément 1 - Élément 2"
  83. 83. Héritage
  84. 84. Editer les éléments HTML <body> <a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a> <script> var link = document.getElementById('myLink'); var href = link.getAttribute('href'); // On récupère l'attribut « href » console.log(href); link.setAttribute('href', 'http://www.speedwapp.com'); // On édite l'attribut « href »
  85. 85. Modifier la classe <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Le titre de la page</title> <style> .blue { background: blue; color: white; } </style> </head>
  86. 86. Modifier la classe var div = document.querySelector('div'); // Ajoute une nouvelle classe div.classList.add('new-class'); // Retire une classe div.classList.remove('new-class'); // Retire une classe si elle est présente ou bien l'ajoute si elle est absente div.classList.toggle('toggled-class'); // Indique si une classe est présente ou non
  87. 87. Modifier le contenu d’une balise <body> <div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p> </div> <script> var div = document.getElementById('myDiv'); alert(div.innerHTML); document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du paragraphe</blockquote>’;
  88. 88. Contenu textuel d’une balise <body> <div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p> </div> <script> var div = document.getElementById('myDiv'); alert(div.innerText); var txt = ''; if (div.textContent) { // « textContent » existe ? Alors on s'en sert ! txt = div.textContent;

×