<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>webschema &#187; Javascript</title>
	<atom:link href="http://webschema.hakel.net/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://webschema.hakel.net</link>
	<description>: Planifica, diseña, crea la web</description>
	<lastBuildDate>Tue, 20 Dec 2011 20:45:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>Secretos y Rarezas de JavaScript</title>
		<link>http://webschema.hakel.net/secretos-y-rarezas-de-javascript/</link>
		<comments>http://webschema.hakel.net/secretos-y-rarezas-de-javascript/#comments</comments>
		<pubDate>Thu, 28 Jul 2011 17:31:33 +0000</pubDate>
		<dc:creator>Hakel</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[lenguajes basados en prototipos]]></category>
		<category><![CDATA[NaN]]></category>
		<category><![CDATA[null]]></category>
		<category><![CDATA[replace]]></category>
		<category><![CDATA[secretos y rarezas de javascript]]></category>
		<category><![CDATA[undefined]]></category>
		<guid isPermaLink="false">http://webschema.hakel.net/secretos-y-rarezas-de-javascript/</guid>
		<description><![CDATA[JavaScript es uno de los lenguajes de programación que más me gustan y que más me sorprenden día a día. Y así, como es fascinante, también tiene sus secretos y rarezas. Veamos algunas de ellas Para empezar, debemos recordar, que JavaScript no es un lenguaje basado en Clases, sino basado en Prototipos, y un lenguaje…]]></description>
			<content:encoded><![CDATA[<p><strong><a href="http://webschema.hakel.net/wp-content/uploads//65_secretos_y_rarezas_javascript.jpg"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;" title="65_secretos_y_rarezas_javascript" src="http://webschema.hakel.net/wp-content/uploads//65_secretos_y_rarezas_javascript_thumb.jpg" alt="65_secretos_y_rarezas_javascript" width="138" height="120" border="0" /></a></strong></p>
<p><strong>JavaScript</strong> es uno de los lenguajes de programación que más me gustan y que más me sorprenden día a día. Y así, como es fascinante, también tiene sus secretos y rarezas. Veamos algunas de ellas <img class="wlEmoticon wlEmoticon-smile" style="border-style: none;" src="http://webschema.hakel.net/wp-content/uploads//wlEmoticon-smile.png" alt="Smile" /></p>
<p>Para empezar, debemos recordar, que <strong>JavaScript</strong> no es un lenguaje basado en Clases, sino basado en Prototipos, y un <strong>lenguaje basado en Prototipos</strong> tiene la noción de un <strong>objeto prototipo</strong>, un objeto utilizado como una plantilla de la cual se obtiene las propiedades iniciales para un nuevo objeto.</p>
<p>Si quieres leer más sobre las diferencias entre los l<strong>enguajes basados en clases frente a los basados en prototipos</strong>, lee <a href="https://developer.mozilla.org/es/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos" target="_blank">este artículo</a></p>
<p>&nbsp;</p>
<p><strong>1. Null es un objeto <img class="wlEmoticon wlEmoticon-surprisedsmile" style="border-style: none;" src="http://webschema.hakel.net/wp-content/uploads//wlEmoticon-surprisedsmile.png" alt="Surprised smile" /></strong><br />
Todos sabemos que la definición de <strong>null</strong> es &#8220;<strong>la ausencia de un valor</strong>&#8220;. Pues bien, en <strong>JavaScript</strong>, <strong>null</strong> es un objeto. No lo crees, pruébalo:</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// 'object'</span></pre></td></tr></table></div>
<p>A pesar de esto, <strong>null</strong> no se considera una instancia del objeto (prototipo) Object. Recordemos que en Javascript, los valores son instancias de objetos prototipos, por ejemplo, cada número es una instancia del objeto Number. Con esto, volvemos a la lógica, ya que siendo null la ausencia de un valor, entonces, no puede ser una instancia de un objeto.</p>
<p>Probemos con:</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span> <span style="color: #000066; font-weight: bold;">instanceof</span> Object<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//false</span></pre></td></tr></table></div>
<p>En conclusión, en <strong>JavaScript</strong>, <strong>null</strong> es un objeto, pero no es instancia de objeto prototipo.</p>
<p>&nbsp;</p>
<p><strong>2. NaN es un Número</strong></p>
<p>Si el que Null sea un objeto te pareció extraño, ahora intenta pensar en que <strong>NaN</strong> es un número!, se que estarás pensando que <strong>NaN</strong> es acrónimo de &#8220;<strong>Not a Number</strong>&#8221; ¿cómo entonces es que en JavaScript es una instancia de Number?</p>
<p>Intenta:</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> NaN<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 'Number'</span></pre></td></tr></table></div>
<p>Y otra cosa, <strong>NaN</strong> no es considerado igual a sí mismo :-S</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>NaN <span style="color: #339933;">===</span> NaN<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// false</span></pre></td></tr></table></div>
<p>Así que, <strong>NaN</strong> no es igual a nada, por lo que la única manera de comprobar que algo es igual a <strong>NaN</strong>, es mediante la función <strong>isNaN();</strong></p>
<p>&nbsp;</p>
<p><strong>3. replace() puede aceptar una función de retorno</strong></p>
<p>Este es uno de los secretos mejor guardados de JavaScript (v1.3+).</p>
<p>La mayoría de programadores, estamos acostumbrados a usar <strong>replace()</strong> de la siguiente manera:</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'10 13 21 48 52'</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d+/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'*'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//remplaza todos los números con '*'</span></pre></td></tr></table></div>
<p>¿Qué pasa si queremos tener mayor control sobre los reemplazos que se quieren realizar?. Un ejemplo es reemplazar solo aquellos números máyores a 30. Esto, no lo podemos hacer  solo con expresiones regulares. Probablemente, quienes se han enfrentado a esto, han realizado un <strong>split()</strong> sobre la cadena, y luego han recorrido con un ciclo el arreglo resultante para reemplazar las coincidencias, y después, seguramente, han usado un <strong>join()</strong> sobre el arreglo, para volver a tener una cadena.</p>
<p>Pues bien, esa larga historia, se puede resumir llamando a una función para evaluar cada coincidencia:</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'10 13 21 48 52'</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\d+/g</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>match<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">return</span> parseInt<span style="color: #009900;">&#40;</span>match<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">30</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'*'</span> <span style="color: #339933;">:</span> match<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 10 13 21 * *</span></pre></td></tr></table></div>
<p>Por cada coincidencia, JavaScript llama nuestra función pasando como argumento nuestra coincidencia. Y devolverá &#8216;*&#8217; si es mayor que 30 o el mismo argumento, en caso contrario.</p>
<p>&nbsp;</p>
<p><strong>4. Undefined puede definirse</strong></p>
<p>A estas alturas de este post, ya has de tener un verdadero dolor de cabeza, pero también es cierto, que estarás sorprendido y quizá, se te hayan aclarado algunas dudas viejas.</p>
<p>Pues bien, para no hacer más largo este post, vayamos con esta idea &#8220;<strong>Undefined</strong> puede definirse&#8221;. Suena algo tonto, pero es cierto, y puede tener serias consecuencias.</p>
<p>Te sonará extraño (y yo aún no acabo de entenderlo), pero &#8220;<strong>undefined</strong>&#8221; no es una palabra reservada en JavaScript, a pesar de que su significado es especial, y a pesar de que es la única manera de determinar si una variable está o no definida.</p>
<p>Veamos:</p>
<p>var someVar;</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>someVar <span style="color: #339933;">==</span> undefined<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//true</span></pre></td></tr></table></div>
<p>Hasta aquí, todo normal ¿cierto?. Ahora:</p>
<p>&nbsp;</p>
<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">undefined <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;I'm not undefined!&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> someVar<span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>someVar <span style="color: #339933;">==</span> undefined<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//false</span></pre></td></tr></table></div>
<p>Si aún así, no me crees que &#8220;<strong>undefined</strong>&#8221; no es una palabra reservada, <a href="https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words" target="_blank">lee esto</a></p>
<p>Y tú, ¿qué otros secretos de JavaScript conoces ?</p>
]]></content:encoded>
			<wfw:commentRss>http://webschema.hakel.net/secretos-y-rarezas-de-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Expresiones Regulares &#250;tiles</title>
		<link>http://webschema.hakel.net/expresiones-regulares-tiles/</link>
		<comments>http://webschema.hakel.net/expresiones-regulares-tiles/#comments</comments>
		<pubDate>Fri, 04 Jun 2010 19:06:20 +0000</pubDate>
		<dc:creator>Hakel</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programación]]></category>
		<category><![CDATA[definicion]]></category>
		<category><![CDATA[expresiones comunes]]></category>
		<category><![CDATA[Expresiones regulares]]></category>
		<category><![CDATA[expresiones regulares utiles]]></category>
		<category><![CDATA[lista de regex]]></category>
		<category><![CDATA[regex]]></category>
		<category><![CDATA[regexp]]></category>
		<category><![CDATA[validar formularios]]></category>
		<guid isPermaLink="false">http://webschema.hakel.net/expresiones-regulares-tiles/</guid>
		<description><![CDATA[Todos hemos oído hablar o incluso usado alguna vez las expresiones regulares. Si no lo has hecho aún (si no es que ya lo hiciste, y ni por enterado te habías dado), seguro lo harás en algún momento como desarrollador web. Y es que las expresiones regulares constituyen un mecanismo bastante potente para realizar manipulaciones…]]></description>
			<content:encoded><![CDATA[<p><a href="http://webschema.hakel.net/wp-content/uploads/regular.gif"><img style="display: inline; border: 0px;" title="regular" src="http://webschema.hakel.net/wp-content/uploads/regular_thumb.gif" border="0" alt="regular" width="206" height="200" /></a> Todos hemos oído hablar o incluso usado alguna vez las expresiones regulares. Si no lo has hecho aún (si no es que ya lo hiciste, y ni por enterado te habías dado), seguro lo harás en algún momento como desarrollador web.</p>
<p>Y es que las expresiones regulares constituyen un mecanismo bastante potente para realizar manipulaciones de cadenas de texto, pero hay que manejarlas con mucho cuidado.</p>
<p><strong>¿Qué son?</strong></p>
<p>Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrían definir como una serie de caracteres que forman un patrón, que representan a otro grupo de caracteres mayor, de tal forma que podemos comparar el patrón con otros conjuntos de caracteres para ver las coincidencias.</p>
<p>A continuación te dejo una lista de expresiones regulares que comúnmente requieres para validar algunos formularios, espero que te sean útiles.</p>
<p><span id="more-214"></span></p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Entero</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^(?:\+|-)?\d+$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Letras, números y guiones</span></strong></td>
<td width="340" valign="top"><code><span style="font-family: Arial; font-size: x-small;">([A-Za-z0-9-]+)</span></code></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Un solo dígito</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^[0-9]{1}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Cadena vacía</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^\s*$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Cadena alfanumérica</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^([a-zA-Z]|[0-9])+$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Cadena sin caracteres acentuados</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^[^áéíóú]*$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Correo electrónico</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">URL</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?$</span></td>
</tr>
<tr>
<td width="140" valign="top"><span style="font-size: x-small;"><strong>Usuario</strong> (letras, digitos y subrayado)</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">^[a-zA-Z0-9_]{3,16}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><span style="font-size: x-small;"><strong>Contraseña segura</strong> </span></p>
<p><span style="font-size: x-small;">(Entre 8 y 10 caracteres, por lo menos un dígito, y sin caracteres especiales)</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Contraseña segura</span></strong></p>
<p><span style="font-size: x-small;">(Al menos una mayúscula, una minúscula y un dígito)</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15})</span></td>
</tr>
<tr>
<td width="140" valign="top"><span style="font-size: x-small;"><strong>Fecha</strong> (dd/mm/aaaa)</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">^\d{1,2}\/\d{1,2}\/\d{2,4}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><span style="font-size: x-small;"><strong>Hora</strong> (hh:mm:ss)</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Número de Tarjeta de Crédito</span></strong></td>
<td width="340" valign="top"><span style="font-size: x-small;">^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Números de Teléfono (EEUU, Canadá y México)</span></strong></p>
<p><span style="font-size: x-small;">(###) ###-#### </span></p>
<p><span style="font-size: x-small;">##-###-####</span></td>
<td width="340" valign="top"><span style="font-size: x-small;">^((?[0-9]{3,3})?|[0-9]{3,3}[-. ]?)[ ][0-9]{3,3}[-. ]?[0-9]{4,4}$</span></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Códigos postales</span></strong></p>
<p><span style="font-size: x-small;">#####</span></p>
<p><span style="font-size: x-small;">#####-####</span></td>
<td width="340" valign="top"><code><span style="font-family: Arial; font-size: x-small;">^[0-9]{5,5}([- ]?[0-9]{4,4})?$</span></code></td>
</tr>
<tr>
<td width="140" valign="top"><strong><span style="font-size: x-small;">Direcciones IP</span></strong></td>
<td width="340" valign="top"><code><span style="font-family: Arial; font-size: x-small;">^(?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)(?:[.](?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)){3}$</span></code></td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://webschema.hakel.net/expresiones-regulares-tiles/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

