Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: fran70 en 04 de Febrero 2017, 02:00

Título: JavaScript diferencia entre ámbito global y local ejemplo innerHTML CU01138E
Publicado por: fran70 en 04 de Febrero 2017, 02:00
Aqui dejo la entrega del ejercicio CU01138E del curso de programación web con JavaScript. Me cuesta bastante crear la logica para resolver problemas, me complico yo solo... luego tengo que dar vueltas al codigo para intentar limpiar y dejarlo legible... poco a poco y practicando ire asimilando conceptos. Saludos.

Código: [Seleccionar]
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio Tema 38 - innerHTML...(CU01138E)</title>
    <style>
        body{
            font-family: Arial;
            text-align: center;
        }
        #principal {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid black;
            position: relative;
            box-sizing: content-box;
        }
        #principal>div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            line-height: 100px;
            float: left;
            box-sizing: border-box;
        }
        button{
            display: block;
            margin: 20px auto;
        }
    </style>
    <script>
      var contador = 1;
      var divs = document.getElementsByTagName('div');
      var avanzar = function () {
        switch (contador) {
          case 1:
            divs[1].style.color = 'white';
            divs[1].style.backgroundColor = 'black';
            divs[1].innerHTML = 'El';
            contador++;
            break;
          case 2:
            divs[2].innerHTML = 'Poder';
            contador++;
            break;
          case 3:
            divs[3].innerHTML = 'de';
            contador++;
            break;
          case 4:
            divs[4].style.backgroundColor = 'yellow';
            divs[4].innerHTML = 'JavaScript';
            contador++;
            break;
          case 5:
            var msg = document.createElement('div');
            msg.style.fontSize = '.8em';
            msg.innerHTML =  '<h2>LO SIENTO, PERO NO ES POSIBLE AVANZAR MAS</h2>';
            document.body.appendChild(msg);
            contador++;
            break;
          default:
        }
      }
    </script>
</head>
<body>
<div id="principal">
    <div>?</div>
    <div>?</div>
    <div>?</div>
    <div>?</div>
</div>
<button onclick="avanzar()">Avanzar</button>
</body>
</html>
Título: Re:JavaScript:Tema 38 innerHTML - CU01138E
Publicado por: pedro,, en 04 de Febrero 2017, 14:05
Hola fran70.

Tu ejercicio está bastante bien resuelto.
Comentarte sobre esta línea:
Código: [Seleccionar]
var divs = document.getElementsByTagName('div');
Lo ideal sería que estuviese dentro de la función avanzar ya que solo es usada desde dentro de esta función y no necesitamos tenerla declarada con ámbito global.


Saludos.  ;D
Título: Re:JavaScript:Tema 38 innerHTML - CU01138E
Publicado por: fran70 en 04 de Febrero 2017, 14:43
Pues si tienes toda la razon, es donde deberia estar: como variable local de la funcion.
Muchas gracias.