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

791 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
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
791
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Le JavaScript ,langage dit client-side ->les scripts sont exécutés par le navigateur chez l'internaute (le client).
    Cela diffère des langages de scripts dits server-side exécutés par le serveur Web: PHP.

    langage interprété par le navigateur
    Culture (IE8 interpréteur JavaScript s'appelle Chakra (l'interpréteur des versions antérieures à IE9 s'appelle JScript), celui de Mozilla Firefox se nomme SpiderMonkey et celui de Google Chrome est V8.)

    Langage orienté objet -> contient des éléments, appelés objets, et que ces différents objets possèdent des caractéristiques et comportements spécifiques.

    Le langage fournit des objets de base comme des images, des dates, des chaînes de caractères…
    possible de créer soi-même des objets pour se faciliter la vie et obtenir un code source plus clair (donc plus facile à lire) et une manière de programmer beaucoup plus intuitive (et donc plus logique).
  • -> utilisé majoritairement au sein des pages Web
    -> utilisation en guise de serveur ou d'application commence à se répandre.

    Le JavaScript est régulièrement utilisé pour réaliser des extensions pour différents programmes (Chrome et Firefox)
    Possible d’utiliser le JavaScript en dehors du navigateur avec projet Node.js.
    Le JavaScript peut aussi être utilisé pour réaliser des applications: l'interface de Firefox, Speedwapp, …
  • s'inclut directement dans la page Web (ou dans un fichier externe)

    ex:
    • Afficher/masquer du texte ;
    • Faire défiler des images ;
    • Créer un diaporama avec un aperçu « en grand » des images ;
    • Créer des infobulles.
  • appelé au début LiveScript (décembre 1995) -> embarqué dans le navigateur Netscape 2.
    Le langage est alors un succès, si bien que Microsoft développe une version semblable, appelée JScript, qu'il embarque dans Internet Explorer 3, en 1996.

    Renommé JavaScript en hommage au langage Java qui était de plus en plus populaire.

    European Computer Manufacturers Association
  • Préférez fichier externe plutôt que d'inclure le code JavaScript directement dans la page -> mis en cache par le navigateur ; accélère l’affichage de la page
  • <script> : contient le code JavaScript

    alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message.
  • Syntaxe simple -> instruction séparé par point virgule (optionnel si l'instruction qui suit se trouve sur la ligne suivante)

    Plusieurs instructions sur une même ligne, le point-virgule est fortement recommandé.

    Non sensible aux espaces
    Indenter (Les instructions sont hiérarchisées en plusieurs niveaux) pour rendre plus lisible.
  • variable -> espace de stockage sur votre ordinateur permettant d'enregistrer tout type de données
    (chaîne de caractères, valeur numérique, structures complexes)

    déclarer une variable -> lui réserver un espace de stockage en mémoire
    (mot-clé var est présent pour indiquer que vous déclarez une variable)

    déclarer et assigner des variables sur une seule et même ligne
    langage sensible à la casse
  • typage dynamique
  • Prompt -> renvoie ce que l'utilisateur a écrit sous forme d'une chaîne de caractères
  • tapé deux fois le chiffre 1, le résultat sera 11

    parseInt -> Convertir une chaîne de caractères en nombre (type number)

  • • Une variable est un moyen pour stocker une valeur.
    • On utilise le mot clé var pour déclarer une variable, et on utilise = pour affecter une valeur à la variable.
    • Les variables sont typées dynamiquement, ce qui veut dire que l'on n'a pas besoin de spécifier le type de contenu que la variable va contenir.
    • Grâce à différents opérateurs, on peut faire des opérations entre les variables.
    • L'opérateur + permet de concaténer des chaînes de caractères, c'est-à-dire de les mettre bout à bout.
    • La fonction prompt() permet d'interagir avec l'utilisateur.
  • conditions -> contrôler comportement du code suivant état du programme

    une condition est une sorte de « test » (ex : une variable contient bien une valeur)
  • huit opérateurs vont permettre de comparer diverses valeurs entre elles.

  • les opérateurs de comparaison acceptent chacun deux valeurs en entrée et renvoient un booléen tandis que les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen
  • les structures conditionnelles influent sur l'exécution de votre code

    Les accolades permettent de définir la portion de code qui sera exécutée si la condition se vérifie.
  • les structures conditionnelles influent sur l'exécution de votre code

    Les accolades permettent de définir la portion de code qui sera exécutée si la condition se vérifie.
  • La structure else if pour dire « sinon si »

    • Une première condition est à tester ;
    • Une deuxième condition est présente et sera testée si la première échoue ;
    • Et si aucune condition ne se vérifie, la structure else fait alors son travail.
  • pas très pratique pour faire du cas par cas ; un switch permet de faire une action en fonction d'une valeur mais aussi en fonction du type de la valeur (comme l'opérateur ===)

    permet de ne pas réécrire à chaque fois la condition
  • mauvaise réputation d'être assez peu lisibles
  • évaluer à false - > 0, une chaîne de caractères vide, undefined
    le reste est true

  • L'incrémentation est importante au sein des boucles.

    Incrémenter ou décrémenter signifie ajouter ou soustraire une unité à une variable
  • boucle -> gérer les répétition -> ne pas écrire plusieurs fois les mêmes instructions

    variable, condition de sortie, pas d’avancement
    À chaque fois que la boucle se répète on parle d'itération

    Pour faire fonctionner une boucle, il est nécessaire de définir une condition. Tant que celle-ci est vraie (true), la boucle se répète. Dès que la condition est fausse (false), la boucle s'arrête.
  • while -> Répéter tant que la condition est vérifiée

    S'arranger, à un moment, pour que la condition ne soit plus vraie, sinon la boucle se répéterait à l’infini
  • Ex dernière fois : demander un nombre jusqu’à l’avoir
  • boucle est toujours exécutée au moins une fois

    Attention à la syntaxe de la boucle do while : il y a un point-virgule après la parenthèse fermante du while.
  • for (Très pratique pour compter ainsi que pour répéter la boucle un nombre défini de fois.
    ) -> trois blocs séparés par un point-virgule (initialisation, condition, et incrémentation)

    Dans l’exemple -> afficher 5 fois une boîte de dialogue à l'aide de alert(), qui affichera le numéro de chaque itération

    donc si on compte de 0 à 4, il y a bien 5 tours : 0, 1, 2, 3 et 4.

    Boucle for sans incrémentation

    En JavaScript -> déconseillé de déclarer des variables au sein d'une boucle (entre les accolades)

    -> pas besoin de déclarer une même variable à chaque passage dans la boucle
    -> déclarer les variables directement dans le bloc d’initialisation

    manipulation des tableaux ainsi que des objets
  • une fonction a pour but de mener à bien une action précise, reconnaissable par un nom explicite.
    analogie -> moteur d'une voiture

    tournez la clé pour démarrer le moteur et celui-ci fait déplacer tout son mécanisme pour renvoyer sa force motrice vers les roues.

    C'est pareil avec une fonction : vous l'appelez en lui passant éventuellement quelques paramètres, elle va ensuite exécuter le code qu'elle contient puis va renvoyer un résultat en sortie

    alert(), prompt(), confirm(), etc. est permise car elles existent déjà de façon native -> fonction ou variable native intégré au langage.

    déclaration de fonction (function name)
  • appeler une fonction » signifie « exécuter »). Sans ça, le code qu'elle contient ne s'exécutera jamais.

    noms de fonctions -> limités aux caractères alphanumériques et aux deux caractères : _ et $.

    l'intérêt d'une fonction réside notamment dans le fait de ne pas avoir à réécrire plusieurs fois le même code

    Nous pouvons envisager d'utiliser une boucle mais si nous voulons afficher un texte entre les deux opérations comme ceci alors la boucle devient inutilisable
  • variables globales -> accessibles partout dans votre code, y compris à l'intérieur des fonctions
    variables locales -> toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction

    lorsqu'une variable n'est accessible que dans une partie de votre code, on dit qu'elle se trouve au sein d'un « scope ». Retenez bien ce terme
  • Pendant exécution fonction -> la variable locale prend le dessus sur la variable globale de même nom

    sortie de fonction -> variable locale détruite

    déconseillé de créer des variables globales et locales de même nom, cela est souvent source de confusion.
  • globale à proscrire car elles peuvent rapidement vous perdre dans votre code (et engendrer des problèmes si vous souhaitez partager votre code)

    les variables var1 et var2 ne sont utilisées que pour la fonction calculate()

    ces variables n'iront pas interférer avec d'autres fonctions qui peuvent utiliser des variables de même nom
  • les arguments sont des informations envoyées à une fonction

    passer des valeurs en paramètres d'une fonction -> ces valeurs deviennent les arguments d'une fonction

    fonction myFunction() -> code enregistré en mémoire mais ne s'exécute pas tant qu'on ne l'appelle pas
    - appel à myFunction() mais en lui passant un argument, la fonction va donc attendre de recevoir tous les arguments avant de s'exécuter ;
    • La fonction prompt() s'exécute puis renvoie la valeur entrée par l'utilisateur, ce n'est qu'une fois cette valeur renvoyée que la fonction myFunction() va pouvoir s'exécuter car tous les arguments auront enfin été reçus ;
    • Enfin, myFunction() s'exécute !
  • return : cette instruction met fin à la fonction, puis retourne la valeur
    tout ce qui suit « return » ne s’affiche pas (on ne peut pas faire plusieurs renvois de valeurs)
  • anonymes car elles ne possèdent pas de nom

    assigner notre fonction à une variable

    sayHello n’est pas devenue une fonction mais référence la fonction

    ; obligatoire car instruction
  • instruction assignant une structure à une variable

    les fonctions, les conditions, les boucles, etc. sont des structures

    tout le reste (assignation de variable, exécution de fonction, etc.) sont des instructions.
  • éviter qu'une partie de votre code n'affecte tout le reste (portée des variables s'applique )

    fonction anonyme + 2 parenthèses (une première paire encadrant la fonction et une deuxième paire suivant la première)

    doubles parenthèses -> exécuter imédiatement la fonction

    fonction anonyme -> Si non assignée à variable, on doit utiliser ces doubles parenthèses pour l’exécuter
    1er parenthèses -> récupère référence vers fonction et 2ème parenthèse (exécution)

    fonctions immédiatement exécutées se nomment des Immediately-Invoked Function Expression, abrégées IIFE

    point virgule -> la fonction (qui est une structure) est exécutée, ce qui fait que l'on obtient une instruction
  • fonction demander un nombre

    Isole tout le code dans une fonction anonymes

    def triangle(n):
    i = 1
    while i <= n:
    print(i * '*')
    i = i + 1

    triangle(2)
    triangle(3)
    triangle(5)

    Ecrivez un programme qui affiche la table de multiplication des nombres de 1 à 10, sous la forme suivante :

    _ | 1 2 3 4 5 6 7 8 9 10
    ----------------------------------
    1 | 1 2
    2 | 2 4
    3 | 3 6
    4 | 4 8
    5 | 5 10
    6 | 6 12
    7 | 7 14
    8 | 8 16
    9 | 9 18
    10|10 20

    Lister les valeurs d’un tableau
    http://www.grappa.univ-lille3.fr/~coulom/Python/listes_prog_pendu.html
    https://openclassrooms.com/forum/sujet/exercice-pour-les-vrais-debutants-en-programmation-37431 Suite de conway pour étude sur tableau
  • fonction demander un nombre

    Isole tout le code dans une fonction anonymes

    def triangle(n):
    i = 1
    while i <= n:
    print(i * '*')
    i = i + 1

    triangle(2)
    triangle(3)
    triangle(5)

    Ecrivez un programme qui affiche la table de multiplication des nombres de 1 à 10, sous la forme suivante :

    _ | 1 2 3 4 5 6 7 8 9 10
    ----------------------------------
    1 | 1 2
    2 | 2 4
    3 | 3 6
    4 | 4 8
    5 | 5 10
    6 | 6 12
    7 | 7 14
    8 | 8 16
    9 | 9 18
    10|10 20

    Lister les valeurs d’un tableau
    http://www.grappa.univ-lille3.fr/~coulom/Python/listes_prog_pendu.html
    https://openclassrooms.com/forum/sujet/exercice-pour-les-vrais-debutants-en-programmation-37431 Suite de conway pour étude sur tableau
  • fonction demander un nombre

    Isole tout le code dans une fonction anonymes

    def triangle(n):
    i = 1
    while i <= n:
    print(i * '*')
    i = i + 1

    triangle(2)
    triangle(3)
    triangle(5)

    Ecrivez un programme qui affiche la table de multiplication des nombres de 1 à 10, sous la forme suivante :

    _ | 1 2 3 4 5 6 7 8 9 10
    ----------------------------------
    1 | 1 2
    2 | 2 4
    3 | 3 6
    4 | 4 8
    5 | 5 10
    6 | 6 12
    7 | 7 14
    8 | 8 16
    9 | 9 18
    10|10 20

    Lister les valeurs d’un tableau
    http://www.grappa.univ-lille3.fr/~coulom/Python/listes_prog_pendu.html
    https://openclassrooms.com/forum/sujet/exercice-pour-les-vrais-debutants-en-programmation-37431 Suite de conway pour étude sur tableau
  • fonction demander un nombre

    Isole tout le code dans une fonction anonymes

    def triangle(n):
    i = 1
    while i <= n:
    print(i * '*')
    i = i + 1

    triangle(2)
    triangle(3)
    triangle(5)

    Ecrivez un programme qui affiche la table de multiplication des nombres de 1 à 10, sous la forme suivante :

    _ | 1 2 3 4 5 6 7 8 9 10
    ----------------------------------
    1 | 1 2
    2 | 2 4
    3 | 3 6
    4 | 4 8
    5 | 5 10
    6 | 6 12
    7 | 7 14
    8 | 8 16
    9 | 9 18
    10|10 20

    Lister les valeurs d’un tableau
    http://www.grappa.univ-lille3.fr/~coulom/Python/listes_prog_pendu.html
    https://openclassrooms.com/forum/sujet/exercice-pour-les-vrais-debutants-en-programmation-37431 Suite de conway pour étude sur tableau
  • fonction demander un nombre

    Isole tout le code dans une fonction anonymes

    def triangle(n):
    i = 1
    while i <= n:
    print(i * '*')
    i = i + 1

    triangle(2)
    triangle(3)
    triangle(5)

    Ecrivez un programme qui affiche la table de multiplication des nombres de 1 à 10, sous la forme suivante :

    _ | 1 2 3 4 5 6 7 8 9 10
    ----------------------------------
    1 | 1 2
    2 | 2 4
    3 | 3 6
    4 | 4 8
    5 | 5 10
    6 | 6 12
    7 | 7 14
    8 | 8 16
    9 | 9 18
    10|10 20

    Lister les valeurs d’un tableau
    http://www.grappa.univ-lille3.fr/~coulom/Python/listes_prog_pendu.html
    https://openclassrooms.com/forum/sujet/exercice-pour-les-vrais-debutants-en-programmation-37431 Suite de conway pour étude sur tableau
  • JavaScript est un langage orienté objet -> dispose d’objets
    objets natifs (un nombre, une chaîne de caractères ou même un booléen)

    ex : myString contient un objet, et cet objet représente une chaîne de caractères.

    C'est la raison pour laquelle on dit que le JavaScript n'est pas un langage typé, car les variables contiennent toujours la même chose : un objet. Mais cet objet peut être de nature différente (un nombre, un booléen…)

    constructeur -> exécuter quand on créer un nouvel objet (définitions de variables, nombre de caractères d'une chaîne dans length). géré pour les objets natifs.

    propriétés -> variable au sein de l’objet (informations nécessaires au fonctionnement de l’objet -> caractéristique et état)

    méthodes -> fonctions contenues dans l’objet (role -> réaliser des opérations sur le contenu de l'objet)
    ex : chaine de caractère -> méthode qui met la chaîne de caractères en majuscules
  • tableau -> une variable qui contient plusieurs valeurs, appelées items.

    Chaque item est accessible au moyen d'un indice (commence par 0)
  • tableau -> une variable qui contient plusieurs valeurs, appelées items.

    Chaque item est accessible au moyen d'un indice (commence par 0)

    indice -> position d’une valeur (l’item 1 porte l'indice 0, et donc l’item 5 porte l'indice 4).

    Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule

    new -> instance un nouvel objet Array


  • split() va couper la chaîne de caractères à chaque espace -> portions ainsi découpées sont placées dans un tableau

    alert(array) -> transforme en une chaîne de caractères grâce à toString() (éléments séparés par virgules)

    L'inverse de split() -> tableau vers chaîne de caractères est (join)
  • À chaque itération, on va avancer d'un item dans le tableau

    Le nombre d'items est différent des indices. S'il y a cinq items, comme ici, les indices vont de 0 à 4

    inutile de recaluler myArray.length à chaque itération
  • objet litttéral -> sorte de tableau dont les indices sont remplacés par des identifiants

    tableau des prénoms, l'item appelé sister pourrait retourner la valeur « Laurence ».
  • objet litttéral -> sorte de tableau dont les indices sont remplacés par des identifiants

    tableau des prénoms, l'item appelé sister pourrait retourner la valeur « Laurence ».
  • ajouter un item en spécifiant un identifiant qui n'est pas encore présent

    fournir une « variable clé » qui reçoit un identifiant

    for in (pas sur les tableaux avec index) car
  • les fonctions, avec return, ne savent retourner qu'une seule variable. Si on veut retourner plusieurs variables, objets
  • http://deptinfo.cnam.fr/Enseignement/CycleA/APA/nfa031/docs/corriges-tableaux-1.pdf


    Dans cet exercice, on va travailler avec un tableau d’entiers initialisé : int[] tab = {12, 15, 13, 10, 8, 9, 13, 14};
    Question 1
    Ecrire un programme qui saisit un entier au clavier et qui recherche si cet entier appartient au tableau (réponse de type oui/non).
    class Exo6_6_1{
    public static void main(String[] args){
    int[] tab = {12, 15, 13, 10, 8, 9, 13, 14};
    int n;
    boolean estLa = false;
    Terminal.ecrireString("Entrez le nombre a chercher: "); n = Terminal.lireInt();
    for (int i = 0; i<tab.length; i++){ if (tab[i] == n){
    estLa = true; }
    }
    if (estLa){
    Terminal.ecrireStringln("Le nombre est dans le tableau"); }else{
    Terminal.ecrireStringln("Le nombre n’est pas dans le tableau"); }
    } }
  • - Bug généralement rencontrée en Javascript
    Utilisation de la console de développement

    Fautes de syntaxe -> signaler par l'interpréteur JavaScript dans la console (facile à résoudre)
    Erreurs dans votre algorithme (exécution du code, 0 intelligence)

    débogage (consiste à supprimer les bugs qui existent dans votre code)
  • Vérifier valeurs variables, calculs avec alert() et console.log()

    bug algorithmique -> chercher par vous-mêmes où vous avez bien pu vous tromper. méthode simple -> analyser le code pour trouver à quel endroit s'est produit l'erreur.

    Si calcul affiche mauvaise valeur -> vérifier ce calcul (si calcul pas en cause alors voir variables utilisés) et remonter de plus en plus vers le haut.
  • Ouverture avec F12 ou Cmd+Alt+I

    - afficher un grand nombre de valeurs
    consulter le code HTML généré par du code
    analyser des requêtes HTTP (entre autres) effectuées par le navigateur
    mesurer les performances de votre code
  • Dans le cadre du débogage d'erreurs, il est très important de bien externaliser notre code JavaScript car l'affichage des erreurs peut être erroné avec Chrome lorsque le code JS est directement intégré au sein du code HTML.

    Indication des erreurs en rouge. SyntaxError mentionne une erreur syntaxique

    précision sur l’erreur (différente suivant navigateur). ex, Firefox « SyntaxError: missing ; before statement ». À droite, nom du fichier concerné ainsi que la ligne de code (cliquer pour aller à la ligne qui pose problème)

    l'interpréteur JavaScript s'arrête sur la première erreur rencontrée

    rectifier l'erreur actuellement indiquée, vous verrez l'erreur suivante sur Chrome : « Uncaught SyntaxError: Unexpected end of input ». Firefox, lui, est un peu plus clair sur ce point : « SyntaxError: missing } after function body ».

    remonté des fichiers manquants
  • console.log() -> afficher valeur d'une variable sans bloquer l'exécution de votre code, contrairement à la fonction alert()

    Là où la fonction alert() aurait affiché « [object Object] », console.log() affiche le contenu de l'objet, ce qui est nettement plus pratique

    méthodes faites pour déboguer le code et n'ont rien à faire dans votre code fini
  • ligne qui commence par un chevron bleu > possible d'y écrire directement du code

    Une fois le code exécuté, vous allez voir le contenu de la variable apparaître toutes les secondes dans la console. Essayez maintenant d'écrire myVar = ‘Bonjour';

    la console ne peut agir que sur les variables qui sont globales !
  • breakpoints -> bug qui ne se produit que pendant une fraction de seconde (pose généralement problème pour cerner la source du problème)

    Suite d'appels de fonctions se nomme une « Pile d’exécution (Call Stack)

    Les points d'arrêts servent à étudier la pile d'exécution de notre code.
  • Aller dans l'onglet « Sources » pour Chrome et « Débogueur » pour Firefox

    Raccourci Ctrl + O (ou Cmd + O sous OS X) pour choisir fichier ou poser point d’arrêt (uniquement lignes avec instructions)

    cliquez sur numéro de ligne 3 -> icône montrant point d'arrêt sur la ligne

    recharger pour ré-exécuter -> mis en pause au point d’arrêt + surlignage en bleu de la ligne
    (consulter les variables dans scope actuel)
  • fonction a() s'apprête à afficher est 2

    Continuer avec play
  • différents étapes (fonctions) ou est passé l’interpréter avant d’arriver au point d’arrêt

    fonction la plus récente -> première

    voir variables scope pour chaque étape (ex: au clic sur c , value = 0)

    conseil pour débugguer : nommer fonction anonyme pour vous répérer

  • window -> fenêtre du navigateur
  • window -> fenêtre du navigateur
  • window -> fenêtre du navigateur
  • window -> fenêtre du navigateur
  • comment naviguer entre les différents nœuds qui composent une page HTML

    édition du contenu d'une page en ajoutant, modifiant et supprimant des nœuds.

    DOM (Document Object Model) -> interface de programmation pour XML et HTML.
    interface (API (pour Application Programming Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes ou, dans le cas présent, différents langages)

    vocabulaire : élément html -> balise html
  • window -> fenêtre du navigateur (à partir de cet objet que le JavaScript est exécuté)

    fonction (alert) -> méthode de window (implicite)
    fonctions globales = isNaN(), parseInt() ou encore parseFloat()

    variables globales et variable non déclarée avec var -> propriété de l'objet window
    conseil -> (toujours utilisé var pour éviter confusion)

    IIFE = immediate invoked fonction expression
  • document -> document est un sous-objet de window (page web)
    -> permet accéder aux éléments HTML et les modifier

    une page web -> vue comme arbre

    notion : enfants, parent, noeud (node), #text (noeud texte)
  • Accès aux éléments HTML via le DOM avec 3 méthodes: getElementById()
    collection d'éléments -> getElementsByTagName() et getElementsByName()

    div est un objet de type HTMLDivElement

    getElementsByName pour formulaire HTML5 (<input>) , déprécié pour autre (ex: <map>)
  • querySelector (1er élément) et querySelectorAll(tous les éléments) -> non supportées par les vieux navigateurs (à partir de IE8)
    -> simplifier sélection d'éléments dans le DOM (paramètre sélecteur CSS)
  • Node > sous objet « Element », …

    Node (propriétés et de méthodes) utilisées depuis un de ses sous-objets
  • Element -> composés d'attributs (href de <a>) et contenu (#text ou élément HTML)

    Element fournit getAttribute (valeur exacte écrit dans HTML) et setAttribute()

    accès aux attributs via propriété (ex : link.href) -> valeur calculé

    form propriété value -> valeur d'un champ
  • class et for (réservé)
    -> utiliser className
    -> attribut for d’un label -> utiliser htmlFor

    plusieurs classes -> couper chaîne avec split()
  • après IE10 -> classList
  • innerHTML -> code HTML enfant sous forme de texte

    solliciter le moins possible innerHtml (pas dans boucle) -> pb performance
  • innerText (version non standardisé IE) contentText (version standardisé)

    solliciter le moins possible innerHtml (pas dans boucle) -> pb performance

    Tester le navigateur (if div.textContent)

    http://caniuse.com (méthode supporté par navigateur)
  • 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;

    ×