Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI

Dimension: px

Commencer à balayer dès la page:

Download "Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI"

Adélaïde Laurin
il y a 8 ans
Total affichages :

1 Java script DU CMSI : Création et Maintenance des Sites Internet

2 Plan Évolution vers le web dynamique Définition du langage JavaScript Avantages Difficultés Codage Exercices

3 É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 )

«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

4 Évolution -2- Le langage initial du web : le HTML Version actuelle 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,

Des insuffisances : peu d interactivité, très statique, simple par la mise en forme et liens

5 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!

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).

6 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).

Possibilité de mettre en place des animations sans l inconvénient des longs temps de chargement nécessités par les données

7 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

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

8 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.

d'intégrer du code JavaScript : Dans l en entête de page, Dans

9 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 }

lignes : /* commentaire */ Séparateur d instructions Point

10 Structure classique d une page HMTL avec du JavaScript <HTML> <HEAD> <TITLE>Titre de page</title> <SCRIPT language="javascript">  // Fin de la partie cachée </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript">  // Fin de la partie cachée</script> </BODY> </HTML>

-- // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript//--> // Fin de la partie cachée

11 TD 1 Exécutez le script suivant : <SCRIPT language="javascript">

12 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()">...

attribut-valeur HTML : Attribut = événement déclencheur Valeur =

13 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 " >

onunload, onsubmit Association événement - action Dans le code HTML, identique à la

14 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>

événement onclick</h1> <FORM><INPUT type="button" name="bouton" value="salut" onclick="saluer()"> </FORM>

15 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

Documents pareils

<Insert Picture Here>ApExposé. Cédric MYLLE 05 Février 2008. Exposé Système et Réseaux : ApEx, Application Express d Oracle

<Insert Picture Here>ApExposé. Cédric MYLLE 05 Février 2008. Exposé Système et Réseaux : ApEx, Application Express d Oracle ApExposé Cédric MYLLE 05 Février 2008 Exposé Système et Réseaux : ApEx, Application Express d Oracle Sommaire Introduction Les besoins L outil ApEx Le développement d applications