Le blog du dev grincheux

Récupérer le style CSS en JavaScript

Shikiryu — Thu, 06 Jun 2013 14:44:09 +0000

Trop habitué à utiliser jQuery et son $( »).css(‘style’) ou autre $( »).is(‘:visible’), je me suis trouvé bien bête à retrouver si ma div était en display: block ou display: none…

Bien sûr, j’avais essayé de faire

document.getElementById('monelement').style.display

mais ça ne fonctionne que si le display a été modifié directement sur l’élément ou via js.

Mais comment faire quand ce style est rajouté par un fichier CSS ?

Internet Explorer (l’exception, encore une fois) utilise l’attribut currentStyle d’un élément du DOM, alors que les autres utilisent

var elementDisplay =
element.currentStyle ?
element.currentStyle.display :
window.getComputedStyle(element, null).display;

Plus d’infos sur getComputedStyle. Le null est indispensable pour firefox apparemment

Comment mettre en place un jsFiddle ?

Shikiryu — Thu, 23 May 2013 09:19:37 +0000

jsFiddle est un outil très intéressant car il permet :

de tester un bout de code javascript rapidement et de le sauvegarder (car je vous rappelle, on peut tester du javascript aussi dans la console de son navigateur ou dans « l’ardoise » de firefox),
d’inclure les librairies les plus connus très rapidement (ainsi que quelques plugins),
de tester du CSS,
d’envoyer du HTML, CSS, JS à quelqu’un pour qu’il puisse voir le contexte dans lequel vous êtes
et, enfin, tout ça en même temps

Voyons voir comment fonctionne la bête.

Trop long à lire ? Voici le résumé. Cliquez ici pour voir la version longue

Mettez votre HTML (à partir de la balise « body » et si possible uniquement la partie sur laquelle vous avez un soucis) dans la section « HTML »
Mettez votre CSS (sans balise « style ») dans la section « CSS »
Mettez votre code JavaScript ou jQuery (sans balise « script ») dans la section « JavaScript »
Choisissez votre librairie Javascript si besoin est en haut à gauche. (Si vous choisissez jQuery, généralement, vous aurez envie de mettre « onDomReady » dans le champ en dessous et de ce fait, pas besoin de mettre les
1
$(document).ready(function(){

qui est alors entré automatiquement.)
Cliquez sur « RUN » pour voir le résultat et sur « SAVE » (ou « UPDATE » par la suite) pour sauvegarder votre création.
Partagez le en copiant l’URL après avoir sauvegardé

Version longue pour bien comprendre l’outil. Revenir au résumé

L’écran se compose de 5 parties :

A gauche, une partie fixe permettant de gérer le contexte.
Par défaut, vous vous trouvez sans framework js, et tout code JS entré sera lancé sur l’évènement « onload » du body.
En faisant dérouler, vous verrez que la quantité de librairies proposée est conséquente. Vous n’êtes pas obligé de rester sur l’évènement « onload », vous pouvez aussi choisir « onDomReady » (quand le DOM est prêt) ou alors pas sur un évènement mais en début ou en fin de page avec les conséquances que cela peut provoquer

La plupart du temps, je rajoute jQuery 1.x sur l’évènement « onDomReady », ça couvre la plupart de mes besoins ou de ceux que j’aide.

Les « Fiddle Options » peuvent être utilies, principalement, si vous ne voulez pas tester en HTML5.

« External Ressources » vous permet de rajouter des fichiers CSS ou JS supplémentaires.

« Languages » que j’utilise peu, permet de passer en d’autres langages alternatifs tels que CoffeeScript

« Ajax Request » explique comment simuler AJAX sur jsFiddle. C’est assez déroutant, n’hésitez pas à regarder les exemples. Personnellement, je m’y suis frotté une fois et j’ai passé plus de temps à comprendre qu’à l’utiliser ;-).

À droite, les parties servant à l’édition.
Les 4 autres parties sont assez explicites : L’éditeur HTML, CSS et JS sont indiqués.
L’encart « Result » permet de voir le résultat une fois que vous validez vos codes et contexte en cliquant sur « RUN ». Ce bouton permet de lancer votre essai, sans toutefois sauvegarder ! Pour cela, cliquez simplement sur « SAVE ». Cela vous renverra sur une nouvelle page qui lancera votre code. Attention, chaque clic sur « SAVE » (qui devient « UPDATE » après la 1ère sauvegarde) donne une nouvelle URL incrémentée (donc 1- on peut voir que vous galérez au nombre de sauvegarde, 2- vous pouvez facilement vous y perdre en sauvegardant trop souvent). Je vous conseille de tenter avec « RUN » et de sauvegarder quand vous en avez vraiment finit.
Les 2 autres boutons sont facultatifs, le premier réaligne votre code JS (mais j’aime moyennement le style), le deuxième le valide via JSLint.

Voilà, basiquement comment s’utilise ce formidable outil. D’autres possibilités sont offertes quand vous créez un compte dessus (archivage de vos fiddle, showcase, etc.).

Fatal error: Uncaught thrown in…

Shikiryu — Mon, 06 May 2013 13:38:57 +0000

Quand vous voulez utiliser les exceptions, n’oubliez pas que quand vous la lancez (throw), il faut aussi la rattraper (catch). Pensez BASE-BALL !

Exemple :

1
2
3
4
5
6
7
8
9
10
11

class MonException extends Exception{}

class MaString {
public function __construct($string){
if(!is_string($string)){
throw MonException('oops');
}
}
}

$test = new MaString(2);

Vous voyez l’erreur là ? C’est simple, vous ne passez pas de chaîne de caractères (string) à votre constructeur, il lance donc l’exception qui n’est jamais rattrapée.

Ainsi, il faudrait faire comme ceci :

1
2
3
4
5

try{
$test = new MaString(2);
}catch(MonException $e){
// Faire quelque chose… ou pas.
}

Paf ! C’est rattrapé ! Plus d’erreurs et vous avez appris en partie à utiliser les exceptions !

Astuce pour une recherche rapide de documentation

Shikiryu — Thu, 25 Apr 2013 12:52:25 +0000

Petite astuce pour rechercher une fonction dans un langage donné sur Chrome

allez dans les paramètres de chrome (petite icone clef à molette > paramètre)
allez dans l’onglet « option de base » (ce qui est normalement le cas par défaut) dans la partie « Recherche », cliquez sur « Gérer les moteurs de recherche… »
tout en bas de la nouvelle fenêtre, entrez :
- En 1er, un nom pour votre moteur (par exemple, « jQuery »)
- En 2ème, la clef qui permettra d’accéder au moteur de recherche directement depuis votre barre d’adresse. Personnellement, j’ai mis « jquery », « php », « js »
- Enfin, entrez dans la 3ème case, l’adresse du moteur de recherche en remplaçant la donnée recherchée par %s, pour notre exemple, cela donnerait : « http://api.jquery.com/?s=%s »

Dorénavant, quand vous taperez « jquery » (notez l’espace) dans votre barre d’adresse puis le nom de la fonction, vous tomberez directement sur la bonne page !

Pour PHP, saisissez

http://php.net/search.php?pattern=%s&show=quickref

Pour MySQL, saisissez

http://search.oracle.com/search/search?q=%s&group=MySQL&x=0&y=0

Pour StackOverflow, saisissez

http://stackoverflow.com/search?q=%s

Pour Developpez, saisissez

http://www.developpez.com/recherche/?q=%s&sa.x=18&sa.y=4&cx=006424388311999799839%3A-31tnf0iuqy&cof=FORID%3A9&ie=ISO-8859-1

Si vous en avez d’autres, n’hésitez pas à rajouter en commentaire !

S’il vous plait, lisez la doc…

Shikiryu — Thu, 25 Apr 2013 12:21:59 +0000

Il m’arrive pas mal de fois sur internet de répondre à des questions sur le développement.
Il parait qu’il n’y a pas de questions bêtes mais aussi bien sur le forum de DVP, sur son chat ou sur StackOverflow, beaucoup de questions pourraient être répondues avec un simple mais néanmoins célèbre RTFM. Donc, si possible, lisez la doc avant de poser une question…

Voici donc les docs qui seront les plus utilisées dans ce blog :

Problèmes de base : $ is not a function ou $ is undefined

Shikiryu — Thu, 25 Apr 2013 08:59:58 +0000

Voici les 2 erreurs les plus basiques que l’on peut voir dans la console quand on se met à jQuery.

Comment ? Pourquoi ? Que faire ?

$ is undefined

Alternatives : jQuery is undefined

Pourquoi ce message ?
Ce message signifie que jQuery (ou son raccourci $) n’est pas encore défini – lire « présent dans la page » – quand vous essayez de l’utiliser.

Comment résoudre ce problème ?
Dans l’ordre :

Avez-vous inclus jQuery dans votre page ?
1
<script type="text/javascript" src="chemin/vers/jQuery"/>
Ce chemin est-il bon ? (Attention aux chemins absolus et relatifs)
Utilisez-vous https ou un chemin commençant par « // » sans autres indications ? Dans le 1er cas, il peut y avoir un problème de sécurité, dans le 2ème, ça ne fonctionne pas depuis le file system, tentez depuis un serveur HTTP.
Vérifiez depuis l’onglet « Network » ou « Réseau » de votre console que 1- jQuery est bien appelé et 2- que le code retour est bien OK (200, 302, etc.)

$ is not a function

Alternatives : jQuery is not a function

Pourquoi ce message ?
Ce message signifie que jQuery (ou son raccourci $) ont été redéfinis (la plupart du temps, une autre librairie utilise « $ » comme raccourci).

Comment résoudre ce problème ?
Dans l’ordre :

Pouvez-vous choisir entre l’une ou l’autre des librairies ? Si oui, n’hésitez pas et n’en gardez qu’une seule. Vous gagnerez en poids.
Si l’erreur est sur « $ », utilisez « jQuery » à la place. Il est rarement utilisé ;-). Exemple : au lieu de
1
$(document).ready(...

, vous aurez

1
jQuery(document).ready(...
Si cela ne fonctionne toujours pas (par exemple, dans le cas de l’utilisation d’un plugin), utilisez le
1
.noConflict()
Enfin, si vous n’utilisez pas de plugins, vous pouvez utiliser des raccourcis tels que
1
2
3
jQuery(document).ready(function( $ ) {
/* some code that uses $ */
})

ou

1
2
3
(function($) {
/* some code that uses $ */
})(jQuery);