Java script DU CMSI : Création et Maintenance des Sites Internet
Plan Évolution vers le web dynamique Définition du langage JavaScript Avantages Difficultés Codage Exercices
Évolution -1- Avant pages Internet «figées» Le contenu et la forme sont liées Toute modification du contenu passe par des modifications «longues» Évolution vers un Internet à fort contenu Le navigateur Internet devient le meilleur ami du webmaster ou du «gestionnaire de contenu» Les données sont stockées dans une base Le site appelle les données et construit la page en fonction des requêtes (clics, recherche, interactions diverses) On distingue désormais le web statique (HTML) du web dynamique (PHP, JavaScript, ASP, JSP )
Évolution -2- Le langage initial du web : le HTML Version actuelle 4.01 http://www.w3.org/tr/html4/ A conquis par sa simplicité! Des insuffisances : peu d interactivité, très statique, simple par la mise en forme et liens hypertextes entre les documents D autres langages : Javascript, XML, CSS.viennent compléter le HTML D autres technologies : Flash, logiciels de photos,
Définition Le JavaScript, à l'origine le langage s'appelait Live Script, a été développé par Netscape, est souvent utilisé comme un langage de script côté client (dans le navigateur). Code Javascript intégré aux pages HTML. Code interprété par le navigateur client (interprétation dépendante du type et de la version de navigateur). code PHP (interprété du coté serveur). JavaScript est un langage objet (création d objets associés à une page Web, avec propriétés et méthodes) événementiel (association d actions aux événements déclenchés par l utilisateur (passage de souris, clic, saisie clavier, etc...). Attention : Javascript n est pas java!
Avantages de JavaScript Supporté (par défaut) par les principaux navigateurs, ne nécessite pas de plug-in particulier. Accès aux objets contenus dans un document HTML (possibilité de les manipuler relativement simple). Possibilité de mettre en place des animations sans l inconvénient des longs temps de chargement nécessités par les données multimédia (ça dépends de la connexion!) Langage relativement sécurisé : il est impossible de lire ou d écrire sur le disque client (impossibilité de récupérer un virus par ce biais).
Difficultés de JavaScript Comme pour HTML, il n y a pas de standard pour l accès aux différents objets d un document (dépendant du navigateur). Si le script ne fonctionne pas, la page est, le plus souvent, inutilisable. Les utilisateurs peuvent empêcher l exécution de code Javascript, souvent en raison des erreurs générées par les scripts, ou encore en raison de la nature de l interaction (apparition de nouvelles fenêtres, ). Lenteur d exécution des scripts, ainsi que pour les scripts complexes, un certain délai avant le démarrage
Codage Comment intégrer du code JavaScript dans une page HTML? Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript : Dans l en entête de page, Dans le corps de la page, Dans un événement d'un objet de la page.
Syntaxe Similarités avec les langages C, PHP, Java Commentaires Sur une ligne : // commentaire Sur plusieurs lignes : /* commentaire */ Séparateur d instructions Point virgule : instruction ; Groupement d instructions Accolades : { instructions }
Structure classique d une page HMTL avec du JavaScript <HTML> <HEAD> <TITLE>Titre de page</title> <SCRIPT language="javascript"> <!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript//--> // Fin de la partie cachée </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> <!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript//--> // Fin de la partie cachée</script> </BODY> </HTML>
TD 1 Exécutez le script suivant : <SCRIPT language="javascript"> <!-- alert("voici un message d alerte!"); //-->
Intégration de JavaScript dans l HTML -2- Intégration dans un événement d'un objet de la page Sous la forme d un couple attribut-valeur HTML : Attribut = événement déclencheur Valeur = code javascript déclenché Exemple :... <FORM name="formulaire" onsubmit="mafonction()">...
Déclenchement d instructions javascript Événements détectables Nom de l événement précédé de on : onclick, onblur, onchange, onfocus, onload, onmouseover, onselect, onunload, onsubmit Association événement - action Dans le code HTML, identique à la déclaration d une propriété : <nom_élément attribut i = propriété i événement j = "action j " >
TD 2 <HTML> <HEAD> <TITLE>Exemples de déclenchements</title> <SCRIPT> function saluer() { alert("bonjour!"); } </SCRIPT> </HEAD> <BODY> <H1>Exécution immédiate</h1> <SCRIPT>saluer();</SCRIPT> <H1>Exécution sur événement onclick</h1> <FORM><INPUT type="button" name="bouton" value="salut" onclick="saluer()"> </FORM> <H1>Exécution sur protocole javascript:</h1> <A HREF="javascript:saluer()">pour saluer</a> </BODY> </HTML>
TD 3 Cherchez des sites proposant du code JavaScript et intégrez les codes des exemples ci-dessus dans votre page Web : Une horloge Un calendrier Une animation