3

Sou iniciante no JS já estudei até a parte de loops, ai dei uma paradinha para revisar tudo o que vi e fazer alguns exercícios.

Fiz um algoritmo QUE TRADUZ para Inglês, Espanhol e Português uma tabela com os horários da maré.

O algoritmo lê uma função modelo com parâmetros > logo em baixo há outra função que vai ser chamada no evento onclick, esta função chama a função modelo alterando os parâmetros de acordo com o idioma vigente

O problema é que ficou muito extensa, dai eu só fiz até a parte que traduz o Título, o Botão e o Prompt de escolher o idioma... vamos lá:

JAVASCRIPT

//funcao modelo
function traducao(langarray1,langarray2,lang1,lang2,tabletitle1,tabletitle2,buttonvalue1,buttonvalue2,chooselang,errormsg){
        document.getElementById("tabelatitle"); //pega a tag <h1> do titulo da tabela

        translan = new Array(langarray1,langarray2); // variaveis do idioma que aparece no texto do prompt como string  
        transtext = prompt(chooselang + translan[0] + ", " + translan[1]); // Prompt para escolher o idioma

        if(transtext == lang1){ // escolha do idioma == idioma 1
            tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma escolhido
            document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido

        }
        else if(transtext == lang2){ // se escolha do idioma == idioma 2
            tabelatitle.innerHTML = tabletitle2; // traduzir <h1> para idioma escolhido
            document.getElementById("botao").innerHTML = buttonvalue2; // traduzir o botao para o idioma escolhido
        }
        else{ // se deixar vazio ou escolha invalida, apresentar msg de erro
            alert(errormsg);
        }
    }

//executar traducao() com condicoes
function traduzir(){    
        document.getElementById("tabelatitle");

        //pt - se idioma current = pt > apresentar opções de traduzir para ingles ou espanhol no prompt. e se escolher uma das duas > traduz titulo, botão e texto do prompt.
        if(tabelatitle.innerHTML == "Tabela de horários da Maré"){ //
            return traducao("Ingles","Espanhol","Ingles","Espanhol","Sea hours table","Tabla de horarios de las mareas","Translate","Traducir","Escolha um idioma: ","Você precisa escolher um idioma");
        }

        //en - se o idioma current for ingles - apresentar opções de traduzir para Portugues e Espanhol > e se escolher uma das duas > traduz titulo, botão e texto do prompt.
        else if(tabelatitle.innerHTML == "The tide times table"){
            return traducao("Spanish","Portuguese","Spanish","Portuguese","Tabla de horarios de las mareas","Tabela de horários da Maré","Traducir","Traduzir", "Choose a language: ","You need to choose a language");

        //es - se o idioma current for espanhol - apresentar opções de traduzir para Portugues e Ingles > e se escolher uma das duas > traduz titulo, botão e texto do prompt.
        }
        else{
            return traducao("Inglés","Portugués","Inglés","Portugués","The tide times table","Tabela de horários da Maré","Translate","Traduzir", "Eligir un idioma","Usted tiene que elegir un idioma");
        }
    }

HTML da tabela (caso queiram testar)

 <h1 id="tabelatitle">Tabela de horários da Maré</h1>
           <table class="tg">
              <tr>
                <th class="tg-xdyu">Dia</th>
                <th class="tg-031e">Manhã</th>
                <th class="tg-031e">Tarde</th>
                <th class="tg-031e">Noite</th>
              </tr>
              <tr>
                <td class="tg-031e" id="segunda">Segunda-Feira</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Agitado</td>
                <td class="tg-031e">Agitado</td>
              </tr>
              <tr>
                <td class="tg-031e">Terça-Feira</td>
                <td class="tg-031e">Normal</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Normal</td>
              </tr>
              <tr>
                <td class="tg-031e">Quarta-Feira</td>
                <td class="tg-031e">Agitado</td>
                <td class="tg-031e">Agitado</td>
                <td class="tg-031e">Agitado</td>
              </tr>
              <tr>
                <td class="tg-031e">Quinta-Feira</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Normal</td>
                <td class="tg-031e">Agitado</td>
              </tr>
              <tr>
                <td class="tg-031e">Sexta-Feira</td>
                <td class="tg-031e">Normal</td>
                <td class="tg-031e">Normal</td>
                <td class="tg-031e">Normal</td>
              </tr>
              <tr>
                <td class="tg-031e">Sábado</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Normal</td>
                <td class="tg-031e">Agitado</td>
              </tr>
              <tr>
                <td class="tg-031e">Domingo</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Calmo</td>
                <td class="tg-031e">Calmo</td>
              </tr>
            </table>
            <button onclick="traduzir()" id="botao">Traduzir</button>

A tabela precisa ser traduzida na íntegra após o usuário executar a função.

Sendo que eu só consegui fazer isso atribuindo ID e condição para CADA palavra da tabela e dessa forma o algoritmo fica cansativo, extenso e pouco profissional, vejamos:

   if(transtext == lang1){ // escolha do idioma == idioma 1
            tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma   escolhido
            document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido

            if(document.getElementById("segunda").innerHTML = parametroadequadoaoidiomaemquestao;
            if(document.getElementById("terca").innerHTML = parametroadequadoaoidiomaemquestao;
            etc..... (todas as palavras, incluindo, dias da semana, tempo do mar, tarde   noite etc

   else if(transtext == lang1){ // escolha do idioma == idioma 1
            tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma   escolhido
            document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido

            if(document.getElementById("segunda").innerHTML = parametroadequadoaoidiomaemquestao;
            if(document.getElementById("terca").innerHTML = parametroadequadoaoidiomaemquestao;
            etc..... (todas as palavras, incluindo, dias da semana, tempo do mar, tarde   noite etc

Tentei usar GetElementByTagsName para condicionar todas as palavras da tabela em <th> a respeitar condição de mudar innerHTML sem precisar atribuir id a cada, mas não funcionou.

Teria como fazer isso usando loops ou outra coisa?

0

1 Resposta 1

6

Antes de responder sua pergunta principal (que é relativa à manipulação do DOM), gostaria de dar umas ideias gerais para você refatorar seu código, de modo a ficar mais fácil de gerenciar. Ok?

Em primeiro lugar, eu sugiro usar um objeto padronizado com todos os textos de cada idioma, pois dessa forma está bastante confuso (muitos parâmetros pra função, textos repetidos, etc):

var idiomas = {
    pt:{
        pt:"Português", en:"Inglês", es:"Espanhol", alt:["en","es"],
        titulo:"Tabela de horários da Maré",
        traduzir:"Traduzir",
        escolha:"Escolha um idioma: ", escolhaErro:"Você precisa escolher um idioma",
        cabecalhos:["Dia", "Manhã", "Tarde", "Noite"],
        diasSemana:["Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira",
                    "Sexta-Feira","Sábado","Domingo"],
        calmo:"Calmo", normal:"Normal", agitado:"Agitado"
    },
    en:{
        pt:"Portuguese", en:"English", es:"Spanish", alt:["es","pt"],
        ...
    es:{
        pt:"Portugués", en:"Inglés", es:"Español", alt:["en","pt"],
        ...
};

Dessa forma, o conjunto de idiomas suportados não fica "talhado em pedra", e ainda simplifica todo o resto do programa. A função traduzir por exemplo, ficaria assim:

function traduzir() {
    var tabelatitle = document.getElementById("tabelatitle"); // Não é bom acessar 
                                                              // implicitamente pelo id
    for ( var idioma in idiomas )
        if ( idiomas.hasOwnProperty(idioma) )
            if ( tabelatitle.innerHTML == idiomas[idioma].titulo ) {
                // Só precisa informar qual o idioma atual e quais as alternativas
                traducao(idiomas[idioma], idiomas[idioma].alt);
                break;
            }
}

E a função traducao pode extrair todas as partes necessárias dessa lista passada. Exemplo (ainda assumindo só duas alternativas, na prática você vai querer iterar sobre o parâmetro alternativas):

function traducao(atual, alternativas) {
    var langarray1 = atual[alternativas[0]], langarray2 = atual[alternativas[1]], 
        lang1 = atual[alternativas[0]], lang2 = atual[alternativas[1]],
        tabletitle1 = idiomas[alternativas[0]].titulo, tabletitle2 = idiomas[alternativas[1]].titulo,
        buttonvalue1 = idiomas[alternativas[0]].traduzir, buttonvalue2 = idiomas[alternativas[0]].traduzir,
        chooselang = atual.escolha, errormsg = atual.escolhaErro;
    ...

Exemplo no jsFiddle. Feito isso, fica mais fácil substituir sua cadeia de ifs por um loop:

var translan = [];
for ( var i = 0 ; i < alternativas.length ; i++ )
    translan[i] = atual[alternativas[i]];
var transtext = prompt(chooselang + translan.join(", "));

var idiomaEscolhido = null;
for ( var i = 0 ; i < alternativas.length ; i++ ) {
    if ( transtext == atual[alternativas[i]] ) {
        idiomaEscolhido = idiomas[alternativas[i]];

        tabelatitle.innerHTML = idiomaEscolhido.titulo;
        document.getElementById("botao").innerHTML = idiomaEscolhido.traduzir;

        break;
    }
}
if ( idiomaEscolhido === null )
    alert(errormsg);

Exemplo atualizado. Note que seu código foi reduzido pra apenas umas 30 linhas! :)

(P.S. Sempre use var antes das variáveis, caso contrário elas vão virar globais...)

Por fim, ao centro da pergunta: como iterar sobre as linhas e colunas da tabela usando um loop. Há um meio bastante fácil - usando document.querySelector e document.querySelectorAll - que é amplamente suportado nos browsers atuais. Com ele você pode facilmente selecionar a primeira coluna de cada linha da sua tabela (infelizmente não há suporte a :eq, de modo que o jeito será selecionar só as linhas mesmo):

var linhas = document.querySelectorAll("table.tg tr");

Assumindo que a primeira coluna de cada linha [exceto a primeira] é um dia da semana, e seu arquivo de idioma possui os dias da semana em um array, fica fácil traduzi-los um a um:

for ( var i = 1 ; i < linhas.length ; i++ )
    linhas[i].getElementsByTagName("td")[0].innerHTML = idiomaEscolhido.diasSemana[i-1];

Exemplo final. Só faltou traduzir a maioria dos campos (traduzi alguns do inglês, para demonstração, mas deixei a maioria sem traduzir, em particular do espanhol - que não conheço) e fazer o resto das traduções - linha do cabeçalhos, e demais campos da tabela. Acredito que com o exemplo dado você consiga utilizar tanto o querySelectorAll quanto o getElementsByTagName para fazer o resto, mas se ainda tiver dúvidas é só perguntar.

1
  • 3
    Seja lá quem você for, nem sei como te agradecer velhao. Você explicou muita coisa e reformulou de maneiras que eu ainda nem estudei, ainda não entendi mais de 40% mas ficou fantástico. Eu vou continuar relendo sua resposta até entender tudo. Muito obrigado!
    – ropbla9
    3/10/2014 às 2:02

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 .