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 :
Le code JavaScript peut être placé dans la section <head>
d'une page HTML. Cette méthode est recommandé
lorsque vous avez besoin de chargé JavaScript avant le contenu de la page. Nous avons utilisé cette méthode
pour charger Bootstrap et la bibliothèque jQuery.
Le script peut être placé en bas de la section <body>
d'une page HTML, juste avant la balise de
fermeture </body>
. Cette méthode est acceptable lorsque vous avez besoin de charger le DOM14 en entier
avant que le script puisse commencer à s'exécuter.
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 :
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
etInlineScript
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.
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).
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.