Utilisation de JavaScript, DOM, SPRY et conseils de code
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Ecrivez du code plus rapidement avec l’assistance du conseil de code pour JavaScript, DOM (Document Object Model), et Spry.
This content requires Flash
Conditions requises
Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:
Adobe Dreamweaver CS4
Fichiers d'exemple
lrvid4048_dw_fr.zip (ZIP, 3MB)
Connaissances à avoir
Niveau intermédiaire de connaissance en JavaScript, HTML, et Spry
Utilisation de JavaScript, DOM, SPRY et conseils de code
Adobe® Dreamweaver® CS4 a augmenté l’assistance par conseils de code pour JavaScript, DOM, et bibliothèques Spry. Les conseils de code sont disponibles à la fois dans des documents JavaScript, et dans des blocs de code au sein de votre fichier HTML. La nouvelle fonctionnalité de conseil de code est disponible dans du code JavaScript pur, mais aussi pour n’importe quelle fonction, paramètres, classes, propriétés de classe, méthodes et variables personnalisées que vous pourriez utiliser. Au fur et à mesure que vous travaillez, Dreamweaver inspecte à la fois votre code, mais aussi tous les fichiers JavaScript externes référencés dans votre document. Cette possibilité vous donne une aide d’affichage en temps réel des conseils de code pour n’importe quelles bibliothèques JavaScript externes telles que Yahoo! User Interface (YUI), jQuery, et des bibliothèques de Prototype. Dans Dreamweaver, le conseil de code est dynamique, de sorte que des modifications faites dans une librairie externe sont reflétées dans votre code.
Dans ce tutoriel, vous apprendrez à initialiser un widget Calendrier Yahoo et le relier à un ensemble de données Spry de votre page Web.
Initialisation d’un widget YUI calendar
Ecrire le code pour un YUI calendar est efficace et rationnel dans Dreamweaver CS4. Pour initialiser un widget YUI calendar :
Remarque : Le widget YUI calendar utilisé dans ce tutoriel est disponible en téléchargement sur le site Internet d’Adobe. Pour accéder au YUI calendar, cliquez sur le bouton Extension depuis la barre d’outils standard de Dreamweaver, puis choisissez Rechercher des widget Web.
- Ouvrez le fichier d’exercice calendar_start.html.
- Cliquez sur l’icône Afficher le mode code dans la barre d’outils du document.
- Descendez vers la ligne de votre code dans laquelle vous initialisez le widget calendar Yahoo (à peu près à la ligne 133). Positionnez votre curseur à la ligne 134.
- Commencer à tapez YAHOO, suivi d’un point. Dès que vous saisissez YAHOO., une fenêtre défilante apparaît, contenant les conseils de code pour la bibliothèque Yahoo. Dans la colonne droite de conseil de code, vous pouvez voir les documents dans lesquels Dreamweaver tire ses méthodes, propriétés et objets.
Image 2: Aperçu de la fenêtre de conseil de code
- Après le point, tapez ex. La fonction de conseil de code sélectionne automatiquement « example » pour vous. Appuyez sur Entrée/Return pour insérer le code.
- Ensuite tapez .calendar suivi d’un autre point.
Remarque: Quand vous placez un point après calendar, la fenêtre de conseil de code s’ouvre. Remarquez que cal1 est la première suggestion : cela démontre la nature dynamique et introspective de la fonction conseil de code de Dreamweaver. Vous remarquerez que la variable cal1 est définie trois lignes plus haut à la ligne 131. Dès que le code pour cal1 est écrit, il est aussitôt rajouté par la fonction d’archivage du conseil de code.
Image 3: Initialisation du code dans Dreamweaver
- Continuez de saisir jusqu’à ce que vous ayez entré l’expression : Yahoo.example.calendar.cal1.render;
- Choisissez Fichier > Enregistrer et cliquez sur l’icône Globe de la barre d’outils du document. Choisissez Aperçu dans Firefox (ou bien dans votre navigateur favori).
- Quand la page s’ouvre, cliquez sur l’icône Calendar View. Un widget calendrier s’ouvre dans une fenêtre externe.
Image 4: Aperçu du calendrier
Utilisation de l’indicateur d’erreurs de syntaxe
Pour que le conseil de code fonctionne normalement, le code JavaScript doit être correctement structuré. Toute erreur peut désactiver le conseil de code et vous ralentir. Pour vous aider à détecter et corriger des erreurs, Adobe a ajouté un indicateur d’erreurs de syntaxe en Mode Code affichant une alerte dans la barre d’information et surlignant les lignes concernées. Pour détecter une erreur de syntaxe :
- Fermez la fenêtre du navigateur et activez le Mode code.
- Repérez une paire de commentaires sur les lignes 28 et 37.
- Sélectionnez les balises et le code contenu dans cette paire. Ce code pour le widget calendar a été écrit auparavant pour vous aider à relier les données à votre widget calendar. Les commentaires doivent être supprimés pour que Dreamweaver reconnaisse le code.
- Cliquez sur l’icône Suppression commentaire sur la partie gauche de l’interface de Dreamweaver.
Image 5: Suppression des commentaires
Une fois que vous avez supprimé les commentaires, Dreamweaver détecte l’erreur de syntaxe et affiche une alerte dans la barre d’information située en haut de la fenêtre du document. Dreamweaver surligne également la ligne contenant l’erreur.
Image 6: Affichage de l’indicateur d’erreur de syntaxe
- 5. Supprimez l’accolade inutile de la ligne 34. Il doit y avoir une accolade de fermeture sur la ligne 35 de votre code. Le message d’erreur disparaît une fois l’erreur corrigée.
Relier un widget YUI calendar avec un ensemble de données Spry
Vous avez créé avec succès un widget YUI calendar. Cependant, le calendrier n’est relié à aucune donnée Spry (en effet, il n’y a aucune relation entre l’ensemble de données et le calendrier). Pour relier le calendrier à des dates spécifiques :
- Insérez votre curseur sur la ligne vierge au-dessus du code du widget calendar (ligne 31).
- Le menu de conseil de code s’ouvre, proposant de multiples méthodes pour votre ensemble de données. Sélectionnez getCurrentRow() et appuyez sur Entrée/Return. Fermez la ligne avec un point virgule. Votre code doit ressembler à ceci :
var dates = cal4.getCurrentRow();
Image 7: Création d’une variable
- Le menu de conseil de code s’ouvre, proposant de multiples méthodes pour votre ensemble de données. Sélectionnez getCurrentRow() et appuyez sur Entrée/Return. Fermez la ligne avec un point virgule. Votre code doit ressembler à ceci :
var dates = cal4.getCurrentRow();
Ce code renvoie la valeur de n’importe quelle ligne courante. Parce que vous enregistrez ce code à un objet d’écoute, chaque fois que la ligne change, il met à jour le widget calendar.
- Choisissez Fichier > Fermer. Cliquez sur l’icône Aperçu/Débogage dans le navigateur.
- Cliquez sur le bouton Calendar view. Maintenant, à chaque fois que vous cliquez sur un événement du tableau, ces dates sont affichées dans le widget calendar.
Image 8: Affichage des dates dans le widget calendrier
Pour aller plus loin…
- Dreamweaver CS4 Assistance et Support
- Apprenez Dreamweaver CS4
- Introduction à Dreamweaver CS4, par Jean-Luc Delon
- Widgets Spry info-bulles et validation de formulaire, par Jean-Luc Delon
- Création d’un ensemble de données Spry, par Birnou Sébarte
- video2brain.fr
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
A propos des auteurs
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
