<HTML> <HEAD> <TITLE>Mon premier script</TITLE> </HEAD> <H1>Mon premier script...</H1> <BODY> <HR> <SCRIPT LANGUAGE="JavaScript"> <!-- Masquage du code pour les navigateurs non compatibles document.write("Dernière mise à jour le " + document.lastModified + ".") // fin du masquage du script --> </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function alerteUtilisateur(messageAlerte) { alert(messageAlerte) } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Cliquez ici !" onClick="alerteUtilisateur('Aïe ne cliquez pas si fort !')"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété window.status</TITLE> <SCRIPT LANGUAGE="JavaScript"> function showStatus(msg) { window.status = msg return true } </SCRIPT> </HEAD> <BODY> <A HREF="http://home.netscape.com" onMouseOver="return showStatus('Aller à la page Web de votre navigateur')">Home</A><P> <A HREF="http://home.netscape.com" onMouseOver="return showStatus('Visiter la page Web de Netscape')">Netscape</A> </BODY> </HTML>Home
<script> pointBlanc = new Image(); pointRouge = new Image(); pointBlanc.src ="../images/blanc.gif" pointRouge.src="../images/rouge.gif" function survol(sens) { switch (sens) { case "entree" : document.images[0].src=pointRouge.src; break; case "sortie" : document.images[0].src=pointBlanc.src; break; } } </script> <img src="../images/blanc.gif"> <b> <a href="merci.html" onMouseOver=survol("entree") onMouseOut=survol("sortie")> Voulez vous cliquer ici ?</a></b>Voulez vous cliquer ici ?
<SCRIPT> function ignorelientotal(evt) { // On teste s'il s'agit d'un CLICK sur un bouton // (la propritŽt type n'existe pas dans le cas d'un lien if (evt.target.type == 'button') { // Si c'est un bouton on diffuse l'ŽvŽnement // de faon ˆ provoquer l'exŽcution du gestionnaire // d'ŽvŽnement que l'on a programmŽ (avec l'attribut onClick) routeEvent(evt) // On retourne true pour que le gestionnaire d'ŽvŽnement // prŽprogrammŽ s'exŽcute Žgalement (dans ce cas prŽcis // cela n'est pas vraiment utile car un bouton n'a pas de // gestionnaire d'ŽvŽnement prŽprogrammŽ). return true } // Si c'est un lien, on ne route pas l'ŽvŽnement et on renvoie false // de faon ˆ ce qu'aucun gestionnaire ne s'exŽcute return false } function ignorelienpartiel(evt) { // On diffuse l'ŽvŽnement de faon ˆ provoquer l'exŽcution du // gestionnaire d'ŽvŽnement que l'on a programmŽ (avec l'attribut onClick) // aussi pour les boutons que pour les liens routeEvent(evt) if (evt.target.type == 'button') { return true } return false } </SCRIPT> <FORM> <CENTER> <INPUT TYPE="button" VALUE="Desactiver les liens" onClick="window.captureEvents(Event.CLICK); window.onclick = ignorelientotal"><BR> <INPUT TYPE="button" VALUE="Desactiver les liens (mais pas les gestionnaires d'evenements)" onClick="window.captureEvents(Event.CLICK); window.onclick = ignorelienpartiel"><BR> <INPUT TYPE="button" VALUE="Activer les liens" onClick="window.releaseEvents(Event.CLICK)"> </FORM> Appuyez donc <A HREF="chrono.html" TARGET="exemple">ici</A> ou <A HREF="jour.html" TARGET="exemple" onClick="alert('Je suis encore lˆ')">là</A>. </CENTER>Appuyez donc ici ou là.
<script> un = new Image(); deux = new Image(); un.src = "../images/UN.GIF"; deux.src = "../images/DEUX.GIF"; </script> <a href=javascript:void(0) onMouseOver="document.images[0].src=deux.src" onMouseOut="document.images[0].src=un.src"> <img src=UN.GIF border=no></a></body></html>Et voici le résultat.
<SCRIPT> var i = 255 // Retourne une cha”ne de caractres composŽe des valeurs // hexadŽcimales des 3 nombre r g et b // r g et b doivent tre compris entre 0 et 256 function rgb(r, g, b) { // Retourne la valeur hexadŽcimale du nombre num // num doivent tre compris entre 0 et 256 function hex(num) { function lettre(c) { switch (c) { case 10 : return 'A' break case 11 : return 'B' break case 12 : return 'C' break case 13 : return 'D' break case 14 : return 'E' break case 15 : return 'F' break default : return c+'' } } dizaine = lettre(Math.floor(num/16)) unite = lettre(num%16) return dizaine + unite } return '#'+hex(r)+hex(g)+hex(b) } // Change la couleur du fond en fonction de la position de la souris function change(evt) { couleur = Math.floor((evt.layerX/window.innerWidth)*255) document.bgColor = rgb(255, 0, couleur) } // Capture les dŽplacements de souris window.captureEvents(Event.MOUSEMOVE) // Associe la fonction change au dŽplacement de la souris window.onmousemove=change </SCRIPT> <BODY> Bougez votre souris de droite à gauche pour modifier la couleur du document... </BODY>
Et voici le résultat.
<HTML> <HEAD> <TITLE>Banderolle dans la barre d'état</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var msg = "Bienvenue à bord..." var delay =150 var timerId function scrollMsg() { window.status = msg // décale le premier caractère de msg // à la fin de msg msg = msg.substring (1, msg.length) + msg.substring (0, 1) // appel récursif à cette fonction timerId = setTimeout("scrollMsg()", delay) } // --> </SCRIPT> </HEAD> <BODY onLoad="scrollMsg()"> </BODY> </HTML>Voir cet exemple
<HTML> <HEAD> <TITLE>Horloge dans la barre d'état</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var flasher = false // calcule l'heure, détermine l'état de la variable flasher, // et insère l'heure dans la barre d'état chaque seconde function updateTime() { var now = new Date() var theHour = now.getHours() var theMin = now.getMinutes() var theTime = "" + ((theHour > 12) ? theHour - 12 : theHour) theTime += ((theMin < 10) ? ":0" : ":") + theMin theTime += (theHour >= 12) ? " pm" : " am" theTime += ((flasher) ? " " : "*") flasher = !flasher window.status = theTime // appel récursif de la fonction chaque seconde timerID = setTimeout("updateTime()",1000) } //--> </SCRIPT> </HEAD> <BODY onLoad="updateTime()"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété window.defaultStatus</TITLE> </HEAD> <BODY onLoad="window.defaultStatus='Bienvenue sur mon site Web'"> <A HREF="http://home.netscape.com" onMouseOver="window.status='Aller à la page Web de votre navigateur'; return true">Page d'accueil</A><P> <A HREF="http://home.netscape.com" onMouseOver="window.status='Visiter la page Web de Netscape'; return true">Netscape</A> </BODY> </HTML>Page d'accueil
Les propriétés parent.
Propriété window.location
Propriété window.search
<HTML> <HEAD> <TITLE>Méthode window.alert()</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> alert("Ce document a été modifié pour la dernière fois le " + document.lastModified) </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Méthode window.confirm()</TITLE> <SCRIPT LANGUAGE="JavaScript"> function clearTable() { if (confirm("Voulez-vous vraiment effacer le tableau ?")) { alert("Effacement du tableau...") //instructions pour effacer les champs du tableau } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="effacer" VALUE="Effacer le tableau" onClick="clearTable()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Méthode window.prompt()</TITLE> <SCRIPT LANGUAGE="JavaScript"> function populateTable() { var howMany = prompt("Vous désirez un tableau de combien de cases ?","") if (howMany != null && howMany != "") { alert("Construction d'un tableau de " + howMany + " cases") // à supprimer dans un vrai script //instructions pour construire le tableau } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="construire" VALUE="Créer un tableau..." onClick="populateTable()"> </FORM> </BODY> </HTML>
<html> <head> <title>onClick sur un lien</title> <script> function creerFenImage() { fiRef = window.open ("","fenImage", "width=290,height=200,scrollbars=no, toolbar=no, location=no, directories=no,status=no") } </script> <body> <a href="elJem.jpg" target="fenImage" onClick="creerFenImage()"> <b>AMPHITHÉÂTRE D'EL-JEM</b></a> </body> </html>AMPHITHÉÂTRE D'EL-JEM
<HTML> <HEAD> <TITLE>Nouvelle fenêtre</TITLE> <SCRIPT LANGUAGE="JavaScript"> function makeNewWindow() { var newWindow = window.open("","","status,height=200,width=300") if (newWindow != null) { // assemble le contenu de la nouvelle fenêtre var newContent = "<HTML><HEAD><TITLE>Fenêtre créée par script</TITLE></HEAD>" newContent += "<BODY><H1>Voici la nouvelle fenêtre</H1>" newContent += "</BODY></HTML>" // injecte le code HTML dans la nouvelle fenêtre newWindow.document.write(newContent) newWindow.document.close() } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="nouvelle" VALUE="Créer une nouvelle fenêtre" onClick="makeNewWindow()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Fermeture d'une fenêtre</TITLE> <SCRIPT LANGUAGE="JavaScript"> // déclaration d'une variable globale comportant le nom de la fenêtre var newWindow = null function makeNewWindow() { // stockage de l'objet nouvelle fenêtre dans une variable globale newWindow = window.open("","","width=200,height=300") if (newWindow != null) { // assemble le contenu à injecter dans la nouvelle fenêtre var newContent = "<HTML><HEAD><TITLE>Fenêtre créée par script</TITLE></HEAD>" newContent += "<BODY><H3>Il existe diverses façons de me fermer</H1>" newContent += "<FORM><INPUT TYPE='button' VALUE='Fermeture' onClick='self.close()'></FORM>" newContent += "</BODY></HTML>" // écrit le code HTML dans le nouveau document newWindow.document.write(newContent) } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="nouvelle" VALUE="Nouvelle fenêtre" onClick="makeNewWindow()"> <INPUT TYPE="button" NAME="fermeture" VALUE="Fermer nouvelle fenêtre" onClick="if (newWindow !=null) newWindow.close()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Changement de couleurs</TITLE> <SCRIPT LANGUAGE="JavaScript"> function defaultColors() { return "BGCOLOR='#c0c0c0' VLINK='#551a8b' LINK='#0000ff'" } function uglyColors() { return "BGCOLOR='yellow' VLINK='pink' LINK='lawngreen'" } function showColorValues() { var result = "" result += "Valeur de bgColor : " + newWindow.document.bgColor + "\r\n" result += "Valeur de vlinkColor : " + newWindow.document.vlinkColor + "\r\n" result += "Valeur de linkColor : " + newWindow.document.linkColor + "\r\n" document.forms[0].results.value = result } function drawPage(colorStyle) { var thePage = "" thePage += "<HTML><HEAD><TITLE>Echantillon</TITLE></HEAD><BODY " if (colorStyle == "défaut") { thePage += defaultColors() } else { thePage += uglyColors() } thePage += ">Pour que vous puissiez voir l'effet de ces changements de couleurs sur les divers éléments d'un document HTML, voici un <A " thePage += "HREF='http://www.nowhere.com'>premier site</A> à visiter, et un <A HREF='http://home.netscape.com'>deuxième</A>." thePage += "<P>Le bouton ci-dessous sert uniquement à voir la façon dont il s'inscrit sur un fond de couleur différent" thePage += "<FORM>" thePage += "<INPUT TYPE='button' NAME='sample' VALUE='Bouton ordinaire'>" thePage += "</FORM></BODY></HTML>" newWindow.document.open() newWindow.document.write(thePage) newWindow.document.close() showColorValues() } var newWindow = window.open("","","height=250,width=300") </SCRIPT> </HEAD> <BODY> En cliquant sur les deux boutons ci-dessous, vous agissez sur le jeu de couleurs employé dans la fenêtre d'échantillon. <FORM> <INPUT TYPE="button" NAME="Défaut" VALUE='Couleurs par défaut' onClick="drawPage('défaut')"> <INPUT TYPE="button" NAME="Berk" VALUE="Couleurs désagréables" onClick="drawPage('berk')"><P> <TEXTAREA NAME="results" ROWS=4 COLS=35></TEXTAREA> </FORM> <SCRIPT LANGUAGE="JavaScript"> drawPage("défaut") </SCRIPT> </BODY> </HTML>
<SCRIPT LANGUAGE="JavaScript1.2"> var Fen // Fenetre quÕon va ouvrir var interval = null // Cycle rŽpŽtŽ tous les diziemes de seconde // Fonction appelŽe tous les diziemes de seconde // Calcule les coordonnŽes de la fenetre qui tombe // en fonction du temps function tombe () { // Le temps passe t++ // un peu de physique y = t*t + v0*t + y0 v = 2*t + v0 // On ne sort pas de l'Žcran if (y >= screen.height-Fen.outerHeight) { y = screen.height-Fen.outerHeight // On rebondit en perdant un peu de vitesse v0 = -0.7 * v y0 = screen.height-Fen.outerHeight t = 0 // Il faut bien s'arrter un jour if (Math.abs(v0) < 5) { if (interval) { clearInterval(interval) interval = null } } } // On dŽplace la fenetre Fen.moveTo(Fen.screenX,y) } // Petite fonction pour lancer le tout function cestparti() { // On initialise la hauteur et la vitesse initiales y0 = Fen.screenY v0 = 0 t = 0 // On lance le cycle de chute if (!interval) { interval = setInterval(tombe, 100) } } // On ouvre la fentre Fen = window.open('', '', 'outerWidth=110,outerHeight=150,screenX=110,screenY=110') Fen.document.write('<CENTER>Si vous appuyez <A HREF="javascript:void(window.opener.cestparti())">ici</A> je tombe...<CENTER>') Fen.document.close() </SCRIPT> Ce document crée une nouvelle fenêtre. Lorsque l'on clique sur le lien contenu dans cette fenêtre, celle-ci tombe.Ce document crée une nouvelle fenêtre. Lorsque l'on clique sur le lien contenu dans cette fenêtre, celle-ci tombe.
<HTML> <HEAD> <TITLE>Compte à rebours</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var running = false var endTime = null var timerID = null function startTimer() { running = true now = new Date() now = now.getTime() endTime = now + (1000 * 60 * 1) showCountDown() } function showCountDown() { var now = new Date() now = now.getTime() if (endTime - now <= 0) { stopTimer() alert("Le devoir est terminé. Posez vos crayons.") } else { var delta = new Date(endTime - now) var theMin = delta.getMinutes() var theSec = delta.getSeconds() var theTime = theMin theTime += ((theSec < 10) ? ":0" : ":") + theSec document.forms[0].timerDisplay.value = theTime if (running) { timerID = setTimeout("showCountDown()",1000) } } } function stopTimer() { clearTimeout(timerID) running = false document.forms[0].timerDisplay.value = "0:00" } //--> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="startTime" VALUE="Compte à rebours de 1 minute" onClick="startTimer()"> <INPUT TYPE="button" NAME="clearTime" VALUE="Arrêter compte à rebours" onClick="stopTimer()"><P> <INPUT TYPE="text" NAME="timerDisplay" VALUE=""> </FORM> </BODY> </HTML>
En voici un mieux.
<SCRIPT> // Declaration des variables var reste=59 var interval=null // Chargement des images reprŽsentant les chiffre Chiffres = new Array(10) for (i=0;i<10;i++) { Chiffres[i] = new Image() Chiffres[i].src = '../images/' + i + '.gif' } // Definition de la fonction appelŽe chaque seconde function Ecoule() { // On modifie lâaffichage window.document.dizaine.src = Chiffres[Math.floor(reste/10)].src window.document.unite.src = Chiffres[reste%10].src if (reste == 0) { // Une fois les 59 secondes ŽcoulŽes, on le recharge. clearInterval(interval) alert('Trop tard !!!') interval=null reste=59 } reste-- } </SCRIPT> <FORM> <CENTER> <IMG HSPACE=0 NAME="dizaine" SRC="../images/5.gif"> <IMG HSPACE=0 NAME="unite" SRC="../images/9.gif"><BR> <INPUT TYPE=BUTTON VALUE="Debut" onClick="if (!interval) { interval=setInterval(Ecoule, 1000) }"> <INPUT TYPE=BUTTON VALUE="Pause" onClick="clearInterval(interval); interval = null"> </CENTER> </FORM>
<HTML> <HEAD> <TITLE>Extraction du chemin d'accès</TITLE> <SCRIPT LANGUAGE="JavaScript"> // fonction pour extraire de l'URL le répertoire où est stocké le document function getDirPath(URL) { var result = unescape(URL.substring(0,(URL.lastIndexOf("/")) + 1)) return result } // cette fonction affiche une fenêtre d'avertissement // avec indication du répertoire extrait de l'URL function showDirPath(URL) { alert(getDirPath(URL)) } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Répertoire du document actuel" onClick="showDirPath(window.location.href)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété location.hash</TITLE> <SCRIPT LANGUAGE="JavaScript"> function goNextAnchor(where) { window.location.hash = where } </SCRIPT> </HEAD> <BODY> <A NAME="début"><H1>Haut du document</H1></A> <FORM> <INPUT TYPE="button" NAME="suivant" VALUE="Ancrage suivant" onClick="goNextAnchor('section1')"> </FORM> <HR> <A NAME="section1"><H1>Section 1</H1></A> <FORM> <INPUT TYPE="button" NAME="suivant" VALUE="Ancrage suivant" onClick="goNextAnchor('section2')"> </FORM> <HR> <A NAME="section2"><H1>Section 2</H1></A> <FORM> <INPUT TYPE="button" NAME="suivant" VALUE="Ancrage suivant" onClick="goNextAnchor('section3')"> </FORM> <HR> <A NAME="section3"><H1>Section 3</H1></A> <FORM> <INPUT TYPE="button" NAME="suivant" VALUE="Retour début document" onClick="goNextAnchor('début')"> </FORM> <HR><P> <SCRIPT LANGUAGE="JavaScript"> document.write("<I>Ce document comporte " + document.anchors.length + " ancrages</I>") </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Objet History</TITLE> <SCRIPT LANGUAGE="JavaScript"> function showCount() { var histCount = window.history.length if (histCount > 5) { alert("Ma foi, vous avez été bien occupé. Jusqu'à présent, vous avez visité " + histCount + " pages.") } else { alert("Vous avez visité " + histCount + " pages Web.") } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="activity" VALUE="Activité de navigation" onClick="showCount()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Arrière toute !</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Retour en arrière" onClick="history.back()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Méthode Go()</TITLE> <SCRIPT LANGUAGE="JavaScript"> function journey() { history.go("HTML") } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Revenir en arrière" onClick="journey()"> </FORM> </BODY> </HTML>
<SCRIPT LANGUAGE="JavaScript"> update = new Date(document.lastModified) theDate = update.getDate() theMonth = update.getMonth() + 1 theYear = update.getYear() document.writeln("<I>Dernière modification le : " + theDate + "/" + theMonth + "/" + theYear + "</I>") </SCRIPT>
<HTML> <HEAD> <TITLE>Ecriture en direct</TITLE> </HEAD> <FRAMESET ROWS="70%,30%"> <FRAME NAME="Cadre1" SRC="direct1.html"> <FRAME NAME="Cadre2" SRC="direct2.html"> </FRAMESET> </HTML>Le fichier direct1.html contient :
<HTML> <HEAD> <TITLE>Générateur de document HTML</TITLE> <SCRIPT LANGUAGE="JavaScript"> function takePulse(form) { var msg = "<HTML><HEAD><TITLE>Rigoloscopie avec " + form.firstname.value + "</TITLE></HEAD>" msg += "<BODY BGCOLOR='salmon'><H1>Bonne journée " + form.firstname.value + " !</H1><HR>" for (var i = 0; i < form.how.length; i++) { if (form.how[i].checked) { msg += form.how[i].value break } } top.frames[1].document.open() top.frames[1].document.write(msg) top.frames[1].document.close() } function getTitle() { alert("Le titre du document dans le cadre inférieur est : " + top.frames[1].document.title) } </SCRIPT> </HEAD> <BODY> Tapez votre prénom dans la case ci-dessous, puis cliquez sur un des boutons pour indiquer votre humeur du jour. Enfin, cliquez sur le bouton <I>Ecrire dans le cadre inférieur</I> pour voir les résultats. <FORM> Entrez votre prénom : <INPUT TYPE="text" NAME="firstname" VALUE="Dave"><P> Comment allez-vous aujourd'hui ? <INPUT TYPE="radio" NAME="how" VALUE="Je vous souhaite que cela continue !" CHECKED>En forme ! <INPUT TYPE="radio" NAME="how" VALUE="Vous êtes sûrement en chemin vers la super forme">Ça va ça va <INPUT TYPE="radio" NAME="how" VALUE="Les choses ne peuvent qu'aller mieux">Comme ci comme ça<P> <INPUT TYPE="button" NAME="enter" VALUE="Ecrire dans le cadre inférieur" onClick="takePulse(this.form)"> <HR> <INPUT TYPE="button" NAME="peek" VALUE="Afficher le titre du cadre inférieur" onClick="getTitle()"> </BODY> </HTML>Le fichier direct2.html contient :
<HTML> <HEAD> <TITLE>Document d'ouverture</TITLE> <BODY> </BODY> </HTML>Et voici le résultat.
<HTML> <HEAD> <TITLE>Votre Beatle préféré</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> function processData(formulaire) { //instructions } </SCRIPT> <BODY> <FORM NAME="Abbey Road"> Indiquez votre Beatle préféré : <INPUT TYPE="radio" NAME="Beatles" VALUE="Lennon" CHECKED="true">John <INPUT TYPE="radio" NAME="Beatles" VALUE="McCartney">Paul <INPUT TYPE="radio" NAME="Beatles" VALUE="Harrison">George <INPUT TYPE="radio" NAME="Beatles" VALUE="Starr">Ringo<P> Tapez le nom de votre chanson préférée des Beatles :<BR> <INPUT TYPE="text" NAME="chanson"><P> <INPUT TYPE="button" NAME="traitement" VALUE="Traiter la requête..." onClick="processData(this.form)"> </FORM>
<HTML> <HEAD> <TITLE>Propriété value d'un objet text</TITLE> <SCRIPT LANGUAGE="JavaScript"> function upperMe(form) { inputStr = form.convertor.value form.convertor.value = inputStr.toUpperCase() } </SCRIPT> </HEAD> <BODY> <FORM> Tapez quelque chose entièrement en minuscules <BR>puis cliquez en dehors de la case pour obtenir <BR>une conversion en majuscules : <P><INPUT TYPE="text" NAME="convertor" VALUE="exemple" onChange="upperMe(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété value d'un objet text (2)</TITLE> <SCRIPT LANGUAGE="JavaScript"> function upperMe(field) { field.value = field.value.toUpperCase() } </SCRIPT> </HEAD> <BODY> <FORM> Tapez quelque chose entièrement en minuscules <BR>puis cliquez en dehors de la case pour obtenir <BR>une conversion en majuscules : <P><INPUT TYPE="text" NAME="convertor" VALUE="exemple" onChange="upperMe(this)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété value d'un objet text (2)</TITLE> </HEAD> <BODY> <FORM> Tapez quelque chose entièrement en minuscules <BR>puis cliquez en dehors de la case pour obtenir <BR>une conversion en majuscules : <P> <INPUT TYPE="text" NAME="convertor" VALUE="exemple" onChange="this.value = this.value.toUpperCase()"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété DefaultValue d'un objet text</TITLE> <SCRIPT LANGUAGE="JavaScript"> function upperMe(field) { field.value = field.value.toUpperCase() } function resetField(form) { form.convertor.value = form.convertor.defaultValue } </SCRIPT> </HEAD> <BODY> <FORM> Tapez quelque chose entièrement en minuscules <BR>puis cliquez en dehors de la case pour obtenir <BR>une conversion en majuscules : <P> <INPUT TYPE="text" NAME="convertor" VALUE="exemple" onChange="upperMe(this)"> <INPUT TYPE="button" VALUE="Valeur d'origine" onClick="resetField(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Vérification de l'état d'une case à cocher</TITLE> <SCRIPT LANGUAGE="JavaScript"> function inspectBox(form) { if (form.checkThis.checked) { alert("La case est cochée") } else { alert("La case n'est pas cochée") } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="checkbox" NAME="checkThis">Case à cocher<P> <INPUT TYPE="button" NAME="boxChecker" VALUE="Lire l'état de la case" onClick="inspectBox(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Autre usage de case à cocher</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setAction(form) { if (form.checkThis.checked) { form.action = form.checkThis.value } else { form.action = "premierURL" } return true } </SCRIPT> </HEAD> <BODY> <FORM METHOD="GET"> <INPUT TYPE="checkbox" NAME="checkThis" VALUE="autreURL">Employer l'autre URL<P> <INPUT TYPE="submit" NAME="boxChecker" VALUE="Transmettre" onClick="return setAction(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Gestionnaire de clic dans une case à cocher</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setPort(form) { if (form.mouse.checked) { form.mousePort.checked = true } } </SCRIPT> </HEAD> <BODY> <FORM> <H3>Cochez les accessoires dont est équipé votre micro-ordinateur :</H3> <INPUT TYPE="checkbox" NAME="colorMonitor" >Ecran couleur<P> <INPUT TYPE="checkbox" NAME="mouse" onClick="setPort(this.form)">Souris<P> <INPUT TYPE="checkbox" NAME="mousePort" >Port souris<P> <INPUT TYPE="checkbox" NAME="modem" >Modem<P> <INPUT TYPE="checkbox" NAME="cdrom" >Lecteur de CD-ROM<P> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Déterminer quel bouton est coché dans un groupe</TITLE> <SCRIPT LANGUAGE="JavaScript"> function fullName(form) { for (var i = 0; i < form.Beatles.length; i++) { if (form.Beatles[i].checked) { break } } alert("Vous avez choisi " + form.Beatles[i].value + ".") } </SCRIPT> </HEAD> <BODY> <FORM> <B>Indiquez votre Beatle préféré :</B> <P> <INPUT TYPE="radio" NAME="Beatles" VALUE="John Lennon" CHECKED="true">John <INPUT TYPE="radio" NAME="Beatles" VALUE="Paul McCartney">Paul <INPUT TYPE="radio" NAME="Beatles" VALUE="George Harrison">George <INPUT TYPE="radio" NAME="Beatles" VALUE="Ringo Starr">Ringo<P> <INPUT TYPE="button" NAME="Viewer" VALUE="Nom complet" onClick="fullName(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Gestionnaire d'événement onClick de bouton radio</TITLE> <SCRIPT LANGUAGE="JavaScript"> var Ringophile = false function fullName(form) { for (var i = 0; i < form.Beatles.length; i++) { if (form.Beatles[i].checked) { break } } alert("Vous avez choisi " + form.Beatles[i].value + ".") } function changerEtatRingo(valeur) { Ringophile = valeur } function exitMsg() { if (Ringophile) { alert("Vous aimez RINGO ?") } } </SCRIPT> </HEAD> <BODY onUnload="exitMsg()"> <FORM> <INPUT TYPE="radio" NAME="Beatles" VALUE="John Lennon" CHECKED="true" onClick="changerEtatRingo(false)">John <INPUT TYPE="radio" NAME="Beatles" VALUE="Paul McCartney" onClick="changerEtatRingo(false)">Paul <INPUT TYPE="radio" NAME="Beatles" VALUE="George Harrison" onClick="changerEtatRingo(false)">George <INPUT TYPE="radio" NAME="Beatles" VALUE="Ringo Starr" onClick="changerEtatRingo(true)">Ringo<P> <INPUT TYPE="button" NAME="Viewer" VALUE="Nom complet" onClick="fullName(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété options d'un objet select (liste)</TITLE> <SCRIPT LANGUAGE="JavaScript"> function inspect(form) { alert(form.colorsList.options) } </SCRIPT> </HEAD> <BODY> <FORM> <SELECT NAME="colorsList"> <OPTION SELECTED>Rouge <OPTION VALUE="Plants"><I>Vert</I> <OPTION>Bleu </SELECT> <P> <INPUT TYPE="button" VALUE="Afficher définition de la liste" onClick="inspect(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Usage de la propriété selectedIndex</TITLE> <SCRIPT LANGUAGE="JavaScript"> function inspect(form) { alert(form.colorsList.options[form.colorsList.selectedIndex].text) } </SCRIPT> </HEAD> <BODY> <FORM> <SELECT NAME="colorsList"> <OPTION SELECTED>Rouge <OPTION VALUE="Plants"><I>Vert</I> <OPTION>Bleu </SELECT> <P> <INPUT TYPE="button" VALUE="Texte de l'option sélectionnée" onClick="inspect(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Exploitation de la propriété text d'un élément de liste</TITLE> <SCRIPT LANGUAGE="JavaScript"> var newWindow = null function seeColor(form) { newColor = (form.colorsList.options[form.colorsList.selectedIndex].text) if (newWindow == null) { var newWindow = window.open("","","HEIGHT=200,WIDTH=150") } newWindow.document.write("<HTML><BODY BGCOLOR=" + newColor + ">") newWindow.document.write("<H3>Document échantillon</H3></BODY></HTML>") newWindow.document.close() } </SCRIPT> </HEAD> <BODY> <FORM> Choisissez une couleur d'arrière-plan : <SELECT NAME="colorsList"> <OPTION SELECTED>Gray <OPTION>Lime <OPTION>Ivory <OPTION>Red </SELECT> <P> <INPUT TYPE="button" VALUE="Changer de couleur" onClick="seeColor(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Propriété value d'un élément de liste</TITLE> <SCRIPT LANGUAGE="JavaScript"> var newWindow = null function seeColor(form) { newColor = (form.colorsList.options[form.colorsList.selectedIndex].value) if (newWindow == null) { var newWindow = window.open("","","HEIGHT=200,WIDTH=150") } newWindow.document.write("<HTML><BODY BGCOLOR=" + newColor + ">") newWindow.document.write("<H3>Document échantillon</H3></BODY></HTML>") newWindow.document.close() } </SCRIPT> </HEAD> <BODY> <FORM> Choisissez une couleur d'arrière-plan : <SELECT NAME="colorsList"> <OPTION SELECTED VALUE="cornflowerblue">Bleu barbeau <OPTION VALUE="darksalmon">Saumon foncé <OPTION VALUE="lightgoldenrodyellow">Jaune pâle <OPTION VALUE="seagreen">Vert d'eau </SELECT> <P> <INPUT TYPE="button" VALUE="Changer de couleur" onClick="seeColor(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Détection de sélection multiple</TITLE> <SCRIPT LANGUAGE="JavaScript"> function seeList(form) { var result = "" for (var i = 0; i < form.accList.length; i++) { if (form.accList.options[i].selected) { result += "\n " + form.accList.options[i].text } } alert("Vous avez sélectionné :" + result) } </SCRIPT> </HEAD> <BODY> <FORM> Cliquez sur les accessoires dont vous disposez <BR>(en maintenant enfoncée la touche Ctrl ou Commande) : <P> <SELECT NAME="accList" SIZE=9 MULTIPLE> <OPTION SELECTED>Ecran couleur <OPTION>Modem <OPTION>Scanner <OPTION>Imprimante laser <OPTION>Sauvegarde sur bande <OPTION>Lecteur magnéto-optique <OPTION>Appareil photo numérique </SELECT> <P> Puis cliquez sur ce bouton : <INPUT TYPE="button" VALUE="Récapitulatif..." onClick="seeList(this.form)"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Réaction immédiate à une sélection dans une liste</TITLE> <SCRIPT LANGUAGE="JavaScript"> var newWindow = null function seeColor(form) { newColor = (form.colorsList.options[form.colorsList.selectedIndex].value) if (newWindow == null) { var newWindow = window.open("","","HEIGHT=200,WIDTH=150") } newWindow.document.write("<HTML><BODY BGCOLOR=" + newColor + ">") newWindow.document.write("<H3>Document échantillon</H3></BODY></HTML>") newWindow.document.close() } </SCRIPT> </HEAD> <BODY> <FORM> Choisissez une couleur d'arrière-plan : <SELECT NAME="colorsList" onChange="seeColor(this.form)"> <OPTION SELECTED VALUE="cornflowerblue">Bleu barbeau <OPTION VALUE="darksalmon">Saumon foncé <OPTION VALUE="lightgoldenrodyellow">Jaune pâle <OPTION VALUE="seagreen">Vert d'eau </SELECT> </FORM> </BODY> </HTML>
<script> function aideContexte(texte) { // affichage dans la ligne de status du browser du // message qui est recu dans lÕargument "texte" status=texte; } function verifNum(valeur){ // verification que la chaine de caracteres representee par // lÕargument "valeur" ne contient que des carateres numeriques for (var i=0; i<valeur.length; i++) { var caractere=valeur.substring(i,i+1); if (caractere < "0" || caractere > "9") { alert ("Entrez des chiffres uniquement !"); return false; } } return true; } </script> <form name="formFiche"> <input name="montant" onFocus="aideContexte('indiquez le montant sans les centimes')" onChange="verifNum(this.value)"> </form>
Les autres événements possibles sont :
<script> function calcul() { somme = document.commande.dsk.value * 3 somme += document.commande.cd.value*8 document.commande.somme.value = somme } function Entree () { if (estCeNumerique(document.commande.dsk.value)) { if(estCeNumerique(document.commande.cd.value)) { calcul() return true; } else { document.commande.cd.value = "0"; document.commande.cd.focus(); } } else { document.commande.dsk.value = "0"; document.commande.dsk.focus(); } alert ("entrer un nombre !"); return false; } function estCeNumerique (chaine) { for (i=0; i<chaine.length; i++) { caractere = chaine.charAt(i); if (caractere < "0" || caractere > "9") { return false; } } return true; } </script> <font size=5> <form action=javascript:void(0) name=commande> <br>Nombre de disquette <input name=dsk onBlur= Entree() value=0 size=4> à 3.00 F <br>Nombre de CDRom <input name=cd onBlur= Entree() value=0 size=4> à 8.00F <p>Montant <input name=somme value=0> F </form>
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function testLetter(form){ inpVal = form.entry.value if (inpVal != "") { // si l'entrée n'est pas vide // alors continuer if (inpVal == "A") { // Est-ce un "A"? alert("Merci pour le A.") } else { // Non. Est-ce un "B"? if (inpVal == "B") { alert("Merci pour le B.") } else { // Non. Est-ce un "C"? if (inpVal == "C") { alert("Merci pour le C.") } else { // Non. Décidément... alert("Désolé, ce n'est pas une des trois lettres autorisées.") } } } } else { // la valeur entrée est vide, aussi l'on ignore // toutes les instructions ci-dessus alert("Vous n'avez rien entré du tout.") } } </SCRIPT> </HEAD> <BODY> <FORM> Tapez la lettre A, B ou C : <INPUT TYPE="text" NAME="entry" onChange="testLetter(this.form)"> </FORM> </BODY> </HTML>
<script> function envoyer() { var text = ""; var index = 0; var identif = "monWeb" // Creation du sujet du mail qui contient // lÕidentificateur (identif) et l'option selectee // (probleme, suggestion, commentaire) with (window.document.mail) { i = elements["sujet"].length - 1; for (;i >= 0; i--){ if (elements["sujet"][i].selected == true) { index = i; break; } } // generation de l'action du formulaire mailto action = 'mailto:mathieu.decore@altavista.net?content-type=text/html&subject='; action += identif + '(' + elements["sujet"][index].value + ')'; } // Creation du corps du mail // recuperation du type de browser utilise // par la personne qui emet le mail with (navigator) { text = appName +' ' + appVersion +'\n'; text += appCodeName + ' depuis' + userAgent + ' \n'; } with (window.document.mail) { // l' information sur le browser est stocke // dans un champ hidden (browser) elements["browser"].value = text; // On regenere le texte saisie + le message "Message envoye" elements["message"].value += '\n\n____ Message envoye ___\n\n'; } return true; } </script> <form name="mail" action="" method="get" enctype="text/plain" onSubmit="envoyer()" > <b>Sujet du mail : </b><br> <select name="sujet"> <option value="PROBLEME"> Problème <option value="SUGGESTION"> Suggestion <option value="COMMENTAIRE" selected> Commentaire </select> <hr> <p> <b>Message :</b><br> <textarea name="message" rows="15" cols="50" wrap></textarea> <input type="hidden" name="browser"> <hr> <center> <input type="submit" value="Envoyer le message"> </center> </form>
<script> function opClasse (classe) { switch (classe) { case "1" : document.layers["optRepas"].visibility="show"; break; case "2" : document.layers["optRepas"].visibility="hidden"; document.layers["optRepas"].document.qRepas.repas.checked=false; break; } } </script> <layer id="choixClasse" top=50 left=50> <form name="classe"> <input type="radio" name="cl" value="1" onClick=opClasse("1")> première classe<br> <input type="radio" name="cl" value="2" onClick=opClasse("2")> seconde classe </form> </layer> <layer id="optRepas" top=50 left=180 visibility="hidden"> <form name="qRepas"> <input type="checkbox" name="repas" value="oui"> réservation repas </form> </layer>Cet exemple est une interface utilisant des couches.
<script> function SversD() { indexS=document.trans.source.options.selectedIndex; if (indexS < 0) return; valeur=document.trans.source.options[indexS].text; document.trans.source.options[indexS]=null; a = new Option(valeur); indexD=document.trans.destination.options.length; document.trans.destination.options[indexD]=a; } function DversS(){ indexD=document.trans.destination.options.selectedIndex; if (indexD < 0)return; valeur=document.trans.destination.options[indexD].text; document.trans.destination.options[indexD]=null; a = new Option(valeur); indexS=document.trans.source.options.length; document.trans.source.options[indexS]=a; } </script> <p> <table> <tr><td> <form name=trans> <select size=7 name=source> <option>Citrons <option>Oranges <option>Pamplemousses <option>Clementine <option>Kiwis <option>Bergamotes <option>Grenades </select> <td> <input type=button value=">>" onClick=SversD()><br> <input type=button value="<<" onClick=DversS()> <td> <select size=7 name=destination> </select> </tr></table>
<script> function chLangue(forme) { if (forme.langue.options[1].selected == true) { forme.jours.options[0].text = "Monday" forme.jours.options[1].text = "Tuesday" forme.jours.options[2].text = "Wenesday" forme.jours.options[3].text = "Thursday" forme.jours.options[4].text = "Friday" forme.jours.options[5].text = "Saturday" forme.jours.options[6].text = "Sunday" } else { forme.jours.options[0].text = "Lundi" forme.jours.options[1].text = "Mardi" forme.jours.options[2].text = "Mercredi" forme.jours.options[3].text = "Jeudi" forme.jours.options[4].text = "Vendredi" forme.jours.options[5].text = "Samedi" forme.jours.options[6].text = "Dimanche" } } </script> <form><font size=5> <select name="jours"> <option>Lundi <option>Mardi <option>Mercredi <option>Jeudi <option>Vendredi <option>Samedi <option>Dimanche </select> <p> <select name="langue" onChange="chLangue(this.form)"> <option selected>Francais <option>English </font></select> </form>
<script> function nelleOpt() { // creation d'une option dans la liste if (document.forms[0].elements[1].value=="") return; n = new Option(document.forms[0].elements[1].value); var index = document.forms[0].elements[0].options.length; document.forms[0].elements[0].options[index] =n; document.forms[0].elements[1].value=""; } function chSel() { // recherche de l'otion selectionnee for (i=0; i<document.forms[0].elements[0].options.length; i++) { if (document.forms[0].elements[0].options[i].selected) alert (i); } } function deselSel() { // deselection de toutes les options selectionnees for (i=0; i<document.forms[0].elements[0].options.length; i++) { if (document.forms[0].elements[0].options[i].selected) document.forms[0].elements[0].options[i].selected=false; } } function effSel() { // effacement de toutes les options selectionnees index = document.forms[0].elements[0].options.length; for (var i=index-1; i>=0; i--) { if (document.forms[0].elements[0].options[i].selected) { document.forms[0].elements[0].options[i]= null; } } } </script> <form name=ff> <select name=ss size=6 multiple> </select> <br> <input > <p> <input value="creer une option" type=button onClick="nelleOpt()"> <br> <input value="rechercher la selection" type=button onClick="chSel()"> <br> <input value="tout deselectionner" type=button onClick="deselSel()"> <br> <input value="effacer les options selectionnees" type=button onClick="effSel()"> <br> </form>Voici le résultat.
<HTML> <HEAD> <TITLE>Positionnement de la souris sur un lien</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setStatus(msg) { status = msg } function emulate() { alert("Pas de lien réel dans cette démonstration.") } </SCRIPT> </HEAD> <BODY> I pledge <A HREF="javascript:emulate()" onMouseOver="setStatus('Afficher définition de Allegiance'); return true">allegiance</A> to the <A HREF="javascript:emulate()" onMouseOver="setStatus('En savoir plus sur le drapeau américain'); return true">flag</A> of the <A HREF="javascript:emulate()" onMouseOver="setStatus('Informations sur le gouvernement U.S.'); return true">United States of America</A>, and to the Republic for which it stands, one nation <A HREF="javascript:emulate()" onMouseOver="setStatus('Voir historique de cette phrase');return true">under God</A>, indivisible, with liberty and justice for all. </BODY> </HTML>I pledge allegiance to the flag of the United States of America, and to the Republic for which it stands, one nation under God, indivisible, with liberty and justice for all.
<HTML> <HEAD> <TITLE>Gestionnaire onClick= de lien</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setStatus(msg) { status = msg } function emulate() { alert("Pas de lien réel dans cette démonstration.") } function emulate2() { alert("Désolé, pas d'images dans cette démonstration.") } function pickFlagURL(theLink) { if (confirm("Voulez-vous afficher des images du drapeau ?")) { theLink.href = "javascript:emulate2()" } else { theLink.href = "javascript:emulate()" } } </SCRIPT> </HEAD> <BODY> I pledge <A HREF="javascript:emulate()" onMouseOver="setStatus('Afficher définition de Allegiance'); return true">allegiance</A> to the <A HREF="" onClick="pickFlagURL(this)" onMouseOver="setStatus('En savoir plus sur le drapeau américain');return true">flag</A> of the <A HREF="javascript:emulate()" onMouseOver="setStatus('Informations sur le gouvernement U.S.'); return true">United States of America</A>, and to the Republic for which it stands, one nation <A HREF="javascript:emulate()" onMouseOver="setStatus('Voir historique de cette phrase'); return true">under God</A>, indivisible, with liberty and justice for all. </BODY> </HTML>I pledge allegiance to the flag of the United States of America, and to the Republic for which it stands, one nation under God, indivisible, with liberty and justice for all.
<HTML> <HEAD> <TITLE>Objet navigator</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- début function getCRChars() { var theAgent = navigator.userAgent if (theAgent.indexOf("(Win") >= 0) { return "\r\n" } else { if (theAgent.indexOf("(Mac") >= 0) { return "\r" } } return "\n" } // fin --> </SCRIPT> </HEAD> <BODY> <FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- -- début var CR = getCRChars() var msg = "<TEXTAREA NAME='myMsg' ROWS=5 COLS=30 WRAP=’SOFT’>" msg += "Voici une première ligne," + CR msg += "une seconde ligne" + CR msg += "et une troisième" msg += "</TEXTAREA>" document.write(msg) // fin -- --> </SCRIPT> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Notre système solaire</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- début du script // initialise un tableau de n entrées function MakeArray(n) { this.length = n for (var i = 1; i <= n; i++) { this[i] = 0 } return this } // remplit les "rangées" de données pour // notre pseudo-tableau à deux dimensions function planet(nom, diametre, distance, an, jour){ this.nom = nom this.diametre = diametre this.distance = distance this.an = an this.jour = jour } // création de notre pseudo-tableau à deux dimensions solarSys = new MakeArray(9) solarSys[1] = new planet("Mercure","4 960 km", "57,6 millions de km", "88 jours", "59 jours") solarSys[2] = new planet("Vénus", "12 320 km", "107,2 millions de km", "225 jours", "244 jours") solarSys[3] = new planet("Terre", "12 672 km", "148,8 millions de km", "365,25 jours","24 heures") solarSys[4] = new planet("Mars", "6720 km", "225,6 millions de km", "687 jours", "24 heures, 24 minutes") solarSys[5] = new planet("Jupiter","141 824 km","772,8 millions de km", "11,9 ans", "9 heures, 50 minutes") solarSys[6] = new planet("Saturne", "119 200 km","1 417,6 millions de km", "29,5 ans", "10 heures, 39 minutes") solarSys[7] = new planet("Uranus", "51 200 km","2 851,2 milliards de km","84 ans", "23 heures") solarSys[8] = new planet("Neptune","49 600 km","4 468,8 milliards de km","165 ans", "15 heures, 48 minutes") solarSys[9] = new planet("Pluton", "2 400 km", "5,872 milliards de km", "248 ans", "6 jours, 7 heures") // remplit l'objet zone de texte avec les données // de la planète sélectionnée function showData(form) { i = form.planets.selectedIndex + 1 var result = "La planète " + solarSys[i].nom result += " a un diamètre de " + solarSys[i].diametre + ".\r\n" result += "A une distance de " + solarSys[i].distance result += " du soleil, cela lui demande\r\n" + solarSys[i].an result += " pour tourner autour de lui.\r\n" result += "Une journée représente " + solarSys[i].jour + " de temps terrien." form.output.value = result } // fin script --> </SCRIPT> <BODY> <H1>Le Quotidien du Système</H1> <HR> <FORM> <SCRIPT LANGUAGE = "JavaScript"> <!-- début deuxième script var page = "" // assemblage de la suite de la page page += "Choisissez une planète pour en afficher les données : " page += "<SELECT NAME='planets'> " // construit la liste déroulante à partir du tableau // des noms de planètes for (var i = 1; i <= solarSys.length; i++) { page += "<OPTION" // OPTION tags if (i == 1) { // présélection du premier élément de la liste page += " SELECTED" } page += ">" + solarSys[i].nom } page += "</SELECT><P>" // marqueur de fermeture de la liste document.write(page) // écriture de cette partie de la page // fin deuxième script --> </SCRIPT> <INPUT TYPE="button" NAME="showdata" VALUE="Afficher informations" onClick="showData(this.form)"><P> <TEXTAREA NAME="output" ROWS=5 COLS=67> </TEXTAREA> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML écrit par JavaScript</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var page = "" page += "JavaScript peut créer du code HTML en direct.<P>De nombreuses méthodes de traitement de chaîne facilitent l'application d'attributs au texte. Par exemple, on peut utiliser " + "du texte en gras".bold() + ", " + "en italique ".italics() + "ou même ajouter le pénible " + "texte clignotant".blink() + "." document.write(page) </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML écrit par JavaScript (2)</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var page = "" page += "JavaScript peut créer du code HTML en direct.<P>De nombreuses méthodes de traitement de chaîne facilitent l'application d'attributs au texte. Par exemple, on peut utiliser " + "du texte en gras".bold() + ", " + "en italique ".italics() + "ou même ajouter le pénible " + "texte clignotant".blink() + "." page += "On peut écrire " + "des mots en gros ".fontsize(5) + " et des mots " + ("en gros " + "et en couleur".fontcolor('maroon')).fontsize(5) + " en même temps." document.write(page) </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Modeleur de date</TITLE> <SCRIPT LANGUAGE="JavaScript"> function MakeArray(n) { this.length = n return this } monthNames = new MakeArray(12) monthNames[1] = "janvier" monthNames[2] = "février" monthNames[3] = "mars" monthNames[4] = "avril" monthNames[5] = "mai" monthNames[6] = "juin" monthNames[7] = "juillet" monthNames[8] = "août" monthNames[9] = "septembre" monthNames[10] = "octobre" monthNames[11] = "novembre" monthNames[12] = "décembre" dayNames = new MakeArray(7) dayNames[1] = "Dimanche" dayNames[2] = "Lundi" dayNames[3] = "Mardi" dayNames[4] = "Mercredi" dayNames[5] = "Jeudi" dayNames[6] = "Vendredi" dayNames[7] = "Samedi" function customDateString(oneDate) { var theDay = dayNames[oneDate.getDay() + 1] var theMonth = monthNames[oneDate.getMonth() + 1] var theYear = oneDate.getYear() + 1900 return theDay + " " + oneDate.getDate() + " " + theMonth + " " + theYear } </SCRIPT> </HEAD> <BODY> <H1>Bienvenue</H1> <SCRIPT LANGUAGE="JavaScript"> document.write(customDateString(new Date())) </SCRIPT> <HR> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Modeleur de date</TITLE> <SCRIPT LANGUAGE="JavaScript"> function MakeArray(n) { this.length = n return this } monthNames = new MakeArray(12) monthNames[1] = "janvier" monthNames[2] = "février" monthNames[3] = "mars" monthNames[4] = "avril" monthNames[5] = "mai" monthNames[6] = "juin" monthNames[7] = "juillet" monthNames[8] = "août" monthNames[9] = "septembre" monthNames[10] = "octobre" monthNames[11] = "novembre" monthNames[12] = "décembre" dayNames = new MakeArray(7) dayNames[1] = "Dimanche" dayNames[2] = "Lundi" dayNames[3] = "Mardi" dayNames[4] = "Mercredi" dayNames[5] = "Jeudi" dayNames[6] = "Vendredi" dayNames[7] = "Samedi" function customDateString(oneDate) { var theDay = dayNames[oneDate.getDay() + 1] var theMonth = monthNames[oneDate.getMonth() + 1] var theYear = oneDate.getYear() + 1900 return theDay + " " + oneDate.getDate() + " " + theMonth + " " + theYear } function dayPart(oneDate) { var theHour = oneDate.getHours() if (theHour <6 ) return "la nuit" if (theHour < 12) return "le matin" if (theHour < 18) return "l'après-midi" return "le soir" } </SCRIPT> </HEAD> <BODY> <H1>Bienvenue</H1> <SCRIPT LANGUAGE="JavaScript"> today = new Date() var header = (customDateString(today)).italics() header += "<BR>Manifestement, vous préférez travailler " header += dayPart(today) + "." document.write(header) </SCRIPT> <HR> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Portée des variables</TITLE> <SCRIPT LANGUAGE="JavaScript"> var headGlobal = "Gumby" function doNothing() { var headLocal = "Pokey" return headLocal } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var aBoy = "Charlie Brown" var hisDog = "Snoopy" function testValues() { var hisDog = "Gromit" // initialize la variable locale hisDog var page = "" page += "La variable headGlobal a pour contenu : <B>" + headGlobal + "</B><P>" // l'instruction : // page += "La variable headLocal a pour // contenu : <B>" + headLocal + "</B><P>" // provoque une erreur car headLocal n'existe pas en // dehors de la fonction doNothing() page += "Valeur headLocal retournée par la fonction <I>doNothing()</I> définie dans l'entête du document : <B>" + doNothing() + "</B><P>" page += "Valeur contenue dans variable aBoy : <B>" + aBoy + "</B><P>" // Lit une var globale page += "Valeur contenue dans version locale de hisDog : <B>" + hisDog + "</B><P>" // la fonction ne "voit" que la version locale document.write(page) } testValues() document.write("La valeur contenue dans la version globale de <I>hisDog</I> est intacte : <B>" + hisDog + "</B>") </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Fonction généralisée</TITLE> <SCRIPT LANGUAGE="JavaScript"> function factorial(n) { if (n > 0) { return n * (factorial(n - 1)) } else { return 1 } } </SCRIPT> </HEAD> <BODY> <FORM> Entrez une valeur : <INPUT TYPE="text" NAME="input" VALUE=0><P> <INPUT TYPE="button" VALUE="Factoriel" onClick="this.form.output.value = factorial(this.form.input.value)"><P> Résultat : <INPUT TYPE="text" NAME="output"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Tableau statique</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- début // constructeur de tableau indexé (array) function MakeArray(n){ this.length = n return this } // cette fonction est une méthode de l'objet month (mois) function getFirstDay(theYear){ var firstDate = new Date(theYear,this.offset,1) return 1 + firstDate.getDay() } // construction de l'objet month function aMonth(name,length,offset) { this.name = name // nom du mois this.length = length // utilisé pour savoir combien de jours afficher this.offset = offset // utilisé comme valeur d'index this.getFirstDay = getFirstDay // méthode définie plus haut } // correction de la longueur de février lorsque nécessaire function getFebLength(theYear) { theYear = (theYear < 1900) ? theYear + 1900: theYear if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0) { return 29 } return 28 } // création du tableau (array) de base theMonths = new MakeArray(12) // load array with one object for each month theMonths[1] = new aMonth("Janvier",31,0) theMonths[2] = new aMonth("Février",28,1) theMonths[3] = new aMonth("Mars",31,2) theMonths[4] = new aMonth("Avril",30,3) theMonths[5] = new aMonth("Mai",31,4) theMonths[6] = new aMonth("Juin",30,5) theMonths[7] = new aMonth("Juillet",31,6) theMonths[8] = new aMonth("Août",31,7) theMonths[9] = new aMonth("Septembre",30,8) theMonths[10] = new aMonth("Octobre",31,9) theMonths[11] = new aMonth("Novembre",30,10) theMonths[12] = new aMonth("Décembre",31,11) // fin --> </SCRIPT> </HEAD> <BODY> <CENTER> <H1>Calendrier mensuel (version statique)</H1> <HR> <P> <SCRIPT LANGUAGE="JavaScript"> <!-- début // initialisation de quelques variables pour plus tard var today = new Date() var monthOffset = today.getMonth() + 1 // pour l'index dans notre tableau (array) var thisMonth = theMonths[monthOffset].name // nom du mois if (monthOffset == 2) { theMonths[2].length = getFebLength(today.getYear()) } // quel est le premier jour du mois ? var firstDay = theMonths[monthOffset].getFirstDay(today.getYear()) // nombre total de marqueurs <TD>…</TD> nécessaires dans la boucle for ci-dessous var howMany = theMonths[monthOffset].length + firstDay // début de l'assemblage du tableau HTML var content = "<TABLE BORDER>" // mois et année affichés en haut du calendrier content += "<TR><TH COLSPAN=7>" + thisMonth + " " + (today.getYear() + 1900) + "</TH></TR>" // jours de la semaine en haut de chaque colonne content += "<TR><TH>Dim</TH><TH>Lun</TH><TH>Mar</TH><TH>Mer</TH>" content += "<TH>Jeu</TH><TH>Ven</TH><TH>Sam</TH></TR>" content += "<TR>" // remplissage du calendrier for (var i = 1; i < howMany; i++) { if (i < firstDay) { // 'vide' les cases précédant le premier jour content += "<TD></TD>" } else { // entre le numéro du jour content += "<TD>" + (i - firstDay + 1) + "</TD>" } // démarrage d'une nouvelle rangée après chaque semaine if (i % 7 == 0 && i != howMany) { content += "</TR><TR>" } } content += "</TABLE></CENTER>" // injecte la totalité du tableau dans le document HTML document.write(content) // fin --> </SCRIPT> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Tableau dynamique</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- début // constructeur de tableau indexé (array) function MakeArray(n){ this.length = n return this } // cette fonction est une méthode de l'objet month (mois) function getFirstDay(theYear){ var firstDate = new Date(theYear,this.offset,1) return firstDate.getDay() } // construction de l'objet month function aMonth(name,length,offset) { this.name = name // nom du mois this.length = length // utilisé pour savoir combien de jours afficher this.offset = offset // utilisé comme valeur d'index this.getFirstDay = getFirstDay // méthode définie plus haut } // correction de la longueur de février lorsque nécessaire function getFebLength(theYear) { theYear = (theYear < 1900) ? theYear + 1900: theYear if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0) { return 29 } return 28 } // création du tableau (array) de base theMonths = new MakeArray(12) // load array with one object for each month theMonths[1] = new aMonth("Janvier",31,0) theMonths[2] = new aMonth("Février",28,1) theMonths[3] = new aMonth("Mars",31,2) theMonths[4] = new aMonth("Avril",30,3) theMonths[5] = new aMonth("Mai",31,4) theMonths[6] = new aMonth("Juin",30,5) theMonths[7] = new aMonth("Juillet",31,6) theMonths[8] = new aMonth("Août",31,7) theMonths[9] = new aMonth("Septembre",30,8) theMonths[10] = new aMonth("Octobre",31,9) theMonths[11] = new aMonth("Novembre",30,10) theMonths[12] = new aMonth("Décembre",31,11) // fin --> </SCRIPT> </HEAD> <BODY> <CENTER> <H1>Calendrier mensuel (version dynamique)</H1> <HR> <P> <SCRIPT LANGUAGE="JavaScript"> <!-- début // initialisation d'une variable oneField qui représente une case de saisie. // à chaque jour correspondra une case de saisie portant même nom // pour que l'on puisse y accéder via valeur d'index. // Le gestionnaire d'évenement vide ci-dessous contourne // le problème posé par une bogue sur certaines plates-formes var oneField = "<INPUT TYPE='text' NAME='oneDay' SIZE=2 onFocus=''>" // début d'assemblage du code HTML du tableau var content = "<FORM><CENTER><TABLE BORDER>" // cases de saisie pour le mois et l'année affichés en haut du calendrier content += "<TR><TH COLSPAN=7><INPUT TYPE='text' NAME='oneMonth'></TH></TR>" // jours de la semaine affichés en haut de chaque colonne content += "<TR><TH>Dim</TH><TH>Lun</TH><TH>Mar</TH><TH>Mer</TH>" content += "<TH>Jeu</TH><TH>Ven</TH><TH>Sam</TH></TR>" content += "<TR>" // place 6 rangées de cases pour le cas de mois le plus étalé for (var i = 1; i < 43; i++) { content += "<TD>" + oneField + "</TD>" if (i % 7 == 0) { content += "</TR><TR>" } } content += "</TABLE>" // injecte la totalité du tableau dans le document HTML document.write(content) // fonction différée pour remplir les champs du tableau function populateFields(form) { // initialise des variables pour stocker les choix de l'utilisateur var theMonth = form.chooseMonth.options[form.chooseMonth.selectedIndex].text var theYear = form.chooseYear.options[form.chooseYear.selectedIndex].text // initialise des variables en rapport avec la date var anchorDay = new Date(theYear-1900,form.chooseMonth.selectedIndex,1) var monthOffset = anchorDay.getMonth() + 1 var thisMonth = theMonths[monthOffset].name if (monthOffset == 2) { theMonths[2].length = getFebLength(anchorDay.getYear()) } var firstDay = theMonths[monthOffset].getFirstDay(anchorDay.getYear()) var howMany = theMonths[monthOffset].length // détermine le mois et l'année à afficher dans le haut du calendrier form.oneMonth.value = theMonth + " " + theYear // remplit les champs du tableau for (var i = 0; i < 42; i++) { if (i < firstDay || i >= (howMany + firstDay)) { // avant et après le début et la fin du mois, les cases doivent être vides // accès aux cases à l'aide de la valeur d'index form.oneDay[i].value = "" } else { // entre les valeurs de date form.oneDay[i].value = i - firstDay + 1 } } } // fin --> </SCRIPT> <SELECT NAME="chooseMonth"> <OPTION SELECTED>Janvier<OPTION>Février <OPTION>Mars<OPTION>Avril<OPTION>Mai <OPTION>Juin<OPTION>Juillet<OPTION>Août <OPTION>Septembre<OPTION>Octobre<OPTION>Novembre<OPTION>Décembre </SELECT> <SELECT NAME="chooseYear"> <OPTION SELECTED>1995<OPTION>1996<OPTION>1997<OPTION>1998 </SELECT><P> <INPUT TYPE="button" NAME="updater" VALUE="Mettre à jour" onClick="populateFields(this.form)"> </FORM> </BODY> </HTML>
<script langage=javascript> // Le code situe entre ce commentaire et la fonction // "affiche" est execute au chargement de la page // création des images menu0 = new Image(); menu1 = new Image(); menu2 = new Image(); menu3 = new Image(); menu4 = new Image(); // chargement des images dans le cache menu0.src = "../images/zone0.gif" menu1.src = "../images/zone1.gif" menu2.src = "../images/zone2.gif" menu3.src = "../images/zone3.gif" menu4.src = "../images/zone4.gif" function affiche (num) { // fonction appelee par les evenements onMouseOver et onMouseOut if (num == "0") document.images[0].src = menu0.src; else if (num == "1") document.images[0].src = menu1.src; else if (num == "2") document.images[0].src = menu2.src; else if (num == "3") document.images[0].src = menu3.src; else if (num == "4") document.images[0].src = menu4.src; } </script> <map name="tabmap"> <area shape="rect" coords="19,4,99,31" href="ch1.html" onMouseOver="affiche(1)" onMouseOut="affiche(0)"> <area shape="rect" coords="21,34,99,61" href="ch2.html" onMouseOver="affiche(2)" onMouseOut="affiche(0)"> <area shape="rect" coords="21,63,173,87" href="ch3.html" onMouseOver="affiche(3)" onMouseOut="affiche(0)"> <area shape="rect" coords="22,89,78,113" href="ch3.html" onMouseOver="affiche(4)" onMouseOut="affiche(0)"> </map> <img src="../images/zone0.gif" usemap="#tabmap" border="0">
<SCRIPT> // Methode de l'objet Individu function age() { // Date du jour Aujourdhui= new Date() // Date de naissance // On recupre le jour le mois et l'annŽe et on crŽe lâobjet Date Naissance dateJS = this.date_naissance.split('/') Naissance = new Date(dateJS[2], dateJS[1]-1, dateJS[0]) // DiffŽrence des deux dates en millisecondes divisŽes par le nombre de // millisecondes dans un an ! NombreAnnee = Math.round((Aujourdhui.getTime() - Naissance.getTime())/ (24*60*60*1000*365.25)) return NombreAnnee } //Constructeur de lâobjet Individu function Individu(nom, prenom, date_naissance, mere) { // Definition des propriŽtŽs this.nom = nom this.prenom = prenom this.date_naissance = date_naissance this.mere = mere // DŽfinition des mŽthodes this.age = age } </SCRIPT> <SCRIPT> // Construction de la mere (sans prŽciser de valeur pour sa mre ˆ elle) bellesoeur = new Individu('Aubert', 'Nathalie', '25/11/68') // Construction de la fille en prŽcisant bellesoeur comme mre niece = new Individu('Gomez', 'Clémentine', '3/12/95', bellesoeur) // Affichage document.write('Avant son mariage, la maman de '+ niece.prenom +' s\'appelait ' + niece.mere.nom) // Et oui, avec le mariage, la mre change de nom... bellesoeur.nom = 'Gomez' document.write('. Maintenant, elle s\'appelle ' + niece.mere.nom + '.') document.write('<BR>Cette année ' + niece.prenom + ' a ' + niece.age() + ' an' + ((niece.age() > 1)?'s.':'.')) </SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2"> // On définit quelques entitŽs function Rien() { return 'au revoir...'; } var nombre = 7; var chaine = '10'; var booleen = true; // On provoque quelques conversions document.write('Conversion Chaine->Nombre->Chaine:' + (nombre + parseInt(chaine)) + '<BR>'); document.write('Conversion Nombre->Chaine:' + nombre + chaine + '<BR>'); document.write('Conversion Booleen->Chaine:' + booleen + '<BR>'); document.write('Conversion Fonction->Chaine:' + Rien + '<BR>'); document.write('Conversion Objet->Chaine:' + navigator + '<BR>'); document.write('Conversion Booleen->Nombre->Chaine:' + (booleen + nombre) + '<BR>'); </SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2"> for (prop in window) { // prop est une cha”ne de caractres qui contient successivement // le nom de chacune des propritŽs document.write('window.' + prop + ' = ' + window[prop] + '<BR>') } </SCRIPT>Voici ce que ca donne sur une simple fenêtre.
<SCRIPT LANGUAGE="JavaScript1.2"> document.write('La hauteur de votre écran est de ' + screen.height + ' pixels.<BR>') document.write('La hauteur disponible est ' + ((screen.availHeight==screen.height)?'de ':'seulement de ') + screen.availHeight + ' pixels.<BR>')document.write('La couleur de chaque pixel est codé sur ' + screen.pixelDepth + ' bits.' + '<BR>') document.write('Vous disposez de ' + screen.colorDepth + ' couleurs.' + '<BR>') </SCRIPT>
<SCRIPT> document.write('<p>Voici la liste des propriétés de l\'objet <I>navigator</I> :<UL>') for (prop in navigator) { document.write('<LI>navigator.'.italics() + prop.italics()) } </SCRIPT> </UL>
<SCRIPT> // Cette fonction definit les gestionnaires dâŽvŽnements onfocus et onblur // pour toutes les frames du document // Avec ces gestionnaires, le fond de la fentre qui prend le focus devient // jaune. // le fond de la fentre qui prend le focus devient blanc. function creeGestEvt() { for (var i = 0; i < frames.length; i++) { frames[i].onfocus = new Function("this.document.bgColor='yellow'; this.startChrono()") frames[i].onblur = new Function("this.document.bgColor='white'; this.stopChrono()") } // On donne le focus ˆ la premire frame frames[0].focus() } </SCRIPT> <!-- Au moment du chargement, on configure les gestionnaires dâŽvŽnements --> <!-- des frames --> <FRAMESET ROWS="*,*" COLS="*,*" onLoad=creeGestEvt() BORDER=0 FRAMEBORDER=NO> <FRAME SRC="chrono.html"> <FRAME SRC="chrono.html"> <FRAME SRC="chrono.html"> <FRAME SRC="chrono.html"> </FRAMESET>Illustration...
<SCRIPT> // Premier bloc d'instructions nommŽ debut : { document.write('Un<BR>') // Deuxime bloc d'instructions nommŽ suite : { document.write('Deux<BR>') // Ici on sort du deuxime bloc nommŽ break suite document.write('Trois<BR>') } document.write('Quatre<BR>') // Ici on sort du premier bloc nommŽ break debut document.write('Cinq<BR>') } document.write('Six<BR>') </SCRIPT>
<SCRIPT> // Tableau des mots considŽrŽs comme creux Mots_Creux = new Array('le', 'la', 'les', 'un', 'une', 'des', 'ce', 'ces', 'nos', 'vos', 'pour', 'contre', 'sur', 'sous', 'de', 'ˆ', 'qui', 'quoi', 'que', 'quoi') // Definition de la fonction Extraire function Extraire(Chaine){ // On crŽe un tableau pour stocker les mots qui ne sont pas creux Result = new Array() // On decoupe la chaine avec comme sŽparateur l'espace Mots = Chaine.split(' ') // Pour chacun des mots, on regarde s'il est dans la liste des mots creux for (i in Mots) { var nonCreux = true for (j in Mots_Creux) { if (Mots[i] == Mots_Creux[j]) { nonCreux = false break } } if (nonCreux) { Result[Result.length] = Mots[i] } } // On retourne un tableau contenant tous les mots non creux return Result } </SCRIPT> <FORM onSubmit="alert(Extraire(this.Phrase.value).join(', ')); return(false)"> Saisissez une phrase: <INPUT TYPE="TEXT" NAME="Phrase" SIZE=60> <BR><BR> <!-- Pour afficher le tableau renvoyŽ par la mŽthode Extraire --> <!-- on utilise la mŽthode join() des objets Array --> <INPUT TYPE="SUBMIT" VALUE="Enlever les mots creux"> </FORM>
<SCRIPT LANGUAGE="JavaScript1.2"> // Creation dâun tableau semaine = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] // On affiche le jour de la semaine Aujourdhui = new Date() document.write('Aujourd\'hui nous sommes '+semaine[Aujourdhui.getDay()]+'.<BR>') // On affiche la liste des jours de la semaine document.write('Affichage du tableau <I>semaine</I> avec le séparateur - :<BR>') document.write(semaine.join(' - ')+'<BR>') // On affiche la liste des jours hors WE document.write('Affichage du tableau des jours hors WE avec le séparateur - :<BR>') document.write(semaine.slice(1, -1).join(' - ')+'<BR>') // Dans lâordre inverse document.write('Affichage du tableau <I>semaine</I> après application de la méthode <I>reverve()</I>:<BR>') semaine.reverse() document.write(semaine.join(' - ')) </SCRIPT>
<SCRIPT> // Soit une liste de personne Personnes = new Array('pierre', 'paul', 'jacques', 'henry', 'albert') // On affiche la liste d'origine document.write('Liste d\'origine : ' + Personnes.join()+'<BR>') // On classe la liste, sans preciser de fonction de comparaison // Le classement se fait donc dans lâordre alphabŽtique Personnes.sort() // On affiche la liste classŽe document.write('Ordre alphabétique : ' + Personnes.join()+'<BR>') // On peut aussi classer la liste ordre alphabŽtique de la dernire lettre // Pour cela on definit une fonction de comparaison function compDerniereLettre (a, b) { derniereLettreA = a.charAt(a.length - 1) derniereLettreB = b.charAt(b.length - 1) if (derniereLettreA < derniereLettreB) { return -1 } if (derniereLettreA > derniereLettreB) { return 1 } return 0 } // On affiche la liste classŽe selon la derniere lettre du nom document.write('Ordre alphabétique de la dernière lettre : ' + Personnes.sort(compDerniereLettre)+'<BR><BR>') // Soit une liste de nombre Nombres = new Array(10, 5, 1, 110, 2) document.write('Liste d\'origine : ' + Nombres.join()+'<BR>') // On classe la liste, sans preciser de fonction de comparaison // Le classement se fait donc dans lâordre alphabŽtique document.write('Ordre alphabétique : ' + Nombres.sort()+'<BR>') // Fonction de comparaison pour 2 nombres function compNumerique(a, b) { // On renvoie a - b, de telle sorte que si a est inferieur ˆ b // la fonction retourne une valeur nŽgative et a se trouve donc // avant b dans le classement return a - b } // On classe maintenant la liste en prŽcisant une fonction de comparaison Nombres.sort(compNumerique) document.write('Ordre numérique : ' +Nombres.join()+'<BR>')
La fonction escape sert à coder une chaîne de caractères en URL-encodée.
<FORM> Choisissez votre saison: <SELECT onChange="window.location='unescape.html?saison='+ escape(this.options[this.selectedIndex].text)"> <OPTION>printemps <OPTION>ete <OPTION>automne <OPTION>hiver </SELECT> </FORM>
<FORM> Choisissez votre saison: <SELECT onChange="window.location='unescape.html?saison='+ escape(this.options[this.selectedIndex].text)"> <OPTION>printemps <OPTION>ete <OPTION>automne <OPTION>hiver </SELECT> </FORM>Le fichier unescape.html contient :
<SCRIPT> param = unescape(window.location.search).split('=') saison = param[1] switch (saison) { case 'printemps' : document.write('<H1>Voilà le printemps...</H1>') break case 'ŽtŽ' : document.write('<H1>Voilà l\'ete...</H1>') break case 'automne' : document.write('<H1>Voilà l\'automne...</H1>') break case 'hiver' : document.write('<H1>Voilà l\'hiver...</H1>') break default : document.write('Désolé, mais là je ne sais pas') } </SCRIPT>