Javascript Lezione 55

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>DOM</title>

    <link rel="stylesheet" href="style.css">

    <style>
        img {width: 50px; height: 50px;}
        td, #img1 {border: 1px solid black;}
        .testoRosso {color: red;}
        .sfondoGiallo {background-color: yellow;}
        .font35 {font-size: 35px;}
        .font25 {font-size: 25px;}
        span {font-size: 25px;}
    </style>

</head>
<body>
    <div id='div1'>
        <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro1.png">
                   <img id="img2" src="teatro2.png">
        </p>
    </div>

    <div id='div2'>
        <a href="https://www.bbc.com">sito bbc</a>
    </div>

    Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
    Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
    Roma   <input type="checkbox" name="capitali" id="cb3">
    Madrid <input type="checkbox" name="capitali" id="cb4"> <br> <br>
    Luogo nascita <input type="text" id="localita"> <br> <br>
    Lingua madre <input type="text" id="lingua">


    <script>
       //interna() forma una CLOSURE
    //    function esterna(parametro)
    //    {
    //       let varEsterna = "varEsterna";

    //       function interna()
    //       {
    //         let varInterna = "varInterna";
    //         console.log(varEsterna);
    //       }

    //       return interna;
    //    }

    //    let f = esterna('parametro');
    //    f();


       //test IIFE
    //    (function f()
    //    {
    //       console.log("IIFE!");
    //    }) ();

       //logica di acquisizione parametri e setup
       function setupConfigurazione(){
         return {imgZoomWidth: '200px', imgZoomHeight: '200px'};
       }

       //IIFE Immediately Invocated Function Expression
       //associamo una tantum l'event handler all'elemento img2
    //    (function setHandler()
    //    {
    //      let configurazione = setupConfigurazione();

    //      document.getElementById('img2')
    //         .addEventListener('mouseover', function (e) {
    //             console.log(configurazione);
    //             this.style.width = configurazione.imgZoomWidth;
    //             this.style.height = configurazione.imgZoomHeight;
    //      });
    //     }) ();

    //     setHandler();

    let configurazione = setupConfigurazione();


    //    function setHandler()
    //    {
    //      let configurazione = setupConfigurazione();

    //      document.getElementById('img2')
    //         .addEventListener('mouseover', function (e) {
    //             console.log(configurazione);
    //             this.style.width = configurazione.imgZoomWidth;
    //             this.style.height = configurazione.imgZoomHeight;
    //      });
    //     };


       const img2 = document.getElementById('img2')
          .addEventListener('mouseover',
          (function (e) {
             let configurazione = setupConfigurazione();
             return function (e){
                 this.style.width = configurazione.imgZoomWidth;
                 this.style.height = configurazione.imgZoomHeight;
             };
          })());

        //setHandler();


    // SOLUZIONE CHE USA VARIABILI GLOBALI: FORTEMENTE SCONSIGLIATA!
    //    const configurazione = setupConfigurazione();

    //    const img2 = document.getElementById('img2')
    //      .addEventListener('mouseover', function (e) {
    //         this.style.width = configurazione.imgZoomWidth;
    //         this.style.height = configurazione.imgZoomHeight;
    //    });


</script>
</body>
</html>