docInitiation à Javascript
download 
Plainte Transcription
Initiation à Javascript
Initiation à JAVASCRIPT Initiation à HTML [email protected] Master Créations Images et Multimédia Multilingue / CAWEB 1.Introduction • JavaScript a été développé par NETSCAPE. • c’est SUN qui a développé JAVA. • JavaScript != JAVA : JavaScript est un langage de scripts et JAVA un langage complet de programmation multiplateformes . • JavaScript a été conçu pour étendre les possibilités de HTML , c’est un langage léger, dit orienté objet. • Le code est saisi en général dans le document HTML. • Le code JavaScript n’est pas protégé et peu être lu et copié par n’importe qui. • Le script est exécuté au moment du chargement de la page HTML contenant le script . • JavaScript ne requiert pas un OS particulier , ni même un navigateur particulier. . 1 Introduction ( suite ) • • • Javascript n’est pas très sécurisé , les performances sont plutôt faibles et ne permettent pas des actions ciblés au niveau de l’ordinateur exécutant le script. Il existe un autre langage de script développé par Microsoft : VBS ( Visual Basic Script ) L’utilisation de VBS est déconseillé car il peut réaliser des intervention dans Windows , et plus particulièrement dans le système de fichier ( = dangereux : virus , execution de commandes système… ) 1.2 Un langage dit « orienté objet » • JavaScript est un langage de script moderne basé sur un interface graphique . • Lorsque l’on parle de langage orienté objet on parle d’objets , de propriétés et de méthodes . • Un objet est comparable à une chose : une voiture , un étudiant. Pour JavaScript il s’agit principalement des objets WINDOW , NAVIGATOR et DOCUMENT. • Chaque objet à des propriétés , une voiture à une certaine couleur , un étudiant à un certain age. • Les propriétés déterminent plus précisément les objets . Ex : voiture.couleur=rose etudiant.age=78 ou pour utiliser un véritable exemple : window.location=index.html navigator.appName=lynx 1.2 Un langage dit « orienté objet » (suite) • Les propriétés décrivent les objets avec plus de détails . • Les méthodes représentent les actions effectués par ces objets. Une voiture cale ou tombe en panne , un étudiant révise ses cours , va aux soirées étudiantes... voiture.cale() voiture.roule() etudiant.revisions() etudiant.teuf() dans un cas concret : window.open() window.close() • Les méthodes sont représentées avec des parenthèses , dans certaines on y trouvera des instructions plus précises ( passage de variables à une méthode… ) document.write(“super !!!!!!!!!!!!!!!!!!!!”) 2.0 Intégration de JavaScript dans HTML • Pour intégrer un script Javascript dans une page HTML, le code du script doit être placé à l'intérieur des balises <script> et </script>. Le langage doit être spécifié avec l'attribut language : <script language="javascript"> Ou (avec HTML 4x 5x) <script type="text/javascript"> • Généralement on entoure les scripts par des balises de commentaires (<!-- et -->), ce qui a pour effet de cacher le contenu des scripts aux anciens navigateurs non compatibles avec la balise <script>. <script language="javascript"> <!-document.writeln("Dernière modification de ce document : "+document.lastModified); --> </script> <noscript> Votre navigateur n'accepte pas le Javascr ipt. </noscript> 2.1 Intégration de JavaScript en « externe » • On peut choisir de ne pas intégrer un script dans le code HTML. Pour cela, il suffit d'indiquer à la balise <script> où le fichier script se trouve. Le fichier script doit porter l'extension .js Ex : <script src="Script.js" type="text/javascript"></script> 2.2 Premier script • Remarque : en JavaScript , chaque ligne est terminée par un point virgule (;) , ce n’est qu’avec function , if , else , while … qu’il n’y a pas de point virgule ! <html> <head> <title>Mon premier script</title> <script language="JavaScript" type="text/javascript"> <!- document.write(" Hello World !"); --> </script> </head> <body> <p>Impressionnant JavaScript...</p> </body> </html> 3.0 Programmation de scripts : notions de base • Les commentaires sont essentiels pour documenter les scripts , un commentaire sur plusieurs lignes est definis avec /* */ et un commentaire sur une seule ligne avec // : /* ce script est super bien commenté */ document.write(“Coucou c’est moi!“); // commentaire court • Une variable : kezako ? Un variable est une zone “mémoire” , ce sont des emplacements de la memoire de l’odinateur ou on stocke des données . • Javascript n’est pas un langage typé = on a pas besoin de définir de type pour une variable ( nombre , texte … ) JavaScript essaye de reconnaitre automatiquement le type des données. Pour nommer les variables il faut eviter les accents et les espaces . 3.0 Programmation de scripts : notions de base • • La methode prompt() permet de produire une boite de saisie utilisateur , la syntaxe de prompt est : Prompt(“Texte a afficher“,”valeur par défaut”) La methode alert() permet d’afficher une message dans une boite de dialogue . Alert(“Texte à afficher”) <html> <head> <title>Premiers essais en JavaScript</title> <script language="JavaScript" type="text/javascript"> <!-var nom; nom=prompt("Veuillez saisir votre nom !",""); alert("Heureux de faire votre connaissance, " + nom + " !"); --> </script> </head> <body> <p>JavaScript c’est classe !</p> </body> </html> 3.1 Programmation de scripts : les calculs • Faire des calculs en JavaScript est relativement simple , on utilisera les 4 opérateurs ( + , - , * , / ) ainsi que ++ et -• ++ ex : variable++ ( la variable sera incrementé de 1 , Variable++ n’est rien d’autre que variable= variable +1 • -- s’utilise de la même facon que ++ mais dans ce cas la on réduira la variable. variable– n’est rien d’autre que variable=variable-1 • Attention pour les nombres à virgules c’est le point (.) qui est utilisé et non pas la virgule (,) ! 3.2 Programmation de scripts : les calculs <html> <head> <title>La super calculatrice</title> <script language="JavaScript" type="text/javascript"> <!-var a, b, resultat; a=prompt("Nous multiplions : veuillez saisir un nombre !",""); b=prompt("Veuillez saisir le nombre b, il sera multiplié par a !",""); resultat=a*b; --> </script> </head> <body> <h1>La super calculatrice</h1> <script language="JavaScript" type="text/javascript"> <!– document.write("Le résultat correct est le suivant : " + resultat +" !"); --> </script> </body> </html> 3.3 Un exemple de boucle <html> <head> <title>Boucle FOR</title> <script language="JavaScript" type="text/javascript"> <!-var i, z; z=prompt("Combien de fois le texte doit-il être écrit ?",""); for(i=1;i<=z;i++) { document.write("ligne " + i + ": Ce cours sur JavaScript est trop bien !<br />"); } document.write("La tâche est accomplie."); --> </script> </head> <body> </body> </html> 3.4 Les fonctions et la programmation événementielle • • Une fonction est un « conteneur » pour plusieurs commandes ( macros… ) , ces instructions sont placées entre accolades { } Attention pour nommer les fonctions à ne pas employer de caractères spéciaux dit « reservés » % & ; @... Ainsi que certains mots clés : WHILE , IF , BREAK , ELSE , FUNCTION , VAR , RETURN , THIS … syntaxe : function nom() { instructions_de_la_fonctions; } function silver() { document.bgcolor=‘’silver’’; } 3.5 Une fonction afficher() <HTML> <HEAD> <TITLE>Message d'alerte</TITLE> <SCRIPT LANGUAGE="JavaScript"> document.write("On va afficher un message d'alerte"); function afficher() { alert("Vous venez de cliquer sur le bouton!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT type="button" value="Cliquez ici" onclick="afficher()"> </FORM> </BODY> </HTML> 3.5.2 Gerer les évenements • Une fonction ne démarre qu’au moment ou on décide de l’activer : il faut utiliser le gestionnaire d’événements • Un événement peut être le chargement d’une page (onLoad) , le clic sur un bouton ( onClick ) , le déplacement de la souris sur un graphique ( onMouserover ) … • Les principaux événements : – – – – – – – – – – – Onload : chargement d’un objet ( graphique , page ) onAbort : interruption du chargement d’une page onClick : clic de souris onDblclick : double clic de la souris sur un objet onMouseover : mouvement de souris sur un objet onFocus : un objet devient l’objet actif onChange : modification d’un objet ( saisie sur un formulaire par ex. ) onSubmit : envoi du contenu d’un objet onUnload : fermeture de fenêtre onReset : remise à zero d’un formulaire onBlur : saisi formulaire 3.5.3 Exemple de l’utilisation d’une fonction <html> <head> <title>Fonction</title> <script language="JavaScript" type="text/javascript"> <!-function couleurdefond(couleur) { document.bgColor=couleur; } --> </script> </head> <body> <h1>Document avec fonction</h1> <form> <input type="button" value="rose" onClick="couleurdefond('pink')" /> </form> </body> </html> 3.5.4 <html> <head> <title>Fonction</title> </head> <body> <h1>Document avec fonction</h1> <form> Couleur de fond<br/> <select Size=5 name=couleurdefond onChange="document.bgColor=this.options[this.selectedIndex].value"> <option value="aquamarine">aquamarine</option> <option value="chocolate">chocolate</option> <option value="darkred">dark red</option> <option value="darkkhaki">dark khaki</option> <option value="cadetblue ">cadet blue</option> <option value="darkgoldenrod">dark goldenrod</option> <option value="darkslateblue">dark slate</option> <option value="deeppink">deep pink</option> <option value="darksalmon">dark salmon</option> </select> </form> </body> </html> 3.5.4.2 <html> <head> <title>Super effet</title> </head> <body> <script language="javascript"> setTimeout("document.body.style.backgroundColor='red'", 1000); setTimeout("document.body.style.backgroundColor='green'", 2000); setTimeout("document.body.style.backgroundColor='yellow'", 3000); </script> </body> </html> 3.5.4.3 <html> <head> <title>Super effet</title> </head> <body> <script language="javascript"> var countdown=prompt("comb. de msecondes pour le super effet de la mort qui tue?"); function Cycle() { setTimeout("document.body.style.backgroundColor='red'", 100); setTimeout("document.body.style.backgroundColor='green'", 400); setTimeout("document.body.style.backgroundColor='yellow'", 700); } var timer=setInterval("Cycle()",1000); setTimeout("clearInterval(timer)",countdown); </script> </body> </html> 3.6 Démarrer une fonction dans un lien hypertexte <html> <head> <script language="JavaScript" type="text/javascript"> <!-function EpatezVosAmisEnJavaScript() { alert("Ca vous plait de lancer des fonctions ?"); } function PortnawakFonction() { alert("Banzaiiiiiiiiiiiiiiiiiiiiiii ( ninja style ) ?"); } //--> </script> </head> <body> <h1 onMouseover="PortnawakFonction()">Document avec fonction</h1> <form> <input type="button" value="Démarrer la fonction" onClick="EpatezVosAmisEnJavaScript()" /> </form> <p>Pour démarrer la fonction, veuillez cliquer <a href="javascript:EpatezVosAmisEnJavaScript()">ici</a>!</p> </body> </html> 3.7 Changer le fond d'écran <html> <head> <script language=''Javascript '' type="text/javaScript"> function FondEcran(image) { document.body.background=image; } </script> </head> <body background="monfondecran.png" > <form> <input value="Fond chouette" onclick="FondEcran('fondchouette.png')" type="button"> <input value="Fond beurk" onclick="FondEcran('fondbeurk.png')" type="button"> </form> </body> </html> 3.8 Gestion des fenetres <SCRIPT language= ''javascript''> function OuvrirPopup(page,nom,option) { window.open(page,nom,option); } </SCRIPT> • dans un lien : <A href="javascript:OuvrirPopup('page.html','','fullscreen=yes')">click</A> à l'ouverture de la page : <BODY onLoad="OuvrirPopup('page.html','nom','options...')"> 3.9 Fermer une fenetre • • • • • C'est la méthode close qui permet de fermer une fenêtre, en paramètre il faut lui passer le nom de la fenêtre à fermer ! <a href="javascript:self.close('nom_de_la_fenetre_');">Cliquez ici pour fermer la fenêtre</A> <A href="javascript:self.close('nom_de_la_fenetre_');"><img src="image_fermer.png"></A> <A href="javascript:;" onMouseOver="self.close('nom_de_la_fenetre_');" ><img src="image_fermer.png"></A> <a href="#" onclick="fenetre=window.open('page.html','nom','toolbar=0,menubar=0,location=0') ">popup</a> <a href="#" onclick="fenetre.close()">fermer</a> 4. Utilisation de JS aujoud'hui • AJAX : JavaScript est un des composants essentiels de la technique AJAX (Asynchronous Javascript And XML). La plupart des applications AJAX utilisent l'objet XMLHTTPRequest (XHR) pour envoyer une requête à un script serveur et parser dynamiquement les résultats de ce dernier via DOM. • AJAX est une des technologies phares du mouvement Web 2.0 qui définit les interfaces riches permettant à l'internaute une plus grande interactivité avec la page Web. • JSON (JavaScript Object Notation) : format utilisant la notation des objets JavaScript pour transmettre de l'information structurée, d'une façon plus compacte et plus proche des langages de programmation, que XML. • JS utilisé dans la plate-forme de développement Mozilla : thunderbird,firefox... (extensions xpi...) • JS aussi dans les applications Adobe (Photoshop, Illustrator...) notamment dans les scripts. Pratiques car non dépendants de l'OS (win,os x...) • OpenOffice/LibreOffice permet d'utiliser JavaScript comme langage de macros. 5.Références • • • • • • • • • • http://developer.mozilla.org/en/docs/Category:JavaScript http://javascript.developpez.com/cours/ http://javascript.developpez.com/faq/ http://www.developpez.net/forums/forumdisplay.php?f=23 http://dmoz.org//World/Fran%C3%A7ais/Informatique/Programmation/Langag http://fr.selfhtml.org/javascript/ http://www.w3schools.com/js/default.asp http://www.javascriptfr.com http://www.misfu.com/static/Javascript/sommaire_javascript.html http://www.dynamicdrive.com
Documents pareils
IUT - cours JS
directement dans le document HTML
Un script encadré par des balises HTML
Exécuté chez le client (pas d'appel réseau)
Interprété (compilation à la volée)
