--- title: Initiation au Javascipt client tags: js author: "Geoffrey Preud'homme" date: 2015-12-02 21:13:29+01:00 --- # Initiation au Javascript client ## Mise en place Nous prendrons ce code HTML de base ```html Le Club Info c'est cool !

Yo !

J'ai la classe du CI !

Pas moi, mais au moins je suis unique grâce à mon id !

Moi aussi j'ai la classe du CI, qu'est-ce que vous allez tous faire ?

```` Le code du Javascript se situe dans la balise ` ``` Du coup vous avez une rimbabelle de fonctions qui s'offrent à vous. ```js $('h1').innerText('Tadaaaa !'); $('.ci').css('background', 'pink'); // Pour référence, ce qui est dans $(...) s'appelle un sélecteur $('p').click(function clicSurP() { // Pour référence on appelle ça un évènement (clic, souris qui passe, touche du clavier appuyé...) $(this).text('Hihi, ça chatouille !'); // Ici this est une variable spéciale qui contient le contexte, ici l'élément cliqué } $('#carambar strong').animate({fontSize: "50px"}); $('body').append($('

').text('Je viens de naître !')); // $('') crée l'élément el, ce n'est pas vraiment un sélecteur. ``` Et j'en passe et des meilleurs. Vous pouvez retrouver toute la doc de jQuery [ici](http://api.jquery.com/). Bien sûr, c'est un peu la décharge, mais faire chercher `jquery savoir si un élément possède une classe` ou `jquery selecteur élement fils unique`sur Google fonctionne très bien (voire même mieux en anglais, puisqu'il y a le site StackOverflow pour ce genre de question et qu'en français vous tomberez sur des forums la plupart du temps). ## Bonus ```js $.getScript('http://www.cornify.com/js/cornify.js', function(){ cornify_add(); $(document).keydown(cornify_add); }); ```