Text Translation Algorithm

Question

Text Translation Algorithm

Navigation

#1 by (5 votes)

2

I'm a beginner in JS I've already studied up to the loops section, so I stopped by to review everything I saw and do some exercises.

I have made an algorithm that translates into English, Spanish and Portuguese a table with the tide schedules.

The algorithm reads a model function with parameters > just below there is another function that will be called in the onclick event, this function calls the model function by changing the parameters according to the current language

The problem is that it was very extensive, so I just did the part that translates the Title, Button and Prompt to choose the language ... come on:

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 table (if you want to test)

 <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>

The table needs to be translated in full after the user executes the function.

Since I have only been able to do this by assigning ID and condition to EVERY table word, and thus the algorithm gets tiring, extensive and unprofessional, let's look at:

   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

I tried to use GetElementByTagsName to condition all words in the table in <th> to respect condition of change innerHTML without needing to assign id to each, but did not work.

Would you like to do this using loops or something else?

javascript html algoritmo

asked by anonymous 03.10.2014 / 00:40

1 answer

Connections and management Laravel - Update all fields of a large table

score 5 · Answer 1

Before answering your main question (which is about manipulating the DOM), I'd like to give you some general ideas for you to refactor your code, so it's easier to manage. Okay?

First of all, I suggest using a standardized object with all the texts of each language, as this is very confusing (many parameters for function, repeated texts, 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"],
        ...
};

In this way, the set of supported languages is not "carved in stone," and still simplifies the rest of the program. The traduzir function would look like this:

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;
            }
}

And the traducao function can extract all necessary parts from this list. Example (still assuming only two alternatives, in practice you will want to iterate over the parameter 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;
    ...

Example in jsFiddle . Once this is done, it is easier to replace your string of if s with a 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);

Updated example . Note that your code has been reduced to only about 30 lines! :)

(PS Always use var before variables , otherwise they will become global ...)

Finally, to the center of the question: how to iterate over the rows and columns of the table using a loop. There is a fairly easy way - using document.querySelector and document.querySelectorAll - that is widely supported in current browsers . With it you can easily select the first column of each line of your table (unfortunately :eq is not supported, so the only way to select the same rows is):

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

Assuming the first column of each row (except the first one) is a day of the week, and your language file has the days of the week in an array, it's easy to translate them one by one:

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

Final example . I only needed to translate most of the fields (I translated some of the English, for demonstration, but I left the majority untranslated, in particular of the Spanish - that I do not know) and do the rest of the translations - line of headings, and other fields of the table. I believe that with the given example you can use both querySelectorAll and getElementsByTagName to do the rest, but if you still have questions just ask.