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: 12 Guests, 3 Bots

    1. Les événements Javascript : syntax

     

    Le click de la sourie, le passage de la sourie … sont dit événements. Javascript peut associer des méthodes ou procédures à ces derniers à l'aide de la syntaxe :

    onEvenement="Action_Javascript_ou_Fonction();"

    Grâce au Javascript de nombreuses opérations sont susceptible d'être déclenchés dès que le visiteur effectue une opération sur la page à titre d'exemple :
    - En cliquant sur un lien ou un bouton, un événement onClick se déclenche
    - En passant la sourie sur un texte, un événement onMouseover se produit
    - En modifiant le contenu d'un champ de texte, un événement onChange se déclenche
    ...

    2. Liste des événement Javascript

     

    Evénement Javascript  Effet produit
    onClick Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement
    onLoad Se produit lorsque le navigateur de l'utilisateur charge la page en cours
    onUnload Se produit lorsque le navigateur de l'utilisateur quitte la page en cours
    onMouseOver Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément
    onMouseOut Se produit lorsque le curseur de la souris quitte un élément
    onMouseDown quand le bouton de la sourie est appuyé
    onMouseMove quand le curseur bouge
    onMouseUp quand le bouton de la sourie est relâché
    onFocus Se produit lorsque l'utilisateur donne le focus à un élément, c.a.d  élément est sélectionné comme étant actif
    onBlur Se produit lorsque l'élément perd le focus, c.a.d élément non sélectionné ( désactivé )
    onChange  Se produit lorsque l'utilisateur modifie le contenu d'un champ de données
    onSelect  Se produit lorsque l'utilisateur sélectionne un texte dans un champ de type "text" ou "textarea" ou un objet
    onSubmit  Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire
    onabort lorsque l'utilisateur a stoppé le chargement de l'image
    ondlclick quand on fait un double clique
    ondragdrop quand on déplace un objet dans une fenêtre
    onerror lorsqu'il se produit une erreur de script
    onkeydown quand une touche du clavier est enfoncée
    onkeypress quand on appuie sur une touche
    onkeyup quand on lâche une touche du clavier
    onMove quand on déplace la fenêtre
    onReset   quand on réinitialise
    onResize quand on redimensionne

     

     3. Exemples d'événement Javascript

     

    Exemple 1 ( l'événement onLoad )

    <body onload="alert('Bienvenue sur le site');">
    
    </body>

    Cet exemple affiche le message "Bienvenue sur le site" dès le chargement de la page :

    onload-javascript

     

    Exemple 2 ( l'événement onBlur )

    
    
    </p>
    <form><input size=40 type="text" value="Cliquez ici pour voir l'événement onblur" onblur="alert('vous avez quitté le champ de texte')"/>
    </form>
    <p>

    Testez vous même ce code

    Vous verrez apparaitre la fenêtre suivante :

    onblur-javscript

     

    Exemple 3  ( les événements onMousOut et onMousOver)

    <a href="#" onmouseOver="alert('vous avez testé onmouseover')" onmouseOut="alert('Vous venez de tester onMouseOut')">Evénement onMousOver</a>

    Quand vous faite passer la sourie au dessus du lien vous verrez apparaitre la fenêtre suivante :

    onmouseover-javascript

    Et quand vous quittez le lien vous verrez apparaitre la fenêtre suivante :

    onmousout-javascript

     

    Exemple 4 ( changement d'image avec onMousOver et onMouseOut )

    <html>
    <head>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22Javascript%22%3E%0Afunction%20lightUp()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22rouge.jpg%22%0A%7D%0Afunction%20dimDown()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22blanche.jpg%22%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>" />
    </head>
    <body>
    <a href="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
    <img src="blanche.jpg" name="voiture" width=250 height=250 border=0> </a>
    </body>
    </html>

    Enregistrez ce fichier sur un dossier de votre machine, avec deux images :  rouge.jpg et blanche.jpg que vous pouvez télécharger via google images. Vous pouvez aussi télécharger l'application via  ce lien

    Dans cet exemple quand vous faite passer la sourie sur l'image elle change, c'est l'événement onmouseOver="lightUp();" qui se produit et fais afficher l'image rouge.jpg qui est programmée dans la fonction lightUp() :

    function lightUp() {
    document.images["voiture"].src="rouge.jpg"
    }

    Et quand vous quittez l'image elle reprend sa forme c.a.d  l'image blanche.jpg s'affiche qui est programmée dans la fonction dimDown() :

    function dimDown() {document.images["voiture"].src="blanche.jpg"
    }

     

    4. Tutoriel Vidéo

     

     

    Laisser un commentaire