Publicado em por Paulo Künzel

Conheça a W3.JS

Introdução

Muitos de nós conhecemos o site da w3schools que aparece em 80% das buscas de informações se tratando de HTML, CSS, Bootstrap, JavaScript, Jquery e outras tecnologias dos quais eles fornecem diversas páginas com conteúdo didático gratuito. Apesar de não ser novidade, muitas pessoas não sabem que eles criaram o W3.CSS e o W3.JS que são duas bibliotecas disponíveis para o público. A primeira tenta fornecer funcionalidades similares ao Bootstrap, que não está no escopo do que veremos, e a segunda fornece diversas pequenas funcionalidades que facilitam a interatividade das páginas mantendo tudo em HTML e no front-end.

Funcionalidades

Dentre as funcionalidades da biblioteca, podemos mencionar os controles de visualização:

  • w3.hide, w3.show, w3.toggleShow: Respectivamente oculta, exibe ou alterna a visualização de um elemento HTML
<h2>Teste</h2>
                                
<button onclick="w3.hide('h2')">Hide</button>
<button onclick="w3.show('h2')">Show</button>
<button onclick="w3.toggleShow('h2')">Toggle</button>
  • w3.removeClass, w3.addClass, w3.toggleClass: Respectivamente remove, adiciona ou alterna a existência de uma classe CSS em um elemento HTML. O toggle também permite alternar entre 2 classes ao invés de simplesmente remover/adicionar uma.
<p id="London" class="class1">City</p>
                                
<style>
    .marked{
        text-decoration: underline;
    }
    .class1{
        color: black;
    }
    .class2{
        color: red;
    }
</style>

<button onclick="w3.addClass('#London','marked')">Add Class</button>
<button onclick="w3.removeClass('#London','marked')">Remove Class</button>
<button onclick="w3.toggleClass('#London','marked')">Toggle</button>
<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>
  • w3.addStyle: Adiciona a propriedade style a um elemento HTML.
<input oninput="w3.filterHTML('#id01', 'li', this.value)">
<ul id="#id01">
    <li>Afonso</li>
    <li>Bruna</li>
    <li>Carlos</li>
    <li>Diego</li>
    <li>Emma</li>
</ul>
  • w3.sortHTML: Ordena um grupo de elementos HTML:
<button onclick="w3.sortHTML('#id01', 'li')">Sort</button>
<ul id="#id01">
    <li>Emma</li>
    <li>Afonso</li>
    <li>Diego</li>
    <li>Carlos</li>
    <li>Bruna</li>
</ul>
  • w3.slideshow: exibe elementos sequencialmente, um por vez.
<img class="nature" src="img_fjords.jpg"/> 
<img class="nature" src="img_mountains.jpg"/> 
<img class="nature" src="img_nature.jpg"/>

<script> 
    w3.slideshow(".nature"); 
</script>
  • w3.displayObject: Exibe os dados de um objeto JavaScript no HTML
<div id="id01"> {{firstName}} {{lastName}} </div> 
<script> 
    var myObject = { "firstName": "John", "lastName": "Doe" }; 
    w3.displayObject("id01", myObject); 
</script>
  • w3.includeHTML: Inclui um trecho de código HTML externo na página/componente atual.
<div w3-include-html="arquivoExterno.html"></div>
<script>
    w3.includeHTML();
</script>
  • w3.getHttpObject: Lê um arquivo do servidor
w3.getHttpObject("customers.js", funcaoExecutadaAposGet());

Vantagens e Desvantagens

Vantagens:

  • Bem mais leve que muitas outras bibliotecas
  • A maioria das funcionalidades é fácil de implementar
  • Curva de aprendizado pequena

Desvantagens:

  • Poucas funcionalidades disponíveis.
  • Não há muito material fora do site deles
  • A utilização em projetos grandes é inexistente.

Conclusão

Além de ser leve e fácil de aprender, a biblioteca W3 permite que seu projeto tenha diversas funcionalidades essenciais em um ambiente simples e de alta customização. Se você tiver um bom conhecimento dos métodos nativos do JavaScript e combinar essa biblioteca com eles, poderá manipular o DOM e trabalhar com templates e dados dinâmicos sem muitos problemas. Por outro lado, se não for bem planejado, seu projeto poderá acabar com pelo menos 2 bibliotecas que terão funcionalidade semelhantes ou você despenderá muito tempo fazendo customizações e implementações para manter um ambiente que não atende todas as necessidades do seu sistema.

Deixe um comentário