Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2013
    Messaggi
    151

    accedere ad una variabile in un altro file

    Ciao a tutti, ecco il mio problema.

    Ho creato questi file

    codice:
    index.html
    start.js
    config.js
    Esaminiamoli

    codice:
    $ cat index.html
    <html>
    <head>
        <script type="text/javascript" src="start.js"></script>
    </head>
    <body onload="start()">
    
    
    </body>
    </html>
    
    $ cat start.js 
    function start() {
        var script = document.createElement("script");
    
        script.src = "config.js";
        script.type = "text/javascript";
        script.async = false;
        
        console.log(xxx);
    }
    
    $ cat config.js
    var xxx = 123;
    Nel browser apro index.html è mi da questo errore

    Uncaught ReferenceError: xxx is not defined
    at start (start.js:8:17)
    at onload (index.html:5:24)

    Perchè?
    Ultima modifica di astros3; 30-09-2024 a 17:00

  2. #2
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,387
    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Nel browser apro index.html è mi da questo errore

    Uncaught ReferenceError: xxx is not defined
    at start (start.js:8:17)
    at onload (index.html:5:24)

    Perchè?
    Hai creato l'elemento <script>, ma dove l'hai inserito?

    Finché non fai una addChild() non credo funzioni.
    codice:
    document.body.appendChild(script);
    Fai un controllo.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  3. #3
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,387
    (doppio)

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2013
    Messaggi
    151
    codice:
    $ cat index.html 
    <html>
    <head>
        <script type="text/javascript" src="start.js"></script>
    </head>
    <body onload="start()">
    
    
    
    
    </body>
    </html>
    
    $ cat start.js 
    function start() {
        var script = document.createElement("script");
    
    
        script.src = "config.js";
        script.type = "text/javascript";
        script.async = false;
        
        document.body.appendChild(script);
        console.log(xxx);
    }
    
    $ cat config.js 
    var xxx = 123;res$
    Uncaught ReferenceError: xxx is not defined
    at start (start.js:9:17)
    at onload (index.html:5:24)
    start @ start.js:9
    onload @ index.html:5

  5. #5
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,387
    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Uncaught ReferenceError: xxx is not defined
    at start (start.js:9:17)
    at onload (index.html:5:24)
    start @ start.js:9
    onload @ index.html:5
    Ok, ho capito che riporti il dettaglio dell'errore, ma un po' di intraprendenza: aggiungi qualche log, vai in debug passo passo, fai il minimo sforzo per cercare di capire cosa non va.

    A mio avviso, la cosa non può funzionare così, perché quando tu crei l'elemento dello script all'interno della funzione start(), la funzione termina prima che il browser passi ad eseguire ciò che c'è all'interno dello script. Non si può spezzare una funzione *non* asincrona in due parti.

    Il tuo log di "xxx" arriva evidentemente prima dell'esecuzione dello script config.js.

    Per provarlo rapidamente, basterebbe loggare il valore della variabile "xxx" in questo modo:
    codice:
      setTimeout(() => {
        console.log(xxx);
      }, 0);
    Così facendo, l'istruzione di log viene inserita nell'Event Loop e quindi verrà eseguita in seguito, dando tempo alla funzione di terminare e all'altro script di venire caricato ed eseguito.

    Mi chiedo comunque a cosa serva questa soluzione nello specifico, al posto di caricare banalmente i due script, ma questa è pura curiosità.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2013
    Messaggi
    151
    Ti riporto lo scenario reale

    codice:
    $ tree├── index.html
    ├── resources
    │   └── example.js
    └── window-resources.js
    
    
    $ cat index.html 
    <html>
    <head>
        <script type="text/javascript" src="window-resources.js"></script>
    </head>
    <body onload="open_window_resources()">
    
    
    </body>
    </html>
    
    
    $ cat window-resources.js 
    function open_window_resources() {
        const searchParams = new URLSearchParams(window.location.search);
    
    
        var script = document.createElement("script");
        var
            day = searchParams.has('day') ? searchParams.get('day') : new Date().getDate(),
            day2Digits = String(day).padStart(2, "0")
        ;
    
    
        script.src = "resources/" + searchParams.get("config_filename") + ".js";
        script.type = "text/javascript";
        script.async = false;
    
    
        setTimeout(() => {
            document.head.appendChild(script);
        }, 0);
    
    
        url_templates.forEach(
            function (template) {
                var url = template
                    .replace("%1", day)
                    .replace("%2", day2Digits)
                ;
    
    
                window.open(url);
            }
        );
    }
    
    
    $ cat resources/example.js 
    var url_templates = new Array(
        "URL1",
        "URL2",
        "URL3",
    );
    
    
    $ xdg-open index.html?config_filename=example
    
    
    Uncaught ReferenceError: url_templates is not defined
        at open_window_resources (window-resources.js:18:5)
        at onload (index.html?config_filename=example:5:40)
    open_window_resources @ window-resources.js:18
    onload @ index.html?config_filename=example:5

  7. #7
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,387
    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Ti riporto lo scenario reale
    Capisco la necessità, ma mi pare una grossa complicazione.
    Ad ogni modo, è una cosa che si può fare, quindi ci sta.

    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Uncaught ReferenceError: url_templates is not defined
    at open_window_resources (window-resources.js:18:5)
    at onload (index.html?config_filename=example:5:40)
    open_window_resources @ window-resources.js:18
    onload @ index.html?config_filename=example:5
    Non hai letto attentamente la mia risposta.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2013
    Messaggi
    151
    Purtroppo uso js una volta ogni tre anni (solo per qualche esigenza particolare) e mi dispiace perchè non sono per nulla pratico.
    Il debug passo passo non ho idea di come si faccia, e con quali strumenti, non lo so

    Se può aiutare

    codice:
    $ cat window-resources.js 
    function open_window_resources() {
        setTimeout(() => {
            console.log('aaa')
        }, 0);
        const searchParams = new URLSearchParams(window.location.search);
    
    
        var script = document.createElement("script");
        var
            day = searchParams.has('day') ? searchParams.get('day') : new Date().getDate(),
            day2Digits = String(day).padStart(2, "0")
        ;
    
    
        script.src = "resources/" + searchParams.get("config_filename") + ".js";
        script.type = "text/javascript";
        script.async = false;
    
    
        document.head.appendChild(script);
        setTimeout(() => {
            console.log('ccc')
        }, 0);
    
    
        url_templates.forEach(
            function (template) {
                var url = template
                    .replace("%1", day)
                    .replace("%2", day2Digits)
                ;
    
    
                window.open(url);
            }
        );
    }
    
    
    $ cat resources/example.js 
    var url_templates = new Array(
        "URL1",
        "URL2",
        "URL3",
    );
    setTimeout(() => {
        console.log('bbb')
    }, 0);

    In console


    codice:
    Uncaught ReferenceError: url_templates is not defined
        at open_window_resources (window-resources.js:22:5)
        at onload (index.html?config_filename=example:5:40)
    open_window_resources @ window-resources.js:22
    onload @ index.html?config_filename=example:5
    window-resources.js:3 aaa
    window-resources.js:19 ccc
    example.js:7 bbb
    Da cui intuisco che ccc viene eseguito prima di bbb
    Perchè?

    A mio avviso, la cosa non può funzionare così, perché quando tu crei l'elemento dello script all'interno della funzione start(), la funzione termina prima che il browser passi ad eseguire ciò che c'è all'interno dello script.
    Perchè?

    Non si può spezzare una funzione *non* asincrona in due parti.

    Il tuo log di "xxx" arriva evidentemente prima dell'esecuzione dello script config.js.
    Perchè?
    Ultima modifica di astros3; 01-10-2024 a 13:40

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2013
    Messaggi
    151
    Per giunta

    codice:
        script.async =false;
    
    Pensavo servisse a qualcosa, ma da quello che si vede...
    OK, uso altri linguaggi ma Java Script proprio non mi si appiglia

  10. #10
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,387
    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Purtroppo uso js una volta ogni tre anni (solo per qualche esigenza particolare) e mi dispiace perchè non sono per nulla pratico.
    Se vuoi programmare in JavaScript, devi essere pratico di JavaScript, almeno un minimo.

    Quote Originariamente inviata da astros3 Visualizza il messaggio
    Il debug passo passo non ho idea di come si faccia, e con quali strumenti, non lo so
    Ma si può sempre imparare, studiando.

    Quote Originariamente inviata da astros3 Visualizza il messaggio
    In console
    codice:
    Uncaught ReferenceError: url_templates is not defined
        at open_window_resources (window-resources.js:22:5)
        at onload (index.html?config_filename=example:5:40)
    open_window_resources @ window-resources.js:22
    onload @ index.html?config_filename=example:5
    window-resources.js:3 aaa
    window-resources.js:19 ccc
    example.js:7 bbb
    Da cui intuisco che ccc viene eseguito prima di bbb
    Perchè?
    Perchè?
    Perchè?
    Ma come "perché"?
    E' come dire "ho due istruzioni, e una viene prima dell'altra... perché?".
    Perché quello è l'ordine delle cose, è il principio di funzionamento del linguaggio, la convenzione prestabilita.

    L'uso di setTimeout() non voleva essere una proposta di soluzione, ma una dimostrazione del fatto che tutto ciò che viene "rimandato", viene eseguito in seguito, a dimostrazione che lo script referenziato dall'elemento nella pagina viene eseguito sicuramente dopo quello che lo definisce, ma con l'uso del setTimeout() si "rimanda a dopo" la sua esecuzione.

    Tu hai una funzione che crea un elemento il quale referenzia lo script da eseguire: ogni contenuto di quello script verrà eseguito dopo quello attuale, perché JavaScript non è multithreading e ciò che stai caricando si mette in coda alla routine corrente.

    L'uso di setTimeout() serviva a dimostrare che, pur con un intervallo a zero, se gli fai eseguire la stampa di qualcosa definita nello script che stai caricando dalla funzione, questa stampa va a buon fine, questo perché quella stampa in console viene dopo il caricamento dello script, che viene dopo l'esecuzione della funzione che crea l'elemento dello script nella pagina.

    In sintesi, non puoi nella stessa funzione utilizzare variabili definite nello stesso script che viene eseguito da un elemento <script> caricato dinamicamente.

    OK, uso altri linguaggi ma Java Script proprio non mi si appiglia
    In altri linguaggi sarebbe uguale, a parità di scenario.
    Non è un problema del linguaggio.

    Studia l'Event Loop di JavaScript..
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.