Categoría: Javascript

¿Cómo utilizar la función serialize() de jquery en controles que no están dentro de un form? #js #jquery

La función serialize de jquery nos sirve para serializar los elementos que se encuentra dentro de un formulario en específico, es decir, al aplicar la función obtenemos los elementos preparados para una petición al backend (campo1=1&campo2=2…).

Para que podamos hacer esta funcionalidad pero en elementos que no están dentro de un form sino dentro de un div por ejemplo lo podemos hacer de la siguiente manera:


<div id="UnDiv">
   <input type="text" name="campo1">
   <select name="campo2">
        <option value="1">1</option>
        <option value="2">2</option>
   </select>
   <input type="text" name="campo3">
</div>



//selector de jquery :input
var parametros = $('#UnDiv :input').serialize();

Recuerda poner el atributo name en los elementos a serializar y también otro tip, el selector “:input” selecciona todos los elementos de formulario, tanto input, select, textarea etc.

¿Cómo pasar parámetros cuando una función también es pasada como parámetro? #javascript #js

Para pasar una función como parámetro en javascript hice una entrada hace tiempo, en donde explico como javascript no permite mandar funciones como parámetros de otras funciones. Pero que pasa si deseamos enviar parámetros para esas mismas funciones anónimas que son en si, también un parámetro en otra función.

Abajo te muestro con un ejemplo como es posible lograrlo:


//función que realiza recibe una función y 2 parametros
function Muestra(funcion,mensaje1,mensaje2){

    //de esta manera aplicamos los 2 parametros
   funcion(mensaje1,mensaje2);
}

//creamos un objeto, esto para darle mas calidad al asunto nada mas.
var objeto = new Object();

//asignamos la función a nuestro atributo función
objeto.funcion=Muestra;

//de esta manera enviamos la función y a su vez 2 parámetros para la función
objeto.funcion(function(m,n){
                             console.log(m+n)
               },"hola"," mundo");

¿Cómo verificar automáticamente si existe la sesión web en un desarrollo web? C# .Net

En este video describo cómo es posible estar verificando si el usuario sigue teniendo la sesión en un sistema web.

Muchas veces nuestra sesión ha terminado por inactividad, y esta logística te servirá para tomar una decisión, si mandar al usuario a la pantalla de autentificación o simplemente mostrarle un mensaje de que su sesión expiro.

Ahora ya podrás ser capaz de detectar si la sesión ha terminado sin necesidad de que el usuario se entere hasta que de clic en algún elemento de tu pagina.

Descargar ejemplo

¿Cómo copiar el contenido al portapapeles de un elemento HTML al dar clic en él?

Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.

Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.

En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.

HTML


<table>
      <tr>
           <td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
           <td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
      </tr>
</table>


JAVASCRIPT


 function Copiar(element) {
        //creamos un input que nos ayudara a guardar el texto temporalmente
        var $temp = $("<input>");
        //lo agregamos a nuestro body
        $("body").append($temp);
        //agregamos en el atributo value del input el contenido html encontrado
        //en el td que se dio click
        //y seleccionamos el input temporal
        $temp.val($(element).html()).select();
        //ejecutamos la funcion de copiado
        document.execCommand("copy");
        //eliminamos el input temporal
        $temp.remove();
    }

¿Cómo hacer que una caja de texto solo acepte valores numéricos positivos? #jquery #js #html5

Para lograrlo vamos a utilizar el disparador keyup y jquery y haremos un selector por clase, en este caso la llamaremos positive, así podemos reutilizarlo en las cajas de texto que deseemos, código a continuación:

Código HTML


 <input value="" class="positive" min="1" type="number" step="1" name="cajita" id="cajita" />
 <input value="" class="positive" min="1" type="number" step="1" name="cajita2" id="cajita2" />

Código Javascript


$(".positive").keyup(function () {

            var valor = $(this).prop("value");

            //evaluamos si es negativo, y ponemos 1 por defecto
            if (valor < 0)
                $(this).prop("value", "1");
})

Crear sonido con el navegador con javascript, #HTML5, sin mp3, ni wav

Una forma para crear sonido sin utilizar una pista de sonido es utilizando la interface OscillatorNode la cual sirve para reproducir frecuencias en específico, esta interface nos ofrece algunos tipos de sonido y solo basta con crear el objeto y poner los atributos deseados, en el siguiente ejemplo tengo un arreglo el cual tiene las frecuencias de las notas musicales (hay unas redondeadas espero que no me crucifiquen los músicos) y dependiendo el botón presionado se ejecuta el sonido:

Demo:

Código HTML


<div>
    <button onclick="Sonido(0)">DO</button>
    <button onclick="Sonido(1)">DO#</button>
    <button onclick="Sonido(2)">RE</button>
    <button onclick="Sonido(3)">RE#</button>
    <button onclick="Sonido(4)">MI</button>
    <button onclick="Sonido(5)">FA</button>
    <button onclick="Sonido(6)">FA#</button>
    <button onclick="Sonido(7)">SOL</button>
    <button onclick="Sonido(8)">SOL#</button>
    <button onclick="Sonido(9)">LA</button>
    <button onclick="Sonido(10)">LA#</button>
    <button onclick="Sonido(11)">SI</button>
</div>

Código JS


    //contiene la vibración por segundo de la nota
    //posición en el arreglo: do=0,do#=1,re=2........
    var Sonidos= [261,277,293,311,329,349,369,392,415,440,466,493];

    //creamos contexto
    var context = new (window.AudioContext || window.webkitAudioContext)();

    function Sonido(nota){
         //creamos oscilador
        var osc = context.createOscillator();

        // admite: sine, square, sawtooth, triangle
        osc.type = 'sawtooth'; 

        osc.frequency.value=Sonidos[nota];

        //asignamos el destino para el sonido
        osc.connect(context.destination);
        //iniciamos la nota
        osc.start();
        //detenemos la nota medio segundo despues
        osc.stop(context.currentTime + .5);

    }

Un poco de canvas en este 2018

A lo largo de mi vida profesional he conocido pocos programadores que se involucran realmente en el desarrollo de videojuegos, con la llegada de HTML5 se nos facilitó el desarrollo de juegos gracias a canvas (algo inventado por Apple en el 2004), pero hoy ya más de 10 años después pocos lo conocen realmente, un propósito que tengo el siguiente año es dominarlo a la perfección, no tanto por aspectos laborales sino por un hobby que viene desde mi niñez, crear videojuegos.

Ya he realizado algunas cosas con canvas, pero como todo no por hacer unos cuantos gráficos o animaciones quiere decir que sea un experto (muchos por hacer algo ya ponen en su CV que son expertos), y no es para que todos los desarrolladores se involucren en esta tecnología ni hacer una revolución de ella la cual ya lo fue hace algunos años, sino simplemente dejar este escrito aquí para ser leído por mí un año después.

Por lo pronto abajo dejo un código que hice ahorita en 10 min para que los acompañe cuando tomen hongos o alguna otra droga psicodélica.

Código HTML

 <canvas width="500" height="500" id="myCanvas" > </canvas>

Código JAVASCRIPT


var context = document.querySelector("#myCanvas").getContext('2d');
context.beginPath();
context.arc(250,250,200,0,2*Math.PI,false)
context.fill();
context.stroke();
context.closePath();


    var i=0;
    setInterval(function(){

        DibujaPoligono("#myCanvas",3,i);
       
        if(i==360)
            i=0;  
        i++;

   },10);
    

    function DibujaPoligono(canvas,sides,iTurn){

        var context = document.querySelector(canvas).getContext('2d');
       
        context.beginPath();
        context.fillStyle = "white";
        context.strokeStyle="black";
        
        //pentagono
        var numberOfSides = sides,
            size = 200,
            Xcenter = 250,
            Ycenter = 250,
            step  = 2 * Math.PI / numberOfSides,//para pintar la figura calculamos la posicion
            shift = (Math.PI / 180.0) + iTurn; //giro


        for (var i = 0; i <= numberOfSides;i++) {
            var curStep = i * step + shift;
            
            context.lineTo (Xcenter + size * Math.cos(curStep), Ycenter + size * Math.sin(curStep));
        }


      
        context.fill();
        context.stroke();
        context.closePath();

}

Como obtener el nombre del navegador por medio de #javascript #js

Para obtener cual es el navegador por el cual entra el usuario a nuestro sitio web, anexo la siguiente función la cual regresa un entero dependiendo el navegador:


//1= Opera
//2= Firefox
//3= Safari
//4= IE
//5= Edge
//6= Chrome
//7= Blink
function cualNavegador(){
	// Opera 8.0+
	var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

	// Firefox 1.0+
	var isFirefox = typeof InstallTrigger !== 'undefined';

	// Safari 3.0+ "[object HTMLElementConstructor]"
	var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

	// Internet Explorer 6-11
	var isIE = /*@cc_on!@*/false || !!document.documentMode;

	// Edge 20+
	var isEdge = !isIE && !!window.StyleMedia;

	// Chrome 1+
	var isChrome = !!window.chrome && !!window.chrome.webstore;

	// Blink
	var isBlink = (isChrome || isOpera) && !!window.CSS;

	if(isOpera)return 1;
	if(isFirefox)return 2;
	if(isSafari)return 3;
	if(isIE)return 4;
	if(isEdge)return 5;
	if(isChrome)return 6;
	if(isBlink)return 7;

	return 0; //sin identificar
}