Apuntes de un Estudiante: js

martes, 7 de diciembre de 2010

Objetos con JavaScript (POO) I

Delaramos al objeto usando una función, dentro de ésta declaramos las propiedades.Las propiedades van precedidas de la palabra clave 'this' y seguidamente '.'(punto):


//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

Como vemos, el objeto Persona tendrá 3 propiedades: Nombre, Apellido y Edad.
Veamos cómo podemos acceder a las propiedades:


<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

function TestMyObject()
{
 var persona;
 persona = GetPersona();
 var msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
 msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
 alert(msg);

}

function GetPersona()
{
 var persona = new Persona("Pedro","Picapiedra",40);
 return persona;
}
</script>
</head>
<body>
 <div style="width:300px;height:50px;background:#aaccdd;" onclick="TestMyObject()">
  Test Object (clic aquí)
 </div>
</body>
</html>

Ahora veamos un ejemplo con un array de objetos Persona :


<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

function TestArrayObjects()
{
 var myObjects = new Array();
 myObjects = GetArrayPersonas();
 var persona;
 var msg = "";
 for(var i=0;i<myObjects.length;i++)
 {
    persona = myObjects[i];
    msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
    msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
    alert(msg);
 }   
}

function GetArrayPersonas()
{
 var size = 4;
 var myarray = new Array(size);
 for(var i=0;i<size;i++)
 {
    var persona = new Persona(("Pedro "+i),("Picapiedra "+i),(40+i));
    myarray[i] = persona;
 }
 return myarray;
}
</script>
</head>
<body>
 <div style="width:300px;height:50px;background:#eeffaa;margin-top:30px;" onclick="TestArrayObjects()">
  Test Array Objects (clic aquí)
 </div>
</body>
</html>

lunes, 16 de marzo de 2009

Cancelar tecla ENTER de un formulario mediante j avascript y jQuery

A veces se tiene la necesidad de anular la tecla Enter de un formulario para evitar el submit.Para eso bien podría hacerse usando sólo javascript, sin embargo, en este ejemplo usaré la librería jQuery. Aquí explican que es jQuery y lo pueden descargar en su versión más reciente desde su página.
Para no mezclar el codigo HTML con javascript en unmismo documento, el codigo javacript lo hare otro aparte, al cual llamaré funciones.js y junto a este colocaré la libreria jQuery.

Código en funciones.js :


var x;

x=$(document);

x.ready(AnularEnter);



function AnularEnter()

{

var x;

x=$("#form1");

x.keypress(function(e){if(e == 13){return false;}});



/*para los textboxes*/

$("input[type=text]").keypress(function(e){

if(e.which == 13){ return false; } });



/*para los radio*/

$("input[type=radio]").keypress(function(e){

if(e.which == 13){ return false; } });



/*para los checkboxes*/

$("input[type=checkbox]").keypress(function(e){

if(e.which == 13){ return false; } });



}

Explicación

La librería jQuery nos facilita la vida al momento de escribir codigo, en el ejemplo anterior, en la línea:
x=$("#form1");
se obtiene al formulario mediante su Id, el cual en el ejemplo es form1.En javascript puro seria:
x= getElementById('form1');
Es decir, para seleccionar un elemento del DOM se usa la función $
Para seleccionar mediante el Id del elemento:
$("#elId");
Aunque en el ejemplo no se muestre, también se puede seleccionar mediante su clase:
$(".laClass");
Notar las diferencias: #(almohadilla) para Id y .(punto) para class.
Volviendo al ejemplo, tambien puedo seleccionar un elemento del DOM mediante su tipo:



$("input[type=text]");

Como se ve en el ejemplo anterior, se seleccionan todos los textbox, todos los radiobuttons y todos los checkboxes.

El numero 13 corresponde a la tecla Enter, asi que en:



$("input[type=text]").keypress(function(e){

if(e.which == 13){  return false;      }    });

le digo que si esta en un textbox y presiona(evento keypress) la tecla Enter, retorne un valor false, de esa forma la tecla Enter queda anulada y no se produce el submit.
De la misma forma funciona para los demás controles.
Notar que le paso como argumento e, e contiene las características del evento; es decir, tiene la información necesaria para ese evento.

También podemos prescindir de jquery y usar solo javascript,en este caso el evento sería onkeypress:


<html>

<head><title>Test-Submit</title>

<script type="text/javascript">

    function CancelSubmit(e)

    {

        var keynum

        if(window.event) // IE

        {

            keynum = e.keyCode

        }

        else if(e.which) // Netscape/Firefox/Opera

        {

            keynum = e.which

        }        

        return (keynum != 13);

    }

</script>

</head>

<body>

<h1>CANCELAR SUBMIT</h1>

<form method="post" action="Test-Submit.html">

  <input type="text" onkeypress="return CancelSubmit(event)" />

</form>

</body>

</html>

Apuntes de un Estudiante

martes, 7 de diciembre de 2010

Objetos con JavaScript (POO) I

lunes, 16 de marzo de 2009

Cancelar tecla ENTER de un formulario mediante j avascript y jQuery

Explicación

Datos personales

Categorías

Mi llamita

Mi lista de blogs

Seguidores