tutorial Javascript
Langage JavaScript
ATTENTION ! : Avant de vous lancer a faire du Javascript il est essentiel d'apprendre le langage HTML
Ce langage de programmation web est très utile pour contrôler et animer la navigation des internautes sur votre site web par contre ne permet pas d’enregistrer ou de lire une base de donnée. C'est un langage qui s'exécute coté client, c'est a dire que c'est votre pc, en particulier votre navigateur qui gère ce langage contrairement au php qui lui ce fait coté serveur,(la ou vous aller consulter le site). Comme ce code est exécuté en clair sur votre pc alors vous pouvez retrouver ce code et quelqu'un d’autre peut le retrouver pour en faire ce qu'il veut, donc si vous désirez protéger votre code il vaut mieux passer par un autre langage comme par exemple Java qui n'a rien a voir avec JavaScript
la Preparation
Pour commencer il vous faut une page html de base. Pour introduire notre code Javascript, il nous faut la balise <script> exemple :
<html>
<head>
<script language='javascript'>
// ici on ecrit du code javascript
</script>
</head>
<body>
</body>
</html>
Pour faire des commentaires en JavaScript on utilise le double slash // . Pour executer du code JavaScript ont enferme notre code dans un mot, ce mot représentera tout notre code a exécuté , on dira de ce mot que c’est une fonction, une fois la fonction défini nous l’exécuterons. Ma fonction je vais l’appeler fonctionPrincipal. Pour definir ma fonctionPrincipal j’ecrit function suivit du mot fonctionPrincipal(){} exemple :
function fonctionPrincipal(){
// Ici j’écris le code entre les { } qui sera bientôt exécuté
}
Pour faire exécuter le code j’ajoute fonctionPrincipal() sans les { }, en résumer cela donne :
<html>
<head>
<script language='javascript'>
function functionPrincipal() {
// ici on écrit le code
}
functionPrincipal()
</script>
</head>
<body>
</body>
</html>
Bon maintenant que vous avez compris comment organiser tout ça, nous allons pouvoir coder. Pour commencer on va faire le plus facile et augmenter la difficulté au fur et a mesure.
ECRIRE un mot
Je pense que afficher un mot serai bien utile. Pour afficher un mot on utilise document.write(). Si je veux afficher Bonjour qui est une chaine de caractère donc a mettre entre '' de cette façon 'Bonjour' j’écrirait document.write('Bonjour') exemple :
<script language='javascript'>
function functionPrincipal() {
document.write('Bonjour')
}
functionPrincipal()
</script>
On peut même écrire du HTML document.write('<br/>Bonjour<br/>Encore Bonjour')
ECRIRE une variable
Alor qu’es ce qu’une variable ?
C’est un mot représentant quelque chose à mémoriser, le mot peut s’appeler comme vous le desirez. Moi je vais faire simple je vais l’appeler MaVariable, en JavaScript pour definir une variable on utilise le mot var exemple :
var MaVariable ;
Ou alors
var MaVarible1 , MaVariable2 ;
la ma variable est nul alors je peux la définir directement :
var MaVariable=’Bonjour’ ;
ou alors
var MaVariable= 15 ;
Exemple:
<script language='javascript'>
var MaVariable= 15 ;
function functionPrincipal() {
document.write(MaVariable)
}
functionPrincipal()
</script>
On peut même afficher une chaine de caractère avec une variable exemple :
<script language='javascript'>
var MaVariable= 15 ;
function functionPrincipal() {
document.write(MaVariable+'<br/>Bonjour')
}
functionPrincipal()
</script>
Pour ce qui suit je vais vous montrer un exemple reprenant tout ce que je vous est appris plus quelque calcul pour ne pas trop faire de discours car tout ce dit tout seul a mon avis.
<script language='javascript'>
var MaVariable1= 20 ;
var MaVariable2= 15 ;
var resultatAdition= MaVariable1+MaVariable2 ;
var resultatSoustraction = MaVariable1-MaVariable2 ;
var resultatMutiplication= MaVariable1*MaVariable2 ;
var resultatDivision= MaVariable1/MaVariable2 ;
function functionPrincipal() {
document.write('Voici les resultat:<br/>'+MaVariable1+'+'+MaVariable2+'='+resultatAdition+'<br/>')
document.write(MaVariable1+'-'+MaVariable2+'='+resultatSoustraction+'<br/>')
document.write(MaVariable1+'X'+MaVariable2+'='+resultatMutiplication+'<br/>')
document.write(MaVariable1+'/'+MaVariable2+'='+resultatDivision+'<br/>')
}
functionPrincipal()
</script>
Il existe aussi d’autre moyen simple pour afficher comme par exemple :
alert('Bonjour') ;
confirm('Bonjour') ;
La Condition if
Cette condition est utilisée tout le temps en programmation, elle permet de déclencher ou bloquer des actions, par exemple si une erreur survient ou pour déterminer quand un compteur s’arrête ou encore de faire des actions pour un navigateur et pas un autre etc. On vas prendre un exemple si quelqu’un est majeur ou mineur (majeur plus grand que 18ans et mineur plus petit que 18ans et ne pas oublier que égale a 18ans on est majeur). Pour dire plus grand que on fait ce signe la > et pour plus petit que on fait celui la < et pour voir si il y a une égalité on fait 2fois égale ==. <script language='javascript'> var age = 15; function fonctionPrincipal(){ if (age > 18){ document.write('Vous êtes Majeur ! ') } if (age < 18){ document.write('Vous êtes Mineur ! ') } if (age == 18){ document.write('Vous êtes Majeur ! ') } } fonctionPrincipal() </script> Comme vous pouvez le voir a 15ans on est Mineur, pour vérifier il suffit de changer le 15 en 18. Moi je trouve qu’il y a un code en trop qui ce répète non ? Le égale a 18 déclenche la même condition que plus grand que 18. Je vais l’améliorer grâce à ou. Si age > 18 ou age == 18. Pour faire un ou on maintient la touche Alt Gr avec la touche 6 . <script language='javascript'> var age = 18; function fonctionPrincipal(){ if (age > 18 || age == 18 ){ document.write('Vous êtes Majeur ! ') } if (age < 18){ document.write('Vous êtes Mineur ! ') } } fonctionPrincipal() </script> Ont vient de voir la condition avec le ou maintenant on vas voir avec le et. Vous pourrez remarquer que pour faire un apostrophe j’ai été obliger de mettre un \. Le et ce faire comme sa && avec la touche 1. <script language='javascript'> var sex = 'garçon'; var argent = 100; function fonctionPrincipal(){ if (argent > 100 || argent == 100 && sex == 'fille' ){ document.write('J\'achete une jupe') } if (argent > 100 || argent == 100 && sex == 'garçon' ){ document.write('J\'achete un pantalon') } if (argent < 100){ document.write('Je n\'achete pas') } } fonctionPrincipal() </script> En javascript on fait beaucoup de function , je vais vous apprendre a jouer avec les fonctions. Cela évite beaucoup de répétition et fait gagner du temps. <script language='javascript'> function fonctionPrincipal(){ Presentation('Dream3D') Presentation('Julien') Presentation('Martin') } fonctionPrincipal() function Presentation(nom){ document.write('Bonjour je m\'appel '+ nom+ '<br/>') } </script> En javascript on utilise quotidiennement le css. Le css permet de redéfinir des propriétés de mise en forme et permet aussi de bien mettre des éléments de la page au bonne endroit, textes ou images mis en place avec une bonne précision, recadré , recentré et même faire un simple menu. On vas commencer par définir la couleur du texte et la couleur de fond. Pour modifier l’ensemble de la page il faut toucher a la balise body, pour ce faire on écrira : document.body Ensuite pour utiliser du css on utilise style suivi de la fonction que l’on désire. Moi pour l’exemple je vais utiliser color pour la couleur du texte et backgroundColor pour la couleur de fond de la page. Pour ceux qui connaisse le css vous pourrez remarquer que background-color a été modifier au niveau du tiret, on sépare les 2 mots par une majuscule. <html> <head> </head> <body> <script language='javascript'> function fonctionPrincipal(){ document.body.style.color= 'red' document.body.style.backgroundColor= 'green' document.write('Bonjour') } fonctionPrincipal() </script> </body> </html> Chaque élément HTML peut être modifier si il a un id donc a la place de modifier le body on va modifier un element HTML par son id. Je vais choisir pour l’exemple la balise <div>.et lui mettre un id que je vais nomé monID. <html> <head> </head> <body> <div id='monID'></div> </body> </html> Cette div je vais lui écrire une phrase et lui donner une couleur de texte et de fond. Avant tous ça je doit dire quel element je doit modifier mais grâce a son id sa va être très simple on fait document.getElementById('monID'). Pour insérer une phrase on utilise innerHTML. La vaut mieux mettre le script a la fin dans le body sinon sa ne vas pas fonctionner. <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' } fonctionPrincipal() </script> </body> </html> la maintenant pour commencer a faire jolie on vas mettre notre div en cadre, cela vas déterminer les limiter de cette div, vous verrai le texte aussi va suivre cette limite. <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').style.width = 100 document.getElementById('monID').style.height = 80 document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' } fonctionPrincipal() </script> </body> </html> Si l’on veut la placer a un autre endroit de l’écran nous devons utiliser marginLeft pour l’horizontal et marginTop pour la vertical de l’écran. <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').style.width = 100 document.getElementById('monID').style.height = 80 document.getElementById('monID').style.marginLeft = 250 document.getElementById('monID').style.marginTop = 250 document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' } fonctionPrincipal() </script> </body> </html> Maintenant si vous avez bien compris ces valeurs ça vas commencer a être amusant car on va créer un fonction permettent d’animer notre div grace a un compteur que nous allons créer.le compteur ne poura pas marcher si notre fonction ne ce repete pas elle-même. Pour que la function ce répète nous utiliserons setTimeout(). Pour créer le compteur nous allons faire une variable que je nommerai compteur puis elle augmentera a chaque tour grâce a cette addition : compteur = compteur +1 .Aller c’est partie : <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').style.width = 100 document.getElementById('monID').style.height = 80 document.getElementById('monID').style.marginLeft = 0 document.getElementById('monID').style.marginTop = 0 document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' Animation() //déclenchement de notre animation dans la fonctionPrincipal } fonctionPrincipal() var compteur = 0 ; function Animation(){ compteur = compteur +1 document.getElementById('monID').style.marginLeft = compteur //pour setTimeout, 100 représente le délais de répétition setTimeout('Animation()', 100); } </script> </body> </html> Vous avez du remarquer que notre div ce déplacer vers la droite. Moi j’aime bien voir ce que je fait alors je vais modifier un peut le code. A la place de la phrase je préfère voir le compteur et le vert était moche je trouve alors je l’est changer en noir mais attention cette fois ci en mode RGB. RGB veut dire 3 couleurs primaires en anglais R comme Red, G comme GREEN et B comme BLUE en français cela donne rouge, vert, bleu, ces couleurs permettent d’avoir n’importe quel couleur. Chaque une des couleurs ne peut aller au delà de 255. A vous de jouez avec les couleur. <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').style.width = 100 document.getElementById('monID').style.height = 80 document.getElementById('monID').style.marginLeft = 0 document.getElementById('monID').style.marginTop = 0 document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' Animation() //declenchement de notre animation dans la fonctionPrincipal } fonctionPrincipal() var compteur = 0 ; function Animation(){ compteur = compteur +1 document.getElementById('monID').style.marginLeft = compteur document.getElementById('monID').innerHTML= compteur document.getElementById('monID').style.backgroundColor= 'rgb(0,0,0)' //pour setTimeout 100 represente le delais de repetition setTimeout('Animation()', 100); } </script> </body> </html> Autre exemple pour Montrer de couleur RGB : <html> <head> </head> <body> <div id='monID'></div> <script language='javascript'> function fonctionPrincipal(){ document.getElementById('monID').style.color= 'red' document.getElementById('monID').style.backgroundColor= 'green' document.getElementById('monID').style.width = 100 document.getElementById('monID').style.height = 80 document.getElementById('monID').style.marginLeft = 0 document.getElementById('monID').style.marginTop = 0 document.getElementById('monID').innerHTML= 'Coucou je suis la div a modifier' Animation() //declenchement de notre animation dans la fonctionPrincipal } fonctionPrincipal() var compteur = 0 ; function Animation(){ compteur = compteur +1 document.getElementById('monID').style.marginLeft = compteur document.getElementById('monID').innerHTML= compteur if ( compteur < 50){ document.getElementById('monID').style.color= 'rgb(255,255,0)' document.getElementById('monID').style.backgroundColor= 'rgb(255,0,0)' }else if ( compteur < 100){ document.getElementById('monID').style.color= 'rgb(120,120,120)' document.getElementById('monID').style.backgroundColor= 'rgb(0,255,0)' }else if ( compteur < 150){ document.getElementById('monID').style.color= 'rgb(0,255,255)' document.getElementById('monID').style.backgroundColor= 'rgb(0,0,255)' }else{ document.getElementById('monID').style.color= 'rgb(0,0,0)' document.getElementById('monID').style.backgroundColor= 'rgb(255,255,255)' } //pour setTimeout 100 représente le délais de répétition setTimeout('Animation()', 50); } </script> </body> </html>Javascript et css
Ma Premier Animation