Insérer des scripts
- Introduction
- Quelques règles
- Quels logiciels ?
- Mise en page
- Les liens hypertextes
- Transférer
- Les tableaux
- Insérer des images
- Utilisation des calques
- Le code source
- Les feuilles de style
- Insérer un formulaire
- Insérer des scripts
- Les meta tags
- Les cadres : oublier ?
- Introduction au PHP
- Premiers pas PHP
- Passage de variables
- Les formulaires
- Envoyer mail
- Conditions / boucles
- Les bases de données
- Les fonctions
- Les sessions
- Validité formulaire
- Chargement fichier
- Insérer scripts
Vous pouvez poser
vos questions dans les forums.
A voir aussi :
Cette formation est
mise à disposition sous un
contrat Creative Commons.
On peut insérer toutes sortes de scripts dans une page html. On peut rajouter des éléments programmés en java, en javascript, en php, ... et bien d'autres. Le php nécessite un serveur particulier et la page ne pourra plus se terminer par l'extension htm ... mais nous verrons cela dans les cours sur le PHP. Voyons comment utiliser le language de script le plus populaire : javascript.
Ce chapitre très court n'a pas pour but de vous apprendre à utiliser javascript, mais plutôt de voir comment insérer dans vos pages des scripts tout fait.
Revenir à la page précédente
Imaginons la situation suivante : j'ai deux pages qui pointent chacune vers une même troisième page. Sur la troisième page, je veux mettre un bouton "retour". Vers quelle page aller ? La première ou la deuxième ? Le javascript permet de résoudre le problème en allant à la page d'où vient le visiteur. Le lien s'adapte au visiteur !
Exercice :
Créez deux pages (page1.htm et page2.htm) avec un texte quelconque (mais différent sur chaque page). Créez une troisième page (page3.htm) avec un lien classique nommé "retour" vers page1.htm
Le code du lien de l'exercice ci-dessus dans la page3 est le suivant :
<a href="page1.htm">Retour</a>
Pour que ce lien ne retourne plus à la page1, mais bien à la page d'où vient le visiteur, il suffit de remplacer la partie en italique par javascript:history.go(-1). On obtient alors le code suivant :
<a href="javascript:history.go(-1)">Retour</a>
Exercice :
Modifiez le lien de la page3 et vérifiez que tout fonctionne comme souhaité.
Ouvrir une fenêtre popup
Voyons maintenant un script un peu plus compliqué.
En cliquant sur un lien, je voudrais qu'une nouvelle fenêtre s'ouvre en popup en lui spécifiant les dimensions, les barres d'outils, ...
Ne sachant pas programmer en javascript, j'ai cherché sur Internet un script tout fait et vous allez voir qu'il est très simple de l'intégrer à vos pages. Collez le code ci-dessous entre les balises <head> et </head> de votre page.
<script type="text/javascript">
function fenetre() {
var win_opt="toolbar=0,location=0,directories=0,status=0,menubar=0,";
win_opt+="scrollbars=0,resizable=0,copyhistory=0,";
win_opt+="width=310"+",height=250,";
win_opt+="screenY=150"+",screenX=420";
NewWindow = window.open("test_popup.htm","popup",win_opt);
NewWindow.creator=self;
}
</script>
Quelques explications :
Le script débute toujours par la balise <script> dans laquelle on spécifie le langage utilisé. Il se termine bien sur par la balise </script>. Le reste du code définit les options : pas d'ascenseur, de barres d'outils, impossible de redimensionner, taille fixe, ... et surtout le nom de la page à ouvrir !
Ensuite, à l'endroit où vous voudrez écrire votre lien, vous mettrez le code suivant :
<a href="javascript:fenetre();">Test </a>
Essayez le résultat :
Pour fermer la fenêtre on a utilisé les instructions window.close() et onclick.
Exercice :
Recréez l'exemple ci-dessus dans vos pages.
Trouver des scripts
Voici un site sur lequel vous trouverez de nombreux scripts en javascript :
Cours suivant : Les meta tags