Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

16. Mise en ligne d'un site

Formations informatiques en ligne YBET
Office Internet Techniques
Access Formation Internet PC et périphériques
Cours Excel PHP - MySQL Equipements réseaux
Powerpoint Créer son propre site Dos et Windows
ACCUEIL Forum webmasters Nous contacter

16.6. Quelques bases en Javascript, formation

1. Comment ça s'utilise? - 2. Les commentaires - 3. Premier script - 4. Pour afficher une fenêtre quand on click

Une précédente partie nous a permis d'apprendre le PHP pour créer un site Internet. C'est un langage de programmation largement utilisé pour les sites, surtout lorsqu'il est couplé à une base de donnée PHP. Il est exécuté sur le serveur Internet qui renvoie le résultat directement au navigateur. Pour le visiteur, la page est directement vue sans réellement savoir s'il y a une programmation ou non. Intéressant mais avec un petit défaut, le PHP ne tient pas réellement compte des actions de l'utilisateur comme cliquer sur un lien, ...

Pour permettre d'interagir avec la page du site (ou plutôt au site d'interagir avec le visiteur), on utilise un autre langage: le javascript. Comme pour le cours PHP, avant de débuter, vous devez avoir des connaissances en HTML mais aussi connaître les structures des liens, insertions d'images, ... Ceux qui ont suivis la parties PHP vont être nettement avantagés pour la suite.

Défauts et avantages de Javascript, et oui, il y a des défauts et des avantages. Le principal intérêt est qu'il est décodé directement par le navigateur et qu'il permet de programmer des actions en fonction de celles des utilisateurs. Par exemple: une boîte de dialogue lui permettant d'inscrire son nom (tout de suite les "mauvaises applications") mais aussi des calculs automatiques dans les formulaires, faire défiler des images, modifier le curseur de la souris, ... En plus, le script (un terme abrégé pas trop à utiliser) permet d'enregistrer des variables temporaires sur l'ordinateur des visiteurs (un peu comme des cookies que nous avons vus en PHP), ce type d'application est utilisé par quasiment tous les systèmes de statistiques de visites des sites externes (pas directement implantés sur le serveur). De nouveau, on retrouve sur Internet un paquet de programmes gratuits à télécharger. Voyons maintenant l'autre coté, les scripts ne sont pas lus par les moteurs de recherche donc pas trop conseillés pour le référencement ET les internautes n'aiment pas trop les petites boîtes qui apparaissent en entrant sur une page.

Personnellement, je conseille JAVASCRIPT uniquement pour des petites applications spécifiques inclues dans la page, surtout qu'il peut être désactiver par l'utilisateur. Cette partie est complémentaire à la formation PHP et va nous permettre de créer des fonctions supplémentaires. Comme en PHP, vous ne trouverez pas de scripts tout fait à télécharger ici, uniquement comment on les programme.

Pour nous aider dans la compréhension, j'utilise les couleurs suivantes dans la suite:

Aide à la compréhension, résumés et explications diverses
Codes en HTML
Lignes de programmes en Javacript, elles doivent débuter par < /script> et se terminer par < /script> (sans espaces comme ici, ceci pour éviter des fenêtres multiples dans la navigation).

1. Comment ça s'utilise?

Ces scripts sont des morceaux de programmes qui s'insèrent dans le code HTLM de la page. Ils peuvent être mis dans le header (entre <head> et </head>) ou directement dans le contenu. Le code est directement lu par le navigateur (et visible dans le code de la page (Affichage -> Source en Explorer et ->Source de la page sous firefox). Par contre, vous devez prévenir le navigateur que c'est effectivement écrit dans ce langage de programmation.

<head>

<script type="text/javascript">

// vos commandes

</script>

</head>

<body>
<script type="text/javascript">

// vos commandes

</script>

</body>

Certaines commandes ne nécessitent même pas ces ouverture / fermetures. Rien de bien compliqué à première vue, mais attention. Certaines commandes nécessitent une intervention de l'utilisateur (certaines boîtes de dialogue par exemple), tant que l'utilisateur n'a pas exécuter l'action, le reste de la page n'est pas affichée.

Mais mieux, les fichiers externes. En CSS, nous avons vu aussi l'utilisation de fichiers externes. C'est identique ici, l'extension du fichier est .js.

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

Cette commande se met dans le Head ou dans le contenu et signale que le fichier script.js reprend des commandes qui peuvent être appelées et exécutées.

2. Les commentaires.

Un petit rappel vite fait:

en html, ils peuvent reprendre plusieurs lignes d'un coup: <!-- Vos commentaires -->

en php, soit // pour signaler que la site de la ligne est un commentaire, soit /* lignes de commentaires */ pour reprendre plusieurs lignes d'un coup.

Et en Javascript on utilise la partie html pour masquer l'affichage des scripts lorsque le navigateur est trop vieux et ne le comprend pas (mais c'est de la préhistoire) ou que le Javascript est désactivé, soit exactement celles de PHP mais avec une petite modification, les commentaires sur une seule ligne peuvent se placer en ... fin de ligne.

commande; // les commentaires de ma commande

/* des lignes de commentaires
....
*/

Comment masquer le code lorsque javascript est activé? Soit en mettant cette partie dans le header, soit en le masquant. En fait, ça se fait directement en utilisant celles de l'HTML.

<script "text/javascript"> <!-- /* tout ce que les navigateurs qui n'acceptent

pas ce langage ne doivent pas affichés. */ //--> </script>

Bizarre, la fin des commentaires n'est pas exactement celle de l'HTML, et oui, on signale à script que la dernière ligne ne doit pas être affichée par // et à HTML que c'est la fin des commentaires par -->

Si vous utilisez des fichiers de commandes externes, les commentaires HTML ne sont plus utiles.

3. Et si on débutait?

Débutons par une petite boîte de dialogue. La commande s'appelle alert(). Reprenons notre petit éditeur (contex utilisé en php est très bien) pour créer une page html nommée bonjour.htm et essayons.

alert('Bonjour du site ybet'); // afficher un petit texte.

Remarquez tout de suite le ; (point-virgule) en fin de commande, c'est identique au PHP et à beaucoup de langages de programmations. Essayons la page dans le navigateur et ça donne l'affichage de: alert('Bonjour du site ybet'); // afficher un petit texte.

Pourquoi ça marche pas? Tout simplement parce que nous n'avons pas mis cette ligne entre les balises signalant que c'est du ... javascript et votre navigateur se contente de l'afficher comme du simple texte html. Pour chaque programme dans le contenu, débuter par <script type="text/javascript">
<!--

et terminez par

//-->
</script>

Dans la suite, je ne mettrais pas ces lignes de début et de fin, tout simplement pour ne pas vous inonder de fenêtres de dialogues.

Si vous n'avez pas de mis de carabistouilles dans le code (un terme belge désignant une bêtise, clin d'oeil à l'excellent tutorial du site du zero sur le sujet et à ses petites blagues sur les belges), vous devez afficher:

Et pire ... Si nous insérons un texte en html après cette commande, ... Pourquoi l'HTML n'est pas affiché? C'est bien là un des défaut, votre navigateur va attendre la réponse du visiteur (le click) avant de lire la suite de la page. La solution dans ce cas est de placer le texte HTML avant le script.

4. Et pour afficher une fenêtre lorsqu'on click?

Je vois tout de suite venir la petite idée, le monsieur clique sur la photo et une fenêtre lui signale qu'il ne peut pas. C'est pas un anti-copie mais c'est déjà une petite base. Mettons nous de suite dans les lignes de codes pour retrouver quelques actions "utilisateurs" en sachant que c'est très loin d'être conseillé pour ... garder ses visiteurs.

Comme pour toutes les parties programmation du site ybet.be, on essaye.

<p>Un texte onclick="alert('clic');"</p>

<img src="image.jpg" onclick="alert('click gauche');" />

Ok, compris .... La page affiche un texte et si je click avec la souris, une fenêtre s'ouvre affichant clic. J'affiche également l'image et si je clique dessus avec ma souris, une fenêtre affiche "click gauche". HEU, pas vraiment ... mais le but est finalement d'essayer (réussir est mieux). Sur l'image, ça fonctionne mais pas sur le texte. Pourquoi?

La fonction onclick utilisée ici sert de propriété à un objet et notre petite ligne de texte, même entre <p> </p> n'est pas un objet. Etudions le code de l'image:

Et voila la raison, ces quatre commandes liées à l'utilisation de la souris ne fonctionnent que sur des objets. On parie un tableau? Demandons lui d'afficher une de ces énervante fenêtre à cliquer lorsque nous passons dessus ...

<table border="0" onmouseover="alert('tableau');">
<tr>
<td>un tableau
</td>
</tr>
</table>

Et oui, la fenêtre avec le texte tableau s'affiche bien lorsqu'on passe dessus, et le codage de début est bien <objet (voilà une méthode finalement pour la fenêtre en passant sur du texte).

Ca pourrait marcher sur un lien? Même si l'intérêt semble limité, voyons le code d'un lien <a href="adresse">Texte du lien</a>

<a href="http://www.ybet.be" onclick="alert('Merci d'aller visiter notre site');">La page d'accueil du site</a>

Heu, pas vraiment non plus, mais pourquoi? Tout simplement parce que cette action fait quitter la page (même en mettant la partie onclick avant le href ... Je sais vous nous faites confiance et vous n'essayerez même pas). Une solution tout de même? En quelque sorte, si le click va sur un signet de la même page: <a href="#" onclick="alert('Merci d'aller visiter notre site');">La page d'accueil du site</a> Pas très efficace et surtout pas très utile surtout en référencement. Pourtant, nous reprendrons bientôt cette partie, sauf que le onclick n'ouvre plus de fenêtre mais bien exécute une fonction programmée.

<16.1. Le fichier htaccess 

>2. Variables et fonctions

Sur le sujet:

Votre site Web YBET informatique: analysons ensemble votre projet.

Access en ligne Cours sur la base de donnée Access de Microsoft en ligne

Les feuilles de styles L'utilisation du CSS pour les pages Internet

Formation PHP - MySQL Cours en ligne pour créer ses propres applications