1

Estou criando uma tabela dinâmica em Javascript para representar um conjunto de links favoritos que irão ser gerenciados através documento HTML.

Exemplo

document.getElementById('resultado').innerHTML =[
'<table>',
 '<tr>',
'<th>ID</th>',
'<th>RESULTADO</th>',
'</tr>',
'<tr>',
'<td>1</td>',
'<td id="cel1">http://www.br.ask.com</td>',
'</tr>',
'<tr>',
'<td>2</td>',
'<td id="cel1">http://www.google.com</td>',
'</tr>',
'<tr>',
'<td>3</td>',
'<td  id="cel3">http://www.yahoo.com</td>',
'</tr>',
'<tr>',
'<td>4</td>',
'<td id="cel4">https://www.bing.com/</td>',
'</tr>',
'<tr>',
'<td>5</td>',
'<td id="cel5">http://www.likata.com/</td>',
'</tr>',
'</table>'
].join('\n');


var text_01 = document.getElementById('cel1').innerHTML;

var text_02 = document.getElementById('cel3').innerHTML;

var conta = 0;

var clic = document.getElementById('cel3');

clic.onclick = function() 
{  
if(conta == 4) conta = pos();

conta++;
}

pos = function()
{
document.getElementById('cel1').innerHTML = text_02;
document.getElementById('cel3').innerHTML = text_01;
}
table{
width: 100%;
border: thin solid silver;
color: white;
}
th{
background-color: black;
color: white;
}
tr td{
background-color: white;
color: black;
}
<span id="resultado"></span>

   


Os links que recebem maior números de cliques, sobem para os primeiras linhas

Observe as figura 1 e 2 abaixo:

Antes

Neste exemplo ilustrativo, visto que o usuário clicou inúmeras vezes sobre o Link - "www.yahoo.com" e logo este sobe para os primeiros lugares. Veja:

Depois

Farei uma breve comparação para exemplificar. Vejamos:

Aqui no pt.stackoverflow onde diz:

"As melhores respostas recebem votos positivos e sobem para os primeiros lugares"

Nessa mesma linha de pensamento, é que menciono:

"Os links que recebem maior números de cliques/visitas, sobem para os primeiras linhas"

Mas para o "Link" mais acessado aparecer entre as primeiras linhas, é preciso criar o script com técnicas para melhorar a classificação.

Cito Fontes de referência sobre parte do assunto:

html-e-javascript-trocando-dois-elementos-de-posicao-swap

Implementando uma lista de objetos com a opção de mudar suas posições na lista

Preciso trocar o valor de uma coluna em uma tabela com javascript. Como fazer?

3
  • 1
    Acho que as pessoas não entenderam muito bem a pergunta, está meio confusa. Primeiro você fala em rankear por visitação do usuário, depois você fala em rankear per contagem de palavras... não ficou bem explicado o que estás querendo fazer. Commented 21/07/2016 às 3:39
  • Eu acho sempre bom reler a questão antes de enviar, pois quando as pessoas não entendem elas costumam não ser muito tolerantes e sentar o dedo no downvote. Eu até que sou bem tolerante, tento ler de novo, ver se consigo entender, mas veja bem, essas questões vão ficar para sempre nesse site, então quando alguém vai no google e busca algo, ela acaba caindo aqui, e é bom que tanto pergunta quanto respostas sejam claras para os futuros visitantes. Commented 21/07/2016 às 12:53
  • Vejo que atualizou a questão com um bocado de informações relevantes. Parabéns! Ficou de primeira. Commented 26/07/2016 às 17:29

1 Resposta 1

4

O algoritmo descrito é bem diferente do page-rank.

Me parece questão de implementar um acumular com peso no tempo para cada página por usuário.

Cada vez que o usuário visualiza uma página, você vai no registro pertinente àquela página e adiciona um peso, que comparado aos pesos de outras páginas diz em que ordem ela está.

O valor a ser adicionado se torna cada vez maior com a passagem do tempo, por isso tem que ser um tipo de ponto flutuante. Fica assim:

adicionar = Math.pow(2, (new Date()).getTime() * 3.17098e-11 - 46);
pagina.peso += adicionar;

Dessa forma, página visitadas a muito tempo atrás perdem relevância frente a outras visitadas recentemente.

No exemplo acima, o que fiz foi o seguinte:

  • (new Date()).getTime() - pega um tempo absoluto no JavaScript... é o número de milissegundos desde 1970 eu acho... uma coisa assim, o que importa é que é absoluto.
  • ... * 3.17098e-11 - eu quero controlar a perda de relevância em anos, por isso multiplique o valor de milissegundos por isso, que é a quantidade de anos em um milissegundo (valor fracionário).
  • ...- 46 - to tirando os anos passados desde 1970, pra ficar pequeno o número, já que vou usar o número como expoente.
  • Math.pow(2, ...) - elevo 2 ao número obtido anteriormente, o que faz o valor de uma visita dobrar a cada ano que passa. Se quiser que triplique é só usar um 3, quadruplique um 4, e por ai vai.

Sobre a persistência, não importa se persistência é feita em cookie... onde você achar melhor, pode ser local-storage, num servidor próprio, ou na memória do javascript.

Exemplo

Vou dar um exemplo usando apenas os recursos padrão dos Browsers modernos. (funciona no Chrome 51):

  • vou armazenar os dados na memória do JavaScript, portanto, não haverá persistência entre cargas da página... para isso é possível usar localstorage
  • vou reconstruir a tabela a cada vez que for necessário
  • vou dobrar a nota de base a cada 24h ao invés de 365 dias para tornar o efeito mais facilmente perceptível

var nota;
var data = [{
  id: 1,
  link: "www.google.com",
  nota: 0
}, {
  id: 2,
  link: "www.yahoo.com",
  nota: 0
}];
var elNota = document.getElementById("nota");
var btnAdd = document.getElementById("btnAdd");
var txtLink = document.getElementById("txtLink");
var linkTable = document.getElementById("linkTable");
btnAdd.addEventListener("click", function(e) {
  var tbody = linkTable.getElementsByTagName('tbody')[0];
  var id = data.length + 1;
  var newLink = txtLink.value;
  data.push({
    id: id,
    nota: 0,
    link: newLink
  });
  reconstruirTabela();
});

function truncate(number, mul) {
  return Math[number < 0 ? 'ceil' : 'floor'](number * mul) / mul;
};

function step(timestamp) {
  nota = 10 * truncate(Math.pow(2, (new Date() * 3.17098e-11 - 46) * 365 - 218), 10000);
  elNota.innerHTML = nota.toFixed(3);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

function setupLinkCell(cell, item) {
  cell.className += " linkCell";
  cell.onclick = function(e) {
    item.nota += nota;
    reconstruirTabela();
  };
  return cell;
}

function reconstruirTabela() {
  var tbody = linkTable.getElementsByTagName('tbody')[0];
  var sorted = data.sort(function(a, b) {
    var cmp;
    cmp = a.nota < b.nota ? -1 : a.nota == b.nota ? 0 : 1;
    if (cmp != 0) return -cmp;
    cmp = a.link < b.link ? -1 : a.link == b.link ? 0 : 1;
    return cmp;
  });
  for (var j = 0; j < sorted.length; j++) {
    var item = sorted[j];
    var row = tbody.rows[j] || tbody.insertRow(j);
    (row.cells[0] || row.insertCell(0)).innerHTML = item.id;
    (row.cells[1] || row.insertCell(1)).innerHTML = item.nota;
    (setupLinkCell(row.cells[2] || row.insertCell(2), item)).innerHTML = item.link;
  }
}

reconstruirTabela();
table {
  width: 100%;
}
thead {
  background-color: black;
  color: white;
}
td {
  border: 1px slid black;
}
.fill {
  width: 100%;
}
.fill > * {
  width: 100%;
}
#btnAdd {
  width: 200px;
}
.notes {
  color: blue;
  font-style: italic;
}
#nota {
  font-weight: bold;
}
.linkCell {
  color: blue;
  cursor: pointer;
}
<table>
  <row>
    <td class="fill">
      <input type="text" name="txtLink" id="txtLink" />
    </td>
    <td>
      <button id="btnAdd">Adicionar Link</button>
    </td>
  </row>
</table>
<div>
  <span>Nota de um clique</span>
  <span id="nota">?</span>
  <span class="notes"> - essa nota dobra a cada 24h</span>
</div>

<table id="linkTable">
  <thead>
    <row>
      <th width="100">Id</th>
      <th width="100">Nota</th>
      <th>Link</th>
    </row>
  </thead>
  <tbody></tbody>
</table>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .