Javascript

Travail présenté par : MAHDHAOUI Ismail

JavaScript

Un langage de programmation:

JavaScript est un langage qui permet aux développeurs d'écrire du code source qui sera analysé par l'ordinateur.

Programmer des scripts:

Langage compilé.

Langage pré-compilé.

Langage interprété (exp: javascript).

Qu'est-ce que le JavaScript ?(1/2)

Qu'est-ce que le JavaScript ?(2/2)

<html><head> <title>Cc bjr</title></head><body>

<script>

alert('Cc bjr! ');

</script>

</body>

</html>

Premiers pas en JavaScript (1/4)

<html><head> <title>Cc bjr</title></head><body>bonjour <script>alert('Cc bjr! ');</script> bonjour </body> </html>


Index.html<html><head> <title>Cc bjr</title><script src="Scripts.js" type="text/javascript"></script> </head><body>bonjour </body> </html>

Scripts.jsalert('Cc bjr! ');


Index.html<html><head> <title>Cc bjr</title><script src="Scripts.js" type="text/javascript"></script> </head><body><input type="button" onclick="commencer()" value=“Go" /></body> </html>

Scripts.jsfunction commencer(){

alert("BJR!");}


Le Javascript "dans la page "

Le Javascript externe

Où placer le code dans la page?

Les variables (déclaration) var number = 2; Les types de variablestoute déclaration de variable se fait avec le mot-clé var sans distinction du contenu Tester l'existence de variables avec "typeof"var number = 2; alert(typeof number);// Affiche : "number" var text = 'Mon texte'; alert(typeof text); // Affiche : "string" var aBoolean = false; alert(typeof aBoolean); // Affiche : "boolean"

Les variables

Les conditions

Opérateur Signification

== égal à

!= différent de

=== contenu et type égal à

!== contenu ou type différent de

> supérieur à

>= supérieur ou égal à

< inférieur à

<= inférieur ou égal à

OpérateurType de logique

Utilisation

&& ETvaleur1 && valeur2

|| OUvaleur1 || valeur2

! NON !valeur

Exemple:

Var i =3,b;

b=5;

if ((a+b)<8) { alert(" inf"); }else if ((a+b)>8) { alert("sup"); }

else alert(« eg");

La condition "if - else"

Exemple:

var choix= (prompt('Choisissez 1 ou 2 :'));

Var nbr=parseInt(choix);switch (nbr) {case 1: alert('un'); break;case 2: alert('deux');break;

default: alert(‘invalid');break;

}

La condition "switch"

Exemple:

if (confirm('Voulez-vous exécuter le code Javascript de cette page ?'))

{

alert('Le code a bien été exécuté !');

}

la fonction confirm()

La boucle whilevar number = 1;while (number < 10){ number++; alert(number);} La boucle do whilevar number = 1;do

{ number++; alert(number);}while (number < 10)

La boucle forfor ( i=0;i<10;i++){ alert(i);}

Les boucles

Index.html<html><head> <title>Cc bjr</title><script src="Scripts.js" type="text/javascript"></script> </head><body>

<input type="text" id="nbr1" /><br />+<br /><input type="text" id="nbr2" /><br />=<br /><input type="text" id="res" /><br />

<input type="button" onclick=“calculer()" value=“calculer" /></body> </html>

Méthode : getElementById()

Scripts.jsfunction calculer(){var resultat=0;var nbr1=document.getElementById('nbr1').value;var nbr2=document.getElementById('nbr2').value;resultat=parseInt(nbr1)+parseInt(nbr2);document.getElementById('res').value=resultat;}

Exercice d’application (formulaire)

Index.html<form id="f1" action="eng.php" method="post">

Nom<input type="text" id="nom" /><br />

Prenom<input type="text" id="pre" /><br />

Age<input type="text" id="age" /><br />

<input type="button" onclick="valider()" value="valider" />

</form>

Scripts.jsfunction valider(){var n=document.getElementById('nom').value;var p=document.getElementById('pre').value;var a=document.getElementById('age').value;

var age=parseInt(a);if(age<0 || age > 90){alert('age invalid!!');}else{document.getElementById('f1').submit();}}

Éditer les propriétés CSS

Index.html

<div id="mon_div" class="style0">d

</div>

<input type="button" value="style0" onclick="changer_style(0)" /><br />




Scripts.jsfunction changer_style(n){

var mydiv=document.getElementById('mon_div');mydiv.className="style"+n;}

Stye.css.style0{height:100px;width:100px;background-color:red;}.style1{height:200px;width:250px;background-color:#33FF66;

}.style2{

height:350px;width:250px;background-color:#FF00CC;}.style3{

height:450px;width:450px;background-color:#FF0000;}

Pause

setTimeout(myFunction, 2000); //exécuter mon fonction après 2 s.

Exemple

Changer le style d’un div chaque 2s.

Les fonctions temporelles

Innerhtml

Index.html

<div id="mon_div" >ismail

</div>

<input type="button" value="image0" onclick="changer_image(0)" /><br />

<input type="button" value= "image1" onclick="changer_image(1)" /><br />



Scripts.jsfunction changer_image(n){

var mydiv=document.getElementById('mon_div');mydiv.innerHTML="<img src ='"+n+".jpg' width='200'>";}

MERCI

Fin

Documents

Javascript