Posts

HTML5 | Drag & Drop

Image
En este "tutorial" explicare con mis palabras y lo mas claro posible el tema de arrastrar y soltar (mas bien conocido como Drag and Drop) en HTML. En primer lugar esta "propiedad" es un Api de HTML5, y hasta la fecha en el cual se escribio este post, no funciona en todas las versiones de browser. Como siempre IE, da la nota siendo solamente posible hacer funcionar d&d en la version 11. Vamos al codigo!! Antes de iniciar, la salida de esto es, en la parte superior tres recuadros que seran los "destinos" y abajo un rectangulo general, con cajitas que seran los elementos "movibles". 1 - HTML dentro del body <!-- Aqui tenemos el sector superior que tendra los tres recuadros destinos -->      < section   class = "sectionTop" >      < article   class = "sectionTop-article left" ></ article >      < article   cla...

Javascript | Tips

Como saber el tipo de nuestras variables u objetos /* Crearemos una funcion en el cual le pasamos un valor y nos devuelve el tipo de dato ---------------------------------------------------------------------*/ function   GetType ()   {      return   Object . prototype . toString . call ( arguments [ 0 ]); } console . log ( '→ ' ,   GetType ( 123 ));            // →  [object Number] console . log ( '→ ' ,   GetType ( false ));          // →  [object Boolean] console . log ( '→ ' ,   GetType ({}));             // →  [object Object] console . log ( '→ ' ,   GetType ([ 'ss' ,   22 ]));     // →...

Llamado AJAX desde aspx page

Image
Buenas a todos. En esta ocasión presentare como llamar a un metodo (WebMethod) en paginas de sitios ASP.NET Web Form, o  mas conocido como "paginas aspx", con la tecnologia AJAX. Para hacerlo mas simple, el ejemplo lo he realizado todo en un solo archivo, dentro de ella tenemos el front-end y back-end. Como script front uso jquery y como lenguaje back-end, C# (cSharp). El resultado final es un boton, que al dar click mostrará la hora actual de forma asíncrona usando Ajax. Ejemplo: nombre de nuestra pagina →   ajaxUsingWebMethod.aspx En primer lugar mostraremos el html de estos pequeños controles      < div >          < input   type = "button"   id = " btnAjax "   value = "Call Ajax"   />          < label   for = "txtOutput" >             Output ...

Javascript : preventDefault & stopPropagation

Hoy en dia, se usa mucho el codigo javacript , y cada vez veo mas el ".on('click', function...." o similares (segun como cada uno lo aplique)..., pero me refiero a la asignacion de accion a un evento a través de codigo. Debido a esto, seguramente muchas veces hemos visto funciones que llevan (o no) el parametro "e" o "evt", indicando que se espera o se quiere trabajar con el evento del objeto actual. Éste parametro tiene varias propiedades, pero hoy solo les hablare del  preventDefault y stopPropagation. stopPropagation |- Detiene la ejecucion en el evento actual, "cortando" el efecto bubbling. Ejemplo: (nuestro html ) <! DOCTYPE   html > < html > < head > < title ></ title > </ head > < body > < div   id = "divTop2" > < div   id = "divTop1" > < a   id = "a"   href = "http://www.google.com" >Google</ a > ...

Javascript : Global scope

Muchas veces en nuestras vidas nos hemos topado con aplicar o "codear" codigo javascript. Seguramente en nuestros primeros tiempos, solo haciamos validaciones, algun que otro aplique de estilos y nada mas. Pero hoy en dia es mucho mas potente, y porque no decir, uno de lo mas potentes lenguajes. Hoy les hablare del famoso tema "Global Scope" que tal vez muchas veces lo escuchaste, quisiste aprenderlo pero nunca te quedo claro, o no le diste mucha importancia. Global Scope, traducido al español es " alcance global ", pero el tema en si, explicado con mis propias palabras, quiere decir algo como " hacer esto aca, y que no se mezcle con lo que ya existe, o pueda existir a futuro "...algo asi :) Pero mejor, veamos un ejemplo : - Imaginemos un index.html con el siguiente codigo embebido dentro de los tags script var  soyVariableA;  // creo variable // funciones para setear y mostrar valor function  set(val) { soyVa...

C# | Extension Methods (Metodos de extension)

Hola.... En el dia de hoy, les hablare sobre los Extension Methods o como se dice en español Metodos de Extension . Esta..."forma" de hacer cosas, se usa especificamente para crear de forma personalizable (por asi decirlo) metodos que necesitamos, y que el propio objeto no las tiene o se realizan de otra manera que no nos convence. Veamos a un simple ejemplo: Clase A // Tenemos estos datos... var  arrayOfNumbers  =   new [] {  25 ,  36 ,  5 ,  66 ,  11 ,  78  }; const   int  myNumber  =   66 ; /*      Queremos saber si 'myNumber' está o existe dentro del array 'arrayOfNumbers'.     O sea, queremos solo la respuesta SI o NO existe. (true or false)     Normalmente esto se podria hacer asi.....

Javascript : setter & getter

Hola a todos!!... Os regereseis -nose porque me hago el español :)- después de mucho tiempo de inactividad en mi blog, pero no asi en el mundo Internet/IT, con un nuevo tema y muy interesante para los desarrolladores, ...mayormente para aquellos que están del lado front-end. Me refiero a Javascript y los famosos GET & SET Manos a la obra!! Si bien, en js podemos crear propiedades para un objeto de varias formas, siendo la más común añadiéndola con un punto o de forma literal, hay veces que es necesario hacer ciertas "modificaciones" o transformación al valor a setear o sino, obtener de una forma "distinta" o diferente el valor de cierto campo o propiedad. Veamos un ejemplo simple: // Creo una "clase" Persona function   Personas ( nombre ,   apellido )   {      this . firstname   =   nombre ;   // Seteo nombre que se envía por parámetro   ...