5 buenas librerías JavaScript que habría que tener siempre en cuenta

25 Octubre 2009

En el siguiente artículo nos exponen cinco posibles problemas que podemos tener en la mayoría de proyectos web, y sus correspondientes librerías JavaScript para solucionarlos.

5 Lesser Know JavaScript Libraries that Make Web Design Easier.

Deja un Comentario » | JavaScript | Etiquetado: , | Permalink
Escrito por toWerS

Comparativa de frameworks de JavaScript

15 Octubre 2009

En el siguiente enlace podemos encontrar una comparativa de varios frameworks de JavaScript:

JavaScript Framework Matrix.

Deja un Comentario » | JavaScript | Etiquetado: , , | Permalink
Escrito por toWerS

Obtener la posición de una capa o elemento desde JavaScript

23 Septiembre 2009

Para obtener la posición (coordenadas) de una capa o cualquier elemento HTML desde JavaScript debemos usar las propiedades offsetTop y offsetLeft para tener la posición vertical y horizontal respectivamente.

Aquí os pongo un pequeño ejemplo que lo ilustra:

<html>
<head></head>
<body>
<div id="myDiv"
style="float:right;
width:400px;
height:200px;
background-color:blue;"></div>
<div onclick="alert(myDiv.offsetTop);alert(myDiv.offsetLeft);">Posición</div>
</body>
</html>

Deja un Comentario » | JavaScript | Etiquetado: , , , | Permalink
Escrito por toWerS

Datejs – Librería Open-Source de fechas para JavaScript

2 Marzo 2009

Con la librería Datejs podremos hacer muchas operaciones y validaciones con fechas de una manera fácil y eficaz desde JavaScript.

Esta librería es Open-Source.

Puedes acceder a más información y a su descarga en su web oficial:

Datejs.

Deja un Comentario » | JavaScript | Etiquetado: , , | Permalink
Escrito por toWerS

JavaScript – Borrar elementos en un array

11 Febrero 2009

Si queremos borrar un elemento de un array en JavaScript, habremos observado que con igualar el elemento a undefined o null, el elemento no desaparece del array.
La manera óptima para hacerlo es usar el operador delete de JavaScript (disponible a partir de JavaScript 1.2), tal y como muestro en el siguiente ejemplo:

colores = new Array("rojo", "amarillo", "verde", "negro", "blanco");
delete colores[2];

Con esto el elemento “verde”, es el que tenía índice número 2, desaparece del array realmente, consumiendo así el array menos memoria.

2 comentarios | JavaScript, Tutoriales / manuales | Etiquetado: , | Permalink
Escrito por toWerS

JavaScript – Averiguar si un elemento está en un array o en un objeto

10 Febrero 2009

La manera más eficiente de saber si un elemento está en un array o en objeto en JavaScript es la que muestro en el siguiente ejemplo:

En un array:

colores = new Array("rojo", "amarillo", "verde", "negro", "blanco");
if (3 in colores) {
   // codigo
}

En un objeto:

micapa = document.getElementById("capa1");
if ("innerHTML" in micapa){
   //codigo
}

En el primero ejemplo se comprueba que exista un elemento con índice 3 en el array colores. Y en el segundo ejemplo, que el objeto capa1 contenga la propiedad innerHTML.

El único requisito para usar el operador in es que el navegador soporte JavaScript 1.2.

Deja un Comentario » | JavaScript, Tutoriales / manuales | Etiquetado: , , | Permalink
Escrito por toWerS

Chuleta para JavaScript

25 Enero 2009

Hoja de referencia para JavaScript, de una hoja, que incluye:

  • Funciones y métodos.
  • XMLHttpRequest.
  • JavaScript en HTML.
  • Expresiones regulares.
  • Manejadores de eventos.

Te lo puedes descargar en PDF o PNG desde el siguiente enlace:

JavaScript Cheat Sheet.

JavaScript Cheat Sheet

JavaScript Cheat Sheet

Deja un Comentario » | Chuletas, JavaScript | Etiquetado: , , , | Permalink
Escrito por toWerS

Leer parámetros desde la URL en JavaScript

24 Diciembre 2008

Normalmente se suelen mandar parámetros desde un formulario en HTML / XHTML a un script escrito en un lenguaje de lado de servidor (JSP, PHP, ASP, …), pero en alguna ocasión tendremos que llamar a un HTML / XHTML pasándole parámetros por URL (es decir, los parámetros son enviados usando el método GET).

En JavaScript podemos recurrir al objeto del navegador location y a su método search. Si una URL con parámetros tiene la forma:

http://elbitcampeador.wordpress.com?parametro1=valor1&parametro2=valor2

Para esta URL, el método location.search devuelve la cadena:

?parametro1=valor1&parametro2=valor2

Donde cada parámetro está separado por el caracter &, y para cada párametro se usa el carácter = para separar el nombre del valor.

A continuación pongo un ejemplo completo de lectura de parámetros desde URL usando JavaScript, y usar dos parámetros en concreto (uno llamado ancho y otro alto) para hacer un recuadro con esas dimensiones.

index.html

<html>
<head>
   <title>Leer par&aacute;metros desde JavaScript</title>
   <script type="text/javascript" src="script.js"></script>
</head>
<body onload="javascript:Init();">
    La URL es: <span id="url"></span>
    El valor del par&aacute;metro ANCHO es: <span id="ancho"></span>
    El valor del par&aacute;metro ALTO es: <span id="alto"></span>

<div id="cuadro" style="background-color:red;"></div>
</body>
</html>

index.js

function Init(){
	var url = String(window.location.href);
	var params = String(window.location.search);
	var aux1 = new Array();
	var aux2 = new Array();
	var cont = 0;
	var tot = 0;

	//si hay parametros
	if (params.length > 0){
		//eliminamos el primer caracter '?'
		params = params.substr(1);

		//insertamos en un array las parejas nombre=valor
		aux1 = params.split("&");
		tot = aux1.length;
		for (cont = 0; cont < tot; cont++){
			//separo el nombre del valor
			aux2 = aux1[cont].split("=");

			//trabajo con cada parámetro
			if (aux2[0].toLowerCase() == "ancho"){
				document.getElementById("ancho").innerHTML = aux2[1];
				document.getElementById("cuadro").style.width = aux2[1];
			}
			else if (aux2[0].toLowerCase() == "alto"){
				document.getElementById("alto").innerHTML = aux2[1];
				document.getElementById("cuadro").style.height = aux2[1];
			}

		}

	}
	else{
		alert("No hay parámetros en la URL");
	}

	document.getElementById("url").innerHTML = url;
}

6 comentarios | JavaScript, Tutoriales / manuales | Etiquetado: , | Permalink
Escrito por toWerS