Designed by Gaetan !
3 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche


Acheter - Vendre
neuf et occasion

pda, jeux vidéo, graveur, cd vierges, dvd vierges, matériel informatique, pc, ordinateur portable, logiciel, antivirus, annonces gratuites

 NewsLetter





   

DHTML (1/3)

Dynamisez vos pages avec JavaScript





Didier
Chaque balise HTML est en fait un objet et, à ce titre, elle a des propriétés (properties) et reçoit des évènements (events)... Le Dynamic HTML tourne autour de l'interception astucieuse de ces events pour déterminer un contexte puis, en fonction de celui-ci, modifier les properties ou déclencher une action, via scripts...

Télécharger tout le tutorial JavaScript/VBScript

Avertissement : Netscape Navigator supporte TRES mal ce genre de choses... et ça n'a pas l'air de vouloir s'arranger avec la version 6... Alors tout ce qui est sur cette page est pour le fun mais "à consommer avec modération" !

EventsDescriptionExemples
onclick Click souris Cliquez dans cette case !
onmouseover
onmouseout
Le pointeur arrive
ou repart
Cliquez donc sur ce lien !...
onfocus
onblur
L'objet prend "la main"
ou la perd
onchange Le contenu change

Il y en a, bien sûr, beaucoup d'autres !...

Les différents évènements et propriétés sont très bien décrits dans la doc HMTLib (en anglais) téléchargeable sur www.arachne.net/htmlib. Quelques exemples classiques suivent...


<BODY>

Cette balise peut recevoir plusieurs évènements dont onLoad (quand la page est chargée), onUnload (quand on quitte la page), onBlur quand la page va passer en arrière-plan, onFocus quand elle revient au 1er plan... alors on peut, par exemple :
  • Empêcher qu'un popup ne passe en arrière-plan : Tester ?

    <BODY onBlur=this.focus()>
    Chaque fois que l'on clique sur la fenêtre en arrière-plan, le popup est réactivé (focus())

  • Dire bonjour en arrivant et au-revoir en partant :)) : Tester ?

    <BODY onLoad="javascript:alert('Bonjour !')" onUnLoad="javascript:alert('Au revoir !')">

  • Mais aussi rechercher des paramètres (pseudo,...) : Tester ?

    <HTML><HEAD>
       <script language="JavaScript"><!--
          function getLogin() {
             var login=""
             while(login=="") {
                login = prompt("Entrez votre prénom","")
                if(login==null) {
                   if(confirm("Timide ?")) { alert("Tant pis !"); this.close(); return }
                   login=""
                   }
                }
             document.write("Bonjour "+login+" !")
             }
       //--></script>

    </HEAD><BODY onBlur=this.focus() onLoad=getLogin()>
    </BODY></HTML>

  • Au fait tout le monde a compris comment ouvrir un popUp centré ? Tester le script
environnement.html 
<script language="JavaScript"><!--

   function centrePop(url,largeur,hauteur) { // centre le PopUp sur l'écran
      var gauche = (screen.width - largeur)/2
      var haut =  (screen.height - hauteur)/2
      return window.open(url,"","width="+largeur+",height="+hauteur+",left="+gauche+",top="+haut)
      }
     
   function infos() {
      var adr = centrePop("",350,230)
      adr.document.write("<title>Infos</title><center><b>Vos paramètres par JavaScript</b></center><br>")
      adr.document.write("Résolution : "+screen.width+"x"+screen.height+"<br>")
      adr.document.write("Couleurs : "+screen.colorDepth+" bits<br>")
      adr.document.write("Navigateur : "+navigator.appName+"<br>")
      adr.document.write("Version : "+navigator.appVersion+"<br>")
      adr.document.write("Référent : "+document.referrer+"<br>")
      adr.document.write("<center><br><A href='javascript:window.close()'>Fermer le PopUp</A>")
      }

--></script>


<A href="javascript:infos()">Tester le script</A>
C'est donc bien dynamique : les affichages seront différents selon les utilisateurs !!!


Didier le 30/05/2003 (92 528 hits)
Didier Téléchargez gratuitement !!!
7 logiciels illimités dont Visual Studio Pro et SQL Server 2005 !
SQL Server 2008 ß !
[gratuit] 11-12-13 février
les MS TechDays 2008 !!!
Au fil des news  
Dreamweaver CS3 + XML + Ajax - Création d'une région détail
Dans cet article, je vais vous montrer comment utiliser la technique région détail, avec Spry
PHP - joli arborescence dynamique
Magazines - Le N°104 de Programmez est disponible
PHP - PhPBB 3.0.0 !!!
[MAJ] Université de Sherbrooke - située dans un beau coin du Québec, l'Estrie...
- Ajout du programme d'imagerie et de médias numérique - Le département de mathématiques et ...
Magazines - Le N°103 de Programmez est disponible
PHP - Calcul jours ouvrables entre dates, gestion fériés
PHP - WampServer 2.0, la nouvelle version de WAMP5 !
SharePoint 2007 et Workflows Designer - Part 2 - Modifions un workflow dans SharePoint 2007
Dans la première partie, nous avons vu comment créer un WorkFlow dans MOSS avec SharePoint ...
Modifier le ruban de Word 2007 avec Open XML -
Open XML est un format de document bureautique flexible : structure basée sur l'Open Packaging ...
La corbeille de SharePoint 2007 - Fonctionnement de la corbeille de SharePoint 2007
Une des nouveautés de SharePoint 2007 est la mise en place de la corbeille pour chaque site. Il est ...
SharePoint 2007 et Workflows Designer - Part 1 - Créer un workflow simple dans SharePoint 2007
L'automatisation de Workflows, ou Flux de travail, résulte d'une volonté d'amélioration de ...
CSS - Dégradé de couleur
Magazines - Le N°102 de Programmez est disponible
Dreamweaver CS3 + Mysql - Formulaire de redirection
Suite au coup de pouce de DB77, je vous propose ce petit script pour améliorer vos pages Internet. ...
[MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
Mis à jour le 26/10/2007
Magazines - Le Hors-Série .Net de Programmez est disponible
LINQ et vous - Part 2 - Le .NET Framework 3.5 décortiqué !
Ce nouvel article fait suite à mon premier article de cette nouvelle collection « LINQ et vous ». ...
Présentation des KPI dans SharePoint - Présentation des KPI dans SharePoint 2007
Nous verrons au travers de cet article une présentation détaillée de ce qu'est un KPI et dans quel ...
LINQ et vous - Part 1 - Evolutions du .NET Framework - Visual Studio 2008
Voilà plus d'un an que je n'ai plus posté d'articles sur ma communauté préférée. Il était temps ...
Agenda - 21-22 novembre : Le Forum PHP 2007 !
Microsoft - Essayez gratuitement MS Expression Studio !!!
Les Utilisateurs dans SharePoint - La gestion des utilisateurs dans SharePoint
SharePoint dont le coeur est l'outil collaboratif, Windows SharePoint Services. Chaque utilisateur ...
Magazines - Le N°101 de Programmez est disponible
Hebergement - hébergement de forum gratuit - créer un forum.
Revue de presse - Nouvelle mise à jour chez Adobe
PHP - import csv vers bdd avec verification
PHP5 - Csv2array
PHP - Framework PHP5 - PoppyFramework
Le Moteur de Recherche de MOSS 2007 - Installer le moteur de recherche de MOSS 2007
Nous avons vu dans un précédent article comment mettre en place le moteur de recherche dans un site ...
PHP5 - incrementation alphanumerique
Magazines - Le N°100 de Programmez est disponible
Agenda - Adobe vous donne rendez-vous du 4 au 9 septembre..
ABAP leçon 1 : Les variables - Auteur : Jerome Fortias
je me devais de continuer mon travail de vulgarisation à SAP. En parallèle à mon site destiné aux ...
Agenda - Nov 2007 : Les TechEd Developers à Barcelone !
Microsoft - Vista SP1 et XP SP3 pour bientôt !
Le Moteur de Recherche de WSS V3 - Installer le moteur de recherche de WSS V3
Parmi les évolutions de Windows SharePoint Services V3, on trouve le moteur de recherche. Nous ...
PHP - array2xml convertie un array en xml
Revue de presse - Flash Player 9 Update beta
PHP5 - class Timer - ajouter/enlever du temp au time unix
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3 © Didier 2003   
 
 The Inquirer FR Codes Sources Groupes Utilisateurs Microsoft El Roubio Wygwam ASP-magazine DotNet Project CodePPC MVP TechNet