Top Banner
Formation continue, septembre-octobre 2000 Javascript Javascript Gérald Collaud Centre NTE, Université de Fribourg
18

Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

Jun 04, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

Formation continue, septembre-octobre 2000

JavascriptJavascript

Gérald Collaud Centre NTE, Université de Fribourg

Page 2: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

ProgrammeProgramme

! Survol - Contexte! Avantages et inconvénients! Concepts principaux! Quelques exemples! Remarques! Quelques sites! Eléments du langage

! Ateliers / exercices

Page 3: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

SurvolSurvol

! Langage de programmation! Interprété! Généralement intégré au code HTML! Ajoute une certaine interactivité

Page 4: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Vue d'ensembleVue d'ensemble

Pages HTML statiques simplesPages HTML statiques simples

Image MapsImage Maps

JavascriptJavascript

HTML HTML étenduétendu

Feuilles de styleFeuilles de style

Scripts CGIScripts CGIJavaJava

XMLXML

VRMLVRML

SMILSMILVidéoVidéo

AudioAudio

ASPASP PHPPHP

PluginsPlugins

Page 5: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Avantages et inconvénientsAvantages et inconvénients

! Facile à apprendre! Développement rapide! Facile à débugger! Indépendant de la plate-forme! Petite période

d'apprentissage! interactivité

(écrire du texte ou du html, montrer des images, faire défiler du texte en bas de page, etc, )

! Méthodes existantes limitées! Difficile de cacher le code! Peu d'outils de développement ! Pas toujours stable! Pas toujours compatible! interaction limitée

pas question de lire ou d'écrire un fichier (sécurité)

Page 6: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Concepts principauxConcepts principaux

! Variables! Objets (notation par points)! Fonctions vs. méthodes! Evénements

Page 7: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

RudimentsRudiments

! Habituellement, le code se place entre la fin de la balise de titre </title> et la fin de la balise d'entête </head>, mais peut se mettre aussi ailleurs

! Commence par :<script language="Javascript">

! Se termine par :</script>

! Commentaires :// et /* -- */

Page 8: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple simpleExemple simple

<html> <head> <title>Premier script</title> <script language="JavaScript”>document.write(“ Hello world ! ”)</script></head><body>...</body> </html>

Page 9: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple : dialogueExemple : dialogue

<html> <head> <title>Premier script</title> <script language="JavaScript"><!-- Hidealert("Bonjour, ceci est un dialogue");// --> </script> </head><body></body> </html>

Page 10: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple : variableExemple : variable

<script language="JavaScript"><!-- Hidevar reponse = "Bonjour, Gérald"alert(reponse);// --> </script>

Page 11: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple : dialogueExemple : dialogue

<script language="JavaScript"><!-- Hidevar reponse = prompt("Quel est votre nom ?", "")alert("Bonjour, " + reponse);// --> </script>

Page 12: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple : événements et fonctionsExemple : événements et fonctions

<html> <head><title>Premier script</title> <script language="JavaScript">function giveDate() {

alert(document.lastModified);}</script></head><body bgcolor=ffffff><a href="#" onClick="giveDate();">Ce lien affiche un dialogue avec la date de modification du document</a></body> </html>

Page 13: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Exemple : objets et fonctionsExemple : objets et fonctions

<script language="JavaScript"><!-- Hidedocument.write("<h2>This page was last updated on " +document.lastModified + "</h2>")// --> </script>

Page 14: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

RemarquesRemarques

! Javascript vs. Java! Javascript vs. Javascript! Livre de référence! View source! Expérimentez

Page 15: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Quelques sitesQuelques sites

! Touchez les carréshttp://www.hotwired.com/webmonkey/98/03/image_swap.html

! Calculs simpleshttp://www.hotwired.com/webmonkey/98/03/calculations.html

! Validation d'un formulairehttp://mis.huji.ac.il/ttt/validate.htmlhttp://mis.huji.ac.il/ttt/hase.validate.html

Page 16: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Collections Collections d'exemplesd'exemples

! Calculatrices, Calendriers, Menus, Table de multiplication, Utilisation des cookies, Encryption, ...http://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.examples.html

! Divershttp://mis.huji.ac.il/ttt/javascript.examples.htmlhttp://tanega.com/java/java.html

Page 17: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

Sites en Sites en franfrançaisçais

! Généralhttp://www.commentcamarche.net/index.html

! Tutorielhttp://jlcastellani.free.fr/jscript.htm

!

http://sarcher.citeweb.net/javascript/! Quelques références de yahoo france :

http://fr.dir.yahoo.com/informatique_et_multimedia/Langages_de_programmation/JavaScript/

! Exempleshttp://www.chez.com/helleven/java/http://www.xhtml.net/langages/javascript/

Page 18: Comment créer un site web pour la formationperso.menara.ma/~kamouch/cours/javascript2.pdf · G. Collaud, Création de pages web, septembre-octobre 2000 . Programme! Survol - Contexte!

G. Collaud, Création de pages web, septembre-octobre 2000

ElEléments du langageéments du langage

! Variables! Séquence! Choix! Boucles! Procédures et Fonctions! Méthodes! Interaction avec HTML

" balise script" objets" événements