El txoko del programador: junio 2014

Bucle JavaScript - Hacer grande y pequeño un Div de HTML

Siguiendo en la línea de manipulación del estilo CSS con JavaScript he hecho un sencillo script que os explico a continuación.

Creo un elemento con un alto y un ancho de 50px, cuyo fondo es de color rojo. Con el script lo que consigo es que se vaya agrandando hasta conseguir un ancho y un alto de 500px. Cuando llega a ese tamaño su fondo cambia a color azul y vuelve a su posición original haciendose pequeño. No para en ningún momento.
Podéis ver el script en marcha en:

www.eneko-bernaldo.site90.net/scripts/agrandarDiv.html

Aquí os dejo el código:

<html>
 <head>
  <title>Agrandar Div</title>
  <script type="text/javascript">
  
   var ancho = 50;
   var alto = 50;
   
   function darEstilo(){
    document.getElementById('divUno').style.width = "50px";
    document.getElementById('divUno').style.height = "50px";
    document.getElementById('divUno').style.backgroundColor = "red";
    agrandarDiv();
   }
   
   function agrandarDiv(){
    ancho = ancho + 1;
    alto = alto + 1;
    elAncho = ancho.toString()+"px";
    elAlto = alto.toString()+"px";
    document.getElementById('divUno').style.width = elAncho;
    document.getElementById('divUno').style.height = elAlto;
    
    if(ancho < 500){
     setTimeout(agrandarDiv,1);
    }
    else{
     document.getElementById('divUno').style.backgroundColor = "blue";
     hacerPequeno();
    }
   }
   
   function hacerPequeno(){
    ancho = ancho - 1;
    alto = alto - 1;
    elAncho = ancho.toString()+"px";
    elAlto = alto.toString()+"px";
    document.getElementById('divUno').style.width = elAncho;
    document.getElementById('divUno').style.height = elAlto;
    
    if(ancho > 50){
     setTimeout(hacerPequeno,1);
    }
    else{
     document.getElementById('divUno').style.backgroundColor = "red";
     agrandarDiv();
    }
   }
  </script>
 </head>
 <body onLoad="darEstilo()">
  
 </body>
</html>

Un saludo.

Variables y Arrays en JavaScript. Como convertir variables de cadenas en números y viceversa

Declaración de variables y arrays en JavaScript:

// Declaraciones de variables 

var numero = 1; /* Declaramos una variable global numérica
                   que se podra usar en cualquier ámbito,
                   es decir, se puede utilizar en 
                   cualquier función JavaScript que tengamos */
       
function x(){   // Declaramos una variable de ámbito. Es decir
   numero2 = 2; // esta variable solo podra ser utilizada
}               // en esta función.

function y(){
   numero = numero + 1; // Por ejemplo en esta función hemos 
}                       // utilizado la variable global que 
                        // hemos declarado al principio, pero
                        // no podemos utilizar la variable 
                        // numero2 que hemos creado en la 
                        //función anterior

// Tipos de variables

var numero = 1;      // Hemos declarado una variable númerica

var numero2 = "1";   // Hemos declarado una variable de caracteres

numero = numero + 1; // Si numero = 1, entonces numero + 1 = 2.
                     // Ahora la variable numero contiene 2.
       
numero2 = numero2 + 1; // Hemos intentado sumar una variable de 
                       // caracteres con un número. Dara error
                       // y JavaScript dejará de funcionar.

numero2 = numero2 + "1"; // A la cadena que había en la variable
                         // numero2 (en este caso 1) le concatena
                         // otro 1, por lo tanto ahora numero2
                         // tendra la cadena 11.

// Declaración y tipos de Arrays
// Un Array se puede definir como un tipo de variable que puede
// contener infinitos valores, bien sean de caracteres o 
// de tipo numérico.

var arrayNumerico = [1,2,3,4,5]; // En los Arrays, la primera
                                 // posición es la posición 0.
                                 // Así pues la posición 0 
                                 // contendrá el valor 1 en 
                                 // este caso.

var arrayCaracteres = ["Hola","Adios","Tio","Padre","Hijo"];
                                 // Hemos creado un Array
                                 // de cadenas/caracteres.

// Acceder al valor del Array

arrayNumerico[0]; // Accedemos a la posición 0, que en
                  // este caso tiene el valor 1.

var suma = arrayNumerico[0] + arrayNumerico[3]; 
                  // La variable suma tendrá el valor de la suma 
                  // de las posiciones 0 y 3 del Array. Por lo 
                  // tanto, 1 + 4 = 5, suma contiene 5.

var saludo = arrayCaracteres[0] + arrayCaracteres[3];
      // La variable saludo tendrá el valor de la
      // la suma de las posiciones 0 y 3 del Array
      // de caracteres. Por lo tanto, "Hola" + "Padre"
      // = "HolaPadre", saludo contiene "HolaPadre".

      
// Convertir númericos a caracteres y viceversa

var numero = 1;             // Asignamos un número a la variable
numero = numero.toString(); // Convertimos la variable en cadena

var cadena = "12345";       // Asignamos una cadena a la variable
cadena = parseInt(parseFloat(cadena));  // Convertimos la variable 
                                        // en una número.

    // Evidentemente las letras y símbolos no se pueden
    // convertir en números. Solo las cadenas que estén
    // formadas por números.

Un saludo.

Modificar estilo CSS con JavaScript

Como bien sabemos el lenguaje para darle estilo al HTML se llama CSS. También debemos saber que una vez que hemos diseñado una página web con HTML+CSS y tiene una hoja de estilo fija de CSS, ese código se puede cambiar a nuestro antojo con scripts de JavaScript, sin tener que hacer una nueva hoja de estilo de CSS.

Así pues este código HTML+CSS:

<html>
 <head>
  <title>JavaScript y CSS</title>
  <style type="text/css">
      #divUno { 
        width: 200px; 
        height: 200px;
        background-color: #ff0000;
      }
  </style>
 </head>
 <body>
  

</body>
</html>

Y estre otro código HTML+JavaScript:

<html>
 <head>
  <title>JavaScript y CSS</title>
  
 </head>
 <body>
  

</body>
</html>

Obtendran el mismo resultado: un cuadrado rojo de 200x200 con fondo rojo.

Con JavaScript se puede acceder a todas las propiedades CSS de un objeto.
Un saludo.

Reproductor de audio JavaScript con varias canciones

En este caso vamos a crear un reproductor de audio con HTML, CSS y JavaScript. En mi caso he elegido tres canciones que tengo subidas al dropbox en la carpeta Public.

Veamos el código HTML:

<body onLoad="pasarCancion()">
 





  
  
  
  
  
  


Avast! Free Antivirus
Gaseosa la Cruz de Gorbea
Aliens VS Predator


</body>

Veamos el código JavaScript:

//

Podéis descargar el código entero desde: www.eneko-bernaldo.site90.net/scripts/canciones.rar
Un saludo.

miércoles, 4 de junio de 2014

Bucle JavaScript - Hacer grande y pequeño un Div de HTML

Variables y Arrays en JavaScript. Como convertir variables de cadenas en números y viceversa

Modificar estilo CSS con JavaScript

Reproductor de audio JavaScript con varias canciones