Tutoriel pour apprendre la programmation en JavaScript

• Tester et analyser le jsfiddle d'exemple

• Forker ce jsfiddle, puis le modifier pour qu'il ne contienne plus de jQuery :

  • Fonction associée au clic sur un seul menu
  • … puis sur chaque menu (à l'aide d'une boucle)
  • Cacher les éléments .content
  • Afficher l'élément .content du .menu qui a été cliqué

Solution : jsfiddle

<div class="menu">
  <p>Menu 1</p>
  <ul class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>
<div class="menu">
  <p>Menu 2</p>
  <ul class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>
<div class="menu">
  <p>Menu 3</p>
  <ul class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>

body {
  font-family: Arial, Helvetica, sans-serif;
}
p {
  background-color: #F60;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  color: #FFFFFF;
  margin: 0;
}
ul {
  background-color: #EFEFEF;
  display: none;
  margin: 0;
}

/*
$('.menu').on('click', function() {
  $('.content').hide();
  $(this).find('.content').show();
  console.log(this);
});
*/
// on a traduit ce code depuis le composant http://ejghkejghkgjehgk
var menus = document.getElementsByClassName('menu');
for (var i = 0; i<menus.length; i++) {
  console.log(i, menus[i]);
  menus[i].onclick = function(event) {
    var contents = document.getElementsByClassName('content');
    for (var j = 0; j<contents.length; j++) {
			contents[j].style.display = 'none';
    }
    //console.log('click', event.currentTarget);
    event.currentTarget.children[1].style.display = 'block';
  };
}

Exemples de composants :

• Slider : Simple Slider ou Craftyslide
• Nombre animé : codepen, jsfiddle, ou github

codepen

<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">1000</span></div>
<div id="shiva"><span class="count">853</span></div>
<div id="shiva"><span class="count">154</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html"  target="_blank">visit Tutorial in Blog</a>
<br />

#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
.linker
{
  font-size : 20px;
  font-color: black;
}

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

jsfiddle

<script>
</script>
<div id="el"></div>

// Animate the element's value from x to y:
  $({someValue: 40000}).animate({someValue: 45000}, {
      duration: 3000,
      easing:'swing', // can be anything
      step: function() { // called on every step
          // Update the element's text with rounded-up value:
          $('#el').text(commaSeparateNumber(Math.round(this.someValue)));
      }
  });
 function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
  }

En début d'année, nous avons vu qu'il existait différents types d'interpréteurs JavaScript.

Exemples :

• la console de Chrome permet d'exécuter des instructions JavaScript de manière interactive ;
• un fichier JavaScript intégré dans une page web est exécuté dès l'ouverture de cette page dans un navigateur.

Il existe un autre moyen d'exécuter du code JavaScript : Node.js.

Node.js est un logiciel basé sur le moteur d'exécution intégré dans Google Chrome : V8. Il est constitué de deux commandes exécutables depuis le « terminal » (la console du système d'exploitation) : node et npm.

La commande node permet d'exécuter du code JavaScript, alors que npm permet de télécharger puis installer des modules (appelés packages) de manière locale (dans le dossier en cours) ou globale (=> modules accessibles depuis n'importe quel dossier).

Node.js est couramment utilisé pour développer des serveurs web (aussi appelé back-end, dans le cas de développement d'applications client-serveur telles que les applications web), mais permet aussi la réalisation de scripts ayant accès à toutes les fonctions du système d'exploitation : système de fichiers, accès illimité aux ressources de n'importe quel réseau (dont le web), etc.

npm est couramment utilisé pour installer les dépendances, c'est-à-dire les modules nécessaires par un programme JavaScript qui sera exécuté par Node.js.

À noter que la plupart des frameworks front-end actuels recommandent l'usage de la commande npm pour les télécharger sur votre machine, ainsi que vous installer les éventuels bibliothèques, composants et autres extensions dont votre application aura besoin.

Après avoir ouvert le terminal, taper node pour exécuter la version interactive de Node.js.

Pour lancer le « terminal » :

• sous Windows, appuyer sur la touche « Windows », taper « cmd » puis presser ENTRÉE.
• sous Mac, presser Cmd-Espace, taper « term » puis presser ENTRÉE.

Si la commande node n'est pas trouvée par le système, il faudra installer Node.js depuis son site officiel, puis rouvrir le terminal avant de poursuivre la manipulation.

Une fois Node.js lancé, vous pouvez taper des instructions, comme dans la console de Chrome Dev Tools.

Par exemple : tapez 1+1; pour voir le nombre 2 s'afficher en retour.

Pour quitter l'interpréteur Node.js, pressez Ctrl-C.

Nous allons d'abord créer un fichier test.js très simple, en tapant la commande suivante dans le terminal :

echo "console.log('bonjour');" >test.js

Sous Windows, vous aurez peut-être besoin de retirer les guillemets.

Ensuite, pour exécuter ce fichier, il suffit alors de taper la commande suivante depuis le terminal :

node test.js

Vous devriez alors voir s'afficher la ligne suivante :

bonjour