Convertire JavaScript per la compatibilità nei browser obsoleti

di il
6 risposte

Convertire JavaScript per la compatibilità nei browser obsoleti

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

}

6 Risposte

  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    Per questo scopo esiste la libreria Modernizr (https://modernizr.com/docs) che e' in grado di dirti se il browser ha una certa funzionalita. Qui puoi scaricare una versione personalizzata di modernizr (https://modernizr.com/download?setclasse) dove puoi selezionare querySelector tra le funzioni da controllare.

    Dopo di che nel tuo codice dovrai re-implementare querySelector. Io ti consiglio di utilizzare sizzle (https://github.com/jquery/sizzle/wik) che ' la stessa libreria usata da jQuery (https://jquery.co)
  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    Mi e' venuta in mente un altra alternativa facile facile: semplicemente usare SOLO jQuery (https://jquery.co)

    Dopo che aggiungi jQuery al tuo progetto aggiungendo la seguente riga nello header [CODE] <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Dopo di che nel codice, invece che usare document.querySelector(selector) usi [CODE] main_element = $(selector)[0]
  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    Provato ma non funziona su Internet Explorer 5. Non sembra essere la soluzione adatta perchè mi dice che addEventListener non è supportato e che $ è nullo. Non so se il codice sia giusto non sono esperto di programmazione, non so come si converte a JavaScript 1.0. Grazie per la cordialità.
    
    TicTacToe('.game-panel');
    
    function TicTacToe(selector) {
    
        var main_element = $(selector)[0],
            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;
        }
    
    }
  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    Che io sappia da una certa versione jquery non supporta più browser obsoleti tipo IE5.

    una curiosità: lo vuoi rendere compatibile con IE5 per qualche motivo particolare?
    perchè stiamo parlando della preistoria, parliamo della fine degli anni 90.
    cerca di capire se ne vale veramente la pena.
  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    Oltre ad una mia curiosità mi piacerebbe avere una pagina retrocompatibile anche perchè come dicevo prima ho un computer vecchio ma quando apro il file non funziona e utilizzo quella pagina su quel computer. Questa è la mia necessità
  • Re: Convertire JavaScript per la compatibilità nei browser obsoleti

    fede220 ha scritto:


    Oltre ad una mia curiosità mi piacerebbe avere una pagina retrocompatibile anche perchè come dicevo prima ho un computer vecchio ma quando apro il file non funziona e utilizzo quella pagina su quel computer. Questa è la mia necessità
    eh ma in bocca al lupo.
    perchè tante librerie / plugin hanno levato la compatibilità per cose così vecchie.
    potresti provare con una delle prime versioni di jquery.
    prova a leggere qua: https://stackoverflow.com/questions/7316894/jquery-and-old-ie-versions
Devi accedere o registrarti per scrivere nel forum
6 risposte