A free and open-source book on ZF3 for beginners

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

6.7. Ajouter des scripts à une page

Du code JavaScript peut être inséré dans des pages HTML pour les rendre interactives. Les scripts doivent être insérés dans un fichier HTML entre les balises <script> and </script>. Ci-dessous, un exemple de code JavaScript est présenté :

<script type="text/javascript">
  // Show a simple alert window with the "Hello World!" text.
  $(document).ready(function() { 
    alert('Hello World!');
  });
</script>

Dans l'exemple ci-dessus, nous avons créé l'élément <script> et y avons placé la fonction de rappel jQuery. jQuery lie la fonction à exécuter lorsque le chargement du DOM est terminé. Lorsque la fonction est exécutée, une fenêtre d'alerte simple avec le texte "Hello World!" et le bouton OK apparaîtront.

Puisque vous avez placé ce code JavaScript dans un fichier HTML, nous l'appellerons script en ligne. Une autre façon de stocker du code JavaScript consiste à le placer dans un fichier .js externe. Les fichiers externes contiennent généralement du code conçu pour être utilisé par plusieurs pages. Généralement, les fichiers JavaScript externes sont stockés dans le répertoire APP_DIR/public/js/. Pour lier un fichier JS externe à votre page HTML, vous ajoutez l'élément <script> comme ci-dessous :

<script type="text/javascript" src="/js/yourscript.js"></script>

Lorsque le navigateur rencontre un tel élément <script>, il lit le fichier JS externe et exécute le code.

Il y a deux endroits dans un fichier HTML où vous pouvez placer le script :

14) Le DOM (Document Object Model) est une représentation pratique d'une structure de document HTML en tant qu'arborescence d'éléments.

Si un fichier JavaScript doit être utilisé sur toutes (ou sur la plupart) des pages, il est préférable de le placer dans la vue layout. Mais quand un script doit être utilisé sur une seule page, le placer dans le n'est pas la meilleure idée. Si vous placez un tel script dans le layout, le script sera chargé sur toutes les pages, ce qui peut générer un trafic inutile et augmenter le temps de chargement de la page pour l'ensemble du site. Pour éviter cela, vous pouvez ajouter le script individuellement pour la page souhaitée uniquement.

Pour ajouter un script spécifique à la page qui sera placé dans la section <head> de la page, vous utilisez l'aide de vue HeadScript. Ses méthodes sont résumées dans le tableau 6.1 :

Table 6.1. Méthodes fournies par l'aide de vue HeadScript
Nom de la méthode Description
appendFile() Insère un lien vers un fichier JS externe après tous les autres.
offsetSetFile() Insère un lien vers un fichier JS externe dans une position de liste donnée.
prependFile() Insère un lien vers un fichier JS externe avant tous les autres.
setFile() Efface la liste des scripts et place le fichier JS externe donnée dans celui-ci.
appendScript() Insère un script en ligne après tous les autres.
offsetSetScript() Insère un script en ligne dans une position de liste donnée.
prependScript() Insère un script en ligne avant tous les autres.
setScript() Efface la liste des scripts en ligne et place le script en ligne spécifié.

Pour ajouter un lien vers un fichier JS externe à la section <head> d'une page, vous ajoutez le code PHP suivant au début du fichier latout (.phtml):

<?php
$this->headScript()->appendFile('/js/yourscript.js', 'text/javascript');
?>

Dans le code ci-dessus, nous avons appelé la méthode appendFile() de l'aide de vue HeadScript. Cette méthode prend deux arguments. Le premier est le chemin d'accès au fichier JS (si le fichier est stocké dans le répertoire APP_DIR/public/js ou l'URL d'un fichier JS si le fichier se trouve sur un autre serveur). Le deuxième argument est le type du script (il est généralement égal à "text/javascript").

Les autres méthodes fournies par l'aide de vue HeadScript (telles que prependFile(), offsetSetFile() et setFile()) ne se différencient que par la position dans la liste des scripts dans lesquels le nouveau script sera inséré.

Les méthodes prependScript(), appendScript(), offsetSetScript() et setScript() sont conçues pour insérer un code JavaScript en ligne. Ils sont rarement utilisés car vous insérez généralement des scripts JS externes dans la section head du

Pour insérer un script à la fin de la section <body> du document, vous utilisez l'aide de vue InlineScript 15. Elle fournit exactement les mêmes méthodes que l'aide de vue HeadScript. Ci-dessous, un exemple qui peut être utilisé pour ajouter un code JavaScript en ligne à la fin du document :

15) Le nom InlineScript ne reflète pas entièrement les capacités de cette aide de vue. En fait, il peut insérer des scripts en ligne et externes. Le meilleur nom pour cette vue auxiliaire serait BodyScript car il est destiné à l'insertion de scripts dans le corps du document.

<?php 
$script = <<<EOT
  $(document).ready(function() {
    alert('Hello World!');
  });
EOT;
$this->inlineScript()->appendScript($script);

Dans l'exemple ci-dessus, nous avons utilisé la syntaxe PHP Heredoc 16 pour remplir la variable $script avec le code JavaScript en ligne. Ensuite, nous appelons la fonction appendScript() sur l'aide de vue InlineScript et transmettons le code comme argument.

16) Heredoc est une méthode de définition de chaîne alternative fournie par PHP. Cela fonctionne bien avec les chaînes multi-lignes.

Mais l'utilisation de l'aide de vue InlineScript peut ne pas être très pratique au niveau de la lisibilité. De plus, le vérificateur de syntaxe de l'EDI NetBeans sera bloqué sur la notation Heredoc et ne reconnaîtra pas le code JavaScript. Pour résoudre ce problème, vous pouvez simplement placer l'élément <script> en bas de votre vue, comme indiqué dans l'exemple ci-dessous :

<!-- Le contenu de la page en premier -->

<!-- Le script en ligne ensuite -->
<script type="text/javascript">
  $(document).ready(function() {
    // Afficher une fenêtre d'alerte avec le texte "Hello World!".
    alert("Hello World!");
  });
</script>

Cela garantit le même effet qu'avec l'aide de vue InlineScript mais permet une meilleure lisibilité du script et une vérification automatique de la syntaxe dans l'EDI NetBeans.

Pour que les aides à la vue HeadScript et InlineScript fonctionnent, vous devez vous assurer que leur contenu est écrit dans le layout (voir les lignes 23 et 62 du fichier layout.phtml). Si vous supprimez ces lignes du layout, les scripts ne seront pas insérés dans la page.

6.7.1. Example

For a real-life example of inserting a JavaScript code in your web page, let's add a page with auto-complete feature. With this feature, the web browser will predict a word or phrase that the user wants to type in by several first letters, without the user actually entering the text completely. We can use an auxiliary JavaScript library called Twitter Typeahead. Analogous to Twitter Bootstrap, the Typeahead library was developed in Twitter Inc. for their internal purposes and is distributed freely.

Download typeahead.min.js file (a minified version of the Typeahead library) from the official project page. When the download is finished, place the file in your APP_DIR/public/js directory.

Then add the typeahead.phtml file in your application/index/static subdirectory under the module's view directory. This directory is served by the StaticRoute route type that we've created and configured earlier in chapter Routing, and all "static" pages placed here will automatically become available to site users.

In the typeahead.phtml view template file, put the following content:

<?php
$this->headTitle('Typeahead');
// Add a JavaScript file
$this->headScript()->appendFile('/js/typeahead.min.js', 'text/javascript');
?>

<h1>Typeahead</h1>
<p>Type a continent name (e.g. Africa) in the text field below:</p>
<input type="text" class="typeahead" title="Type here"/>

<script type="text/javascript">
  $(document).ready(function() { 
    $('input.typeahead').typeahead({
       name: 'continents',
       local: [
            'Africa', 
            'Antarctica',
            'Asia',
            'Europe',
            'South America', 
            'North America'            
        ]
    });
  });
</script>

In the code above, we set the title for the page (line 2), then we append the typeahead.min.js file to the <head> section of the page with the HeadScript view helper (line 4).

In line 9, we create a text input field where the user will be able to enter some text. We mark the input field with the typeahead CSS class.

Lines 11-25 contain inline JavaScript code placed at the bottom of the view template (we don't use InlineScript view helper for better code readability).

In line 12, we have the jQuery event handler bound to the "document is ready" event. This event is fired when the complete DOM tree has been loaded.

In line 13, we have the jQuery selector ("input.typeahead") which selects all input fields marked with the typeahead CSS class and execute the typeahead() function on them.

The typeahead() function binds the change event handler to the text input field. Once the user enters a character in the field, the handler is executed and checks the letters entered. It then displays the dropdown menu with suggested auto-completion variants.

The typeahead() function takes two arguments: the name argument identifies the dataset, and the local argument is a JSON array containing the available auto-completion variants.

To give the auto-completion field and its dropdown menu a nice-looking visual appearance, add the following CSS rules to your style.css file.

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 0px 12px;
  font-size: 1.1em;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px; 
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 1.1em;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

To see the auto-completion feature in work, type the "http://localhost/typeahead" URL in your browser and press Enter. The Typeahead page will appear with the prompt to enter a continent name. For example, type a letter to see how Typeahead suggests you available variants (figure 6.7).

Figure 6.7. Auto-complete feature Figure 6.7. Auto-complete feature

You can see this example working in the Hello World sample bundled with this book by typing the URL "http://localhost/typeahead" in your browser.


Top