Designed by Vince El Roubio !
56 en ligne
  Forum | Actu | Glossaire | Codes | Tips | Liens | Livres | Annuaire
 

 Recherche





   

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 (116 486 hits)
Didier Téléchargez gratuitement et légalement des logiciels Microsoft ! Si, si ;)
  • Visual Studio 2010
  • Office 2010
  • Expression Studio 3
  • SQL Server 2008
  • et d'autres...
Au fil des news  
PHP - Drupagora : 1ère edition
Utiliser Reporting Services pour des NewsLetter - SQL Server Reporting Services et les NewsLetters
Le moteur de rapport inclus dans Microsoft SQL Server permet de créer de nombreux rapports ...
Changer la page d'erreur 401 SharePoint - La page d'erreur d'authentification SharePoint
Avec l'authentification classique des sites SharePoint, l'erreur d'authentification est gérée par ...
PHP - Graphique de l'angle du soleil en fonction du lieu
PHP5 - Graphique de l'angle du soleil en fonction du lieu
Adobe - Disponibilité d'Adobe Creative Suite 5.5
Les Thèmes dans SharePoint 2010 - Gérer les thèmes dans SharePoint 2010
SharePoint 2010 apporte de nombreuses modifications dont certaines dans le principe des thèmes.
JavaScript - fonction qui affiche l'heure à travers javascript
Installer SharePoint Foundation 2010 sur Windows 7 - Installer SP Foundation 2010 sur Windows Seven
Lorsque l'on souhaite développer dans le monde SharePoint, il existe plusieurs solutions. La ...
SharePoint et SQL Server 2008 R2 Report Server - Comment accéder à SharePoint depuis SSRS 2008 R2
Depuis la première version, la solution de rapport proposée par Microsoft "SQL Server Reporting ...
JS - Envoi d'un formulaire après chargement d'une image
Divers - Bannir une ip dans le global asax
Dreamweaver CS5 - Nouvelle version Dreamweaver CS5
Déjà plus de 6 mois que le produit est sorti, il fallait bien que je vous en parle un peu. Je vous ...
SharePoint Output Caching dans un site Intranet - Comment utiliser le cache dans un site Publishing
Afin de permettre l'amélioration des performances de sa ferme MOSS utilisée pour le site portail ...
Adobe - Adobe lance le Musée Adobe des Médias Numériques
Adobe - Adobe lance HTML5 Pack pour Illustrator CS5
PHP - Forum PHP 2010 : Le programme
Magazines - Le numéro 133 de programmez est disponible
Adobe - Adobe lance des applications Photoshop Express....
PHP - Détermination de l'intersection entre 2 segments
Magazines - Le N°132 de Programmez est disponible
Les alertes dans SharePoint 2007 - Comment SharePoint 2007 gère les User Alerts
Une des fonctionnalités de base de SharePoint, aussi bien dans Windows SharePoint Services (WSS) ...
Adobe - Photoshop.com Mobile pour Android 1.2
Adobe - Adobe dévoile une technologie de lecture.......
PHP - Experts PHP : participez au Forum PHP 2010 !
PHP - Fobec.com - Code source PHP & javascript
Foliotage alphabétique - Lister sur la première lettre d'un champ
Pour faire suite à l'article de JPierre sur la pagination alphabétique, voici, en ASP et en PHP, ...
Dreamweaver CS4 + Php + Mysql - Pagination alphabétique
Je vous propose la création d'une barre de navigation ou pagination alphabétique pour filtrer les ...
Adobe - HTML5 dans Dreamweaver CS5
VBScript - Déterminer si un chemin est absolu ou relatif
VBScript - Lire/écrire un fichier texte
Magazines - Le N°130 de Programmez est disponible
Hebergement - Hébergement à prix libre
Adobe - Adobe Creative Suite 5
PHP - Calcul de la date de Pâques
Magazines - Le N°128 de Programmez est disponible
Magazines - Le N°127 de Programmez est disponible
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...
Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1
JavaScript - Ajouter une page dans vos favorites
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
v3b © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 ASP-magazine MVP TechNet Groupes Utilisateurs Microsoft DotNet Project