Buscando artículos sobre "Javascript"
10-julio-2012
admin

Juego de memorizar parejas Online

Se ha realizado otro juego en HTML 5, JQuery y PHP. El juego es muy similar al anterior del rompecabezas. Consiste en una aplicación web que a partir de una serie de imagenes te genera un panel con 16 casillas que se deben ir abriendo de dos en dos acertando los pares iguales.
Cada pantalla tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar la pantalla que generan tus fotos y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://hazparejas.disastercode.com.es.

10-junio-2012
admin

Elementos y atributos nuevos para formularios con HTML 5

En HTML 5 se han añadido nuevos elementos para emplear en los formularios. Éstos presentan nuevas funcionalidades, A continuación, se muestra un listado con los distintos types que se pueden usar en formularios con HTML 5:

text – Para introducir texto, simplemente.
search – Específico para input en un buscador.
url – Específico para direcciones de página web. Requiere http:// o http: simplemente.
tel – Se supone que para números de teléfono aunque no he conseguido que haga nada.
email – El nombre lo dice.
password – Escribe el contenido en asteriscos.
date – Para introducir un fecha (mes, día y año).
time – Para introducir una hora en formato 24 horas (horas, minutos y segundos).
datetime – Para introducir fecha y hora.
datetime-local – Igual que el anterior pero sin posibilidad de indicar zona horaria, ya que se entiende que es la local.
month – Para indicar el mes de un año.
week – Para indicar una semana de un año.
number – Específico para numeros.
range – Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min=”10″ y un max=”12″ (los números son de ejemplo.)
checkbox – Para seleccionar y deseleccionar.
radio button – Para seleccionar, uno obligatorio.
color – Para seleccionar colores.

Nuevos atributos de HTML 5:
– Los elementos de fecha y hora permiten atributos max y min. Para indicar fecha/hora máxima y mínima.
Required que nos permite indicarle al formulario que ese campo es obligatorio.
Placeholder permite introducir un texto de ejemplo en el cuadro de texto. De esta forma se da a entender como tiene que ser el formato de lo que se introduce.
List nos permite asociar una lista a un cuadro de texto. El valor de este atributo list, debe coincidir con el identificador de una lista definida con una etiqueta datalist (esta etiqueta también es nueva en HTML 5. El resultado es un efecto muy parecido a un select pero con las ventajas de un text.
Autofocus hace que un determinado elemento tome el foco.

Cómo se ve, se pueden validar formularios sin ningún esfuerzo y sin necesidad de javascript. Ya que se encarga de realizar la validación el propio formulario. Incluso se pueden añadir funcionalidades con css en función de si se ha rellenado correctamente o no. Tal que así:


Este codigo modifica los colores de todos los input, que se encuentran dentro de un form cuyo id es “idForm”, cuando son válidos o inválidos.

7-junio-2012
admin

Utilizar tags de HTML 5 en navegadores que no los soportan.

Para que funcionen las tags de html 5 en navegadores que no lo soportan (p.e. internet explorer 8 y anteriores). Basta con añadir el siguiente fragmento de javascript:

< script type="text/javascript">
   document.createElement("nav");
   document.createElement("header");
   document.createElement("footer");
   document.createElement("section");
   document.createElement("article");
   document.createElement("aside");
   document.createElement("hgroup");
< /script>

Además, se debe añadir la siguiente regla en la hoja de estilos.

nav, header, footer, section, article, aside, hgroup{
    display: block;
}

4-junio-2012
admin

Manejador de eventos con DOM (addEventListener y removeEventListener)

El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:

elemento_que_se_escucha.addEventListener('evento', 
                              función_a_lanzar, booleano);

elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)

Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:

elemento_que_se_escuchaba.removeEventListener('evento', 
                                función_a_anular, booleano);

NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:

< body >
   
< /body >

Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?

Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:

Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.

Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.

NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).

Fuente

3-junio-2012
admin

Resumen DOM (Document Object Model)

Un documento HTML presenta una estructura de árbol constituido por nodos. Estos nodos pueden pertenecer a uno de los siguientes tipos:
Elemento – Estos nodos representan los elementos del documento (br, input, select, p,…).
Atributo – Los nodos atributos representan las propiedades de los elementos.
Texto – Fragmento de texto del documento HTML.

Para obtener los elementos se pueden usar los siguientes métodos: getElementById, getElementsByTagName y getElementsByClassName. (El primero devuelve el elemento que tiene el id solicitado mientras que los dos últimos devuelven un array de elementos seleccionándolos por el tipo de tag html y de class respectivamente)
Y para trabajar con sus atributos: getAttribute y setAttribute

Por otro lado, se pueden utilizar los siguientes métodos para recorrer esa estructura de árbol:
parentNode – Obtiene el nodo padre del nodo actual.
childNodes – Obtiene los nodos hijos del nodo actual (devuelve un array). Entre sus nodos hijos tiene en cuenta los nodos de texto.
firstChild – Obtiene el primer hijo del nodo actual.
lastChild – Obtiene el último hijo del nodo actual.
previousSibling – Obtiene el hijo del nodo padre anterior al nodo actual.
nextSibling – Obtiene el hijo del nodo padre siguiente al nodo actual.

También se pueden utilizar las siguientes propiedades:
nodeName – El nombre del nodo, que se define dependiendo del tipo de nodo. (Se corresponde con la etiqueta HTML en el caso de un nodo elemento o #text si se trata de un nodo texto).
nodeValue – El valor del nodo, que se define dependiendo del tipo de nodo.
nodeType – Un número que representa el tipo de nodo del que se trata. Un número del 1 al 12 (1 para nodos elemento, 2 para nodos atributos, 3 para nodos texto).

Métodos para crear, eliminar y reemplazar nodos:
createElement – Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado (Pertenece a Document) (var elemento = document.createElement(tag))
createTextNode – Crea un nodo texto. (Pertenece a Document)
cloneNode – Crea un nodo idéntico a otro existente. (var clonedNode = nodo_padre.clone(nodo_hijo))
appendChild – Añade un nodo como hijo de otro. Sirve para incorporar el nuevo nodo al árbol del documento. (nodo_padre.appendChild(nodo_hijo))
insertBefore – Inserta un nodo antes de otro en el árbol del documento. (nodo_padre.insertBefore(nuevo_nodo, viejo_nodo))
removeChild – Elimina un nodo hijo. (nodo_padre.removeChild(nodo_hijo))
replaceChild – Reemplaza un nodo hijo. (nodo_padre.replaceChild(nodo_hijo))

NOTA: Por último, tenemos el método innerHTML que se puede utilizar como alternativa a DOM. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo.

2-junio-2012
admin

Calcular los días que tiene un mes en javascript

Ejemplo donde se puede ver como se calculan los días que tiene un mes en un año determinado. Utilizando para ello javascript:

function daysInMonth(humanMonth, year) {
  return new Date(year || new Date().getFullYear(), humanMonth, 0).getDate();
}

De esta manera ejecutando: daysInMonth(2, 2009); se obtendría 28.
Y ejecutando: daysInMonth(2, 2008); sería 29.

Fuente

31-mayo-2012
admin

Objeto history en javascript

Este objeto guarda la información sobre los URLs que el usuario ha visitado dentro de una ventana determinada, es decir guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia delante o hacia atrás en dicha lista.

Propiedades

CURRENT: Cadena que contiene la URL completa de la entrada actual en el historial.

NEXT: Cadena que contiene la URL completa de la siguiente entrada en el historial.

LENGTH: Entero que contiene el número de entradas del historial (i.e., cuántas direcciones han sido visitadas).

PREVIOUS: Cadena que contiene la URL completa de la anterior entrada en el historial.

Métodos

BACK(): Vuelve a cargar la URL del documento anterior dentro del historial.

FORWARD() Vuelve a cargar la URL del documento siguiente dentro del historial.

GO(“posición” | “URL destino”): Vuelve a cargar la URL del documento especificado por posición dentro del historial, la posición puede ser un entero, en cuyo caso indica la posición relativa del documento dentro del historial; o puede ser una cadena de caracteres, en cuyo caso representa toda o parte de una URL que esté en el historial.

27-mayo-2012
admin

Objeto location en javascript

El objeto location representa una URL completa. Se trata de una propiedad del objeto window.

Propiedades

HASH: Cadena de caracteres que representa el nombre del ancla definida por los caracteres tras el símbolo #.

HOST: Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL.

HOSTNAME: Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL actual.

HREF: URL actual en forma de objeto string.

PATHNAME: Cadena que contiene la ruta de acceso al recurso, dentro de la URL.

PORT: Cadena que contiene el número de puerto del servidor, dentro de la URL.

PROTOCOL: Protocolo precisado en el URL.

REFERRER: URL a partir de que el documento actual se consulta.

SEARCH: Cadena que contiene la información pasada en una llamada a un script (a continuación de ?), dentro de la URL.

Métodos

reload(): Vuelve a cargar la URL especificada en la propiedad href del objeto location.

replace(cadenaURL): Reemplaza el historial actual mientras carga la URL especificada en cadenaURL.

12-mayo-2012
admin

Propiedades nth-child y first-child de jquery.

JQuery tiene varias propiedades que se pueden utilizar para acceder a nodos concretos que están dentro de un nodo padre. Entre estas propiedades voy a comentar el funcionamiento de: first-child y nth-child

Para ello voy a utilizar un ejemplo. Supongamos que tenemos un Select cuyo id es “selectPrueba”.

first-child – Se puede utilizar para seleccionar el primer elemento.
p.e. esto seleccionaria en el combo el primer elemento.

$('select#selectPrueba option:first-child').attr("selected", "selected");

nth-child – Permite seleccionar un elemento concreto.
p.e. esto seleccionaria en el combo el elemento 4.

$('select#selectPrueba option:nth-child(4)').attr('selected', 'selected');

Más información con ejemplos: first-child y nth-child.

17-marzo-2012
admin

Comprobar que existe un elemento en JQuery

Una forma de comprobar si existe un elemento con jquery es utilizar la función length(). Esta función cuenta el número total de elementos.

if( $('#identificadorElemento').length == 0 ){
     //Devuelve 0 si no encuentra ningún elemento con ese id

}else{
     //En otro caso es que ha encontrado como mínimo 1

}
Páginas:«1234

Categorias

Linkedin