Javascript

JavaScript

Travail présenté par : MAHDHAOUI Ismail

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

 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 ?(2/2)

Premiers pas en JavaScript (1/4)

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


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


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

 Scripts.js
alert('Cc bjr! ');


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

 Scripts.js
function commencer()
{
alert("BJR!");
}

Où placer le code dans la page?

 Le Javascript "dans la page "

 Le Javascript externe

Les variables

 Les variables (déclaration)
 var number = 2;
 Les types de variables
toute 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 conditions

Opérateur Signification
== égal à Type de
Opérateur Utilisation
!= différent de logique
=== contenu et type égal à valeur1
&& ET &&
!== contenu ou type différent de
valeur2
> supérieur à
valeur1 ||
>= supérieur ou égal à || OU
valeur2
< inférieur à ! NON !valeur
<= inférieur ou égal à

La condition "if - else"

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 "switch"

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 fonction confirm()

 Exemple:
if (confirm('Voulez-vous exécuter le code Javascript de
cette page ?'))
{
alert('Le code a bien été exécuté !');
}

Les boucles

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

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

Méthode : getElementById()

 Index.html Scripts.js
<html> function calculer()
<head>
<title>Cc bjr</title> {
<script src="Scripts.js" type="text/javascript"></script> var resultat=0;
</head> var nbr1=document.getElementById('nbr1').value;
<body> var nbr2=document.getElementById('nbr2').value;
resultat=parseInt(nbr1)+parseInt(nbr2);
<input type="text" id="nbr1" /><br /> document.getElementById('res').value=resultat;
+<br /> }
<input type="text" id="nbr2" /><br />
=<br />
<input type="text" id="res" /><br />

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

Exercice d’application (formulaire)

 Index.html
<form id="f1" action="eng.php" method="post"> Scripts.js
function valider()
{
Nom<input type="text" id="nom" /><br />
var n=document.getElementById('nom').value;
var p=document.getElementById('pre').value;
Prenom<input type="text" id="pre" /><br /> var a=document.getElementById('age').value;

Age<input type="text" id="age" /><br /> var age=parseInt(a);
if(age<0 || age > 90)
{
<input type="button" onclick="valider()" value="valider" alert('age invalid!!');
/> }
</form> else
{
document.getElementById('f1').submit();
}
}

Éditer les propriétés CSS

Stye.css
.style0{
height:100px;
width:100px;
 Index.html Scripts.js background-color:red;
function changer_style(n) }
<div id="mon_div" class="style0">d .style1{
{
</div> height:200px;
<input type="button" value="style0" var mydiv=document.getElementById('mon_div'); width:250px;
onclick="changer_style(0)" /><br /> mydiv.className="style"+n; background-color:#33FF66;

<input type="button" value="style1" }
}
onclick="changer_style(1)" /><br /> .style2{
<input type="button" value="style2"
onclick="changer_style(2)" /><br /> height:350px;
width:250px;
<input type="button" value="style3"
background-color:#FF00CC;
onclick="changer_style(3)" /><br />
}
.style3{

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

Les fonctions temporelles

setTimeout(myFunction, 2000); //exécuter mon
fonction après 2 s.
Exemple
Changer le style d’un div chaque 2s.

Innerhtml

 Index.html
<div id="mon_div" >ismail
</div> Scripts.js
function changer_image(n)
<input type="button" value="image0"
{
onclick="changer_image(0)" /><br />
<input type="button" value= "image1" var mydiv=document.getElementById('mon_div');
onclick="changer_image(1)" /><br /> mydiv.innerHTML="<img src ='"+n+".jpg' width='200'>";
<input type="button" value= "image2" }
<input type="button" value= "image3"

Javascript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (11)

En vedette

En vedette (20)

Similaire à Javascript

Similaire à Javascript (20)

Plus de karousn

Plus de karousn (9)

Javascript