Taller

Sección A
1

 JavaScript no es un lenguaje compilado. JavaScript se integra directamente en las

páginas HTML y es interpretado (sin estar compilado) por el cliente (navegador). Es
decir, el programa fuente (página web) se ejecuta directamente.
 JavaScript está basado en objetos, mientras que Java es un lenguaje de
programación orientado a objetos (OOP). JavaScript no utiliza clases, herencias o
técnicas habituales en la OOP.
 No existe la declaración de tipos de variables a utilizar. JavaScript se encarga de ello
automáticamente.
 Las referencias a los objetos se comprueban en tiempo real durante la ejecución. En
los lenguajes compilados como Java esa comprobación se efectúa al compilarse.
 JavaScript no puede (no sabe) escribir en el disco duro (excepto cookies). Por ello
puede considerarse como un lenguaje seguro en Internet, en el sentido que desde
las páginas web, con JavaScript, no se pueden “gastar bromas”.

2 Generalmente, cuando trabajamos con Javascript nos encontramos con que tenemos
problemas a la hora de representar tildes o caracteres especiales en nuestras aplicaciones.

Por ejemplo, es frecuente que tengamos que mostrar un alert manteniendo el formato
original del texto, esto puede ser, con tildes, eñes o saltos de línea:

alert( ' Contraseña errónea ' );

Dependiendo de la codificación de caracteres, el texto puede aparecer mal formateado:

Para evitar estos errores, recurrimos al estándar UNICODE, una codificación diseñada para
facilitar la visualización de documentos en múltiples lenguajes preservando sus grafías y
caracteres originales.
La siguiente tabla muestra aquellos caracteres más utilizados en castellano:

Para introducir estos caracteres en nuestros scripts, tenemos que recurrir a la cadena de
escape ‘\u’ seguida de su correspondiente código. Así, nuestro ejemplo anterior quedaría
como sigue:

alert( ' Contrase\u00F1a err\u00F3nea ' );

El resultado si corresponde con lo esperado:

Para el resto de caracteres especiales, como los saltos de línea o las tabulaciones,
recurrimos al siguiente resumen:
 * \n: Salto de linea.
* \r: Retorno de carro.
* \t: Tabulación horizontal.
* \v: Tabulación vertical.
* \’: Comilla simple o apostrofe.
* \”: Comilla doble.
* \\: Barra invertida.

Para utilizarlos, solo hace falta escribirlos tal cual. Así, para conseguir un mensaje con un
salto de línea, escribiríamos los siguiente:

alert( ' Contrase\u00F1a err\u00F3nea\u0021 \n Int\u00E9ntalo de nuevo. ' );

Y obtendríamos:

3. Hay cuatro algoritmos de igualdad en ES2015:

 Comparación de Igualdad Abstracta (==)

 Comparación de Igualdad Estricta (===): usado por
by Array.prototype.indexOf, Array.prototype.lastIndexOf, y case-matching
 SameValueZero: Usado por los constructores de %TypedArray% y ArrayBuffer , así como
por las operaciones de Map y Set, y los nuevos String.prototype.includes de ES2016
 SameValue: usado en el resto de los casos
JavaScript proporciona tres operaciones distintas para comparar la igualdad de dos
elementos:

 Igualdad estricta (o "triple igual" o "identidad") usando ===,

 igualdad débil o relajada ("doble igual") usando ==,
 y Object.is (nuevo en ECMAScript 2015).
Elegir una u otra operación depende del tipo de comparación que esté buscando realizar.

Explicándolo de manera concisa, un doble igual lleva a cabo una conversión de tipo (cast)
cuando se comparan dos cosas; el triple igual hace lo mismo pero sin realizar ninguna
conversión de tipo (cast) (simplemente devuelve falso si los tipos de los elementos a
comparar son diferentes); Y Object.is funciona de la misma manera que el triple igual pero
hace una gestión especial de NaN, -0 y +0 de tal manera que los dos últimos no son iguales
mientras que Object.is(NaN, NaN) nos devolverá true. (Si comparamos NaN con NaN de
manera ordinaria , por ejemplo usando el doble igual o el triple igual, nos devolverá false, ya
que la especificación IEEE 754 así lo dice). Hay que darse cuenta de que la distinción entre
todas estas posibilidades tiene que ver con como se manejan los tipos primitivos; ninguna
de ellas compara si los parámetros son similares en relación a su estructura. Para comparar
dos objectos no primitivos , x e y, que tengan la misma estructura pero que sean objetos
diferentes entre ellos, todos los casos anteriormente descritos devolverán false.

4 Eventos y Manejadores de Eventos

¿Que son?

 Son notificaciones sobre algo que ha sucedido.

 Producidos por:
o Usuario. (ej: pulsa un botón).
o Páginas. (ej: se carga una página).
 Pueden definirse manejadores que se ejecutan cuando se producen los eventos.

Ejemplo

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Calcula(form) {
if (confirm("Seguro?"))
form.result.value = eval(form.expr.value)
else
alert("Reintentelo otra vez.")
}
</SCRIPT>
</HEAD>

<BODY>

<FORM>
Introduzca una expresión:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calcular" onClick="Calcula(this.form)">
 <BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</FORM>

</BODY>
Ver Resultado

Tipos de Eventos

JavaScript 1.0

Evento Descripción Manejador

Click Pulsar ratón sobre algún elemento onClick
Focus Obtener el foco de entrada onFocus
Blur Perder el foco de entrada onBlur
Change Cambiar un valor de un elemento de entrada onChange
Load Al cargar una página y antes de presentarla onLoad
MouseOver Cuando el puntero se posiciona sobre algún objeto onMouseOver
Select Selecciona un texto en un text o textarea onSelect
Submit Al pulsar un botón submit onSubmit
Unload Al eliminar un documento o una ventana onUnload

Timeout Expira un temporizador

JavaScript 1.1

Evento Descripción Manejador

Abort Al abortar la carga de una imagen onAbort
Error Al producirse un error cargando una imagen o documento onError
MouseOut Cuando el puntero sale de la zona ocupada por algún objeto. onMouseOut
Reset Al pulsar un botón reset onReset

Cancelar Acciones
  Un manejador de eventos puede cancelar las acciones a tomar a causa de un evento
si devuelve false.

// Anular seguir el enlace

<A HREF="" onClick="func();return false">

// Evita enviar formulario

<INPUT TYPE="submit" onClick="func();return false">

Ejemplo: Temporizadores

<HTML>
<HEAD>
<TITLE>Contador</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var contador;
var tId;

function Tic() {
contador--;
window.status= "Contador:" + contador;
if (contador > 0)
tId = setTimeout("Tic()", 1000);
else
alert ("Ring, ring")
}

function Iniciar(v) {
contador = v;
tId = setTimeout("Tic()", 1000);
}

function Parar() {
if (tId) {
clearTimeout(tId);
window.status= "Contador: Cancelado";
}
}
</SCRIPT>
</HEAD>
 <BODY>
<HR>
<B>Contador</B>
<FORM>
Timer Value: <INPUT TYPE="text" NAME="cont" SIZE=5>

<INPUT TYPE="button" VALUE="Arrancar"

onClick="Iniciar(this.form.cont.value)">
<INPUT TYPE="button" VALUE="Parar" onClick="Parar()">
</FORM>
<HR>
</BODY>
</HTML>
Ver Resultado

Ejemplo: onMouseOver, onMouseOut, onClick

<HTML>
<HEAD>
<SCRIPT>
function Mensaje (msg) {
window.status = msg
}
</SCRIPT>
</HEAD>

<BODY>
Pasa por
<A HREF="" onMouseOver="Mensaje('dentro');return true"
onMouseOut="Mensaje('fuera');return true"
onClick="return false">encima</A>
para ver los efectos.
</BODY>
</HTML>
Ver Resultado

Ejemplo: onFocus, onBlur, onChange

 <HTML>
<BODY>
<FORM>
Nombre: <INPUT NAME="nombre" SIZE=30
onFocus ="this.value = this.value.toLowerCase()"
onBlur ="this.value = this.value.toUpperCase()"
onChange="this.form.cambios.value++">
Cambios: <INPUT NAME="cambios" SIZE=5 VALUE=0>
</FORM>
</BODY>
</HTML>
Ver Resultado

Invocar Manejadores Explícitamente

 Sólo Netscape 3.0

 Manejadores pueden llamarse explícitamente desde el código JavaScript.
 Si para el elemento x se ha activado el manejador onNombre, puede activarse
ejecutando la función x.onnombre()
 Ejemplo:

<HTML>
<BODY>
<FORM onSubmit="document.bgColor='#ffffff'">
Nombre: <INPUT NAME="nombre" SIZE=30
onFocus ="this.value = this.value.toLowerCase()"
onBlur ="this.value = this.value.toUpperCase()"
onChange="this.form.cambios.value++">
Cambios: <INPUT NAME="cambios" SIZE=5 VALUE=0><br>

<INPUT TYPE="button" VALUE="onfocus()"

onClick="this.form.nombre.onfocus()">
<INPUT TYPE="button" VALUE="focus()"
onClick="this.form.nombre.focus()">

<INPUT TYPE="button" VALUE="onsubmit()"

onClick="this.form.onsubmit()">
<INPUT TYPE="submit" VALUE="submit"
onClick="this.form.submit()">
</FORM>
</BODY>
 </HTML>
Ver Resultado

 Los manejadores pueden reasignarse dinámicamente:

<HTML>
<HEAD>
<SCRIPT>
function None() {alert ("Estado inicial");}
function One() {alert ("Estado 1");}
function Two() {alert ("Estado 2");}

function SetOne() {
document.f.b0.onclick=One
}

function SetTwo() {
document.f.b0.onclick=Two
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="f">
<INPUT TYPE="button" VALUE="0" NAME="b0" onClick="None()">
<INPUT TYPE="button" VALUE="1" NAME="b1" onClick="SetOne()">
<INPUT TYPE="button" VALUE="2" NAME="b2" onClick="SetTwo()">
</FORM>
</BODY></HTML>
5.
a. Para saber si un valor es numero o no utilizamos la función isNaN(numero),
si no es número devolverá True y si es número devolverá False.

Un ejemplo sería:

isNaN(123) devolverá False

isNaN("prueba") devolverá True

b. ParámetrosSección
cadena
 Una cadena que representa el valor que se desea convertir.

base
Un entero que representa la base de la mencionada cadena.

DescripciónSección
parseInt es una función de alto nivel y no está asociada a ningún objeto.
La función parseInt comprueba el primer argumento, una cadena, e intenta devolver un
entero de la base especificada. Por ejemplo, una base de 10 indica una conversión a número
decimal, 8 octal, 16 hexadecimal, y así sucesivamente. Para bases superiores a 10, las letras
del alfabeto indican numerales mayores que 9. Por ejemplo, para números hexadecimales
(base 16), se utiliza de la A hasta la F.
Si parseInt encuentra un carácter que no es un numeral de la base especificada, lo ignora a
él y a todos los caracteres correctos siguientes, devolviendo el valor entero obtenido hasta
ese punto. parseInt trunca los números en valores enteros. Se permiten espacios anteriores
y posteriores.
Si no se especifica la base o se especifica como 0, JavaScript asume lo siguiente:

 Si el parámetro cadena comienza por "0x", la base es 16 (hexadecimal).

 Si el parámetro cadena comienza por "0", la base es de 8 (octal). Esta característica está
desaconsejada.
 Si el parámetro cadena comienza por cualquier otro valor, la base es 10 (decimal).
Si el primer carácter no se puede convertir en número, parseInt devuelve NaN.
Para fines aritméticos, el valor NaN no es un número en ninguna base. Puede llamar a la
función isNaN para determinar se el resultado de parseInt es NaN. Si se pasa NaN en
operaciones aritméticas, la operación resultante también será NaN.
Para convertir números a su literal cadena en una base en particular,
utilice intValue.toString(base).
EjemplosSección
Ejemplo: Usando parseIntSección
Todos los siguientes ejemplos devuelven 15:

parseInt("F", 16);
parseInt("17", 8);
parseInt("15", 10);
parseInt(15.99, 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15*3", 10);
parseInt("12", 13);

Todos los siguientes ejemplos devuelven NaN:

parseInt("Hello", 8); // No es un número en absoluto
parseInt("0x7", 10); // No es de base 10
parseInt("546", 2); // Los dígitos no son válidos para representaciones binarias.

Incluso aunque la base especificada es diferente, todos los siguientes ejemplos devuelven 17
ya que el argumento cadena comienza por "0x".

parseInt("0x11", 16);
parseInt("0x11", 0);
parseInt("0x11");

c. La función Math.round() retorna el valor de un número redondeado al entero más

cercano.

SintaxisSección

Math.round(x)

ParámetrosSección

Un número.

DescripciónSección
Si la porción fraccionaría del número es 0.5 o mayor, el argumento es redondeado al
siguiente número entero superior. Si la porción de la fracción del número es menor a 0.5, el
argumento es redondeado al siguiente número entero inferior.

Debido a que round() es un método estático de Math, siempre se debe utilizar

como Math.round(), en vez de un método del objeto Math que ha creado. (Math no es un
constructor)

EjemplosSección
Usando Math.round()Sección

// Retorna el valor 20
x = Math.round(20.49);

// Retorna el valor 21
x = Math.round(20.5);
// Retorna el valor -20
x = Math.round(-20.5);

// Retorna el valor -21

x = Math.round(-20.51);

// Retorna el valor 1 (!)

// Note el error de redondeo debido a la inexactitud del punto aritmético.
// Compare esto con Math.round10(1.005, -2) de el ejemplo de abajo.
x = Math.round(1.005*100)/100;

6.
a. Javascript: convertir cadena a mayúsculas o a minúsculas
Para convertir una cadena a mayúsculas:

cadena = 'Texto De Prueba';

cadena = cadena.toUpperCase();
//Devolvería "TEXTO DE PRUEBA"
Y para convertir una cadena a minúsculas:

cadena = 'Texto De Prueba';

cadena = cadena.toLowerCase();
//Devolvería "texto de prueba"

b. La propiedad length de un objeto String representa la longitud de una cadena, en

unidades de código UTF-16.
SintaxisSección

str.length

DescripciónSección
Esta propiedad devuelve el número de caracteres de una cadena. UTF-16, el formato usado
por JavaScript, usa 16-bit para representar los caracteres más comunes, pero necesita usar
dos caracteres para otros menos usados, así que es posible que el valor devuelto
por length no corresponda al número de caracteres de la cadena.
ECMASCript 2016 (ed. 7) estableció una longitud máxima de 2^53 - 1elementos.
Anteriormente, ninguna longitud máxima era especificada.
Para una cadena vacía, length es 0.
La propiedad static String.length devuelve 1.
EjemplosSección
Uso BásicoSección

var x = 'Mozilla';
var empty = '';

console.log('Mozilla is ' + x.length + ' code units long');

/* "Mozilla is 7 code units long" */

console.log('The empty string has a length of ' + empty.length);

/* "The empty string has a length of 0" */

c. Método Concat.
Con este método del objeto String de javascript podemos también unir dos o mas strings o
cadenas.
El método no cambia el valor de la cadena que lo invoca, sino que devuelve un nuevo string
con el texto concatenado, así que tener esto en cuenta para no darse de cabezazos.

var cadena1 = "Hola ";

var cadena2 = "Mundo";
var resultado = cadena1.concat(cadena2);

Problemas concatenando con Internet Explorer.

Aunque la forma de concatenar mas usual y sencilla es con el operador +, este puede dar
problemas de performance (rendimiento) en Internet Explorer 6,7,8 y hasta 9 cuando los
string a concatenar son muy grandes. También me ha pasado aunque no debería suceder,
el que no concatene una cadena corta con el operador + en los inefables Internet Explorer
antiguos, que son de lo peorcito que en navegadores hay, bueno, en esa categoría ni
metería al odioso IE6.
Si se os da este problema u otros al concatenar con +, cambiar al método concat que
también está soportando por todos los navegadores y no da proble,mas.
Nota: Con el método concat para concatenar string de javascript se puede concatenar mas
de una cadena.

var cadena1 = "uno ";

var cadena2 = "dos";
var resultado = cadena1.concat(cadena2, " tres", "cuatro");

D. Example

Convert different objects to strings:

var x1 = Boolean(0);
var x2 = Boolean(1);
var x3 = new Date();
var x4 = "12345";
var x5 = 12345;

var res =
String(x1) + "<br>" +
String(x2) + "<br>" +
String(x3) + "<br>" +
String(x4) + "<br>" +
String(x5);

E. ResumenSección
El método indexOf()devuelve el índice, dentro del objeto String que realiza la llamada, de
la primera ocurrencia del valor especificado, comenzando la búsqueda desde indiceDesde;
o -1 si no se encuentra dicho valor.
SintaxisSección

cadena.indexOf(valorBusqueda[, indiceDesde])

ParámetrosSección
valorBusqueda
Una cadena que representa el valor de búsqueda.

indiceDesde
La localización dentro de la cadena llamada desde la que empezará la búsqueda.
Puede ser un entero entre 0 y la longitud de la cadena. El valor predeterminado es
0.

DescripciónSección
Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer
carácter es 0, y el índice del último carácter de una cadena
llamada nombreCadena es nombreCadena.length - 1.

"Blue Whale".indexOf("Blue") // returns 0

"Blue Whale".indexOf("Blute") // returns -1
"Blue Whale".indexOf("Whale",0) // returns 5
"Blue Whale".indexOf("Whale",5) // returns 5
"Blue Whale".indexOf("",9) // returns 9
"Blue Whale".indexOf("",10) // returns 10
"Blue Whale".indexOf("",11) // returns 10

El método indexOf es sensible a mayúsculas. Por ejemplo, la siguiente expresión devuelve -

1:

"Ballena Azul".indexOf("azul")

EjemplosSección
Ejemplo: Usando indexOf y lastIndexOfSección
El siguiente ejemplo utiliza indexOf y lastIndexOf para localizar valores dentro de la cadena
"Brave new world".

var cualquierCadena="Brave new world"

document.write("<P>The index of the first w from the beginning is " +

cualquierCadena.indexOf("w")) // Muestra 8

document.write("<P>The index of the first w from the end is " +

cualquierCadena.lastIndexOf("w")) // Muestra 10

document.write("<P>The index of 'new' from the beginning is " +

cualquierCadena.indexOf("new")) // Muestra 6

document.write("<P>The index of 'new' from the end is " +

cualquierCadena.lastIndexOf("new")) // Muestra 6

Ejemplo: indexOf y sensibilidad a mayúsculasSección

El siguiente ejemplo define dos variables de tipo cadena. Las variables contienen la misma
cadena excepto que la segunda cadena contienen letras en mayúscula. El primer
método writeln muestra 19. Pero a que el método indexOf es sensible a mayúsculas, no se
encuentra la cadena "cheddar" en miCadenaMayusculas, así que el segundo
método writeln muestra -1.

miCadena="brie, pepper jack, cheddar"

miCadenaMayusculas="Brie, Pepper Jack, Cheddar"
document.writeln('miCadena.indexOf("cheddar") is ' +
miCadena.indexOf("cheddar"))
document.writeln('<P>miCadenaMayusculas.indexOf("cheddar") is ' +
 miCadenaMayusculas.indexOf("cheddar"))

Ejemplo: Usando indexOf para contar ocurrencias de una letra en una cadenaSección
El siguiente ejemplo establece cuenta como el número de ocurrencias de la letra x dentro
de la cadena miCadena:

cuenta = 0;
posicion = miCadena.indexOf("x");
while ( posicion != -1 ) {
cuenta++;
posicion = miCadena.indexOf("x",posicion+1);
}

f. Puedes utilizar indexOf que te retornara -1 si no encuentra la cadena.

var cadena = "hola mundo";

console.log(
cadena.indexOf("mundo") > -1
);

console.log(
cadena.indexOf("no esta") > -1
);

G. ResumenSección
El método replace() halla un emparejamiento entre una expresión regular y una cadena, y
reemplaza la subcadena emparejada con una nueva subcadena.
SintaxisSección

cadena.replace(regexp|substr, newSubStr|function[, flags]);

ParámetrosSección
expresionregular
Un objeto RegExp. El emparejamiento es reemplazado por el valor de devuelto por
el segundo parámetro.
subcadena
Un objeto String que será reemplazado por nuevaSubcadena.
nuevaSubcadena
 El objeto String que reemplaza la subcadena que recibida desde el primer parámetro.
funcion
Una función que será invocada para crear la nueva subcadena (para ponerla en lugar
de la subcadena recibida por el primer parámetro).

flags
Un objeto String que contiene cualquier combinación de flags de la clase RegExp: g -
emparejamiento global, i - ignorar mayúsculas, m - emparejar multiples líneas. Este
parámetro se usa sólo si el primer parámetro es una cadena.
DescripciónSección
Este método no cambia el objeto String sobre el que se realiza la llamada. Simplemente
devuelve una nueva cadena.
Para realizar una búsqueda global y reemplazarla, o se incluye el flag g en la expresión
regular o si el primer parámetro es una cadena, se incluye g en el parámetro flags.

Especificando una cadena como un parámetro

La cadena de reemplazo puede incluir los siguientes patrones de reemplazo especiales:

Patrón Inserta

$$ Inserta una "$".

$& Inserta la subcadena emparejada.

$` Inserta la sección de cadena que precede a la subcadena emparejada.

$' Inserta la porción de subcadena que sigue a la subcadena emparejada.

$n o $nn Donde n o nn son dígitos decimales positivos menores a 100, inserta la

subcadena emparejada de orden n del paréntesis, proporcionado por el primer
argumento del objeto RegExp.

Especificando una función con un parámetroSección

Cuando se especifica una función en el segundo parámetro, la función es invocada después
de que el emparejamiento se haya realizado. (El uso de una función de este modo se llama
expresión lambda.)
En la función, puedes generar dinámicamente la cadena que reemplaza la subcadena
emparejada. El resultado de la llamada de la función se usa como valor de reemplazo.

The nested function can use the matched substrings to determine the new string
(newSubStr) that replaces the found substring. You get the matched substrings through the
parameters of your function. The first parameter of your function holds the complete
matched substring. If the first argument was a RegExp object, then the
followingn parameters can be used for parenthetical matches, remembered submatch
strings, wheren is the number of submatch strings in the regular expression. Finally, the last
two parameters are the offset within the string where the match occurred and the string
itself. For example, the following replacemethod returns XXzzzz - XX , zzzz.

function replacer(str, p1, p2, offset, s)

{
return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer);
console.log(newString); // XXzzzz - XX , zzzz

EjemplosSección
Ejemplo: Usando global e ignore con replaceSección
En el siguiente ejemplo, la expresión regular incluye las banderas "global" e "ignore case",
las cuales permiten al método replace reemplazar cada aparición de la cadena 'apples' por
la cadena 'oranges'.

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
print(newstr);

In this version, a string is used as the first parameter and the global and ignore case flags are
specified in the flags parameter.

var str = "Apples are round, and apples are juicy.";

var newstr = str.replace("apples", "oranges", "gi");
print(newstr);

Both of these examples print "oranges are round, and oranges are juicy."

Ejemplo: Definiendo la expresión regular en replaceSección

En el siguiente ejemplo, se define la expresión regular en replace e incluye el flag de ignorar
mayúsculas.

var cadena = "Twas the night before Xmas...";

var nuevaCadena = cadena.replace(/xmas/i, "Christmas");
print(nuevaCadena);

Esto muestra "Twas the night before Christmas..."

Ejemplo: Conectando palabras en una cadenaSección

El siguiente código conecta las palabras dentro de la cadena. Para reemplazar el texto, el
código usa $1 y $2 como patrones de reemplazo.

var expresion = /(\w+)\s(\w+)/;

var cadena = "John Smith";
var nuevaCadena = cadena.replace(expresion, "$2, $1");
print(nuevaCadena);

Esto muestra "Smith, John".

Ejemplo: Using an inline function that modifies the matched charactersSección

In this example, all occurrences of capital letters in the string are converted to lower case,
and a hyphen is inserted just before the match location. The important thing here is that
additional operations are needed on the matched item before it is given back as a
replacement.

The replacement function accepts the matched snippet as its parameter, and uses it to
transform the case and concatenate the hyphen before returning.

function styleHyphenFormat(propertyName)
{
function upperToHyphenLower(match)
{
return '-' + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/, upperToHyphenLower);
}

Given styleHyphenFormat('borderTop'), this returns 'border-top'.

Because we want to further transform theresult of the match before the final substitution is
made, we must use a function. This forces the evaluation of the match prior to
the toLowerCase() method. If we had tried to do this using the match without a function, the
toLowerCase() would have no effect.

var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase()); // won't work

This is because '$&'.toLowerCase() would be evaluated first as a string literal (resulting in the
same '$&') before using the characters as a pattern.
Ejemplo: Reemplazando grados Fahrenheit con su equivalente CelsiusSección
El siguiente ejemplo reemplaza los grados Fahrenheit con su enquivalente en grados Celsius.
Los grados Fahrenheit deberían ser un número acabado en F. La función devuelve el número
Celsius acabado en C. Por ejemplo, si el número de entrada es 212F, la función devuelve
100C. Si el número es 0F, la función devuelve -17.77777777777778C.

La expresión regular test revisa si para un número termina en F. El número de grados

Fahrenheit es accesible a la función a través de su segundo parámetro, p1. La función
establece el número Celsius basado en los grados Fahrenheit pasados en una cadena a la
función f2c. Entonces f2c devuelve el número Celsius. Esta función aproxima al flag de Perl
s///e.

function f2c(x)
{
function convert(str, p1, offset, s)
{
return ((p1-32) * 5/9) + "C";
}
var s = String(x);
var test = /(\d+(?:\.\d*)?)F\b/g;
return s.replace(test, convert);
}

H. ResumenSección
El método substr() devuelve los caracteres de una cadena que comienzan en
una localización especificada y de acuerdo al número de caracteres que se especifiquen.
SintaxisSección

cadena.substr(inicio[, longitud])

ParámetrosSección
inicio
Localización en la cual se empiezan a extraer caracteres. Si se da un número
negativo, se trata como longCad + inicio donde longCad es la longitud de la
cadena (por ejemplo, si inicio es -3 se trata como longCad - 3).
longitud
Opcional. El número de caracteres a extraer. Si este argumento es undefined, todos
los caracteres desde inicio hasta el final de la cadena serán extraidos.
Valor retornadoSección
Una nueva cadena que contiende la sección extraída de la cadena dada. Sí la longitud es 0
o un número negativo, retorna la cadena vacía.

DescripciónSección
inicio es el índice de un carácter. El índice del primer carácter es 0, y el índice del último
carácter es la longitud de la cadena menos 1. substr comienza extrayendo caracteres a
partir de inicio y recolecta longitud caracteres (a menos que se alcance primero el final de
la cadena, en cuyo caso devuelve menos).
Si inicio es positivo y es mayor o igual que la longitud de la cadena, substr() devuelve una
cadena vacía.
Si inicio es negativo, substr() lo usa como un índice de carácter desde el final de la cadena.
Si inicio es negativo y abs(inicio) es mayor que la longitud de la cadena, substr usa 0 como
índice inical. Nota: el uso descrito de valores negativos del argumento inicio no es
soportado por Microsoft JScript .
Si longitud es 0 o negativa, substr devuelve una cadena vacía. Si se
omite longitud, inicio extrae caracteres hasta el final de la cadena.
EjemplosSección
Ejemplo: Uso de substr()Sección

var cadena = "abcdefghij";

console.log("(1,2): " + cadena.substr(1,2)); // '(1, 2): bc'

console.log("(-3,2): " + cadena.substr(-3,2)); // '(-3, 2): hi'
console.log("(-3): " + cadena.substr(-3)); // '(-3): hij'
console.log("(1): " + cadena.substr(1)); // '(1): bcdefghij'
console.log("(-20, 2): " + cadena.substr(-20,2)); // '(-20, 2): ab'
console.log("(20, 2): " + cadena.substr(20,2)); // '(20, 2): '

Este script muestra:

(1,2): bc
(-3,2): hi
(-3): hij
(1): bcdefghij
(-20, 2): ab
(20, 2):

Vea También

7. Query es uno de los complementos más esenciales para el desarrollo web, usado en
millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones
enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.
 Para los que se inician, conviene aclarar que jQuery no es un lenguaje, sino una serie de
funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una
librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando
programamos en Javascript. A veces nos podemos referir a jQuery como framework o
incluso como un API de funciones, útiles en la mayoría de proyectos web.

Antes de llegar jQuery los desarrolladores estábamos obligados a discriminar entre los
diversos navegadores, para ejecutar aquel código Javascript que funcionaba en cada
browser. Con la llegada de jQuery la principal ventaja es que ya no necesitamos
preocuparnos sobre si el navegador del usuario es Explorer, Chrome, Firefox, etc. sino que
la propia librería hará el trabajo "sucio" por nosotros y ejecutará el código que sea
compatible con el software del cliente que está accediendo a nuestra web. Para ello
usaremos las funciones que jQuery nos proporciona, dentro de un grandísimo abanico de
funcionalidades que además se extiende por medio de miles de plugins que ofrece la
comunidad para implementar cualquier tipo de comportamiento.

8. AJAX (Asynchronous Javascript and XML) es una técnica de desarrollo web que, al
combinar una serie de tecnologías independientes, nos permite intercambiar información
entre el servidor y el cliente (un navegador web) de forma asíncrona. Como resultado,
obtenemos una navegación ágil, rápida y dinámica; y también la posibilidad de realizar
cambios sobre una web sin necesidad de actualizarla. Las tecnologías independientes que
lo hacen posible son:

 JAVASCRIPT: Es la base fundamental que une estas tecnologías

 XMLHttpRequest: Intercambio asíncrono
 XML: Manipulación e intercambio de información
 JSON: Alternativa de XML (Actualmente más usado que XML)
 DOM: Document Object Model
 XHTML y CSS: Estilos - Creación de una presentación de objetos
Sus ventajas son:
 Mejora la experiencia del usuario
 Puede ser utilizada en cualquier plataforma y navegador
 Menor transferencia de datos cliente/servidor
 Optimización de recursos (tiempo de operaciones)
 Portabilidad y usabilidad (permite realizar una petición de datos al servidor y recibirla sin
necesidad de cargar la página entera)
Sus desventajas son:
 JavaScript debe estar activado en el navegador web para funcionar
 Utilizar AJAX preferentemente en formularios de contacto, validación de correo
electrónico y contraseñas para no afectar el posicionamiento web (SEO)
 Tiempos de respuesta del servidor en momentos determinados
 Tiempo de desarrollo (es necesario tener conocimiento medio/alto de las tecnologías que
hacen parte de AJAX)
 Algunas funciones a las que estamos acostumbrados en la navegación web pueden no
funcionar como esperamos. Por ejemplo, el botón de atrás, guardar marcador o
actualizar la página web en cualquier momento.
El punto débil de AJAX es que es necesario escribir código para cada uno de los navegadores
que utilizaremos, y esto requiere de mucho tiempo. Sin embargo, jQuery llega al rescate al
permitirnos utilizar AJAX y todo su potencial con una sola línea de
código: $.ajax({name:value, name:value, ... }) Para comprender el uso de jQuery AJAX
vamos a realizar un ejemplo donde podemos visualizar los métodos que se utilizan: [html]
<!DOCTYPE html> <html> <head> <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <script>
$(document).ready(function(){ $("button").click(function(){
$("div").load("Metodos.xml",function(response, status){ if (status == "success"){
$("div").html("<ol></ol>"); $(response).find("metodo").each(function(){ var item_text =
$(this).text(); $('<li></li>').html(item_text).appendTo('ol'); }); alert("Estos son los metodos
que utiliza jQuery AJAX") } }); }); }); </script> <style> div { font-size: x-large; padding: 5px;
background-color: #dddddd; border-radius: 24px 24px 24px 24px; -moz-border-radius:
24px 24px 24px 24px; -webkit-border-radius: 24px 24px 24px 24px; border: 2px solid
#bfc0be; } </style> </head> <body> <center><h1><p>Metodos jQuery
AJAX</p></h1></center> <div><br></div> <center><button>Ver Metodos jQuery
AJAX</button></center> </body> </html> [/html]DEMO En este ejemplo utilizamos el
método load() para cargar nuestro archivo .xml y de esta forma, visualizarlo en pantalla.
Otro ejemplo de cómo implementar un método sería: [html] <!DOCTYPE html> <html>
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script><script> $(document).ready(function(){ $("button").click(function(){
$.ajaxSetup({url: "Metodo.txt", success: function(result){ $("div").html(result);}}); $.ajax();
}); }); </script> </head> <body> </body> </html> [/html] Utilizando los métodos de jQuery
AJAX podemos implementar elementos y funciones en nuestras páginas web logrando
resultados sorprendentes. Si quieres saber cómo utilizar esta técnica más a fondo, no te
pierdas el Curso Profesional de Front-endde Platzi.