A/ Utilisation de Javascript UE Libre : Internet et composition de pages Web TP n 3 Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web. Ainsi le langage Javascript est fortement dépendant du navigateur appelant la page web dans laquelle le script est incorporé, mais en contrepartie il ne nécessite pas de compilateur, contrairement au langage Java, avec lequel il a longtemps été confondu. A quoi ressemble un script? Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript. Les balises annonçant un code Javascript sont les suivantes : <SCRIPT language="javascript"> Placez ici le code de votre script </SCRIPT> Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body. Il existe plusieurs façons d'inclure du JavaScript dans une page HTML : Grâce à la balise <SCRIPT> En mettant le code dans un fichier Grâce aux événements Exemple, tapez cette cette page et nommez la monpremierjs.htm. Testez là. <HTML> <HEAD>
<TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="javascript"> <!-- alert("voici un message d\'alerte!"); // --> </SCRIPT> </BODY> </HTML> Le code peut également être mis à plusieurs endroits.un peu dans le head et un peu dans le body. Par exemple, créez une page nommée montexte.htm, écrivez y du texte. Dans la partie Head, vous écrirez ce code javascript : <script type="text/javascript"> <!-- Debut function imprime() { if (typeof(window.print)!= 'undefined') { window.print(); } } // --> </script> Dans la partie body, en bas de page, vous écrirez le code htm suivant : <a href="#" onclick="imprime(); return false">imprime la page/a> Lancez votre page et testez la. Que fais ce bout de javascript?
Inclure du javascript grace à un fichier externe Il est possible de mettre les codes de JavaScript en annexe dans un fichier Le code à insérer est le suivant : <SCRIPT LANGUAGE="Javascript" SRC="url/fichier.js">Code à éxécuter si cela ne fonctione pas </SCRIPT> Où url/fichier.js correspond au chemin d'accès au fichier contenant le code en JavaScript, sachant que si celui-ci n'existe pas le navigateur exécutera le code inséré entre les 2 balises. Récupérez l archive TP3.zip, et ouvrez la. Dans le répertoire javascript, créez une page web appelée bientot.htm, cette page aura un fond rouge. Dans le head, vous rajouterez un appel au javascript qui s appelle noel.js et qui vous est fourni. Que constatez vous? B/ Utilisation des animations flash Depuis plusieurs années, vous pouvez voir fleurir sur les sites de la galaxie Web des petites animations colorées et interactives. Que ce soit des petits jeux, des radios, ou encore simplement de la publicité : Flash est maintenant omniprésent! Flash est un outil très puissant sur le web, car il autorise une interaction avec l'utilisateur que d'autres technologies comme le Javascript auraient du mal à fournir. Dans Flash, on trouve deux parties distinctes : le graphisme et le scripting. Le scripting est une façon d'utiliser flash comme un langage de programmation... ce n'est pas ce que nous allons faire aujourd'hui, nous allons juste voir comment utiliser un programme en flash et l'utiliser dans une page web. Voici comment intégrer du flash dans une page html Ecrivez ce code à l'endroit précis ou vous voulez que votre animation apparaisse. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=6,0,29,0" width="800" height="600"> <param name="movie" value="votre animation.swf"> <param name="quality" value="high"> <embed src="votre animation.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="800" height="600"></embed></object>
N'oubliez pas : de mettre le chemin de votre animation De changer la taille suivant vos désires De mettre la qualitée high, medium, low Créez une page appelée goodies.htm et insérez l animation flash fournie dans le repertoire flash de l archive. Testez votre page. C/ La mise en page sans css (à l ancienne!) Nous allons essayer de faire cette page : Avec les ressources fournies dans l archive (répertoire miseenpage), Essayez tout d abord de créer une page dont le fond de page sera celui du décor bois. Ensuite créez un tableau de 1 colonne 2 lignes, dans la première ligne, vous écrirez le message : Bievenue sur le site du Père noël. Dans la seconde ligne, vous créez ceci : Crééz un tableau avec une bordure de quelques pixels de couleur blanche, faites en sorte que le fond du tableau soit rouge. Ce tableau possèdera 1 ligne et 2 colonnes. Dans la première colonne, vous insérez la photo du père noël, dans l autre colonne. Insérez ceci :
Vous insérez un tableau de 3 lignes et 2 colonnes. Dans la première colonne et dans chacune des cases, vous insérez l image d une boule de noel, dans l autre colonne, les textes en couleur. Vous devrez obtenir la même page. Nous allons désormais dynamiser un peu le site. Modifiez votre page pour faire tomber de la neige avec le javascript testé en début de tp. Trouvez sur internet un javascript qui permet de faire défiler du texte.vous l appliquerez au texte «Bienvenue sur le site du père noel». Trouvez ensuite un effet qui s appelle «RollOver sur des images» et utilisez dans le site pour modifier la couleur de la boule au passage de la souris. Insérez un lien sur le premier texte afin que la page affichée soit l animation flash Insérez un lien sur le deuxième texte afin que la page affichée soit un texte sur les rênes du père noël avec leur photo et noms Insérez un lien sur le troisième texte afin que la page affichée soit un formulaire permettant d écrire une lettre au père noel. Ce formulaire doit permettre de saisir le nom de l enfant, son texte et son adresse email. Le formulaire fera apparaitre une image à droite du formulaire. Le formulaire sera traité par une page appelée lettre.php Créez une page appelée lettre.htm qui aura pour fond l image de lettre fournie dans le répertoire php et qui permet d afficher grâce à un tableau le texte de l enfant. D/ L utilisation du PHP PHP est un langage interprété (un langage de script) exécuté du côté serveur (comme les scripts CGI, ASP,...) et non du côté client (un script écrit en Javascript ou une applet Java s'exécute sur votre ordinateur...). La syntaxe du langage provient de celles du langage C, du Perl et de Java. Ses principaux atouts sont : Une grande communauté de développeurs partageant des centaines de milliers d'exemples de script PHP ; La gratuité et la disponibilité du code source (PHP est distribué sous licence GNU GPL) ; La simplicité d'écriture de scripts ; La possibilité d'inclure le script PHP au sein d'une page HTML (contrairement aux scripts CGi, pour lesquels il faut écrire des lignes de code pour afficher chaque ligne en langage HTML) ; La simplicité d'interfaçage avec des bases de données (de nombreux SGBD sont supportés, mais le plus utilisé avec ce langage est MySQL, un SGBD gratuit
disponible sur de nombreuses plateformes : Unix, Linux, Windows, MacOs X, Solaris, etc...) ; L'intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.). Appelez l enseignante une fois que vous en serez la.