Javascript

[Review] Review del libro Learning JavaScriptMVC

Posted on Actualizado enn

JavaScriptHace una par de días, estuve leyendo el libro Learning JavaScriptMVC, y me gustaría compartir con ustedes un pequeño review para ver si se animan a leerlo.

El libro consta de 124 páginas, lo cual facilita el ser leído rápidamente, esta enfocado a tratar el framework JavaScriptMVC y a darte las bases para que rápidamente puedas utilizar dicho framework si es que ya no lo estás haciendo, el libro tiene seis capítulos que son:

Capítulo 1: Getting Started with JavaScriptMVC

Una rápida introducción al framework JavaScriptMVC, revisando sus principales características y las ventajas que ofrece su uso, así mismo se enumeran y explican sus principales componentes, para abordarlos más específicamente en los siguientes capítulos.

Capítulo 2: DocumentJS

Capítulo dedicado al componente DocumentJS, en el cual podemos ver como documentar nuestro JavaScript de una buena forma, y ofrece una buena explicación sobre las directivas que podemos utilizar.

Capítulo 3: FuncUnit

Una parte fundamental de toda aplicación es que pueda ser testeada, por eso tenemos un capítulo dedicado a realizar pruebas funcionales utilizando FuncUnit.

Capítulo 4: jQueryMX

jQueryMX es una colección de librerías jQuery que ofrecen caracteríasticas para trabajar con AJAX, con formato JSON, manejo del DOM entre otros, y es un componente clave en JavaScriptMVC, así que otro capítulo dedicado a revisar dicho componente.

Capítulo 5: StealJS

StealJS es uno de los componentes más interesantes en JavaScriptMVC, este provee un set de funcionalidades bastante amplio los cuales los agrupan en Dependency management, Concatenation and compression, Logger, Code generator, Package management and Code cleaner, así que tenemos un capítulo dedicado a dichas características las cuales son bastante amplias.

Capítulo 6: Building the App

Y el capítulo final, luego de algo de teoría para entender JavaScriptMVC, viene la parte más interesante, la construcción de una aplicación utilizando los conceptos anteriores.

Es un libro bastante sencillo de leer, el cual aborda de forma sencilla los conceptos básicos de JavaScriptMVC y nos lleva por cada componente para entender su uso, así que si quieres aprender un buen framework para el front-end este puede ser una buena elección.

Y de nuevo gracias a los amigos de Packt por el libro!

Saludos.

[ASP.NET Web API] Web API IV – Implementando Knockoutjs

Posted on Actualizado enn

Hola a todos, en el post anterior vimos como podemos consumir nuestro servicio REST de Web API utilizando jQuery y AJAX (míralo acá), creamos un archivo JavaScript para mantener separado el contenido (HTML) del comportamiento de la página (JavaScript), sin embargo, con solo observar el archivo js creado, nos damos cuenta que dicha afirmación no es del todo cierta, puesto que tenemos una dependencia total a los elementos del DOM, y si en algún momento el HTML llega a cambiar o los id´s de los elementos vamos a tener problemas.

Para solucionar el problema anterior, una posible solución es implementar un framework JavaScript como Knockout, el cual permite trabajar el patrón MVVM (model-view-view model) en el cliente; en este post no voy a entrar en detalles técnicos de este framework (probablemente luego haga una serie sobre el tema) ni a discutir si es o no la mejor opción, solo comentare que a mi me gusta, me ayuda a trabajar mejor en el cliente y que cumple su objetivo, además si hasta inicias con JavaScript, Knockout te será sencillo de entender.

Luego de una pequeña introducción iniciemos (seguimos con el ejemplo del anterior post), lo primero es añadir Knockout, para ello vamos a hacer uso de Nuget:

knockout

Ahora en la clase BundleConfig (en la carpeta App_Start) en el método RegisterBundles añadimos un nuevo bundle para knockout:

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
        "~/Scripts/knockout-{version}.js"));

Luego en el layout (Views/Shared/_Layout.cshtml) del sitio lo referenciamos al final:

@Scripts.Render("~/bundles/knockout")

Ahora que ya tenemos listo a Knockout, iniciamos con el refactoring de person.js, la idea es crear un ViewModel que permita trabajar de manera desconectada del DOM las operaciones CRUD implementadas, lo primero que haremos y para poder trabajar mejor con Knockout es agregar una referencia a knockout-2.3.0.debug.js (en el momento de escribir el post la versión que uso es la 2.3.0) en person.js para tener intellisense

/// <reference path="../knockout-2.3.0.debug.js" />

Luego definimos el modelo:

var PersonViewModel = function () {
    self = this;
    self.id = ko.observable();
    self.name= ko.observable();
    self.lastname= ko.observable();
    self.twitter= ko.observable();
    self.personList= ko.observableArray();
	.....
}

Y al definir el modelo ya tenemos varios cambios importantes:

  • Definición del objeto PersonViewModel
  • A self le asignamos this para evitar conflictos al acceder a las propiedades del objeto
  • Las propiedades se definen como observables, es decir si cambia la propiedad el objeto HTML asociado también lo hará, y viceversa.
  • La propiedad personList es observable y a la vez es un array.

Ahora comenzamos a añadir funciones a nuestro viewmodel:

Obtener todos los elementos

self.getAll = function () {
	$.getJSON('/api/person', function (data) {
		self.personList(data);
	});
}

En este caso de nuevo se realiza la petición con $.getJSON, la diferencia radica en que la respuesta se la seteamos como valor al array observable.

Obtener un elemento

self.getPersonById= function () {
	var url = '/api/person/' + self.id();
	$.getJSON(url)
		.done(function (data) {
			self.name(data.Name);
			self.lastname(data.LastName);
			self.twitter(data.Twitter);
		})
		.fail(function (erro) {
			self.clearForm();
	});
},

La funcionalidad básica permanece casi que igual, sin embargo los cambios que se observan son:

  • Se utiliza self.id() para obtener el valor de la propiedad id del objeto en lugar de consultar el DOM
  • Si la respuesta es correcta, se asignan los valores a las propiedades del objeto y no directamente a los elementos del DOM.

Eliminar elemento por id

self.deletePersonById= function () {
	var url = '/api/person/' + self.id();
	$.ajax({
		url: url,
		type: 'DELETE',
		contentType: "application/json;chartset=utf-8",
		statusCode: {
			200: function () {
				self.getAll();
				alert('Person with id= ' + self.id() + ' was deleted');
				self.clearForm();
			},
			404: function () {
				alert('Person with id= ' + self.id() + ' was not found');
			}
		}
	});
},

El cambio importante es que para acceder al id de la persona de utiliza self.id() en lugar de acceder al elemento del DOM para leer su valor.

Actualizar y crear un elemento

self.updatePerson= function () {
	var url = '/api/person/' + self.id();
	$.ajax({
		url: url,
		type: 'PUT',
		data: ko.toJSON(self),
		contentType: "application/json;chartset=utf-8",
		statusCode: {
			200: function () {
				self.getAll();
				alert('Person with id= ' + self.id() + ' was updated');
				self.clearForm();
			},
			404: function () {
				alert('Person with id= ' + self.id() + ' was not found');
				self.clearForm();
			},
			400: function () {
				self.clearForm();
				alert('Error');
			}
		}
	});
},

self.createPerson= function () {
	var url = '/api/person/';
	$.ajax({
		url: url,
		type: 'POST',
		data: ko.toJSON(self),
		contentType: "application/json;chartset=utf-8",
		statusCode: {
			201: function () {
				self.getAll();
				self.clearForm();
				alert('Person was created');
			},
			400: function () {
				self.clearForm();
				alert('Error');
			}
		}
	});
},

En la actualización y creación de un elemento se comparten los cambios (por eso no lo separe acá), las dos acciones en el lado del servidor reciben un objeto de tipo Person, lo cual en el post anterior hacíamos creando un nuevo objeto, asignándoles propiedades y finalmente serializándolo, sin embargo Knockout ofrece una forma más sencilla de realizar este proceso, simplemente con ko.toJSON(modelo) se realiza la serialización del objeto (cool no?).

Bueno, lo anterior todo muy bonito… pero… y como relacionamos ese modelo con nuestro HTML dicho proceso tiene dos pasos:

Paso 1: Llamar el viewmodel y enlazarlo

En este caso, una vez la página este cargada, creamos un nuevo objeto de tipo PersonViewModel, luego con ko.applyBindings(modelo) aplicamos los bindgins y finalmente hacemos el llamado a la función que obtiene todos los elementos:

$(document).on("ready", function () {
    var personvm = new PersonViewModel();
    ko.applyBindings(personvm);
    personvm.getAll();
})

Paso 2: Definir los bindings en el HTML

Llego el momento de modificar nuestra vista, el nuevo código es:

<div class="hero-unit">
    <h2>Get All</h2>
    <div>
        <table id="tblList" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Name</th>
                    <th>Twitter</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: personList">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: LastName"></td>
                    <td data-bind="text: Twitter"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <h2>Get one</h2>
    <div>
        <ul>
            <li>
                <label>Id:</label>
                <input type="text" id="txtIdSearch" data-bind="value:id" />
                <input type="button" id="btnSearch" value="Search" data-bind="click:getPersonById" />
            </li>
            <li>
                <label>Name:</label>
                <input type="text" id="txtName" data-bind="value:name" />
            </li>
            <li>
                <label>Last name:</label>
                <input type="text" id="txtLastName" data-bind="value:lastname" />
            </li>
            <li>
                <label>Twitter:</label>
                <input type="text" id="txtTwitter" data-bind="value:twitter" />
            </li>
            <li>
                <input type="button" id="btnCreate" value="Create" data-bind="click:createPerson" />
                <input type="button" id="btnDelete" value="Delete" data-bind="click:deletePersonById" />
                <input type="button" id="btnUpdate" value="Update" data-bind="click:updatePerson" />
            </li>
        </ul>
    </div>
</div>
@section scripts
{
    <script type="text/javascript" src="@Url.Content("/Scripts/app/person.js")"></script>
}

El primer cambio se da en la definición del cuerpo de la tabla, en este caso haciendo uso de la propiedad data-bind le estamos asignamos la propiedad personList, y como usamos la función foreach entonces Knockout itera sobre cada elemento del array, luego en cada elemento td usando nuevamente la propiedad data-bind a la propiedad text le relacionamos la propiedad de la cual va a mostrar su valor.

Para los input, en el data-bind a la propiedad value le asignamos alguna de las propiedades del ViewModel, para los botones igualmente con data-bind al evento click le relacionamos una función del ViewModel.

El cambio más importante en esta sencilla implementación de Knockout, es que si revisamos de nuevo el archivo person.js NO se tiene ninguna dependencia ni referencia al DOM, lo cual ofrece una mejor estructura de nuestra aplicación y la puede hacer más mantenible y extensible.

Espero el post les haya gustado, y esperen la siguiente entrega de este serie sobre Web API!

Saludos!

Descarga el ejemplo!

[ASP.NET MVC] Introducción a Single Page Applications

Posted on

Hola amigos, hace poco tuce la dicha de dar una pequeña charla sobre Single Page Applications, así que ahora les comparto el material, espero les sirva y como comente en el video, 1 hora es muy poco tiempo, así que escribiré al respecto.

Descargar el webcast!

Saludos!

[ASP.NET] Minificación de scripts con Web Essentials

Posted on Actualizado enn

Hola, este será un pequeño post en donde quiero mostrar como podemos generar nuestros archivos JavaScript más compactos, esto va a permitir que el nuevo archivo sea mas liviano y su descarga se más rápida, lo primero que debemos hacer es utilizando Nuget añadir Web Essentials:

image

Una vez instalada se tiene que reiniciar Visual Studio para que la herramienta quede disponible, ahora, para el ejemplo vamos a usar el siguiente archivo JavaScript (algo muy simple):

var operaciones = {
    Suma: function (a,b)
    {
        return a + b;
    },
    Resta: function (a,b)
    {
        return a - b;
    },
    Multiplicacion: function (a, b)
    {
        return a * b;
    },
    Division: function (a, b)
    {
        return a / b;
    }
};

Ese código lo he creado en un archivo con nombre Test.js, y sobre dicho archivo damos click derecho Web Essentials –> Minify JavaScript file(s), y se generan dos nuevos archivos, el primero Test.min.js y el segundo Test.min.js.map:

image

En el archivo .min.js se tiene el código JavaScript minificado, y en .min.js.map se tiene información sobre el archivo minificado, es importante que la minificación solo debe realizarse la primera vez, ya que si cambiamos el archivo normal, automáticamente vamos a tener esos cambios reflejados en el archivo .min.

Si observamos el archivo minificado:

var operaciones={Suma:function(n,t){return n+t},Resta:function(n,t){return n-t},Multiplicacion:function(n,t){return n*t},Division:function(n,t){return n/t}};
//@ sourceMappingURL=Test.min.js.map

Espero les haya gustado este pequeño post, que es más un tip de productividad.

[JavaScript] Un poco más sobre variables y funciones

Posted on Actualizado enn

Hola, últimamente he visto como cada vez se desarrolla mucho más en el lado cliente, y no es para menos, JavaScript ha tomado mucha fuerza y ahora tiene características muy buenas, además se ha visto un crecimiento exponencial en los framework/librerías que como base o ha sido construidas sobre JavaScript, sin embargo, este punto tiene algo en contra y es que los desarrollamos estamos dejando de lado la escuelita clásica (JavaScript puro) y nos dejamos seducir por las bondades de esos frameworks, y en un primer vistazo no es posible ver el problema, pero cuando nuestras aplicaciones van creciendo, el manejo de JavaScript no cambia, y llegamos a un punto en donde el ya solo usar un framework con algunos widgets muy cool realmente no aportan a crear aplicaciones escalables.

Ahora, quiero en este post dar una pequeña explicación de algunas particularidades que tiene JavaScript sobre el trabajo con funciones y variables, que aunque al parecer algo muy simple realmente envuelve algunos temas que muchas veces son desconocidos.

Pero antes de iniciar quiero decirles que no soy un experto en JavaScript pero que de verdad espero que este post aclare muchas dudas… y ahora si, menos charla y más acción.

Además, no quiero hacer este post con términos muy técnicos, la idea es dar ejemplos y entender el funcionamiento, ya luego pueden ir más a fondo y revisar la teoría en detalle.

Variables

Bueno este tema puede sonar un poco simple, pero es importante, iniciemos primero con la forma en que podemos declarar una variable:

   1:  var i = 1; //Declaración con var
   2:  x = 2; //Declaración sin var
   3:  alert(i); //Muestra 1
   4:  alert(x); //Muestra 2

Como podemos ver en el ejemplo anterior, no es obligatorio usar var en la declaración, pero existe diferencia? pues si, y mucha, así que vamos a realizar otro ejemplo:

   1:  function Mensaje1()
   2:  {
   3:     var nombre = "Julio Avellaneda";
   4:     email = "julito_gtu@hotmail.com";
   5:  }
   6:   
   7:  function Mensaje2()
   8:  {
   9:      alert(email);
  10:      alert(nombre);
  11:  }
  12:   
  13:  Mensaje1();
  14:  Mensaje2();

Bueno, si miramos el código anterior podríamos pensar que en la función Mensaje2 vamos a obtener un error, ya que las variables email y nombre solamente existen en el contexto de Mensaje1, sin embargo al ejecutar ese sencillo código nos llevamos una gran sorpresa, y es que el alert de email SI esta funcionando (y efectivamente muestra mi correo), pero… ummm como así que funciona?? bueno, pues sencillamente la razón es que cuando se declara una variable sin var el ámbito de esa variable es global.

Les recomiendo que le den un ojo al post del maestro José Manuel Alarcon: Closures en JavaScript: una herramienta muy útil.

Funciones

Bueno, el tema de funciones es bastante extenso, y se que alguna que otra cosita se me quedará por fuera, pero espero los puntos que se traten sean de gran interés.

1. Declaración de funciones

Lo primero a comentar es que existen varias formas de declarar una función, así que miremos el siguiente ejemplo:

   1:  function Mensaje1()
   2:  {
   3:     alert('Funcion mensaje 1');
   4:  }
   5:   
   6:  var fun = {
   7:     Mensaje2 : function(){
   8:          alert('Funcion mensaje 2');
   9:     }
  10:  }
  11:   
  12:  Mensaje1();
  13:  fun.Mensaje2();

Y las dos formas funcionan correctamente, pero que pasaría si ahora cambiamos las líneas 12 y 13 de lugar y las dejamos al inicio? es decir:

   1:  Mensaje1();
   2:  fun.Mensaje2();
   3:   
   4:  function Mensaje1()
   5:  {
   6:     alert('Funcion mensaje 1');
   7:  }
   8:   
   9:  var fun = {
  10:     Mensaje2 : function(){
  11:          alert('Funcion mensaje 2');
  12:     }
  13:  }

En este caso solo funciona correctamente Mensaje1, y para el otro llamado se obtiene el error TypeError: fun is undefined, y la explicación es simple, cuando declaramos una función de forma declarativa (como Mensaje1) dichas funciones son evaluadas por el navegador antes que las demás expresiones, y acá ya nos damos cuenta que realmente la ejecución de JavaScript no es tan lineal como pensábamos.

2. Argumentos en funciones

Bien, ahora toquemos un poco el tema de los argumentos en las funciones, y pues como hemos venido trabajado primero un ejemplo:

   1:  var fun = {
   2:      Suma1: function(num1, num2)
   3:      {
   4:          alert(num1 + num2);
   5:      }
   6:  }
   7:   
   8:  fun.Suma1(5,5);
   9:  fun.Suma1(2,2,2,2,2);

Listo, a simple vista podemos ver que el segundo llamado a la función Suma1 esta algo mal no? estamos enviando más parámetros de los definidos en la función, pero….. si, funciona! y lo hace por que JavaScript no tiene en cuenta los demás parámetros, simplemente los ignora, y si, en mi opinión no es algo que se debería permitir.

Y ahora un ejemplo más:

   1:  var fun = {
   2:      Suma: function()
   3:      {
   4:          var total = 0;
   5:          for (var i = 0; i < arguments.length; i++)
   6:          {
   7:              total += arguments[i];
   8:          }
   9:          alert(total);
  10:      }
  11:  }
  12:   
  13:  fun.Suma(2,2,2,2,2,10);

Bueno ya la cosa esta rara acá, la función no le declaramos parámetros, pero en la llamada si se los enviamos, y este caso es muy bueno para mencionar que en cada función JavaScript podemos acceder al objeto arguments el cual tiene como referencia todos los argumentos enviados a la función, por lo tanto haciendo uso de él podemos fácilmente calcular la suma de los números enviados a la función Suma.

3. Funciones y prototipos

Ahora, vamos a ver un poco acerca de los prototipos, así que vamos con el ejemplo:

   1:  Function.prototype.Multi = function()
   2:  {
   3:     var total = 1;
   4:     for (var i = 0; i < arguments.length; i++)
   5:     {
   6:         total *= arguments[i];
   7:     }
   8:     return total;
   9:  };
  10:   
  11:  var fun = function()
  12:      {
  13:          var total = 0;
  14:          for (var i = 0; i < arguments.length; i++)
  15:          {
  16:              total += arguments[i];
  17:          }
  18:          return total;
  19:      }
  20:   
  21:  var result1 = fun(2,2,2,2); // 8
  22:  alert(result1);
  23:  var result2 = fun.Multi(2,2,2,2); // 16
  24:  alert(result2);

Resumiendo entonces, digamos que con Function.prototype.<…> podemos extender las funciones, podríamos incluso hacer la similitud en la programación al concepto de clase base, donde las clases que heredan de esa clase también heredan sus métodos. Luego haré un post donde solo hablaré de este tema.

4. LLamando funciones

Y ahora vamos a revisar como podemos llamar una función, así que vamos con un ejemplo:

   1:  var Persona = function(nombre, email)
   2:      {
   3:          this.nombre = nombre;
   4:          this.email = email;
   5:          return 5;
   6:      }
   7:   
   8:  var per1 = new Persona('Julio', 'julito_gtu@hotmail.com');
   9:  var per2 = Persona('Juan','juan@hotmail.com');
  10:   
  11:  console.log(per1);
  12:  console.log(per2);

Bueno, acá es importante primero mencionar que estamos usando el operador new, entonces para per1, y gracias al uso de new estamos creando un nuevo objeto con dos propiedades (email y nombre) y en este caso el return no es tenido en cuenta, en cambio para el segundo caso, es decir para per2 solo es tenido en cuenta el return, la siguiente imagen muestra los resultados en la consola de Chrome:

image

Bueno, espero que les gusto el post tanto como a mí escribirlo!

Saludos!

[ASP.NET] ASP.NET y las Microsoft jQuery Templates III – Filtrando datos

Posted on Actualizado enn

En el post pasado sobre el trabajo con templates (ver post), revisamos como poder enlazar un template con datos de una base de datos utilizando un modelo de Entity Framework. En este artículo vamos a ampliar ese ejemplo añadiendo la funcionalidad de buscar/filtrar los datos del template.

Para realizar la búsqueda, todo lo vamos a realizar en el cliente, así evitamos tener que volver a consultar nuestro modelo,  acá quiero utilizar algo conocido como Linq to JavaScript, y lo vamos a utilizar específicamente para realizar consultas sobre nuestros datos que tenemos en JSON.

Linq to JavaScript permite realizar consultas con la misma estructura/filosofía que utilizamos en Linq to Objects, o Linq to Entities, etc.

Ahora manos a la obra, aclaro algo, solo voy a colocar acá lo relevante de este ejemplo, ya que en el post anterior revisamos los demás puntos.

1. Definir el criterio de búsqueda

Vamos a definir un campo el cual vamos a utilizar como filtro, en este caso el seleccionado es el nombre del municipio, así que primero definimos el HTML:

   1:  <b><label>Municipio:</label></b><input id="txtMunicipio" type="text" placeholder="Escribe un municipio" />

2. Variable para contener los datos

Ahora, necesitamos tener una variable en donde almacenar los datos retornados por el servidor, así que creamos una variable global llamada objJSON:

   1:  var objJSON;

3. Guardar los datos retornados

Ya hemos definido la variable global para contener los datos, ahora lo que hacemos es que en el llamo AJAX, en la función relacionada con success la llenamos, es decir, nuestro llamado AJAX se verá así:

   1:  var CargarTemplate = (function () {
   2:      $.ajax({
   3:          type: "POST",
   4:          url: "GetDepartamentos.asmx/ObtenerDepartamentos",
   5:          contentType: "application/json; chartset=utf-8",
   6:          dataType: "json",
   7:          success: function (resul) {
   8:              objJSON = resul.d;
   9:              if (resul.d)
  10:                  $("#TemplateDepto").tmpl(resul.d).appendTo("#tableDepartamentos");
  11:          },
  12:          error: function (error) {
  13:              alert('Se ha producido un error al realizar la petición.');
  14:          }
  15:      })
  16:  });

Lo importante acá es la línea 8, allí es donde le estamos dando un valor a la variable global, y los que le estamos asignando es el objeto JSON con los datos.

4. Implementado el filtro

Y llegamos a lo interesante, como filtrar los datos? bueno lo que tenemos que hacer es utilizar el evento keyup del campo de texto txtMunicipio, les coloco el código y luego lo explicamos:

   1:  $("#txtMunicipio").on("keyup", function () {
   2:      var filtro = $(this).val().toLowerCase();
   3:      if (filtro == "") {
   4:          $("#tableDepartamentos tr.contenido").remove();
   5:          $("#TemplateDepto").tmpl(objJSON).appendTo("#tableDepartamentos");
   6:      }
   7:      else {
   8:          var query = Enumerable.From(objJSON)
   9:              .Where(function (x) { return x.Municipio.toLowerCase().indexOf(filtro) != -1 })
  10:              .Select(function (x) { return x })
  11:              .ToArray();
  12:   
  13:          $("#tableDepartamentos tr.contenido").remove();
  14:          $("#TemplateDepto").tmpl(query).appendTo("#tableDepartamentos");
  15:      }
  16:  })

Y que hace ese código??… lo voy a explicar:

Línea 2: guardamos en una variable lo ingresado en el campo de texto.

Línea 3 – 6: Si la variable viene en blanco, entonces se elimina el template, luego se le asignan de nuevos lo datos y se añade al contenedor.

Línea 8 – 11: Creamos una variable para almacenar el resultado de la consulta, lo primero que hacemos con Enumerable.From por decirlo de una manera amigable es que convertimos la variable objJSON a un tiempo ienumerable para poder ser consultado con Linq, luego simplemente realizamos la consulta de forma muy similar a como lo haríamos por ejemplo utilizando Linq to Entities.

Línea 13 – 14: Limpiamos la tabla, y le volvemos a asignar los datos al template y este lo añadimos al contenedor.

Bueno espero les sea interesante este post, es dejo la solución completa donde están los tres ejemplos de los post sobre templates:

Descarga la solución!

[JavaScript] Accediendo a los elementos del DOM

Posted on

Hola, hoy quiero mostrarles tres diferentes maneras de como podemos acceder a los elementos del DOM, en HTML tenemos nuevas API de JavaScript las cuales ofrecen algunas alternativas diferentes, pero esas las veremos en otro post.

1. getElementsByTagName(): Obtiene todos los elementos de un tipo específico:

document.getElementsByTagName(“p”); //Obtenemos todos los objetos de tipo p (párrafos)

2. getElementsByName(): Obtiene todos los elementos con un name específico:

document.getElementsByName(“dato”); //Obtenemos todos los objetos de con nombre dato.

3.  getElementById(): Obtiene un elemento por su id:

getElementById(“btnEnviar”); //Obtenemos el control cuyo id sea btnEnviar.

Buenos estas son las tres formas más comunes para acceder a los elementos del DOM utilizando JavaScript, espero les sea útil.

[JavaScript] Tips sobre el manejo de Arrays

Posted on

Bueno y siguiendo con los post sobre JavaScript, hoy les quiero dejar una tabla que resume algunas de las funciones mas utilzadas cuando trabajamos con Arrays y JavaScript, espero les sea de utilidad:

Función

Descripción

length

Devuelve el número de elementos de un array

concat()

Concatena elementos de varios arrays

join(separador)

Une los elementos de un array en una sola cadena de texto separados por el carácter separador

pop()

Elimina y devuelve el último ítem del array. El array es redimensionado

push()

Añade un elemento al final del array. El array es redimensionado

shift()

Elimina y devuelve el primer elemento de un array. El array es redimensionado

unshift()

Añade un elemento al inicio del array. El array es redimensionado

reverse()

Modifica el array colocando los elementos del mismo en orden inverso

 

[JavaScript] Tips sobre el manejo de strings

Posted on

Bueno, desde el día de hoy comenzare a subir de vez en cuando algunos post sobre JavaScript, pero.. por qué? si bien es cierto que con frameworks como jQuery el tener que dar pedal con JavaScript puro ha disminuido notablemente, y más por el hecho de disponer de miles de plugins debo decir que jQuery no lo es todo.

jQuery no es más que JavaScript, solo que para nosotros se tiene una “capa” que permite que su uso sea bastante sencillo, pero existen muchas situaciones en las cuales tenemos que hacer uso de código JavaScript, y claro si no tenemos ni idea de que es pues… ya no seremos tan buenos como creemos verdad !?

Así que una cosa es conocer sobre como desarrollar con jQuery y otra es copiar y pegar plugins… y personalmente aunque se que me queda mucho camino prefiero la primera opción.

JavaScript es bastante amplio, si no me equivoco actualmente esta en la versión 2, y con algo de tiempo estaré posteando un pequeño manual que resumirá los tips que vaya subiendo.

Bueno, luego de tanta carreta (no lo tomen a regaño) les dejó una tabla en la cuál resumo los métodos más importantes para trabajar con strings desde JavaScript, espero les sea de utilidad:

Función

Descripción

length

Devuelve la longitud de la cadena

+

Concatena dos cadenas

concat(“texto”)

Concatena uno o más strings

toUpperCase()

Convierte la cadena a mayúsculas

toLowerCase()

Convierte la cadena a minúsculas

charAt(posición)

Obtiene el carácter ubicado en una determinada posición

indexOf(letra)

Obtiene la primera posición del carácter indicado, si no es encontrado devuelve -1

lastIndexOf(letra)

Obtiene la última posición del carácter indicado, si no es encontrado devuelve -1

substring(inicio, fin)

Devuelva el texto ubicado entre la posición inicial y final definida, el parámetro de fin es opcional, si no se envía se toma hasta el final de la cadena.

split(separador)

Convierte una cadena de texto en un array de string, la división de la cadena se realiza por el carácter separador.

Pronto mas tips sobre JavaScript !

TextBox solo números

Posted on Actualizado enn

Hola, por algún tiempo, estuve desarrollando aplicaciones de escritorio (aún lo hago, pero no tan frecuente) en las cuales podemos decir que poseemos el control de todo, sin embargo, cuando damos ese paso al desarrollo Web, nos encontramos con muchos obstaculos, por ejemplo el validar lo que el usuario digita, lo cual es muy util cuando deseamos una aplicación más versatil y segura.

Bueno, cuando tenia que validar lo que el usuario digita, me encontre con que la mejor manera de hacer dicha validación es con JavaScript, ya que nos evitamos el ir hasta el servidor, así todo queda en el cliente.

Bueno lo primero que se debe hacer crear la función de javascript, en el ejemplo tengo dos funciones, una valida que solo se ingresen letras y la otra que solo sean números, las funciones realmente son muy fáciles, pero pueden extenderse aún más:

function Numeros() {
var key = window.event.keyCode;
if (key 57) {
window.event.keyCode = 0;
}

}

function letras() {
var key = window.event.keyCode;
if (key 57) {

}
else {
window.event.keyCode = 0;
}

}

En las anterioes funciones, simplemente validamos por código ascii cual fue el caracter digitado, y dependiendo del caracter cancelamos el evento o no.
Luego, en el evento load de la página, le agregamos el evento o atributo al campo o campos de texto que deseamos validar de la siguiente manera:

numerosTextBox.Attributes.Add(“onKeyPress”, “Numeros()”)
letrasTextBox.Attributes.Add(“onKeyPress”, “letras()”)

Lo que debemos hacer, es que al campo de texto le agregamos un nueo atributo, que seria el evento keypress…. bueno eso es todo.. un rápido y fácil ejemplo para tener un poco más de control en nuestras aplicaciones…

Puedes descargar el ejemplo aqui !!