Introduction à javascript
D?but du script
Code JAVASCRIPT :
<script type="text/javascript"> /* votre code javascript se trouve ici c'est deja plus pratique pour un script de plusieurs lignes */ </script>
Importer un fichier externe
Code JAVASCRIPT :
<script type="text/javascript" src="script.js"></script>
Quelques fonctions
Code JAVASCRIPT :
/*-------------------------------------------- Demander, cr?er et afficher une variable ---------------------------------------------*/ var age=18;//Cr?ation d'une variable age alert(age)//affichage de la variable age alert("Vous avez " + age + " ans"); // Concat?nation :on affiche les chaines mises bout-?-bout var age = prompt("Quel ?ge avez-vous ? (en ann?es)"); // on demande l'age /*-------------------------------------------- Cr?er une fonction ---------------------------------------------*/ function conversion(taux) // declaration de la fonction avec un argument { var valeur = prompt("Entrez la valeur ? convertir"); var resultat = valeur * taux; // on calcule le resultat, en utilisant l'argument alert('Valeur : '+valeur + '\nR?sultat : '+resultat); return resultat; //on retourne la valeur } /*-------------------------------------------- Tableaux ---------------------------------------------*/ var table = new Array("Pierre", "Paul", "Jacques");// tableau index? alert(table[1]); var scores = new Array();//tableau associatif scores["Toto"] = 142; scores["Pierre"] = 137; alert(table["Toto"]); table.length;//longueur du tableau // une fonction qui retourne, sous forme de cha?ne de caract?res, le contenu du tableau function lire1(tab) { var chaine = "Le tableau contient :" for(var i=0; i<tab.length; i++) chaine += "\n" + i + " -> " + tab[i]; return chaine; } /*-------------------------------------------- Les objets html ---------------------------------------------*/ //Atteindre les objets document.getElementById("id"); getElementsByTagName("textarea")//ex:retourne un tableau contenant tous les ?l?ments <textarea> de la page document.getElementsByTagName('textarea')[1];//Si on veut acc?der au second <textarea> de la page
Les ?v?nements
* onClick et onDblClick : lors d'un clic / double clic sur l'?l?ment en question
* onKeyPress : lorsqu'on appuie sur une touche avec cet ?l?ment s?lectionn?
* onKeyDown et onKeyUp : lorsqu'une touche est enfonc?e / rel?ch?e avec cet ?l?ment s?lectionn?
* onmouseover et onmouseout : lorsque le pointeur de la souris arrive sur l'?l?ment / sort de cet ?l?ment
* onmousemove : lors d'un d?placement de la souris au-dessus de cet ?l?ment
* onMouseDown et onMouseUp : lorsque le bouton de la souris est enfonc? / rel?ch? sur cet ?l?ment
Code JAVASCRIPT :
/*-------------------------------------------- Acc?der aux ?l?ments d'un formulaire ---------------------------------------------*/ var monForm = document.getElementById("monFormulaire"); var champPseudo = monForm.pseudo; /*-------------------------------------------- le mot-cl? "this" ---------------------------------------------*/ <img src="photo.jpg" alt="" onclick="this.src='image.jpg'" />
Enjoyed this article? I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter, Facebook or Linked In.
Show me some love with the like buttons below... Thank you and please don't forget to share and comment below!!
Show me some love with the like buttons below... Thank you and please don't forget to share and comment below!!
Avez vous aimé cet article? Je vous serais très reconnaissant si vous aidiez à sa diffusion en l'envoyant par courriel à un ami ou en le partageant sur Twitter, Facebook ou Linked In.
Montrez-moi un peu d'amour avec les like ci-dessous ... Merci et n'oubliez pas, s'il vous plaît, de partager et de commenter ci-dessous!
Montrez-moi un peu d'amour avec les like ci-dessous ... Merci et n'oubliez pas, s'il vous plaît, de partager et de commenter ci-dessous!
Recommended for You!
Get involved :
Click to follow us on Facebook:
Comment this article by clicking on "Discussion" button (top-right position of this page)
Click to follow us on Facebook:
Comment this article by clicking on "Discussion" button (top-right position of this page)