TD1:
Exercice 1:
- alert()
Affiche un message dans une boîte de dialogue.
- [Link]()
Écrit du contenu directement dans la page web
Peut afficher :
-du texte simple
-des balises HTML :
exemple:
[Link]("<h1>Bonjour</h1>");
2)
prompt()
var nom = prompt("Entrez votre nom : ");
Affiche une boîte pour saisir du texte
La valeur saisie est stockée dans la variable nom
confirm()
var choix = confirm("Voulez-vous afficher votre nom ?");
Affiche OK / Annuler
Retourne :
true si OK
false si Annuler
-Résumé rapide
prompt() → demander une information
confirm() → demander une confirmation
[Link]() → afficher dans la page
if → prendre une décision
3)
<script>
n = parseInt(prompt("Entrez un entier :"));
somme=0;
for(i=1 ; i<=n ; i++){
Somme = somme+i;
}
[Link]("la somme des entiers est : ",somme);
</script>
4)
-La suite de Fibonacci est une séquence de nombres où chaque terme est la somme
des deux précédents, commençant généralement par 0 et 1: (0, 1, 1, 2, 3, 5, 8, 13...).
<script>
var n = parseInt(prompt("Donner n"));
var f0 = 1;
var f1 = 1;
[Link](f0 + " ");
[Link](f1 + " ");
for (var i = 2; i < n; i++) {
var fn = f0 + f1;
[Link](fn + " ");
f0 = f1;
f1 = fn;
}
</script>
parseInt() :
prompt retourne un texte (string) ,On le transforme en nombre entier pour pouvoir
calculer.
5)
<script>
var n=parseInt(prompt("donnez un entier : "));
var fact = 1;
if(n == 0 || n == 1){
[Link](fact);
}else {
for (var i = 2 ; i <= n ;i++){
fact = fact*i;
}
[Link](fact);
}
</script>
6)
<script language="javascript">
[Link]("<select>", "<br>")
for(i=1900;i<=2025;i++){
[Link]("<option>", i, "</option>", "<br>")
}
[Link]("</select>")
</script>
<script>
var T = [
"Afghanistan",
"Albanie",
"Algérie",
"Andorre",
"Angola",
"Maroc",
"Tunisie",
"France"
];
[Link]("<select>");
for (var i = 0; i < [Link]; i++) {
[Link]("<option>" + T[i] + "</option>");
}
[Link]("</select>");
</script>
7)
<script>
var moyenne = parseFloat(prompt("écrire votre moyenne : "));
if (moyenne < 10) {
[Link]("nest pas admis");
} else if (moyenne >= 10 && moyenne < 12) {
[Link]("passable");
} else if (moyenne >= 12 && moyenne < 14) {
[Link]("mention assez bien");
} else if (moyenne >= 14 && moyenne < 16) {
[Link]("mention bien");
} else if (moyenne >= 16 && moyenne <= 20) {
[Link]("mention très bien");
} else {
[Link]("moyenne non valide"); // Pour gérer les nombres > 20
}
</script>
8)
script>
// 1. Saisie des informations
var fume = prompt("Est-ce que vous fumez ? (oui/non)").toLowerCase();
var sexe = prompt("Quel est votre sexe ? (H/F)").toUpperCase();
var age = parseInt(prompt("Quel est votre âge ?"));
var sport = prompt("Faites-vous du sport ? (oui/non)").toLowerCase();
var risque = 0;
// 2. Calcul du niveau de risque
if (fume == "oui") {
risque = risque + 2;
}
if (sexe == "H" && age > 50) {
risque = risque + 1;
} else if (sexe == "F" && age > 60) {
risque = risque + 1;
}
if (sport == "non") {
risque = risque + 1;
}
// 3. Affichage du résultat
[Link]("Votre score de risque est : " + risque + "<br>");
if (risque >= 3) {
[Link]("Le niveau de risque est élevé.");
} else {
[Link]("Le niveau de risque n'est pas élevé.");
}
</script>
-toLowerCase() : Transforme toutes les lettres d'une chaîne de
caractères en minuscules
- toUpperCase() : Transforme toutes les lettres en majuscules
9)
body>
<script language="JavaScript">
n = parseInt(prompt("Saisir une année"));
if ((n % 4 != 0) || ((n % 100 == 0) && (n % 400 != 0))) {
[Link]("n'est pas bissextile");
} else {
[Link]("est bissextile");
}
</script>
10)
<body>
<form>Table de multiplication de <input type="text"><br>
<textarea cols="10" rows="11" name= 'Z'
onClick="
n=[Link][0].elements[0].value;
Res='';
for (i=1 ; i<=10 ; i++) {
Res=Res+n + 'x' +i+ '=' + n*i + '\n'
}
[Link][0].elements['Z'].value=Res;
"></textarea>
</form>
</body>
</html>
L’attribut onClick contient du code JavaScript qui se lance
quand on clique sur la zone (la balise li kayn ldakhl dyalha).
• Elements: les balises dans le formulaire.
11)
<body>
<form name="FF">
<input type="text" size="12" name="E1">
<select name="op">
<option value="+">+</option>
<option value="*">x</option>
<option value="-">-</option>
<option value="/">/</option>
</select>
<input type="text" size="12"> =
<input type="text" size="12" name="E3"
onClick="
a = parseFloat([Link]['FF'].elements['E1'].value);
oper = [Link][0].elements['op'].value;
b = parseFloat([Link][0].elements[2].value);
[Link][0].elements['E3'].value = eval(a + oper + b);
">
</form>
</body>
.value : a 2 roles soit Lire ce que l’utilisateur a écrit ou Lire la valeur choisie (dans
une liste, un bouton, etc.) ou afficher un résultat.
12)
<body>
Calculatrice <br>
<form name='FF'>
<input type="text" size="10" name="EE"><br>
<input type="button" value="1"
onClick="[Link]['FF'].elements['EE'].value+=1">
<input type="button" value="2"
onClick="[Link]['FF'].elements['EE'].value+=2">
<input type="button" value="3"
onClick="[Link]['FF'].elements['EE'].value+=3">
<input type="button" value="+"
onClick="[Link]['FF'].elements['EE'].value+='+'"><br>
<input type="button" value="4"
onClick="[Link]['FF'].elements['EE'].value+=4">
<input type="button" value="5"
onClick="[Link]['FF'].elements['EE'].value+=5">
<input type="button" value="6"
onClick="[Link]['FF'].elements['EE'].value+=6">
<input type="button" value="-"
onClick="[Link]['FF'].elements['EE'].value+='-'"><br>
<input type="button" value="7"
onClick="[Link]['FF'].elements['EE'].value+=7">
<input type="button" value="8"
onClick="[Link]['FF'].elements['EE'].value+=8">
<input type="button" value="9"
onClick="[Link]['FF'].elements['EE'].value+=9">
<input type="button" value="x"
onClick="[Link]['FF'].elements['EE'].value+='*'"><br>
<input type="button" value="0"
onClick="[Link]['FF'].elements['EE'].value+=0">
<input type="button" value=","
onClick="[Link]['FF'].elements['EE'].value+='.'">
<input type="button" value="/"
onClick="[Link]['FF'].elements['EE'].value+='/'">
<input type="button" value="="
onClick="
[Link]['FF'].elements['EE'].value=
eval([Link]['FF'].elements['EE'].value)"><br>
<input type="button" value="C"
onClick="[Link]['FF'].elements['EE'].value=''">
<input type="button" value="sin"
onClick="
[Link]['FF'].elements['EE'].value=
[Link](eval([Link]['FF'].elements['EE'].value))">
</form>
</body>
+= 1" veut dire ajouter le chiffre 1 à la fin de ce qu’il y a dans la case.
13)
<body>
<table border="2">
<tr>
<td onMouseOver="[Link]('xyz').textContent='HTML (HyperText
Markup Language) est un langage informatique,pour créer des sites Web.'
">HTML</td>
<td onMouseOver="[Link]('xyz').textContent='CSS (Cascading
Style Sheet ou Feuilles de style en cascade) est une norme et une
recommandation de W3C.'
">CSS</td>
<td onMouseOver="[Link]('xyz').textContent='JS est un langage
de programmation essentiel pour rendre les pages web interactives.'
">JS</td>
<td onMouseOver="[Link]('xyz').textContent='PHP est un
langage de programmation utilisé pour créer des sites web dynamiques'
">PHP</td>
</tr>
</table>
<p id="xyz"> survoler un langage pour qu'ici s'affiche sa définition
</p>
</body>
TextContent: C’est une propriété de l’élément HTML.
Elle représente le texte à l’intérieur de cet élément .
textContent : permet de lire ou modifier le texte à l’intérieur
TD2 :
Ex1:
<body>
<script language ”JavaScript”>
a = prompt("Saisir un nombre a :");
b = prompt("Saisir un nombre b :");
c = prompt("Saisir un nombre c :");
if (a == 0){
if (b != 0){
[Link]("S est : ", -c/b);
}
else if (c == 0){
[Link]("S=IR ");
}else{
[Link]("S est vide ");
}
}
else{
Delta = b**2 - 4*a*c;
if (Delta > 0){
[Link](
"Deux solutions : ",
"x1 = ", (-b - [Link](Delta))/(2*a),
" et ",
"x2 = ", (-b + [Link](Delta))/(2*a) );
}
else if (Delta == 0){
[Link]("Sol double : ", -b/(2*a));
}
else{
[Link]("S est vide ");
}
}
</script>
</body>
Et de 1er deré:
<body>
Texte
<hr>
<script language="JavaScript">
a = prompt("Saisir un nombre a :");
b = prompt("Saisir un nombre b :");
if (a != 0){[Link]("La solution est ; ", -b/a)}
else if (b == 0){
[Link]("S=IR ");
}
else{
[Link]("S est vide ");
}
</script>
</body>
Ex 2:
<body>
<form name="FF">
Votre choix : <br>
Orange <input type="checkbox">
Banane <input type="checkbox">
Pomme <input type="checkbox"> <br>
<input type="button" value="Afficher mes choix"
onClick="
Res = '';
if([Link][0].elements[0].checked == true) {
Res = Res + ' Orange ';
}
if([Link][0].elements[1].checked == true) {
Res = Res + ' Banane ';
}
if([Link][0].elements[2].checked == true) {
Res = Res + ' Pomme ';
}
[Link]('xyz').textContent = Res;
"><br>
Vous avez choisi :
<p id="xyz">Ici s'afficheront vos choix</p>
</form>
</body>
Ex3:
<body>
<script language="javascript">
couleur=prompt('Saisir une couleur');
[Link]=couleur;
</script>
</body>
Body : Représente la balise HTML :<body>...</body>.
Ex 6:
<body>
<form>
<input type="text" >
<input type="text" >
<input type="button" value="purmettez"
onClick="
c=[Link][0].elements[1].textContent;
[Link][0].elements[1].value=[Link][0].elements[0].textContent;
[Link][0].elements[0].value=c;
">
</form>
</body>
Ex 7:
<html>
<body>
<form>
<select
onChange="
[Link]('abc').[Link]=[Link][0].elements[0].value
">
<option value="red">rouge</option>
<option value="green">vert</option>
<option value="black">noir</option>
</select>
</form>
<div id="abc">Texte texte </div>
</body>
</body>
</html>
Ex8:
<html>
<head> <title> Ma page </title></head>
<body>
<img src="[Link]" width="400" height="200"
id="xyz"
onMouseOver="
[Link]('xyz').width=800;
[Link]('xyz').height=400;
"
onMouseOut="
[Link]('xyz').width=400;
[Link]('xyz').height=200;
"
>
</body>
</html>
Ex9:
Ex10:
<html>
<head> <title> Ma page </title> </head>
<body>
<form>
<select onChange="
[Link]=[Link][0].elements[0].value
">
<option value="red">rouge</option>
<option value="green">vert</option>
<option value="blue">bleu</option>
</select>
</form>
Texte texte
</body>
</html>
Ex11:
<html>
<head> <title> Ma page </title>
<style>
div{width:6cm;
height:3cm;
background-color:yellow;}
</style>
</head>
<body>
<form>
<input type="text" size="12"
onBlur="
[Link]('xyz').[Link]=[Link][0].element
s[0].value
">
</form><br>
<div id="xyz"> Texte </div>
</body>
</html>
Ex12:
<script>
var maDate = new Date();
[Link]("aujourd'hui c'est: " + [Link]() + "/" +
([Link]() + 1) + "/" + [Link]());
[Link]("<br>l'heure est : " + [Link]() + ":" +
[Link]());
</script>
Ex13:
<html>
<head>
<title> Ma page </title>
<style>
/* Style pour l'affichage de l'heure */
span {
color: red;
font-size: 24pt;
}
</style>
</head>
<body>
<script language="javascript">
function afficheH() {
// Création d'un objet Date pour obtenir l'heure actuelle
DD = new Date();
H = [Link]();
M = [Link]();
S = [Link]();
// Mise à jour du contenu textuel de l'élément avec l'id 'xyz'
[Link]('xyz').textContent = H + ' h ' + M + ' mn ' +
S;
}
// Appelle la fonction afficheH toutes les 1000 millisecondes (1 seconde)
setInterval(afficheH, 1000);
</script>
Il est : <span id="xyz"> </span>
</body>
</html>
Ex16:
<script language="javascript">
DD = new Date();
j = [Link]();
switch(j) {
case 0: jour = "Dimanche"; break;
case 1: jour = "Lundi"; break;
case 2: jour = "Mar"; break;
case 3: jour = "Mer"; break;
case 4: jour = "Jeudi"; break;
case 5: jour = "Ven"; break;
case 6: jour = "Sam"; break;
}
[Link]("Aujourd'hui c'est : " + jour);
</script>
18)
<html>
<head>
<title> Ma page </title>
<style>
div { background-color: red; }
</style>
</head>
<body>
<div id="abc">C'est le contenu de div</div>
<script language="javascript">
function remplacer() {
[Link]('abc').[Link] = 'yellow';
}
setTimeout(remplacer, 2000);
</script>
</body>
19)
<body>
<div id="aaa">
<img src="[Link]">
</div>
<script language="javascript">
function remplacer(){
[Link]('aaa').textContent = "Il y avait ici une
image"
}
setTimeout(remplacer, 2000)
</script>
</body>
Ex22:
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chronomètre</title>
</head>
<body>
<p id="abc">0 : 0</p>
<form name="f">
<input type="text" name="T" value="0" size="10">
</form>
<script language="javascript">
var c = 0;
var TT;
function chrono() {
c = c + 1;
// Calcul des minutes et des secondes
var min = [Link](c / 60);
var sec = c % 60;
// Mise à jour de l'affichage dans le paragraphe <p>
[Link]("abc").innerHTML = min + " : " + sec;
// Mise à jour de la valeur dans le champ texte du formulaire
[Link] = c;
}
</script>
<form>
<input type="button" value="Démarrer" onclick="TT =
setInterval(chrono, 1000);">
<input type="button" value="Pause" onclick="clearInterval(TT);">
<input type="button" value="Reprendre" onclick="TT =
setInterval(chrono, 1000);">
</form>
</body>
</html>
TD3:
Ex1:
<body>
<h3>Ex 1 TD 3</h3>
<form>
<input type="button" value="0"
onClick="
n=Number([Link][0].elements[0].value);
n+=1;
[Link][0].elements[0].value=n
">
</form>
</body>
Ex3:
IsNaN = Is Not a Number
<body>
<h3>Ex 1 TD 3</h3>
<form>
<input type="button" value="0"
onClick="
n=Number([Link][0].elements[0].value);
n+=1;
[Link][0].elements[0].value=n;
">
</form>
</body>
Ex10:
<
<h1>Le chiffrement de César.</h1>
<p>Message à traiter :</p>
<textarea id="message1" cols="30" rows="10"></textarea>
<br>
clef : <input id="clef" type="text" size="2">
<button type="button" onClick="chiffrer()"> Chiffrer </button>
<button type="button" onClick="dechiffrer()"> Déchiffrer </button>
<p>Message traité :</p>
<textarea id="message2" cols="30" rows="10"></textarea>
<script language="Javascript">
texte = [Link]('message1').value;
k = parseInt([Link]('clef').value);
function chiffrer(){
Res = '';
for(i=0; i<[Link]; i++)
{Res = Res + [Link]( ( ([Link](i)-65+k)%26 )+65)}
[Link]('message2').value = Res
}
function dechiffrer(){
Res = '';
for(i=0; i<[Link]; i++)
{Res = Res + [Link]( ( ([Link](i)-65-k+26)%26 )+65)
[Link]('message2').value = Res
}
}
</script>
Ex14:
<body>
<form>
Saisir un entier positif :
<input type="text" size="3"
onBlur="
n=[Link][0].elements[0].value;
if(isNaN(n)==true || (n<=0)){alert('Saisir un nombre positif !')}
else {n=parseInt([Link][0].elements[0].value);
L=new Array();
for(i=0;i<n;i++){
L[i]=new Array();
L[i][0]=1;
L[i][i]=1;
for(j=1;j<i;j++){
L[i][j]=L[i-1][j]+L[i-1][j-1];
}
}
S='';
for(i=0;i<n;i++){
Ligne='';
for(j=0;j<=i;j++){
Ligne=Ligne+'<td>'+L[i][j]+'</td>';
}
S=S+'<tr>'+Ligne+'</tr>';
}
[Link]('<table border=2>'+S+'</table>');
}
">
</form>
</body>
Creaction d’un tableau vide: L = new Array() = L = [ ];
L[i][0] = 1; fixe le premier élément de la ligne à 1 (propriété du
triangle de Pascal).
Ex15:
<body>
<form>
<input type="button" value="Générer"
onClick="
T=new Array();
T[0]=[Link]([Link]()*48)+1;
for(i=1;i<=5;i++){
x=[Link]([Link]()*48)+1;
while([Link](x)!=-1){
x=[Link]([Link]()*48)+1;
}
T[i]=x
}
[Link]('abc').textContent=T
">
</form>
<p id='abc'></p>
• [Link]() donne un nombre décimal entre 0 et presque 1 (ex:
0.234).
• Multiplié par 48, ça donne un nombre entre 0 et 48.
• [Link]() arrondit ce nombre au nombre entier le plus proche
(donc entre 0 et 48).
• On ajoute 1 pour avoir un nombre entre 1 et 49.