Utilisez la console JavaScript des navigateurs Concevoir un site dynamique implique de faire appel à JavaScript, langage de plus en plus populaire et puissant. Afin de donner les bons outils aux développeurs web, les navigateurs se sont peu à peu équipés de consoles de développement permettant d'entrer des instructions à la volée, avec bien souvent de l'auto-complétion, de consulter les données en mémoire ou d'explorer les fonctions et variables disponibles. Des commandes plus avancées visent à définir des points d'arrêt et d'inspecter la pile des appels. La console est un outil indispensable lorsque l'on souhaite écrire quelques lignes de JavaScript, ou bien concevoir des scripts plus évolués notamment avec des frameworks tels que jQuery. Accès La console se retrouve bien souvent dans un menu orienté pour les développeurs, à l'aide d'une touche de raccourci, ou dans des extensions spécifiques telles que Firebug pour Firefox. Aperçus Internet Explorer Google Chrome Mozilla Firefox Opera Astuces Fonctions utiles Journal console.log(fruits);
naholyr.fr Coder en Javascript dans une console Depuis l’apparition des consoles Javascript, on peut debugger plus facilement des erreurs de scripts, qui à l’époque d’IE6 & co se faisait à coup de alert(). Un chose que je ne trouve pas très répandu, c’est d’utiliser ces consoles pour coder directement, de petit morceaux de code, sans se (re)taper d’ajouter du script inline, ou un fichier juste pour avoir bonne conscience. Avec une console avancée, on peut même éditer des scripts en cours d’exécution ! A quoi ça sert de coder du Javascript dans une console ? Un exemple très simple sera plus parlant : vous voyez un paragraphe de texte et vous vous demandez combien il comporte de caractères. $0 est très simple d’utilisation, et peut être très utile. Utilisation : compter le texte d’un paragraphe Admettons que vous cherchez à compter le nombre de caractères dans une <div>, inspectez là, puis dans votre console entrez-y la ligne suivante: $0.innerHTML.length Et voilà vous avez votre résultat ! Coder plus d’un ligne jQuery.noConflict();
Just some other awesome CSS3 buttons – Red Team Design Whether you're designing a website or a web application, you'll need buttons for it. Now, with CSS3's help, it was never easier to create nice looking buttons. In this article you'll learn how to create some cool CSS3 buttons in just a few steps. View demo While last time we've created simple CSS3 gradient buttons, this time we'll build some nice CSS3 buttons with icons. In order to create the icons, this set of CSS3 buttons uses HTML entities. Minimal markup <a href="" class="button">Button</a> Simple button, with no icon. <a href="" class="button add">Add</a> Note the add class who adds the plus icon. Below you can find the styles used to create the buttons and icons: Why use entities rather than images? Faster loading, because we're talking about text here.Scalable, depending on font size.Styles as color and background are easy to update via CSS. Speed The above buttons do not use any image, automatically there's no extra HTTP image request. Scalability font: bold 1em/2em Arial, Helvetica; Update
Spec Wiki Utiliser les différents tests d'égalité JavaScript fournit trois opérations permettant de comparer des valeurs : Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations. En résumé, l'égalité faible effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison, l'égalité stricte effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents), enfin Object.is() se comportera comme l'égalité stricte sauf pour les valeurs NaN, -0 et +0 : pour Object.is(), -0 et +0 seront différents mais on aura Object.is(NaN, NaN) qui sera true. (Généralement, quand on compare NaN avec NaN en utilisant l'égalité stricte ou l'égalité faible, cela donne false afin de respecter la norme IEEE 754.). On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. L'égalité stricte avec ===Edit
Un gros Troll de plus sur Javascript Un commentaire très pertinent de Kontre m’a interpellé dernièrement : si Javascript est si pourri, pourquoi tout le monde s’y intéresse ? TD;DR :L’inertie technique. Il faut bien comprendre que PERSONNE ne s’intéresse à Javascript directement. Quand Ajax est arrivé, des mecs brillants ont rendu le Web plus interactif. Parce que c’était la seule solution dispo. Avant, personne ne s’intéressait à ce truc. Personne n’a réfléchi. L’heure du Web 2.0 a alors sonné, et là les business ont eu besoin de puissance de feu. Google a utilisé massivement les pages dynamiques, et devant le constat des performances misérables de la seule techno qu’il y avait a dispo, il a pondu chrome, et sa VM Javascript ultra performante. C’est quand Google a enfin pu donner des perfs décentes – c’est à dire celles qu’ont d’autres langage depuis une décennie – à Javascript que les gens ont envisagé de l’utiliser sur le serveur. Personne. Ruby est un langage innovant and fun. Python est un langage ergonomique and riche.
Des ressources Javascript pour mieux comprendre et domestiquer le DOM Aujourd'hui, le blog du Webdesign vous propose une liste de ressources Javascript qui vous permettons de mieux vous occuper de votre DOM ! Au programme : Modification, diff, détection de fonctionnalités, et bien d'autres choses ! Bonne découverte Qu'est-ce que le DOM ? Le Document Object Model (ou DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté. Source : Wikipedia En clair, le DOM est la vision qu'a votre navigateur du code source HTML du site où vous êtes en train de visiter, et c'est à travers la modification de ce DOM que vous pourrez interagir avec votre page en Javascript. Détecter les fonctionnalités disponibles Modernizr