05 Javascript

Javascript
Conceptos Basicos.
Variables
Javascript ofrece dos ambitos para las variables, el global y el local.
function creaMensaje() {
var mensaje = Mensaje de prueba;
}
creaMensaje();
alert(mensaje);
Este codigo no se mostrara ningun mensaje ya que la variable definda es local para la
funcion, y nosotros tratamos de accederla de forma global.
Todas las variables creadas en el ambito local son declaradas en el objeto window del
navegador.
Funciones
Las funciones en JavaScript se definen mediante la palabra reservada function, seguida del
nombre de la funcin. Su definicin formal es la siguiente:
function nombre_funcion() {
...
}
El nombre de la funcin se utiliza para llamar a esa funcin cuando sea necesario. El
concepto es el mismo que con las variables, a las que se les asigna un nombre nico para
poder utilizarlas dentro del cdigo. Despus del nombre de la funcin, se incluyen dos
parntesis cuyo significado se detalla ms adelante. Por ltimo, los smbolos { y } se utilizan
para encerrar todas las instrucciones que pertenecen a la funcin (de forma similar a como
se encierran las instrucciones en las estructuras if o for).
Aunque casi siempre se utilizan variables para pasar los datos a la funcin, se podra
haber utilizado directamente el valor de esas variables: suma_y_muestra(3, 5);
El nmero de argumentos que se pasa a una funcin debera ser el mismo que el
nmero de argumentos que ha indicado la funcin. No obstante, JavaScript no
muestra ningn error si se pasan ms o menos argumentos de los necesarios.
El orden de los argumentos es fundamental, ya que el primer dato que se indica en la
llamada, ser el primer valor que espera la funcin; el segundo valor indicado en la
llamada, es el segundo valor que espera la funcin y as sucesivamente.
Se puede utilizar un nmero ilimitado de argumentos, aunque si su nmero es muy
grande, se complica en exceso la llamada a la funcin.
No es obligatorio que coincida el nombre de los argumentos que utiliza la funcin y
el nombre de los argumentos que se le pasan. En el ejemplo anterior, los argumentos
1
que se pasan son numero1 y numero2 y los argumentos que utiliza la funcin son
primerNumero y segundoNumero.
Donde Usar Javascript

Javascript se puede incorporar a la pagina de varias maneras, la forma mas basica es la de
agregarlo en los eventos de los elementos html. Si bien es la mas simple ya no es
recomendada.
Tambien se puede agregar codigo en javascript mediante los tags <script> </script> y
agregando con <script src=archivo.js></script>.
Eventos Javascript
Evento Descripcin Elementos para los que est definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>,

<textarea>, <body>
onchange Deseleccionar un elemento que se <input>, <select>, <textarea>

ha modificado
onclick Pinchar y soltar el ratn Todos los elementos
ondblclick Pinchar dos veces seguidas con el Todos los elementos

ratn
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,

<textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La pgina se ha cargado <body>

completamente
onmousedo Pulsar (sin soltar) un botn del Todos los elementos

wn ratn
onmousemo Mover el ratn Todos los elementos

ve
onmouseout El ratn "sale" del elemento (pasa Todos los elementos

por encima de otro elemento)
onmouseove El ratn "entra" en el elemento Todos los elementos

r (pasa por encima del elemento)
2
onmouseup Soltar el botn que estaba pulsado Todos los elementos
en el ratn
onreset Inicializar el formulario (borrar <form>

todos sus datos)
onresize Se ha modificado el tamao de la <body>

ventana del navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la pgina (por <body>

ejemplo al cerrar el navegador)
En JavaScript, as como en la mayora de los lenguajes de programacin orientados a

objetos, this es una palabra clave especial que hace referencia al objeto en donde el mtodo
est siendo invocado. El valor de this es determinado utilizando una serie de simples pasos:
1. Si la funcin es invocada utilizando Function.call o Function.apply, this tendr el valor
del primer argumento pasado al mtodo. Si el argumento es nulo (null) o indefinido
(undefined), this har referencia el objeto global (el objeto window);
2. Si la funcin a invocar es creada utilizando Function.bind, this ser el primer
argumento que es pasado a la funcin en el momento en que se la crea;
3. Si la funcin es invocada como un mtodo de un objeto, this referenciar a dicho
objeto;
4. De lo contrario, si la funcin es invocada como una funcin independiente, no unida
a algn objeto, this referenciar al objeto global.
Estos eventos se pueden utilizar de varias maneras:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

Si bien es la manera mas simple, es recomendable utilizar algun otro metodo que nos
permita tener el codigo mas limpio.
Otra forma es hacerlo de forma semantica:

// Funcin externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la funcin externa al elemento
3
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y vers" />
Formularios
Una de las formas para acceder a los formularios es la siguiente:
document.forms[0];
La ventana del navegador, tiene un objeto llamado document, con un array de los
formularios, por lo que se p uede acceder por el numero de indice, empezando con 0.
Para acceder a los elementos bastar con poner:
document.forms[0].elements[0];
Otros conceptos de javascript.
Closures
Las clausuras (en ingls closures) son una extensin del concepto de alcance (scope)
funciones que tienen acceso a las variables que estn disponibles dentro del mbito en
donde se cre la funcin.
//inicio closure
function paddingLeft (quantity, fillchar) { //funcin externa
quantity = quantity || 2;
fillchar = fillchar || "0";
return function (text) { //funcin interna

var filled = new Array(quantity).join(fillchar) + text;
return filled.slice(-quantity);
};
}
//fin closure
var zeroPad = paddingLeft();

console.log( zeroPad(9) );
var dotPad = paddingLeft(20, ".");

console.log( dotPad("pg 13") );
console.log( dotPad("pg 17") );
4
Funciones Autoejecutables
// Esta funcion se ejecuta a si misma recursivamente
function foo() { foo(); }
// Esta funcion al no tener un identificador, se usa el arguents.callee() para ejecutarse a si

misma.
var foo = function() { arguments.callee(); };
// Esta podria ser una funcion de auto ejecucion anonima, pero solo cuando referencia a foo,
si se cambia el nombre ya no funciona.
var foo = function() { foo(); };
// Se suele llamar como funcion anonima autoejecutable, pero no se autoejecuta, porque no

se esta invocando, pero si es invoada inmediatamente.
(function(){ /* code */ }());
// Si se agrega un idenificador, ya es una funcion con nombre, no anonima.
(function foo(){ /* code */ }());
// Estas son autoejecutables, pero no de la mejor manera

(function(){ arguments.callee(); }());
(function foo(){ foo(); }());
5
Creando un paquete simple.
var contador = (function(){

var i = 0;
return {
get: function(){
return i;
},
set: function( val ){
i = val;
},
increment: function() {
return ++i;
}
};
}());
contador.get(); // 0
contador.set( 3 );
contador.increment(); // 4
contador.increment(); // 5
contador.i; // undefined
i; // ReferenceError: i is not defined
Suponiendo que tenemos esta funcion anonima.

(function () {
// Desde este ambito se puede acceder a todas las variables y funciones globales
}());
Esto se debe a que javascript busca la variable en todos los ambitos superiores, si no la
encuentra, lo busca en el global, si la variable no existe, la crea. Esto hace que el codigo sea
mas incomprensible y se pierde el control del codigo, por no tener el codigo encapsulado.
Una alternativa a esto es pasar como parametros las variables requeridas.

(function ($, MiModulo) {
// ahora se puede acceder a jQuery mediante 4 y a MiModulo
}(jQuery, MiModulo));
6
Construccion de una clase.
Con esta sentencia ya estamos creando una clase, si bien es una funcion la interpretacion de
javascript permite que sea tratada como una clase.
function Clase(){}
por lo que se puede instanciar de esta forma:
var obj = new Clase();
Para agregarle metodos podemos seguir el siguiente ejemplo:

function Clase(){
this.propiedad = mi propiedad;
this.show = function() {
console.log(this.propiedad);
}
}
obj.show();
Otra forma de construir una clase es la siguiente:

function Clase(){}
Clase.prototype.propiedad = mi propiedad;
Clase.prototype.show = function() {
console.log(this.propiedad);
}

obj.show();
7
Declaracion de Modulo
Una de las formas de declarar un modulo y hacerlo global es la siguiente
var MiModulo = (function(){
var my = {};
var variablePrivada = 1;
function funcPrivada() {
}
my.propiedad = 1;
my.sumar = function (){
}
return my;
}());
En esta declaracion vamos a crear un modulo llamado MiModulo que cuenta con una
funcion privada y un atributo privado. Pero tambien tiene una propiedad y funcion publicas.
Si el codigo del modulo se encuentra en mas de un archivo, ya que en distintos archivos

agregamos distinta funcionalidad, lo que se puede hacer es pasar el mismo modulo como
argumento.
var MiModulo = (function(my){
my.otraFuncion = new function() {
}
return my;
}(MiModulo));
Json - Javascript object notation.

JSON, acrnimo de JavaScript Object Notation, es un formato de texto ligero para el
intercambio de datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript
aunque hoy, debido a su amplia adopcin como alternativa a XML, se considera un formato
de lenguaje independiente.
Una de las supuestas ventajas de JSON sobre XML como formato de intercambio de datos es
que es mucho ms sencillo escribir un analizador sintctico (parser) de JSON. En JavaScript,
un texto JSON se puede analizar fcilmente usando la funcin eval(), lo cual ha sido
fundamental para que JSON haya sido aceptado por parte de la comunidad de
desarrolladores AJAX, debido a la ubicuidad de JavaScript en casi cualquier navegador web.
Nos permite escribir objetos javascript de una forma ligera y facil de interpretar. Se suele
utiilizar para el intercambio de datos.
var personas = {
u1: { nombre: "Carlos", pais: "Argentina" },
8
u2: [{ nombre: "Martin", pais: "Argentina" }, { apellido: "Garcia" }]
};
Referencias:
http://librosweb.es/libro/javascript/
http://librosweb.es/libro/fundamentos_jquery/

05 Javascript

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

05 Javascript

Hochgeladen von

Copyright:

Verfügbare Formate

Javascript

Donde Usar Javascript

Evento Descripcin Elementos para los que est definido

onblur Deseleccionar el elemento <button>, <input>, <label>, <select>,

onchange Deseleccionar un elemento que se <input>, <select>, <textarea>

onclick Pinchar y soltar el ratn Todos los elementos

ondblclick Pinchar dos veces seguidas con el Todos los elementos

onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>

onkeypress Pulsar una tecla Elementos de formulario y <body>

onkeyup Soltar una tecla pulsada Elementos de formulario y <body>

onload La pgina se ha cargado <body>

onmousedo Pulsar (sin soltar) un botn del Todos los elementos

onmousemo Mover el ratn Todos los elementos

onmouseout El ratn "sale" del elemento (pasa Todos los elementos

onmouseove El ratn "entra" en el elemento Todos los elementos

onreset Inicializar el formulario (borrar <form>

onresize Se ha modificado el tamao de la <body>

onselect Seleccionar un texto <input>, <textarea>

onsubmit Enviar el formulario <form>

onunload Se abandona la pgina (por <body>

En JavaScript, as como en la mayora de los lenguajes de programacin orientados a

Estos eventos se pueden utilizar de varias maneras:

<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

Otra forma es hacerlo de forma semantica:

// Asignar la funcin externa al elemento

return function (text) { //funcin interna

var zeroPad = paddingLeft();

var dotPad = paddingLeft(20, ".");

function foo() { foo(); }

// Esta funcion al no tener un identificador, se usa el arguents.callee() para ejecutarse a si

var foo = function() { arguments.callee(); };

// Se suele llamar como funcion anonima autoejecutable, pero no se autoejecuta, porque no

(function(){ /* code */ }());

// Si se agrega un idenificador, ya es una funcion con nombre, no anonima.

(function foo(){ /* code */ }());

// Estas son autoejecutables, pero no de la mejor manera

var contador = (function(){

Suponiendo que tenemos esta funcion anonima.

Una alternativa a esto es pasar como parametros las variables requeridas.

Para agregarle metodos podemos seguir el siguiente ejemplo:

Otra forma de construir una clase es la siguiente:

var obj = new Clase();

Si el codigo del modulo se encuentra en mas de un archivo, ya que en distintos archivos

Json - Javascript object notation.

Das könnte Ihnen auch gefallen