Le fil dedie a javascript
- Initiateur de la discussion farid_h
- Date de début
-
- Mots-clés
- javascript
J'ai jamais compris l'utilite de JavaScript sur les serveurs, i.e. Node.js... a part peut etre reutiliser du code. 
C'est vrai que la syntaxe n'est pas tres belle. Un 'var' pour declarer des variables, wtf? D'un autre cote, des objets partout (hash, dictionaries, associative arrays comme on les appelle dans d'autres langues), et les lambda expressions, ca rend le code un peu supportable. Pas beau, mais ca peu aller.
Ce que j'aime pas, c'est le clusterfuck qu'est DOM et tout ce qui va avec. Sans jQuery, insupportable a mon avis, lol.
C'est vrai que la syntaxe n'est pas tres belle. Un 'var' pour declarer des variables, wtf? D'un autre cote, des objets partout (hash, dictionaries, associative arrays comme on les appelle dans d'autres langues), et les lambda expressions, ca rend le code un peu supportable. Pas beau, mais ca peu aller.
Ce que j'aime pas, c'est le clusterfuck qu'est DOM et tout ce qui va avec. Sans jQuery, insupportable a mon avis, lol.
Ma façon de programmer perturbe les profs et les pseudo pros, je programme depuis 1985, je suis un dinosaure pour certains qui pourtant ne se gênent pas pour copier et même voler mon code qu'ils reconnaissent plus fluide et plus efficace.Les amateurs et fans du JavaScript, c'est par ici.
Vous avez des suggestions pour des bons tutos, des introductions, des astuces, des bonnes bibliotheques comme jQuery, AJAX, etc?
A vos claviers.
J'ai essayé de mettre mon code pour un petit jeu sympa mais ça passe pas sur Bladi.
T'as mis le code entre des balaises \[code\] ... \[/code\] (sans backslash avant les [ et ])?
Sans tout ça, et mon code est trop long.
Dommage. Ca aurait ete interessant comme exemple.
Je peux le découper fonction par fonction, mettre les explications à part et le programme principal, ensuite faudra recoller les morceaux, je l'ai fait à l'AFPA il y a 6 ans c'est un " Taquin " avec choix de la difficulté, mélange des morceaux aléatoire, déplacement par clic simple, il faut juste rajouter 16 images 99x100 pixels, en commençant en haut à gauche ligne par ligne.
Il marchait bien sur XP et là il marche bien sur Win 8.1.
Ma façon de programmer ça en Javascript est un peu exotique d'après les profs mais efficace et fluide.
tadawit
VIB
J'ai commencé le JS y a quelques temps , j'ai eu difficile à m'y habituer surtout pour déclarer les "variables"
j'étais habitué à mettre un "$", pour le moment je code beaucoup en PHP j'aime bien ce langage et j'utilise aussi du CSS3 j'ai acheté un livre pour JS, JQUERY AJAX mais j'ai jamais lu une page, je suis trop occupé avec PHP en programmation procédural. Il faut des années pour vraiment maîtriser ce langage...
Après JS c'est un langage basé sur la POO comme JAVA donc pour le moment je reste sur la Programmation Procédural.
J'aimerais bien apprendre un peu plus sur la POO en PHP y a moyen de faire des trucs sympas....
Si, je suis interesse! Fais voir!Alors personne ? pas besoin que je mettes mon code.
Si, je suis interesse! Fais voir!
Code:
<html>
<head>
<title> Taquin </title>
<script language="JavaScript">
var limiteX = 3; //colonnes 0 à limiteX
var limiteY = 3; //lignes 0 à limiteY
var vide = new Array(limiteX,limiteY);//position de la case vide
//le reseau de cases est fixe
//les images sont mobiles et attribuées temporairement à une case
//parties et fonctions à rajouter ici dans l'ordre
</script>
</head>
<body>
<form>
<table>
<script language="JavaScript">
for (var i =0 ; i<=limiteX ; i++){
document.write(" <tr> ");
for (var j=0 ; j<=limiteY ; j++){
var LeMorceau = papillon(j,i) ;
document.write("<td > <img id="+numero_id(i,j)+" src=' "+LeMorceau+" ' onClick='javascript:cliquer("+i+","+j+")' > </td>");
}
document.write(" </tr> </br>");
}
</script>
</table></br>
<p> Choisir la difficulté </p>
<select name="choix" >
<option value='30'> facile </option>
<option value='45'> moyen </option>
<option value='60'> difficile </option>
</select>
<input type="button" value="Valider" onClick="javascript:onMelange(choix.value)"/>
</form>
</body>
</html>Les fonctions à rajouter dans le code :
fonction papillon(a,b) attribution d'une image à une case du tableau -
fonction numero_id(a,b) attribution d'un id à une case du tableau -
fonction proximite(colonne,ligne) verification si la case cliquée est à proximité de la case vide renvoi 1 si le vide et l'image sont sur la même colonne ou 2 si le vide et l'image sont sur la même ligne , sinon 0 -
fonction echanger (colonne,ligne) echange de l'image de la case cliquée et de la case vide -
fonction cliquer(colonne,ligne) evenement click sur une image -
fonction onMelange( F ) melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide -
fonction Hazard (colonne,ligne) randomization de onMelange() sortie 0 pas de deplacement, haut 1 ,bas 2 , droite 3 , gauche 4
fonction papillon(a,b) attribution d'une image à une case du tableau -
fonction numero_id(a,b) attribution d'un id à une case du tableau -
fonction proximite(colonne,ligne) verification si la case cliquée est à proximité de la case vide renvoi 1 si le vide et l'image sont sur la même colonne ou 2 si le vide et l'image sont sur la même ligne , sinon 0 -
fonction echanger (colonne,ligne) echange de l'image de la case cliquée et de la case vide -
fonction cliquer(colonne,ligne) evenement click sur une image -
fonction onMelange( F ) melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide -
fonction Hazard (colonne,ligne) randomization de onMelange() sortie 0 pas de deplacement, haut 1 ,bas 2 , droite 3 , gauche 4
Code:
function proximite(colonne,ligne){
if (vide[0] == colonne) {
if ( vide[1] == eval( ligne + 1) || vide[1] == eval( ligne - 1)) {
return 1; //le vide et l'image sont sur la même colonne
}
else {
return 0;
}
}
else {
if (vide[1] == ligne) {
if ( vide[0] == eval( colonne + 1) || vide[0] == eval( colonne - 1)) {
return 2;//le vide et l'image sont sur la même ligne
}
else {
return 0;
}
}
else {
return 0;
}
}
}
Code:
function echanger (colonne,ligne){
var source = document.getElementById(numero_id(colonne,ligne)).src;
var neant = document.getElementById(numero_id(vide[0],vide[1])).src;
document.getElementById(numero_id(colonne,ligne)).src = neant;
document.getElementById(numero_id(vide[0],vide[1])).src = source;
vide[0] = colonne;
vide[1] = ligne;
}
Code:
function onMelange( F ) { for (var i= 1 ; i<= parseInt(F) ; i++){ var Direction = '0'; var Cx ; var Cy ; while ( Direction == '0') { Direction = Hazard( vide[0] , vide[1] ); } switch (Direction) { case '1': //deplacer le vide vers le haut Cx = vide[0]; Cy =vide[1]-1; break; case '2': //deplacer le vide vers le bas Cx = vide[0]; Cy =vide[1]+1; break; case '3': //deplacer le vide vers la droite Cx = vide[0]+1; Cy =vide[1]; break; case '4': //deplacer le vide vers la gauche Cx = vide[0]-1; Cy =vide[1]; break; } ; echanger(Cx,Cy); } }
Code:
//melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
function onMelange( F ) {
for (var i= 1 ; i<= parseInt(F) ; i++){var Direction = '0';var Cx ;var Cy ;
while ( Direction == '0') {Direction = Hazard( vide[0] , vide[1] ); }
switch (Direction) {case '1': //deplacer le vide vers le haut
Cx = vide[0];
Cy =vide[1]-1;
break;
case '2': //deplacer le vide vers le bas
Cx = vide[0];
Cy =vide[1]+1;
break;
case '3': //deplacer le vide vers la droite
Cx = vide[0]+1;
Cy =vide[1];
break;
case '4': //deplacer le vide vers la gauche
Cx = vide[0]-1;
Cy =vide[1];
break;
} ;echanger(Cx,Cy); } }
Code:
//randomization de onMelange
//valeurs colonne et ligne incluses dans 0,1,2,3
function Hazard (colonne,ligne) {
var Decision = '0'; // 0 pas de deplacement, haut 1 ,bas 2 , droite 3 , gauche 4
var R = Math.floor(Math.random() * 4 ) +1 ;
if ( R ==1 ){ Decision = '1';}
else {if ( R ==2 ){ Decision = '2';}
else {if ( R ==3 ){ Decision = '3';}
else {Decision = '4';} } }
switch (Decision){ //verification de la possibilite de deplacement selon position
case '1' :
if (ligne == 0){Decision = '0';};//deplacement vers le haut impossible
break;
case '2' :
if (ligne == limiteY){Decision = '0';};//deplacement vers le bas impossible
break;
case '3' :
if (colonne == limiteX){Decision = '0';};//deplacement vers la droite impossible
break;
case '4' :
if (colonne == 0){Decision = '0';};//deplacement vers la gauche impossible
break;
}return Decision;}J'espère qu'en réduisant j'ai pas oublié une parenthèse ou un guillemet.Merci!
Bon " Lego ".
J'ai pas encore eu le temps de l'essayer hier, mais ca promet d'etre interessant.J'espère qu'en réduisant j'ai pas oublié une parenthèse ou un guillemet.
Bon " Lego ".
Vérifie ici : http://paste2.org/01pMLYWMJ'espère qu'en réduisant j'ai pas oublié une parenthèse ou un guillemet.
Bon " Lego ".
Il faut rajouter le retour à la ligne après les commentaires marqué par les " // " dans la ligne 55.
Les fonctions doivent être rajoutées là où j'ai écrit " //parties et fonctions à rajouter ici dans l'ordre ",
l'ordre des fonctions et des variables est important car c'est une bibliothèque de fonctions qui s'appellent entre elles.
Ma version perso des DLL, je fractionnes les programmes pour alléger le code, au final la partie principale semble vide.
Le résultat d'années de programmation objet et de traitement de listes imbriquées en TurboPascal, Lisp, Basic, C#....
tadawit
VIB
Bonsoir Etre2en1,
J'ai l'impression que ton code n'est pas complet , car chez moi ça ne fonctionne pas, je viens de le lancer sur WAMP.
Aussi, essaye de bien disposer ton code, ça nous facilitera la tâche pour essayer de comprendre l’algorithme...
Et toi aussi ça peut te servir si tu souhaites le modifier.
ps: pourquoi as-tu mis ton code sur une page ? En POO sur PHP moi je crée plusieurs pages et je fais un INCLUDE dans mon index.php je trouve ça vachement plus simple et plus agréable à lire, je ne sais pas si ça existe include ou require en JS?
J'ai l'impression que ton code n'est pas complet , car chez moi ça ne fonctionne pas, je viens de le lancer sur WAMP.
Aussi, essaye de bien disposer ton code, ça nous facilitera la tâche pour essayer de comprendre l’algorithme...
Et toi aussi ça peut te servir si tu souhaites le modifier.
ps: pourquoi as-tu mis ton code sur une page ? En POO sur PHP moi je crée plusieurs pages et je fais un INCLUDE dans mon index.php je trouve ça vachement plus simple et plus agréable à lire, je ne sais pas si ça existe include ou require en JS?
Le code que j'ai créé se suffit à lui même sans environnement spécial, un simple navigateur suffit pour voir si il marche.
J'ai redisposé la partie mentionnée plus haut, la fonction " function onMelange ".
Code:
//melanger les images un peu 1, moyennement 2, beaucoup 3, on deplace la case vide
function onMelange( F ) {for (var i= 1 ; i<= parseInt(F) ; i++)
{ var Direction = '0';
var Cx ;
var Cy ;
while ( Direction == '0') {Direction = Hazard( vide[0] , vide[1] );}
switch (Direction) {case '1': //deplacer le vide vers le haut
Cx = vide[0];
Cy =vide[1]-1;
break;
case '2': //deplacer le vide vers le bas
Cx = vide[0];
Cy =vide[1]+1;
break;
case '3': //deplacer le vide vers la droite
Cx = vide[0]+1;
Cy =vide[1];
break;
case '4': //deplacer le vide vers la gauche
Cx = vide[0]-1;
Cy =vide[1];
break; } ;
echanger(Cx,Cy);}}Il comprend juste une page en htm et 16 images 100x100 pixels en JPG.
On ne peut pas faire plus simple.
Vérifie que tu as bien pris tout le code en faisant défiler les barres de scrolling à chaque fois,
si tu as un soucis, quels sont les messages d'erreur ?
Tu devrais poster la totalite du code dans l'ordre ici : http://paste2.org/