Accueil­FAQ­Rechercher­S'enregistrer­Membres­Groupes­Connexion
Poster un nouveau sujet   Répondre au sujetPartager | 
 

 Tutorial Javascript : Partie 1

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Cyrhades
Experimenté
Experimenté


Masculin Nombre de messages: 437
Age: 27
Programme utilisé (Gm/RmXp/...): NotePad
Loisirs: Programmation
Date d'inscription: 03/07/2006

MessageSujet: Tutorial Javascript : Partie 1   Mar 4 Juil - 17:11

COURS JAVASCRIPT


SOMMAIRE

Introduction

Niveau Débutant
- les bases.
- Les variables.
- les boites de dialogues.
- les conditions.
- les Opérateurs.
|
- C'est parti pour le premier vrai script (jauge d'energie)


Niveau Intermédiaire
A venir


Introduction

Un de plus et d'un ...
C'est ça que vous vous dites ?!?!
Eh bien oui c'est vrai un tutorial de plus sur le javascript.
Mais alors pourquoi je perd mon temps à en faire un ?
Tout simplement parce qu'il est quasiment impossible de trouver un tutorial pour une personne ne connaissant rien de rien en javascript, on trouve surtout des sources, des petits cours ultra rapide.
Moi je vous propose un cours ultra poussé en démarrant de 0 vraiment 0.
Si malgré toute mes explications vous nagez alors n'hésitez pas je répondrais volontier et je peaufinerais mon tutorial pour les prochains visiteurs, toutes vos remarques seront utiles et écoutées. Vous devez pour suivre ce tutorial savoir comment enregister un fichier au format html.

Logiciel nécessaire :
Eh bien moi je travail sous le bloc note rien d'autre, et le but de ce tutorial est de vous apprendre à créer par la suite vos propre scripts et donc d'avoir juste besoin d'un traitement texte.
Allez on y va on se lance ???




Les bases

comment intégrer du javascript dans une page html ?
script language="javascript">
!--


le javscript dans cette partie

// -->
/script>

les balises !-- et //--> sont du html il permettent de mettre le script en commentaire dans le cas ou le navigateur du visiteur ne supporterait pas le javascript.

une autre méthode :
script language="javascript" src="monscript.js">/script>
appel du fichier monscript.js

il est utile aussi de mettre :
!-- au debut du fichier monscript.js et // --> à la fin
pour les mêmes raison que cité plus haut.

Il existe 2 façon de faire un commentaire en javascript
1ere façon // tout ce qui suis sur la même ligne est considéré comme un commentaire
2eme façon /* tout ce texte est un commentaire
car il se trouve entre les balise de commentaires même si on chage de ligne le but étant de refermer pour stopper le commentaire */


Voilà vous savez maintenant comment déclaré du javascript maintenant on va apprendre a en faire.

les variables

Les variables on les déclarent de cette façon

nomvariable="bidule";

ici on a une variable nommé nomvariable qui à la valeur bidule
c'est une variable locale ce qui signifie que déclaré de cette façon elle ne pourra sortir de la fonction (on verra plus tard comment créer une fonction).

var nomvariable="bidule";

exactement pareil sauf que cette fois la variable est globale elle peut être utilisé dans tout le reste du script.

var nomvariable="15";
var nomvariable=15;
Ici je montre un point important les valeur numérique. ici une seule des 2 variable contient une valeur numérique laquelle?
la seonde car elle n'est pas entre guillemet, le premiere valeur n'est pas considéré comme un nombre mais comme un texte (valeur alphanumerique) il exsite un moyen de récupérer une valeur numérique qui se trouve entre guillemet et la considérer comme telle (on verra plus tar egalement.


Une variable ça sert à quoi
En gros sa sert à pouvoir l'appeler (grace à son nom) et récupérer son contenu vous
ferez un exemple dans les boites de dialogue.



les boites de dialogues

Il existe 3 types de boite de dialogue
alert (qui affiche une alerte)
confirm (une boite de confirmation)
prompt (une boite de prompt lol une boite de dialogue qui permet au visiteur d'entrer un texte)

Commençons par le début une alerte
c'est simple faite :
alert("votre texte");
votre texte entre guillemet sera affiché dans une boite de dialogue de type alerte le visiteur ne pourra que cliquer sur le bouton OK

J'avoue c'est pas top utile on va voir autre chose de plus interessant, la boite de confirmation.

confirm("Votre question?");
votre texte entre guillemet sera affiché dans une boite de confirmation le visteur pourra cliquer sur OK ou Annuler.
pas mal mais on fais comment pour réceptionner la réponse ?
eh bien on donne un nom a notre boite, notre boite de confirmation devient le contenu d'une variable.

var nomvariable=confirm("Votre question?");

Pas de guillemet pour une fonction (ni pour une variable) on voit ça apres faut pas aller trop vite ;-)

Pour pouvoir ce servir de la réponse il faut attendre d'apprendre les conditions juste apres les boites de dialogue.


prompt("Votre question?","Ici texte ou le visiteur tape sa réponse");
pas mal mais on fais comment pour réceptionner la réponse ?
Comme avec la boite confirm on l'intégre dans une variable

var nomvariable=prompt("Votre question?","Ici texte ou le visiteur tape sa réponse");





script language="javascript">
!--

/* un vrai exemple qui va vous motiver et qui va reprendre tout ce
qu'on a vu depuis le début commentaire, déclaration de variable mais plus encore
avec une condition, une condition simple vous verrez */
/****************************************************/
// au fait une variable ne commence jamais
// par un chiffre en javascript 1_variable c'est pas bon
// par contre variable_1 c'est bon aller oon tente :p

var variable_1 = "Aimez vous ce tutorial ?";
// on donne le nom question à notre boite
//de confirmation pour récupérer la réponse

var question = confirm(variable_1);
// pas de guillemet sur variable_1 car c'est l'appel de la variable et non un texte
//si on met des guillemets la boite afficherait variable_1 faites le test si vous voulez
// Si question a été validé

if(question) {

/* on envoi une alerte pour remercier les \n permettent un saut de ligne et en plus on récupére la variable_1 que l'on ajoute à l'alert vu quel ne doit pas être entre guillemet on referme les guillemets on met un + le nom de la variable si besoin d'ajouter du texte on remet un + apres la variable et ouvre
a nouveau les guillemets */

alert("Je suis content que vous ayez répondu positivement à la question :\n\n"+variable_1+"\n\nMerci");
} // sinon
else {
// On demande pourquoi au visiteur
var reponse = prompt("Pourquoi vous n'aimez pas?","Votre réponse"); }
// si question n'a pas été validé
if(!question) {
// on envoi une alert en inscrivant la réponse du visiteur
alert("vous avez répondu : "+ reponse); }
// -->
/script>




Opérateurs

Opérateur de comparaison
== egal (2 =)
< inferieur
> Supéieur
<= inferieur ou egal
>= Supéieur ou egal
!= inégal (différent)

Opérateurs
|| = OU
&& = ET
! = CONTRAIRE (différent)

Les opérateurs on les comprend en les utilisant on verras dans nos prochain script pour les comprendre

Partie 2

_________________


Dernière édition par le Mer 5 Juil - 12:14, édité 5 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lcproduction.free.fr/
Cyrhades
Experimenté
Experimenté


Masculin Nombre de messages: 437
Age: 27
Programme utilisé (Gm/RmXp/...): NotePad
Loisirs: Programmation
Date d'inscription: 03/07/2006

MessageSujet: Re: Tutorial Javascript : Partie 1   Mar 4 Juil - 21:12

Voilà j'ai débuté un tutorial comme vous avez pu le voir ^^

Ce messages pour dire que si vous avez une demande en particulier en javascript demandez j'ajouterais votre demande à mon tutorial.

Tout niveau Novice, Intermediaire, Expert je devrais logiquement pouvoir vous aider (sauf méthode de calcul complexe ou je ne suis pas au top ^^)

Alors n'hésitez pas

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lcproduction.free.fr/
Angel's Dream
Modérateur Langages Web
Modérateur Langages Web


Masculin Nombre de messages: 2855
Programme utilisé (Gm/RmXp/...): GM-6.1, Notepad ++, Flash MX 2004, Fruity loop
Etudes: Seconde Général
Loisirs: Vivre !
Date d'inscription: 04/11/2005

MessageSujet: Re: Tutorial Javascript : Partie 1   Mer 5 Juil - 10:16

ohhh !
un concurent :bienvenue:
Trés bon tutorial !
je pense que t'aurais put peut être ajouté une petite partie sur comment ouvrir un fenêtre ca peux toujours servir ;)
Et si tu veux piquer ma place de modo faudra courir :D
Contre attaque :
La verification de formulaire :
Tien c'est vrai ca faut dce mefier...
avez vous envie qu'un intrus s'amuse a envoyez des message vide ?
ou qu'un message ce pert avant d'arriver a destination ?
non je ne crois pas...alors il y a un petit script qui vous aidera ;)
Au boulot !
Bon comme vous savez ouvrir un script je passe.
Au formulaire.C'est maintenant qu'on se rend bien compte que ca sert les petit attribut name.
Tout d'abors veuiller donner un nom a votre formulaire :
<form>

ensuite créez un input :
<input>

et un submit en fermant la balise form :
<input>
</form>

Voyons maintenant le code javascript :
fonction verif()
{
if (document.form.text.value == "")
{
alert("Vous n'avez pas inscrit votre pseuo...attention");
}
else
return true;
return false;
}

Voil ce code verifie que le champ value dans l'input pseudo et non vide.
Sinon il empeche de changer de page et affiche un message.
Il faut maintenant racorder la fonction au html.

On va utiliser onsubmit et onclick :
<form>

et le submit :
<input>

Ce qui donne en entier :

<script>
!--
fonction verif()
{
if (document.form.text.value == "")
{
alert("Vous n'avez pas inscrit votre pseuo...attention");
}
else
return true;
return false;
}
-->
</script>

<form>
<input>
[color=blue]<input>

</form>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Angel's Dream
Modérateur Langages Web
Modérateur Langages Web


Masculin Nombre de messages: 2855
Programme utilisé (Gm/RmXp/...): GM-6.1, Notepad ++, Flash MX 2004, Fruity loop
Etudes: Seconde Général
Loisirs: Vivre !
Date d'inscription: 04/11/2005

MessageSujet: Re: Tutorial Javascript : Partie 1   Mer 5 Juil - 10:19

Sabotage!!!
On a saboté mes balise!!!!
Nooz a l'aide !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Cyrhades
Experimenté
Experimenté


Masculin Nombre de messages: 437
Age: 27
Programme utilisé (Gm/RmXp/...): NotePad
Loisirs: Programmation
Date d'inscription: 03/07/2006

MessageSujet: Re: Tutorial Javascript : Partie 1   Mer 5 Juil - 10:53

Salut, blunkoth 1er
Une petite info indispensable pour nos amis lecteurs (et aussi pour les ennemis lecteurs y en a peut être qui lisent et qui ne nous aiment pas ^^)

oui je disais donc il faut préciser que ton script n'est pas réellement une protection, mais seulement une vérifiaction, pour une vérification réelles celle ci doit être faites coté serveur (via PHP / ASP ou autre langage serveur)

on peu vérifier via une methode type AJAX / DOM mais pareil pas de sécurité concrete même si vérifier sur le serveur

Nous verrons dans la suite de mon tutorial niveau Expert comment utiliser
une methode type AJAX / DOM pour charger des fichier sur le serveur sans réactualiser la page.

pour l'ouverture de fenêtre je vais faire dans l'ordre en même temps que les liens ;-)

voilà il va être tres long sur ce tutorial tu verras ;-)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lcproduction.free.fr/
Angel's Dream
Modérateur Langages Web
Modérateur Langages Web


Masculin Nombre de messages: 2855
Programme utilisé (Gm/RmXp/...): GM-6.1, Notepad ++, Flash MX 2004, Fruity loop
Etudes: Seconde Général
Loisirs: Vivre !
Date d'inscription: 04/11/2005

MessageSujet: Re: Tutorial Javascript : Partie 1   Mer 5 Juil - 11:12

de toute facon tant que ca marche ^^
bien sur il y a plus de secu avec php mais c'est un moyen assez sympa...
Vive le regex XD
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

Tutorial Javascript : Partie 1

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Game Maker Zone :: Programmation/Graphisme :: Programmation web :: Scripts - Exemples-
Poster un nouveau sujet   Répondre au sujet