Advertisement
fcamuso

Javascript Lezione 54

Jul 6th, 2022
682
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="EN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>DOM</title>
  6.  
  7.     <link rel="stylesheet" href="style.css">
  8.  
  9.     <style>
  10.         img {width: 50px; height: 50px;}
  11.         td, #img1 {border: 1px solid black;}
  12.         .testoRosso {color: red;}
  13.         .sfondoGiallo {background-color: yellow;}
  14.         .font35 {font-size: 35px;}
  15.         .font25 {font-size: 25px;}
  16.         span {font-size: 25px;}
  17.     </style>
  18.  
  19. </head>
  20. <body>
  21.     <div id='div1'>
  22.         <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
  23.         <p id="p2">secondo paragrafo
  24.                    <img id="img1" src="teatro1.png">
  25.                    <img id="img2" src="teatro2.png">
  26.         </p>
  27.     </div>
  28.  
  29.     <div id='div2'>
  30.         <a href="https://www.bbc.com">sito bbc</a>
  31.     </div>
  32.  
  33.     Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
  34.     Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
  35.     Roma   <input type="checkbox" name="capitali" id="cb3">
  36.     Madrid <input type="checkbox" name="capitali" id="cb4"> <br> <br>
  37.     Luogo nascita <input type="text" id="localita"> <br> <br>
  38.     Lingua madre <input type="text" id="lingua">
  39.  
  40.  
  41.     <script>  
  42.        //interna() forma una CLOSURE
  43.     //    function esterna(parametro)
  44.     //    {
  45.     //       let varEsterna = "varEsterna";
  46.  
  47.     //       function interna()
  48.     //       {
  49.     //         let varInterna = "varInterna";
  50.     //         console.log(varEsterna);
  51.     //       }
  52.  
  53.     //       return interna;
  54.     //    }
  55.        
  56.     //    let f = esterna('parametro');
  57.     //    f();
  58.  
  59.    
  60.        //logica di acquisizione parametri e setup
  61.        function setupConfigurazione(){        
  62.          return {imgZoomWidth: '200px', imgZoomHeight: '200px'};
  63.        }
  64.  
  65.  
  66.        function setHandler()
  67.        {
  68.          let configurazione = setupConfigurazione();
  69.  
  70.          document.getElementById('img2')
  71.             .addEventListener('mouseover', function (e) {
  72.                 console.log(configurazione);
  73.                 this.style.width = configurazione.imgZoomWidth;
  74.                 this.style.height = configurazione.imgZoomHeight;
  75.          });
  76.         };
  77.  
  78.         setHandler();
  79.  
  80.     // SOLUZIONE CHE USA VARIABILI GLOBALI: FORTEMENTE SCONSIGLIATA!
  81.     //    const configurazione = setupConfigurazione();
  82.  
  83.     //    const img2 = document.getElementById('img2')
  84.     //      .addEventListener('mouseover', function (e) {
  85.     //         this.style.width = configurazione.imgZoomWidth;
  86.     //         this.style.height = configurazione.imgZoomHeight;
  87.     //    });
  88.  
  89.  
  90. </script>
  91. </body>
  92. </html>
Advertisement
RAW Paste Data Copied
Advertisement