Questions concernant javascript

Questions concernant javascript - Javascript/Node.js - Programmation

Marsh Posté le 28-04-2016 à 16:08:29    

Bonjour,
 
 
suite à la lecture de plusieurs articles sur javasript, et du travail sur un projet concret, je me pose les questions suivantes:
 
 
1ere question:
 
 
code html
 

Code :
  1. <a class="link_to_project finger_pointer fl" href="portfolio/photoericbrenard/">
  2.                 <img class="project-pic" src="img/portfolio/thumbs/photobrenard.png" alt="site du photographe eric brenard" id="photoericbrenard"/>
  3.                 <div class="project-block_info-panel">
  4.                     <p><strong>Eric Brenard</strong><br/>photographe</p>
  5.                     <a href="" class="finos">Infos</a>
  6.                     <div class="project-tech_used txtcenter">
  7.                         <img class="project_techno inbl" id="php" title="PHP" src="./img/skills/icons/logo_vector/php.svg"/>
  8.                         <img class="project_techno inbl" id="mysql" title="MySQL" src="./img/skills/icons/logo_vector/mysql_100.svg"/>
  9.                     </div>
  10.                 </div>
  11. </a>


 
code js:

Code :
  1. namespace.sousnamespace.projectPresentation = function () {
  2. var $project_infos;
  3.             var $project_tech_used;
  4.             $('.link_to_project').on({
  6.                 mouseenter: function(){
  7.                     var $this=$(this);
  8.                     $this.children('.project-block_info-panel').hide();
  9.                     var $currentimg = $this.children('.project-pic');
  10.                     $project_infos = $this.children('.project-block_info-panel');
  12.                     var $style={
  14.                         'zIndex': '999',
  15.                         'width': '150px',
  16.                         'height': '150px',
  17.                         'position': 'absolute',
  18.                         'padding':'10px',
  19.                         'top': $currentimg.offset().top,
  20.                         'left': $currentimg.offset().left,
  21.                         'opacity': '0.9',
  22.                         'background': '#e4e4e4'
  23.                     };
  25.                     $project_infos.css($style).fadeIn(500);
  26.                     $project_infos.children('p').show();
  27.                     $project_tech_used = $project_infos.children('.project-tech_used');
  28.                     $project_tech_used.toggle(100);
  30.                 },
  31.                 mouseleave: function(){
  32.                     $project_tech_used.toggle();
  33.                     $project_infos.fadeOut(200).hide();
  36.                 }
  37.             });
  38.         };


 
le fait de rajouter le "<a href="" class="finos">Infos</a>"
bloque l'evenement mouseenter: rien ne se passe alors qu'une div ("<div class="project-block_info-panel"> ) devrait apparait au dessus du lien project avec le lien ""<a href="" class="finos">Infos</a>" visible
 
Le code focntionne très bien sans ce "<a href="" class="finos">Infos</a>"
j'ai dejà essayé d'utiliser event.target pensant que c'était du au bouillonnement mais ca ne marche pas non plus
 
aucune erreur dans firebug (meme en strict)
 
Bref wtf ?
 
 
2eme question:  
 
object javscript:
 
 

Code :
  1. var truc =
  2. {
  3. init: function(){
  4. }
  6. }


 
 
est il égale au code suivant ?
 

Code :
  1. var truc =
  2. {
  3. init = function(){
  5. }
  7. }


 
ou bien s'agit-il de 2choses différentes?
 
 
3eme question:
 
soit le code
 
 

Code :
  1. var namespace.publics.truc=
  2. {
  3. init = function(){
  5. }
  7. end = function(){
  8.  this.init()
  9. }
  11. }


 
ne focntionne pas: type error this.init() is not a function
 
autrement dit, comment accéder à une fonction depuis une autre fonction du même objet ?
 
 
Merci d'avance pour votre aide
 
Tom


Message édité par tompouss le 28-04-2016 à 16:18:50

---------------
collectionneur de pâtes thermiques
Reply

Marsh Posté le 28-04-2016 à 16:08:29   

Reply

Marsh Posté le 30-04-2016 à 16:02:51    

Pour ta question 2, c'est la première syntaxe qui est la bonne. La seconde est "valable", mais ne fonctionne pas comme tu le penses j'imagine :)
Tu définis un objet (de facon litérale) avec la syntaxe suivante :

Code :
  1. var monObject = {
  2.   valeur: 123,
  3.   maFonction: function () { console.log (this.valeur); } // dans ce cas, this pointe sur l'objet contenant et non sur le contenu de la fonction elle même
  4. }
  6. monObject.maFonction (); // ca t'affiche "123" dans la console de ton browser


 
Pour ta question 3 :

Code :
  1. var namespace.publics.truc =
  2.     {
  3.       init: function () { /**/ },
  4.       end: function(){
  5.         this.init ();
  6.       }
  7.     }
  9. namespace.publics.truc.end (); // ca fonctionne ca this pointe sur ton object namespace.publics.truc


 
mais :

Code :
  1. var namespace.publics.truc =
  2.     {
  3.       init: function () { /**/ }
  4.     }
  6. var end = function(){
  7.         this.init ();
  8.       }
  10. end (); // ca ne fonctionne pas
  11. end.call (namespace.publics.truc); // ca fonctionne, car on fait pointer this sur le bon object
  13. var bindedEnd = end.bind (namespace.publics.truc); // ca te retourne une nouvelle *fonction* qui est alors définitivement assignée ("bindée" ) à ton object
  14. bindedEnd (); // ca fonctionne


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 16-05-2016 à 19:00:04    

10 ans après :D  
 
Cool merci pour ces explications.
 
J'y vois un peu plus clair maintetnant
 
j'ai trouvé ce lien:
 
https://javascriptweblog.wordpress. [...] e-objects/
 
Tu m'étonnes que je m'embrouille avec javascript  :whistle:  
 


---------------
collectionneur de pâtes thermiques
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed