Javascript

708 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
708
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. JavaScriptTravail présenté par : MAHDHAOUI Ismail
  2. 2. Quest-ce que le JavaScript ?(1/2) Un langage de programmation:JavaScript est un langage qui permet aux développeursdécrire du code source qui sera analysé parlordinateur. Programmer des scripts: Langage compilé. Langage pré-compilé. Langage interprété (exp: javascript).
  3. 3. Quest-ce que le JavaScript ?(2/2)
  4. 4. Premiers pas en JavaScript (1/4)<html><head><title>Cc bjr</title></head><body><script>alert(Cc bjr! );</script></body></html>
  5. 5. Premiers pas en JavaScript (2/4)<html><head><title>Cc bjr</title></head><body>bonjour<script>alert(Cc bjr! );</script>&nbsp; bonjour</body></html>
  6. 6. Premiers pas en JavaScript (3/4) 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! );
  7. 7. Premiers pas en JavaScript (4/4) 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!");}
  8. 8. Où placer le code dans la page? Le Javascript "dans la page " Le Javascript externe
  9. 9. Les variables Les variables (déclaration) var number = 2; Les types de variablestoute déclaration de variable se fait avec le mot-clé var sansdistinction du contenu Tester lexistence 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"
  10. 10. Les conditionsOpé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 à
  11. 11. 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");
  12. 12. 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;}
  13. 13. la fonction confirm() Exemple:if (confirm(Voulez-vous exécuter le code Javascript decette page ?)){ alert(Le code a bien été exécuté !); }
  14. 14. Les boucles 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);}
  15. 15. 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>
  16. 16. 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(); } }
  17. 17. É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; }
  18. 18. Pause
  19. 19. Les fonctions temporellessetTimeout(myFunction, 2000); //exécuter monfonction après 2 s.ExempleChanger le style d’un div chaque 2s.
  20. 20. 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" }onclick="changer_image(2)" /><br /><input type="button" value= "image3"onclick="changer_image(3)" /><br />
  21. 21. FinMERCI

×