Se você é novo no mundo do desenvolvimento para a web, provavelmente passará bastante tempo aprendendo a construir sites estáticos, com HTML, CSS e JavaScript.

Você pode, então, começar a aprender como usar frameworks populares, como React, VueJS ou Angular.

Porém, depois de experimentar algumas ideias novas e executar alguns sites localmente, você pode se perguntar como realmente implantar ou fazer o deploy de seu site ou aplicação. Ocorre que, às vezes, pode ser difícil saber por onde começar.

Pessoalmente, acho que executar um servidor do Express hospedado no Heroku é uma das maneiras mais simples de começar. Este artigo mostrará como fazer isso.

O Heroku é uma plataforma de nuvem que suporta diversas linguagens de programação e frameworks diferentes.

Este não é um artigo patrocinado – é claro que existem muitas outras soluções disponíveis, como:

• Digital Ocean
• Amazon Web Services
• Azure
• Google Cloud Platform
• Netlify
• ZEIT Now

Confira todos eles e veja qual se adapta melhor às suas necessidades.

Pessoalmente, achei o Heroku o mais rápido e fácil de usar. Ele é "pronto para uso". A versão gratuita é um pouco limitada em termos de recursos. No entanto, posso recomendar com confiança para testes.

Nota da tradução: ao final de 2022, o Heroku encerrou o tier gratuito para implantação. Os planos mensais básicos por lá, no momento desta tradução, custam 5 dólares ao mês.

Este exemplo hospedará um site simples usando um servidor do Express. Aqui estão os passos principais:

1. Configurar o Heroku, o Git e o npm
2. Criar um servidor do Express.js
3. Criar arquivos estáticos
4. Implantar no Heroku

Deve levar cerca de 25 minutos no total (ou mais, se você quiser gastar mais tempo nos arquivos estáticos).

Este artigo pressupõe que você já saiba:

• O básico de HTML, CSS e JavaScript
• Uso básico da linha de comando
• Git de nível iniciante para controle de versão

Você pode encontrar todo o código neste repositório.

Configurando

O primeiro passo em qualquer projeto é configurar todas as ferramentas que você sabe que vai precisar.

Você vai precisar ter:

• Node e npm instalados em sua máquina local (leia como fazer isso aqui – em inglês)
• Git instalado (leia este guia – em inglês)
• O CLI do Heroku instalado (aqui está como fazer isso – em inglês)

1. Crie um diretório e inicialize um repositório Git

A partir da linha de comando, crie um diretório de projeto e entre nesse diretório.

$ mkdir lorem-ipsum-demo
$ cd lorem-ipsum-demo

Agora que você está na pasta do projeto, inicialize um novo repositório do Git.

⚠️Esse passo é importante porque o Heroku depende do Git (texo em inglês) para implantar o código da sua máquina local em seus servidores na nuvem. ⚠️

$ git init

Como etapa final, você pode criar um arquivo README.md para editar posteriormente.

$ echo "Edit me later" > README.md

2. Faça login na CLI do Heroku e crie um projeto

Você pode fazer login no Heroku usando a CLI (interface de linha de comando) do Heroku. Você precisará ter uma conta no Heroku para fazer isso.

Existem duas opções aqui. Por padrão, o Heroku permite que você faça login por meio do navegador da web. Adicionar a flag -i permite que você faça login por meio da linha de comando.

$ heroku login -i

Agora, você pode criar um projeto no Heroku. Eu chamei o meu de lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Nomeando seu projeto:

• O Heroku gerará um nome aleatório para o seu projeto se você não especificar um no comando.
• O nome fará parte do URL que você pode usar para acessar seu projeto. Assim, escolha um de que você goste.
• Isso também significa que você precisa escolher um nome de projeto único que ninguém mais tenha usado.
• É possível renomear seu projeto posteriormente (não se preocupe muito em encontrar o nome perfeito agora).

3. Inicialize um novo projeto com o npm e instale o Express.js

Em seguida, você pode inicializar um novo projeto com o npm criando um arquivo package.json. Use o comando abaixo para fazer isso.

⚠️Essa etapa é crucial. O Heroku depende de você fornecer um arquivo package.json para saber que este é um projeto do Node.js ao criar sua aplicação.⚠️

$ npm init -y

Em seguida, instale o Express. O Express é um framework de servidor amplamente utilizado para o NodeJS.

$ npm install express --save

Finalmente, você está pronto para começar a programar!

Criando um servidor do Express simples

O próximo passo é criar um arquivo chamado app.js, que executa um servidor do Express localmente.

$ touch app.js

Esse arquivo será o ponto de entrada para a aplicação quando estiver pronta. Isso significa que o único comando necessário para iniciar a aplicação será:

$ node app.js

Primeiro, no entanto, você precisa escrever algum código no arquivo.

4. Edite o conteúdo do app.js

Abra o app.js no seu editor favorito. Escreva o código mostrado abaixo e clique em salvar.

// Crie uma aplicação do express
const express = require("express")
const app = express()

// Use o middleware express-static
app.use(express.static("public"))

// Defina a primeira rota
app.get("/", function (req, res) {
  res.send("<h1>Hello World!</h1>")
})

// Inicie o servidor escutando por solicitações
app.listen(process.env.PORT || 3000, 
	() => console.log("Server is running..."));

Os comentários devem ajudar a indicar o que está acontecendo. Vamos, porém, dividir rapidamente o código para entendê-lo melhor:

• As primeiras duas linhas simplesmente requerem o módulo do Express e criam uma instância da aplicação.
• A próxima linha requer o uso do middleware express.static. Ele permite que você sirva arquivos estáticos (como HTML, CSS e JavaScript) do diretório que você especificar. Nesse caso, os arquivos serão servidos de uma pasta chamada public.
• A próxima linha usa app.get() para definir uma rota de URL. Quaisquer solicitações de URL para o URL raiz serão respondidas com uma mensagem de HTML simples.
• A parte final inicia o servidor. Ele verifica qual porta o Heroku usará ou, se você estiver executando localmente, a porta padrão será 3000.

⚠️O uso de process.env.PORT || 3000 na última linha é importante para implantar sua aplicação com sucesso. ⚠️

Salve app.js e inicie o servidor com:

$ node app.js

Você, então, pode visitar localhost:3000 em seu navegador e verificar se o servidor está em execução.

Crie seus arquivos estáticos

O próximo passo é criar seus arquivos estáticos. Esses são os arquivos HTML, CSS e JavaScript que você fornecerá sempre que um usuário visitar seu projeto.

Lembre-se de que, no app.js, você informou ao middleware express.static para servir arquivos estáticos a partir do diretório public.

O primeiro passo, é claro, é criar esse diretório e os arquivos que ele conterá.

$ mkdir public
$ cd public
$ touch index.html styles.css script.js

5. Edite o arquivo HTML

Abra o arquivo index.html no seu editor de texto preferido. Essa será a estrutura básica da página que você fornecerá aos seus visitantes.

O exemplo abaixo cria uma página inicial simples para um gerador de Lorem Ipsum, mas você pode ser tão criativo quanto quiser aqui.

<!DOCTYPE html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
  <p>How many paragraphs do you want to generate?</p>
  <input type="number" id="quantity" min="1" max="20" value="1">
  <button id="generate">Generate</button>
  <button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

6. Edite o arquivo CSS

A próxima etapa é editar o arquivo styles.css. Certifique-se de que ele esteja vinculado ao seu arquivo HTML.

O CSS abaixo é para o exemplo do Lorem Ipsum. Novamente, sinta-se à vontade para ser tão criativo quanto desejar.

h1 {
	font-family: 'Alegreya' ;
}

body {
	font-family: 'Source Sans Pro' ;
	width: 50%;
	margin-left: 25%;
	text-align: justify;
	line-height: 1.7;
	font-size: 18px;
}

input {
	font-size: 18px;
	text-align: center;
}

button {
	font-size: 18px;
	color: #fff;
}

#generate {
	background-color: #09f;
}

#copy {
	background-color: #0c6;
}

7. Edite o arquivo JavaScript

Por fim, você pode querer editar o arquivo JavaScript script.js. Isso permitirá tornar sua página mais interativa.

O código abaixo define duas funções básicas para o gerador de Lorem Ipsum. Sim, eu usei JQuery - é rápido e fácil de trabalhar.

$("#generate").click(function(){
	var lorem = $("#lorem");
	lorem.html("");
	var quantity = $("#quantity")[0].valueAsNumber;
	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
	for(var i = 0; i < quantity; i++){
		lorem.append("<p>"+data[i]+"</p>");
	}
})

$("#copy").click(function() {
	var range = document.createRange();
	range.selectNode($("#lorem")[0]);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand("copy");
	window.getSelection().removeAllRanges();
	}
)

Observe que, aqui, a lista de data foi cortada para facilitar a exibição. Na aplicação real, é uma lista muito mais longa de parágrafos completos. Você pode ver o arquivo completo no repositório ou consultar aqui a fonte original.

Implantando sua aplicação

Após escrever seu código estático e verificar se tudo funciona conforme o esperado, você pode se preparar para implantar no Heroku.

No entanto, há mais algumas coisas a fazer.

8. Crie um Procfile

O Heroku precisará de um Procfile para saber como executar sua aplicação.

Um Procfile é um "arquivo de processo" que informa ao Heroku qual comando executar para gerenciar um determinado processo. Neste caso, o comando dirá ao Heroku como iniciar seu servidor na web.

Use o comando abaixo para criar o arquivo.

⚠️Este é um passo importante, pois sem um Procfile, o Heroku não pode colocar seu servidor on-line. ⚠️

$ echo "web: node app.js" > Procfile

Observe que o Procfile não possui uma extensão de arquivo (e.g., ".txt", ".json").

Além disso, observe como o comando node app.js é o mesmo usado localmente para executar o servidor.

9. Adicione e faça commit dos arquivos no Git

Lembre-se de que você iniciou um repositório Git ao configurar. Talvez você já tenha adicionado e feito commit dos arquivos conforme avançava.

Antes de implantar no Heroku, certifique-se de adicionar todos os arquivos relevantes e fazer commit deles.

$ git add .
$ git commit -m "pronto para o deploy"

O último passo é fazer push para a branch master do Heroku.

$ git push heroku master

Você deve ver a linha de comando imprimir uma série de informações enquanto o Heroku cria e implanta sua aplicação.

A linha a ser procurada é: Verifying deploy... done.

Isso mostra que a criação foi bem-sucedida.

Agora você pode abrir o navegador e visitar nome-do-seu-projeto.herokuapp.com. Sua aplicação será hospedada na web para todos visitarem!

Breve resumo

Abaixo estão os passos a serem seguidos para implantar uma aplicação do Express simples no Heroku:

1. Crie um diretório e inicialize um repositório do Git
2. Faça login na CLI do Heroku e crie um projeto
3. Inicialize um novo projeto com o npm e instale o Express.js
4. Edite o conteúdo de app.js
5. Edite os arquivos estáticos HTML, CSS e JavaScript
6. Crie um Procfile
7. Adicione e faça commit no Git, depois faça push para a branch master do Heroku

O que verificar se a aplicação não estiver funcionando

Às vezes, apesar das melhores intenções, os tutoriais na Internet não funcionam exatamente como você esperava.

Os passos abaixo devem ajudar a depurar alguns erros comuns que você pode encontrar:

• Você inicializou um repositório do Git na pasta do seu projeto? Verifique se você executou git init. O Heroku depende do Git para implantar o código da sua máquina local.
• Você criou um arquivo package.json? Verifique se você executou npm init -y. O Heroku requer um arquivo package.json para reconhecer que é um projeto do Node.js.
• O servidor está sendo executado? Verifique se seu Procfile usa o nome de arquivo correto para iniciar o servidor. Verifique se você tem: web: node app.js em vez de web: node index.js.
• O Heroku sabe em qual porta escutar? Verifique se você usou app.listen(process.env.PORT || 3000) em seu arquivo app.js.
• Seus arquivos estáticos têm erros? Verifique-os executando localmente e veja se há algum bug.

Agradeço por ter chegado até aqui. Boa programação para você!

Escrito por: Yogi

Muitas vezes em seu código, você precisa percorrer um array de números, strings ou objetos. Existem muitas maneiras de se fazer isso. Este tutorial tem como objetivo ensinar todas elas para que você se torne um mestre em "laços de repetição em JavaScript".

1. O laço for

O laço for é a maneira mais básica de fazer um laço em seu código em JavaScript. É muito útil executar um bloco de código várias vezes. Ele usa um contador, cujo valor é inicializado primeiro e, em seguida, seu valor final é especificado.

O contador é aumentado em um valor específico toda vez que o laço é executado. O laço for verifica se o contador está dentro dos limites (entre o valor inicial e o valor final) e termina quando o valor do contador ultrapassa o valor final.

Mostrarei aqui alguns exemplos.

a. Percorrendo um array

No código abaixo, estou percorrendo todos os números em um array e imprimindo cada um deles na janela do console.

var numeros = [10, 20, 30, 40, 50];
for (var i = 0; i < numeros.length; i++) {
    console.log(numeros[i]);
}

Da mesma forma, você também pode percorrer arrays de strings.

b. Percorrendo elementos do DOM

Imagine que você deseja localizar e colorir de vermelho todas as âncoras na página. Então, aqui, você também pode usar o laço for, assim:

var elementos = document.querySelectorAll("a");
for (var i= 0; i < elementos.length; i++) {
    elementos[i].style.color = "red";
}

Explicação: Primeiro, eu peguei todas as âncoras em um array usando document.querySelectorAll("a"). Depois, eu os percorri e mudei a cor deles para vermelho.

No site da W3Schools, eu executei o código acima no console do navegador e veja o que aconteceu:

Observação: o jQuery também tem um método muito bom de repetição, o método Each (texto em inglês), que auxilia a percorrer arrays, objetos, elementos do DOM, JSON e XML com facilidade. Se estiver usando o  jQuery no seu site, considere usá-lo ao fazer um laço de repetição.

2. O laço "For In"

O laço for in é usado para percorrer as propriedades de um objeto/array sem usar um 'contador'. Portanto, é uma versão simplificada do laço for.

O bloco de código dentro do laço será executado uma vez para cada propriedade.

a. Percorrendo as propriedades de um objeto

Tenho um objeto que contém algumas propriedades e usarei o laço for in para pesquisar cada propriedade e seu valor.

O código abaixo imprime todas as propriedades e seus valores na janela do console.

var pessoa = { fname: "Nick", lname: "Jonas", age: 26 };
for (var x in pessoa) {
    console.log(x + ": " + pessoa[x])
}

b. Percorrendo dados em JSON

JSON é um formato muito popular para transmitir objetos de dados que consistem em pares atributo-valor e tipos de dados de array. Os sites usam JSON para compartilhar suas informações com sites externos. Agora, mostrarei como extrair dados de um JSON.

Imagine que eu tenha algum JSON contendo algumas informações, conforme mostrado abaixo:

jsonData: {
um: [11, 12, 13, 14, 15],
dois: [21, 22, 23],
tres: [31, 32]
}

O JSON tem um nó raiz chamado 'jsonData'. Ele contém 3 nós – 'um', 'dois', 'tres'. Os nós também são chamados de chaves.

O código abaixo mostra como extrair informações do JSON usando o laço for in:

var json = {
jsonData: {
um: [11, 12, 13, 14, 15],
dois: [21, 22, 23],
tres: [31, 32]
}
};

for (var key in json.jsonData) {
    for (var key1 in json.jsonData[key]) {
        console.log(json.jsonData[key][key1])
    }
}

Explicação: Existem 2 laços for in no código acima - o laço externo e o interno.

O laço externo é executado 3 vezes e cobre os nós 'um', 'dois' e 'tres'.

O laço interno abrange todos os valores dentro do node selecionado, ou seja, os valores dentro dos arrays 'um', 'dois' e 'tres'.

Execute o código na sua página web ou na janela do console do seu navegador, e você verá todos os valores dos nós impressos, como na imagem abaixo:

Indo um pouco mais fundo no JSON

O mesmo JSON pode ser expresso colocando [] para conter os 3 nós:

jsonData: [{
um: [11, 12, 13, 14, 15]
}, {
dois: [21, 22, 23]
}, {
tres: [31, 32]
}]

Agora, vou usar uma combinação de laços for e for in para extrair todas as informações deste JSON. O código abaixo faz isso funcionar:

var json = {
jsonData: [{
um: [11, 12, 13, 14, 15]
}, {
dois: [21, 22, 23]
}, {
thes: [31, 32]
}]
};

for (var i = 0; i < json.jsonData.length; i++) {
    for (var key in json.jsonData[i]) {
        for (var j = 0; j < json.jsonData[i][key].length; j++) {
            console.log(json.jsonData[i][key][j])
        }
    }
}

3. O laço "while"

O laço while tem uma condição especificada nele. Ele verifica a condição e executa o bloco de código enquanto a condição for verdadeira. Observe que o laço while não possui um contador como o laço for.

a. Percorrendo um elemento de tabela HTML

Suponha que eu tenha uma tabela HTML que mostre os preços de diferentes produtos. Essa tabela HTML se assemelha a da imagem abaixo:

Você pode ver que esta tabela não mostra o preço total dos produtos. Portanto, se houver um requisito para você mostrar o preço total, você deverá percorrer todos os preços e mostrar o total no rodapé da tabela. É assim que você vai fazer.

Adicione o código da tabela HTML à sua página da web:

<table id="priceTable">
    <tr>
        <th>Id</th>
        <th>Nome do produto</th>
        <th>Preço do produto</th>
    </tr>
    <tr> 
        <td>1</td>
        <td>Camisas</td>
        <td>49.99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Calças</td>
        <td>55.50</td>
    </tr>
    <tr> 
        <td>3</td>
        <td>Meias</td>
        <td>20</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Calçados</td>
        <td>99</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Jaquetas</td>
        <td>88.90</td>
    </tr>
</table>

Depois, adicione o CSS para dar um design adequado à tabela em html:

<style>
    #priceTable {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       border-collapse: collapse;
       width: 100%;
    }

        #priceTable td, #priceTable th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        #priceTable tr {
            background-color: #f2f2f2;
        }

        #priceTable th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
        }
</style>

Agora, percorra a tabela com o laço while e calcule a soma de todos os produtos. Adicione o código JavaScript abaixo à sua página da web que faz isso funcionar:

var table = document.getElementById("priceTable");

var i = 1;
var soma = 0;
while (i < table.rows.length) {
    soma += parseFloat(table.rows[i].cells[2].innerHTML)
    i++;
}

var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = "Preço Total";
cell3.innerHTML = soma;

Explicação: Primeiro, eu pego a referência da tabela usando var table = document.getElementById("priceTable"). Adicionei 2 variáveis ​​chamadas 'i' e 'soma'. A variável 'i' é a variável condicional do laço while, enquanto 'soma' continuará adicionando o preço de cada produto a ela.

Ao executar o laço while para o valor da variável 'i' de 1 a (total de linhas -1). Isso pega o total de linhas na tabela por table.rows.length e adiciona à condição do laço while:

while (i < table.rows.length) {
  //…
}

Observação: A tabela tem 6 linhas, do índice 0 ao 5, e cada linha tem 3 colunas, do índice 0 ao 2. Eu executei especificamente o laço do valor da variável 'i' de 1 e não 0. Isso ocorre porque no índice 0 da linha na tabela está o nome da coluna (de que eu não preciso).

Dentro do laço while, continuei adicionando os valores do preço de cada produto à variável soma assim: soma += parseFloat(table.rows[i].cells[2].innerHTML) e, no final, aumentei o valor de 'i ' por 1.

Por exemplo, quando o valor 'i' é 1, então table.rows[1] me dá a primeira linha (primeiro elemento 'tr'). Da mesma forma, table.rows[1].cells[2] fornecerá o valor da coluna de preço (elemento preço 'td') da primeira linha.

Quando o laço termina, adiciono uma nova linha à tabela no final. Dentro desta linha, estou adicionando as 3 colunas — 0º índice, 1º índice e 2º índice. Por fim, estou mostrando a string 'total' na 1ª coluna e o preço total contido na variável 'soma' na 2ª coluna.

O código que faz a adição desta nova linha é:

var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = "Total Price";
cell3.innerHTML = soma;

O table.insertRow(i) adicionará uma 6ª linha porque o valor da variável 'i' é 6 no momento em que o laço while termina.

As colunas (elemento 'td') são adicionadas a esta nova linha por row.insertCell(0), row.insertCell(1), row.insertCell(2).

Eu mostro um valor dentro da coluna por:

cell2.innerHTML = "Total Price";
cell3.innerHTML = soma;

O código JavaScript acima criará uma nova linha contendo o preço total do produto. Agora a tabela ficará assim:

b.  Loop infinito

Abaixo está o loop infinito na instrução While:

var infiVal = true;

while (infiVal) {
  // seu código
}

Observação: loops infinitos podem travar o navegador, portanto, é necessário executar o laço em um intervalo de alguns milissegundos. Você pode usar o método do JavaScript setInterval para executar uma determinada função a cada 1.000 milissegundos. Veja o código abaixo:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  // seu código
}

4. O laço "do while"

No laço do while, a condição a ser verificada é fornecida no final e, portanto, o laço é executado pelo menos uma vez, mesmo que a condição não seja verdadeira. Veja o código abaixo que dará uma mensagem 'Olá' na caixa de alerta, mesmo que a condição seja falsa desde o início (pois o valor da variável 'i' é sempre maior que 1).

var i = 2;

do {
    alert("Olá");
    i++;
}
while (i < 1);

a. Percorrendo o XML

Agora usarei o laço do while para saber como percorrer o XML e extrair dados dele. Eu tenho um arquivo XML chamado 'XMLFile1.xml' com esse conteúdo:

<?xml version="1.0" encoding="utf-8" ?>
<cities>
    <city>Washington DC</city>    
    <city>Islamabad</city>
    <city>Beijing</city>
    <city>Tokyo</city>
</cities>

Vou usar AJAX para ler esse arquivo XML e, em seguida, percorrê-lo com o laço do while. O código abaixo imprime todos os nomes das cidades (dados no arquivo XML) na janela do console.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "XMLFile1.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));
    var i = 0;  
    
    do {
        console.log(cityNames[i].innerHTML);
        i++;
    }
    while (i < cityNames.length);
}

Explicação: Criei um objeto XMLHttpRequest para fazer a chamada AJAX. Quando o arquivo XML é lido, o evento chamado onreadystatechange é gerado, veja o código abaixo:

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};

Nesse evento, estou chamando minha função personalizada chamada myFunction(). Aqui, armazeno o conteúdo XML dentro de uma variável chamada xmlDoc:

var xmlDoc = xml.responseXML;

Converti todos os nomes das cidades em um array:

var cidadeNomes = Array.from(xmlDoc.getElementsByTagName("cidade"));

Por fim, percorro esse array de cidades usando o laço do while e imprimo na janela do console o nome de cada cidade:

var i = 0;
do {
    console.log(cidadeNomes[i].innerHTML);
    i++;
}
while (i < cidadeNomes.length);

A imagem abaixo mostre a saída impressa no console:

5. O método ".forEach()"

A versão ES6 tem um método chamado .forEach() para percorrer um array de elementos. Você o achará muito útil ao lidar com arrays.

a. Percorrendo um array com o método .forEach():

Nessa situação, percorro os elementos de um array com o método .forEach() e imprimo o índice e o valor de cada elemento na janela do console. Veja o código abaixo:

var nomes = ["jerry", "tom", "pluto", "micky", "mini"];
nomes.forEach(Function1);

function Function1(currentValue, index) {
    console.log("Indice atual do array é: " + index + " :: Valor é: " + currentValue);
}

Function1 é o nome da função que é chamada para cada elemento do array. No meu caso, a função será chamada 5 vezes. Ela aceita 2 parâmetros — 'index' e 'value' do elemento atual.

Note que você pode converter um objeto em um array usando o método Array.from().

var linksArr = Array.from(links);

Conclusão

Obrigado pela leitura deste tutorial. Espero que tenha ensinado algo novo sobre como lidar com laços em JavaScript. Agora, você pode aplicar qualquer uma de suas táticas de uso dos laços favoritas, descritas neste tutorial, em seu projeto da web.

Publiquei outro tutorial no freeCodeCamp, caso você queira vê-lo também: How to create a login feature with Bootstrap Modal and jQuery AJAX

Mais uma vez, obrigado e bons estudos!

O que significa fork?

Fork, ou bifurcação, é quando gostamos tanto do repositório de alguém e gostaríamos de tê-lo em nossa conta do GitHub, nós o copiamos para que possamos trabalhar com ele separadamente.

Quando copiamos um repositório, obtemos uma versão desse repositório inteiro com todo o seu histórico. Após a cópia, podemos fazer o que quisermos sem afetar a versão original.

O que é um pull request?

O pull request (algo como 'solicitação de envio', em português) é a maneira como contribuímos para projetos de grupo ou projetos de código aberto (open source).

Por exemplo, um usuário Harry copia um repositório de ThanoshanMV e faz alterações nesse repositório. Agora, Harry pode fazer um pull request para ThanoshanMV, mas cabe a ThanoshanMV aceitá-lo ou recusá-lo. É como dizer: "ThanoshanMV, você poderia aceitar minhas alterações, por favor?"

O que significa contribuir

Podemos contribuir para um projeto open source de diversas maneiras, além do código. Algumas dessas maneiras são descritas abaixo.

Como diz o guia inicial de hacktitude da empresa de tecnologia 99xtechnology, podemos contribuir para um projeto open source das seguintes maneiras:

1. Design: você pode criar os layouts de um projeto para melhorar sua usabilidade, melhorar a navegação e o menu do projeto com base em programas de pesquisa do usuário, criar arte para logotipos ou camisetas e fornecer guias de estilo para o projeto.
2. Redação: você pode escrever e melhorar a documentação do projeto ou traduzir a documentação, iniciar um boletim informativo (newsletter) para o projeto ou escrever tutoriais para ele, selecionar destaques da lista de discussão ou analisar uma pasta de exemplos mostrando como os projetos são usados.
3. Organização: você pode vincular issues duplicadas, sugerir novos labels para as issues, sugerir o fechamento de issues antigas abertas e fazer perguntas sobre issues abertas recentemente para levar a discussão adiante.
4. Ajude os outros: responda a perguntas sobre issues em aberto, revise o código nos envios de outras pessoas e ofereça-se para orientar outro colaborador.
5. Código: ajude a resolver issues em aberto, pergunte se você pode fornecer novos recursos e melhorar ferramentas e testes.

Vamos fazer nosso primeiro pull request!

Se você não está muito familiarizado com o Git e o GitHub, revise o seguinte material: The beginner’s guide to Git & GitHub (texto em inglês).

1. Faça uma cópia do repositório

Primeiro, copie o (faça o fork do) repositório. Basta clicar no botão Fork no topo da página. Isso vai criar uma versão de todo o repositório na sua conta.

2. Clone o repositório

Quando o repositório estiver na sua conta, clone-o em sua máquina para trabalhar com ele localmente.

Para clonar, clique no botão Clone e copie o link.

Abra o terminal e execute o seguinte comando. Ele clonará o repositório localmente.

$ git clone [link do github]

Agora, configuramos uma cópia da branch master do repositório principal no projeto on-line.

Precisamos ir para esse diretório clonado. Para isso, executamos este comando:

$ cd [NOME DO REPOSITORIO]

3. Crie uma branch

É uma boa prática criar uma outra branch ao trabalhar com repositórios, seja em um pequeno projeto ou contribuindo para o trabalho de um grupo.

O nome da branch deve ser curto e deve refletir o trabalho que estamos fazendo

Agora crie uma branch usando o comando git checkout:

$ git checkout -b [Nome da branch]

4. Faça mudanças e faça o commit delas

Faça alterações essenciais no projeto e salve-o.

Em seguida, execute  git status e você verá as alterações.

Adicione essas alterações na branch que você acabou de criar usando o comando  git add:

$ git add .

Agora, confirme essas alterações usando o comando git commit :

$ git commit -m "Adicionando um artigo à semana 02 dos artigos da semana."

5. Faça o push das mudanças para o GitHub

Para enviar as alterações para o GitHub, precisamos identificar o nome do repositório remoto.

$ git remote

O nome deste repositório remoto é "origin".

Depois de identificar o nome do repositório remoto, podemos enviar/fazer um push com segurança essas alterações para o GitHub.

git push origin [Nome da branch]

6. Criando o pull request

Vá para o seu repositório no GitHub e você verá um botão dizendo "Compare & pull request". Clique nele.

Forneça os detalhes necessários sobre o que você fez (você pode fazer referência às issues usando "#"). Agora, envie o pull request.

Parabéns! Você acaba de fazer o seu primeiro pull request.🎉

Se seu pull request for aceito, você receberá um e-mail.

7. Sincronize a sua versão com a branch master

Antes de enviar qualquer pull request para o repositório original, você deve sincronizar seu repositório com o original.

Mesmo se você não enviar um pull request para o repositório original, é melhor sincronizar seu repositório com o original, pois alguns recursos adicionais e correções de bugs podem ter sido feitos desde que você o copiou.

Siga estas etapas para atualizar/sincronizar essas alterações em sua branch master:

1. Primeiro, verifique em qual branch você está.

$ git branch

Ele listará todas as branches e indicará a branch atual ou ativa em verde.

2. Alterne para a branch master.

$ git checkout master

3. Adicione o repositório original como um repositório upstream.

Para extrair as alterações do repositório original para sua versão copiada, você precisa adicionar o repositório Git original como um repositório upstream.

$ git remote add upstream [HTTPS]

Aqui, [HTTPS] é o URL que você deve copiar do repositório do proprietário.

4. Faça o fetch/obtenha o repositório.

Busque todas as alterações do repositório original. Os commits para o repositório original serão armazenados em uma branch local chamada upstream/master.

$ git fetch upstream

5. Faça o merge/mescle as branches.

Mescle as alterações do upstream/master em sua branch master local. Isso fará com que a branch master do seu fork seja sincronizada com o repositório upstream sem perder suas alterações locais.

$ git merge upstream/master

6. Faça o push/envie mudanças ao GitHub

Neste ponto, sua branch local é sincronizada com a branch master do repositório original. Se você deseja atualizar o repositório do GitHub, precisa enviar suas alterações.

$ git push origin master

Observação: depois de sincronizar o fork da sua branch master copiada, você pode remover esse repositório remoto, se desejar, mas você também precisará atualizar/sincronizar seu repositório no futuro, então é melhor mantê-lo.

$ git remote rm [Nome remoto]

8. Delete a branch desnecessária

As branches são criadas para um propósito especial. Uma vez que esse objetivo é alcançado, essas branches não são necessárias, então você pode excluí-las.

$ git branch -d [Nome da branch]

Você também pode excluir a versão dele no GitHub.

git push origin --delete [Nome da branch]

Conclusão

O GitHub é uma ferramenta poderosa para controlar o histórico de versões. Todos podem contribuir com projetos open source fazendo pull requests. Contribuições nem sempre são código – existem outras maneiras de contribuir também.

Por fim, devo dizer que você não deve se preocupar se seus pull requests forem rejeitados. Os mantenedores gastam muito tempo melhorando seus projetos e sabem muito mais sobre seus projetos do que nós. Portanto, não se preocupe se sua solicitação não for mesclada.

Mantenha-se forte, mantenha-se positivo e nunca desista.
― Roy T. Bennett, The Light in the Heart

Este artigo foi publicado originalmente no Medium.

Você pode entrar em contato com o autor e se conectar com ele pelo Twitter.
Continue contribuindo com o mundo open source!

O atributo "src" em uma tag é o caminho para um arquivo ou recurso externo que você deseja vincular ao seu documento HTML.

Por exemplo, se você tiver seu próprio arquivo JavaScript personalizado chamado 'script.js' e se quiser adicionar funcionalidade à página HTML, adicione-o assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Exemplo do atributo src na tag script</title>
  </head>
  <body>

  <script src="./script.js"></script>
  </body>
</html>

Assim, você apontará para um arquivo chamado 'script.js' que está no mesmo diretório que o arquivo .html. Você também pode vincular a outros diretórios usando '..' no caminho do arquivo.

<script src="../public/js/script.js"></script>

Isso faz com que, para chegar ao arquivo desejado, se "pule" um nível de diretório – do diretório 'public' para o diretório 'js' e, depois, para o arquivo 'script.js'.

Você também pode utilizar o atributo 'src' para vincular arquivos .js externos hospedados por terceiros. Isso é usado se você não quiser baixar uma cópia local do arquivo. Cuide, no entanto, para o caso de o link ser alterado ou o acesso à rede estar desativado. Nessa situação, você não conseguirá vincular o arquivo externo que procura.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

Mais informações:

Artigo da MDN sobre a tag script no HTML

Escrito por: Kevwe Ochuko

A desestruturação em JavaScript é um método simplificado de extrair várias propriedades de um array, pegando a estrutura e desconstruindo-a, por meio de atribuições e usando uma sintaxe semelhante a dos array literals (arrays literais, em português).

Cria-se um padrão que descreve o tipo de valor que você espera e faz-se a atribuição. A desestruturação do array usa a posição.

Veja o trecho de código abaixo.

var [primeiro, segundo, terceiro] = ["Laide", "Gabriel", "Jets"];

var primeiro = "laide",
    segundo = "Gabriel",
    terceiro = "Jets

Você não pode usar números (variáveis do tipo Number) para desestruturar. Números gerarão um erro porque não podem ser nomes de variáveis.

var [1, 2, 3] = ["Laide", "Ola", "Jets"];

A desestruturação tornou a extração de dados de um array muito simples e legível. Imagine tentar extrair dados de um array aninhado com 5 ou 6 níveis. Isso seria muito tedioso. Você usa um array literal no lado esquerdo da atribuição.

var objetos = ["Mesa", "Cadeira", "Ventilador"];
var [a, b, c] = objetos;

Ele pega cada variável no array literal no lado esquerdo e mapeia para o mesmo elemento no mesmo índice no array.

console.log(a); //Resultado: Mesa
console.log(b); //Resultado: Cadeira
console.log(c); //Resultado: Ventilador

A declaração e a atribuição podem ser feitas separadamente na desestruturação.

var generoA, generoB;
[generoA, generoB] = ["Masculino", "Feminino"];

Se o número de variáveis ​​passadas para os array literals de desestruturação for maior do que os elementos do array, as variáveis ​​que não forem mapeadas para nenhum elemento do array retornarão undefined.

var objetos = ["Mesa", "Cadeira", "Ventilador", "Tapete"];
var [a, b, c, d, e] = objetos;
console.log(c); //Resultado: Ventilador
console.log(d); //Resultado: Tapete
console.log(e); //Resultado: undefined

Se o número de variáveis ​​passadas para os array literals de desestruturação for menor que os elementos no array, os elementos sem variáveis ​​a serem mapeadas serão deixados de lado. Não há nenhum tipo de erro.

var objetos = ["Mesa", "Cadeira", "Ventilador", "Tapete"];
var [a, b, c] = objetos;
console.log(c); //Resultado: Ventilador

Desestruturando arrays retornados

A desestruturação deixa o trabalho com uma função que retorna um array mais preciso. Funciona para todos os iteráveis.

function corredores(){
    return ["Sandra", "Ola", "Chi"];
}

var [a, b, c] = corredores();
console.log(a); //Resultado: Sandra
console.log(b); //Resultado: Ola
console.log(c); //Resultado: Chi

Valor padrão

A desestruturação permite que um valor padrão (ou default) seja atribuído a uma variável se nenhum valor ou undefined é passado. É como fornecer um substituto quando nada é encontrado.

var a, b;
[a = 40, b = 4] = [];
console.log(a); //Resultado: 40
console.log(b); //Resultado: 4

[a = 40, b = 4] = [1, 23];
console.log(a); //Resultado: 1
console.log(b); //Resultado: 23

Os valores padrão também podem se referir a outras variáveis, incluindo aquelas no mesmo array literal.

var [primeiro = "Cotlin", segundo = primeiro] = [];
console.log(primeiro); //Resultado: Cotlin
console.log(segundo); //Resultado: Cotlin

var [primeiro = "Cotlin", segundo = primeiro] = ["Koku"];
console.log(primeiro); //Resultado: Koku
console.log(segundo); //Resultado: Koku

var [primeiro = "Cotlin", segundo = primeiro] = ["Koku", "Lydia"];
console.log(primeiro); //Resultado: Koku
console.log(segundo); //Resultado: Lydia

Ignorando alguns valores

A desestruturação permite mapear uma variável para os elementos nos quais você está interessado. Você pode ignorar ou pular os outros elementos do array usando vírgulas à direita.

var a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];

console.log(a); //Resultado: Lordy
console.log(b); //Resultado: Roses

O pârametro Rest e a sintaxe de spread

O novo operador (…) que foi adicionado no ES6 pode ser usado na desestruturação. Se o operador (…) aparecer no lado esquerdo na desestruturação, então ele é um PARÂMETRO REST. Um pârâmetro rest é usado para mapear todos os elementos restantes no array que não foram mapeados para a própria variável rest. É como se fosse juntando o que ficou para trás. A variável rest deve ser sempre a última. Caso contrário, um SyntaxError aparece.

var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];
var [primeiro, , terceiro, ...outros] = planetas;

console.log(primeiro); //Resultado: Mercúrio
console.log(terceiro); //Resultado: Vênus
console.log(outros); //Resultado: ["Marte", "Plutão", "Saturno"]

Se o operador (…) aparecer à direita na desestruturação, então essa é uma SINTAXE DE SPREAD. Ela pega todos os outros elementos do array que não têm nenhuma variável mapeada para eles e, em seguida, mapeia para a variável restante.

var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];

var [primeiro, segundo, ...resto] = ["Mercúrio", "Terra", ...planetas, "Saturno"];

console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Terra
console.log(resto); //Resultado: ["Vênus", "Marte", "Plutão", "Saturno"]

Caso você possa ter mais variáveis ​​no lado esquerdo, ele mapeia os elementos únicos no array igualmente para as variáveis.

var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];

var [primeiro, segundo, ...resto] = ["Mercúrio", ...planetas];

console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Mercúrio
console.log(resto); //Resultado: ["Terra", "Vênus", "Marte", "Plutão", "Saturno"]

var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];

var [primeiro, segundo, terceiro, quarto ...resto] = ["Mercúrio", "Terra", ...planetas];

console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Terra
console.log(terceiro); //Resultado: Mercúrio
console.log(quarto); //Resultado: Terra
console.log(resto); //Resultado: ["Vênus", "Marte", "Plutão", "Saturno"]

Mudando ou trocando variáveis

Uma expressão de desestruturação pode ser usada para trocar os valores de duas variáveis.

var a, b;
[a, b] = ["Masculino", "Feminino"];
[a, b] = [b, a];

console.log(a); //Resultado: Feminino
console.log(b); //Resultado: Masculino

Desestruturação de arrays aninhados

Você também pode fazer a desestruturação de arrays aninhados. O item correspondente deve ser um array, para assim usar um array literal aninhado na desestruturação para atribuir itens às variáveis ​​locais.

var numeros = [8, [1, 2, 3], 10, 12];
var  [a, [d, e, f]] = numeros;

console.log(a); // Resultado: 8
console.log(d); // Resultado: 1
console.log(e); // Resultado: 2

Desestruturação múltipla de arrays

Você pode desestruturar um array mais de uma vez no mesmo trecho de código.

var posicoes = ["primeiro", "segundo", "terceiro", "quarto"];
var [a, b, , d] = [f, ...resto] = posicoes;

console.log(a); //Resultado: primeiro
console.log(d); //Resultado: quarto
console.log(f); //Resultado: primeiro
console.log(resto); //Resultado: ["segundo", "terceiro", "quarto"]

Conclusão

Você pode copiar e colar o código no site do Babel para ver como seria o código se a desestruturação não existisse. Você teria escrito mais linhas de código! Com a desestruturação, tudo ficará mais simples.

Aprenda os detalhes da implementação do recurso de arrastar e soltar (em inglês, drag and drop) no React do zero.

Vamos primeiro ver o resultado do que vamos construir. Estou testando o .gif — espero que funcione em todos os lugares como esperado. Usei para criá-lo o Camtasia com uma licença pessoal.

Os principais pontos de aprendizagem são:

1. Tornar um elemento "arrastável" adicionando o atributo "draggable"
2. Tornar uma área "soltável" implementando o evento "dragover"
3. Capturar os dados para arrastar implementando o evento "dragstart"
4. Capturar o momento de soltar implementando o evento "drop"
5. Implementar o evento "drag" que é acionado enquanto o elemento está sendo arrastado
6. Armazenar os dados intermediários no objeto dataTransfer

Passo 1 — crie o aplicativo raiz para a demonstração

Todo o código para arrastar e soltar estarrá no componente AppDragDropDemo.js.

import React from 'react';import ReactDOM from 'react-dom';import '.index.css';import AppDr

ReactDOM.render(<AppDragDropDemo />,     document.getElementById("root"));

O ponto de entrada para o AppDragDropDemo tem a seguinte aparência no código:

import React, { Component } from 'react';

export default class AppDragDropDemo extends Component {
	render () {
    	return (<div className="container-drag">DRAG & DROP DEMO</div>);
    }
}

Se você executar agora a aplicação, você verá esta tela:

Passo 2 — crie o estado do objeto para armazenar algumas tarefas

Vamos criar algumas tarefas para simular uma aplicação simples. O que pretendemos fazer é arrastar e soltar essas tarefas em diferentes categorias como wip, complete  e assim por diante.

export default class AppDragDropDemo extends Component {
	state = {
    	tasks: [{
        	name:"Learn Angular",
            category:"wip",
            bgcolor: "yellow"
            },
            {
            name:"React",
            category:"wip",
            bgcolor:"pink"
            },
            {
            name:"Vue",
            category:"complete",
            bgcolor:"skyblue"
            }
        ]
    }
    render () {
    	return (<div className="container-drag">DRAG & DROP DEMO</div>);}
    }
}

Passo 3 — organize os dados em categorias

Vamos implementar o código abaixo no método render para agrupar as tarefas em suas respectivas categorias, wip e complete. Sinta-se à vontade para adicionar mais categorias e brincar com o código.

Você pode copiar e colar o código que aparece acima no código abaixo.

render() {
	var tasks = {
    	wip: [],
        complete: []
        }
    this.state.tasks.forEach ((t) => {
    	tasks[t.category].push(<div key={t.name) onDragStart={(e)=>this.onDragStart(e, t.name)} draggable className="draggable" style={{backgroundColor: t.bgcolor}}>{t.name}</div>);
    }
};

No código acima, estamos percorrendo todas as tarefas, criando uma div para cada item de tarefa e armazenando-o nas respectivas categorias.

Assim, o wip[] contém todas as tarefas na categoria wip e complete[] contém todas as tarefas concluídas.

Passo 4 — torne o item da tarefa arrastável

Adicione o atributo arrastável a <div> ou a qualquer elemento para tornar um elemento arrastável. Consulte o bloco de código abaixo para obter o formato de texto do código.

Passo 5 — crie um contêiner "soltável"

Para criar um contêiner "soltável", implemente o evento dragover. Agora, como queremos desabilitar o padrão (default) do evento dragover, vamos chamar event.preventDefault() nele.

Também renderizaremos {tasks.wip} e {tasks.complete} em seus elementos div correspondentes.

return (<div className="container-drag">
			<h2 className="header">DRAG & DROP DEMO</h2>
			<div className="wip" onDragOver={(e)=>this.onDragOver(e)} onDrop={(e)=>{this.onDrop(e, "wip")}}>
            	<span className="task-header">WIP</span>
                {tasks.wip}
        	</div>
        	<div className="droppable" onDragOver={(e)=>this.onDragOver(e)} onDrop={(e)=>this.onDrop(e, "complete")}>
        		<span className="task-header">COMPLETED</span>
                {tasks.complete}
			</div>
        </div>);

Vamos, agora, implementar o manipulador de eventos onDragOver().

A resultado até agora será semelhante à figura abaixo.

Passo 6 — capture o estado do elemento que está sendo arrastado

Vamos modificar o código onde estamos criando a categoria para cada tarefa. Adicione um manipulador de evento ondragstart e passe o id/nome ou qualquer informação que você precise persistir enquanto o arrastar/soltar está acontecendo.

Estou usando name como um valor único para identificar a tarefa. Sinta-se à vontade para usar o ID ou qualquer chave exclusiva que você tenha.

Vamos agora implementar o manipulador de eventos onDragStart.

No manipulador onDragStart, pegamos o parâmetro e o armazenamos no objeto dataTransfer. Não se confunda com a nomenclatura do parâmetro, pois acho que estava em outro mundo quando codifiquei isso. :)

Observação para o Internet Explorer: isso pode não funcionar com o IE. Para ele, a melhor prática é fornecer o formato como a chave, conforme mostrado abaixo.

Em vez de

ev.dataTransfer.setData("id", id)

use

ev.dataTransfer.setData(“text/plain”,id)

O manipulador acima garantirá que o elemento que está sendo arrastado seja armazenado no evento do objeto e esteja disponível para uso quando necessário. Pode ser necessário ao soltar em um destino.

Agora, se você executar o aplicativo e arrastar os elementos, os seguintes logs serão gerados.

Passo 7 — manipule o evento de soltar (drop)

Vamos abrir o método de renderizar e adicionar o evento onDrop na div com a className droppable.

No código acima, adicionamos o evento de manipulação drop e passamos a categoria obrigatória complete como argumento.  Isso indica que estamos "soltando" o elemento do estado wip  no estado complete (categoria). Sinta-se à vontade para alterar os nomes, conforme necessário.

Vamos agora implementar o manipulador de eventos onDrop().

Aqui está o código que você pode copiar/colar:

onDrop = (ev, cat) => {
	let id = ev.dataTransfer.getData("id");
    let tasks = this.state.tasks.filter((task) => {
    	if (task.name == id) {
        	task.category = cat;
        }
     	return task;
     });
     this.setState({
     	...this.state,
        tasks
     });
}

No manipulador de eventos onDrop, pegamos a tarefa que está sendo arrastada usando o método getData no evento do objeto dataTransfer.

Em seguida, criamos um array de tarefas usando o método de filtro e alteramos a categoria da tarefa que está sendo arrastada.

setState() acionará a renderização e as tarefas serão renderizadas nas áreas corretas.

Observação para o Internet Explorer: para fazê-lo funcionar no IE, use o método getData abaixo.

Ao invés de

var id = ev.dataTransfer.getData("id")

use

var id = ev.dataTransfer.getData("text")

Passo 8 — para implementar o soltar (drop) de "complete" para "wip", adicione o manipulador onDropto

O manipulador onDrop() permanece o mesmo de antes.

Por fim, execute o código, admire sua criação e divirta-se enquanto programa. :)

Você pode pegar o código-fonte aqui.

Observação: para que isso funcione em vários navegadores, altere o tipo de setData para string. Por exemplo, para definir dados, use ev.dataTransfer.setData("text/plain",id). Para ler o dado, use var id = ev.dataTransfer.getData("text").

Como meu objetivo era demonstrar os principais recursos de arrastar e soltar, o código não foi otimizado para fatores como design e convenções de nomenclatura.

Aprenda com o autor em @Learner + Fullstack Coach (@rajeshpillai): https://twitter.com/rajeshpillai