Série 3 JAVASCRIPT 2022/2023

Rappel :
Il existe des fonctions de conversion de type : String et Number, qui permettent de spécifier explicitement la conversion à
effectuer.
var a = String(21.34); ⇒ a = "21.34"
var b = Number ("12.56") ⇒ b = 12.56
☛ la fonction eval : x=eval(variable) évalue une chaîne de caractère sous forme de valeur numérique. On peut stocker dans la
chaîne des opérations numériques, des opérations de comparaison, des instructions et même des fonctions.
Exemple: ch='5 + 10' ; x=eval(ch); ⇒ x=15;
☛ Il est préférable, de précéder toute conversion avec la fonction number, par un test de validité avec la fonction IsNaN.
- ch= „ali‟ ch.charCodeAt(0)=97
- "ABC".charCodeAt(0) // returns 65
- String.fromCharCode(65) return „A‟

Syntaxe
ch.substr(début[, longueur])

Exemples
var CH = 'Mozilla';

alert(CH.substr(0, 1)); // 'M'

alert(CH.substr(1, 0)); // ''
alert(CH.substr(-1, 1)); // 'a'
alert(CH.substr(1, -1)); // ''
alert(CH.substr(-3)); // 'lla'
alert(CH.substr(1)); // 'ozilla'
alert(CH.substr(-20, 2)); // 'Mo'
alert(CH.substr(20, 2)); // ''
Exercice 1
Exercice 2
Créez un répertoire appelé TpJavaScript. Ce répertoire sera utilisé pour sauvegarder tous vos
fichiers d‟activités.
 Dans une page standard, appeler le fichier premierScript.js qui contient:
 Une demande à l‟utilisateur de saisir un mot
 Afficher les phrases suivantes:
 Le mot saisie est : “le mot tapé”
 La première lettre du mot 1 est: 2 et il se compose de 3 caractères
 où 1 est le mot saisie par l‟utilisateur, 2 la première lettre du mot et 3 est le nombre de
caractères du mot
 La dernière lettre du mot 1 est: “La dernière lettre”
 Le mot doit être affiché en gras et en bleu
 Le schémas suivant décrit le résultat obtenu

Exercice 3
 Écrire dans un document html5 une fonction javascript qui permet d‟afficher un message de
bienvenue en Bleu centré, de taille 24px.
 Cette fonction sera appelée au chargement de la page.
Exercice 4
 Créer une page html5 qui ressemble au schéma suivant:

 Créer une fonction javascript qui renvoie la chaîne de caractères écrite dans la première zone de texte et
qui est passée en argument complètement inversée (mots et lettres).
 Le résultat doit être affiché dans la deuxième zone de texte après un click sur le bouton d‟inversion
 La deuxième zone de texte doive être inactif
 Fonctions utiles pour cet exercice
split()
reverse()
join()
Exercice 5
 Créer une page html5 qui ressemble au schéma suivant:
  Créer une fonction javascript qui renvoie le mot le long dans la chaîne de caractères écrite dans la
première zone de texte et qui est passée en argument.
 Le résultat doit être affiché dans la deuxième zone de texte après un click sur le bouton de recherche
 La deuxième zone de texte doive être inactif
 Fonctions utiles pour cet exercice
split()
Exercice 5
 L‟objectif de cet exercice est de créer une interface qui ressemble celle d‟envoi d‟un SMS
 Créer une page HTML5 qui contient:
 Une zone de texte (ou textarea) pour que l‟internaute puisse y saisir un texte quelconque. On
suppose que celui ci ne doit pas contenir plus de 120 caractères.
 Une zone de texte en bas du textarea qui affiche le nombre de caractères restants.
 Ce nombre sera automatiquement calculé à chaque modification du texte par le clavier
 Le schémas suivant décrit le résultat qui sera obtenu

Exercice 7
 Écrire un script qui demande une chaine de caractère puis affiche plaindrome
 Un palindrome est un mot ou une phrase dont l‟ordre des lettres reste le même si on le lit de gauche à
droite ou de droite à gauche. Par exemple, “ressasser” “radar” “SOS” sont des palindromes
Exercice 8
 Écrire un programme qui double toutes les voyelles d‟une phrase par exemple :‟apcpedagogie.com„
devient „aapcpeedaagoogiiee.coom„
Exercice 9Travail à faire :
1. Ecrire une fonction qui permet de tester si une chaîne de caractère passée en paramètre commence par une lettre
majuscule ou minuscule entre 'a' et 'd'.
2. Ecrire une fonction qui renvoie 'true' lorsque'une chaîne contient un seul caractère '@' sinon renvoie 'false'.
3. Ecrire une fonction qui renvoie 'true' lorsque'une chaîne contient au moins un chiffre sinon renvoie 'false'.
4. Ecrire une fonction qui remplace les chiffre par le caractère '*' .
5. Créer un script qui va utiliser ces fonctions.

Exemple d’exécution
1. On utilisera pour test le code html suivant :
2. <!doctype html>
3. <html>
4. <head>
5. <title>Manipuler les chaines de caractères</title>
6. <meta charset="utf-8">
7. <style type="text/css">
8. div{
9. border: 1px solid black;
10. }
11. </style>
12. </head>
13. <body>
14. <div >
15. <p contenteditable="true" id="ch1" >Bonjour</p>
16. <button onclick="str_fisrt_letter(document.getElementById('ch1').innerHTML)">Tester</button>
17. <p id="res1"></p>
18. </div>
19. <div >
20. <p contenteditable="true" id="ch2" >monadress [AT] exelib [DOT] com</p>
21. <button onclick="str_email(document.getElementById('ch2').innerHTML)">Tester</button>
22. <p id="res2"></p>
23. </div>
24. <div >
25. <p contenteditable="true" id="ch3" >12test</p>
26. <button onclick="str_number(document.getElementById('ch3').innerHTML)">Tester</button>
27. <p id="res3"></p>
28. </div>
29. <div >
30. <p contenteditable="true" id="ch4" >bonjour12</p>
31. <button onclick="str_replace(document.getElementById('ch4').innerHTML)">Tester</button>
32. <p id="res4"></p>
33. </div>
</body>
contenteditable="true" est un attribut html5 qui permet de rendre un élément éditable , utilisé dans cet
exercice pour simplifier la modification de la chaîne à tester.
2. Le script contenant les 4 fonctions :
<script type="text/javascript">
 function str_fisrt_letter(ch){
/*L'expression régulière qui ^[a-d] pour tester si la chaîne commence par une lettre entre a et le modificateur i pour ne
pas faire de différence entre majuscules et minuscules */
var pattern =/^[a-d]/i;
var res = document.getElementById("res1");
if(pattern.test(ch)){
res.innerHTML=ch+" chaîne valide commence par une lettre entre a et d ";
}
else {
res.innerHTML=ch+" chaîne invalide ";
}
}

function str_email(ch){
var res = document.getElementById("res2");
/*La fonction split(@) transforme la chaîne en tableau de sous chaines à partir du caractère séparateur ici '@' .Si c.len
ght=1 donc la chaîne ne contient pas @ et si c.lenght>2 alors il contient plusieurs '@' */
var c =ch.split('@');
if(c.length==2){
res.innerHTML=ch+" chaîne valide : contient un seul caractère @ ";
}
else {
res.innerHTML="chaîne invalide!";
}
}

function str_number(ch){
var res = document.getElementById("res3");
var pattern =/\d/;
/*La fonction seach peut prendre en paramètre une expression régulière*/
if(ch.search(pattern)!=-1){
res.innerHTML=ch+" chaîne valide : contient un nombre ";
}
else {
res.innerHTML=ch+" chaîne invalide : ne contient pas un nombre ";
}
}

function str_replace(ch){
var res = document.getElementById("res4");
/*La fonction replace peut prendre en paramètre une expression régulière ici le modificateur g pour un recherch
e globale afin de remplacer tous les chiffres de la chaîne*/
ch2=ch.replace(/\d/g,"*");
res.innerHTML=ch2;

</script>