Cours Python

 CopyrightFrance.com
Développement Web
  1. Introduction au langage HTML
  2. Structure d'un document HTML
  3. Mise en forme d’un document HTML
  4. Liens hypertexte
  5. Insertion d’images
  6. Les attributs de la balise BODY
  7. Les tableaux HTML
  8. Les listes HTML
  9. Les Frames HTML
  10. Les formulaires HTML
  11. Les caractères spéciaux HTML
  12. Ressources et références HTML
  13. Exercices HTML avec correction
  1. Introduction au langage CSS
  2. Propriétés d'un sélecteur
  3. La propriété Text CSS
  4. La propriété background CSS
  5. La propriété Font CSS
  6. La propriété border CSS
  7. Propriétés margin et padding
  8. Propriétés Height & Width
  9. Class et les ID CSS

Javascript Basique
  1. Introduction au langage Javascript
  2. Variables, fonctions et operateurs Javascript
  3. Les structures de contrôle et les boucles Javascript
  4. Les événements Javascript
  5. Le modèle Objet du Javascript
  6. L'objet array Javascript
Framework JQuery
  1. Introduction au Framework jQuery
  2. Premier pas avec le framework jQuery
  3. Les Sélecteurs jQuery
  1. Introduction au langage PHP
  2. Premier programme php
  3. Variables et Fonctions php
  4. Opérateurs arithmétiques et logiques
  5. Les structures de contrôle en php
  6. Les tableaux en php
  7. Control des formulaires en php
  8. Upload des fichiers en php
  9. Gestion des dossiers et des fichiers en php
  10. Colorisation syntaxique en php
  11. Cookies php
  12. Les variables globales php
  13. Sessions php
  14. Les variables php d’environnement
  15. Les classes et la poo php
  16. La librairie php_gd2 des images
  17. Lecture d’un fichier xml en php
  18. Les expressions régulières en php
  19. Moteurs de template php : smarty et fast temp…
  1. Introduction au Framework PHP Laravel
  • Installation Laravel 8 & premier projet
    1. Langage MySql
    2. Introduction au langage MySql
    3. Installation du Serveur MySql
    4. Manipulation des bases de donnée MySql
    5. Manipulation desTables MySql
    6. Insértion de données MySql
    1. Installation Wordpress
    2. Modification du theme Wordpress
    3. Installation d'un plugin
    4. Gestion des catégories
    5. Gestion des articles
    6. Gestion des menus Wordpress
    7. Gestion des pages
    8. Gestion des Plugins
    9. Gestion des Widgets
    10. Gestion des Médias
    11. Gestion des commentaires
    12. Création formulaire de contact
    13. Outil Importation & exportation
    14. Gestion des extensions
    15. Réglage et paramètres
    1. Introduction à Joomla
    2. Installation Joomla
    3. Architecture de Joomla
    Bases de données
    TICE & Multimédia
    Math Pour Informatiques
    UserOnline
    Utilisateurs/utilisatrices: 6 Bots

    Langage Javascript

    1 – Introduction

    Le langage javascript est un langage orienté objet, en plus il est doté de l’avantage de manipulation d’objets sans instanciation, et par suite vous pouvez manipuler tous ce qui apparaissent dans votre browser : fenêtres corps du document, boutons, zones de texte… comme etant des objets javascript. Nous n’allons pas ici traiter le coté POO du javascript proprement dit mais quelque exemple d’objets fondamentaux. Pour accéder aux propriétés d’un objet on utilise la syntaxe:

    objet.propriété

    2 – Objet Javascript prédéfinit

    2.1 - L'objet window

    Tous les composants d’une page web sont des objets y compris l’objet windows qui est leur parent, l’objet window est parfois appelé l’objet par excellence. Exemple pour écrire un texte on utilise la syntaxe :

    window.document.write(‘bonjour’);

    Propriétés et méthodes de l'objet window

    Propriété ou méthode
    Description
    document
    permet d’accéder à tous les objets
    status
    affiche un message dans la barre d’état
    name
    le nom de la fenêtre actuelle
    window
    fenêtre actuelle
    Home()
    permet d’atteindre la page d’accueil
    Alert()
    affiche un message sur une boite
    Prompt()
    affichage d’une boite qui contrôle la saisi clavier
    Close()
    ferme la fenêtre
    Open()
    ouvre une fenêtre pop-up
    Blur()
    cache la fenêtre
    resizeBy()
    permet de modifier les dimensions de la fenêtre

    Remarque

    En Javascripte, ils existent de nombreux autres  objets  dotés de méthodes et de propriétés accessibles directement sans instanciation, on peut en citer :  String, Math, date, navigator, array...

    Si on veut  à titre d'exemple examiner l'objet String, de nombreuses méthodes sont associées à ce dernier :

    charAt ()   Retourne le caractère à l'index spécifié (position)

    charCodeAt ()   Retourne l'Unicode du caractère à l'index spécifié

    concat ()   Joint deux chaînes ou plus et renvoie une nouvelle chaîne jointe

    endsWith ()   Vérifie si une chaîne se termine par des chaînes / caractères spécifiés

    fromCharCode ()   Convertit les valeurs Unicode en caractères

    includes ()   Vérifie si une chaîne contient la chaîne / les caractères spécifiés

    indexOf ()   Renvoie la position de la première occurrence trouvée d'une valeur spécifiée dans une chaîne

    lastIndexOf ()   Renvoie la position de la dernière occurrence trouvée d'une valeur spécifiée dans une chaîne

    localeCompare ()   Compare deux chaînes dans les paramètres régionaux en cours

    match ()   Recherche une chaîne pour une correspondance avec une expression régulière et renvoie les correspondances

    repeat ()   Retourne une nouvelle chaîne avec un nombre spécifié de copies d'une chaîne existante

    replace ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie une nouvelle chaîne dans laquelle les valeurs spécifiées sont remplacées

    search ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie la position de la correspondance

    slice ()   Extrait une partie d'une chaîne et retourne une nouvelle chaîne

    split ()   Divise une chaîne en un tableau de sous-chaînes

    startsWith ()   Vérifie si une chaîne commence par des caractères spécifiés

    substr ()   Extrait les caractères d'une chaîne, en commençant à une position de départ spécifiée, et à travers le nombre de caractères spécifié

    substring ()   Extrait les caractères d'une chaîne, entre deux index spécifiés

    toLocaleLowerCase ()   Convertit une chaîne en minuscules, en fonction des paramètres régionaux de l'hôte

    toLocaleUpperCase ()   Convertit une chaîne en majuscules, en fonction des paramètres régionaux de l'hôte

    toLowerCase ()   Convertit une chaîne en lettres minuscules

    toString ()   Retourne la valeur d'un objet String

    toUpperCase ()   Convertit une chaîne en majuscules

    trim ()   Supprime les espaces des deux extrémités d'une chaîne

    valueOf ()   Renvoie la valeur primitive d'un objet String

    Nous n'allons pas pouvoir traiter toutes ces méthodes ici, mais amusons nous à faire un petit exemple simple pour la première charAt().Le lecteur curieux peux consulter ces méthodes en détails chacune avec un exemple bien expliqué  ici

    Exemple

    <script type="text/javascript">
    var s = new String("bonjour");
    alert("Le premier caractère de la chaine 'bonjour' est  " + s.charAt(0));
    </script>

    Ce qui affiche au navigateur :

    3 - Prototypes orienté objet

    JavaScript utilise des prototypes où de nombreux autres langages orientés objet utilisent des classes pour l'héritage.  Il est possible de simuler de nombreuses fonctionnalités basées sur des classes avec des prototypes en JavaScript.

    3.1 - Fonctions en tant que constructeurs d'objets

    On peut créer des objets dotés de paramètres et propriétés en déclarant de simples fonctions Javascript.

    Exemple

    <script type="text/javascript">
    function mobile(marque,system){
    this.marque=marque;
    this.system=system;
    }
    </script>

    Cet exemple permet de créer un objet nommé : mobile doté des deux paramètres : marque et system. Si on veut par exemple faire une instanciation pour créer un objet téléphone de marque  : Galaxy  dont le système est Android, il suffit d'ajouter le code :

    var mymobile=new mobile("Galaxy","Android");
    //affichage des résultats
    alert("Mon mobile est  " + mymobile.marque + " Son system est  " + mymobile.system);

    3.2 - Les classes  Javascript

    Javascript  est doté de l'instruction class qui permet à l'utilisateur de créer ses propres classes, de faire l'instanciation pour créer des objets...

    Syntax :

    class nom_de_la_classe {
      constructor(paramètres) {
      }
    }

    Exemple

    <script type="text/javascript">
    class Rectangle {
      constructor(hauteur, largeur) {
        this.hauteur = hauteur;
        this.largeur = largeur;
      }
    }
    </script>

    Cet exemple permet de construire une classe nommée rectangle dotée d'un constructeur ayant deux paramètres hauteur et largeur. Pour faire une instanciation sur cette classe et créer un objet rectangle il suffit d'ajouter le code :

    const R= new Rectangle(20, 12);
    //affichage des résultats
    alert("la hauteur du rectangle est : "+R.hauteur + " La largeur du rectangle est : "+ R.largeur);

    Ce qui affiche après exécution :

    Remarque

    On peut aussi ajouter d'autres méthodes à la classes, par exemple une méthode qui calcul la surface, une autre qui calcul le périmètre...

    <script type="text/javascript">
    
    class Rectangle {
      constructor(hauteur, largeur) {
        this.hauteur = hauteur;
        this.largeur = largeur;
      }
      surface(){
      return this.hauteur*this.largeur;
      }
      
      périmètre(){
      return 2*(this.hauteur + this.largeur);
    }
    }
    const R= new Rectangle(8, 6);
    //affichage des résultats
    alert("la surface du rectangle est : "+R.surface() + " Le périmètre du rectangle est : "+ R.périmètre());
    </script>

     

    Younes Derfoufi
    CRMEF OUJDA

    1 - La structure conditionnelle If

    Les structures conditionnelles permettent l'exécution d'un groupe d'instructions lorsqu'une condition est réalisée. La plus répandu est la structure If , la syntaxe est la suivante :

     if (condition){
         Bloc d'instructions
        }
         else{
         Bloc d'instructions
         } 

    Exemple

    Nous allons créer maintenant un exemple à l'aide de la fonction prompt() ( rappelons qu'il   s'agit  d'une méthode qui invite l'internaute  à saisir une donnée à l'aide du clavier, une fois la donnée saisie elle sera récupéré dans une variable javascript )

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%20%20%20%20var%20age%3Dprompt(%22Tapez%20votre%20age%22)%20%3B%0A%20%20%20%20if(age%20%3C%2018)%7B%0A%20%20%20%20document.write(%22Vous%20%C3%AAtes%20mineur%22)%20%3B%0A%09%7D%0A%20%20%20%20else%20%7B%0A%20%20%20%20document.write(%22Vous%20%C3%AAtes%20majeur%22)%20%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

    Si vous exécutez ce code vous allez voir apparaitre une fenêtre comme celle ci :

    C'est une fenêtre contenant un champ de texte et vous invitant à tapez votre age, votre age sera récupéré dans une variable javascript et analysé : si votre age est < 18 ans elle vous affiche le message "vous êtes mineur" dans le cas contraire, elle vous affiche le message : "vous êtes majeur"

    Si vous tapez un age supérieur à 18 ans vous allez voir apparaitre le message suivant :

    javascript-prompt

     

    2 - Les boucles : for, while et do while.

    La boucle for

    Les boucles permettent de répéter une séquence du programme un nombre spécifique de fois.
    La boucle for est constituée de trois paramètres :
    - La valeur initiale du compteur
    - La condition d'arrêt du passage dans la boucle
    - La valeur d'incrémentation du compteur

    Syntax :

    for (compteur=début ;  compteur < =fin ;  compteur ++){
    Liste d'instructions ;
    }

     

    Exemple :

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0Afor%20(i%3D1%3B%20i%3C%3D10%3B%20i%2B%2B)%0A%7B%0Adocument.write(%22Bienvenue%20!%22%20%2B%20%20%22%0A%22)%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

    (Cet exemple permet d'afficher le message bienvenue 10 fois)

    javascript-boucle-for
    Exemple ( Calcul de Factorielle n! )

    Exemple ( algorithme Javascript permettant de calculer factorielle n! )

    1ère partie ( Calcul de factorielle d'un entier donné exemple n = 5 )

    <html>
    <head>
    
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%20%20%20%20function%20facto()%7B%0A%20%20%20%20var%20k%3D1%3B%0A%20%20%20%20for(i%3D1%3Bi%3C%3D5%3Bi%2B%2B)%7B%0A%20%20%20%20k%3Dk*i%3B%0A%20%20%20%20%7D%0A%20%20%20%20%20alert('Factorielle%20de%205%20est%20'%20%2B%20k)%3B%0A%20%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    </head>
    <body onLoad="facto()">   
    </body>
    </html>

    2ème partie ( Calcul de factorielle n! pour un entier donné saisi par l'utilisateur )

    Il suffit d'introduire n à l'aide de la fonction prompt

    var n=prompt("Tapez votre nombre n");

    et d'utiliser l'algorithme précédent

    <html>
    <head>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%20%20%20%20function%20facto()%7B%0A%20%20%20%20var%20n%3Dprompt(%22Tapez%20votre%20nombre%20n%22)%3B%0A%20%20%20%20var%20k%3D1%3B%0A%20%20%20%20for(i%3D1%3Bi%3C%3Dn%3Bi%2B%2B)%7B%0A%20%20%20%20k%3Dk*i%3B%0A%20%20%20%20%7D%0A%20%20%20%20%20alert('Factorielle%20de%20'%20%2B%20n%20%2B%20'%20est%20'%20%2B%20k)%3B%0A%20%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    </head>
    <body onLoad="facto()">
    </body>
    </html>

    On peut introduire la valeur de n à l'aide d'un bouton de commande et afficher les valeur sur champ de texte

     <html>
    <head>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%20%20%20%20%3C!--%0A%20%20%20%20function%20ff()%7B%0A%20%20%20%20var%20n%3Dprompt(%22Tapez%20votre%20nombre%20n%22)%3B%0A%20%20%20%20var%20k%3D1%3B%0A%20%20%20%20for(i%3D1%3Bi%3C%3Dn%3Bi%2B%2B)%7B%20k%3Dk*i%3B%20%7D%20form1.t2.value%3Dk%3B%20%7D%20--%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        
        </head>
        <body>
        </p>
    <form name="form1">
        <input type="button" name="bouton1" value="Cliquez ici pour Saisir votre entier n " onclick="ff()">
        voici factorielle de n <input type="text" name="t2"> 
    </form>
    <p>
    </body>
    </html>

    La boucle while

    La boucle while permet de répeter une plusieurs instruction autant qu'une condition soit réalisée

    Syntaxe  :

    while ( condition booléenne )
    { Instructions à itérer }

    Exemple ( quelle est la plus grande valeur de l'entier i pour lequel   2*i-1 soit inférieur ou égale à 27 )

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%2F%2F%20pb%20%3F%20quelle%20est%20la%20plus%20grande%20valeur%20de%20l'entier%20i%20pour%20lequel%20%0A%2F%2F%202*i-1%20soit%20inf%C3%A9rieur%20ou%20%C3%A9gale%20%C3%A0%2027%20%0A%20%20%20%20var%20i%3D0%3B%0A%09var%20j%3D0%3B%0A%20%20%20%20while%20(j%20%3C%3D%2027)%7B%0A%20%20%20%20i%3Di%2B1%3B%0A%09j%3D2*i-1%3B%0A%20%20%20%20%7D%0Aalert(%22le%20nombre%20cherch%C3%A9%20est%20%3A%20%22%20%2B%20(i-1))%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

    Exemple ( testez si un nombre est premier )

      <html>
        <head>
        
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%3E%0A%20%20%20%20%3C!--%20function%20test()%7B%20var%20n%3Dprompt(%22Tapez%20le%20nombre%20n%20%C3%A0%20tester%22)%3B%20var%20i%3D2%3B%20while(n%25i!%3D0)%7B%20i%3Di%2B1%3B%20%7D%20if(n%3D%3Di)%7B%20alert(%22Le%20nombre%20%22%20%2B%20n%20%2B%20%22%20que%20vous%20avez%20choisi%20est%20premier%22)%3B%20%7D%20else%7B%20alert(%22Le%20nombre%20%22%20%2B%20n%20%2B%20%22%20que%20vous%20avez%20choisi%20n'est%20pas%20premier%20car%20il%20est%20divisible%20par%20%22%20%2B%20i)%3B%20%7D%20%7D%20--%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        
        </head>
        <body onload="test()">
        </body>

    1 - Les variables Javascript

    1 - 1 Définition :

    Une variable Javascript est  un conteneur, c'est à dire elle est introduite pour  représenter ou schématiser une zone mémoire ou autrement dit  un lieu de stockage d'informations.

    1 - 2 Types de variable Javascript :

    Javascript comprend 4 types de variables :

    - nombre : entier ou à virgule ( comme 5     7   2.35... )

    - chaîne de caractères (string ) ( comme  "voiture" , "maison", "arbre" ...)

    - Booléens ( valeur logique comme true ou false )

    Pour déclarer une variable il suffit de mettre l'instruction var suivie du nom de la variable

    var x=5;
    //on vient de définir une variable x dont la valeur est 5

    Javascript est un langage à typage dynamique, ce qui veut dire  qu'on est pas obligé à déclarer le type de la variable. prenons l'exemple suivant pour bien éclaircir le truc :

    var x=5;
    //le type de la variable x est maintenant numérique
    x="voiture";
    //le langage convertis automatiquement le type de la variable numérique au type string  

    1 -3 Concaténation de variables

    Le terme concaténation signifie : juxtaposition ou  enchaînement, et ici en javascript le terme veut dire mettre une variable juste à coté de l'autre, pour concaténer deux variables on utilise le symbol  "+" :

    Exemple :

    var x="auto";
    var y="bus";
    var z=x+y;
    //la variable z prend la valeur "autobus"
    <script language="javascript">
    var x=5;
    window.document.write("la valeur de x est " + x);
    //le symbol + ici joue le rôle de la concaténation
    </script>

    Ce qui va afficher après exécution : la valeur de x est : 5 ( c'est une concaténation entre une variable de type numérique  x=5  et une variable de type string  "la valeur de x est : " )

    1 - 4 Récupération d'une saisie clavier dans une variable Javascript

    On a besoin parfois de demander à l'internaute de saisir à l'aide du clavier des données et de les récupérer sous forme de variable javascript, pour cela le langage javascript est doté d'une méthode nommée prompt() 

    Exemple :

    <script language="javascript">
        var age=prompt("Tapez votre age") ;
        document.write("Votre age est " + age + " ans ") ;
        </script>

    Si vous exécutez ce code vous allez voir apparaitre une fenêtre comme celle ci :

    Amusez vous maintenant à tapez votre age sur le champ de saisie de cette fenêtre tapez par exemple 30, et vous allez voir apparaitre la fenêtre suivante :

    2 - Les opérateurs Javascript

    Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ...On distingue plusieurs types d'opérateurs: les opérateurs de calcul les opérateurs d'assignation, les opérateurs de comparaison, les opérateurs logiques,…

    2 - 1 Les opérateurs de calcul

    Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable
    + opérateur d'addition Ajoute deux valeurs
    - opérateur de soustraction Soustrait deux valeurs
    * opérateur de multiplication Multiplie deux valeurs
    / opérateur de division Divise deux valeurs
    = opérateur d'affectation Affecte une valeur à une variable x=3 Met la valeur 3 dans la variable x

    2 - 2 Les opérateurs d'assignation

    Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans une variable et stocker le résultat dans la variable. Par exemple: x=x+2

    Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme suivante: x+=2. C'est à dire si x= 3 elle devient après l'opération 5.

    += additionne deux valeurs et stocke le résultat dans la variable (à gauche)
    -= soustrait deux valeurs et stocke le résultat dans la variable
    *= multiplie deux valeurs et stocke le résultat dans la variable
    /= divise deux valeurs et stocke le résultat dans la variable

    3 - Les fonctions Javascript

    Le langage Javascript est doté d'un grand nombre de fonctions, mais en essayant de répondre aux exigences et besoins de l'utilisateur ce langage nous offre la possibilité de construire ses propres fonction. La syntaxe est la suivante :

        function nom_de_la_fonction(arguments) {
    ... code des instructions ...
    }

    Le code d'une fonction peut être introduit dans une page HTML de deux façons différentes : ou bien :

    1 -  entre les balises Head  et /Head  dans ce cas elle ne sera pas exécuté directement au chargement de la page pour qu'il en soit ainsi il faut donner un ordre d'exécution sur la balise Body  à l'aid de l'instruction Body onload

    2 - directement entre les balises Body et /Body   et il sera directement exécuté avec le chargement de la page

    En utilisant la première méthode, voici un exemple d'une fonction affichant ule message :  bienvenue au CRMEF OUJDA

    <html>
        <head>
        <script language="Javascript">
        function bienvenue() {
        alert("Bienvenue au CRMEF Oujda");
        }
        </script>
        </head>
        <body onLoad="bienvenue()">
        </body>
        </html>

    Voici un autre exemple de fonction permettant de calculer la somme de deux nombres :

    <script language="javascript">
    function somme(x,y){
    return x+y;
    }
    var z=somme(5,4);
    document.write("La somme de 5 et de 4 est " + z);
    </script>

    Ce qui affiche après exécution :  "La somme de 5 et de 4 est 9"

    4 - Les événements Javascript

    On appelle événement toute action comme : click de la sourie,  passage de la sourie, mettre le curseur dans une zone de saisie …  Javascript peut associer des méthodes ou procédures à ces derniers à l'aide de la syntaxe :

        onEvenement="Action_Javascript_ou_Fonction();"

    4 - 1 Liste des événements

    Click (onClick)
    Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement

    Load (onLoad)
    Se produit lorsque le navigateur de l'utilisateur charge la page en cours

    Unload (onUnload)  
    Se produit lorsque le navigateur de l'utilisateur quitte la page en cours

    MouseOver (onMouseOver)
    Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément

    MouseOut (onMouseOut)
    Se produit lorsque le curseur de la souris quitte un élément

    Focus (onFocus)
    Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que cet élément est sélectionné comme étant l'élément actif 

    Blur (onBlur)
    Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif

    Change (onChange)
    Se produit lorsque l'utilisateur modifie le contenu d'un champ de données

    Select (onSelect)
    Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea"

    Submit (onSubmit)
    Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire)

    Exemple ( événement onclick )

    Nous allons créer une fonction  exemple() dont la fonction est l'affichage du message " Vous avez cliqué sur le bouton" et lui associer un bouton lié à l’événement onclick 

    <html>
        <head>
        <script language="Javascript">
        function exemple() {
        return alert("Vous avez cliqué sur le bouton");
        }
        </script>
        </head>
        <body>
    	<input type=button value="Cliquer ici" onclick="exemple();">
        </body>
        </html>

    Et maintenant en cliquant sur aperçu on obtient une fenêtre qui contient un bouton :

    onclick-javascript

    En cliquant sur ce bouton il se produit l’événement exemple() qui  est une fonction permettant d'afficher le message " Vous avez cliqué sur le bouton" :

    executer-evenement-javascript

    J'espère que vous avez bien compris les événement Javascript, si vous avez des questions et que vous avez besoin d'un soutien merci de le poster sur notre  page  communauté de Google plus
     

    1 - Introduction au langage JavaScript

    Développé en 1995 par Netscape ce langage constitue une extension au langage HTML, il s’agit d’un langage de programmation qui permet d’apporter des améliorations au langage HTML ( texte animé, texte défilant, image animée … Javascript est un langage qui fonctionne du coté client, contrairement aux autres langages php,asp, servelet… qui fonctionne du coté serveur. Néanmoins sont apprentissage est important du moment que asp (Active Server Pages ) se base sur Javascript et VBscript, et qu’actuellement il fait la base de l’Ajax

    JavaScript est un langage de programmation informatique interprété conformément au language  ECMAScript (ensemble de normes standardisées par l’organisation Ecma International  concernant les langages de programmation de type script). Le javascript peut être crée et exécuter par des logiciels appelé moteurs javascript. Ces derniers sont généralement intégré aux navigateurs Web.

    Javascript dérive -t-il du langage Java ? La réponse est non ! Javascript n’a aucun lien avec Java !

    Javascript est crée par la société Netscape en 1995 tandis que Java a été crée par Sun Microsystems au débuts des années 1990 et racheté par Oracle en 2010.

    La puissance du Javascript réside dans le fait que :

    • JavaScript est orienté objet
    • JavaScript fait la base de l’AJAX
    • JavaScript intègre des centaines de Framework

    2 - Les outils necessaires :

    Le développement en Javascript ne demande pas assez d'outils, rien qu'un éditeur de code et un navigateur

    - Navigateur : Vous pouvez utiliser n'importe quel navigateur compatible avec HTML 5 Je vous suggère Mozilla FireFox qui est le meilleur.

    - Editeur de code Javascript : Les éditeurs sont nombreux, il y en a les payants et les gratuits, parmis les gratuits il y  en a Notepad++

    Notepad++

    3 - Implantation du code Javascript au sein du langage HTML

    L'implantation du Javascript au sein du langage HTML se fais grâce aux balises :
    et par suite une page Javascript sera de la forme :

    <script language="javascript">
    Code JavaScript ici
    </script>

    ou encore :

    <script type="text/javascript">
    Code JavaScript ici
    </script>

     

        <script language ="javascript"> 
        Votre code javascript ici 
         </script>

    NB  Pour résoudre les problèmes d'affichage causé par certains browsers qui ignorent les balises javascript et affichent le code comme étant un simple texte on introduit les balises du commentaire HTML finalement après implantation du code javascript une page javascript aura la forme :

        <html>
        <head>
        <title>page Javascript</title>
        </head>
        <body>
        <script type="text/javascript"> 
     
        Votre code Javascript ici
      
         </script>
        </body>
        </html>

      4 - Premier pas en Javascript (à l'aide de l'instruction alert )

    Voici un exemple qui affiche la phrase " Bienvenue au CRMEF OUJDA "

     <html>
        <head>
        <title>page Javascript</title>
        </head>
        <body>
        <script language="javascript"> 
        alert(" Bienvenue au CRMEF OUJDA") ;
        </script>
        </body>
        </html>

    Visualisation du code javascript

    Pour visualiser votre code Javascript, Il suffit de le tapez correctement sur votre éditeur Notepad++ et de choisir depuis le menu  langage la rubrique HTML :

    language-html

    Cliquez ensuite sur le menu Exécution et puis sur le sous menu Launch in FireFox :

    execution-launch-in-firefox

    Et maintenant si vous avez tapez correctement votre code javascript, vous allez voir apparaitre une fenêtre vous affichant un message d'alert  :

    execution-javascript-launch-in-firefox

    5 - Les commentaires

    Tout ce qui est écrit entre le // et la fin de la ligne sera ignoré. Toute fois si vous voulez inclure des commentaires sur plusieurs lignes avec le code utilisez les délimiteurs /* et */
    /* commentaire sur
    plusieurs lignes */