Să ne jucăm cu ceva HTML și jQuery

De la începutul anului am început să învăț câte ceva despre javascript și jQuery, librărie de javascript, tocmai pentru a-mi primi diploma de junior front-end webdev de la Emilian, șeful meu. Mi-a zis că mă pot numi „junior” pe cum am pus pe Twitter, doar după ce voi învăța cum trebuie javascript. Așadar, m-am pus pe treabă.

Voi scrie, din când în când despre coduri ce se folosesc des pe site-uri, așa că stai pe aproape.

Până atunci, ia să ne jucăm cu un cod simplu. Oare ce face? NOTA: dă click din nou pe buton ca să revină totul la cum era.

Codul folosit este acesta:

<input name="boom" value="Clic AICI pentru ceva extraordinar!"  type="submit">


<script>jQuery(document).ready(function(){
jQuery("input[name='boom']").click(function(){
if ( jQuery("input[name='boom']").hasClass("destroyed") ) {
jQuery("*").css("height","inherit").removeClass("destroyed");
jQuery("input[name='boom']").val("Clic AICI pentru ceva extraordinar!");
}
else{
jQuery("*").css("height","10px");jQuery("input[name='boom']").addClass("destroyed");
jQuery("input[name='boom']").css("height","30px !important").val("Clic din nou aici!");}
});
});
</script>

UPDATE: Radu mi-a trimis un email genial cu o serie de corecturi ce se pot face pe codul publicat de mine din care orice învățăcel de js poate prinde multe lucruri. De precizat că emailul mi-a fost trimis la repezeală și că acel cod final este o formă îmbunătățită a ceea ce am scris eu. Conținutul e mai jos:

1st thing:
format the code!
chiar dacă e o chestie greșită măcar să fie ușor de citit.


jQuery(document).ready(
  function() {
    jQuery("input[name='boom']").click(
      function(){
        if (jQuery("input[name='boom']").hasClass("destroyed")) {
          jQuery("*").css("height","inherit").removeClass("destroyed");
          jQuery("input[name='boom']").val("Clic AICI pentru ceva extraordinar!");
        }
        else{
          jQuery("*").css("height","10px");jQuery("input[name='boom']").addClass("destroyed");
          jQuery("input[name='boom']").css("height","30px !important").val("Clic din nou aici!");}
        }
    );
  }
);


2nd:
anonymous functions ain't that cool. always add a name to functions; it makes thins a bit clear and helps when debugging.


jQuery(document).ready(
  function onReadyHandler(){
    jQuery("input[name='boom']").click(
      function onClickHandler() {
        if (jQuery("input[name='boom']").hasClass("destroyed")) {
          jQuery("*").css("height","inherit").removeClass("destroyed");
          jQuery("input[name='boom']").val("Clic AICI pentru ceva extraordinar!");
        }
        else{
          jQuery("*").css("height","10px");jQuery("input[name='boom']").addClass("destroyed");
          jQuery("input[name='boom']").css("height","30px !important").val("Clic din nou aici!");
        }
      }
    );
  }
);


3rd:
Don't nest too much

function onReadyHandler(){
  $("input[name='boom']").click(
    function onClickHandler() {
      if ($("input[name='boom']").hasClass("destroyed")) {
        $("*").css("height","inherit").removeClass("destroyed");
        $("input[name='boom']").val("Clic AICI pentru ceva extraordinar!");
      }
      else{
        $("*").css("height","10px");jQuery("input[name='boom']").addClass("destroyed");
        $("input[name='boom']").css("height","30px !important").val("Clic din nou aici!");
    }
  });
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());

3rd (step 2):

function onClickHandler() {
  if ($("input[name='boom']").hasClass("destroyed")) {
    $("*").css("height","inherit").removeClass("destroyed");
    $("input[name='boom']").val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    $("*").css("height","10px");
    jQuery("input[name='boom']").addClass("destroyed"); // And always keep one instruction per line!!
    $("input[name='boom']").css("height","30px !important").val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  $("input[name='boom']").click(onClickHandler);
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());


4th:
don't repeat yourself. don't search multiple times for same controls, store them in a var with a meaningful name.

function onClickHandler() {
  var boomInput = $("input[name='boom']");

  if (boomInput.hasClass("destroyed")) {
    $("*").css("height","inherit").removeClass("destroyed");
    boomInput.val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    $("*").css("height","10px");
    boomInput.addClass("destroyed");
    boomInput.css("height","30px !important").val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  $("input[name='boom']").click(onClickHandler);
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());

4th step 2:
don't repeat yourself. don't search multiple times for same controls, store them in a var with a meaningful name.

function onClickHandler() {
  var allControls = $("*");
  var boomInput = $("input[name='boom']");

  if (boomInput.hasClass("destroyed")) {
    allControls.css("height","inherit").removeClass("destroyed");
    boomInput.val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    allControls.css("height","10px");
    boomInput.addClass("destroyed");
    boomInput.css("height","30px !important").val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  $("input[name='boom']").click(onClickHandler);
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());   


4th step 3:
don't repeat yourself. don't search multiple times for same controls, store them in a var with a meaningful name.

function onClickHandler() {
  var allControls = $("*");
  var boomInput = $("input[name='boom']");
  
  var destroyedCssClass = "destroyed"; (maybe you'll want to change the class name later, you only need to change the code in a single place)

  if (boomInput.hasClass(destroyedCssClass)) {
    allControls.css("height","inherit").removeClass(destroyedCssClass);
    
    boomInput.val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    allControls.css("height","10px");
    
    boomInput.addClass(destroyedCssClass);
    boomInput.css("height","30px !important").val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  $("input[name='boom']").click(onClickHandler);
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());


4th step 4:
move vars one level up in case they might be reused (the following example contains bad practices: there shouldn't be (such) global variables)

var boomInput;

function onClickHandler() {
  var allControls = $("*");
  var destroyedCssClass = "destroyed"; (maybe you'll want to change the class name later, you only need to change the code in a single place)

  if (boomInput.hasClass(destroyedCssClass)) {
    allControls.css("height","inherit").removeClass(destroyedCssClass);
    
    boomInput.val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    allControls.css("height","10px");
    
    boomInput.addClass(destroyedCssClass);
    boomInput.css("height","30px !important").val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  boomInput = $("input[name='boom']");
  boomInput.click(onClickHandler);
}

//(replaced jQuery with $, no need to bother with that yet)
jQuery(document).ready(onReadyHandler());


4th step 4:
removed chained functions calls; observe who gets what set and when. 

var boomInput;

function onClickHandler() {
  var allControls = $("*");
  var destroyedCssClass = "destroyed"; (maybe you'll want to change the class name later, you only need to change the code in a single place)

  if (boomInput.hasClass(destroyedCssClass)) {
    allControls.css("height","inherit")
    allControls.removeClass(destroyedCssClass); //removing the class from all controls...
    
    boomInput.val("Clic AICI pentru ceva extraordinar!");
  }
  else{
    allControls.css("height","10px");
    
    boomInput.addClass(destroyedCssClass);      // but adding the class only to boomInput. it functions correct but it looks confusing. better replace   allControls.removeClass(destroyedCssClass); with boomInput.removeClass(destroyedCssClass); 
    boomInput.css("height","30px !important")
    boomInput.val("Clic din nou aici!");
  }
}

function onReadyHandler(){
  boomInput = $("input[name='boom']");
  boomInput.click(onClickHandler);
}

jQuery(document).ready(onReadyHandler());


4th step 5:
back to using nicely named vars instead of "magic" values. 

var boomInput;
var destroyedCssClass = "destroyed";
var boomLabelDestroyed = "Clic AICI pentru ceva extraordinar!";  
var boomLabelNotDestroyed = "Clic din nou aici!";


function onClickHandler() {
  var allControls = $("*");

  if (boomInput.hasClass(destroyedCssClass)) {
    allControls.css("height","inherit")
    allControls.removeClass(destroyedCssClass); //removing the class from all controls...
    
    boomInput.val(boomLabelDestroyed);
  }
  else{
    allControls.css("height","10px");
    
    boomInput.addClass(destroyedCssClass);      // but adding the class only to boomInput. it functions correct but it looks confusing. better replace   allControls.removeClass(destroyedCssClass); with boomInput.removeClass(destroyedCssClass); 
    boomInput.css("height","30px !important")
    boomInput.val(boomLabelNotDestroyed);
  }
}

function onReadyHandler(){
  boomInput = $("input[name='boom']");
  boomInput.click(onClickHandler);
}

jQuery(document).ready(onReadyHandler());

4th step 6:
find a better notation option for numbered lists. 4th step 6 really sounds silly.

4th step 7:
use """classes""" instead of stand alone functions. TBD