El txoko del programador: 2014

miércoles, 4 de junio de 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.

sábado, 31 de mayo de 2014

Galería de fotos sencilla con HTML, CSS y JavaScript

En este caso vamos a hacer una simple galería de fotos para nuestra página web. Es muy fácil de hacer y muy sencilla de entender. El código está generado por mí al 100% sin haber copiado de ningún lado. Podéis copiar el código si queréis directamente pero es mejor que lo entendáis y lo modifiquéis a vuestro antojo. Se trata de una galería fotográfica con tres fotos. Una siempre se muestra en grande, cada tres segundos pasa a la siguiente foto, pero si hacemos click en una de las fotos pequeñas sale en grande la que hemos elegido.

Veamos el código HTML que debe ir en head:

Veamos el código CSS que debe ir en head:

#galeria{ border: 4px solid #424242; width: 600px; height: 510px; background-color: #D8D8D8;}
#grande{ border: 2px solid #6E6E6E; width: 556px; height: 346px; margin-left: 20px; margin-top: 20px;}
.pequenas{ border: 2px solid #6E6E6E; width: 170px; height: 108px; float: left; margin-top: 10px; margin-left: 19px;}

Veamos el código JavaScript que debe ir en head:

var fotos = ["foto1.jpg","foto2.jpg","foto3.jpg"];
var fotosP = ["fotop1.jpg","fotop2.jpg","fotop3.jpg"];
var fotosURL = ["url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto1.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto2.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto3.jpg)"];

function cargarFotos(){
 document.getElementById('grande').style.backgroundImage = "url(foto1.jpg)";
 for(fo=1;fo<=3;fo++){
  fo = parseInt(fo);
  document.getElementById('pequena'+fo).style.backgroundImage = "url("+fotosP[fo-1]+")";
 }
}
  
function rularFotos(){
 queFoto = document.getElementById('grande').style.backgroundImage;
 //alert(fotosURL[0]);
   
 if(queFoto == fotosURL[0]){
  document.getElementById('grande').style.backgroundImage = fotosURL[1];
 }else{
  if(queFoto == fotosURL[1]){
   document.getElementById('grande').style.backgroundImage = fotosURL[2];
     }else{
   document.getElementById('grande').style.backgroundImage = fotosURL[0];
  }
 }
 setTimeout(rularFotos,3000);
}
  
function cambiarFoto(num){
 document.getElementById('grande').style.backgroundImage = fotosURL[num]; 
}

En el body deberemos poner onLoad="cargarFotos();rularFotos()" para que se ejecuten las funciones.
Veamos el código HTML que debe ir en body:

Los nombres de carpetas, las rutas etc. hay que poner las de vuestro ordenador, evidentement los nombres de las fotos etc. también hay que cambiarlos. Os dejo un enlace del script completo con fotos incluidas.
http://www.eneko-bernaldo.site90.net/scripts/galeria.rar
Un saludo.

jueves, 29 de mayo de 2014

Hacer un virus de broma con JavaScript

Este es el código para hacer una pequeña broma a un amigo o familiar. Mediante JavaScript simulamos que el ordenador ha sido infectado por un troyano.

El código es el siguiente:
Dentro del head ponemos:

Dentro del body ponemos:

Ejemplo:

Si ya queréis trabajarlo mas y asustar de verdad podéis hacer algo parecido a esto:

http://pelicula300.net63.net/videos_humor/video_humor.html

Simplemente le he metido un sonido de Avast y además le he hecho un script que simula la eliminación de archivos del sistema.

Os pongo las imágenes del código que yo he hecho para que os hagáis a la idea y lo modifiquéis a vuestro gusto:

Un saludo.

lunes, 26 de mayo de 2014

Código HTML + JavaScript para usar la Webcam

He encontrado un script muy interesante para poder usar la Webcam mediante HTML y JavaScript.
El código es el siguiente:

En el head ponemos:

    
    Prueba de cámara Web

En el script de Javascript ponemos:

//Nos aseguramos que estén definidas
//algunas funciones básicas
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || function(){alert('Su navegador no soporta navigator.getUserMedia().');};
 
jQuery(document).ready(function(){
    //Este objeto guardará algunos datos sobre la cámara
    window.datosVideo = {
        'StreamVideo': null,
        'url' : null
    };
     
    jQuery('#botonIniciar').on('click', function(e){
        //Pedimos al navegador que nos de acceso a 
        //algún dispositivo de video (la webcam)
        navigator.getUserMedia({'audio':false, 'video':true}, function(streamVideo){
            datosVideo.StreamVideo = streamVideo;
            datosVideo.url = window.URL.createObjectURL(streamVideo);
            jQuery('#camara').attr('src', datosVideo.url);
        }, function(){
            alert('No fue posible obtener acceso a la cámara.');
        });
 
    });
 
    jQuery('#botonDetener').on('click', function(e){
        if(datosVideo.StreamVideo){
            datosVideo.StreamVideo.stop();
            window.URL.revokeObjectURL(datosVideo.url);
        };
    });
 
 jQuery('#botonFoto').on('click', function(e){
    var oCamara, 
        oFoto,
        oContexto,
        w, h;
         
    oCamara = jQuery('#camara');
    oFoto = jQuery('#foto');
    w = oCamara.width();
    h = oCamara.height();
    oFoto.attr({'width': w, 'height': h});
    oContexto = oFoto[0].getContext('2d');
    oContexto.drawImage(oCamara[0], 0, 0, w, h);
 
});
});

En el body ponemos:

He encontrado el código en esta página web: http://variabletecnica.com/2012/09/30/acceso-a-la-camara-con-html5/ Ahí explican mejor todo.
Un saludo.