querySelector non supportato nei browser obsoleti

[fede220]

Ciao non sono esperto di programmazione ed ho una pagina web salvata con JavaScript ma quando la apro con Internet Explorer con modalità compatibilità IE5 visualizzo l'errore "L'oggetto non supporta la proprietà o il metodo 'querySelector'" quindi mi chiedo se è possibile convertire e rendere il codice compatibile con i browser obsoleti (Internet Explorer e Netscape). Il problema sembrano le proprietà o i metodi querySelector e addEventListener che non sono supportati e non so se esistono delle alternative per farlo funzionare nei browser obsoleti. Il codice è JavaScript è questo:

function TicTacToe(selector) {

    var main_element = document.querySelector(selector),
        score_X = main_element.querySelector('.score.X'),
        score_O = main_element.querySelector('.score.O'),
        board = main_element.querySelector('.board'),
        grid_options = main_element.querySelector('.grid-options'),
        reset_btn = main_element.querySelector('.btn-reset');

    var grid_size = 3,
        moves = 0,
        scores = {
            X: 0,
            O: 0
        },
        data = {};

    grid_options.addEventListener('change', function(e){
      grid_size = parseInt(e.target.value);
      init();
    });

    init();

    reset_btn.addEventListener('click', init);

    function paint() {
        var table = '<table>';
        for (var i = 0; i < grid_size; i++) {
            table += '<tr>';
            for (var j = 0; j < grid_size; j++) {
                table += '<td row="' + i + '" column="' + j + '"></td>';
            }
            table += "</tr>";
        }
        board.innerHTML = table;

        var columns = board.getElementsByTagName('td');
        for (i = 0; i < columns.length; i++) {
            columns[i].addEventListener('click', mark);
        }

    }

    function mark(e) {

        var td = e.target;

        if (td.innerHTML) {
            return;
        }

        var row = td.getAttribute('row'),
            column = td.getAttribute('column');

        var current_mark = moves % 2 === 0
            ? 'X'
            : 'O';

        td.innerHTML = current_mark;
        td.classList.add(current_mark);
        data[row + '' + column] = current_mark;

        moves++;

        setTimeout(function() {
            if (didWin(current_mark)) {
                alert(current_mark + ' vince la partita!');
                scores[current_mark]++;
                updateScoreboard();
                empty();
            } else if (moves === Math.pow(grid_size, 2)) {
                alert("Pareggio!");
                empty();
            }
        }, 0);

    }

    function didWin(mark) {

        var vertical_count = 0,
            horizontal_count = 0,
            right_to_left_count = 0,
            left_to_right_count = 0;

        for (var i = 0; i < grid_size; i++) {

            vertical_count = 0;
            horizontal_count = 0;

            for (var j = 0; j < grid_size; j++) {

                if (data[i + '' + j] == mark) {
                    horizontal_count++;
                }

                if (data[j + '' + i] == mark) {
                    vertical_count++;
                }

            }

            if (data[i + '' + i] == mark) {
                left_to_right_count++;
            }

            if (data[(grid_size - 1 - i) + '' + i] == mark) {
                right_to_left_count++;
            }

            if (horizontal_count == grid_size || vertical_count == grid_size) {
                return true;
            }

        }

        if (left_to_right_count == grid_size || right_to_left_count == grid_size) {
            return true;
        }

        return false;
    }

    function empty() {
        moves = 0;
        paint();
        data = {};
    }

    function init() {
        empty();
        scores = {
            X: 0,
            O: 0
        };
        updateScoreboard();
    }

    function updateScoreboard() {
        score_X.innerHTML = scores.X;
        score_O.innerHTML = scores.O;
    }

}

[KillerWorm]

Ciao, posso chiederti perché ti serve avere compatibilità con i browser estinti?

[fede220]

Perchè mi piace avere la pagina retrocompatibile con i browser obsoleti, non so se esite un metodo per convertire il codice per i browser obsoleti. Ho una versione di internet explorer obosoleta sul mio vecchio pc ma quando apro la pagina visualizzo dei messaggi di errori. Lo script è il gioco del tris e mi piacerebbe modificare il codice per renderlo retrocompatibile (con i browser obsoleti).

[KillerWorm]

Per avere una pagina retrocompatibile

Sì, questo mi pere scontato, ma qual è la tua reale esigenza di rendere fruibile qualcosa su browser che sostanzialmente non usa più nessuno, se non in qualche particolarissima eccezione come la tua?

E' giusto per capire se vale la pena perderci tempo a retro-convertire quello script.

[fede220]

Sì, questo mi pere scontato, ma qual è la tua reale esigenza di rendere fruibile qualcosa su browser che sostanzialmente non usa più nessuno, se non in qualche particolarissima eccezione come la tua?

E' giusto per capire se vale la pena perderci tempo a retro-convertire quello script.

Per chi utilizza browser obsoleti tra cui internet explorer è necessario retro-convertire lo script altrimenti non funziona, questa è la mia esigenza. Ho letto su internet che ci sono dei transpiler che fanno questa cosa ma non so come si utilizzano. Lo script non è complesso e penso che si può retro-convertire.

[KillerWorm]

ok, senza entrare in polemica, trovo che cercare una retro-compatibilità con browser come Netscape e IE<11, ad oggi, sia statisticamente una scelta anacronistica.

Non avendo ricevuto una valida motivazione da parte tua, personalmente non ritengo interessante affrontare l'argomento... ovviamente senza offesa alcuna.

Lascio spazio a qualcun altro