Leer y escribir en una Cookie desde JavaScript

Hola, hoy les dejo un ejemplo que me pareció muy interesante, leer y escribir en una Cookie desde JavaScript, normalmente cuando leemos una cookie lo hacemos desde código del lado del servidor, pero bueno aqui el ejemplo:

<script language="JavaScript" type="text/javascript">
<!--

readCookie();

function readCookie() {
     if (document.cookie == "") {
writeCookie();
        alertMessage();
     } else {
var the_cookie = document.cookie;
the_cookie = unescape(the_cookie);
the_cookie_split = the_cookie.split(";");
for (loop=0;loop<the_cookie_split.length;loop++) {
var part_of_split = the_cookie_split[loop];
var find_name = part_of_split.indexOf("nfti_date")
if (find_name!=-1) {
break;
} // Close if
} // Close for
if (find_name==-1) {
writeCookie();
} else {
var date_split = part_of_split.split("=");
var last = date_split[1];
last=fixTheDate(last);
alert (" - Bienvenido - Tu última visita a esta página fue: "+last);
writeCookie();
} // Close if (find_name==-1)
      }
} // Close function readCookie()


function writeCookie() {
     var today = new Date();
     var the_date = new Date("December 31, 2023");
     var the_cookie_date = the_date.toGMTString();
     var the_cookie = "nfti_date="+escape(today);
     var the_cookie = the_cookie + ";expires=" + the_cookie_date;
     document.cookie=the_cookie
}

function alertMessage(){
     alert ("Bienvenido\aquí agregas un mensaje de bienvenida.")
}

function fixTheDate(date) {
     var split = date.split(" ");
     var fix_the_time = split[3].split(":")
     var hours = fix_the_time[0]
     if (hours>=12) {
var ampm="PM"
     } else {
var ampm="AM"
     }
     if (hours > 12) {
hours = hours-12
     }
     var new_time = hours+":"+fix_the_time[1]+" "+ampm
     var new_date = split[0]+" "+split[1]+", "+split[2]+" at "+new_time+", "+split[5]
     return new_date;
}
//-->
</script>                 

Para probar el ejemplo hagan copy paste en una pagina y al visualizarla en el explorador presionen F5 para recargar la pagina y el script pueda leer la cookie ya escrita al cargar por primera vez la pagina.

Espero que esto les sea de utilidad
-----------------------------------
Lo que se puede imaginar... se puede programar

PageMethods en Asp.Net AJAX

Hola, hoy veremos como utilizar ajax de una manera muy sencilla, esto se logra atreves de los PageMethods, estos se comunicaran con un WebMethod que este en nuestro código de la pagina (del lado del servidor) .

Lo primero que aremos es definir nuestro WebMethod, esto significa que a nuestro método lo decoraremos con el atributo [WebMethod], ejemplo:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication2

{

    public partial class _Default : System.Web.UI.Page

    {

        [WebMethod]

        public static List<Persona> SendForm(string name)

        {

            ////return name + " - Fue al servidor";

            List<Persona> p = new List<Persona>();

            p.Add(new Persona("Nombre 1", 26));

            p.Add(new Persona("Nombre 2", 26));

            return p;

        }

        protected void Page_Load(object sender, EventArgs e)

        {

        }

    }

    public class Persona

    {

        public Persona()

        {

        }

        public Persona(string nombre, int edad)

        {

            Nombre = nombre;

            Edad = edad;

        }

        public string Nombre

        {

            get; set;

        }

        public int Edad

        {

            get; set;

        }

    }

}

Cabe aclarar que un un PageMethod podrá retornar casi cualquier tipo de datos que regrese el WebMethod, en este ejemplo retorna una lista de objetos de tipo Persona.

Ahora del lado del cliente definimos lo siguiente:

      1. Habilitar los PageMethods

Lo que hay que hacer para permitir PageMethods es prender una propiedad de nuestro ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

                        <Scripts>

                                  <asp:ScriptReference Path="~/Scripts/Default.js" />

                       </Scripts>

           </asp:ScriptManager>

           Tambien aprovechamos para hacer referencia a nuestro js que contiene las funciones que utilizaremos.

      

      2. Crear nuestro script (Default.js)

             Esta es la función que llamaremos desde el click de un botón (el nombre es indistinto), el objeto PageMethods contiene los webMethods que tengamos en nuestro codigo de la pagina (en el .cs)

function SendForm() {

    var name = $get(textBox1).value;

    PageMethods.SendForm(name, OnSucceeded, OnFailed);

}

Las funciones de OnSucceeded y OnFailed deben ser incluidas como parámetros en la ejecución de nuestro PageMethod PageMethods.SendForm(name, OnSucceeded, OnFailed), y el primer parámetro es parte de nuestro WebMethod.

Esta function cacha el resultado de nuestro webMethod:

function OnSucceeded(lista) {

    $get(lblPrueba).innerHTML = string;

}

Esta function es utilizada para cachar un possible error:

function OnFailed(error) {

    alert(error.get_message());

}

      3.  En el aspx:

     <p>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SendForm();" />

            </ContentTemplate>

        </asp:UpdatePanel>

        <asp:Label ID="LblPrueba" runat="server" Text="Label"></asp:Label>

    </p>

    <script type="text/javascript">

        var lblPrueba = '<%=LblPrueba.ClientID %>';

        var textBox1 = '<%=TextBox1.ClientID %>';

    </script>

Como ven esta manera de utilizar ajax es muy facil y te olvidas de mandar a llamar un pagina y en el load procesar la petición... entre otras cosas, de esta forma el codigo queda en la misma pagina y se manda a llamar de una manera transparente.

Espero que esto les sea de utilidad.

Lo que se puede imaginar ... se puede programar

TextBox sólo números enteros

Hoy veremos como validar un input de tipo text (aplica también para controles de asp.net) para que acepte sólo números enteros.
Lo primero que hay que hacer es agregar estas dos funciones que detallo a continuación:

Esta función permite validar un numero entero con una expresión regular y que utilizaremos para validar la entrada de datos (onkeypress):


function validarNum(e)
{
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla == 8) return true;
    patron = /\d/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}

Esta función la utilizaremos en el evento "onchange" para validar los datos pegados (ctrl v) a nuestro textbox, este evento entrara cuando se pierda el foco del control y exista un cambio, y es ahí cuando validamos si lo introducido es un numero entero valido, si no lo es lo borramos.



function quitaNoNumero(obj)
{
patron = /\d/;
    if (!patron.test(obj.value))
{
obj.value="";
}
}

Estas dos funciones de javascript pueden estar en la propia pagina o en un archivo .js, ya depende de ustedes, aquí les dejo el un ejemplo de como utilizarlas:


<html>
<head>
<script type="text/javascript">
function validarNum(e)
{
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla == 8) return true;
    patron = /\d/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}
function quitaNoNumero(obj)
{
patron = /\d/;
    if (!patron.test(obj.value))
{
obj.value="";
}
}
</script>
</head>
<body>
<input type="text" onkeypress = "return validarNum(event)" onchange="quitaNoNumero(this)" />
</body>
</html>

Los comentarios son bien recibidos... hasta la próxima.

-------------------------------------------------
Lo que se puede imaginar ... se puede programar

Manejo de teclado en web

Como lo vimos anteriormente en web también podemos tener el control de cachar las teclas pulsadas por el usuario, esto lo hacemos sobrescribiendo el evento keydown de document:

document.onkeydown = function(){ 
}

Por ejemplo, si queremos agregar funcionalidad de que al presionar F5 se realice cierta acción o que al presionar ESC se cancele o cierre cierta ventana o div flotante, etc. lo haremos mediante este evento.

El ejemplo que muestro a continuación, cancela todas las teclas F (F2 a F12):


Poner en el Head
document.onkeydown = function(){ 

     if(window.event){ 

switch(window.event.keyCode)

{

case 112:

case 113:

case 114:

case 115:

case 116:

case 117:

case 118:

case 119:

case 120:

case 121:

case 122:

case 123:

case 219:

window.event.keyCode = 505;

break;

}

    }  

    if(window.event && window.event.keyCode == 505){   

     return false;      

    }

}

Como pueden ver no se puede cancelar la tecla F1 (112) de la manera anterior, por que esta tecla es usada por el explorador para mostrar la ayuda (por lo menos en internet explorer)... pero si agregamos el siguiente evento en el body podemos cancelar esa tecla:

onhelp="return false;"

Así como sobrescribimos este evento podemos sobrescribir otros eventos para nuestros usos...
Espero que les sea de utilidad... no olviden comentar

------------------------------------------------
Lo que se puede imaginar...se puede programar

Cancelar el F5 en una pagina web

Hoy veremos como cancelar la tecla F5 (refresh) para evitar que recarguen nuestra pagina. Esto lo haremos sobrescribiendo el evento keydown de document:

document.onkeydown = function(){  
}

Y para saber cual tecla pulso lo aremos por medio de window.event.keyCode, para nuestro ejemplo agregamos una función que pone la hora y de esta manera vemos que realmente que no se esta refrescando nuestra pagina. De igual manera agrego un evento a un input para que vean que no se esta sobrescribiendo los eventos de los demás controles.

Ejemplo completo:


<html>
<head>
  <script language="javascript">

   document.onkeydown = function(){  
    if(window.event){
if(window.event.keyCode == 116)
{
                        return false;
}
    }
   }  

   function pon_hora(){
    var dHora = new Date();
    var res = String(dHora.getHours()) + ":" + String(dHora.getMinutes()) + ":" + String(dHora.getSeconds());
    document.frm.txt.value = res;
    return res;
   }
 
   function txtKey()
   {
alert('No sobreescribe el evento keydown de los controles')
   }
 
  </script>  
 </head>
 <body onload="pon_hora()">
  <form name="frm">
   <h1><b>ANULACIÓN DE LA TECLA TECLA F5</b><br></h1>
   Hora actual:&nbsp;<input type="text" name="txt" onkeydown="return txtKey();"><br><br>
   (Al seleccionar el botón "Actualizar" del navegador la hora debería actualizarse, pero con la tecla F5 no)
  </form>
 </body>
</html>