JavaScript/Premiers pas
JavaScript
[modifier | modifier le wikicode]Qu'est-ce que c’est ?
[modifier | modifier le wikicode]Le JavaScript (JS) est un langage dit "client" qui est exécuté par le navigateur web (il n’est pas nécessaire de lire ses pages depuis un serveur web comme pour le PHP). Il est désactivable sur la plupart des navigateurs web en modifiant le menu "options".
Ce langage permet entre autres de développer l'interactivité d'un site (pop-up, pop-under, contrôle de formulaire, chargement d'images...).
Pour suivre ce cours, il est recommandé de posséder :
- Un navigateur outillé d'un débogueur, comme la touche F12 pour IE8, ou l'extension Firebug pour Firefox et Chrome.
- Un éditeur de texte avec coloration syntaxique (Emacs, Notepad++, TextPad, etc.).
- Connaître les bases du HTML et du CSS.
Tout votre code JavaScript sera visible par tous les internautes car contrairement aux langages serveurs tels que PHP, asp, cfm, jsp... le code est visible dans la source de la page. Pour cette raison, il faut éviter de mettre des mots de passe dans le JavaScript en s'imaginant qu’ils seront invisibles pour les internautes :)
JavaScript permet de faire beaucoup de choses. Avec le HTML dynamique, nous pouvons manier les balises d'une page web. Avec AJAX, il est possible d'échanger des informations avec le serveur sans rechargement de la page.
Où place-t-on le code ?
[modifier | modifier le wikicode]Comme pour le CSS, le code JavaScript peut se placer à trois endroits différents :
- Dans un fichier externe à la page web (avec l'extension obligatoire .js).
- Entre les balises <head> et </head> de la page web.
- Directement dans une balise de la page (à l'aide des évènements).
Dans le cas no 1, on doit inclure le fichier .js directement dans notre page web et toujours entre les balises <head> et </head> comme ceci :
...
<head>
<script type="text/javascript" src="./dossier_javascript/fichier.js"></script>
</head>
...
Dans le cas no 2, le code doit se tenir entre les balises <script> et </script> comme ceci :
...
<head>
<!-- (déconseillé) -->
<script>
// Votre script
</script>
<!-- OU -->
<script language="javascript">
// Votre script
</script>
<!-- OU (conseillé) -->
<script type="text/javascript">
// Votre script
</script>
</head>
...
Dans le dernier cas, nous verrons cela plus tard dans le cours mais voici un exemple très simple que vous avez déjà dû apercevoir un jour :
<input type="button" onClick="..." />
Il s'agit d'un évènement. JavaScript gère très bien beaucoup d'évènements : du simple clic sur un bouton (exemple ci-dessus) jusqu'à la fermeture de la fenêtre en cours...
Premier script
[modifier | modifier le wikicode]Comme premier script, voyons comment écrire un texte à l'écran une fois la page chargée :
// Affichons le message "Bonjour tout le monde !"
document.write("Bonjour tout le monde !");
// On peut ajouter du HTML
document.write("<b>Bonjour</b><br /><img src=\"mon_image.jpg\" /><br /><u>tout le monde !</u>");
// On peut aussi l’afficher en popup plutôt que dans la page
alert("Bonjour tout le monde !");
Sur la Wikiversité
[modifier | modifier le wikicode]Il est possible de tester vos scripts directement sur le site en les plaçant dans votre apparence (Spécial:mypage/common.js par défaut). Un échantillon est offert sur cette page.
|
Les javascripts partagés sur les wikis de la fondation doivent respecter une convention de codage pour faciliter leur compréhension. |
