TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05 JAVASCRIPT TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Origines et buts JavaScript a été lancé par Netscape en 1995. Premier langage de script à avoir été développé pour le Web et demeure encore aujourd’hui le plus répandu. Permet d’étendre les possibilités du HTML. Très souvent utilisé pour ajouter de petites fonctionnalités aux sites Web.
Quelques possibilités de JavaScript Ajout de messages défilants dans la barre d’état du navigateur. Validation du contenu d’un formulaire. Réalisation de calculs (ex: montant total d’une commande). Affichage de messages dans une page Web ou dans une boîte de dialogue. Création de boutons animés (lors d’un survol du curseur de la souris). Détection du navigateur employé et affichage de contenus adaptés aux différents navigateurs. etc.
Spécificités du langage Langage interprété (≠ compilé). Code intégré au HTML. Code peu typé. Liaison dynamique : les références des objets doivent être vérifiées au chargement. Accessibilité du code (≠ confidentialité) non crypté. Sûr : ne peut pas écrire sur le disque dur. Sensible à la casse (ex : fonction Bonjour() ≠ fonction bonjour() ).
Les différents langages de scripts VBScript (cf. Visual Basic, réservé à IE). JavaScript (basé sur le C++, pour tous les navigateurs). Applets Java (compilées ≠ JavaScript). CGI, PHP, JSP (exécuté par le serveur ≠ JavaScript qui est interprété par le navigateur) ActiveX (programmes Windows pouvant s’exécuter dans une page web, ex: toute la gamme Office)
Insertion dans le HTML Utilisation de la balise <Script> Insertion interne du script dans le document HTML : <SCRIPT language="JavaScript"> //code de votre script document.write(« …….. »); …………………. </SCRIPT> Insertion externe du script dans le document : <SCRIPT src= "votre_script.js" type="text/javascript">
Quelques aspects pratiques Pour obtenir une meilleure clarté de votre document HTML : Placer les scripts définissant des fonctions entre les balises <head></head> Puis tous les autres scripts et les scripts faisant références à ces fonctions entre les balises <body> </body>
Ajouter des commentaires dans votre code Commentaire sur une ligne : // Commentaire sur plusieurs lignes : /* commentaires */ Afin que le script ne s’affiche pas sur les anciens navigateurs ou les navigateurs non compatibles JavaScript, il faut encapsuler votre script par les repères suivants : <!– et // -->
Votre 1er script… Affichage de la date sur un site web. Insérer le script… Explication des différents mots-clefs Copier le script dans un fichier heure.js, puis appeler-le
Exemples Agrandir/réduire une image Défilement d’un texte dans la barre d’état Effet « neige » Curseur « animé » Effet « spot »
Réalisation d’un petit questionnaire Télécharger le script « questionnaire.js » Sur Dreamweaver : Création d’un groupe de 3 radio boutons (Onglet « Formulaire »). Le champs « name » des 3 boutons radios doivent être le même! Ajouter un bouton de validation. Modifier le champs « type » du bouton de « submit » à « button » Clic droit sur la balise du bouton --> Modifier la balise <input> , cliquer sur l’événement « OnClick ». Dans la zone de texte ajouter « verif(nom_de_votre_formulaire) »
Validation des données d’un formulaire Télécharger le script formulaire.js Sous dreamweaver : Créer un formulaire. Insérer 3 champs textes et affecter des noms distincts et explicites aux champs « name ». Ajouter un bouton, Remplacer le champs « type = submit » par « type = button ». Appeler la fonction champsok() par l’intermédiaire de l’événement OnClick du bouton.
Réalisation d’un diaporama Télécharger le fichier « diaporama.js » Sous Dreamweaver : Créer un formulaire. Insérer 3 boutons dans ce formulaire. Modifier le champ « type » de chaque bouton de « submit » à « button ». Chaque bouton doit appeler la fonction correspondante par l’intermédiaire de l’évènement Onclick=« fonction_appelée() ». Insérer une image et nommer cette image ( name="image" par exemple).
Où trouver des scripts ? Quelques liens: (possèdent en général des tutoriaux, des exemples et de nombreuses sources assez bien commentées). http://www.editeurjavascript.com/scripts/scripts_search.php www.allhtml.com (site en anglais, contient plus de 800 scripts!) http://www.javascriptcity.com/ (site en anglais) http://javascript.internet.com/ (idem) http://www.javascripts.com/ (idem) http://www.toutjavascript.com/ http://www.editeurjavascript.com/ (moteur de recherche externe)