Scribd Logo
Importer

Bienvenue sur Scribd !

  • JAVASCRIPT

    Transféré par

    DANE GHARIB
    73 vues6 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    73 vues6 pages

    JAVASCRIPT

    Transféré par

    DANE GHARIB

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    JAVASCRIPT

     INTRODUCTION

    JavaScript permet :
     De programmer des actions en fonction d’évènements
     d’effectuer des calculs
     de valider localement les données saisies par l’utilisateur
     d'ajouter des effets d’animation
     de détecter la langue, versions du navigateur
     de créer de petites applications (calculette, convertisseur)
     De créer des jeux ...

    - On peut écrire le JavaScript dans un fichier externe (comme avec le CSS).


    Dans le <head> du HTML on va utiliser la syntaxe : <script src= « myScript.js » </script>

    - JS intègre plusieurs types d’objets :


    o WINDOW : la fenêtre du navigateur
    o DOCUMENTS : la page web qui s’affiche dans la fenêtre du nav

    A. WINDOW
    Représente la fenêtre du navigateur, qui contient :
    - Document
    - Navigator
    - History ..

    WINDOW contient des méthodes telles que :


    - alert(message) ; confirm(message) ; prompt(message)
    - setTimeout(function,delay) ; setInterval(function,delay)

    Exemple : alert(“Hello”)

    B. DOCUMENT
    Représente la page HTML :

    Il permet :
    - D’accéder à tous les éléments affichés sur la page,
    - De contrôler les saisies,
    - Modifier l’apparence et le contenu

    DOCUMENT possède : Des méthodes : Des objets :


    - Des propriétés :  getElementById()  Forms
     bgcolor  addEventListener()  Images
     title ...
    - WINDOW – alert() : Cette méthode va ouvrir une petite fenêtre pop-up avec du texte
     Alert(« Hello World ») ;

    - WINDOW – prompt() : Cette méthode sert à lire une valeur (input)


     x = prompt(« Veuillez saisir votre nom ») ;

    - DOCUMENT – confirm() : Cette méthode ouvre une boite de dialogue avec 2 boutons (OK et
    Cancel), et retourne un booléen.

    <script >
    var response = confirm("Êtes-vous sur de vouloir annuler votre
    commande ?");
    if (response == true) {
    alert("Votre commande est annulée!");
    }
    </script>
     SYNTAXE DE BASE
    LES VARIABLES
    NOTE : on ne peut déclarer une variable
    - Pour déclarer une variable, on utilise le mot clé var avec un chiffre d’abord
    var x = « Dane » ;
    var y = 1234 ; var abc //OK
    var z = null ; var a2 //OK
    var myArray = [1, 2, 3, 4] ; var 2a //NON

    - On peut aussi utiliser le mot clé let


    Exemple : let count = 0 ; NOTE : Sa portée est limitée à celle du
    let found = true ; bloc courant.

    if (score > 100 ) if (score > 100 )


    { {
    let message = 'You Win!'; var message = 'You Win!';
    console.log(message); console.log(message);
    } }
    console.log(message); console.log(message);

    ERROR YOU WIN


    if (score > 100 )
    {
    let message = 'You Win!';
    console.log(message);
    }

    - Pour déclarer une constante on utilise le mot clé const


    const nom = ‘Gharib’ ;
     CARACTERE SPECIAUX :

    \n : retour a la ligne \ « : guillemet


    \t : tabulation \\ : backslah
    \’ : cote

     LES OPERATEURS :

     Les opérateurs arithmétiques : +, -, *, /, %,++,--


     Les opérateurs d’assignation : =, +=, -=, *=, /=, %=
     Les opérateurs de comparaison : ==, ===, !=, !==, >, >=, <, <=
     Les opérateurs logiques : &&, ||, !

    == compare deux valeurs quel que soit leur type (égalité tolérante)
    === compare deux valeurs de même type (égalité stricte)
    != différent en valeur
    !== différent en valeur et en type
    > supérieur à
    >= supérieur ou égal à
    < inférieur à
    <= inférieur ou égal à
    2 == '22'; // => true
    22 === '22'; // => false
    2 !== "2"; // => true
    2 !== "3"; // => true
    2 !== 2; // => false

    - DOCUMENT – write() : Cette méthode permet d’écrire du texte dans la page HTML

    <script >
    var reference='063WPR1L3';
    document.write("<h2>Techniques de programmation Web</h2>");
    document.write("est le titre du cours ");
    document.write(reference);
    </script>
     IF / ELSE / SWITCH / FOR

    if (expression){ if (i < 0) {
    instruction1 ; message = 'negatif';
    } }
    else { else {
    instruction2 ; if (i > 0)
    } message = 'positif';
    else
    message = 'Zero' ;
    }

    switch (n) { var color, message;


    case value1: // Initialisation de color
    block1;
    break; switch(color) {
    case value2: case "red": message = "problem";
    block2; break;
    break; case "green": message = "ok";
    default: block3; break;
    } case "orange": message = "warning";
    break;
    default: message = "unknown";
    }
    console.log(message);

    for (initialisation ; condition ; var i;


    incrémentation) { for (i=0; i<=5; i++){
    instruction; console.log(i);
    //... //...
    } }
    var i=0;
    while (expression) { while (i<=5){
    instruction; console.log(i);
    //... //...
    } i++;
    }

    for (i = 0; i < 10; i++) { for (i = 0; i < 10; i++) {


    if (i === 5) { if (i === 5) {
    break; } continue; }
    text += i + " / ";} text += i + " / ";}

    0/ 1/ 2 / 3/ 4/ 0 /1 /2 /3 /4 /6 /7 /8 /9 /
     LES FONCTIONS

    Pour déclarer une fonction, on utilise les mots clés : functions et return

    function average(param1, param2) {


    return (param1 + param2) / 2;
    }
    <!DOCTYPE html>

    <html> <head> <script>

    function myAlert() {
    alert("Bienvenue sur le site de l\'IGE");}

    </script>

    </head>

    <body onload="myAlert();">

    </body>

    </html>

    function helloMessage() {
    return 'Hello !';
    }

    alert(helloMessage());

     QUELQUES FONCTIONS NATIVES

    1. isNaN (string chaine) : utilisé pour le contrôle de saisie du user, retourne TRUE si chaine n’est pas
    un nombre, sinon false

    2. parseInt(String chaine, [integer base]) : convertit une chaine en un nombre entier.

    3. parseFloat(string chaine) : convertit chaine en un nombre décimal.

    4. eval(String chaine) : permet d’évaluer du code qui est sous forme de caractère
     OBJETS

    1. ARRAY permet de créer et manipuler des


    Méthodes :
    tableaux.
     pop(), supprime le dernier élément du tableau
    Propriétés :
     shift(), supprime le premier élément du tableau
     push(), ajoute des éléments en fin de tableau
     length(), donne le nombre d’éléments du tableau
     unshift(), insère des éléments en début de tableau
     join(), convertit un tableau en chaine ...
    2. STRING

    Propriétés :

     length, donne la longueur de la chaine ...

    Méthodes :
      toUpperCase(), retourne la chaine en majuscule
      toLowerCase(), retourne la chaine en minuscule

      substring(beginIndex, endIndex), extrait une sous-chaîne d'une chaîne en partant de


    beginIndex et jusqu'à endIndex

      charAt(n), retourne le caractère à la position n

      indexOf(str, beginIndex), retourne la position de str dans une chaîne, à partir de la position
    beginIndex, si la sous-chaîne n'est pas trouvée, elle retourne -1

      lastIndexOf(str), retourne l'indice de la dernière occurrence de str, -1 sinon ...

    3. MATH

    Méthodes :  abs(x), retourne la valeur absolue de x


     round(x), retourne l’entier arrondi de x
     random(), retourne un nombre aléatoire entre 0 et 1  sqrt(x), retourne la racine carrée de x

     pow(x,y), renvoie x à la puissance y  log(x), retourne le logarithme de x


     max(x,y), retourne le plus grand entre x et y  min(x,y), retourne le plus petit entre x et y
     cos(x), retourne le cosinus de x ...

    1. Écrire une fonction rand() permettant de générer un nombre entier aléatoire inferieur à 10.
    function rand() {
    return (Math.round(Math.random() * 10) );
    }

    2. Écrire une deuxième fonction randInterval(min, max) permettant de générer un nombre entier
    aléatoire compris entre min et max.
    function randInterval(min, max) {
    return (min + Math.round(Math.random() * (max - min)) );
    }

    Vous aimerez peut-être aussi