Des trucs de base en Javascript


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

Mon premier script...


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

Evenements sur les liens


<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

Netscape 


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

Exemple de modification d'images avec la souris


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

Changements de couleurs avec la souris


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

Banderolle dans la barre d'état


<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

Horloge dans la barre d'état

Cet exemple calcule l'heure, détermine l'état de la variable flasher, et insère l'heure dans la barre d'état chaque seconde. 

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

Propriété window.defaultStatus

Dans cet exemple, c'est le message suivit par l'instruction window.defaultStatus qui sera affiché dans la barre d'état. 

<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

Netscape

Les propriétés des frames et des fichiers

Les propriétés parent.

Les références à un cadre.

Propriété document.location.

Propriété window.location

Propriété window.search

Méthode window.alert()


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

Méthode window.confirm()


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

Méthode window.prompt()


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

Nouvelle fenêtre


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

Fermeture d'une fenêtre


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

Changer la couleur de la nouvelle fenêtre


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

Changement de couleurs.

Faire tomber la nouvelle fenêtre...


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

Un exemple de compte à rebours.


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

Extraction du chemin d'accès


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

Propriété location.hash


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

Haut du document

Section 1

Section 2

Section 3

Objet History


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

Arrière toute !


<HTML>
<HEAD>
<TITLE>Arrière toute !</TITLE>
</HEAD>

<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Retour en arrière" onClick="history.back()">
</FORM>
</BODY>
</HTML>

Méthode Go()


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

Extraction de la date du document


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

Propriété document.referrer (1/2)

Visitez mon document-frère

Si on accède au fichier frere.html par le présent fichier, le message affiché sera différent de celui affiché si on accède à ce ficher directement, c'est-à-dire sans passer par le document bases.html.

Cookies


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

Formulaires

Propriété document.forms[x]. 


<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>
Indiquez votre Beatle préféré : John Paul George Ringo

Tapez le nom de votre chanson préférée des Beatles :

Propriété value d'un objet text


<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>
Tapez quelque chose entièrement en minuscules
puis cliquez en dehors de la case pour obtenir
une conversion en majuscules :

Propriété value d'un objet text (2)


<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>
Tapez quelque chose entièrement en minuscules
puis cliquez en dehors de la case pour obtenir
une conversion en majuscules :

Propriété value d'un objet text (3)


<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>
Tapez quelque chose entièrement en minuscules
puis cliquez en dehors de la case pour obtenir
une conversion en majuscules :

Propriété DefaultValue d'un objet text


<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>
Tapez quelque chose entièrement en minuscules
puis cliquez en dehors de la case pour obtenir
une conversion en majuscules :

Vérification de l'état d'une case à cocher


<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>
Case à cocher

Autre usage de case à cocher


<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>
Employer l'autre URL

Gestionnaire de clic dans une case à cocher


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

Cochez les accessoires dont est équipé votre micro-ordinateur :

Ecran couleur

Souris

Port souris

Modem

Lecteur de CD-ROM

Déterminer quel bouton est coché dans un groupe


<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>
Indiquez votre Beatle préféré :

John Paul George Ringo

Gestionnaire d'événement onClick de bouton radio


<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>
John Paul George Ringo

Propriété options d'un objet select (liste)


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

Usage de la propriété selectedIndex


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

Exploitation de la propriété text d'un élément de liste


<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>
Choisissez une couleur d'arrière-plan :

Propriété value d'un élément de liste


<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>
Choisissez une couleur d'arrière-plan :

Détection de sélection multiple


<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>
Cliquez sur les accessoires dont vous disposez
(en maintenant enfoncée la touche Ctrl ou Commande) :

Puis cliquez sur ce bouton :

Réaction immédiate à une sélection dans une liste


<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>
Choisissez une couleur d'arrière-plan :

Test balise input


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

Entrée text et calcul immédiat dans un formulaire


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

Nombre de disquette à 3.00 F
Nombre de CDRom à 8.00F

Montant F

Test d'une lettre saisie dans un formulaire


<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>
Tapez la lettre A, B ou C :

Mail & Sujet


<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>
Sujet du mail :

Message :

Exemple de cases cochées de facons automatiques

Les repas à la place ne sont servis qu'en première classe.
1 ere Classe
2 eme Classe
Repas


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

Transfert d'une case vers une autre


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


Test select


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

Résumé sur les options


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

Positionnement de la souris sur un lien


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

Gestionnaire onClick= de lien


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

Objet navigator


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

Définition d'un pseudo-tableau à deux dimensions


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

Le Quotidien du Système

HTML écrit par JavaScript


<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 écrit par JavaScript (2)


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

Modeleur de date


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

Bienvenue

Modeleur de date (2)


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

Bienvenue

Portée des variables


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

Fonction généralisée


<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>
Entrez une valeur :

Résultat :

Tableau statique


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

Calendrier mensuel (version statique)

Tableau dynamique


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

Calendrier mensuel (version dynamique)

Image cliquable animée

L'exemple qui suit montre un exemple d'image cliquable animée. 

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

Objets


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

Les conversions entre types


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

Tablaux


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

C'est quoi ton matos ?


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

Fonction()


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

Les chaînes de caractères comme objets


<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>
Saisissez une phrase: 


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

Un peu de tri...


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

Des URLs encodés now...

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>
Choisissez votre saison: