Jeudi 2 juin 2011 4 02 /06 /Juin /2011 09:19

 

Le langage "JAVASCRIPT". 1.

 

 

"Javascript" est un langage de programmation créé par les sociétés Netscape et Sun Microsystems dans le but d'améliorer l'écriture de page Web. C'est un langage interprété ; c'est-à-dire qu'à partir du code source on ne peut pas générer une application indépendante, mais que celui-ci doit être traduit. Il ne faut pas confondre "Javascript" et "Java" qui est, lui, un langage compilé.

"Javascript" possède la particularité de ne pas posséder d'interpréteur, pour visualiser le résultat de l'écriture d'un programme il faudra lancer un navigateur Web capable d'interpréter le langage.
C'est un langage qui permet également de construire des formulaires pour avoir une certaine interactivité au niveau de vos pages web. Il est une alternative aux pages qui sont développées en flash. On note au passage que c'est encore le langage le plus utilisé au niveau des pages web pour la création de la moindre interactivité.
Attention, ce langage fait la différence entre majuscules et les minuscules. De même il faudra faire très attention au point-virgule en fin d'instruction.

 

Les scripts "Javascript" s'intègre dans le code HTML par l'insertion des balises :

<SCRIPT LANGUAGE = "javascipt">

.......

</SCRIPT>

Sous HtmlEd32 il suffit de demander Link – Script – Language = JavaScript pour poser les balises de base ci-dessus.

Le langage "Javascript" est orienté objet, on retrouvera ainsi la notation

objet.propriété = valeur (comme dans DELPHI ! !)

ou valeur peut être une constante, une variable ou une fonction.

 

Exemple :

  • Tapez le code suivant dans l'éditeur HtmlEd32 et visualisez le résultat grâce au navigateur.

<HTML>

<HEAD><TITLE></TITLE></HEAD>

 

<SCRIPT LANGUAGE="javascript">

document.bgcolor ="00FF00"

document.fgcolor = "FF0000"

document.write("Un premier test en Javascript")

</SCRIPT>

<BODY>

 

</BODY>

</HTML>

 

Important : "Javascript" fait la différence entre les majuscules et les minuscules. C'est la source de nombreuses erreurs, faciles à corriger avec de l'attention.

 

En utilisant une variable que l'on affecte d'une certaine valeur on peut écrire :

<SCRIPT LANGUAGE="javascript">

message = "utilisation d'une variable"

document.bgcolor ="00FF00"

document.fgcolor = "FF0000"

document.write(message + "<BR>")

message += " " + message

document.write (message)

</SCRIPT>

 

Il existe en "Javascript" de nombreux opérateurs dont certains d'affectation comme ceux-ci :

 

opérateur :

Equivalent de :

x += y

x = x + y

x -= y

x = x - y

x *= y

x = x * y

x /= y

x = x / y

 

  • Notez que dans ce premier exemple on a utilisé la balise "HTML" "<BR>" en l'encadrant de guillemets.

 

Comme tous langages informatiques "Javascript" comporte les structures séquentielles, conditionnelles et itératives.

 

  • Vous allez écrire un programme utilisant la structure itérative classique car commune à la quasi totalité des langages, à savoir la boucle "For".
    Tapez le code suivant :


<HTML>

<HEAD><TITLE></TITLE></HEAD>

<SCRIPT LANGUAGE = "javascript">

somme = 0

for (i = 1; i <=20; i++)

{

somme += i

document.write(somme+"<BR>")

}

</SCRIPT>

<BODY>

</BODY>

</HTML>

 

Il est possible que le navigateur vous retourne un message d'erreur, en effet comme dans tous les langages informatiques la syntaxe est très stricte.

Elle est pour la boucle "for" la suivante :

for ([expression initiale]; [condition]; [expression finale])

{

instructions

 

}

L'opérateur d'incrémentation noté ++ ajoute 1 à la variable indiquée. Ainsi dans l'exemple i++ signifie que la variable de boucle i est incrémentée de 1 à chaque itération.

 

  • Exercice d’application

Ecrire une séquence JavaScript permettant d’afficher les 20 premiers nombres pairs (à partir de zéro bien sûr !).

Ecrire une séquence JavaScript permettant d’afficher les 10 premiers nombres pairs suivis des 10 premiers nombres impairs (= 0, 2, …..16,18 ; 1, 3, …., 17, 19) ;

 

  • Pour terminer ce "TP" un exemple montrant comment en "Javascript" afficher une boîte de message.

<SCRIPT LANGUAGE = "javascript">

alert("bienvenue dans la page d'Auchon Paul")

</SCRIPT>

 

Notons aussi que ce langage est doucement en train de s'éteindre car ce sont les systèmes androïd qui viennent via les tablettes pc prendre la place de cet interface javascript que nous avons tant aimée. De plus, ces tablettes vont permettre dans un avenir très proche de piloter le système domotique de nos habitations que ce soit directement pour notre aspirateur robot ou pour le chauffage ou la fermeture des volets, la mise en route du four etc. Tout ceci ce fera directement à partir du système d'exploitation de notre tablette ou smartphone.  Il en va de même bien sûr pour les tondeuses robot.

Par java-script
Ecrire un commentaire - Voir les 0 commentaires
Jeudi 2 juin 2011 4 02 /06 /Juin /2011 09:19

 

Le langage «JAVASCRIPT». 2.

 

Le langage «JAVASCRIPT» ne possède pas de méthode de gestion des entrées sorties ; il n'est donc pas possible d'écrire ou de lire un fichier, de lire une entrée clavier.

Pour interroger l'utilisateur il est nécessaire de lier un script «JAVASCRIPT» avec du code "HTML".

Ceci peut se réaliser par exemple grâce à l'utilisation de formulaires (balise "<FORM>").

«JAVASCRIPT» permet d'ajouter aux balises "HTML" des gestionnaires d'événements qui permettent d'appeler une fonction en lui communiquant les paramètres nécessaires.

 

Exemple :

 

<HTML>

<HEAD><TITLE>Interaction</TITLE>

<SCRIPT LANGUAGE=«JAVAScript">

function bonjour(name)

{

alert(name)

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

Entrez votre nom, validez avec "OK" :

<INPUT TYPE="text" NAME="nom" VALUE ="">

<INPUT TYPE="button" VALUE="OK" ONCLICK = "bonjour(nom.value)">

</FORM>

</BODY>

</HTML>

La déclaration de la fonction est classique, on lui assigne un nom qui permettra de l'appeler.

Ce que la fonction effectue est placé entre accolade.

L'événement est ici le fait que l'utilisateur clique sur le bouton "OK"

Cet événement doit entraîner l'appel de la fonction "bonjour" on ajoute donc à la déclaration en HTML du bouton le paramètre "ONCLICK".

Une fois l'appel de fonction fait, celle-ci s'effectue

"alert(jo)" va afficher une boîte de dialogue affichant le contenu du champ de saisie nom (nom.value).

A noter qu'il vaut mieux déclarer les fonctions «JAVASCRIPT» entre les balises "<Head>" car ainsi l'utilisateur n'aura pas encore eu la main, fait qui pourrait interférer sur le bon déroulement des fonctions.

On peut placer des commentaires dans du code «JAVASCRIPT» .

La syntaxe est la suivante :

<!-- commentaires -->

  • Tapez le code suivant :

<HTML>

<HEAD><TITLE>Interaction</TITLE>

<SCRIPT LANGUAGE=«JAVAScript">

function bonjour(jo)

{

alert("Salut "+jo)

}

</SCRIPT>

</HEAD>

 

<BODY>

<FORM>

Entrez votre nom et cliquez n'importe où en dehors du masque de saisie

<INPUT TYPE="text" NAME="nom" VALUE =""" onBlur = "bonjour(NOM.VALUE)">

</FORM>

</BODY>

</HTML>

L'événement "OnBlur " correspond au fait de quitter la saisie d'un champ d'un formulaire en tapant sur la touche "TAB" par exemple et fonctionne comme la plupart des langages orientés objects tels delphi, pascal ou C++.

 

Exercice

  1. Demander à l’utilisateur son nom, puis son prénom et dans le message d’alert dites lui « bonjour », nom , prénom.

 

2- Demander à l’utilisateur son nom, puis son année de naissance et dans le message d’alert dites lui « bonjour », nom , « tu as », age « ans ».

 

LA DATE :

  • Un objet simple et amusant à utiliser est "Lastmodified" qui donne la date de dernière modification d'un document.

<HTML>

<HEAD><TITLE>lastmodified</TITLE> </HEAD>

<BODY>

Cette page à été éditée la dernière foi le :

<SCRIPT LANGUAGE=«JAVAScript">

Document.Write(Document.LastModified)

</SCRIPT>

</BODY>

</HTML>

 

  • On peut aussi donner l'heure à l'utilisateur en utilisant l'objet "Date".

<HTML>

<HEAD><TITLE>Il est </TITLE> </HEAD>

<BODY>

Il est actuellement :

<SCRIPT LANGUAGE=«JAVAScript">

maintenant = new Date()

document.write(maintenant.getHours()," : ",maintenant.getMinutes())

</SCRIPT>

</BODY>

</HTML>

La ligne "maintenant = new date() crée un objet qui contient la date donnée par l'horloge interne de l'ordinateur.

 

Exercice :

 

  • Deux question a) Mois du BAC (un nombre de 1 à 12) et b) Jour du BAC (un nombre de 1 à 31 ). Une phrase pour répondre : « le BAC dans » n « mois  et » p « jours .»

 

 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<META NAME="Generator" CONTENT="HTMLed32 Version 2.0d">

<META NAME="Author" CONTENT="Unknown">

<SCRIPT LANGUAGE="JavaScript">

function bonjour(name,annee)

{

age = 1999 - annee

alert('bonjour '+name+' tu as '+age+' ans')

}

</SCRIPT>

</HEAD>

 

<BODY>

<FORM>

Entrez votre nom :

<INPUT TYPE="text" NAME="nom" VALUE ="" >

Entrez votre année :

<INPUT TYPE="text" NAME="annee" VALUE ="" onBlur = "bonjour(nom.value,annee.value)"

</FORM>

</BODY>

</HTML>

---------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<SCRIPT LANGUAGE="JavaScript">

function combien(mois,jour)

{

now=new Date()

alert('le bac dans '+(mois-now.getMonth())+' mois et '+(jour-now.getDate())+' jours')

}

</SCRIPT>

</HEAD>

 

<BODY>

<FORM>

Mois du BAC (1..12)

<INPUT TYPE="text" NAME="mois" VALUE ="" ><BR>

Jour du BAC (1..31)

<INPUT TYPE="text" NAME="jour" VALUE ="" onBlur = "combien(mois.value,jour.value)">

</FORM>

</BODY>

</HTML>

Par java-script
Ecrire un commentaire - Voir les 0 commentaires
Jeudi 2 juin 2011 4 02 /06 /Juin /2011 09:18

 

Le langage "JAVASCRIP". 3.

 

Préambule : les variables.

 

Contrairement à d'autres langages tel « Pascal », Delphi ou « C », il n'est pas nécessaire en « Javascrip » de déclarer les variables. Le simple fait d'affecter celles-ci les rendra utilisables.Il ne faut pas prendre les mauvaises habitudes qui permettent de céer un programme sans aucune déclaration comme en visual basic sous un tableur classique que je ne nommerais pas ici !

Cependant par souci de clarté il est préférable de les déclarer systématiquement.

Ainsi, écrira-t-on :

Var rep = ""

Var nb = 10

Var valeur = 1.654

Var element = new array(10)

  • Attention, "Javascrip" différenciant les majuscules des minuscules les variables Nb et nb sont différentes.

 

 

La structure conditionnelle

 

Elle est construite de façon classique en "Javascrip".

if (condition)

instruction1

else

instruction2

L'instruction "else" est facultative.

Si "instruction1" est une instruction composée, on utilise les accolades (elles remplacent le BEGIN et le END du « Pascal »).

 

Exemple :

  • Tapez le code suivant.

<HTML>

<HEAD><TITLE>Tableau et Test </TITLE> </HEAD>

<BODY>

Il est actuellement :

<script language="JavaScript">

var maintenant = new Date()

document.write(maintenant.getHours()," : ",maintenant.getMinutes())

</script>

Nous sommes le

<script language="JavaScript">

var test =2

var mois =new Array(12)

mois [0] = "JANVIER"; mois [1] = "FEVRIER"; mois [2] = "MARS"; mois [3] = "AVRIL"; mois [4] = "MAI"

document.write(maintenant.getDate()," : ",mois[maintenant.getMonth()]," : ",maintenant.getYear()+"<BR>")

test = maintenant.getYear() % 2

if (test == 0)

document.write ("année paire")

else

document.write("année impaire")

</script>

</BODY>

</HTML>

 

Commentaires.

 

  • L'instruction "new" permet d'initialiser un nouvel objet. Il faut noter qu'en "Javascrip" un tableau est considéré comme un objet.
    On a dans le code :

var maintenant = new Date()

var mois =new Array(12)

  • l'indice d'un élément du tableau est donné entre crochets (mois[3] = "avril").

  • Plutôt que d'écrire
    </script>
    Nous sommes le
    <script language="JavaScript">
    Qui place deux scripts dans un même document on pouvait écrire :
    <script language="JavaScript">
    var maintenant = new Date()
    var test =2
    var mois =new Array()
    document.write(maintenant.getHours()," : ",maintenant.getMinutes())
    document.write("<HR size=50 width=10%>" + " Nous sommes le")
    .....

  • L'écriture de
    mois[maintenant.getMonth()]
    est logique, getmonth est une méthode qui retourne un nombre entre 0 et 11 quand elle est appliquée à un objet "Date", ici "maintenant" ; c'est donc ce retour qu'il faut adjoindre à l'objet "mois".

  • La ligne : test = maintenant.getYear() % 2
    signifie : affecter à la variable "test" le reste de la division par 2 de la valeur "maintenant.getYear()".

  • Dans le test de condition "if (test == 0)" l'égalité est notée "==" pour ne pas être confondu avec l'affectation notée "=".

 

Recréation :Il est possible de générer des nombres aléatoires.

  • Tapez ce code :

<HTML>

<HEAD><TITLE>Jeux</TITLE>

<SCRIPT Language = "javascript">

function tirage()

{

alert(Math.round(Math.random()))

}

</SCRIPT>

</HEAD>

<BODY>

<CENTER><H4>Si vous faites 0 vous perdez, si vous faites 1 vous gagnez.

<BR>

Cliquez sur OK pour jouer </H4> </CENTER>

<FORM>

<CENTER><input type ="button" value = "OK" onclick ="tirage()"></CENTER>

</BODY>

</HTML>

 

Exercices :

 

1- Répondre « perdu » quand le nombre tiré est zéro et « gagné » quand c’est 1.

 

2- Il sera alors facile de programmer un petit « c’est plus, c’est moins »

 

 

<HTML>

<HEAD><TITLE>Jeux</TITLE>

<SCRIPT Language = "javascript">

function tirage()

{

k=Math.round(Math.random())

if (k==0)

st="perdu"

else

st="gagné"

alert(st)

}

</SCRIPT>

</HEAD>

 

<BODY>

 

<CENTER><H4>Si vous faites 0 vous perdez, si vous faites 1 vous gagnez.

<BR>

Cliquez sur OK pour jouer </H4> </CENTER>

<FORM>

<CENTER><input type ="button" value = "OK" onclick ="tirage()"></CENTER>

</BODY>

</HTML>

 

-----------------------------------------------------------

<HTML>

<HEAD><TITLE>Jeux</TITLE>

<SCRIPT Language = "javascript">

function tirage(nb)

{

if (nb>k)

{

st="c'est moins"

compt++

}

else if (nb<k)

{

st="c'est plus"

compt++

}

else

st="gagné en "+compt+" coups"

alert(st)

}

</SCRIPT>

</HEAD>

 

<BODY>

<SCRIPT LANGUAGE="JavaScript">

k=Math.round(Math.random()*100)

compt=0

</SCRIPT>

 

<CENTER><H4>Jeu du c'est plus c'est moins.

<BR>

Nombre entre 1 et 100 </H4> </CENTER>

<FORM>

<CENTER><input type ="text" name="essai" value="">

<input type="button" value="OK" onclick ="tirage(essai.value)"></CENTER>

</BODY>

</HTML>

Par java-script
Ecrire un commentaire - Voir les 0 commentaires
Jeudi 2 juin 2011 4 02 /06 /Juin /2011 09:14

 

Le langage "Javascrip". 4.

 

  • Tapez le programme suivant :

<HTML>

<HEAD>

<SCRIPT>

function rep(a)

{

window.status = a

setTimeout ("window.status=''",2000)

}

</SCRIPT>

</HEAD>

<BODY>

Quelle est la racine cubique de 1728 ?<BR>

<FORM>

<INPUT TYPE="Button" NAME="reponse1" VALUE="12" onClick =rep("VRAI")>

<INPUT TYPE="Button" NAME="reponse2" VALUE="16" onClick =rep("FAUX")>

</FORM>

</BODY>

</HTML>

 

 

Les nouveautés :

"window.status"

La propriété "status" de l'objet "window" est le contenu de la barre d'état ; la modifier permet donc d'écrire dans cette dernière.

 

"setTimeout"

C'est une méthode permettant d'affecter une minuterie à une action. La syntaxe est la suivante : "setTimeout("action", délai en millisecondes)"

 

L'action peut être une fonction ; ici on aurait pu écrire "setTimeout("rep('')",2000)" en utilisant le fait qu'une fonction peut s'appeler elle même.

  • Vérifiez ceci en modifiant le code.

 

La balise <BODY> pouvant être placée plusieurs fois dans un document, on en profite pour placer un appel de fonction. Celle-ci avertira l'utilisateur que le temps accordé pour répondre est passé.

  • Insérez les lignes suivantes :

<SCRIPT>

function chrono()

{

setTimeout("rep('trop tard')",5000)

}

function rep(a)

.......

Quelle est la racine cubique de 1728 ?<BR>

<BODY onload = chrono()>

Vous noterez que la fonction "chrono" appelle une fonction se trouvant définie plus loin dans le code sans que cela pose problème, ce qui ne serait pas le cas avec d'autres langages. Ici par souci de logique on aurait dû placer la fonction "chrono" à la suite de la fonction "rep".

 

Plutôt que d'écrire dans la barre d'état on peut indiquer les réponses dans une zone de saisie.

  • Modifiez le code ainsi :

function rep(forme,a)

{

forme.reponse.value =a

}

</SCRIPT>

</HEAD>

<BODY>

Quelle est la racine cubique de 1728 ?<BR>

<FORM >

<INPUT TYPE="Button" NAME="reponse1" VALUE="12" onClick =rep(this.form,’VRAI’)>

<INPUT TYPE="Button" NAME="reponse2" VALUE="16" onClick =rep(this.form,’FAUX’)>

<INPUT TYPE="Text" NAME="reponse" >

</FORM>

 

On ajoute une zone de saisie "<INPUT TYPE="Text" NAME="reponse" >" .

La fontion rep a deux paramètres : forme qui pointe sur le questionnaire FORM lui-même par l’intermédiaire du pointeur this.form et la variable a.

Comme dans tous langages objets, la ligne " forme.reponse.value =a", doit se lire de droite à gauche. Ainsi la valeur de l'objet "reponse" dépendant de l'objet "forme" est affectée de la valeur du paramètre "a".

 

On peut présenter ce début de questionnaire encore d'une autre façon en utilisant cette fois des cases à cocher.

  • Modifiez le code ainsi :

function rep(forme,a)

{

if(a =="VRAI")

{

forme.vrai.checked=true

} else

{

forme.faux.checked=true

}

}

</SCRIPT>

</HEAD>

<BODY>

Quelle est la racine cubique de 1728 ?<BR>

<FORM >

<INPUT TYPE="Button" NAME="reponse1" VALUE="12" onClick =rep(this.form,’VRAI’)>

<INPUT TYPE="Button" NAME="reponse2" VALUE="16" onClick =rep(this.form,’FAUX’)>

<INPUT TYPE="CHECKBOX" NAME="vrai">Vrai

<INPUT TYPE="CHECKBOX" NAME="faux">Faux

</FORM>

 

Ici la propriété "CHECKED" des objets "vrai et faux" est modifiée en fonction de la réponse de l'utilisateur, " question.vrai.CHECKED=true".

Il est possible dans un formulaire d'initialiser les différents objets grâce à un bouton adéquat.

  • Ajouter ces deux lignes :

<BR>

<INPUT TYPE="RESET" NAME="reset" VALUE="initialiser">

Il serait plus logique d'utiliser ces cases à cocher comme entrées de la réponse.

 

  • Modifiez une nouvelle fois le code :

Vous ferez attention, comme toujours en "Javascrip" aux fautes de syntaxes ; par exemple "Else" au lieu de "else". Soyez très vigilant quand au nombre et à la position des accolades.

 

function rep(forme)

{

if(forme.vrai.checked && forme.faux.checked)

{

forme.reponse.value = "Ne cochez qu'une seule case"

}

else

{

if(forme.vrai.checked)

{

forme.reponse.value = "Bonne réponse"

}

else

{

forme.reponse.value = "Mauvaise réponse"

}

}

}

....

<FORM >

<INPUT TYPE="Button" NAME="reponse1" VALUE="12" onClick =rep(this.form,'VRAI')>

<INPUT TYPE="CHECKBOX" NAME="vrai" onClick="rep(this.form)">Vrai

<INPUT TYPE="CHECKBOX" NAME="faux" onClick="rep(this.form)">Faux

<BR>

<INPUT TYPE="Text" NAME="reponse" SIZE= 30>

</FORM>

On utilise pour le test l'opérateur logique et noté "&&".

Il existe trois opérateurs booléens :

 

ET

&&

OU

||

NON

!

 

Le "ou" s'obtient en tapant deux fois le caractères ASCII 124 avec la combinaison de touches "ALT + 124".

 

Les objets liés aux formulaires utilisés dans ce "TP" ont pour vocation première de permettre l'envoi d'informations de la part du lecteur d'une page "WEB" vers le serveur de cette page.

Cette communication est possible grâce au "CGI" pour "Common Gateway Interface".
La plupart des ordinateurs actuels et pc portables, même netbook, affiche assez rapidement au vu des cartes graphiques qui les équipent.

N'utilisant pas pour l'instant ces possibilités puisqu'étant "hors ligne" vous pouvez cependant constater que "Javascrip" peut utiliser ces objets en interne.

 

 

Exercice

Fabriquer un QCM à trois réponses avec des cases à cocher du genre : « Quel est l’age de Michel Platini ? » , « 40 ans, 42 ans, 44 ans ».

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<META NAME="Generator" CONTENT="HTMLed32 Version 2.0d">

<META NAME="Author" CONTENT="Unknown">

 

<SCRIPT LANGUAGE="JavaScript">

function rep(forme)

{

if((forme.a40.checked && forme.a42.checked) || (forme.a40.checked && forme.a44.checked) || (forme.a44.checked && forme.a42.checked))

{

forme.reponse.value = "Ne cochez qu'une seule case"

}

else

{

if(forme.a44.checked)

{

forme.reponse.value = "Bonne réponse"

}

else

{

forme.reponse.value = "Mauvaise réponse"

}

}

}

 

</SCRIPT>

</HEAD>

<BODY>

Quel est l'age de Michel Platini?<BR>

<FORM >

<INPUT TYPE="CHECKBOX" NAME="a40" onClick="rep(this.form)">40 ans

<INPUT TYPE="CHECKBOX" NAME="a42" onClick="rep(this.form)">42 ans

<INPUT TYPE="CHECKBOX" NAME="a44" onClick="rep(this.form)">44 ans

<BR>

<INPUT TYPE="Text" NAME="reponse" SIZE= 20>

</FORM>

 

</BODY>

 

</HTML>

Par java-script
Ecrire un commentaire - Voir les 0 commentaires
Jeudi 2 juin 2011 4 02 /06 /Juin /2011 09:13

 

Langage "Javascrip". 5.

 

Traitement informatique des chaînes de caractères.

 

  • Chargez le programme "car.htm" qui vous montre comment fonctionne les méthodes " charAT()" et "substring()" liées à l'objet "String".

Le code est le suivant :

 

<HTML>

<HEAD>

<SCRIPT>

function affiche(texte)

{

msg = texte.substring(0,3)

saisie.sortie1.value = msg

msg = texte.charAt(3)

saisie.sortie2.value = msg

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="saisie">

Tapez votre mot puis cliquez sur "OK"<BR><BR>

<INPUT TYPE="text" NAME="entre" VALUE=""> <BR><BR>

<INPUT TYPE="button" NAME="ok" VALUE="OK !" onClick="affiche(document.saisie.entre.value)"><BR><BR>

<INPUT TYPE="TEXT" NAME="sortie1"><BR><BR>

<INPUT TYPE="TEXT" NAME="sortie2">

</FORM>

</BODY>

 

</HTML>

 

Exercice :

 

  • En utilisant l'une ou l'autre des méthodes, écrivez un script qui affiche à l'envers le texte saisie par l'utilisateur ; ainsi "rouge" deviendra "egour".

 

Correction :

 

On remplace dans le même script la fonction "affiche" par la fonction "palindrome" suivante :

 

function palindrome(texte)

{

var msg = ""

for (i = texte.length - 1 ; i >= 0 ; i-- )

{

msg = msg + texte.substring(i,i+1)

}

saisie.sortie1.value = msg

msg = ""

for (i = texte.length ; i >= 0 ; i-- )

{

msg = msg + texte.charAt(i)

}

saisie.sortie2.value = msg

}

Notez

- que l'on indique "i>=0" et non "i = 0" car dans une boucle "For" le deuxième argument est une condition de répétition et non une borne de fin.

- que l'on utilise "texte.length - 1" car la méthode "substring(début, fin)" prend comme point de départ de l'extraction de la sous-chaîne le paramètre "début" + 1.

Recréation :

 

Vous devriez être capable d'afficher un texte déroulant dans la barre d'état ou dans une zone de texte. Bon algorithme !

Par java-script
Ecrire un commentaire - Voir les 9 commentaires
Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus