Aller au menu - Aller au contenu

Dynamisez vos sites web avec Javascript !

Revenir à la liste des news
Participer à la discussion

Image

Informations

Contributeur(s) : Nesquik69
Publié : le 11/10/2010 à 10:00:16
Catégorie : Tutoriels
Visualisations : 15 093

Licence : Creative Commons BY SA

Dynamisez vos sites web avec Javascript !

Vous êtes nombreux à demander la mise en avant du tutoriel Javascript, c'est maintenant chose faite ! Il s'agissait du principal tutoriel web qui manquait au Site du Zéro, et nous sommes heureux de pouvoir enfin vous le proposer. :)

Créez des pages web riches avec Javascript


Pour ceux qui ne le savent pas, le web est un échange d'informations entre un client et un serveur. Le serveur héberge un site web (par exemple, le Site du Zéro), tandis que le client (vous par exemple) demande à recevoir les pages web.

Du côté serveur, il est possible d'utiliser le PHP pour dynamiser le contenu des pages web, mais du côté client on ne peut rien faire avec seulement du HTML. C'est pourquoi le Javascript a été créé ! Avec ce langage, il vous est possible de créer une interaction entre le site et l'utilisateur sans recharger la page affichée. Bien sûr, afin de s'en servir correctement, il est important de connaître quelques bases en HTML et CSS, car sans cela vous ne pourrez pas interagir avec l'utilisateur.

En plus de pouvoir communiquer avec votre page web, le Javascript est de plus en plus utilisé pour créer simplement des extensions de divers logiciels, voire même des softs complets comme le montrent les captures d'écran ci-dessous :

Image utilisateur Image utilisateur


Tout un programme !


Thunderseb et moi-même (Nesquik69) avons conçu le cours de façon à ce que n'importe quel débutant, ayant un minimum de connaissances en HTML, puisse le comprendre. Des bases en PHP seront aussi un plus lorsque le cours abordera l'Ajax, mais vous pouvez très bien vous en passer si vous le souhaitez.

Actuellement, le tuto est constitué de deux parties :

  • I. Les bases du Javascript : cette partie aborde la base même du Javascript et de l'algorithmie. Elle contient aussi un TP (assez corsé, il faut le dire :D ) vous permettant de vous entraîner.
  • II. Annexe : eh oui, une annexe, déjà ! Dans cette partie vous trouverez des chapitres dont la lecture est facultative, toutefois il est conseillé d'y jeter un coup d'œil. Le seul et unique chapitre qui y est actuellement disponible vous permet de résoudre les erreurs dans vos codes, et s'avère très utile dans le TP de la première partie !

Rassurez-vous, le cours est bien loin d'être terminé ! Il nous reste encore bien des sujets à aborder, tels que : le DOM, les objets, l'Ajax, Mootools et enfin l'HTML 5 ! Mais tout cela arrivera au fur et à mesure de la rédaction du cours.

A propos des frameworks


Image utilisateur
Aujourd'hui, il est assez courant de voir les développeurs Javascript utiliser un framework. Qu'est-ce que c'est ?
Les frameworks sont des sortes de boîtes à outils pour le Javascript qui permettent de simplifier son utilisation, notamment sur des projets un peu complexes.
Javascript étant assez verbeux, plusieurs frameworks ont été créés afin de simplifier la réalisation de codes complexes. Dans ce tuto, vous découvrirez donc l'utilisation de l'un d'entre eux : Mootools. Il s'agit d'un puissant framework permettant de coder facilement, dans une syntaxe restant proche de celle du Javascript.

D'ailleurs, vous découvrirez aussi quand vous servir des frameworks. Beaucoup de personnes ont tendance à se jeter dessus alors qu'il est parfois possible de faire tout aussi simple sans s'en servir, pour de petits codes tout du moins.
Nous n'utiliserons pas de framework au début du tutoriel, nous ferons d'abord du Javascript pur et naturel, garanti 100% sans OGM. Lorsque vous aurez le niveau, nous vous ferons utiliser Mootools pour vous permettre de coder plus efficacement.

Si vous connaissez un tant soit peu le Javascript, vous avez sûrement entendu parler du framework jQuery. Vous devez d'ailleurs savoir qu'il s'agit du plus connu et surtout du plus utilisé. Alors pourquoi ne pas en parler dans le tuto ? Nous avons choisi Mootools car il propose une syntaxe proche du Javascript, ce qui en fait un outil qui nous semble pédagogiquement plus adapté. Il est un peu moins utilisé que jQuery mais reste réputé pour sa qualité et son sérieux.
Ceux qui souhaitent découvrir jQuery ont à leur disposition de nombreuses ressources et des tutoriels à foison, comme ce tutoriel jQuery sur le Site du Zéro.

Finalement, nous espérons de tout cœur que ce tutoriel vous conviendra et vous aidera dans le développement de vos sites web !

Sur ce, bonne lecture :) !

77 Participations

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1  2  3  Suivante
Pseudo Discussion
1 visiteur sur cette news (0 membre et 1 Anonyme)
Page 1  2  3  Suivante
Hors ligne anerax # Posté le 11/10/2010 à 10:03:49
Avatar

Interessant, j'avais lu le cours avant qu'il ne soit mis en avant, mais je ne trouve pas les parties assez développées et trop abstraites, il faudrait expliquer plus en profondeur dès le début.
EDIT : Mais il a été modifié à ce que je vois :p
J'ai rien dit x)

Aerandir Recrute !
Modeleur 3D - Spriter 2D iso
 
Hors ligne Calizero # Posté le 11/10/2010 à 10:06:59
Community Manager
Avatar
Admins

En tout cas, bravo aux deux auteurs. :)

Le Site du Zéro est aussi sur Facebook et Twitter !
 
Hors ligne Marg51 # Posté le 11/10/2010 à 10:09:36

Avatar

Ville : Saint pierre de boeuf
Pays : France métropolitaine

C'est sans grande surprise, mais ça reste une bonne nouvelle. J'espère qu'il va se compléter rapidemment, même si c'est pas toujours évident !bon courage

user powered by Image utilisateur
 
Hors ligne Jerry Wham # Posté le 11/10/2010 à 10:13:48
1castorMangé,1arbreSauvé
Avatar

Ville : Bordeaux
Pays : France métropolitaine

Bravo pour cette initiative. En espérant que vous la mènerez à bout (contrairement à JoSé2...).

J'attends ce tuto avec impatience.
 
Hors ligne ShigeruM # Posté le 11/10/2010 à 10:14:53
Do it for the kitties!
Avatar
Modérateurs

Ville : Paris
Pays : France métropolitaine
Études : ESSTIN

Effectivement, ce tuto manquait au menu de gauche. Sa mise en avant est "dans l'ordre des choses". C'est une très bonne nouvelle.

Félicitations et bravo aux auteurs !
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 10:27:54
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Avant que certains lecteurs ne se posent un peu trop la question : le rythme de parution des chapitres ne se veut pas spécialement rapide mais soutenu. Comprenez par là que Thunderseb et moi-même avons une vie à gérer à côté, soit des études, soit un travail, soit carrément les deux. Donc, je ne peux pas promettre une parution rapide des chapitres, en revanche nous allons faire de notre mieux pour que le rythme soit constamment le même (voir plus rapide), ainsi vous n'aurez pas, par exemple, deux mois sans nouveau chapitre :) .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne psyclon_nine # Posté le 11/10/2010 à 10:30:53
In web I trust
Avatar

Excellent, ça fait bien 4 ans que j'attends un tuto javascript sur le sdz :)
J'entends par là un tuto officiel ;)

Félicitations aux auteurs !
 
Hors ligne Duralex # Posté le 11/10/2010 à 10:45:16

Combien de temps estimez vous pour un apprentissage rapide des bases ??
Hors ligne Ge0 # Posté le 11/10/2010 à 10:53:06
bidouille !
Avatar
Groupe : Anciens
Flux RSS

Ville : Lyon
Pays : France métropolitaine
Études : ITII Lyon

Bon courage pour l'avancement du tutoriel. :)
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 10:56:33
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Citation : Duralex
Combien de temps estimez vous pour un apprentissage rapide des bases ??

Minimum 2 semaines, mais je dirais plutôt un mois pour avoir de la marge ;) .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne Hayabusa # Posté le 11/10/2010 à 11:05:46
Avatar

Je ne comprends pas ... il existe déjà un tutoriel javascript sur le SDZ non ?
http://www.siteduzero.com/tutoriel-3-8 [...] vascript.html
c'est quoi le problème avec ce tutoriel ? Pourquoi en avoir re fait un ? Cela doit être très frustrant pour l'auteur ^^

Subtle is the Lord, but malicious he is not.

En combinant les découvertes d’Einstein et de Pythagore : dans un triangle rectangle, E = mc^2 = m(a^2 + b^2).

La gravitation n'est pas à droite, elle est à gauche ! (J-M G.)
 
Connecté LCaba # Posté le 11/10/2010 à 11:09:53
A dollar is what I need
Avatar

Ville : Toulouse
Pays : France métropolitaine

Ce tuto n'est plus mis à jour depuis longtemps, il enseigne de mauvaises pratiques et surtout il n'est pas complet. Quant à son auteur, sa dernière connexion sur le site remonte à 2 ans. Cela dit, je le remercie vivement car c'est grâce à ce tuto que j'ai débuté :D .



Félicitations pour cette mise en avant bien méritée :)

Codez couverts grâce à "use strict" !
MUSIQUE : découvrez mon frère, Kryl
Image utilisateur
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 11:16:52
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Effectivement, on aurait dû aborder ce point dans la news : le précédent tuto de Javascript rédigé par José2 est, malheureusement, devenu obsolète. Il utilise de nombreuses méthodes de programmation dépassées depuis un bon moment.

Dans le cours actuel, nous nous efforçons de vous enseigner les bonnes méthodes de programmation et nous irons beaucoup plus loin dans les connaissances.

L'autre problème du tuto de José2 est que beaucoup de lecteurs en ressortent en disant "Je ne sais rien faire de concret au final", et c'est vrai... Ce tuto apprend les bases mais pas beaucoup plus.

Cela dit, tout comme LCaba, je remercie l'auteur car j'ai moi-même débuté avec ce tuto :D ! Après j'ai approfondi tout ça pendant 2 ans à grands coups de documentations ^^ .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne Mckey # Posté le 11/10/2010 à 12:20:59
Avatar
Flux RSS

Études : BTS IRIS

C'est bien ça.
Bon courage aux deux auteurs !
Je pensais pas que le logiciel de TOMTOM était fait en JavaScript.
Hors ligne Layen # Posté le 11/10/2010 à 12:26:37
.
Avatar

Ca m'aurait bien tenté de faire un tuto sur le JS ou aider, mais vous avez l'air de bien vous en sortir à deux. Si toutefois vous voulez un peu d'aide, n'hésitez pas à me Mp (j'adore le JavaScript en plus ^^ ).

Sinon j'attends des nouvelles du tuto. Et puis... à quand la POO ? :p

Faire ce qu'on aime pour se faire plaisir.
 
Hors ligne RyDroid # Posté le 11/10/2010 à 12:27:41
rayquaza devient RyDroid
Avatar

Ville : Reims
Pays : France métropolitaine

Bon tutoriel.
C'est bien de l'avoir mis en avant.
Je suppose que si il a été mis en avant c'est que quand il sera fini (même si ce n'est pas pour tout de suite), il sera "transformé" en LdZ.
Le tuto devrait arriver à bout : ils sont 2 auteurs, donc ils peuvent se relayer au cas ou. De plus Thunderseb a déja de très nombreux tutos.
 
Hors ligne Benjil@n05 # Posté le 11/10/2010 à 12:40:47
Avatar

Ville : Strasbourg
Pays : France métropolitaine

Exellente nouvelle !
(Peut être un nouveau Ldz en vue ... ?)

Image utilisateur
 
Hors ligne php0 # Posté le 11/10/2010 à 12:41:27

GRAND BRAVOOOOOOOOOOOOOOOOOOOOO c'est un plaisir de lire les tuto de SDZ, j'ai un peu lu le tuto c'est intéressant et merci encore pour le bouton IMPRIMER

Cordialement.
Hors ligne Cinderella Man # Posté le 11/10/2010 à 12:50:10
Avatar

Pourquoi avoir choisie Mootools ? Je pense que jQuery aurait été une meilleur solution pour les Zéros. Plus simple, plus rapide a utiliser et on peut faire presque tout ce que l'on a besoin.
Hors ligne ghazalp # Posté le 11/10/2010 à 12:59:15

Salut,
les utilisateurs de Joomla seront certainement intéressés par votre tuto, surtout lorsque vous aborderez Mootools.
Quoique un peu de JS Vanilla ne fait de mal à personne.

Annonce du tuto sur notre forum JoomlaFR ici.

@+
Hors ligne Nesquik69 # Posté le 11/10/2010 à 13:02:06
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Citation : Nuance
Pourquoi avoir choisie Mootools ? Je pense que jQuery aurait été une meilleur solution pour les Zéros. Plus simple, plus rapide a utiliser et on peut faire presque tout ce que l'on a besoin.

Est-ce que tu sais te servir de Mootools :) ?

Merci pour la pub ghazalp ^^ .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne Ceriko # Posté le 11/10/2010 à 13:02:50
Life is good !
Avatar

Ville : Barcelona
Pays : Espagne

Merci à vous Nesquick69 et Thunderseb. Ce tuto va me servir très bientôt !
En plus je vois que votre collaboration sur Ajax en est déjà a 75%... ça va donc aller assez vite !

Bonne continuation !

Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 13:05:39
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Ceriko -> Pour le moment le tuto Ajax est mis en pause, on ne sait pas trop ce qu'on va en faire dans l'immédiat. Une partie de ce cours va être réécrite et introduite dans le cours de Javascript, mais pour le reste on ne sait pas encore ce qu'on va en faire.

Bref, ne te fie pas aux 75% : ils ne signifient plus rien ;) .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne Ceriko # Posté le 11/10/2010 à 13:08:52
Life is good !
Avatar

Ville : Barcelona
Pays : Espagne

Moi qui me faisais une joie pour vous... En tout cas vous êtes bien partis.
C'est moi ou il y a une malédiction concernant les tutos autour de JS ?

Créez un diaporama original en CSS à partir de zéro

Modérateur sur DarkyROM : donnez le meilleur à votre Galaxy S :D
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 13:14:03
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Je vois pas en quoi c'est un problème pour nous : le tuto va se poursuivre sans encombres. C'est juste le tuto d'Ajax qui va subir un bon remaniement ;) .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Hors ligne Android # Posté le 11/10/2010 à 13:14:59
Qui a dit Android ?
Avatar
Groupe : Bannis

Félicitation et bravo à Thunderseb et à Nesquik69 !Sans doute l'un des prochains livre du Zéro à voir le jour... :p

Image utilisateur
Image utilisateur
 
Hors ligne skoua # Posté le 11/10/2010 à 13:16:47
Avatar

Citation : Nuance
Pourquoi avoir choisie Mootools ? Je pense que jQuery aurait été une meilleur solution pour les Zéros. Plus simple, plus rapide a utiliser et on peut faire presque tout ce que l'on a besoin.


+1

Je trouve Mootools beaucoup plus laborieux que jQuery et il est moins utilisé.
Après c'est souvent une question de goût mais jQuery a une syntaxe tellement simple (même si celle de Mootools n'est pas complexe non plus) que ça me semble étonnant de ne pas le choisir pour un tuto pour les zéros.


Malgré tout, bravo pour ce tuto sur js, c'est vrai que ça manquait. :)
Hors ligne Savageman # Posté le 11/10/2010 à 13:28:40
Avatar
Flux RSS

Études : INSA Lyon

Citation : skoua
Citation : Nuance
Pourquoi avoir choisie Mootools ? Je pense que jQuery aurait été une meilleur solution pour les Zéros. Plus simple, plus rapide a utiliser et on peut faire presque tout ce que l'on a besoin.


+1

Je trouve Mootools beaucoup plus laborieux que jQuery et il est moins utilisé.
Après c'est souvent une question de goût mais jQuery a une syntaxe tellement simple (même si celle de Mootools n'est pas complexe non plus) que ça me semble étonnant de ne pas le choisir pour un tuto pour les zéros.


Malgré tout, bravo pour ce tuto sur js, c'est vrai que ça manquait. :)

Ce n'est pas étonnant du tout dans un tutoriel concernant JavaScript.
jQuery est plutôt éloigné de JavaScript : tu peux t'en sortir en jQuery sans vraiment connaître JavaScript. MooTools est très proche de JavaScript dans sa philosophie et tu ne peux pas t'en servir si tu ne connais pas le JavaScript. C'est sans doute pour ça qu'il est moins utilisé : la plupart des gens n'ont pas vraiment besoin ou envie de faire de JavaScript, du coup il pose un jQuery, un plug-in et ça roule. ;)

Ça se ressent aussi dans la documentation MooTools par exemple. Elle décrit surtout l'API du framework, mais tu n'auras pas tout le blabla présent sur la doc de jQuery qui montre où insérer ton code et présente quelques trucs de JS succintement : quand t'utilises MooTools c'est un pré-requis, si tu ne sais pas où insérer ton code, tu passe ton chemin, et puis c'est tout.
 
Hors ligne Nicolas M. # Posté le 11/10/2010 à 13:43:48
M(NiCoLaSm) = 406,9 g/mol
Avatar

Ville : Notre-dame de bondeville
Pays : France métropolitaine

Je plussoie Savageman...

Félicitations à Thunderseb et à Nesquik69 ! Vivement le LdZ... :-°

Image utilisateur Image utilisateur

Le saviez-vous ? Les forums sont environ 283 174 fois plus efficaces que ma boîte MP pour vous aider. ;)
Image utilisateur
 
Hors ligne Nesquik69 # Posté le 11/10/2010 à 13:46:13
Slave of the Rythm
Avatar
Groupe : Auteurs

Ville : Tassin la demi-lune
Pays : France métropolitaine

Savageman a tout dit, merci pour son explication ^^ .

Mes sites web : Plune | It's Friday!
Mes tutos : Javascript | Ajax
Mes projets : SpeedTest | Boxifier | zUploader
Articles : Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Monde parallèle acidifié | Tydax
 
Pour accéder à cette section
Connectez-vous !
connexion_rpx

Revenir à la liste des news

Lire aussi