Easy-Micro


LOGICIEL Editeur HTML
Brackets

Editeur de code gratuit

Brackets est un éditeur de code gratuit créé et est maintenu par Adobe mais absolument pas WYSIWYG. Il ressemble donc à Notepad++ mais il offre l'avantage d'afficher les images du dossier de travail et propose un aperçu en direct de la page web.



Premier pas dans Brackets

  • Dans la barre latérale de gauche, sélectionnez votre dossier de travail via le menu Premier pas. Ce dernier s'ouvrira à chaque ouverture de brackets et le menu Premier pas disparaîtra.
  • Le codage des caractères est visible en bas à droite de l'écran de Brackets
  • Augmenter/Diminuer la taille de police: Ctrl++/Ctrl--
  • Changer la couleur de fond de Brackets : menu Affichage / Thèmes...
  • Ouvrir plusieurs écran : menu Affichage / Fractionnement
  • Surlignement dans l'aperçu en direct : menu affichage / Surligner la ligne active
  • Modifier/Créer une règle CSS : clic droit sur la class ou l'id : Edition rapide (bouton nouvelle règle)
  • Editeur chromatique : Ctrl + E sur un code couleur
  • Lier son serveur local à Brackets : menu fichier > Paramètre du projet

JSLint avec l'éditeur Brackets

JSLint est un outil d'analyse statique du code source JavaScript développé par Douglas Crockford. Lorsque vous enregistrez un fichier javascript dans Brackets, le correcteur JSLINT se met automatiquement en marche et vous affiche dans un panneau en bas de votre écran (le panneau des rapports), nombre d'erreur qui bloque votre code. Ce sont surtout les erreurs accompagnées d'un symbole croix blanche sur rond rouge qui gênent car elles vous empêche d'exécuter votre code javascript. Afin d'éviter ces désagréments, il faut rajouter au dessus - et parfois à l'intérieur - du code javascript, des instructions spécifique à JSLint.

Voici un exemple de fichier "mesfonctions.js" avec une syntaxe JSLint compatible. Ce code javascript affiche une liste de produit. Cette liste apparaît à partir d'un clic sur un simple lien hypertexte qui ce trouve dans la page Html
/* eslint no-unused-vars: 0*/
/* global window */

// Les 2 instructions ci-dessus permettent d'éviter les erreurs sur les fonctions non utilisées
// et déclare l'objet window comme variable globale


var mesproduits = []; // Remarquez qu'à la place de new Array(), on utilise la syntaxe littérale []

mesproduits[0] = "Pommes";
mesproduits[1] = "Poires";
mesproduits[2] = "Bananes";
mesproduits[3] = "Oranges";
mesproduits[4] = "Cerises";

// Toutes les variables sont déclarées
var i;
var madiv;
var theliste;

function affichetout() {
    "use strict"; // obligatoire pour être compatible JSLint
    var madiv = window.document.createElement("div");

    madiv.innerHTML += "<ul>";
   
    for (i = 0; i < mesproduits.length; i = i + 1) {
        
        madiv.innerHTML += "<li>" + mesproduits[i] + "</li>";
    }
    madiv.innerHTML += "</ul>";
    
    
    window.document.getElementById("theliste").appendChild(madiv);
    //window.document.body.appendChild(madiv); // autre syntaxe compatible
    //window.document.getElementById("theliste").insertBefore(madiv, theliste.firstChild); // autre syntaxe compatible
    

}

L'exemple ci-dessus fait apparaître dans le code html, une liste appelée depuis un simple lien hypertexte que voici :
<div id="theliste">
<a href="javascript:affichetout();">Afficher la liste</a>
</div>

Étapes pour que votre syntaxe javascript dans Brackets soit compatible JSLint

  • L'instruction "eslint no-unused-vars: 0" dans un commentaire permet d'éviter les erreurs sur les fonctions non utilisées dans ce document javascript
  • L'instruction "global window" dans un commentaire déclare l'objet window comme variable globale avant qu'il ne soit utilisé dans le code (idem pour l'objet document). Cela évite donc les messages d'erreurs de JSLint dans Brackets
  • L'instruction obligatoire "use strict" dans une fonction javascript oblige la déclaration des variables avant leur affectation
  • Toute les variables javascript doivent donc être préalablement déclarées avant utilisation
  • Les mauvaises tabulations, les espaces devant et derrière le signe égal et les espaces de trop sont aussi très important pour JSLint. Il faut du code propre!
  • Remarquez enfin qu'à la place de new Array(), on utilise la syntaxe littérale []. Douglas Crockford, qui a écrit JSLint, préfère éliminer le mot clé new lorsque cela est possible.

Le framework Bootstrap avec l'éditeur Brackets

Pour installer des extensions Bootstrap dans Brackets, menu Fichier > Gestionnaire d'extensions (ou via le petit bouton à droite de l'écran). Cliquer le bouton "Disponibles" et faite une recherche sur le mot Bootstrap

Brakets Extension Bootstrap starter Template

Propose un modèle (gabarit) de page web responsive prête à l'emploi avec un menu prè-inclus (incontournable). Pour utiliser cette extension, menu Fichier > New Bootstrap Templates

Brakets Extension Bootstrap 4 Snippets for Brackets

Petit bout de code (Snippets) pour afficher des boutons cliquable de toute les formes. Pour utiliser cette extension, cochez l'option "Enable RCH Bootstrap Snippets" visible en bas du menu Modifier.Dans le code, saisissez "bs4" et vous verrez apparaître la liste des bouton. Sélectionner un bouton et faîtes Entrer.

Si vous voulez modifier Bootstrap pour l'adapter à vos besoins, il vous faudra connaître LESS

Pour aller plus loin...


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro