SlideShare une entreprise Scribd logo
1  sur  8
1/8
JULIOSTEPHANEKOUAMIDJOMO
TECHNOLOGIES ET LANGAGES INTERNET
PROJET JAVASCRIPT
Julio Stéphane KOUAMI DJOMO : 6 95521446 / 6 50553887
__________________________________________________________________________________
Projet_1 : Addition de deux nombres
Ecrire un script permettant d’afficher à l’écran la somme de deux nombres saisis au clavier
Solution
html>
<head>
<title>< Addition</title>
</head>
<body>
<script language = "JavaScript">
var nombre1, nombre2, result;
nombre1 = prompt("Entrer le premer nombre");
nombre2 = prompt("Entrer le deuxieme nombre");
result = parseInt(nombre1) + parseInt(nombre2);
alert(result);
</script>
</body>
</html>
Projet_2 : concaténation de deux nombres(Fusion).
Ecrire un script permettant la fusion de deux nombres et qui affiche le résultat à l’écran.
Solution
<html>
<head>
<title>< Fusion de deux npmbres</title>
</head>
<body>
<script language = "JavaScript">
var nombre1, nombre2, result;
nombre1 = prompt("Entrer le premer nombre");
nombre2 = prompt("Entrer le deuxième nombre");
result = nombre1 + nombre2;
alert(result);
</script>
</body>
</html>
Projet_3 : la fonction Confirm()
Ecrire un script permettant de répondre au question suivante « Voulez-vous passer votre examen ? »
si la reponse est oui, le message suivant devra apparaitre à l’écran « Vous devez étudier vos
leçon ».
Solution :
2/8
JULIOSTEPHANEKOUAMIDJOMO
<html>
<head>
<title> Fonction confirm()</title>
</head>
<body>
<script language ="javascript">
if(confirm("Voulez-vous passer votre baccalaureat"))
{
alert(" Etudier vos leçons");
}
else{
alert("Continuez à troubler partissant du moindre effort");
}
</script>
</body>
</html>
Projet_4 : Conversion d’une chaine de caractère en un nombre. Et conversion d’une chaine en
minuscule en majuscule
Ecrire un script qui permet de connaitre le nombre de mots d’une chaine de caractere , et de convertir
en majuscule ce chaine de caractère
Solution (méthode : length et toUpperCase() )
<html>
<head>
<title> majuscule miniscule </title>
</head>
<body>
<h2><center> Conversion en majuscule et nombre de caracteres d'une chaine</center></h2>
<script language = "javascript">
var myString = 'Ceci est une chaine de caractere';
alert(myString.length);
alert(myString.toUpperCase());
</script>
</body>
</html>
Projet_5 : Fonctions simple
Ecrire une fonction en javascript nommée showMsg aui affiche à l’écran le message « Que vous êtes
intéressant Julio Stéphane ! »
Solution (Méthode : alert() )
html>
<head>
<title> fonction message</title>
</head>
<body>
<script language = "javascript">
function showMsg() {
alert("« Que vous êtes intéressant Julio Stéphane ! »");
}
showMsg();
3/8
JULIOSTEPHANEKOUAMIDJOMO
</script>
</body>
</html>
Projet_6 : Les variables
Ecrire un script qui demande le nom de l’utilisateur et affiche à l’ecran le message « Bonjour Nom »
Solution
html>
<head>
<title> Presenter vous</title>
</head>
<body>
<script language = "JavaScript">
var start = "Bonjour",name, end = "!", result;
name = prompt("Quel est votre nom?");
result = start + name + end;
alert(result);
</script>
</body>
</html>
Projet_7 : Multiplication de deux nombres
Ecrire une fonction JavaScript qui demande à l’utilisateur de saisir deux nombres et affiche le résultat
de la multiplication de ces nombres à l’écran.
Solution
<html>
<head>
<title> Multiplication par 2 </title>
</head>
<body>
<h1><center> Multiplication de deux nombre </center></h1>
<script language = "javascript">
function byTwo() {
var result = parseInt(prompt(" Donner un nombre à multiplier par 2"));
alert(result * 2);
}
byTwo();
alert("Vous pouvez faire plus mieux");
byTwo();
</script>
</body>
</html>
Projet_8 : utilisation de paramètre avec la fonction alert()
Ecrire un script qui déclare une variable est l’’assigne avec la méthode prompt() qui prend en
argument une chaine de caractère « Entrez votre nom » et affiche à l’écran la valeur saisie
Solution.
<html>
<head>
4/8
JULIOSTEPHANEKOUAMIDJOMO
<title> Nom entre </title>
</head>
<body>
<script language = "JavaScript">
var username = prompt('Entrer votre nom');
alert(username);
</script>
</body>
</html>
Projet_9 : Passage des arguments à une fonction
Ecrire un script qui permet de passer un argument à un fonction
Solution :
<html>
<head>
<title> les arguments </title>
</head>
<body>
<h1><center> passer un augment à une fonction</center></h1>
<script language = "javascript">
function myFunction(arg) {
alert('votre argument est:' +arg);
}
myFunction(prompt('Que voulez-vous passer en argument à votre fonction ?'));
</script>
</body>
</html>
Projet_10 :
Ecrire une fonction nommée hello qui affiche à l’écran hello world assigné à un variable.
solution
<html>
<head>
<title> Multiplication par 2 </title>
</head>
<body>
<script language = "javascript">
function hello() {
var chai ="Hello World";
alert(chai);
}
hello();
</script>
</body>
</html>
Projet_11 : utilisation de condition alternative
Exécuté le code suivant, il permet de faire un choix selon les conditions définies
<html>
5/8
JULIOSTEPHANEKOUAMIDJOMO
<head>
<title> Structure sinon</title>
</head>
<body>
<h1><center> Structure conditionnelle si...non </center></h1>
<script language = "JavaScript">
var tiroire = parseInt(prompt("Choisissez le tiroire à ouvrir (1 à 4)"));
if (tiroire == 1) {
alert(" Ce tiroire contient diverses outils: des papiers, de crayons etc..");
}
else if (tiroire == 2) {
alert(" ce tiroire contient du materiels informatique: cables, des composants");
}
else if (tiroire == 3) {
alert(" Ce tiroire est à clé fermée dommage!");
}
else if (tiroire == 4) {
alert(" Ce tiroire contient des vêtement");
}
else {
alert(" Information du jour: le meuble ne contient que quatre tiroirs, et jusqu'a preuve du contraire, le tiroir négatif n'existe pas");
}
</script>
</body>
</html>
Projet_12 : récupération d’une valeur dans un tableau
<html>
<head>
<title> Declaraton de tableau </title>
</head>
<body>
<h3><center> Création de tableau et récupération d'une valeur</center></h3>
<script language = "javascript">
var myArray = ['Kouami','Djomo','Julio','Stéphane'];
alert(myArray[2]);
</script>
</body>
</html>
Projet_13 : declaration, creation et ajout des valeurs dans un tableau
html>
<head>
<title> Declaraton de tableau </title>
</head>
<body>
<h3><center> utilisation de la methode (push())</center></h3>
<script language = "javascript">
var myArray = ['Kouami','Djomo','Julio','Stéphane'];
myArray.push('Suzanne','Flavie','kouague'); // ajoute dans le tableau
myArray.push('Madeleine'); //ajoute madeleine dans le tableau
alert(myArray);
</script>
6/8
JULIOSTEPHANEKOUAMIDJOMO
</body>
</html>
Projet_14 : suppression une valeur au début et à la fin du tableau
<html>
<head>
<title> Declaraton de tableau </title>
</head>
<body>
<h3><center> Utilisation des methodes shift(),pop())</center></h3>
<script language = "javascript">
var myArray = ['kouami','Djomo','Julio','Stephane'];
myArray.push('Suzanne','Flavie','kouague');
myArray.push('Madeleine');
myArray.shift(); // retire kouami au début du tableau
myArray.pop(); // retire Madeleine a la fin du tableau
alert(myArray);
</script>
</body>
</html>
Projet_15 : découpage d’un tableau en fonction d’un séparateur.
<html>
<head>
<title> Decoupage du tableau </title>
</head>
<body>
<h3><center>decoupage d'un tableau utilisationde la en fonction (split())</center></h3>
<script language = "javascript">
var CousinsString = 'kouami Djomo Julio Stephane' , cousinsArray =
CousinsString.split(' ');
alert(CousinsString);
alert(cousinsArray);
</script>
</body>
</html>
Projet_16 : variables globale et locale
<html>
<head>
<title> Variable globale et locale </title>
</head>
<body>
<script language = "javascript">
var message = "Ici la variable globale";
function affiche() {
var message ="Ici variable locale";
alert(message);
}
affiche();
alert(message);
</script>
7/8
JULIOSTEPHANEKOUAMIDJOMOJULIOSTEPHANE
</body>
</html>
Projet_17 : gestionnaire d’évènement en javascript
1- Créer le document à partir du code source fourni ci-dessous.
<HTML>
<HEAD>
<TITLE>Exercice 4JavaScript</TITLE>
</HEAD>
<BODYonLoad = alert("Bienvenue sur ma page !")>
<P>Je suis un document HTML.</P>
</BODY>
</HTML>
2- Quel est le nom de l’évènement géré ici par le code javascript ? Tester dans un navigateur.
3 - Que se passe-t-il lors du chargement de la page dans un navigateur ?
4- Modifier l’exemple précédent pour qu’une boîte de dialogue modale affiche « À bientôt ! »
lorsqu’on quitte la page. Quel est alors le nom de l’évènement à gérer ? Tester dans un
navigateur le changement produit.
Projet_18 : les bases
Insertion de code javascript
Il est possible d’insérer du code javascript de plusieurs manières dans une page HTML :
– interne au document en utilisant l’élément SCRIPT
– externe au document : le code javascript se trouve dans un fichier séparé portant le
plus souvent l’extension .js. On utilise l’attribut SRC de l’élément SCRIPT pour préciser
le chemin du fichier du script.
– directement dans des éléments HTML en précisant le mot clé javascript :
<A HREF="javascript:message()">une fonction js</A>
- code javascript interne au document
1- Créer le document à partir du code source fourni ci-dessous. Quelle est l’extension à donner
à ce document ?
<HTML>
<HEAD>
<TITLE>Exercice1JavaScript</TITLE>
<SCRIPT TYPE="text/javascript">
document.write("<P>Du texte écrit en javascript.</P>");
alert("Hello world ! en javascript");
</SCRIPT>
</HEAD>
<BODY>
<P>Dutexte écrit en HTML.</P>
</BODY>
</HTML>
2- Tester dans un navigateur. Pourquoi le texte écrit en HTML ne s’affiche-t-il pas
8/8
JULIOSTEPHANEKOUAMIDJOMO
tout de suite ?
3- Comment appelle-t-on le type de boîte de dialogue utilisé dans cet exemple ?
4- Que se passe-t-il si on place le code javascript après le texte écrit en HTML ?
Projet_19 :
On vous donne les informations ci-dessous selon les tranches d’âge : ecrire un script javascript qui
fourni un commentaire selon l’exemple ci-dessous.
Tranche d'âge Exemple de commentaire
1 à 6 ans « Vous êtes un jeune enfant. »
7 à 11 ans « Vous êtes un enfant qui a atteint l'âge de raison. »
12 à 17 ans « Vous êtes un adolescent. »
18 à 120 ans « Vous êtes un adulte. »
Solution
<Script>
var age = parseInt(prompt('Quel est votre âge ?'));
if (1 <= age && age <= 6) {
alert('Vous êtes un jeune enfant.');
} else if (7 <= age && age <= 11) {
alert ('Vous êtes un enfant qui a atteint l'âge de raison.');
} else if (12 <= age && age <= 17) {
alert ('Vous êtes un adolescent.');
} else if (18 <= age && age <= 120) {
alert ('Vous êtes un adulte.');
} else {
alert ('Erreur !!');
}
</Script>

Contenu connexe

Tendances

Tendances (12)

Ns python web 1
Ns python web 1Ns python web 1
Ns python web 1
 
Jquery
JqueryJquery
Jquery
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Presentation de gwt maven
Presentation de  gwt mavenPresentation de  gwt maven
Presentation de gwt maven
 
Html5 2
Html5 2Html5 2
Html5 2
 
Présentation jQuery pour débutant
Présentation jQuery pour débutantPrésentation jQuery pour débutant
Présentation jQuery pour débutant
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 

Similaire à Pratique de javascript KOUAMI DJOMO

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
VincentBweka
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 

Similaire à Pratique de javascript KOUAMI DJOMO (20)

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
 
Cours Code Part 2
Cours Code Part 2Cours Code Part 2
Cours Code Part 2
 
Tapestry
TapestryTapestry
Tapestry
 
script site e-commerce -php
script site e-commerce -php script site e-commerce -php
script site e-commerce -php
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Comment traduire ses bases de données sans douleur
Comment traduire ses bases de données sans douleurComment traduire ses bases de données sans douleur
Comment traduire ses bases de données sans douleur
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Firefox OS de la théorie à la pratique - OSDC
Firefox OS de la théorie à la pratique - OSDCFirefox OS de la théorie à la pratique - OSDC
Firefox OS de la théorie à la pratique - OSDC
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
 
HTML5
HTML5HTML5
HTML5
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
 

Dernier

Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
AmgdoulHatim
 
Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdf
ssuserc72852
 
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
Faga1939
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
ikospam0
 

Dernier (18)

La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film français
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
 
Les roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxLes roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptx
 
Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdf
 
Chapitre 2 du cours de JavaScript. Bon Cours
Chapitre 2 du cours de JavaScript. Bon CoursChapitre 2 du cours de JavaScript. Bon Cours
Chapitre 2 du cours de JavaScript. Bon Cours
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
 
L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptx
 
Formation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxFormation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptx
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
 
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfCOURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
 
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.
 
Computer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptxComputer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptx
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film français
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdf
 
Apolonia, Apolonia.pptx Film documentaire
Apolonia, Apolonia.pptx         Film documentaireApolonia, Apolonia.pptx         Film documentaire
Apolonia, Apolonia.pptx Film documentaire
 
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
L'ÉVOLUTION DE L'ÉDUCATION AU BRÉSIL À TRAVERS L'HISTOIRE ET LES EXIGENCES DE...
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
 

Pratique de javascript KOUAMI DJOMO

  • 1. 1/8 JULIOSTEPHANEKOUAMIDJOMO TECHNOLOGIES ET LANGAGES INTERNET PROJET JAVASCRIPT Julio Stéphane KOUAMI DJOMO : 6 95521446 / 6 50553887 __________________________________________________________________________________ Projet_1 : Addition de deux nombres Ecrire un script permettant d’afficher à l’écran la somme de deux nombres saisis au clavier Solution html> <head> <title>< Addition</title> </head> <body> <script language = "JavaScript"> var nombre1, nombre2, result; nombre1 = prompt("Entrer le premer nombre"); nombre2 = prompt("Entrer le deuxieme nombre"); result = parseInt(nombre1) + parseInt(nombre2); alert(result); </script> </body> </html> Projet_2 : concaténation de deux nombres(Fusion). Ecrire un script permettant la fusion de deux nombres et qui affiche le résultat à l’écran. Solution <html> <head> <title>< Fusion de deux npmbres</title> </head> <body> <script language = "JavaScript"> var nombre1, nombre2, result; nombre1 = prompt("Entrer le premer nombre"); nombre2 = prompt("Entrer le deuxième nombre"); result = nombre1 + nombre2; alert(result); </script> </body> </html> Projet_3 : la fonction Confirm() Ecrire un script permettant de répondre au question suivante « Voulez-vous passer votre examen ? » si la reponse est oui, le message suivant devra apparaitre à l’écran « Vous devez étudier vos leçon ». Solution :
  • 2. 2/8 JULIOSTEPHANEKOUAMIDJOMO <html> <head> <title> Fonction confirm()</title> </head> <body> <script language ="javascript"> if(confirm("Voulez-vous passer votre baccalaureat")) { alert(" Etudier vos leçons"); } else{ alert("Continuez à troubler partissant du moindre effort"); } </script> </body> </html> Projet_4 : Conversion d’une chaine de caractère en un nombre. Et conversion d’une chaine en minuscule en majuscule Ecrire un script qui permet de connaitre le nombre de mots d’une chaine de caractere , et de convertir en majuscule ce chaine de caractère Solution (méthode : length et toUpperCase() ) <html> <head> <title> majuscule miniscule </title> </head> <body> <h2><center> Conversion en majuscule et nombre de caracteres d'une chaine</center></h2> <script language = "javascript"> var myString = 'Ceci est une chaine de caractere'; alert(myString.length); alert(myString.toUpperCase()); </script> </body> </html> Projet_5 : Fonctions simple Ecrire une fonction en javascript nommée showMsg aui affiche à l’écran le message « Que vous êtes intéressant Julio Stéphane ! » Solution (Méthode : alert() ) html> <head> <title> fonction message</title> </head> <body> <script language = "javascript"> function showMsg() { alert("« Que vous êtes intéressant Julio Stéphane ! »"); } showMsg();
  • 3. 3/8 JULIOSTEPHANEKOUAMIDJOMO </script> </body> </html> Projet_6 : Les variables Ecrire un script qui demande le nom de l’utilisateur et affiche à l’ecran le message « Bonjour Nom » Solution html> <head> <title> Presenter vous</title> </head> <body> <script language = "JavaScript"> var start = "Bonjour",name, end = "!", result; name = prompt("Quel est votre nom?"); result = start + name + end; alert(result); </script> </body> </html> Projet_7 : Multiplication de deux nombres Ecrire une fonction JavaScript qui demande à l’utilisateur de saisir deux nombres et affiche le résultat de la multiplication de ces nombres à l’écran. Solution <html> <head> <title> Multiplication par 2 </title> </head> <body> <h1><center> Multiplication de deux nombre </center></h1> <script language = "javascript"> function byTwo() { var result = parseInt(prompt(" Donner un nombre à multiplier par 2")); alert(result * 2); } byTwo(); alert("Vous pouvez faire plus mieux"); byTwo(); </script> </body> </html> Projet_8 : utilisation de paramètre avec la fonction alert() Ecrire un script qui déclare une variable est l’’assigne avec la méthode prompt() qui prend en argument une chaine de caractère « Entrez votre nom » et affiche à l’écran la valeur saisie Solution. <html> <head>
  • 4. 4/8 JULIOSTEPHANEKOUAMIDJOMO <title> Nom entre </title> </head> <body> <script language = "JavaScript"> var username = prompt('Entrer votre nom'); alert(username); </script> </body> </html> Projet_9 : Passage des arguments à une fonction Ecrire un script qui permet de passer un argument à un fonction Solution : <html> <head> <title> les arguments </title> </head> <body> <h1><center> passer un augment à une fonction</center></h1> <script language = "javascript"> function myFunction(arg) { alert('votre argument est:' +arg); } myFunction(prompt('Que voulez-vous passer en argument à votre fonction ?')); </script> </body> </html> Projet_10 : Ecrire une fonction nommée hello qui affiche à l’écran hello world assigné à un variable. solution <html> <head> <title> Multiplication par 2 </title> </head> <body> <script language = "javascript"> function hello() { var chai ="Hello World"; alert(chai); } hello(); </script> </body> </html> Projet_11 : utilisation de condition alternative Exécuté le code suivant, il permet de faire un choix selon les conditions définies <html>
  • 5. 5/8 JULIOSTEPHANEKOUAMIDJOMO <head> <title> Structure sinon</title> </head> <body> <h1><center> Structure conditionnelle si...non </center></h1> <script language = "JavaScript"> var tiroire = parseInt(prompt("Choisissez le tiroire à ouvrir (1 à 4)")); if (tiroire == 1) { alert(" Ce tiroire contient diverses outils: des papiers, de crayons etc.."); } else if (tiroire == 2) { alert(" ce tiroire contient du materiels informatique: cables, des composants"); } else if (tiroire == 3) { alert(" Ce tiroire est à clé fermée dommage!"); } else if (tiroire == 4) { alert(" Ce tiroire contient des vêtement"); } else { alert(" Information du jour: le meuble ne contient que quatre tiroirs, et jusqu'a preuve du contraire, le tiroir négatif n'existe pas"); } </script> </body> </html> Projet_12 : récupération d’une valeur dans un tableau <html> <head> <title> Declaraton de tableau </title> </head> <body> <h3><center> Création de tableau et récupération d'une valeur</center></h3> <script language = "javascript"> var myArray = ['Kouami','Djomo','Julio','Stéphane']; alert(myArray[2]); </script> </body> </html> Projet_13 : declaration, creation et ajout des valeurs dans un tableau html> <head> <title> Declaraton de tableau </title> </head> <body> <h3><center> utilisation de la methode (push())</center></h3> <script language = "javascript"> var myArray = ['Kouami','Djomo','Julio','Stéphane']; myArray.push('Suzanne','Flavie','kouague'); // ajoute dans le tableau myArray.push('Madeleine'); //ajoute madeleine dans le tableau alert(myArray); </script>
  • 6. 6/8 JULIOSTEPHANEKOUAMIDJOMO </body> </html> Projet_14 : suppression une valeur au début et à la fin du tableau <html> <head> <title> Declaraton de tableau </title> </head> <body> <h3><center> Utilisation des methodes shift(),pop())</center></h3> <script language = "javascript"> var myArray = ['kouami','Djomo','Julio','Stephane']; myArray.push('Suzanne','Flavie','kouague'); myArray.push('Madeleine'); myArray.shift(); // retire kouami au début du tableau myArray.pop(); // retire Madeleine a la fin du tableau alert(myArray); </script> </body> </html> Projet_15 : découpage d’un tableau en fonction d’un séparateur. <html> <head> <title> Decoupage du tableau </title> </head> <body> <h3><center>decoupage d'un tableau utilisationde la en fonction (split())</center></h3> <script language = "javascript"> var CousinsString = 'kouami Djomo Julio Stephane' , cousinsArray = CousinsString.split(' '); alert(CousinsString); alert(cousinsArray); </script> </body> </html> Projet_16 : variables globale et locale <html> <head> <title> Variable globale et locale </title> </head> <body> <script language = "javascript"> var message = "Ici la variable globale"; function affiche() { var message ="Ici variable locale"; alert(message); } affiche(); alert(message); </script>
  • 7. 7/8 JULIOSTEPHANEKOUAMIDJOMOJULIOSTEPHANE </body> </html> Projet_17 : gestionnaire d’évènement en javascript 1- Créer le document à partir du code source fourni ci-dessous. <HTML> <HEAD> <TITLE>Exercice 4JavaScript</TITLE> </HEAD> <BODYonLoad = alert("Bienvenue sur ma page !")> <P>Je suis un document HTML.</P> </BODY> </HTML> 2- Quel est le nom de l’évènement géré ici par le code javascript ? Tester dans un navigateur. 3 - Que se passe-t-il lors du chargement de la page dans un navigateur ? 4- Modifier l’exemple précédent pour qu’une boîte de dialogue modale affiche « À bientôt ! » lorsqu’on quitte la page. Quel est alors le nom de l’évènement à gérer ? Tester dans un navigateur le changement produit. Projet_18 : les bases Insertion de code javascript Il est possible d’insérer du code javascript de plusieurs manières dans une page HTML : – interne au document en utilisant l’élément SCRIPT – externe au document : le code javascript se trouve dans un fichier séparé portant le plus souvent l’extension .js. On utilise l’attribut SRC de l’élément SCRIPT pour préciser le chemin du fichier du script. – directement dans des éléments HTML en précisant le mot clé javascript : <A HREF="javascript:message()">une fonction js</A> - code javascript interne au document 1- Créer le document à partir du code source fourni ci-dessous. Quelle est l’extension à donner à ce document ? <HTML> <HEAD> <TITLE>Exercice1JavaScript</TITLE> <SCRIPT TYPE="text/javascript"> document.write("<P>Du texte écrit en javascript.</P>"); alert("Hello world ! en javascript"); </SCRIPT> </HEAD> <BODY> <P>Dutexte écrit en HTML.</P> </BODY> </HTML> 2- Tester dans un navigateur. Pourquoi le texte écrit en HTML ne s’affiche-t-il pas
  • 8. 8/8 JULIOSTEPHANEKOUAMIDJOMO tout de suite ? 3- Comment appelle-t-on le type de boîte de dialogue utilisé dans cet exemple ? 4- Que se passe-t-il si on place le code javascript après le texte écrit en HTML ? Projet_19 : On vous donne les informations ci-dessous selon les tranches d’âge : ecrire un script javascript qui fourni un commentaire selon l’exemple ci-dessous. Tranche d'âge Exemple de commentaire 1 à 6 ans « Vous êtes un jeune enfant. » 7 à 11 ans « Vous êtes un enfant qui a atteint l'âge de raison. » 12 à 17 ans « Vous êtes un adolescent. » 18 à 120 ans « Vous êtes un adulte. » Solution <Script> var age = parseInt(prompt('Quel est votre âge ?')); if (1 <= age && age <= 6) { alert('Vous êtes un jeune enfant.'); } else if (7 <= age && age <= 11) { alert ('Vous êtes un enfant qui a atteint l'âge de raison.'); } else if (12 <= age && age <= 17) { alert ('Vous êtes un adolescent.'); } else if (18 <= age && age <= 120) { alert ('Vous êtes un adulte.'); } else { alert ('Erreur !!'); } </Script>