Webdesign Index du Forum

Webdesign
Créations multimédias

 FAQFAQ   RechercherRechercher   MembresMembres   GroupesGroupes   BLOG Webdesign : Créations multimédias  Geoffrey Couppey - Portfolio  S’enregistrerS’enregistrer 
 ProfilProfil   Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés   ConnexionConnexion 

Introduction au javascript

 
Poster un nouveau sujet   Répondre au sujet    Webdesign Index du Forum ->
Programmation : Langages
-> Javascript
Sujet précédent :: Sujet suivant  
Auteur Message
Geoffrey Couppey
Administrateur

Hors ligne

Inscrit le: 22 Sep 2008
Messages: 347
Localisation: Basse Normandie / Manche
Date de naissance: 12/04/1988
Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Jeu 19 Mar - 16:40 (2009)    Sujet du message: Introduction au javascript Répondre en citant

Introduction au javascript 
 
Une petite intro pour comprendre et bien débuter le javascript. 
 
Bonjour à toutes et à tous ! Je vais vous expliquer comment fonctionne le javascript, et comment s'en servir. 
Courage, c'est un peu long, mais c'est nécessaire ^^ 
 
Illustration du code avec de petits exemples. 
INTRO :

Pour l'apprentissage javascript, il vous faut :

- un simple éditeur de texte (je vous conseil NOTEPAD ++ qui est gratuit)
- un navigateur compatible javascript (à peut pret tous Okay )
- et des connaissances du langage HTML obligatoire !


Le javascript est interprété par le navigateur. Il faut donc l'informer que le code qu'il risque de rencontrer est du javascript.

 1 . Balises meta

Au niveau des balises meta dans une page Html, on peut déterminer le ou les langage(s) complémentaire(s) utilisé(s).

On ajoutera aux autres balises meta, la balise :
Code:
<meta http-equiv="content-Script-Type" content="text/javascript" /> 

Cette balise signale que la page comporte (ou peut comporter) un script, en mode texte, et que celui-ci est du javascript.

2 . Code Javascript

Le code Javascript sera signalé au navigateur en entourant celui-ci des balises : "<script>"

Exemple :
Code:
<script type="text/javascript">
//<![CDATA[

Code Javascript

//]]>
</script>


La balise <script type="text/javascript"> détermine qu'il s'agit d'un script JavaScript. En effet, il existe d'autres langages de script qui peuvent s'implémenter dans une page HTML. On pense au VBscript de Microsoft qui est un langage issu du Visual Basic mais qui n'a pas eu le même succés que le JavaScript.

Dans la pratique, on rencontre fréquement la déclaration abrégée <script>. Celle-ci est valable car la plupart des navigateurs ont repris le JavaScript par défaut.

Parfois la veersion du JavaScript est ajoutée à cette balise pour forcer le navigateur à respecter les spécifications de la version ainsi mentionnées.

Ce qui donne par exemple :

Code:
<script type="text/javascript" language="javascript1.2">


Cette précision n'est plus très utilisée car les navigateurs récents se débrouillent pour gérer le JavaScript indépendamment de sa version.

En Html, on a pris l'habitude d'entourer le code Javascript des balises <!--       //--> pour cacher le code à l'intention des navigateurs qui ne reconnaissent pas le JavaScript. Remarquons que les balises <!--    --> sont des commentaires HTML et les barres obliques // du commentaire JavaScript.

En XHTML, il faut entourer le code JavaScript par :

//<![CDATA[ ..... //[[>

Cette notation, issue du XML, permet d'informer le navigateur de ne pas analyser et interpréter ce qu'il y a entre le //<![CDATA[ initiale et le //[[> final. L'analyseur syntaxique va seulement récupérer le contenu de cette section, sans chercher à repérer des balises, des entités ou toute autre spécificité syntaxique XML. En effet, sans //<![CDATA[, les signes < inférieur à et > supérieur à du JavaScript seraient reconnus comme les signes < de début de balise et > de fin de balise su XHTML.

[b]3 . Un premier script[/b]

Encodons le code suivant dans un éditeur de texte :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Premier script</title>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="content-Script-Type" content="text/javascript" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
document.write("Mon premier JavaScript");
//]]>
</script>
</body>
</html>


Commentaires :

- Le doctype n'a aucune influence sur l'exécution de JavaScript. Ce qui n'est pas le cas des feuilles de style.
- L'instruction document.write("Mon premier JavaScript"); demande d'écrire (write) le texte repris entre les parenthèses dans le document.
- Remarquez que l'instruction se termine par un point-vergule.

On enregistre ce fichier au format htm.

Ensuite, on affiche la page dans le navigateur :


 

La version Internet Explorer 6.0 pour windows  XP SP2 risque de vous apporter quelques désagréments lors de la conception de vos scripts en local.

Soucieux (mais à ce stade, un peu trop !) de la sécurité des pages affichées, Internet Explorer affiche le message d'information suivant :
"Pour vous aider à protéger votre ordinateur, Internet Explorer a restreint l'affichage du contenu actif de ce fichier..."

Pour visionner votre page comprtant un script, il vous faut autoriser le contenu ainsi bloqué. Pour cela cliquez sur le message précédent et cliquez sur "Autoriser le contenu bloqué..."

Ce message d'information n'apparaîtra plus (sauf exceptions) une fois que la page sera en ligne.

Il est à noter que cet avertissement de sécurité a été supprimé dans Internet Explorer 7.0.


4 . JavaScript interne

On peut se poser la question ; "Où inclure les balises <script> ... </script> dans le document Xhtml ?".

Il n'y a hélas, pas de régle précise qui stipule à quel endroit d'un fichier Html ou Xhtml, le code JavaScript doit être défini. La seule réponse est "Là ou le navigateur en aura besoin" !


Pour rappel, la page Html est chargée par le navigateur de façon séquentielle (de haut en bas). Il lit d'abord l'en-tête (le contenu des balises <head>) et ensuite le corps (<body>), ligne par ligne. Tous les éléments du "body" sont interprétés dans l'ordre d'écriture des balises.

Si on fait appel à du code JavaScript, alors que celui-ci n'a pas encore été défini dans la page et donc interprété par le navigateur, ce dernier ne peut, en toute logique, pas le prendre en charge (erreur sur la page).

On peut retrouver le code JavaScript à plusiuer endroits dans la page :
- Il n'est pas rare que du code JavaScript soit inclus, totalement ou en partie, dans les balises <head>. En effet, ce code sera alors lu en premier par e navigateur et le concepteur peut en toute sécurité faire appel à ses fragments de code, n'importe où à l'intérieur de la balise <body> car il sera déjà disponible.

- on retrouve parfois du code JavaScript immédiatement après la balise <body> lorsque celui-ci est plus spécifique au corps du document.

- Si le JavaScript traite de données d'un formulaire, le code peut apparaître après la balise <form>.

- Des instructions comme document.write("..."); peuvent être incluses dans le texte de la page à l'endroit souhaité.

- etc.

Le code JavaScript doit être encodé avant ou au plus tard au moment où il devra être exécuté.

En outre, depuis que le JavaScript est reconnu comme langage de script par défaut de la plupart des navigateurs, du code JavaScript peut-être inclus directement dans la balise Html ou Xhtml, fonctionnant alors comme un attribut de celle-ci.

Cette façon de procéder 'est pas adoptée pour un code programme compliqué mais seulement pour un appel à des événements, méthodes, fonctions déterminés.

Quelques exemples :

Code:
<a onclick="javascript:history.back();">Retour page précédente</a>

Avec l'objet history de JavaScript, vous avez accés aux pages Web qui ont été visitées par l'utilisateur et qui sont sauvegardées dans l'historique du navigateur. Avec la méthode back(), on demande, au clic sur le lien, de remonter d'un position dans l'historique, revenant ainsi à la page précédente.

Code:
<h1 onmouseover="javascript:history.back();">Retour page précédente</h1> 

Ici on demande de reveir à la page précédente par le simple survole du text avec la souris (onmouseover).
Code:
<form>
<input type="button" value="retour" onclick="history:back()">
</form>


Quand l'utilisateur clique sur le bouton de formulaire, on revient à la page précédente.


5 . JavaScript externe

Il est également possible de noter le code JavaScript dans un ou des fichiers séparés de la page XHTML. Ce qui présente l'avantage de clarifier le code du document Xhtml et de respecter la régle de séparation du contenu et de la présentation. Il est ainsi possible d'appeler le même code JavaScript à partir de fichier Xhtml séparés sans avoir à le réécrire.

Ce fichier externe est un fichier de texte brut encodé, par exemple, avec le Bloc-notes de Windows (ou Notepad ++ comme je vous l'ai conseillé précédamment).
Ce type de fichier comporte l'extension .js. Il contient uniquement du code JavaScript, et donc sans les balises <script>.

Ce fichier est appelé dans la page Xhtml par :
Code:
<script src="fichier_externe.js"></script> 

Cette balise d'appel se place généralement entre les balises <head> ... </head>.

Reprenons notre exemple du Premier script :

Créer un fichier nommé write.js
Insérez lui le code demandant d'écrire dans le document "Mon premier JavaScript".

Si vous ne comprenez pas, je parle de ce script :
Code:
document.write("Mon premier JavaScript");


Enregistez le document puis fermez le.

Si on appel donc le fichier write.js dans la page Xhtml, ça donne :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Premier script</title>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="content-Script-Type" content="text/javascript" />
<script src="write.js"></script>
</head>
<body>
</body>
</html>

 

Et le résultat est identique au précédent :

 
 
 
 
Voilà vous voici pret à affronté le Javascript ! 
 
Bon courage, si vous rencontrez des problème, postez votre script sur le forum, on se fera un plaisir de vous répondre Wink  
 
Pfiouuuu ! c'était long à écrire tout ça ! 

_________________

<a href="http://www.geoffreycouppey.fr">www.geoffreycouppey.fr</a>


Revenir en haut
Visiter le site web du posteur Skype
Publicité






MessagePosté le: Jeu 19 Mar - 16:40 (2009)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Webdesign Index du Forum ->
Programmation : Langages
-> Javascript
Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com