JavaScript

Multiplicación de Matrices MATRIZ A:
Número de filas:

Número de columnas:
Generar
Elementos de la matriz:

MATRIZ B:
Número de filas:

Número de columnas:
Generar
Elementos de la matriz:

Multiplicar
MATRIZ RESULTANTE C:



MATRICES

- 83 -

Abriendo la página en un navegador se obtiene algo parecido a lo siguiente:

Como se puede ver en este ejemplo, los dos primeros “textarea” respo nden a dos eventos, el evento “onkeydown”, para permitir escribir sólo los caracteres válidos y el evento “onblur” para actualizar los números de fila y columna cuando las matrices se escriben (como ocurre en el ejemplo) en lugar de generarlas.

3. Elabore una página HTML que dada una matriz, permita intercambiar los elementos de dos columnas. La aplicación debe dar la opción de escri bir la matriz manualmente o generarla con números reales comprendidos entre -10 y 10 y redondeados al primer dígito.

- 84 -

Hernan Peñaranda V.

Para intercambiar los elementos de dos columnas simplemente se recorre la matriz fila por fila (con un ciclo “for”) y en cada repetición del c iclo se intercambian los elementos de ambas columnas. En cuanto a la interfaz de usuario, se emplear án dos “input text” (con la validación respectiva) para introducir el número de filas y columnas, un “textarea” (con la validación respectiva) para mostrar o introducir los elementos de la matriz, un botón para generar la matriz, otro para intercambiar las colum nas y dos “select”  (inicialmente en vacíos) para seleccionar las columnas a intercambiar. El código de la página HTML que resuelve el problema es: <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="sis101.js"> <script> //Intercambia las columas c1 y c2 de la matriz a function  intCol(a,c1,c2){ //Si la matriz no es regular se genera un error if (!isMatrixr(a)) throw new Error("intCol: No es una matriz regular." ); //Si los números de columna no son enterpos positivos se //genera un error if (!isNatural(c1) || !isNatural(c2)) throw new Error( "intCol: Los números de columna deben ser enteros." ); //Si las columnas a intercambiar son las mismas, no se hace nada if (c1==c2) return; var aux; for (var i=0;i
MATRICES

- 85 -

return isRealKey(key); } //Genera la matriz con el número de filas y columnas introducido function  generarMatriz(){ try { var  nf=parseInt(document.getElementById( "nf").value); var  nc=parseInt(document.getElementById( "nc").value); document.getElementById( "matriz").value= mshow(round(rand(nf,nc, -10,10),1)); document.getElementById( "matriz").focus(); } catch(e) { alert(e.message); document.getElementById( "nf").focus(); } } //Llena los select c1 y c2 con las columnas disponibles function  llenarSelects(){ var  n=parseInt(document.getElementById( "nc").value); var t=""; for (var i=0;i" document.getElementById( "c1").innerHTML=t; document.getElementById( "c2").innerHTML=t; } //Actualiza el número de filas y columnas en función a la matriz //introducida function  actualizarfc(){ var a=eval(document.getElementById( "matriz").value); if (!isMatrixr(a)){ alert("actualizarfc: No es una matriz regular." ); document.getElementById( "matriz").focus(); } //Si es una matriz regular se actualiza el número de filas y //columnas y las opciones de los selects document.getElementById( "nf").value=a.length; document.getElementById( "nc").value=a[0].length; llenarSelects(); } //Cuando la página carga, selecciona el input "nf" function  iniciar(){ document.getElementById( "nf").focus(); document.getElementById( "nf").select(); }

Intercambio de Columnas

Número de filas:



- 86 -

Hernan Peñaranda V.

Número de columnas:
Generar
Elementos de la matriz:

Columnas a intercambiar:
Intercambiar

Abriendo la página en un navegador se obtiene algo parecido a:

Como se puede ver, para mostrar las filas de la matriz en líneas separadas se ha empleado la función “mshow”. Los elementos “select” (para elegir los números de columnas a interca mbiar) están inicialmente vacíos (no tiene opciones: ). Dichas opciones son añadidas en tiempo de ejecución mediante la función “llenarSelects”. En esta función se lee el número de columnas de la matriz y mediante un ciclo “for” que va desde 0 hasta el número de columnas menos uno, se añade al texto “t”, en cada repetición del ciclo, una opción, con el número de columna respectivo. Luego este texto (con las opciones añadidas ) se asigna a la propiedad “innerHTML” del “textarea”. La

MATRICES

- 87 -

propiedad “innerHTML” es el código HTML que normalmente se escribe cuando se crea el elemento directamente en la página, con la ventaja de que al ser creada desde Javascript, se pueden automatizar algunos procesos (como ocurre en este ejemplo).

Tome en cuenta que en este caso no es posible crear los “select” con el número de opciones correctas pues el número de columnas cambia cada vez que se cambia el número de columnas de la matriz.

4.9.

EJERCICIOS

Para presentar los ejemplos y ejercicios del tema, debe crear una carpeta con el n ombre “tema4” y guardar en la misma todos los archivos HTML creados (ejemplos y ejercicios). 1.

Cree una página HTML que dado un vector de números reales o enteros, calcule la desviación estándar de los mismos, empleando la ecuación que se muestra al pie de la pregunta. La aplicación debe dar la opción de introducir el vector manualmente o de generarlo automáticamente y de ser así generar números enteros comprendidos entre -25 y 25.

= ∑   √  = (̅− )2 =   ∑ ̅  = 

2.

Elabore una página HTML que dada una matriz de números reales o enteros, calcule la transpuesta de la misma. La aplicación debe dar la opción de escribir la matriz manualmente o de generarlas con números enteros comprendidos entre 10 y 50.

3.

Elabore una página HTML que dada una matriz de números reales o enteros, permita intercambiar los elementos de dos filas. La aplicación debe dar la opción de escribir la matriz manualmente o generarla con números reales comprendidos entre 1 y 9 y redondeados al segundo dígito.

CADENAS (STRINGS)

- 89 -

5. CADENAS (STRINGS) Las cadenas de caracteres o simplemente “cadenas” o “strings” (por su denominación en inglés), básicamente son vectores especializados en el manejo de caracteres, es decir en el manejo de texto, razón por la cual también se las conoce como datos de tipo texto !ste tipo de dato está presente en todos los lenguajes de programación por"ue el manejo de texto es crucial en toda aplicación práctica La ma#or parte de la in$ormación "ue una aplicación presenta a o recibe del usuario está en $orma de texto (inclusive los n%meros) &a en temas anteriores se 'a empleado cadenas (texto) # como se 'a visto, para crear una variable de tipo cadena sólo se debe encerrar la in$ormación entre comillas o entre apóstro$os, por ejemplo las siguientes instrucciones crean dos variables de tipo cadena

!n avascript las cadenas, al igual "ue los vectores, son objetos, por lo "ue $ormalmente, una variable de tipo cadena (de tipo texto) se crea de con la instrucción “ne*”

+or supuesto es más sencillo crearla directamente escribiendo el texto entre comillas o apóstro$os, por lo "ue esa es la $orma más empleada (# con muc'o) en la práctica

5.1.

PROPIEDADES, MÉTODOS Y OPERACIONES CON CADENAS

l ser las cadenas un tipo de dato especializado en el manejo ces, tiene propiedades # métodos espec$icos para el manejo de además, responde al operador de suma “.”, concatenando (uniendo) nas, por ejemplo, si se suman las variables “a” # “b” (creadas en te anterior) se obtiene

de matrimatrices, las cadeel acápi -

!sta caracterstica 'a sido empleada #a en temas anteriores cuando se 'a concatenado (sumado) texto para mostrar resultados #/o crear instrucciones 012L 3omo #a se 'a visto, cuando en avascript se suma una cadena a un valor numérico (o de otro tipo), dic'o valore es convertido previamente en una cadena # el resultado sumado a la otra cadena para $ormar la cadena resultante, por ejemplo si se tiene la siguiente variable

4e puede crear un mensaje de texto mostrando la raz cuadrada de ese n%mero

- 90 -

Hernán Peñaranda V.

3omo se puede ver, las conversiones necesarias son 'ec'as automáticamente por avascript para dar un resultado de tipo texto 4e puede averiguar el tipo de dato de un valor dado con la $unción “ t#peo$”, as aplicando esta $unción al anterior resultado se obtiene

3orroborándose as "ue el resultado es de tipo “string” (cadena) parte del operador de suma, "ue es de muc'a utilidad práctica, el objeto “string” cuenta con varios métodos # algunas propiedades, siendo la propiedad más utilizada “lengt'” "ue, como en un vector, devuelve el n%mero de caracteres "ue tiene la cadena, as, si la cadena es

La propiedad “lengt'” devuelve 55

!l método “concat(cadena 5, cadena 6, 7) ” une la cadena de caracteres desde la cual se llama al método, a otras cadenas, de $orma similar al ope rador “.” s si se tienen las siguientes variables

4e pueden concatenar las mismas # una cadena adicional, con la siguiente instrucción

!ste método crea una nueva cadena con el resultado, pero no modi$ica la cadena original, por lo "ue el valor de “s5” sigue siendo

!l método “index8$(cadena, ndice9inicial)” devuelve la posición (el ndice) del primer carácter "ue coincide con la “cadena”, as, si la variable es

La siguiente instrucción devuelve 5:

+or"ue 5: es el ndice (posición 5;) del primer carácter de la palabra “vectores” dentro la cadena, mientras "ue la siguiente instrucción devuelve <

CADENAS (STRINGS)

- 91 -

+or"ue < es el ndice de la primera aparición de “ca” dentro de la cadena +ara encontrar el ndice de la segunda aparición de “ca” en la cadena, se debe comenzar a buscar después del ndice <, es decir desde el ndice =

+ara encontrar el ndice comenzando a buscar desde el %ltimo carácter (en lugar del primero) se emplea el método “ last>ndex8$(cadena,ndice9inicial)”, as para encontrar la %ltima aparición de “ca” en la variable “s” se escribe

& para encontrar la aparición anterior de “ca”, se inicia la b%s"ueda en el ndice anterior al encontrado, es decir

+ara obtener el carácter "ue se encuentra en un determinado ndice se emplea la $unción “ c'art(ndice)”, por ejemplo, la siguiente instrucción devuelve el carácter "ue se encuentra en el ndice 56 (posición 5?) de la va riable “s”

4i lo "ue se "uiere es el código 43>> del carácter "ue se encuentra en un determinado ndice (en lugar del carácter en s) se emplea el método “c'ar3odet(ndice) ”, as el código del carácter en el ndice 56 (el código de la letra “s”) es

4i se "uiere obtener el carácter correspondiente a un código 43>> dado se puede emplear el método “ 4tring$rom3'ar3ode(código) ”, as por ejemplo para obtener el carácter correspondiente al código 43>> := (la letra “”) se escribe

!ste método puede devolver una cadena con$ormada con los caracteres e"uivalentes a la lista de códigos "ue se le manda, por ejemplo, la siguiente instrucción devuelve “08L”

+ara copiar una parte de una cadena (una subcadena) se puede emplear el método “substr(inicio,longitud) ”, "ue copia “longitud” caracteres de la cadena, comenzando en el ndice “inicio”, por ejemplo, si la cadena es

+ara copiar la palabra $unciones se escribe

+or supuesto se puede emplear el método “index8$” para obtener el ndice de la palabra a extraer # la propiedad “lengt'” para su longitud

- 92 -

Hernán Peñaranda V.

!ste método no modi$ica la cadena original, por lo "ue el valor de “b” sigue siendo

lternativamente, para copiar una subcadena se puede emplear el método “substring(inicio,$in) ”, "ue copia la cadena de caracteres comprendida entre el ndice “inicio” # el ndice “$in-5”, por ejemplo para copiar la palabra “$unciones” con este método, se escribe

4i no se especi$ica el ndice “$in”, se copian todos los caracteres "ue existen desde el ndice “inicio” 'asta el $inal del texto (lo mismo ocurre con “substr” si no se especi$ica la longitud) +or ejemplo las siguientes instrucciones copian todos los caracteres "ue existen desde el ndice 6@ (la letra “$”) 'asta el $inal

l igual "ue “substr”, este método no modi$ica la cadena original An método similar a “substring” es “ slice(inicio,$in) ” "ue igualmente extrae la cadena de caracteres comprendidas entre el ndice “inicio” # el ndice “$in-5”, básicamente la %nica di$erencia con relación a “substring” es "ue si a “slice” se le pasa un n%mero negativo, copia ese n%mero de elementos comenzando desde el %ltimo carácter de la cadena, as para copiar la palabra “objeto” se escribe

+ara dividir una cadena en un vector de subcadenas, se emplea el método “split(separador,lmite) ” ("ue viene a ser el complemento del método “join” de vectores) !ste método divide la cadena en todos los lugares donde encuentra la cadena “separador”, devolviendo un vector con estas subcadenas 4i se especi$ica el “lmite” el método sólo devuelve ese n%mero de elementos +or ejemplo para obtener un vector con$ormado por todas las palabras de la cadena “b”, se escribe

+or supuesto, se puede emplear el método “join” para volver a construir la cadena

+ara obtener un vector con$ormado solo por las tres primeras palabras, se escribe

CADENAS (STRINGS)

- 93 -

+ara convertir los caracteres al$abéticos de una cadena a ma#%sculas se puede emplear el método “ toApper3ase()” # para la operación inversa, es decir convertir los caracteres al$abéticos a min%sculas se emplea el método “toLo*er3ase()” s para convertir la cadena “b” a ma#%sculas se escribe

& para convertir este resultado a min%sculas se escribe

+ara reemplazar un subcadena por otra, se emplea el método “ replace(subcadena, nueva9cadena)”, por ejemplo, si el texto es

4e puede reemplazar la palabra “interpretado” por “compilado” con la siguiente instrucción

l igual "ue los otros métodos, “replace” no modi$ica la cadena original, por lo "ue el valor de “s” sigue siendo

4in embargo, la verdadera potencia de este método # de los métodos “matc'” # “searc'” se logra cuando se emplea con expresiones regulares (en lugar de cadenas simples) tal como se ve a continuación

5.2.

EXPRESIONES REGULARES

Las expresiones regulares son secuencias de caracteres "ue pueden ser em pleadas para encontrar patrones en una cadena !n avascript las expresiones regulares son objetos # como tales se crean $ormalmente con “ne* Beg!xp(patrón,modi$icadores) ” +or ejemplo la siguiente instrucción crea una expresión regular "ue ubica cual"uier letra min%scula (no acentuada) en una cadena rCne* Beg!xp(DEa-zFD,DgD) >>  /Ea-zF/g

1al como ocurre con los vectores # las cadenas, las expresiones regulares tienen una $orma más sencilla de ser creadas # es la $orma "ue se ve en el resultado de la instrucción, es decir "ue una expresión regular puede ser creada escribiendo el patrón entre "uebrados (“/”) # los modi$icadores después del %ltimo "uebrado +or lo tanto, la anterior expresión regular puede ser creada también con rC/Ea-zF/g >>  /Ea-zF/g mbas $ormas son e"uivalentes, pero por su sencillez casi siempre se emplea la segunda 4i se tiene la siguiente cadena sCDprogramación en G43B>+1D >>  programación en G43B>+1

- 9 -

Hernán Peñaranda V.

l aplicar a esta cadena la expresión regular creada, con el método “matc'(expresión regular)”, se obtiene un vector con todas las letras min%sculas (no acentuadas) existentes en la cadena

>>  smatc'(r) Ep, r, o, g, r, a, m, a, c, i, n, e, nF

Los modi$icadores, en las expresiones regulares, permiten determinar el alcance de la b%s"ueda # son los siguientes

 Modifi!do"

D#$"i%i&'

i

4i se emplea este modi$icador, la b%s"ueda no distingue entre ma#%sculas # min%sculas



4i se emplea este modi$icador, la b%s"ueda es global, es decir "ue encuentra todas las coincidencias # no sólo la primera

  

4i se emplea este modi$icador la b%s"ueda se realiza en todas las lneas # no sólo la primera

+or otra parte, el patrón de una expresión regular, puede estar con$ormado por texto simple, en cu#o caso encuentra el texto especi$icado +or ejemplo con la siguiente instrucción se encuentran todas las letras “a” en la cadena “s” (sin importar "ue estén escritas en ma#%sculas o min%sculas) smatc'(/a/gi) >>  Ea, a, , F !l patrón puede estar encerrado también entre corc'etes, en cu#o caso encuentra el rango de caracteres especi$icado o el conjunto de caracteres dado

*o"!

D#$"i%i&'

+!"!#"#$-

!ncuentra cual"uiera de los caracteres escritos entre los corc'etes +or ejemplo /Eae$gF/ encuentra los caracteres “a”, “e”, “$” o “g”

+!"!#"#$-

!ncuentra cual"uier carácter, excepto los escritos a continuación del circun$lejo (“H”) +or ejemplo /EHbegxzF/ encuentra todos los caracteres "ue no sean “b”, “e”, “g”, “x” o “z”

+i'ii!/0fi'!/-

!ncuentra todos los caracteres comprendidos entre el carácter “inicial” # el carácter “$inal” +or ejemplo /EIF/ encuentra todas las letras ma#%sculas

+o%1o%2o%- !ncuentra los caracteres especi$icados en “opc5” o en “opc6” o en “opc?” +or ejemplo /EcódigoJjavascriptJlenguajeF/ encuentra “código” o “javascript” o “lenguaje” !n el patrón se pueden emplear también los siguientes metacaracteres

 M#!!"3#"

D#$"i%i&'

.

!ncuentra un carácter (cual"uier carácter, excepto saltos de lnea Kn)

4

!ncuentra cual"uier carácter al$anumérico, incluido el carácter de subra#ado “9”

46 

3omplemento de “K*” !ncuentra cual"uier carácter "ue no sea al$anumérico o “9”

4d 

!ncuentra un dgito

CADENAS (STRINGS)

- 9! -

4D

3omplemento de “Kd” !ncuentra cual"uier carácter "ue no sea un dgito

4$

!ncuentra un espacio

4S

3omplemento de “Ks” !ncuentra cual"uier carácter "ue no sea un espacio

47

!ncuentra los caracteres "ue se encuentran al principio o al $inal de una palabra +or ejemplo /Kbt/ encuentra los caracteres “t” "ue se encuentran al principio de una palabra, mientras "ue /tKb/ encuentra los caracteres “t” "ue se encuentran al $inal de una palabra

48

3omplemento de “Kb” !ncuentra coincidencias "ue no estén al principio o al $inal de una palabra

49

!ncuentra un carácter nulo

4'

!ncuentra un carácter de salto de lnea

4

!ncuentra un carácter de tabulación

4"

!ncuentra un carácter de retorno de carro

4:::

!ncuentra el carácter "ue tiene el código octal xxx

4:dd 

!ncuentra el carácter "ue tiene el código decimal dd

4;::::

!ncuentra el carácter "ue tiene el código 'exadecimal xxxx

!s posible emplear también los siguientes metacaracteres cuanti$icadores

 M#!!"3#"

D#$"i%i&'

'<

!ncuentra cual"uier cadena "ue contenga uno o más caracteres o patrones “n” +or ejemplo /a.vascript/ encuentra palabras como “avascript”, “aaava4cript”, pero no “vascript”

'=

!ncuentra cual"uier cadena "ue contenga @ o más caracteres o patrones “n” +or ejemplo /codi$icar/ encuentra palabras como “cooodi$icar”, “cdi$icar”, “coodi$icar”, pero no “oodi$icar”

'

!ncuentra cual"uier cadena "ue contenga @ o 5 caracteres o patrones “n” +or ejemplo /programa/ encuentra palabras como “prgrama” # “programa”, pero no “proograma”

'?:@

!ncuentra cual"uier cadena "ue contenga una secuencia de “x” caracteres o patrones “n” +or ejemplo /KdM
'?:,@

!ncuentra cual"uier cadena "ue contenga una secuencia de entre “x” # “#” caracteres o patrones “n” +or ejemplo /aM6,
'?:,@

!ncuentra cual"uier cadena "ue contenga una secuencia de “x” o más caracteres o patrones “n” +or ejemplo /ca(de)M6,Nna/ encuentra cadenas como “cadedena”, “cadedededena” pero no “cadena” o “cana”

demás una expresión regular puede incluir metacaracteres de posición

 M#!!"3#" '

D#$"i%i&' !ncuentra una cadena "ue comience con el carácter o patrón

- 9" -

Hernán Peñaranda V.

“n” 4i se especi$ica el modi$icador “m” encuentra todas las lneas "ue comiencen con el carácter o patrón “n”

'B

!s el complemento de “Hn” !ncuentra una cadena "ue termine con el carácter o patrón “n”

(')

!ncuentra cual"uier cadena "ue esté seguida por el carácter o patrón “n”

(')

!s el complemento de “OCn” !ncuentra cual"uier cadena "ue no esté seguida por el carácter o patrón “n”

Pinalmente, dado "ue las expresiones regulares son objetos, tienen propiedades # métodos propios Las propiedades de una expresión regular in$orman sobre su contenido, as “global”, “ignore3ase”, “multiline” devuelven verdadero si se 'an establecido los modi$icadores “g”, “i” o “m” # $also en caso contrario La propiedad “source” devuelve el patrón de la expresión regular Qos de los métodos más empleados en una expresión regular son “ exec(cadena)” # “test(cadena)” !l primero “exec” devuelve la primera coincidencia del patrón en la cadena o nulo (null) si no 'a# coincidencias !l segundo devuelve verdadero (true) si 'a# por lo menos una coincidencia # $also ($alse) en caso contrario 4i la expresión regular tiene el modi$icador “g” se puede emplear la propiedad “ last>ndex” "ue devuelve el ndice posterior a la %ltima coincidencia encontrada 3omo se dijo la verdadera potencia de métodos como “replace”, “matc'” # “searc'” (e inclusive “splite”) se consigue cuando se emplea en conjunción con expresiones regulares +or ejemplo si se tiene la siguiente cadena sCD!l correo electrónico del usuario 5 es usuario95Rgmailcom, del >>  usuario 6 es usuario96Rgmailcom, del usuario ? usuario9?RgmailcomD !l correo electrónico del usuario 5 es usuario95Rgmailcom, del usuario 6 es usuario96Rgmailcom, del usuario ? usuario9?Rgmailcom & se "uiere extraer (en un vector) los correos electrónicos "ue se encuentran en el texto, se puede emplear el método “ matc'(expresión regular) ” con la siguiente expresión smatc'(/K*.RK*.KK*M?N/g) >>  Eusuario95Rgmailcom, usuario96Rgmailcom, usuario9?RgmailcomF !s importante notar "ue para ubicar las cadenas "ue tienen un punto seguido de tres caracteres (como “com”, “net”, “org”, etc), no se 'a escrito directamente el punto, sino "ue se 'a precedido el mismo con el "uebrado invertido “K”, esto por"ue el punto en una expresión regular (como #a se 'a visto) es un metacarácter "ue representa a cual"uier carácter (excepto el salto de lnea “Kn”) !l anteceder un carácter con el "uebrado invertido “K” 'ace "ue dic'o carácter sea tratado como tal # no con el signi$icado especial "ue pudiera tener l par "uebrado invertido carácter (o "uebrado invertido código) se conoce también como secuencia de escape # se puede emplea en cual"uier texto para introducir caracteres especiales como saltos de lnea (Kn), tabulaciones (Kt), comillas (K”), apóstro$os (KS), etc 4i en la anterior expresión regular no se emplea una secuencia de escape para el punto # el texto en el "ue se está buscando el correo es tCsreplace(/K/g,DD) >>  !l correo electrónico del usuario 5 es usuario95Rgmailcom, del usuario 6 es usuario96Rgmailcom, del usuario ? usuario9?Rgmailcom

CADENAS (STRINGS)

- 9# -

Qevolvera lo siguiente tmatc'(/K*.RK*.K*M?N/g) >>  Eusuario95Rgmailcom, usuario96Rgmailcom, usuario9?RgmailcomF Lo "ue sera incorrecto por"ue no son correos electrónicos propiamente, en cambio con la secuencia de escape devuelve tmatc'(/K*.RK*.KK*M?N/g) >>  null Tue es correcto, pues en la cadena “t” no existe realmente un correo electrónico 3omo otro ejemplo, si se tiene la siguiente cadena s6CDQirección 3alle Bavelo ?<=:, celular ;<=UV56?, ci 5@6U5;UD >>  Qirección 3alle Bavelo ?<=:, celular ;<=UV56?, ci 5@6U5;U & se "uiere ubicar la posición del n%mero de celular en el mismo, se puede emplear el método “ searc'(expresión regular) ” con la siguiente expresión iCs6searc'(/KdMUN/) >>  ?V Luego, una vez conocida la posición del texto, se puede extraer el mismo con “substr” o “substring” s6substr(i,U) >>  ;<=UV56? s6substring(i,i.U) >>  ;<=UV56? +or supuesto, se puede extraer también directamente el texto, en $orma de vector, con “matc'”

>>  s6matc'(/KdMUN/) E;<=UV56?F

8 también con el método “exec” de la expresión regular /KdMUN/exec(s6) >>  E;<=UV56?F Qe $orma similar, se pueden extraer las $ec'as de la siguiente cadena s?CDreunión en o$icina ;/>  colegio 6?/55/5?D reunión en o$icina ;/>  s?matc'(/KdKdOK/KdKdOK/KdM6,
1res $unciones "ue se emplean $recuentemente con cadenas, pero "ue no $orman parte de los método estándar del objeto “4tring” # "ue por lo tanto no están disponibles en todos los navegadores, son “trim()”, "ue elimina los espacios en blanco al principio # al $inal de la cadenaW “trimLe$t()” "ue elimina los espacios en blanco al principio de la cadena # “trimBig't()” "ue elimina los espacios en blanco al $inal de la cadena La ma#ora de los navegadores actuales, como Xoogle 3'rome # 2ozilla Pire$ox, cuentan con estas $unciones, algunos otros, como 8pera, sólo implementan alguna de ellas (“trim”) # otros como >nternet !xplorer no implementan ninguna Qado "ue son de utilidad, es conveniente "ue estén disponibles en todos los navegadores $ortunadamente, en avascript, es posible aYadir métodos # propiedades a un objeto a través de la propiedad “protot#pe” # para ello

- 98 -

Hernán Peñaranda V.

simplemente se aYade el método ($unción) o propiedad (dato) a protot#pe s para “trimLe$t()” se puede escribir el siguiente código

3omo se puede ver, el método se aYade dentro de un blo"ue “tr#-catc'”, donde primero se intenta emplear el método “trimLe$t” # si ese intento $alla (si se produce un error) se crea el método trimLe$t !l método en s, simplemente devuelve el resultado de reemplazar (mediante una expresión regular) los espacios en blanco al principio de la cadena con caracteres nulos (“”) Qe esta manera el método se aYade sólo si no existe Qe $orma similar se pueden aYadir los métodos “trimBig't” # “trim”

3omo se puede ver, en el %ltimo método, simplemente se llama a los dos anteriores para eliminar los espacios en blanco al principio # al $inal de la cadena primero se eliminan los espacios en blanco al principio de la cadena (con “trimLe$t”) # a la cadena resultante ("ue #a no tiene espacios en blanco al principio) se le "uitan los espacios en blanco al $inal (con “trimBig't”)  !n estos métodos la palabra “t'is” (este) 'ace re$erencia al objeto al cual se están aYadiendo los métodos, es decir a “4tring” (la cadena) +or lo tanto “t'is”, en estos métodos es la cadena de caracteres en s 3omo #a se 'a visto, para "ue una $unción (en este caso un método) esté disponible en cual"uier aplicación, es necesario "ue sea guardado en una librera, en nuestro caso en la librera “sis5@5js” !mpleando estos métodos desde la calculadora con la siguiente cadena

3on “trimLe$t” se obtiene

CADENAS (STRINGS)

- 99 -

3omo en el resultado no se puede apreciar si se 'an eliminado o no los espacios en blanco a la derec'a, se puede ver la longitud de la cadena resultante

Tue al compararla con la longitud original de la cadena

Bevela "ue sólo se 'an eliminado los espacios en blanco a la iz"uierda (pues de lo contrario la longitud de la cadena sera 5@, no 5;) Qel mismo modo se prueban los otros dos métodos

!stos ejemplos dan una idea de la potencia # $lexibilidad de las expresiones regulares & esta caracterstica 'ace "ue sean una de las opciones más viables al momento de validar los datos introducidos por los usuarios +or ejemplo, para veri$icar si el n%mero de telé$ono introducido por el usuario está en el $ormato “ZZZ-ZZ-ZZZZZZZ”, donde los “Z” representan a los n%meros, se puede emplear una expresión regular s si el n%mero introducido por el usuario es

La prueba (test) con la siguiente expresión regular devuelve verdadero

& es as por"ue el n%mero está bien escrito, sin embargo, si el n%mero introducido por el usuario es

Qonde $alta un dgito en el primer grupo, la prueba con la expresión regular devuelve $also

+or supuesto, si como en este caso, se emplea la misma expresión regular en más de una ocasión, no debe volver a ser escrita, sino guardada en una variable

- 100 -

Hernán Peñaranda V.

La validación de teclas se puede simpli$icar también con las expresiones regulares, por ejemplo si el código de la tecla leda está en la variable “[e#” # por ejemplo es igual a =@

4e puede convertir este código en el carácter respectivo

& veri$icar "ue es un n%mero empleando una expresión regular

4i además de n%meros se debe permitir los caracteres “e”, “!”, “.”, “-” # “” (n%meros reales), la expresión regular cambia a

Tue probada con otros caracteres resulta

8bserve "ue el signo menos (“-”) 'a sido escrito como una secuencia de escape, esto por"ue el signo menos dentro de los corc'etes especi$ica un rango de caracteres (tal como ocurre con “@-V”) Qe esta $orma se pueden emplear las expresiones regulares para validar, de manera más sencilla, tanto las teclas pulsadas como la in$ormación introducida 4in embargo, si la validación se la 'ace en $unción a los caracteres en lugar de códigos, resulta más práctico trabajar con el evento “on[e#press” en lugar del evento “on[e#do*n”, pues el evento “on[e#press” devuelve el código del carácter pulsado en lugar del código de la tecla pulsada

5..

TA8LAS

3on $recuencia, en una página 012L, es necesario presentar in$ormación en $orma tabular, por ejemplo cuando se trabaja con matrices o se presentan listas con dos o más columnas +ara ese $in 012L cuenta con las tablas Las tablas en una página 012L se crean con la eti"ueta \table]\/table] Qentro de una tabla las $ilas se crean con la eti"ueta \tr]\/tr ] # dentro

de una $ila cada celda se crea con la eti"ueta \td]\/td] o \t']\/t'] cuando se "uiere "ue el contenido esté centrado # en negrita demás, las $ilas de una tabla pueden ser agrupadas en tres segmentos el encabezado con \t'ead]\/t'ead], el cuerpo con \tbod#]\/tbod#] # el pie con

CADENAS (STRINGS)

- 101 -

\t$oot]\/t$oot] dicionalmente se puede dar un ttulo a la tabla con \caption]\/caption] 4i se emplea la eti"ueta \table], sin ning%n atributo, la tabla resultante no tiene lneas de división, por ejemplo con la siguiente instrucción se crea una tabla con dos $ilas # dos columnas, pero "ue no tiene lneas de división

+ara "ue las lneas de división sean visibles se debe establecer la propiedad “border” en alg%n anc'o, por ejemplo la anterior tabla con un borde igual a “5” produce el siguiente resultado

8bserve "ue el anc'o del borde (5), 'a sido encerrado entre apóstro$os, esto por"ue toda la instrucción está encerrada entre comillas, por lo "ue no se pueden emplear otras comillas dentro la misma (a no ser "ue esté como una secuencia de escape SK”S) Lamentablemente las tablas sólo permiten mostrar datos, no introducirlo, por lo "ue para lograr dic'a $uncionalidad es necesario escribir código avascript

5..

FOAS DE ESTILO EN CASCADA (CSS)

!l aspecto visual de los elementos 012L se modi$ica, en los navegadores actuales, mediante la aplicación de estilos, más propiamente las 'ojas de estilo en cascada 3444, por su siglas en inglés 3ascading 4t#le 4'eets 344 de$ine un conjunto de propiedades "ue permiten modi$icar la apariencia # comportamiento de cual"uier elemento 012L !xisten tres $ormas en las "ue se pueden aplicar dic'as instrucciones a) escribiendo los estilos en un arc'ivo separado e importándolo en la página con la eti"ueta \lin[]W b) escribiendo los estilos en la página 012L dentro de las eti"uetas \st#le]\/st#le], normalmente en el encabezado de la página # c) escribiendo los estilos en el atributo “st#le” de los elementos La más sencilla, aun"ue no la más recomendada, es la %ltima $orma +or ejemplo con la siguiente instrucción se muestra el texto del párra$o (“0ola 2undo”) en color rojo sobre un $ondo amarillo

3omo ocurre con todos los atributos 012L, el valor del atributo debe estar encerrado entre comillas o entre apóstro$os, en este ejemplo se 'an empleado apóstro$os por"ue la instrucción en su conjunto está encerrada entre comillas 3omo se puede ver en el ejemplo, cada propiedad 344 está con$ormada por el par “nombre9de9la9propiedadvalor” # las propiedades se separan unas de

- 102 -

Hernán Peñaranda V.

otras con puntos # comas Las propiedades empleadas en este ejemplo son “ color”, "ue permite cambiar el color del texto # “ bac[ground-color ” "ue permite cambiar el color de $ondo del elemento !n 344 el color se establece en una de < $ormas a) 3on el nombre del color en inglés, pero se debe tomar en cuenta "ue solo tienen nombre un limitado conjunto de coloresW b) 3on la $unción rgb(r,g,b), donde “r” es el código del color rojo (un n%mero comprendido entre @ # 6==, siendo @ la ausencia de color # 6== el color puro), “g” es el código del color verde # “b” es el código del color azulW c) 3on Zrrggbb, donde “rr” es el código del color rojo (en 'exadecimal, donde el valor mnimo es “@@” # máximo “PP”), “gg” es el código del color verde # “bb” es el código del color azul # d) 3on rgb(r^,g^,b^), donde “r^” es el porcentaje de color rojo (comprendido entre @^ # 5@@^), “g^” es el porcentaje de color verde # “b^” es el porcentaje de color azul 3uando una propiedad debe ser $ijada como alguna medida, por ejemplo para el anc'o de un elemento, dic'a medida puede tener las siguientes unidades ^ C porcentaje del elemento contenedorW in C pulgadasW cm C centmetrosW mm C milmetrosW em  C tamaYo en puntos de la $uente actual (normalmente 56 pt)W ex C alto, en puntos, de la $uente actualW pt C puntos (5 pt C 5/;6 pulgadas)W pc C pica (5 pc C 56 pts) # px C pixeles (un punto en la pantalla de la computadora) !n cuanto a las imágenes, se asignan mediante al $unción “ url(_ABL`)”, donde “ABL” es la dirección >nternet donde se encuentra la imagen o el nom bre del arc'ivo en el disco duro (inclu#endo el camino si la imagen no se encuentra en el mismo directorio "ue el arc'ivo 012L) +or ejemplo url(_scrollgi$`), asigna como imagen el arc'ivo “scrollgi$` "ue debe estar en el mismo directorio "ue la página, de no ser as, se debe escribir el camino completo para llegar al arc'ivo, por ejemplo url(_3/Qo*nloads/images/scrollgi$`), observe "ue la separación entre directorios se la 'ace con el "uebrado normal (“/”), no el "uebrado invertido (“K”) como ocurre normalmente en indo*s lgunas de las propiedades 344 son

P"o%i#d!d bac[ground-color bac[ground-image bac[ground-position

border-color border-st#le

border-*idt' 'eig't *idt' $ont-$amil#

$ont-size

D#$"i%i&' !stablece el color de $ondo del elemento !stablece la imagen de $ondo del elemento url(_url o dirección de la imágen`) !stablece la posición de la imágen le$t top, le$t center, le$t bottom, rig't top, rig't center, rig't bottom, center top, center, center bottom o posiciónx posición# !stablece el color del borde del elemento !stablece el estilo del borde 'idden, dotted, das'ed, solid, doublé, Xroove, ridge, inset, outset !stablece el anc'o del borde !stablece el alto del elemento !stablece el anc'o del elemento !speci$ica la $amilia de caracteres a emplear 4i el nombre de la $amilia tiene espacios, debe estar encerrada entre comillas, pe “1imes e* Boman” 3uando se especi$ica más de una $amilia deben estar separadas con comas !speci$ica el tamaYo del texto xx-small, x-small, small, médium, large, x-large, xx-large, smaller,

CADENAS (STRINGS)

$ont-st#le $ont-*eig't margin padding position le$t rig't top bottom over$lo*

cursor

displa#

$loat

visibilit# z-index

border-collapse

3olor text-align text-decoration text-trans$orm

- 103 -

larger o tamaYo en unidades o porcentaje !speci$ica el estilo del texto normal, italic, obli"ue !speci$ica el espesor del texto normal, bold, bolder, lig'ter !stablece los márgenes del elemento (el espacio alrededor del elemento) !stablece el espacio entre el contenido del elemento # el borde del mismo !stablece la posición de un elemento absolute, $ixed, relative, static (el valor por de$ecto) Pija el margen iz"uierdo para un elemento con posición absoluta o relativa Pija el margen derec'o para un elemento con posición absoluta o relativa Pija el margen superior para un elemento con posición absoluta o relativa Pija el margen in$erior para un elemento con posición absoluta o relativa !speci$ica "ué sucede si el contenido sobrepasa al elemento visible (el contenido "ue excede al elemento está visible, valor por de$ecto), 'idden (el contenido "ue excede al elemento se oculta), scroll (aparecen barras de desplazamiento para ver el contenido excedente), auto Qetermina el tipo de cursor a ser empleado cuando el puntero está sobre el elemento auto, cross'air, de$ault, e-resize, 'elp, move, n-resize, ne-resize, n*-resize, pointer, progress, s-resize, se-resize, s*-resize, text, *-resize, *ait Qetermina el tipo de caja para el elemento none (sin caja), bloc[ (con saltos de lnea antes # después), inline (sin saltos de lnea), table (como una tabla), table-caption (como el ttulo de una tabla), table-cell (como la celda de una tabla), table-column (como la columna de una tabla), tablero* (como la $ila de una tabla) Qetermina si el elemento $lotará o no le$t ($lota 'acia la iz"uierda), rig't ($lota a la derec'a), none (no $lota, por de$ecto) !speci$ica si el elemento es o no visible visible, 'idden, collapse (sólo para tablas) !stablece el orden en "ue se apilan los elementos auto o un n%mero (mientras menor sea el n%mero, puede ser negativo, más atrás se encuentra de los otros elementos) 0ace "ue los bordes de las tablas se muestren como uno solo (collapse) o como dos (separate) "ue es el valor por de$ecto collapse, separate !stablece el color del texto !stablece la alineación 'orizontal del texto le$t (por de$ecto), rig't, center, justi$# !stablece la decoración del texto none (por de$ecto), underline, overline, line-t'roug', blin[ 1rans$orma el texto a ma#%sculas (uppercase), a min%sculas (lo*ercase) # a primeras letras en ma#%sculas (capitalize)

- 10 -

Hernán Peñaranda V.

text-indent vertical-align

*'ite-space

!stablece la identación de la primera lnea de un blo"ue de texto unidad de medida o porcentaje !stablece la alineación vertical del texto baseline, sub, super, top, text-top, middle, bottom, text-bottom o unidad de medida o porcentaje Qetermina como se manejan los espacios en blanco en un elemento normal (por de$ecto dos o más espacios en blanco son tratados como uno), no*rap (el texto contin%a en la misma lnea 'asta encontrar un \br]), pre (se conservan los espacios en blanco), pre-*rap (se conservan los espacios en blanco # el texto pasa a la siguiente lnea cuando #a no 'a# espacio en la actual)

!sta no sólo es una lista parcial, sino "ue además no se 'an considerado casos espec$icos # generales de algunas propiedades +or ejemplo la propiedad border-color, puede ser aplicada espec$icamente a uno de los bordes con border-le$t-color, border-rig't-color, border-top-color # border-bottom-color +or el contrario es posible asignar todas las propiedades del borde en una sola instrucción con border anc'o estilo color Lo mismo es válido para otras propiedades como “margin” # “padding”  más de las propiedades, 344 cuenta con las siguientes pseudo-clases # pseudo-elementos

P"o%i#d!d active a$ter be$ore $irst-c'ild $irst-letter $irst-line $ocus 'over lang lin[ visited

D#$"i%i&' plica un estilo al elemento "ue está activo Yade contenido después de un elemento Yade contenido antes de un elemento plica un estilo al primer elemento dentro del elemento plica un estilo al primer carácter de un texto plica un estilo a la primera lnea de un texto plica un estilo al elemento "ue tiene el $oco plica un estilo a un elemento cuando el mouse se mueve sobre el mismo plica un estilo a un elemento con un atributo de lenguaje espec$ico plica un estilo a un enlace no visitado plica un estilo a un enlace visitado

dicionalmente, existen muc'as otras propiedades "ue 'an sido incluidas en la especi$icación 344?, lamentablemente no todas ellas son soportadas a%n por todos los navegadores lgunas de dic'as propiedades se emplearán en temas posteriores seg%n se re"uiera !n las primeras aplicaciones de los estilos 344 se empleará la tercera $orma, es decir serán escritos directamente como un atributo del elemento, tal como se 'a mostrado en el ejemplo Luego, se emplearán la segunda # primera $orma, "ue es la empleada en las aplicaciones ! pro$esionales

5.5.

EL ELEMENTO HDI> 

8tro elemento "ue se emplea $recuentemente en la elaboración de aplicaciones ! es \div] !ste elemento permite crear una división o sección dentro de una página 012L # en su interior se puede incluir cual"uier elemento 012L (excepto por supuesto \bod#]), por esta razón \div] suele ser empleado para agrupar elementos 012L en secciones de la página

CADENAS (STRINGS)

- 10! -

+or s solo \div] es simplemente un rectángulo en blanco (sin bordes), por lo "ue en realidad no es visible a menos "ue se modi$i"ue alguna de sus propiedades (como el color de $ondo #/o el borde del elemento) +or ejemplo la siguiente instrucción crea un elemento \div] de 6=@px de anc'o, con texto en color azul, $ondo amarillo claro # borde de color verde

!stos nuevos elementos, as como los estilos 344, se comenzarán a aplicar a partir del presente tema

5.J.

EEMPLOS

1. E/!7o"# ;'! !%/i!i&' K;# %#"i! i'"od;i" #:o, #' ;'! o !"i!$ /0 '#!$, o'#'i#'do 'i!#'# /#"!$ #' i'$;/!$ (i'/;ido !#'o$, #$0  %!io$ %;'o$, o!$  /! #/! #'#"). L! !%/i!i&' d#7# o$"!" #/ '#"o o!/ d# !"!#"#$ #$"io$, #/ '#"o d# %!/!7"!$ #$"i!$, #/ '#"o d# %!/!7"!$ o'  o 3$ /#"!$, o'#"i" /!$ /#"!$ i'ii!/#$ d# !d! %!/!7"! ! !$;/!$  o$"!" #/ #:o "#$;/!'# #' ;' #/##'o  Hdi> o' /!$ /#"!$ o'#"id!$ "#$!/!d!$ #' o/o" "oo $i#'do #/ fo'0 do d#/ #/##'o !!"i//o /!"o. +ara la introducción del texto se empleará un elemento \textarea], por"ue permite introducir texto en una o más lneas # dado "ue sólo debe ser posi ble escribir letras en min%sculas, se validará el teclado con el evento “on[e#press” !n este caso resulta más práctico emplear este evento por"ue devuelve directamente el código del carácter pulsado (no de la tecla), por lo tanto di$erencia entre ma#%sculas # min%sculas 4e puede emplear también el evento “on[e#do*n”, pero en ese caso se debe controlar además si la tecla “s'i$t” (o “caps loc[”) 'a sido pulsada 4in embargo, cuando se emplea el evento “on[e#press” se debe tomar encuenta "ue el mismo sólo responde a las teclas “normales”, es decir "ue prácticamente sólo responde a las teclas al$anuméricas (# la tecla “enter”), por lo tanto con este evento no se pueden validar teclas como las teclas de $unción (P5 a P56), los cursores, teclado numérico, etc +ara mostrar el n%mero de caracteres, el n%mero palabras # el n%mero de palabras con ? o más letras, se empleará un elemento \table] # para mostrar el texto resultante se empleará un elemento \div] (tal como dicta el enunciado) !l código de la página 012L donde se resuelve el problema es

- 10" -

Hernán Peñaranda V.

CADENAS (STRINGS)

- 10# -

3omo se puede ver, el n%mero de palabras escritas se determina empleando expresiones regulares, también se emplean expresiones regulares en la validación del teclado, pero para la conversión de las letras iniciales a ma#%sculas se emplean estructuras estándar !n este proceso en lugar de “textoc'art(i)” se puede emplear directamente textoEiF (pues como se 'a dic'o las cadenas de caracteres son vectores especializados en caracteres) +ara mostrar el texto en color rojo se 'a empleado un nuevo elemento 012L \span], este elemento no tiene representación visual # se emplea principalmente para aYadir estilos a una parte del texto (como se 'a 'ec'o en este ejemplo) 8bserve también "ue para modi$icar el contenido de un elemento se asigna el texto 012L creado a la propiedad “ inner012L” del mismo briendo esta página en un navegador e introduciendo alg%n texto se obtiene algo parecido a lo siguiente

- 108 -

Hernán Peñaranda V.

4i lo "ue se "uiere es mostrar la primera letra de cada palabra en ma#%sculas, pero no realmente convertirla, se puede conseguir dic'o dic'o resultado de manera más sencilla con una expresión regular # estilos 344, por ejemplo, si el texto es

4e puede obtener el resultado buscado (# ver el texto trans$ormado en la calculadora) con la siguiente instrucción

!n esta expresión “5” representa a las cadenas "ue concuerdan con la expresión regular “KbK*” (es decir las primeras letras de cada palabra), pero para "ue “5” represente a esas coincidencias, la parte de la expresión regular a la "ue representa debe estar entre paréntesis (como se muestra en el ejemplo) Qe esta $orma es posible agrupar # trabajar con las coincidencias de 'asta VV grupos (de 5 a VV) dentro de una expresión regular

2. E/!7o"# ;'! !%/i!i&' K;# %#"i! i'"od;i" #:o !/f!';"io, #' ;'! o !"i!$ /'#!$, o'#'i#'do /#"!$ !'o !$;/!$ oo i'$;/!$ (i'/;ido !#'o$, #$%!io$ %;'o$, o!$  /! #/! #'#"), !$ oo $i/!$ d# !#"i!$ #' #/ fo"!o CCCDDD ( !"!#"#$   dio$)  '0  #"o$ d# !"'# ;'i#"$i!"io #' #/ fo"!o Q0. L! !%/i!i&'

CADENAS (STRINGS)

- 109 -

d#7# #'o'"!" #/ '#"o d# $i/!$ #$"io, #/ '#"o d# !"'#$ ;'i#"0 $i!"io$ #$"io$, #/ '#"o o!/ d# dio$ #$"io$, o$"!" #' ;'! !7/! d# do$ o/;'!$ /!$ do$ %"i#"o$ dio$ d#/ !"'# #' /! %"i#"! o/;'!  /o$ "#$!'#$ #' /! $#;'d!  o$"!" #' ;' #/##'o Hdi> /!$ $i/!$ #' o/o" #"d#, /o$ do$ %"i#"o$ '#"o$ d#/ !"'# #' o/o" "oo  /o$ '#"o$ "#$!'# #' !;/ (odo $o7"# ;' fo'do i!' /!"o) 3omo en el anterior ejemplo el texto será introducido en un \textarea] # las teclas pulsadas se validarán en el evento “on[e#press” !l n%mero de siglas # el n%mero de carnets escritos se mostrarán en una tabla # como dicta el enunciado los otros datos se mostrarán en una tabla # en un elemento \div] !l código de la página 012L "ue resuelve el problema es

- 110 -

Hernán Peñaranda V.

briendo la página en un navegador, se obtiene algo parecido a

CADENAS (STRINGS)

5..

- 111 -

EERCICIOS

+ara presentar los ejemplos # ejercicios del tema, debe crear una carpeta con el nombre “tema=” # guardar en la misma todos los arc'ivos 012L creados (ejemplos # ejercicios) 5 !labore una aplicación "ue permita introducir texto, en una o varias lneas, conteniendo %nicamente letras en ma#%sculas (incluido acentos, espacios puntos, comas # la tecla enter) La aplicación debe mostrar el n%mero total de vocales escritas, el n%mero total de saltos de lnea, el n%mero de palabras con ? letras o menos # convertir la letra $inal de cada palabra a ma#%sculas, mostrando el texto resultante en un elemento \div] con las letras convertidas en color azul, siendo el $ondo del elemento verde claro

- 112 -

Hernán Peñaranda V.

6 !labore una aplicación "ue permita introducir texto al$anumérico, en una o varias lneas, incluido acentos, espacios puntos, comas # la tecla enter La aplicación debe contar todos los dgitos escritos, contar todas las vocales acentuadas, contar todos los grupos de n%meros, encontrar los n%meros tele$ónicos "ue se encuentre en el $ormato ZZZ-ZZZZZ # mostrarlos en un \div] en color rojo sobre un $ondo azul claro ? !labore una aplicación "ue permita introducir texto al$anumérico, en una o varias lneas, incluido direcciones de correo electrónico La aplicación debe contar todos los correos electrónicos escritos, mostrar en una tabla de dos columnas, los nombres de usuario en la primera (la cadena "ue se encuentra antes de R) # los servidores en la segunda (la cadena "ue se encuentra después de R) Pinalmente debe mostrar el texto en un elemento \div] con los correos electrónicos en color verde oscuro, siendo el $ondo del documento verde claro < !labore una aplicación "ue permita introducir texto al$anumérico, en una o varias lneas, incluido $ec'as de nacimiento en el $ormato dd/mm/aaaa (donde los das # los meses pueden tener uno o dos dgitos # los aYos dos o cuatro dgitos) La aplicación debe contar todas las $ec'as escritas, mostrar en una tabla con tres columnas el da en la primera columna, el mes en la segunda # el aYo en la tercera Pinalmente debe mostrar el texto en un elemento \div] con las $ec'as resaltadas de la siguiente $orma das en color verde, meses en color azul, aYos en color ca$é # "uebrados de división (“/) en color rojo, siendo el $ondo amarillo claro

EST RUC TUR AS DE DAT OS

- 113 -

6. ESTRUCTURAS DE DATOS En los anteriores temas se han estudiado dos datos estructurados predefinidos por el lenguaje: las matrices y las cadenas. En este tema se estudia la forma de crear y emplear estructuras de datos propias. Como sucede en la mayoría de los lenguajes actuales, las estructuras no sólo permiten guardar datos, sino también funciones, lo que en principio constituye la definición de un objeto:  un objeto es un elemento que contiene tanto datos como las funciones que operan sobre dichos datos! . "or esta ra#ón en este tema se $er%n también algunos conceptos b%sicos relati$os a objetos, sin embargo, el estudio se centra sobre todo en las estructuras de datos m%s que en los objetos como tales.

6.1.

LA NOTACIÓN JSON

&a notación '()*: 'a$a(cript )bject *otation +*otación de )bjetos de 'a$a(cript, es un formato para el intercambio de información y es a la $e# la forma m%s sencilla de crear estructuras de datos en 'a$ascript. a se ha empleado esta notación al trabajar con matrices y $ectores, siendo la forma m%s empleada en la pr%ctica. &a notación '()* para matrices especifica que sus elementos deben estar encerrados entre corchetes + /! y separados con comas +tal como se ha hecho en el anterior tema. 0sí la siguiente instrucción crea un $ector +un 0rray cuyos elementos son los días de la semana: $ar 123domingo3,3lunes3,3martes3,3miércoles3,3jue$es3,3$iernes3,3s%bado3/

Como ya se ha $isto, sin la notación '()*, el 0rray debe ser creado con: $ar 1 2 ne4 0rray+3domingo3,3lunes3,3martes3,3miércoles3,3jue$es3, 3$iernes3,3s%bado35

) con: 1 2 ne4 0rray+ 16/23domingo35 17/23lunes35 18/23martes35 19/23miércoles35 1/23jue$es35 1;/23$iernes35 1
=ue ob$iamente es m%s moroso que con la notación '()*. &as estructuras en 'a$ascript son igualmente )bjetos y la notación '()* para crear un objeto es la siguiente: $ar nombre>objeto 2 ?propiedad7:$alor7, propiedad8:$alor8, ..., propiedadn:$alorn@5 Es decir que los pares propiedadA$alor +o métodoAdefinición deben estar separados unos de otros con comas y la propiedad debe estar separada de su $alor con dos puntos +:!. &os nombres de las propiedades pueden tener espacios, pero en ese caso deben estar encerrados entre comillas o apóstrofos, igualmente se debe encerrar entre comillas o apóstrofos palabras reser$adas o nombres que emplean caracteres no $alidos +tales como B!, A!, etc.. Como el encerrar los nombres de las propiedades entre comillas no constituye un error en ningn caso, se recomienda encerrarlos siempre que se tenga duda. 0sí, para crear una estructura con los datos de un empleado se puede escribir: empleado72?nombre:3'uan "ére#3, direccion:3Calle 'unín 9;3, >>  celular:D9889<7,fecha>ingreso:37AA866;3@

- 114 -

Hernán Peñaranda V.

?nombre:'uan "ére#, direccion:Calle 'unín 9;, celular:D9889<7, fecha>ingreso:7AA866;@ "ero es igualmente correcto escribir:

>>  empleado72?3nombre3:3'uan "ére#3, 3direccion3:3Calle 'unín 9;3, celular:D9889<7,fecha>ingreso:37AA866;3@ ?nombre:'uan "ére#, direccion:Calle 'unín 9;, celular:D9889<7, fecha>ingreso:7AA866;@

En la programación estructurada, las propiedades de una estructura se conocen como campos!, ra#ón por la cual se har% referencia a ellos también con ese nombre. "or otra parte se recuerda que en la calculadora las $ariables globales se crean sin la palabra $ar!, siendo esta la ra#ón por la cual no se ha empleado la misma en estas instrucciones. 0l igual que sucede con otras estructuras, los espacios, tabulaciones y saltos de línea son ignorados al momento de interpretar la notación '()*, lo que permite escribir estas instrucciones en un formato m%s legible. 0sí la anterior estructura puede ser escrita de forma m%s clara de la siguiente forma: empleado7 2 ? nombre:3'uan "ére#3, direccion:3Calle 'unín 9;3,   celular:D9889<7,   fecha>ingreso:37AA866;3 @ "or supuesto, este tipo de formato es de mayor utilidad en el código de un p%gina FGH& que en la calculadora 'a$ascript. "ara acceder a las propiedades +o métodos de esta estructura, se procede como con las propiedades de cualquier objeto en 'a$ascript, es decir se escribe el nombre del objeto, un punto y el nombre de la propiedad. "or ejemplo para obtener la dirección de empleado7!, se escribe: empleado7.direccion >>  Calle 'unín 9;  para cambiar el nmero del celular a <8ID<;9, se escribe:

>>  empleado7.celular2<8ID<;9 <8ID<;9

Empleando esta notación es posible aJadir una nue$a propiedad al objeto +después de que ha sido creado así para aJadir el carnet de identidad del empleado se escribe: empleado7.ci276K8II9 >>  76K8II9 Con lo que ahora el objeto tiene las siguientes propiedades: empleado7 >>  ?nombre:'uan "ére#, direccion:Calle 'unín 9;, celular:<8ID<;9, fecha>ingreso:7AA866;, ci:76K8II9@

0 estas estructuras se las conoce también como 0rray asociati$os, porque es posible acceder a sus elementos empleando la notación de los 0rray, sólo que en lugar de escribir el índice se escribe la propiedad +o método. 0sí por ejemplo, para obtener el nombre del empleado se puede escribir: empleado7nombre/ >>  'uan "ére#

EST RUC TUR AS DE DAT OS

- 115 -

) lo que es lo mismo:

>>  empleado73nombre3/ 'uan "ére#

Lgualmente, se puede cambiar el $alor de una propiedad con esta notación, así para cambiar la fecha de ingreso a 7ADA8669, se escribe: empleado73fecha>ingreso3/237ADA86693 >>  7ADA8669 "or supuesto es posible también aJadir una nue$a propiedad con esta notación, así por ejemplo para aJadir la propiedad fecha de nacimiento se escribe:

>>  empleado7fecha>nacimiento/27DA76A7K66 7DA76A7K66

Con lo que la estructura tiene ahora los siguientes campos +propiedades:

>>  empleado7 ?nombre:'uan "ére#, direccion:Calle 'unín 9;, celular:D9889<7, fecha>ingreso:7ADA8669, ci:76K8II9, fecha>nacimiento:7DA76A7K66@

En general es m%s sencillo y claro emplear la notación de punto, sin embargo, cuando el nombre de la propiedad tiene espacios o es una palabra reser$ada, la nica forma de acceder a la misma es mediante la notación de 0rrays. "ara eliminar una propiedad +campo se procede como con cualquier $ariable, es decir empleando el comando delete!. "or ejemplo para eliminar la propiedad fecha>nacimiento! se escribe: delete empleado7.fecha>nacimiento >>  true Con lo que la estructura empleado7! tiene ahora los campos: empleado7 >>  ?nombre:'uan "ére#, direccion:Calle 'unín 9;, celular:D9889<7, fecha>ingreso:7ADA8669, ci:76K8II9@

(in la notación '()*, es posible también crear estructuras +array asociati$os, pero el proceso es m%s moroso. "or ejemplo, para crear otro objeto empleado sin '()*, se escribe:

>>  empleado82ne4 )bject+ ?@ >>  empleado8.nombre23Carlos Cardo#o3 Carlos Cardo#o >>  empleado8.direccion23Calle &oa ;983 Calle &oa ;98 empleado8.celular2;I9DI98 >>  ;I9DI98 empleado8.fecha>ingreso237A9A866<3 >>  7A9A866< empleado8.ci27689IK98 >>  7689IK98

Con lo que la estructura +el objeto empleado8 tiene los campos:

>>  empleado8 ?nombre:Carlos Cardo#o, direccion:Calle &oa ;98, celular:;I9DI98, fecha>ingreso:7A9A866<, ci:7689IK98@

"or supuesto, el mismo resultado se puede conseguir empleando la notación de 0rrays:

- 116 -

Hernán Peñaranda V.

>>  empleado92ne4 )bject+ ?@ >>  empleado93nombre3/23'uan Hende#3 'uan Hende# >>  empleado93direccion3/23Calle 'unín <;3 Calle 'unín <; empleado93celular3/2D8IDI98 >>  D8IDI98 empleado93fecha>ingreso3/237A;A86673 >>  7A;A8667 empleado93ci3/27689IK98 >>  7689IK98 empleado9 >>  ?nombre:'uan Hende#, direccion:Calle 'unín <;, celular:D8IDI98, ci:7689IK98, fecha>ingreso:7A;A8667@ Es necesario aclarar que la posibilidad de aJadir y quitar campos en una estructura, después de haber sido creada, es una característica especial de 'a$ascript. &a mayoría de los lenguajes +como C, CMM, 'a$a, Fecl, N"&, "ascal, etc. no permiten aJadir ni quitar campos de una estructura, una $e# que ha sido creada.

6.2.

FUNCIONES CONSTRUCTORAS (CONSTRUCTORES)

Cuando se quiere guardar un conjunto de datos que tienen la misma estructura, es decir que tienen los mismos campos, no resulta pr%ctico tener que escribir repetidamente los nombres de los campos para cada nue$o dato y no sólo porque es moroso, sino también porque es un proceso propenso a errores. "ara e$itar ello 'a$ascript permite crear funciones constructoras +o simplemente constructores!. Oichas funciones son las encargadas de asignar los $alores que se le mandan a las propiedades del objeto +así como reser$ar memoria, asignar $alores por defecto, $alidar datos y otras acti$idades que garanticen la consistencia de los datos. "or ejemplo, para guardar los campos: nombre, dirección, curso y celular, de los alumnos de un colegio, se puede crear el siguiente constructor:

>>  0lumno2function +nombre,direccion,curso,celular? this.direccion 2 direccion, this.curso 2 curso, function +nombre,direccion,curso,celular?  this.nombre 2 nombre,  this.direccion 2 direccion,  this.curso 2 curso,  this.celular 2 celular @

this.nombre 2 nombre, this.celular 2 celular @

&a palabra this! hace referencia al objeto +la estructura que se est% creando. Es importante entender que this.nombre! es una $ariable diferente al par%metro nombre!: this.nombre! es el campo nombre! del objeto que se est% creando, mientras que nombre! es el dato que se manda a la función. *o es necesario que los par%metros del constructor tengan los mismos nombres que los campos, es m%s, algunos autores recomiendan dar nombres diferentes a los par%metros para e$itar confusión, mientras que otros recomiendan dar los mismos nombres y justamente por la misma ra#ón. "or lo tanto el constructor puede ser creado también con par%metros como los siguientes: 0lumno 2 function +>nombre, >direccion, >curso, >celular? >>  >nombre, this.direccion 2 >direccion, 2 >celular @

this.curso 2 >curso,

this.nombre 2 this.celular

EST RUC TUR AS DE DAT OS

- 117 -

function +>nombre, >direccion, >curso, >celular?  this.nombre 2 >nombre,  this.direccion 2 >direccion,  this.curso 2 >curso,  this.celular 2 >celular @ )tro detalle que es importante notar es que el nombre del constructor +de la función comien#a con una letra mayscula. Esa no es una norma, sin embargo, es una pr%ctica frecuente y recomendable pues de esa manera se puede distinguir entre una función normal y un constructor. Pna $e# que creado el constructor puede ser empleado para crear registros con diferentes conjuntos de datos, como por ejemplo:

>>  e7 2 ne4 0lumno+3'uan "ére#3,30renales 9;3,;,DI97KI9D ?nombre:'uan "ére#, direccion:0renales 9;, curso:;, celular:DI97KI9D@ e8 2 ne4 0lumno+3Carlos Nomero3,3Prcullo DI3,D,IK89I8 >>  ?nombre:Carlos Nomero, direccion:Prcullo DI, curso:D, celular:IK89I8@ e9 2 ne4 0lumno+30manda Ni$as3,3EspaJa 9I3,I,<98K89; >>  ?nombre:0manda Ni$as, direccion:EspaJa 9I, curso:I, celular:<98K89;@

En programación estructurada, a cada uno de estos datos se conoce con el nombre de registro!. &a agrupación de dos o m%s registros constituye una tabla! y la agrupación de dos o m%s tablas constituye una  base de datos!. Como se dijo, los constructores no sólo facilitan la creación de estructuras +registros, sino que al ser funciones, pueden ser empleadas para $alidar los datos yAo asignar $alores por defecto. "or ejemplo, se puede modificar el constructor 0lumno! de manera que asigne $alores por defecto en caso de no ser en$iados:

>>  0lumno2function +nombre,direccion,curso,celular?

this.nombre 2 nombre QQ 3sin nombre3, this.direccion 2 direccion QQ 3sin dirección3, this.curso 2 curso QQ 7, this.celular 2 celular QQ 6 @ function +nombre,direccion,curso,celular?  this.nombre 2 nombre QQ 3sin nombre3,  this.direccion 2 direccion QQ 3sin dirección3,  this.curso 2 curso QQ 7,  this.celular 2 celular QQ 6 @ 0hora, con este constructor, si no se mandan datos, se crea un registro con los $alores por defecto: e 2 ne4 0lumno+ >>  ?nombre:sin nombre, direccion:sin dirección, curso:7, celular:6@

Como se recordar% este constructor funciona porque en 'a$ascript el operador QQ! de$uel$e el primer $alor que es interpretado como $erdadero +es decir cualquier $alor diferente de null, 6, undefined o !.

6.3.

CAMPOS CONSTANTES

En ocasiones uno o m%s campos +propiedades tienen los mismos $alores para todos los registros +objetos. En esos casos no tiene sentido escribir dichos $alores para cada registro, siendo una mejor alternati$a crearlas como constantes. En 'a$ascript e1iste dos formas en las que se puede crear una propiedad constante: a como un campo del constructor y b como un campo de la propiedad prototype!.

- 118 -

Hernán Peñaranda V.

&a primera forma es la preferida y es la que se considera propiamente como constante en 'a$ascript. Pn ejemplo de este tipo de campo es el nmero "L, que como se recordar% se encuentra en el objeto Hath!: Hath."L. "ara crear un campo constante, simplemente se aJade el mismo al constructor. "or ejemplo, dado que todos los alumnos pertenecen al mismo colegio, es con$eniente crear un campo constante para el nombre del colegio: 0lumno.C)&ERL) 2 3Sran# Gamayo3 >>  Sran# Gamayo &uego, para acceder a este $alor, se escribe: 0lumno.C)&ERL) >>  Sran# Gamayo &a otra forma de crear un campo constante es mediante la propiedad prototype!, que a su $e# es un objeto +un registro. Con prototype!, al igual que con el constructor el campo se crea una sola $e#, pero se accede al mismo como si fuera un campo propio del registro. "or ejemplo, dado que la dirección del colegio es la misma para todos los alumnos, se puede crear una propiedad para el mismo: 0lumno.prototype.dircolegio 2 3(an 0lberto 893 >>  (an 0lberto 89 Entonces, para acceder a este campo desde cualquiera de los registros +por ejemplo, el registro e7!, se escribe: e7.dircolegio >>  (an 0lberto 89

"ero, an cuando se accede a este campo igual que a cualquier otro, ha sido escrito una sola $e# y sólo e1iste una copia del mismo. )bser$e también que ha sido posible acceder a esta propiedad desde un registro que ha sido creado cuando el constructor no tenía an dicha propiedad. Esta es una característica importante de prototype!, cualquier propiedad +o método que se aJade a prototype!, queda inmediatamente disponible para todos los registros +objetos creados con ese constructor, así como para todos los registros que se crean posteriormente con el mismo .

6.4.

REGISTROS JERÁRQUICOS

&os campos de una estructura pueden ser de cualquier tipo $%lido, incluido otro registro. Cuando esto ocurre, es decir cuando uno o m%s campos son a su $e# registros, se dice que son jer%rquicos +los registros que no cuentan con este tipo de campos se denominan registros planos. Pn mismo conjunto de datos puede ser $isto tanto como un registro plano como uno jer%rquico, por ejemplo el nombre de una persona puede ser $isto como un dato simple +de tipo te1to o como un registro con tres campos: apellido paterno, apellido materno y nombres, igualmente la fecha de nacimiento puede ser $ista como un registro compuesto por tres campos: el día, el mes y el aJo, algo similar ocurre con la dirección, que puede ser $ista como un registro compuesto por dos campos: el nombre de la calle y el nme ro de la casa. 0sí para guardar los datos de una persona en un registro jer%rquico se crean primero los constructores para los registros internos: *ombre 2 function+a>paterno,a>materno,nombres? >>  a>paterno, this.a>materno 2 a>materno, function +a>paterno,a>materno,nombres?  this.a>paterno 2 a>paterno,

this.a>paterno 2 this.nombres 2 nombres @

EST RUC TUR AS DE DAT OS

- 119 -

this.a>materno 2 a>materno,  this.nombres 2 nombres @ Oireccion 2 function+calle,numero? this.calle 2 calle, this.numero 2 >>  numero @ function +calle,numero?  this.calle 2 calle,  this.numero 2 numero @ TTSecha 2 function+dia,mes,aJo? this.dia 2 dia, this.mes 2 mes, this.aJo 2 aJo @ function +dia,mes,aJo?  this.dia 2 dia,  this.mes 2 mes,  this.aJo 2 aJo @ Con estos constructores es posible ahora crear el registro jer%rquico:

>>  "ersona 2 function+ci,nombre,direccion,f>nacimiento? this.nombre 2 nombre, this.direccion 2 direccion, f>nacimiento @ function +ci,nombre,direccion,f>nacimiento?  this.ci 2 ci,  this.nombre 2 nombre,  this.direccion 2 direccion,  this.f>nacimiento 2 f>nacimiento @

this.ci 2 ci, this.f>nacimiento 2

Con este constructor se pueden crear registros jer%rquico, como por ejemplo: nombre 2 ne4 *ombre+3'uan3,3"ere#3,3Nomero3 >>  ?a>paterno:'uan, a>materno:"ere#, nombres:Nomero@ >>  direccion 2 ne4 Oireccion+30$enida 'aime Hendo#a3,>  f>nacimiento 2 ne4 Secha+,76,7KKD ?dia:, mes:76, aJo:7KKD@ >>  p7 2 ne4 "ersona+76I8D9D,nombre,direccion,f>nacimiento ?ci:76I8D9D, nombre:?a>paterno:'uan, a>materno:"ere#, nombres:Nomero@, direccion:?calle:0$enida 'aime Hendo#a, numero:nacimiento:?dia:, mes:76, aJo:7KKD@@

Como se puede $er los campos nombre, dirección y f>nacimiento, muestran la información que contienen entre lla$es, lo que confirma que se tratan de registros +objetos. "ara acceder a uno de los campos de este registro se procede de la forma habitual, así por ejemplo, para obtener la dirección de p7! se escribe: p7.direccion >>  ?calle:0$enida 'aime Hendo#a, numero:
 para acceder a uno de los subcampos, simplemente se e1tiende esta nomenclatura, por ejemplo, para obtener el aJo de nacimiento de p7!, se escribe: p7.f>nacimiento.aJo >>  7KKD

=ue se interpreta como de costumbre, de derecha a i#quierda, es decir es el aJo! del campo f>nacimiento! de la persona p7!. Es posible crear directamente el constructor para una persona, sin crear pre$iamente los constructores para los campos internos:

- 12 -

Hernán Peñaranda V.

>>  "ersona> 2 function+ci,a>paterno,a>materno,nombres,calle,numero,dia,mes,aJo? this.ci 2 ci, this.nombre 2?a>paterno:a>paterno, a>materno:a>materno, nombres:nombres@, this.direccion 2 ?calle:calle, numero:numero@ this.f>nacimiento 2 ?dia:dia, mes:mes, aJo:aJo@ @ function +ci,a>paterno,a>materno,nombres,calle,numero,dia,mes,aJo?  this.ci 2 ci,  this.nombre 2?a>paterno:a>paterno, a>materno:a>materno, nombres:nombres@,  this.direccion 2 ?calle:calle, numero:numero@  this.f>nacimiento 2 ?dia:dia, mes:mes, aJo:aJo@ @

Como se puede $er, en este caso los registros internos no tienen la palabra this! para diferenciarlos de los nombres de los par%metros y no es necesario, porque 'a$ascript sabe que el $alor antes de los dos puntos es el nombre del campo y que el $alor después de los dos puntos es su $alor. Con este constructor se crean los mismos campos que con "ersona!, pero mandando los datos de todos los campos +incluidos subcampos por separado, como por ejemplo:

>>  ne4 "ersona>+76I8I9,3Róme#3,3(ala#ar3,3Hariela3,3Estudiantes3,paterno:Róme#, a>materno:(ala#ar, nombres:Hariela@, direccion:?calle:Estudiantes, numero:nacimiento:?dia:89, mes:;, aJo:7KK7@@

(i bien en primera instancia los registros jer%rquicos pueden ser $istos como una forma m%s eficiente y ordenada de organi#ar la información, en la pr%ctica dificultan el acceso a la misma y constituyen estructuras rígidas que complican innecesariamente su e1pansión yAo modificación. Es por esta ra#ón que en la pr%ctica la mayoría de las bases de datos +m%s del I6U est%n constituidas por registros planos. &os registros jer%rquicos funcionan bien en pequeJas aplicaciones yAo aplicaciones donde es poco probable que la estructura de información sea ampliada o modificada.

6.5.

OJETOS

Como se ha apuntado en el anterior capítulo, los campos de una estructura pueden ser de cualquier tipo, incluido funciones. Cuando esto ocurre, es decir cuando uno o m%s campos de una estructura son funciones, la estructura se conoce como una  clase! y las $ariables que se crean con esa estructura se conocen como  objetos!. 0un cuando no es obligatorio, dichas funciones +denominadas métodos deberían operar sobre los datos +propiedades del objeto. "or ejemplo se puede definir una estructura para guardar los datos de un rect%ngulo. &os datos propiamente son los puntos correspondientes a la esquina superior i#quierda y a la esquina inferior derecha +ambas a su $e# registros. &as otras propiedades! como la longitud de los lados, el perímetro y el %rea se pueden calcular a partir de los dos puntos, por lo que se implementan como métodos: Nectangulo 2 function+17,y7,18,y8? >> 

this.p7 2 ?1:17,y:y7@, this.p8 2 ?1:18,y:y8@, this.alto 2 function+?return this.p8.y-this.p7.y5@, this.ancho 2 function+?return this.p8.1-this.p7.15@, this.perimetro 2 function+?return 8B+this.ancho+Mthis.alto+5@, this.area 2 function+ ?return this.ancho+Bthis.alto+5@ @ function +17,y7,18,y8?  this.p7 2 ?1:17,y:y7@,

EST RUC TUR AS DE DAT OS

- 121 -

this.p8 2 ?1:18,y:y8@,  this.alto 2 function+?return this.p8.y-this.p7.y5@,  this.ancho 2 function+?return this.p8.1-this.p7.15@,  this.perimetro 2 function+?return 8B+this.ancho+Mthis.alto+5@,  this.area 2 function+?return this.ancho+Bthis.alto+5@ @

0hora, si se crea un objeto con este constructor:

>>  r7 2 ne4 Nectangulo+76,76,96,86 ?p7:?1:76, y:76@, p8:?1:96, y:86@, alto:function +?return this.p8.ythis.p7.y5@, ancho:function +?return this.p8.1-this.p7.15@, perimetro:function +?return 8B+this.ancho+Mthis.alto+5@, area:function +?return this.ancho+Bthis.alto+5@@

(e puede a$eriguar el alto, ancho, perímetro y %rea del mismo llamando a los métodos del objeto: r7.alto+ >>  76 r7.ancho+ >>  86 >>  r7.perimetro+ <6 >>  r7.area+ 866

(in embargo, esta solución es ineficiente pues cada $e# que se crea un nue$o objeto, se crean también nue$as funciones para el mismo, es decir que si se crea un nue$o objeto, como el siguiente: r8 2 ne4 Nectangulo+76,86,766,866 >>  ?p7:?1:76, y:86@, p8:?1:766, y:866@, alto:function +?return this.p8.ythis.p7.y5@, ancho:function +?return this.p8.1-this.p7.15@, perimetro:function +?return 8B+this.ancho+Mthis.alto+5@, area:function +?return this.ancho+Bthis.alto+5@@

*o sólo se crean nue$os campos +con los nue$os $alores, sino también nue$os métodos +ancho!, alto!, perimetro! y area! a pesar de ser e1actamente los mismos que para el objeto r7!. "ara e$itar este comportamiento ilógico los métodos deben ser aJadidos a la propiedad prototype! del constructor +tal como sucede con los campos constantes. Oe esa manera se crea una sola copia de la función la cual es compartida +heredada por todos los objectos creados con ese constructor. "rocediendo de esa forma, la $ersión optimi#ada del constructor se crea con: Nectangulo 2 function+17,y7,18,y8? >> 

this.p7 2 ?1:17,y:y7@,

this.p8 2

?1:18,y:y8@ @ function +17,y7,18,y8?  this.p7 2 ?1:17,y:y7@,  this.p8 2 ?1:18,y:y8@ @ 0l cual se aJaden las funciones +métodos en la propiedad prototype: Nectangulo.prototype.alto 2 function+?return this.p8.y-this.p7.y5@ >>  function +?return this.p8.y-this.p7.y5@ >>  Nectangulo.prototype.ancho 2 function+?return this.p8.1-this.p7.15@ function +?return this.p8.1-this.p7.15@ >>  Nectangulo.prototype.perimetro 2 function+?return 8B+this.ancho+ Mthis.alto+5@ function +?return 8B+this.ancho+Mthis.alto+5@

- 122 -

Hernán Peñaranda V.

>>  Nectangulo.prototype.area 2 function+?return this.ancho+Bthis.alto+5@ function +?return this.ancho+Bthis.alto+5@

0hora, cuando se crea un nue$o objeto con este constructor: r >>  ?p7:?1:7, y:8@, p8:?1:9, y:@, alto:function +?return this.p8.ythis.p7.y5@, ancho:function +?return this.p8.1-this.p7.15@, perimetro:function +?return 8B+this.ancho+Mthis.alto+5@@

0parentemente se han creado nue$amente las funciones +pues aparecen en el resultado, pero en realidad no es así, estas funciones +métodos son las aJadidas a la propiedad prototype!, las cuales, al ser heredadas, son mostradas como si pertenecieran al objeto. Esto hecho se puede comprobar aJadiendo un nue$o método a la propiedad prototype! del constructor. "or ejemplo se puede aJadir un método para calcular la diagonal del rect%ngulo:

>>  Nectangulo.prototype.diagonal 2 function+?return sqrt+sqr+this.alto+ Msqr+this.ancho+5@ function +?return sqrt+sqr+this.alto+Msqr+this.ancho+5@

 como este nue$o método pertenece a la propiedad prototype! del constructor es heredado autom%ticamente por todos los objetos creados con el mismo, por lo tanto puede ser empleado desde el objeto r! +a pesar de ha ber sido aJadido después de crear el objeto r!:

>>  r.diagonal+ 8.I8I8D78D<7K69

Cuando se $en los elementos del objeto r!:

>>  r ?p7:?1:7, y:8@, p8:?1:9, y:@, alto:function +?return this.p8.ythis.p7.y5@, ancho:function +?return this.p8.1-this.p7.15@, perimetro:function +?return 8B+this.ancho+Mthis.alto+5@, diagonal:function +?return sqrt+sqr+this.alto+Msqr+this.ancho+5@@

(e muestra también el método diagonal como parte del mismo, con lo que se demuestra que los métodos aJadidos a la propiedad prototype! son reportados como parte de los objetos creados con el constructor, pero en realidad sólo e1iste una copia de dichos métodos y la misma se encuentra en la propiedad prototype! del constructor.

6.6.

ESTRUCTURAS ! FUNCIONES (PROGRAMACIÓN ESTRUCTURADA)

En la programación estructurada, a diferencia de la orientada a objetos, las estructuras de datos y las funciones no constituyen una unidad. &as estructuras se crean por un lado y las funciones que operan con dichos datos por otro. 0mbas metodologías permiten llegar a los mismos resultados, pero anali#ando y resol$iendo el problema desde diferentes puntos de $ista. En la programación estructurada se anali#a el problema pensando por un lado en las funciones +tareas que debe lle$ar a cabo la aplicación y por otro en los datos que se requieren para reali#ar dichas funciones. En la programación orientada a objetos en cambio, se piensa primero en los objetos que se requieren para resol$er el problema y luego, para cada objeto, se piensa en las propiedades +datos y métodos +funciones que deben operar sobre dichas propiedades.

EST RUC TUR AS DE DAT OS

- 123 -

"or ejemplo la solución que se ha dado en el anterior ac%pite para el problema del rect%ngulo, puede ser encontrada también siguiendo la metodología estructurada. En el enfoque estructurado se piensa primero en las funciones que se requieren al trabajar con rect%ngulos. Oichas funciones serían las encargadas de calcular el ancho, alto, perímetro, %rea y la diagonal de un rect%ngulo. &uego se piensa en los datos que se requieren para lle$ar a cabo dichos c%lculos. Oado que un rect%ngulo queda completamente definido con los puntos que se encuentran en la esquina superior i#quierda y la esquina inferior derecha se requiere un dato estructurado compuesto por estos dos puntos, es decir:

>>  Nectangle 2 function+17,y7,18,y8?

this.p7 2 ?1:17, y:y7@,

this.p8 2

?1:18, y:y8@ @ function +17,y7,18,y8?  this.p7 2 ?1:17, y:y7@,  this.p8 2 ?1:18, y:y8@ @

=ue en primera instancia es pr%cticamente el mismo constructor empleado para crear los objetos en el anterior ac%pite, sin embargo, en este caso este constructor sólo tiene datos +campos, por lo que es un constructor de registros y no de objetos. 0hora +por separado se crean las funciones que se encargan de lle$ar a cabo las tareas antes mencionadas:

>>  ancho 2 function+r?

return r.p8.1-r.p7.15 @ function +r?  return r.p8.1-r.p7.15 @ >>  alto 2 function+r? return r.p8.y-r.p7.y5 @ function +r?  return r.p8.y-r.p7.y5 @ perimetro 2 function+r? return 8Bancho+rBalto+r5 @ >>  function +r?  return 8Bancho+rBalto+r5 @ area 2 function+r? return ancho+rBalto+r5 @ >>  function +r?  return ancho+rBalto+r5 @ >>  diagonal 2 function+r? return sqrt+sqr+ancho+rMsqr+alto+r5 @ function +r?  return sqrt+sqr+ancho+rMsqr+alto+r5 @

Con lo que el problema estaría resuelto. "ara probar esta solución se crea un rect%ngulo con los mismos puntos que el objeto r7! del anterior ac%pite: r6 2 ne4 Nectangle+76,76,96,86 >>  ?p7:?1:76, y:76@, p8:?1:96, y:86@@

0hora, con r6! y las funciones creadas se calcula el alto, ancho, perímetro, %rea y diagonal de este rect%ngulo: alto+r6 >>  76 >>  ancho+r6 86

- 124 -

Hernán Peñaranda V.

>>  perimetro+r6 <6 >>  area+r6 866 >>  diagonal+r6 88.9<6
)bteniéndose, como era de esperar, los mismos resultados que en la solución con objetos. Como se ha comprobado en el anterior ejemplo, el mismo problema puede se resuelto tanto desde el punto de $ista estructurado como orientado a objetos y obteniendo en ambos casos los mismos resultados. Entonces Vqué enfoque se debe emplear para resol$er un problemaW, la respuesta a esta pregunta depende de $arios factores: a &a naturale#a del problema: e1isten problemas que por su naturale#a se resuel$en de forma m%s eficiente con el enfoque estructurado, mientras que otros con el enfoque orientado a objetos5 b &as herramientas disponibles: algunas herramientas sólo soportan uno de los enfoques en cuyo caso, si se est% empleando una de esas herramientas no queda otra alternati$a que resol$er el problema con el enfoque soportado por la misma5 c El tamaJo del proyecto: aunque en teoría la programación orientada a objetos facilita la elaboración de grandes proyectos, en la pr%ctica el esfuer#o requerido en su mantenimiento incrementa e1ponencialmente a medida que el proyecto crece, por lo que para proyectos grandes +como los sistemas operati$os suele ser una mejor opción la programación estructurada5 d &a preferencia del desarrollador: este es en ltima instancia el factor determinante, porque es el desarrollador quien elegir% una u otro enfoque en función a su preferencia y e1periencia con uno u otro enfoque. (on $arias las $entajas y des$entajas que los defensores de uno y otro enfoque mencionan, pero como ya se dijo la elección final es sobre todo una cuestión de preferencia, pues con ambas metodologías se pueden resol$er los mismos problemas. Pna de las des$entajas que se seJala con relación a la programación estructurada es que las funciones pasan a forma parte del espacio de nombres de las $ariables globales, con lo que incrementa la probabilidad de que los nombres de dos o m%s $ariables colisionen. Este problema, sin embargo, puede ser minimi#ado declarando las funciones en un espacio de nombres. Pn espacio de nombres es simplemente una estructura, inicialmente $acía, a la cual se le aJaden las funciones, estructuras, $ariables, etc., que se quiere pertene#can a este espacio de nombres. Oe esa manera el nico nombre que pasa al espacio de las $ariables globales es el nombre de la estructura. "or ejemplo, el constructor Nectangle! y sus funciones pueden ser colocados en un espacio de nombres, por ejemplo un espacio de nombres denominado geometria!, que se crea con: gemoetria 2 ?@ >>  ?@

) también con:

>>  geometria 2 ne4 )bject+ ?@

Pna $e# creado el espacio de nombres se aJaden al mismo el constructor y las funciones: geometria.Nectangle 2 function+17,y7,18,y8? >> 

this.p7 2 ?1:17, y:y7@,

EST RUC TUR AS DE DAT OS

- 125 -

this.p8 2 ?1:18, y:y8@ @ function +17,y7,18,y8?  this.p7 2 ?1:17, y:y7@,  this.p8 2 ?1:18, y:y8@ @ geometria.ancho 2 function+r? return r.p8.1-r.p7.15 @ >>  function +r?  return r.p8.1-r.p7.15 @ >>  geometria.alto 2 function+r? return r.p8.y-r.p7.y5 @ function +r?  return r.p8.y-r.p7.y5 @ >>  geometria.perimetro 2 function +r? return 8Bancho+rBalto+r5 @ function +r?  return 8Bancho+rBalto+r5 @ geometria.area 2 function +r? return ancho+rBalto+r5 @ >>  function +r?  return ancho+rBalto+r5 @ geometria.diagonal 2 function +r? return sqrt+sqr+ancho+r >>  Msqr+alto+r5 @ function +r?  return sqrt+sqr+ancho+rMsqr+alto+r5 @

"or supuesto, para acceder a estas funciones, se debe preceder su nombre con el nombre del espacio de nombres. "or ejemplo con la siguiente instrucción se crea un nue$o rect%ngulo y se calcula su %rea:

>>  r; 2 ne4 geometria.Nectangle+;6,;6,866,866 ?p7:?1:;6, y:;6@, p8:?1:866, y:866@@ geometria.area+r; >>  88;66

(e puede e$itar el reescribir el nombre del espacio de nombres para cada $ariable yAo función empleando la estructura 4ith!: 4ith +nombre>del>espacio  ? instrucciones @ 0sí con esta estructura, se puede crear otro rect%ngulo y calcular la altura, perímetro, %rea y diagonal del mismo: 4ith +geometria ? >>  4rite+perimetro+r<5 886 DK866 9K<66 8I.8;96I6D769DK

r< 2 ne4 Nectangle+86,96,866,8;65 4rite+alto+r<5 4rite+area+r<5 4rite+diagonal+r<5 @

Como se puede $er, al interior de la estructura 4idth! no se requiere ahora el nombre del espacio de nombres +geometria! para acceder a sus elementos +Nectangle, alto, area, etc.. &a función 4rite! nada tiene que $er con los espacios de nombre, ha sido empleada simplemente para imprimir los resultados intermedios. (e debe aclarar que la estructura 4ith! funciona no sólo con espacios de nombres, sino con cualquier objeto, no obstante es importante tomar en cuenta que su uso disminuye la $elocidad de ejecución de los programas, por lo que debe ser empleada con moderación.

- 126 -

Hernán Peñaranda V.

0unque, como se dijo, la selección del enfoque es sobre todo una cuestión de preferencia, cuando el problema es por su naturale#a estructurado u orientado a objetos, lo recomendable es resol$er el problema con ese enfoque. Pn ejemplo lo constituyen las e1presiones matem%ticas, que por su naturale#a son estructuradas: en matem%ticas se tienen por un lado los datos +nmeros naturales, enteros, reales, complejos, etc. y por otro las funciones que operan sobre los mismos +suma, resta, multiplicación, etc. es por ello que pr%cticamente el 766U de las soluciones profesionales en este campo son estructuradas. Hientras que las soluciones orientadas a objetos, en este campo, no han tenido é1ito y no porque no sea posible resol$er el problema con ese enfoque, sino porque la solución +al no ser natural es difícil de aplicar en los problemas pr%cticos: por ejemplo en la suma, sin importar qué se sume, se escribe el primer dato, el operador de suma +M! y el segundo dato, no +como requiere la programación orientada a objetos el dato, un punto, el nombre del operador y el segundo dato entre paréntesis y la situación se complica m%s an si los datos no son del mismo tipo, pues entonces se debe recurrir adem%s al moldeo de tipos.

6.".

GENERACIÓN ALEATORIA DE DATOS NO NUM#RICOS

"ara probar las aplicaciones que trabajan con registros, con frecuencia se requieren conjuntos de datos no numéricos como apellidos, nombres de personas, nombres de artículos, nombres de calles, etc. El introducir estos datos manualmente no es una alternati$a $iable, pues por una parte consume demasiado tiempo y por otra, cuando se produce un error y eso es algo que ocurre en pr%cticamente el 766U de las aplicaciones en desarrollo, sería necesario $ol$er a introducirlos. "or esta ra#ón, la alternati$a m%s $iables consiste en generarlos aleatoriamente. "ara generar un conjunto de datos no numéricos de forma aleatoria se debe crear primero un domino del cual se e1traigan al a#ar los datos. &a forma m%s sencilla y pr%ctica de crear un dominio es empleando 0rrays, por ejemplo con el siguiente 0rray, se crea un dominio con ; apellidos: d>apellidos>230bad3,30jata3,30lsina3,3Cadenas3,30ragón3,30rteaga3,30mor3 >>  ,3Xarber%3,3Xelda3,3Xonilla3,3Cadenas3,3Cantuta3,3Casado3,3Cer$antes3,3Choq uemamani3,3Comas3,3Cuer$o3,3Elor#a3,3Serr%n3,3Raliano3,3Risbert3,3Ruijarro3 ,3Fuguet3,3'anco3,3&edesma3,3&ucas3,3Harí3,3Henénde#3,3Horales3,3*ieto3,3"a csipati3,3"aucarmayta3,3"ilco3,3"ortero3,3=ue$edo3,3Nico3,3Nosell3,3(al$Y3, 3(e$illa3,3(ureda3,3Gomé3,3Pyardo3,3Zerdugo3,3%Je#3,3[urita3/ 0bad, 0jata, 0lsina, Cadenas, 0ragón, 0rteaga, 0mor, Xarber%, Xelda, Xonilla, Cadenas, Cantuta, Casado, Cer$antes, Choquemamani, Comas, Cuer$o, Elor#a, Serr%n, Raliano, Risbert, Ruijarro, Fuguet, 'anco, &edesma, &ucas, Harí, Henénde#, Horales, *ieto, "acsipati, "aucarmayta, "ilco, "ortero, =ue$edo, Nico, Nosell, (al$Y, (e$illa, (ureda, Gomé, Pyardo, Zerdugo, %Je#, [urita/

Con este dominio se pueden crear una función que genere al a#ar uno de estos apellidos. "ara ello simplemente se genera un nmero entero aleatorio comprendido entre 6 y el nmero de elementos del dominio menos 7 de$ol$iendo el elemento +el apellido correspondiente a este nmero generado: generar0pellido2function+? >> 

return d>apellidos>round+random+6,d>apellidos>.length-7/5 @ function +?  return d>apellidos>round+random+6,d>apellidos>.length-7/5 @

EST RUC TUR AS DE DAT OS

- 127 -

&lamando a la función unas cuantas $eces se obtienen algunos apellidos aleatorios: generar0pellido+ >>  Zerdugo generar0pellido+ >>  (e$illa >>  generar0pellido+ Xonilla >>  generar0pellido+ Harí >>  generar0pellido+ Cantuta

Hientras mayor sea el nmero de elementos en el dominio m%s cercanos a los $alores ser%n los elementos generados. Oe la misma forma se pueden generar datos aleatorios para otros dominios como: nombres de artículos, marcas de automó$iles, nombres de países, etc. En la librería (L(767.js se han aJadido dominios y funciones generadoras para apellidos: generar0pellido+5 nombres femeninos: generar*ombreS+5 nombres masculinos: generar*ombreH+ y nombres de calles: generarCalle+, los mismos que pueden ser empleados para generar registros al a#ar. En esta librería +o en otra propia se pueden aJadir los dominios y funciones generadoras que se requieran.

6.$.

FORMULARIOS

Cuando se trabaja con estructuras de datos, es frecuente que dichos datos sean introducidos en formularios. &os formularos en una p%gina FGH& son simplemente contenedores +similares a los elementos \di$T en cuyo interior se incluyen los elementos que permiten introducir +o seleccionar los campos del registro. (e emplean porque cuentan con algunos métodos que facilitan el paso de datos desde y hacia las bases de datos ubicadas en los ser$idores, no obstante, con el ad$enimiento de la tecnología asíncrona +0'0], que permite una comunicación interacti$a con los ser$idores, la utilidad de dichos métodos ha disminuido, ra#ón por la cual actualmente no es un requisito que los datos de un regis tro se encuentren dentro de un formulario, pudiendo estar en cualquier otro contenedor o en ninguno. En ocasiones inclusi$e se e$ita el uso de formularios para que los métodos autom%ticos asociados a los mismos no interfieran con los métodos elaborados. "ara crear un formulario se emplean las etiquetas  \formT...\AformT !. "or ejemplo, en la siguiente p%gina FGH&, se crea un formulario b%sico para introducir los datos correspondiente a un directorio telefónico. (e hace notar que el formulario de este ejemplo es sólo la interfa# de usuario de la aplicación, no tiene integrada ninguna funcionalidad, por lo que en realidad no hace nada: \^O)CG"E htmlT \htmlT \headT \meta name2"viewport" content2"width=device-width, initial-scale=1" T \titleTSormulario\AtitleT \style type2"text/css"T  ? %&'  4idth:250px  5

- 128 -

Hernán Peñaranda V.

height:145px  5 border-style:ridge5 border-4idth:5px  5 border-color:lightblue5 bac_ground-color :lightblue5 padding: 10px  5 @

*+, ? position:absolute5 4idth:70px  5 color:blue5 font-4eight:bold  5 te1t-align:right5 @

-/0 ? position:absolute5 te1t-color:green5 font-4eight:bold  5 left:100px  5 @ \AstyleT \AheadT \bodyT \form id2"or!a1"T \^--Campo para introducir el nombre--T \label for2"no!bre" style23top:5px  53T*ombre:\AlabelT \input type2"text" id2"no!bre" style23top:1px  53T\brT \^--Campo para introducir la dirección--T \label for2"direccion" style23top:#0px  53TOireccion:\AlabelT \input type2"text" id2"direccion" style23top:5#px  53T\AinputT\brT \^--Campo para introducir el nmero de teléfono--T \label for2"teleono" style23top:$5px  53TGelefono:\AlabelT \input type2"text" id2"teleono" style23top:$1px  54idth:70px  53T\brT \^-- Campo para seleccionar el se1o--T \label style234idth:45px  5top:110px  53T(e1o:\AlabelT \input type2"radio" name2"sexo" id2"sexo1" chec_ed style23top:110px  5left:70px  5cursor:  pointer  53T \label for2"sexo1" style23top:110px  5left:%5px  5cursor:  pointer  3T   Hasculino\AlabelT \input type2"radio" name2"radio" id2"sexo2" style23top:110px  5left:1#5px  5cursor:  pointer  3T \label for2"sexo2" style23top:110px  5left:1$0px  5cursor:  pointer  53T   Semenino\AlabelT\brT \^--Xotón para mandar los datos al ser$idor--T \input type2"sub!it" id2"guardar" $alue2"&uardar" style23top:140px  5left:115px  5cursor:  pointer  53T \AformT \AbodyT \AhtmlT En este caso propiedades han de la p%gina y asignadas en la

los estilos C(( se han aplicado en dos formas: a 0lgunas sido fijadas dentro de la etiqueta \styleT del encabe#ado b las propiedades específicas de cada elemento han sido etiqueta del elemento +con el atributo style!.

)bser$e que las propiedades comunes a los elementos label! e input!, así como todas las propiedades del elemento form! +que es el nico elemento form! en esta p%gina han sido asignadas dentro de la etiqueta \styleT.

EST RUC TUR AS DE DAT OS

- 129 -

En realidad, dentro de la etiqueta \styleT es posible asignar todas la propiedades de todos los elementos de la p%gina, pues C(( cuenta con $arias mecanismos para seleccionar elementos específico, por ejemplo, si un elemento tiene asignado un identificador +se le ha asignado el atributo id!, puede ser seleccionar con el símbolo `! seguido de dicho id!. Esta es la forma que recomiendan $arios autores +pues de esa manera se separan las instrucciones FGH& de los estilos C((. En este ejemplo, sin embargo, sólo se asignan las propiedades comunes a todos los elementos dentro de la etiqueta style!, mientras que las propiedades específicas de cada elemento se asignan dentro de las etiquetas de los elementos. Fasta ahora los elementos FGH& han sido dejados tal como los presenta el na$egador. Ello es suficiente para una aplicación de uso personal, pero no para una aplicación comercial o institucional, donde los usuarios esperan $er los elementos alineados y correctamente distribuidos. "ara alinear los elementos en una p%gina e1iste, como casi siempre ocurre en programación, diferentes alternati$as, en este ejemplo se ha fijado la propiedad position! de los objetos label! e input! en absolute!. Cuando un elemento est% en posición absoluta, puede ser colocado en una posición específica con relación a su contenedor. "ara ello se emplean principalmente las propiedades left! +i#quierda, top! +arriba, height! +alto y 4idth! +ancho +tal como se puede $er en el ejemplo. 0briendo la p%gina FGH& en un na$egador se obtiene algo parecido a:

)bser$e también que el puntero cambia a una mano con un dedo apuntando cuando se encuentra sobre el botón o las opciones Hasculino! o Semenino!. Esto se debe a que se ha asignado el $alor pointer! a la propiedad cursor! de dichos elementos. E1isten $arios tipos de cursores que se pueden emplear en esta propiedad +crosshair, e-resi#e, 4-resi#e, n-resi#e, s-resi#e, help, mo$e, progress, te1t, 4ait, etc. mismos que constituyen una ayuda $isual para los usuarios, por lo que es con$eniente emplearlos en las aplicaciones. "or otra parte, el botón que aparece en el formulario es de tipo submit!, este botón en$ía los $alores de los campos al ser$idor Lnternet +algo que se estudiar% en temas posteriores.

6..

EJEMPLO

1. E*+&', 0* */-*- 0, ,,', 377 ',-8'&8 *,*&'-&8 & &8 8-9 0-,,8 */&8: &+', &/,&; <-',-; ,=%&&; *', <, -<,-9 <*<  %,?* <, *--,&. L* */-*- <,+, &8'*' &8 ',-8'&8 , 0 %&'0*'-&  /,'--' ',&'','&8 ?*-* *<,*, & ?*-* *'@8 0&  /&' 0&; *8 && -' * /'-,' ',-8'& & * B-&  * 0 B,'& <, ',9

- 13 -

Hernán Peñaranda V.

-8'& ,8/,%-&. El código elaborado para resol$er el problema es el siguiente: \^O)CG"E htmlT \htmlT \headT \meta name2"vieport" content2"width=device-width, initial-scale=1" T \titleTEjemplo 7\AtitleT \script src2"sis101'(s"T\AscriptT \scriptT

%0-&   Negistro+nombre,direccion,telefono,ci,f>nacimiento? ?-8.nombre2nombre5 ?-8.direccion2direccion5 ?-8.telefono2telefono5 ?-8.ci2ci5 ?-8.f>nacimiento2f>nacimiento5 @

%0-&  generarNegistro+? *' apellido72generar0pellido+5 *' apellido82generar0pellido+5 *' nombre72 round+random+7 W generar*ombreS+:generar*ombreH+5 *' nombre2apellido7M3 3Mapellido8M3 3Mnombre75 *' direccion2generarCalle+M 3 3Mround+random+7,76665 *'  telefono2round+random+96666,K6666MD8I666665 *' ci2round+random+76666,KKKKKM76666665 *' f>nacimiento2round+random+7,8IM 3A3Mround+random+7,78M 3A3Mround+random+7KD6,86665 ',0' ,  Negistro+nombre,direccion,telefono,ci,f>nacimiento5 @

%0-&  mostrarNegistro+r?            

document.getElementXyLd+ 3numreg3.$alue2ra5 document.getElementXyLd+ 3nombre3.$alue2r.nombre5 document.getElementXyLd+ 3direccion3.$alue2r.direccion5 document.getElementXyLd+ 3telefono3.$alue2r.telefono5 document.getElementXyLd+ 3ci3.$alue2r.ci5 document.getElementXyLd+ 3f>nacimiento3.$alue2r.f>nacimiento5 @

%0-&  iniciali#ar+?  

nr29665AA*mero de registros *' t1t2335 %&' +*' i265i\nr5iMM? t1tM23\option $alue23MiM3T3MiM3\AoptionT3 @ document.getElementXyLd+ 3numreg3.innerFGH&2t1t5 registro 2 , 0rray+9665AANegistros generados %&' +*' i265i\nr5iMM registroi/2generarNegistro+5 ra265AA*mero de registro actual mostrarNegistro+registrora/5

          @

EST RUC TUR AS DE DAT OS

%0-&  primerNegistro+?    

ra265 mostrarNegistro+registrora/5 @

%0-&  siguienteNegistro+? ra 2 +ra\nr-7 W raM7 : 75 mostrarNegistro+registrora/5

  @

%0-&  anteriorNegistro+? ra 2 +raT6 W ra-7 : nr-75 mostrarNegistro+registrora/5

  @

%0-&  ultimoNegistro+?    

ra2nr-75 mostrarNegistro+registrora/5 @

%0-&  enesimoNegistro+n?    

ra2n5 mostrarNegistro+registrora/5 @ \AscriptT \style type2"text/css"T  ? %&'  4idth:40px  5 height:220px  5 bac_ground-color :light)ellow  5 border-4idth:5px  5 border-style:groove5 border-color:light)ellow  5 padding:10px  5 @ *+, ? position:absolute5 color:red  5 font-4eight:bold  5 4idth:110px  5 te1t-align:right5 @ -/0 ? position:absolute5 color:blue5 font-4eight:bold  5 left:140px  5 @ -/0type2button/? top:220px  5 4idth:50px  5 cursor:  pointer  5 @ \AstyleT

- 131 -

- 132 -

Hernán Peñaranda V.

\AheadT \body onload23iniciali#ar+3T \form id2"or!1"T \label for2"nu!reg" style23top:96p153T* de registro:\AlabelT \select id2"nu!reg" style23position:absolute5top:0px  5left:140px  53 onchange2"enesi!o*egistro+parsent+this'value" T \AselectT\brT \label for2"no!bre" style23top:#0px  53T*ombre:\AlabelT \input type2"text" id2"no!bre" style23top:#0px  54idth:200px  53T\brT \label for2"direccion" style23top:%0px  53TOirección:\AlabelT \input type2"text" id2"direccion" style23top:%0px  54idth:200px  53T\brT \label for2"teleono" style23top:120px  53TGeléfono:\AlabelT \input type2"text" id2"teleono" style23top:120px  54idth:100px  53T\brT \label for2"ci" style23top:150px  53T* de carnet:\AlabelT \input type2"text" id2"ci" style23top:150px  54idth:100px  53T\brT \label for2".naci!iento" style23top:1$0px  53TS. *acimiento:\AlabelT \input type2"text" id2".naci!iento" style23top:1$0px  54idth:100px  53T\brT \input type2"button" $alue2"" style23left:100px  53 onclic_23primerNegistro+3 T

 

\input type2"button" $alue2"" style23left:150px  53 onclic_23anteriorNegistro+3 T \input type2"button" $alue2"" style23left:200px  53 onclic_23siguienteNegistro+3 T \input type2"button" $alue2"" style23left:250px  53 onclic_23ultimoNegistro+3 T

\AformT \AbodyT \AhtmlT =ue al ser abierta en un na$egador, tiene la siguiente apariencia:

EST RUC TUR AS DE DAT OS

- 133 -

Como se puede $er, para na$egar a tra$és de los registros se han empleado cuatro botones. "ara mostrar el nmero de registro actual, como para ir a un registro específico se ha empleado un select! en cuyo e$ento onchange! se ha programado el salto al registro respecti$o. &as opciones de este elemento +las 966 opciones se generan en la función iniciali#a! que es llamada cuando la p%gina termina de ser cargada +e$ento onload de body!. Lgualmente, los 966 registros son generados en la función iniciali#ar! llamando a la función generarNegistro!, la cual a su $e# hace uso del constructor Negistro! y de las funciones generar0pellido!, generar*ombreS!, generar*ombreH! y generarCalle! de la librerías sis767.js!. &os nmeros de teléfono, carnet de identidad y la fecha de nacimiento, al ser nmeros, se generan con la función random!. Sinalmente, para mostrar los resultados en el formulario se llama a la función mostrarNegistro! que recibe como dato el registro a mostrar. )bser$e que las $ariables nr! +nmero de registros, ra! +registro actual y registro! +el $ector con los registros generados son $ariables globales +no han sido declaradas con $ar!, se ha procedido así para que dichas $ariables puedan ser empleadas desde otras funciones +como primerNegistro!, siguienteNegistro!, etc. En cuanto a los estilos, con la intención de demostrar uno de los mecanismos de selección de C((, se ha empleado inputtype2button/! con esta instrucción se crea un estilo para los elementos input! que tengan el atributo type! igual a button! +que en este ejemplo son los botones de na$egación. Este mecanismo de selección se puede emplear con cualquier atributo y puede tener un $alor asignado +como en el ejemplo o simplemente el nombre del atributo, por ejemplo si se escribe labelfor/! el estilo se aplica a todos los elementos label! que tienen el atributo for! +sin importar el $alor que tengan asignado, es posible también seleccionar elementos que tengan un atributo con un $alor diferente al designado, por ejemplo inputsi#e286/! aplica el estilo a todos los elementos input! cuyo atributo si#e! sea diferente de 86. En este ejemplo no se ha $alidado la introducción de datos porque los campos son generados +no introducidos manualmente. En una aplicación real se tienen que $alidar los datos introducidos.

- 134 -

Hernán Peñaranda V.

6.17. EJERCICIOS "ara presentar los ejemplos y ejercicios del tema, debe crear una carpeta con el nombre tema;! y guardar en la misma todos los archi$os FGH& creados +ejemplos y ejercicios. 7. Elabore una aplicación que genere ;66 registros aleatorios, correspondientes a estudiantes de la Sacultad de Gecnología, con los siguientes campos: apellido paterno, apellido materno, nombres +7 o 8, dirección y carnet uni$ersitario con los id! de hasta 9 carreras +98, 9;, 9D. &a aplicación debe mostrar los registros en un formulario y permitir recorrerlos hacia adelante o hacia atr%s uno por uno, así como ir al primer registro o al ltimo y a un nmero de registro específico. 8. Elabore una aplicación que genere 66 registros aleatorios, correspondientes a las calificaciones de hasta ; asignaturas, con los siguientes campos: nombre completo, sigla de la asignatura, nota +entre 7 y 766 y estado +aprobado o reprobado. &a aplicación debe mostrar los registros en un formulario y permitir recorrerlos hacia adelante o hacia atr%s uno por uno, así como ir al primer registro o al ltimo y a un nmero de registro específico. 9. Elabore una aplicación que genere 9;6 registros aleatorios, correspondientes a la nómina de trabajadores de una empresa, con los siguientes campos: nombre completo +con uno o dos apellidos y uno o dos nombres, se1o +masculinoAfemenino, dirección y fecha de nacimiento +entre 7K<6 y 7KK6. &a aplicación debe mostrar los registros generados en una tabla donde cada campo corresponda a una columna y cada fila a un registro. En la tabla la primera fila debe mostrar los nombres de los campos en a#ul, negrita, centrado, sobre fondo $erde claro, y los registros deben ser mostrados en $erde, intercalando el color del fondo de las filas entre amarillo claro y cian claro. . Elabore una aplicación que genere <66 registros aleatorios, correspondientes a los artículos de una ferretería, con los siguientes campos: nombre del artículo, costo unitario, precio unitario y cantidad. &a aplicación debe mostrar los registros generados en un formulario y permitir recorrerlos hacia adelante o hacia atr%s uno por uno, así como ir al primer registro o al ltimo y a un nmero de registro específico. "ara generar los nombres de los artículos debe crear un dominio +y su correspondiente función generadora con por lo menos ;6 artículos. ;. Elabore una aplicación que genere ;;6 registros aleatorios, correspondientes a los artículos de una farmacia, con los siguientes campos: nombre del producto, tipo de $enta +con receta o sin receta, costo unitario, precio unitario y cantidad. &a aplicación debe mostrar los registros generados en una tabla donde cada campo corresponda a una columna y cada fila a un registro. En la tabla la primera fila debe mostrar los nombres de los campos en rojo, negrita, centrado sobre fondo a#ul claro, y los registros deben ser mostrados en a#ul oscuro, intercalando el color del fondo de las filas entre $erde claro y a#ul claro. "ara generar los nombres de los productos debe crear un dominio +y su correspondiente función generadora con por lo menos ;6 productos.

ORDENACIÓN

- 135 -

7. 7. ORDENACIÓN Como una aplicación de las estructuras estudiadas en los anteriores temas, en este se estudian algunos métodos de ordenación. Es conveniente comenzar con la definición de este término: ordenar es arreglar los elementos de una lista de acuerdo a un determinado criterio. Por ejemplo para ordenar ascendentemente números reales, el criterio es que todos los elementos anteriores a un número dado sean menores o iguales al dico número ! que los posteriores sean ma!ores o iguales al mismo. "i el o#jetivo es ordenar descendentemente los elementos de un vector con nom#res, el criterio ser$a que todos los elementos anteriores a un determinado nom#re sean alfa#éticamente, ma!ores o iguales a dico elemento ! que todos los posteriores sean menores o iguales al mismo. En la ma!or$a de los casos pr%cticos los elementos de un vector son ordenados para que sus elementos estén en orden ascendente o descendente. Es por ello que los métodos que se estudiar%n en este cap$tulo permiten ordenar los vectores en una de estas dos formas. En general los métodos de ordenación se clasifican en dos grupos: a& 'os métodos directos, que comparan elementos consecutivos ! #& los métodos indirectos, que comparan elementos no consecutivos. En este tema se estudian tres métodos directos: Burbuja, Selección e Inserción ! dos indirectos Shell ! Quick-Sort. Con listas peque(as )de asta unos *+++ elementos& no eiste ma!or diferencia entre un ! otro método, pero a medida que incrementa el número de elementos la diferencia entre el tiempo consumido por los métodos directos e indirectos incrementa ! con listas de cientos de miles o millones de elementos, las diferencias son tan grandes que los métodos directos pueden requerir d$as ! asta semanas para ordenar una lista mientras que los métodos indirectos llevan a ca#o la misma la#or en minutos o segundos. En todos los métodos se eplica el procedimiento que se sigue para ordenar ascendentemente números enteros, sin em#argo los mismos principios se aplican para ordenar cualquier tipo de elemento ! para cam#iar el orden simplemente cam#ia el criterio de ordenación.

7.1.  MÉTODO MÉTODO DE BURBUJA  El fundamento de este método consiste en llevar el mayor valor de la lista a la última posición . Para ello se comparan pares consecutivos de elementos )comenzando con los dos primeros& ! se realiza un intercam#io si el primer elemento es ma!or que el segundo, luego se comparan los dos siguientes )el segundo con el tercero& ! as$ asta comparar los dos últimos. na vez que se aplica el anterior procedimiento el ma!or valor queda en la última posición, por lo tanto el último elemento queda ordenado. Entonces se repite el proceso con los n-*/ elementos restantes )con lo que se queda ordenado el penúltimo elemento& ! se continúa as$ asta que sólo queda un elemento en la lista. Por ejemplo para ordenar el siguiente vector:

x1

x2

x3

x4

x5

5

4

2

1

3

"e comienza comparando los dos primeros valores )0 con 1& ! como el primero )0& es ma!or que el segundo )1&, se realiza un intercam#io de varia#les:

- 136 -

Hernán Peñarand a V.

x1

x2

x3

x4

x5

5

4 5

2

1

3

4

2ora se compara el segundo con el tercer elemento )0 con 3& ! como el primero es ma!or al segundo se realiza otro intercam#io de varia#les:

x1

x2

4

5

2

x3

x4

x5

2 5

1

3

"e continúa entonces con el tercer ! cuarto elemento )0 ! *& ! como una vez m%s el primero es ma!or que el segundo se realiza un intercam#io:

x1

x2

x3

4

2

5

1

x4

x5

1

3

5

4inalmente se compara el cuarto ! quinto elemento )0 con 5& ! se realiza otro intercam#io:

x1

x2

x3

x4

4

2

1

5

x5 3

3

5

Con ello termina el proceso !, como se puede o#servar, el ma!or valor queda en la última posición:

x1

x2

x3

x4

x5

4

2

1

3

5

2ora, para ordenar los elementos restantes, simplemente se repite el anterior proceso sin tomar en cuenta el último elemento, pues !a est% ordenado:

x1

x2

x3

x4

x5

4

2 41

1 43

3

5

2

4

Con lo que el penúltimo elemento queda ordenado:

x1

x2

x3

x4

x5

2

1

3

4

5

"e repite una vez m%s el proceso )sin tomar en cuenta los dos últimos elementos que !a est%n ordenados&:

x1

x2

x3

x4

x5

2

1 2

3

4

5

1

Con lo que el tercer elemento queda ordenado:

x1

x2

x3

x4

x5

1

2

3

4

5

4inalmente se comparan los dos elementos restantes )el primer con el segundo&:

ORDENACIÓN

- 137 -

x1

x2

x3

x4

x5

1

2

3

4

5

6 como no a! intercam#ios se sa#e que el segundo elemento est% ordenado:

x1

x2

x3

x4

x5

1

2

3

4

5

2ora, como sólo queda un elemento, la lista !a est% ordenada. 2l aplicar el método de #ur#uja puede suceder que la lista quede ordenada antes de repetir el proceso n-1 veces )inclusive la lista puede estar ordenada desde un principio&. En el método de #ur#uja se sa#e que la lista est% ordenada cuando al aplicar el proceso no se produce ningún intercam#io. Por ejemplo si la lista a ordenar es la siguiente:

x1

x2

x3

x4

x5

x6

x7

1

2

7

3

4

5

6

2plicando el procedimiento de #ur#uja una vez se tiene:

x1

x2

x3

x4

1

2

7 3

3

x5 4

74

x6 5

75

x7 6

76

7

Con lo que el vector queda ordenado:

x1

x2

x3

x4

x5

x6

x7

1

2

3

4

5

6

7

"i se vuelve a aplicar el método a esta lista:

x1

x2

x3

x4

x5

x6

x7

1

2

3

4

5

6

7

7o se produce ningún intercam#io, lo que indica que la lista !a est% ordenada. En consecuencia si al repetir el método de #ur#uja no se produce ningún intercam#io se sa#e que la lista !a est% ordenada.

7.1.1.  Algoritmo  El algoritmo para ordenar de forma ascendente los elementos de una lista, se deduce f%cilmente de la anterior eplicación ! se presenta en forma de diagrama de actividades en la siguiente p%gina. Para pro#ar este algoritmo, se a creado una p%gina que ordena una lista de *+++ números enteros, generados al azar ! comprendidos entre * ! 3+++. 89;C<6PE tml= 8tml= 8ead= 8meta name>"viewport" content>"widthdevice-width! initial-scale1"= 8title=?ur#uja8@title=

- 138 -

Hernán Peñarand a V.

"#r"#$a% Ordena a&enden'e(en'e )*& e)e(en'*& de) +e'*r ,x. re!"!r x n  N/ de e)e(en'*& en x 0n 0e)&e de&de !n-1 a&'a 1 &  +erdad de&de $ a&'a !-1 0e)&e

 $  $1

0x $x $1 a#xx $ x $x $1 x $1a#x &  a)&* !  !1

0e)&e 0&

8script src>"sis11#js"=8@script= 8script=

function  #ur#uja)&A var i,j,au,n>.lengtB if )n>>+& return B for )i>n-*Bi=+Bi--&A s>trueB for )j>+Bj8iBj& if )Dj=Dj*&A au>DjB Dj>Dj*B Dj*>auB s>faleB F if )s& !rea"B F F

function  generar)&A  > round)rand)*+++,*,3+++&&B document.getElement?!Gd)Hvect*H&.innerI B

  F

function  ordenar)&A var t*>ne# ate)&B  

#ur#uja)&B var t3>ne# ate)&B var dt > t3.getB document.getElement?!Gd)HtiempoH&.value>dtH milisegundosHB

    F

ORDENACIÓN

- 13 -

8@script= 8st!le= in$utDt!pe>H#uttonH A #acKground-color:li$htblueB margin-left:1p%  B cursor:  pointer  B F in$utDt!pe>HtetH A color:red  B #acKground-color:li$htc&anB F la!el A color:blueB F te%tarea  A color: $reenB Lidt:'(p%  B eigt:(p%  B #acKground-color:li$ht&ellow  B F 8@st!le= 8@ead= 8#od! onload>Hgenerar)&H= 8input t!pe>"button" value>")enerar *ector" onclicK>Hgenerar)&H=8#r= 8la#el for>"vect1"=Mector Nenerado:8@la#el=8#r= 8tetarea id>"vect1"=8@tetarea=8#r= 8input t!pe>"button" value>"+rdenar *ector" onclicK>Hordenar)&H=8#r= 8la#el for>"vect("=Mector ;rdenado:8@la#el=8#r= 8tetarea id>"vect("=8@tetarea=8#r= 8la#el for>"tiempo"="te%t" id>"tiempo"= 8@#od!= 8@tml= 2l a#rir esta p%gina en un navegador, se puede ver una interfaz con una apariencia similar a la que se muestra en la siguiente p%gina. ;#serve que el vector se genera ! guarda en la varia#le glo#al / )es glo#al porque no a sido declarada con la pala#ra var/ por delante&, al ser glo#al, puede ser empleada desde cualquiera de las funciones, siendo esa la razón por la cual puede ser empleada directamente en la función ordenar/. Para determinar el tiempo que demora el método en ordenar los elementos, se an empleado o#jetos ate/. Estos o#jetos permiten tra#ajar con valores de tiempo !@o feca en Oavascript. "i se crea un o#jeto ate/ sin ningún argumento )como se a eco en el ejemplo&, contiene la feca ! ora actuales, por esa razón en el ejemplo se crea el o#jeto t*/ antes de llamar al método de ordenación ! se crea el o#jeto t3/ cuando el método devuelve la lista ordenada, entonces, para o#tener el tiempo transcurrido entre la llamada ! la devolución del resultado, se emplea el método get
- 14 -

Hernán Peñarand a V.

Como se puede ver, en listas peque(as como esta )con solo *+++ elementos& el tiempo requerido es tam#ién peque(o, sin em#argo a medida que incrementa el número de elementos el tiempo incrementa pero no en forma lineal, sino en forma geométrica, as$ para ordenar *++++ elementos se requiere alrededor de 5Q+ milisegundos, es decir RQ1 veces lo que requiere ordenar *+++ elementos9. "i la relación fuera lineal, ordenar *++++ elementos de#er$a tomar unos 0+ milisegundos, no 5Q+ )por supuesto el tiempo real empleado var$a de computadora a computadora&. Por otra parte, cuando se generan números aleatorios, por quiere que los mismos sean realmente aleatorios, es decir )como a ocurrido asta aora&, sin em#argo, para comparar la dos o m%s métodos, es necesario contar con la misma serie de de lo contrario la comparación no ser$a correcta ! se podr$a clusiones erróneas.

lo general se impredeci#les eficiencia de valores, pues llegar a con-

Con ese fin se de#en generar números pseudoaleatorios, es decir secuencias de números que pueden ser reproducidas. Oavascript no cuenta con un generador pseudoaleatorio, por lo que se a a(adido uno a la li#rer$a sis*+*.js/. Para activar este generador, se de#e iniciar la varia#le glo#al randseed/ asign%ndole un valor diferente de nulo )null&, dico número, conocido como semilla )seed&, se emplea como #ase para generar la secuen-

ORDENACIÓN

- 141 -

cia de números pseudoaleatorios, por lo que es posi#le reproducir dica secuencia volviendo a asignar el mismo número )la misma semilla& a la varia#le randseed/. Por ejemplo, en las siguientes instrucciones se inicia la semilla en 0 ! se generan *+ número aleatorios comprendidos entre * ! *+ ! redondeados al cuarto d$gito después del punto, se o#tiene: randseed>0 &&  0

&&  round)rand)*+,*,*+&,1& D1.SS*, .+++Q, 0.Q*T, T.5305, 0.0S1, 1.1*T0, *.*T5T, 3.5*3, .T1S1, 0.+3*1

Para volver a reproducir esta serie de números, se vuelve a iniciar la semilla en 0: randseed>0 &&  0 round)rand)*+,*,*+&,1& &&  D1.SS*, .+++Q, 0.Q*T, T.5305, 0.0S1, 1.1*T0, *.*T5T, 3.5*3, .T1S1, 0.+3*1

Con lo que se o#tiene, como se puede ver, la misma serie. Para desactivar el generador de asignar el valor nulo a la semilla:

números pseudoaleatorios,

se

vuelve

a

&&  randseed>null null &&  round)rand)*+,*,*+&,1& D1.T55Q, Q.*53Q, S.*+T0, 5.*S35, .S13, 0.0510, S.++*S, 1.35S0, S.5T50, 5.0Q0S

Con lo que, como se puede ver, la serie no se repite. En este tema, para comparar los diferentes métodos se iniciar% la semilla en *+.

7.'.  MÉTODO MÉTODO DE (E)ECCIÓN El fundamento de este método consiste en seleccionar el mayor valor de la , de esta manera )al igual que lista e intercambiarla con el último elemento  sucede con el método de Burbuja&, el ma!or valor queda en la última posición. 'uego, al igual que en el método de #ur#uja, el proceso se repite sin tomar en cuenta el último elemento )que !a est% ordenado& ! se continúa as$ )sin tomar en cuenta los elementos !a ordenados& asta que en la lista que da un elemento. Por lo general, este método es m%s eficiente que el de #ur#uja porque implica menos intercam#ios, sin em#argo, en este método no a! modo de sa#er si en algún momento la lista !a esta#a ordenada, por lo que el mismo se repite n-*/ veces inclusive, si la lista queda ordenada en el proceso o !a esta#a ordenada desde un principio. Para comprender mejor el método se ordenar% la siguiente lista aplicando el método.

x1

x2

x3

x4

x5

5

4

2

1

3

Primero se selecciona el ma!or de valor de la lista )el número 0& ! se intercam#ia con el último elemento:

- 142 -

Hernán Peñarand a V.

x1 5

x2

x3

x4

x5

4

2

1

3

3

5

Entonces se repite el procedimiento sin tomar en cuenta el último elemento )pues !a est% ordenado&:

x1

x2

3

4

x3

x4

2

1

1

x5 5

4

2ora los dos últimos elementos !a est%n ordenados, por lo que se repite el proceso con los 5 elementos restantes:

x1 3

x2

x3

1

2

2

3

x4

x5

4

5

4inalmente se repite el proceso con los dos elementos restantes:

x1 2

x2 1

1

x3

x4

x5

3

4

5

2

2ora al quedar un sólo elemento, la lista !a est% ordendada:

x1

x2

x3

x4

x5

1

2

3

4

5

7.2.1.  Algoritmo  El algoritmo para ordenar ascendentemente los elementos de una lista se muestran en la siguiente p%gina. 'a p%gina escrita para pro#ar este algoritmo, con una lista de números enteros, es esencialmente la misma que para el método de ?ur#uja, cam#iando o#viamente el método, la llamada al método ! la generación de números, que como se dijo, ser% de *++++ números pseudoaleatorios )con una semilla de *+&. icos cam#ios son los siguientes:

function  seleccion)&A var i,j,au,n>.lengtB if )n>>+& return B for )i>n-*Bi=+Bi--&A  

K>+B

for )j>*Bj8>iBj& if )Dj=DK&K>jB if )K9>i& A au>DKB DK>DiB Di>auB F F F

function  generar)&A    

randseed>*+B  > round)rand)*++++,*,*++++& &B document.getElement?!Gd)Hvect*H&.innerI B

ORDENACIÓN

- 143 -

&e)e!*n% 9:'*d* de ;e)e!
x% Ve'*r a *rdenar.

n  N/ de e)e(en'*& en x 0n

de&de !n-1 a&'a 1 = de&de $1 a&'a !  $  $1

0e)&e 0x $ x= =$

0=>! 0e)&e

a#xx= x=x! x= a#x

!  !-1

   

document.getElement?!Gd)Hvect3H&.innerI HHB document.getElement?!Gd)HtiempoH&.value > HHB F

function  ordenar)&A var t*>ne# ate)&B  

seleccion)&B

var t3>ne# ate)&B var dt > t3.get
document.getElement?!Gd)Hvect3H&.innerI B document.getElement?!Gd)HtiempoH&.value>dtH milisegundosHB F

2#riendo la p%gina ! ordenando la lista, el tiempo requerido es de aproimadamente 3*+ milisengudos, es decir casi 3 veces menos )*.Q veces menos& que el método de ?ur#uja )aunque, como se a eplicado, esta diferencia no siempre es a favor del método de selcción&. Este método, el de ?ur#uja ! todos los métodos de ordenación que se estudiar%n en este tema pueden ser implementados de forma recursiva. El razonamiento recursivo para ordenar una lista por el método de selección es el siguiente: na lista puede ser ordenada #uscando su ma!or valor e intercam#i%ndolo con el último elemento, mandando luego la lista restante )sin su último elemento& a ser ordenada por el método de "elección. En el caso del método de ?ur#uja el razonamiento recursivo es el siguiente: na lista puede ser ordenada llevando su ma!or valor a la última posición comparando elementos sucesivos e intercam#i%ndolos si el primero es ma!or que el segundo, mandando luego la lista restante )sin su último elemento& a ser ordenando por el método de ?ur#uja. 7ote que en am#os métodos el razonamiento implica una llamada al mismo método.

- 144 -

Hernán Peñarand a V.

El algoritmo recursivo para ordenar ascendentemente listas por el método de "elección es el siguiente: &e)e!*n% 9:'*d* de ;e)e!
re!"!r x

n  n?(er* de e)e(en'*& en x 0n>2

&e)er@nA

&e)er% 9:'*d* de ;e)e!
re!"!r n

0e)&e 0n1 = de&de !1 a&'a n-1 !  !1

0e)&e 0x!x= =! 0=>n-1 0e)&e

a#xxn-1 x n-1x=  x= a#x

&e)er@n-1A

;#serve que en el algoritmo recursivo selecr/ es una su#-función del módulo principal seleccion/, como se recordar%, el s$m#olo , informa que se trata de una función anidada. 'a capacidad de crear una función dentro de otra )funciones anidadas& es una caracter$stica propia de los lenguajes que soportan la metodolog$a de Programación Estructurada ! es una de las erramientas con las que se logra el encapsulamiento en esta metodolog$a, es decir evitar que varia#les eternas interfieran con varia#les locales ! evitar interferir con varia#les eternas. na función anidada puede acceder a todas las varia#les )! par%metros& de la función que la contiene, pero la función contenedora no puede acceder a las varia#les de la función anidada, en contrapartida, las varia#les de la función anidada no interfieren con las varia#les de la función contenedora. Es gracias a estas caracter$sticas que la función recursiva selecr/ puede tra#ajar con el vector / sin que sea un par%metro de la misma )sin necesidad de que se le mande el vector /&, selecr/ puede acceder al vector

ORDENACIÓN

- 145 -

/ porque al ser una función anidada tiene acceso a todas las varia#les de la función contenedora. e esa manera, la función recursiva sólo reci#e el único dato que realmente var$a en el proceso recursivo: el número de elementos n/. Para pro#ar el algoritmo recursivo ! como una forma de demostrar que este algoritmo )como cualquier otro& no est% limitado a números, sino que puede ser aplicado a cualquier tipo de dato, se crear% una p%gina I"viewport" content>"widthdevice-width! initial-scale1"= 8script src>"sis11#js"=8@script= 8title="eleccion - Ejemplo 38@title= 8script=

function seleccion)&A var i,K,auB function  selecr)n&A if )n=*&A var K>+B for )i>*Bi8nBi& if )Di.nom#re=DK.nom#re& K>iB if )K9>n-*&A  

au>Dn-*B Dn-*>DKB DK>auB F selecr)n-*&B F

  F

var n>.lengtB if )n=*& selecr)n&B F

function   Uegistro)nom#re,direccion,telefono&A t*i.nom#re > nom#reB t*i.direccion > direccionB t*i.telefono > telefonoB F

function  generar7om#re)&A var s>generar2pellido)&B if )random)*&& s>H Hgenerar2pellido)&B if )random)*&& s>H Hgenerar7om#re4)& ele s>H Hgenerar7om#reJ)&B return  sB F

function  generarireccion)&A var s>generarCalle)&B s>H 7V Hround)random)*,*+++&&B

return  sB F

- 146 -

Hernán Peñarand a V.

function  generar
function  generarUegistros)&A randseed > *+B r > ne# 2rra!)*+++& for )var i>+Bi8*+++Bi&A rDi > ne#  Uegistro)generar7om#re)&,generarireccion)&, generar
  F

function  llenar
generarUegistros)&B var teto>H8tr=8t=7om#re8@t=8t=irección8@t=H H8t=+Bi8r.lengtBi&A teto> odd)i& W H8tr fila>XimparX=H : H8tr fila>XparX=HB teto>H8td=HrDi.nom#reH8@td=H H8td=HrDi.direccionH8@td=H H8td=HrDi.telefonoH8@td=8@tr=HB F document.getElement?!Gd)Hta#la*H&.innerItetoB

 

  F

function  ordenar
seleccion)r&B

var teto>H8tr=8t=7om#re8@t=8t=irección8@t=H H8t=+Bi8r.lengtBi&A teto> odd)i& W H8tr fila>XimparX=H : H8tr fila>XparX=HB   teto>H8td=HrDi.nom#reH8@td=H H8td=HrDi.direccionH8@td=H H8td=HrDi.telefonoH8@td=8@tr=HB F   document.getElement?!Gd)Hta#la*H&.innerItetoB F 8@script= 8st!le t!pe>"te%t,css"=  !utton A color:mediumblueB font-Leigt:bold  B #acKground-color:owderBlueB F ta!le A color:.orest)reenB #order-st!le:doubleB #order-Lidt:'p%  B #order-collapse:collapseB F  A t+  #order-st!le:solid  B #order-Lidt:1p%  B

ORDENACIÓN

- 147 -

F

t* A color:chocolateB font-Leigt:bold  B #acKground-color:/00B #order-st!le:solid  B #order-Lidt:1p%  B #order-color:blackB F

trDfila>HimparH A #acKground-color:/....  B F

trDfila>HparH A #acKground-color:/..00B F 8@st!le= 8@ead= 8#od! onload>HllenarHllenarHordenar"tabla1" = 8@ta#le= 8@#od!= 8@tml= Como se puede ver, el algoritmo en s$ no cam#ia, lo único que es necesario tomar en cuenta cuando se ordenan registros, en lugar de datos simples, es que al comparar los valores sólo se compara él o los campos, por los que se ordenan )en este caso el campo nom#re/&. 2l a#rir la p%gina se llena la ta#la con los *+++ registros generados )el cual puede volver a ser generado aciendo clic en el #otón generar/&, para ordenar estos registros se ace clic en el #otón ordenar/ con lo que los mismos quedan ordenados por el campo nom#re/:

En realidad, el resultado no es del todo correcto de#ido a que, por defecto, la comparación de cadenas en Oavascript no funciona correctamente con letras acentuadas ! caracteres especiales como la letra (/.

7.,.  MÉTODO MÉTODO DE IN(ERCIÓN El fundamento de este método consiste en insertar un elemento en su posición correcta con relación a los elementos que se encuentran antes del mis-

- 148 -

Hernán Peñarand a V.

. Cuando la lista est% totalmente desordenada, el método comienza con el  mo  segundo elemento ! continúa insertando elementos, en su posición correcta, asta llegar al último elemento. En la pr%ctica este método se emplea principalmente para insertar nuevos elementos en listas !a ordenadas, no o#stante, en este tema se implementa el método de manera que permita ordenar listas completas. Para comprender mejor el método se ordena el siguiente vector:

x1

x2

x3

x4

x5

5

14

-2

1

3

"e comienza con el segundo elemento )que tiene el valor *1& ! como es ma!or al primero se encuentra !a en su posición correcta con relación al elemento anterior, por lo que es insertado directamente en la segunda posición:

x1

x2

x3

x4

x5

5

14

-2

1

3

2ora se pasa al tercer elemento )que tiene el valor -3& ! como es menor a los dos anteriores, es insertado en la primera posición, desplazando los elementos anteriores una posición acia la dereca:

x1

x2

x3

x4

x5

5

14

-2

1

3

Con ello los tres primeros elementos quedan ordenados:

x1

x2

x3

x4

x5

-2

5

14

1

3

2ora se pasa al cuarto elemento )que tiene el valor *+& ! como este ele mento es menor al tercero, pero ma!or al segundo, de#e ser insertado en la tercera posición:

x1

x2

x3

x4

x5

-2

5

14

1

3

Yuedando los cuatro primeros elementos ordenados:

x1

x2

x3

x4

x5

-2

5

1

14

3

4inalmente se pasa al quinto elemento )que tiene el valor 5& ! como este elemento es menor al segundo, pero ma!or al primero, de#e ser insertado en la segunda posición:

x1

x2

x3

x4

x5

-2

5

1

14

3

Yuedando con ello los 0 elementos ordenados:

ORDENACIÓN

- 14 -

x1

x2

x3

x4

x5

-2

3

5

1

14

7.3.1.  Algoritmo  El algoritmo del método, en forma de diagrama de actividades, es el siguiente: !n&er!*n% 9:'*d* de In&er!
x% Ve'*r a *rdenar.

n  N/ de e)e(en'*& en x 0n

de&de !1 a&'a n-1  $! a#xx! 0$ D a#x>x $-1 

x $x $-1  $$-1

!  !1

0e)&e 0$>! x $  a#x

'a p%gina creada para pro#ar este método, con ecepción del método en s$, es esencialmente la misma que la del anterior, las partes que var$an con relación a dico código son:

function  insercion)&A var i,j,au,n>.lengtB if )n>>+& return B for )i>*Bi8nBi&A j>iB au>DiB

 #*ile )j=+ ZZ au8Dj-*&A  

Dj>Dj-*B j--B F

if )j9>i& Dj>auB F F

function  ordenar)&A var t*>ne# ate)&B  

insercion)&B

var t3>ne# ate)&B var dt > t3.get
document.getElement?!Gd)Hvect3H&.innerIB document.getElement?!Gd)HtiempoH&.value>dtH milisegundosHB F

- 15 -

Hernán Peñarand a V.

El método de inserción requiere aproimadamente *++ milisegundos para or denar los *++++ números, es decir 5.Q veces menos que el método de #ur#uja ! 3.* veces menos que el método de selección. 2l igual que los métodos anteriores, este método puede ser implementado de manera recursiva ! el algoritmo puede ser empleado para ordenar registros en lugar de datos numéricos.

7.-.  MÉTODO MÉTODO (E)) En el método Shell, denominado as$ en onor a su creador 2# 3# Shell, e co/$aran valore 0ue etn e$ara+o entre 2 $or un +eter/ina+o n3/ero +e ele/ento  ! al igual que en el método de #ur#uja si el primer valor es ma!or que el segundo se intercam#ian. 2l número de elementos que separan los valores a comparar se conoce con el nom#re de salto )o  paso& e inicialmente es igual a la mitad )entera& del número de elementos eistentes. "i k es el paso o salto, en el proceso se comparan el primer elemento con el elemento que se encuentra k41 elementos m%s adelante, luego se compara el segundo elemento con el elemento que se encuentra k4( elementos m%s adelante ! as$ sucesivamente asta que se compara el último elemento de la lista, es decir se realiza un total de k-p comparaciones. El anterior procedimiento se repite asta que no ocurre ningún intercam#io, entonces el paso o salto es reducido a la mitad ! el procedimiento se vuelve a repetir )con el nuevo paso& asta que, una vez m%s, no eisten m%s intercam#ios. Cuando esto ocurre se vuelve a reducir el valor del paso a la mitad ! se continúa de esta manera asta que el paso se reduce a *. Para comprender mejor el procedimiento se ordenar% el siguiente vector siguiendo el método "ell:

x1

x2

x3

x4

x5

x6

x7

x8

x

4

2

8

7

12

6

11

15

1

Como el número de elementos es , el paso inicial es @3>1 )división entera&. Entonces se compara el primer elemento con el quinto, el segundo con el seto ! as$ sucesivamente:

x1

x2

x3

x4

x5

4

2

8

7

12

1

x6

x7

x8

x

6

11

15

1

6 como se a producido un intercam#io se repite el procedimiento:

x1

x2

x3

x4

x5

x6

x7

x8

x

4

2

8

7

1

6

11

15

12

2ora no se produce ningún intercam#io, por lo tanto se reduce el paso a la mitad: 1@3>3, ! se vuelve a repetir el proceso empleando este nuevo paso )es decir se compara * con 5, 3 con 1 ! as$ sucesivamente&:

ORDENACIÓN

- 151 -

x1

x2

x3

x4

4

2

8

7

6

x5

x6

1

6

7

x7

x8

x

11

15

12

Como a! intercam#ios se repite el proceso:

x1

x2

x3

x4

x5

x6

x7

x8

x

4

2

8

6

1

7

11

15

12

2ora no se producen intercam#ios, por lo que el paso se reduce a la mitad: 3@3>* ! se repite el proceso con este nuevo paso )se comparan elementos consecutivos: * con 3, 3 con 5, etc.&:

x1

x2

x3

x4

x5

x6

x7

x8

x

42

24

86

68

1 7

7 1

11

15 12

1215

Como a! intercam#ios, se repite el proceso:

x1

x2

x3

x4

x5

x6

x7

x8

x

2

4

6

8 7

7 8

1

11

12

15

na vez m%s a! intercam#ios, por lo que se vuelve a repetir el proceso:

x1

x2

x3

x4

x5

x6

x7

x8

x

2

4

6

7

8

1

11

12

15

2ora no a! intercam#ios ! dado que el paso es *, el proceso conclu!e ! como se puede ver la lista !a est% ordenada. Como !a se dijo, estos métodos son m%s eficientes que los directos porque reducen el número de intercam#ios. 2s$ en el ejemplo se requieren Q intercam#ios, mientras que con Burbuja se a#r$an requerido  ! esta diferencia incrementa geométricamente con el número de elementos.

7.4.1.  Algoritmo  El algoritmo para ordenar listas de forma ascendente se presenta en la siguiente p%gina. El código escrito para pro#ar el mismo, con ecepción del método en s$, es esencialmente el mismo que para los anteriores métodos, siendo las partes que cam#ian las siguientes:

- 152 -

Hernán Peñarand a V.

&e))% 9:'*d* ;e)). x% Ve'*r a *rdenar.

re!"!r x n  N/ de e)e(en'*& en x =  n 0e)&e 0=1 =*!en'e@=E2A &  +erdad de&de ! a&'a n-=-1 !  !1

0e)&e 0x!x!= a#xx!  x!x!= x!=a#x &  a)&*

0e)&e 0&

function  sell)&A var i,j,au,n>.lengt,K>nB  #*ile )K=*& A K > quot)K,3&B

 #*ile )true& A s > trueB for )i>+Bi8n-K-*Bi& if )Di=DiK&A au>DiB Di>DiKB DiK>auB s > faleB F if )s& !rea"B F F F

function  ordenar)&A var t*>ne# ate)&B  

sell)&B

var t3>ne# ate)&B var dt > t3.get
document.getElement?!Gd)Hvect3H&.innerIB document.getElement?!Gd)HtiempoH&.value>dtH milisegundosHB F

El método "ell requiere aproimadamente  milisegundos para ordenar los *++++ números, es decir que en esta lista es 1* veces m%s r%pido que el método de ?ur#uja, 35 veces m%s r%pido que el método de "elección ! ** veces m%s r%pido que el método de inserción. Como todos los métodos puede ser implementado tam#ién en forma recursiva.

ORDENACIÓN

- 153 -

7.4.  MÉTODO MÉTODO 5UIC6(ORT 8OARE9 Este método fue propuesto por # 5# 6oare ! es el método de ordenación m%s eficiente de todos los que se an estudiado asta aora. El mtodo consiste en dividir el vector en dos! uno con elementos menores o iguales a un valor de re"erencia denominado pivote y otro con elementos mayores o igua. les a dic#o valor  El anterior procedimiento se repite con cada uno de los dos vectores resultantes ! luego con cada uno de los vectores resultantes de estos ! as$ sucesivamente asta que cada vector queda con un solo elemento, momento en el cual el vector original queda ordenado. El valor de referencia, el valor pivote, puede ser cualquiera de los elementos del vector, aunque frecuentemente se elige el elemento central, el primer elemento o el último elemento. 2l finalizar la división, el pivote queda en uno de los dos vectores resultantes o al medio de los dos, en cu!o caso se encuentra !a en la posición correcta. Para comprender mejor el procedimiento se ordenar% la siguiente lista empleando el método Quick Sort:

x1

x2

x3

x4

x5

x6

x7

x8

x

15

21

3

7

2

18

1

14

28

Para este ejemplo, se elige como pivote el primer elemento, por lo tanto el pivote ser% *0 )tome en cuenta que el pivote es el valor del primer elemento, no el elemento en s$, porque en el proceso su valor puede ir cam#iando&. 2ora se de#e dividir la lista en 3, una con elementos ma!ores a *0 ! otra con elementos menores a *0. Para ello se emplean dos contadores: uno que comienza en el $ndice m%s #ajo del vector )*& ! otro en el $ndice m%s alto )&:

x1

x2

x3

x4

x5

x6

x7

x8

x

15 !1

21

3

7

2

18

1

14

28 F!+*'e 15  $

2ora se incrementa el valor del contador i mientras %  i sea menor al valor pivote. Como en este caso %  i es igual al pivote, no incrementa su valor. "e pasa entonces a disminuir el valor del contador j! en este caso mientras %  j sea ma!or al pivote, por lo tanto el contador j disminu!e asta T, donde el valor )*1& es menor al pivote:

x1

x2

x3

x4

x5

x6

x7

x8

x

15 !1

21

3

7

2

18

1

14

28

 $8

$

F!+*'e 15

Entonces se intercam#ian %  i  con %  j, )*  con T&, luego se incrementa el contador i en uno ! se disminu!e el contador j en uno:

x1

x2

x3

x4

x5

x6

x7

x8

x

15 14 !1

21 !2

3

7

2

18

1

1415

28

 $7

$8

F!+*'e 15

- 154 -

Hernán Peñarand a V.

2ora se vuelve a repetir el proceso, es decir se incrementa el contador i mientras %  i sea menor al pivote ! se disminu!e j mientras %  j sea ma!or al pivote. En este caso %  i !a es ma!or al pivote ! %  j menor, por lo tanto no incrementan ni se disminu!en sus valores:

x1

x2

x3

x4

x5

x6

x7

x8

x

14

21 !2

3

7

2

18

1

15

28

 $7

F!+*'e 15

2ora que los contadores an quedado fijos, se intercam#ia %  i con %  j, luego se incrementa i en uno ! se disminu!e j en uno:

x1

x2

x3

x4

x5

x6

x7

x8

x

14

211 !2

3 !3

7

2

18

1 21

15

28

 $6

F!+*'e 15

G7

2ora se repetir el procedimiento: se incrementar i mientras %  i sea menor al pivote, se disminu!e j  mientras %  j sea ma!or al pivote, se intercam#ian varia#les, se incrementa i ! se disminu!e j:

x1

x2

x3

x4

x5

x6

x7

x8

x

14

1

3 7 !3  $3

7 !4 $4

2

18

21

15

28

$5

G6

F!+*'e 15

Como se puede ver en este caso el contador i queda con un valor ma!or que el contador j. Cuando esto sucede el proceso conclu!e ! la lista queda dividida en dos: la lista izquierda que va desde el primer elemento asta j )es decir desde * asta 5& ! la dereca que va desde i asta el último elemento )es decir desde 1 asta &:

x1

x2

x3

x4

x5

x6

x7

x8

x

14

1

7

3

2

18

21

15

28

e esta manera se consigue dividir el vector en dos: el izquierdo con los elementos menores al pivote ! el dereco con los elementos ma!ores o iguales al pivote. 2ora se vuelve a repetir el procedimiento con las listas resultantes. 'os contadores de la lista izquierda son:

x1

x2

x3

14 !1

1

7

F!+*'e  x1  14

 $3

Como se ve aora los contadores comienzan en * ! 5 respectivamente ! el pivote es el número *1. 2plicando el procedimiento una vez resulta:

ORDENACIÓN

- 155 -

x1

x2

x3

14 7 !1

1 !2  $2

7 14

F!+*'e 14

$3

6 repitiendo el procedimiento una vez m%s se tiene:

x1

x2

x3

7

1 !2  $2

14 !3

F!+*'e 14

2ora que los contadores an quedado fijos se de#er$a intercam#iar los valores de %  i ! %  j, pero como el contador i es ma!or al contador j, no se realiza el intercam#io ! la lista queda dividida en dos: la izquierda )asta j>3& con los elementos menores al pivote ! la dereca )desde i>5& con un sólo elemento igual al pivote:

x1

x2

x3

7

1

14

Cuando, como en este caso, una de las listas queda con un solo elemento, dico elemento !a est% ordenado, es decir tiene el valor correcto. El vector izquierdo sin em#argo tiene dos elementos por lo que se de#e aplicar el procedimiento al mismo:

 $

x1

x2

7 !1 $1

1 !2 $2

F!+*'e  7

En este caso los contadores i ! j llegan al mismo valor ! se intercam#ia el elemento consigo mismo )algo que no se ace en la pr%ctica&. Posteriormente )como siempre sucede después de un intercam#io& el valor de i incrementa en uno )a 3& ! el de j disminu!e en uno )a +&. Entonces como i tiene un valor ma!or a j el proceso conclu!e quedando la lista dividida en dos: el vector izquierdo )asta j>+& que como vemos en realidad no tiene elementos ! el dereco )desde i>3& que queda con un elemento. 2l medio queda una lista con un solo elemento ! como es único, ese elemento !a est% ordenado.

x

x1

x2

7

1

Como todos los vectores del lado izquierdo de la primera división an quedado con un solo elemento )o ninguno&, estos elementos est%n ordenados. 2ora se aplica el procedimiento al vector dereco resultante de la primera división:

- 156 -

Hernán Peñarand a V.

x4

x5

x6

x7

x8

x

3 28 !4

2 !5

18

21

15

28 3

 $8

F!+*'e  x4  3

G

Puesto que i sigue siendo menor a j se vuelve a aplicar el procedimiento:

x4

x5

x6

x7

x8

x

28

2 !5

18 !6

21 !7

15 !8  $8

3 !

F!+*'e  3

onde no se realiza ningún intercam#io pues i es !a ma!or a j, por lo tanto el proceso conclu!e ! la lista queda dividida en 3:

x4

x5

x6

x7

x8

x

28

2

18

21

15

3

Como la lista dereca tiene un solo elemento, est% !a con el valor correcto. 'a lista izquierda, sin em#argo, tiene m%s de un elemento por lo que se aplica el procedimiento a la misma:

x4

x5

x6

x7

x8

28 15 !4

2 !5

18

21

15 28

 $7

F!+*'e  x4  28

$8

Puesto que i sigue siendo menor a j se vuelve a aplicar el procedimiento:

x4

x5

x6

x7

x8

15

2 !5

18 !6

21 !7  $7

28 !8

F!+*'e 28

na vez m%s no se realiza ningún intercam#io pues el contador i es ma!or al contador j. Por lo tanto el proceso conclu!e ! la lista queda dividida en dos:

x4

x5

x6

x7

x8

15

2

18

21

28

Como la lista dereca tiene un solo elemento )T&, est% !a ordenada. 'a lista izquierda, sin em#argo, tiene m%s de un elemento, por lo que se vuelve a aplicar el procedimiento:

 $3

x4

x5

x6

x7

15 !4 $4

2 !5 $5

18

21

$6

$7

F!+*'e  x4  15

ORDENACIÓN

- 157 -

2ora i es ma!or a j, por lo que la lista queda dividida en 3: la lista izquierda que no tiene elementos ! la lista dereca que tiene tres elementos. 2l medio queda un elemento ! como es único est% !a con el valor correcto:

x3

x4

x5

x6

x7

15

2

18

21

Como la lista dereca tiene m%s de un elemento, se vuelve a aplicar el procedimiento a la misma:

x5

x6

x7

2 18 !5  $5

18 2 !6 $6

21

F!+*'e  x5  2

$7

Entonces la lista queda dividida en 3:

x5

x6

x7

18

2

21

Como la lista izquierda tiene un solo elemento !a est% ordenada. Pero como la lista dereca tiene aún 3 elementos se de#e aplicar el procedimiento a la misma:

 $5

x6

x7

2 !6 $6

21 !7 $7

F!+*'e  x6  2

na vez m%s la lista queda dividida en 5:

x5

x6

x7

2

21

Puesto que la lista izquierda no tiene elementos, la dereca sólo uno ! al medio queda un elemento, todos vectores tienen un solo elemento ! en consecuencia est%n !a ordenadas ! como no quedan listas con m%s de un elemento, la lista original est% !a ordenada:

x1

x2

x3

x4

x5

x6

x7

x8

x

7

1

14

15

18

2

21

28

3

2l estudiar este ejemplo, no resulta raro preguntarse si no a eistido un error al presentar este método como el m%s eficiente de todos, porque desde el punto de vista del esfuerzo umano parecer$a ser todo lo contrario, sin em#argo, en todos los casos se repite siempre el mismo procedimiento, para lo cual los umanos no somos #uenos pero las computadora si. Por el contrario )! como ción, ! que en consecuencia varia#les, ! en ese sentido el número de intercam#ios.

!a se dijo& algo que consume tiempo de computaes conveniente reducir, son los intercam#ios de el método YuicK - "ort reduce considera#lemente 2ún en una lista tan peque(a como la del ejem-

- 158 -

Hernán Peñarand a V.

plo, con YuicK "ort se requieren Q intercam#ios, comparado con los * que ser$an necesarios con el método de Burbuja. 2 medida que incrementa el número de elementos la diferencia se incrementa ! cuando la lista es mu! grande )con millones o cientos de millones de elementos& lo que a ?ur#uja le toma d$as a YuicK "ort le toma minutos.

7.$.1.  Algoritmos El método YuicK-"ort es por su naturaleza recursivo, por lo que la forma m%s sencilla de implementarlo es en esa forma: se aplica el procedimiento antes eplicado para dividir la lista en dos su#listas. 'uego el método se llama a s$ mismo para ordenar los elementos que quedan en las dos listas resultantes. El algoritmo, en forma de diagrama de actividades, se presenta a continuación ! en el mismo, al igual que se izo con el método de selección, la función recursiva )quicKr& es una función anidada dentro de la función contenedora )quicK&: H#!=r % 9:'*d* #!= ;*r'. !B

%$re!"!r !B $

Ind!e& de) Fr!(er D ?)'!(* e)e(en'*& a *rdenar 

F! #$ F!+xI

0e)&e 0x!>F!+ !  !1 0e)&e 0x $F!+  $  $-1 0!>$ 0!>$ 0e)&e 0e)&e

a#xx ! x! x $  x $ a#x

!!1 $$-1 0!>$ 0e)&e

0e)&e

0$F H#!=r@xBFB$A

0!># 0e)&e

H#!=r@xB!B#A

ORDENACIÓN

- 15 -

H#!=% 9:'*d* #!= ;*r'. x%

re!"!r x

Ve'*r a *rdenar.

x  N/ de e)e(en'*& en x 0n>2

H#!=r@Bn-1A

El código que cam#ia, con relación a los otros métodos es el siguiente:

function  quicK)&A var au,n>.lengt,K>nB function  quicKr)i,j&A var p>i,u>j,piv>DiB +o A  #*ile )Di8piv& iB  #*ile )Dj=piv& j--B if )i8>j&A if )i9>j&A au>DiB Di>DjB Dj>auB F iB j--B F F #*ile)i8>j&B if )j=p& quicKr)p,j&B if )i8u& quicKr)i,u&B F n > .lengtB if )n=*& quicKr)+,n-*&B F

function  ordenar)&A var t*>ne# ate)&B  

quicK)&B var t3>ne# ate)&B var dt > t3.getB document.getElement?!Gd)HtiempoH&.value>dtH milisegundosHB

    F

Para ordenar los *++++ números el método YuicK-"ort requiere 3 milisegundos, es decir *T0 veces menos que ?ur#uja, *+0 veces menos que "elección, 0+ veces menos que inserción ! 1.0 veces menos que "ell, con lo que se comprue#a es el método m%s r%pido de los estudiados en este tema. "implemente para demostrar que este algoritmo )como todos los otros& puede ser empleado para ordenar otros tipos de datos, tales como registros, se ordenar% el vector de *+++ elementos del método de selección, pero aora por el campo dirección. 'as partes del código que cam#ian con relación a dico ejemplo son las siguientes:

function  quicK)&A var au,n>.lengt,K>nB function  quicKr)i,j&A var p>i,u>j,piv>Di.direccionB

- 16 -

Hernán Peñarand a V.

+o A  #*ile )Di.direccion8piv& iB  #*ile )Dj.direccion=piv& j--B if )i8>j&A if )i9>j&A au>DiB Di>DjB Dj>auB F iB j--B F F #*ile)i8>j&B if )j=p& quicKr)p,j&B if )i8u& quicKr)i,u&B F n > .lengtB if )n=*& quicKr)+,n-*&B F

function  ordenar
quicK)r&B

var teto>H8tr=8t=7om#re8@t=8t=irección8@t=H H8t=+Bi8r.lengtBi&A teto> odd)i& W H8tr fila>XimparX=H : H8tr fila>XparX=HB teto>H8td=HrDi.nom#reH8@td=H H8td=HrDi.direccionH8@td=H H8td=HrDi.telefonoH8@td=8@tr=HB F document.getElement?!Gd)Hta#la*H&.innerItetoB

 

  F

Como se puede ver ! al igual que sucedió con el método de "elección, la única modificación que se de#e acer al algoritmo es la de comparar los registros por el campo en que son ordenados. Como en YuicK-"ort el pivote forma parte de esa comparación, su valor de#e ser tomado tam#ién de dico campo. ;rdenando la ta#la por el campo dirección se o#tiene:

7.:.   EJERCICIO( Para presentar los ejemplos ! ejercicios del tema, de#e crear una carpeta con el nom#re temaQ/ ! guardar en la misma todos los arcivos I
ORDENACIÓN

- 161 -

*. Cree una p%gina I
una lista con *0+++ números enteros ale5++++ ! los ordene de forma descendente programa de#e mostrar el tiempo que relos resultados.

1. Cree una p%gina I
INTERCALACIÓN Y BÚSQUEDA

- 163 -

8. INTERCALACIÓN Y BÚSQUEDA  En este tema se estudia la intercalación, un método que permite obtener una lista ordenada a partir de 2 listas más pequeñas ordenadas. Además, se estudian métodos de búsqueda que permiten ubicar información en listas estén ordenadas o no.

8.1.   INTERCALACIÓN La intercalación es la operación por la cual se unen dos listas ordenadas  para formar una tercera, igualmente ordenada, con los elementos de ambas . Por supuesto las listas podrían ser simplemente añadidas  posteriormente ordenadas con uno de los métodos de ordenación estudiados en el anterior tema, sin embar!o, el proceso de ordenación consume más tiempo que el de intercalación, además dic"a operación implica la repetición innecesaria de operaciones #se $uel$en a ordenar listas que a estaban ordenadas%. &a intercalación puede ser empleada también para ordenar listas mu !randes. En ese caso se ordenan se!mentos de la lista empleando uno de los métodos de ordenación  lue!o se intercalan los se!mentos ordenados, consi!uiendo así la lista ordenada. Este mismo procedimiento puede ser empleado también para me'orar la eficiencia de métodos como burbu'a  selección, que como se "a $isto, disminuen su eficiencia de manera !eométrica con el número de elementos, entonces, para e$itar dic"a disminución, se di$ide el proceso de ordenación en listas pequeñas #de unos () elementos%  a medida que las mismas son ordenadas con el método, se intercalan en el $ector resultante, que finalmente contendrá toda la lista ordenada. En la intercalación los elementos de las listas se $an añadiendo a la lista resultante de forma tal que la misma siempre queda ordenada. Para ello simplemente se compara un elemento de una de las listas con otro elemento de la otra #comen*ando con los primeros elementos de cada una de las listas%  se añade a la lista resultante el menor de ellos. Esta operación se repite #sin tomar en cuenta los elementos añadidos% "asta que no quedan más elementos en una de las listas. +uando esto sucede, los elementos de la otra lista #la que quedó con elementos% se añaden al final de la lista resultante. Por e'emplo para intercalar las si!uientes listas

i x y

1

2

3

4

5

6

 (

( )

2/ 2(

/) 2

/0 /)

0)

1e comien*a comparando los primeros elementos de ambas listas # con (%  puesto que ( es menor que , se añade este $alor a la lista resultante #*%

i x y z

1

2

3

4

5

6



( )

2/ 2(

/) 2

/0 /)

0)

5 (

Entonces se compara  con )  puesto que  es menor que ), dic"o $alor es añadido a la lista

i x y z

1 6 5 (

2

3

4

5

6

( ) 

2/ 2(

/) 2

/0 /)

0)

- 164 -

Hernán Peñarand a !

A"ora se compara ( con )  dado que ) es menor a ( se añade ) a la lista resultante

i x y z

1 6 5

2

3

4

5

6

10

(

2/ 2( )

/) 2

/0 /)

0)

(



Prose!uimos de esa manera se compara ( con 2( #se añade el número (%, lue!o 2/ con 2( #se añade el número 2/%, /) con 2( #se añade el número 2(%, /) con 2 #se añade el número 2%, /) con /) #como /) no es menor a /), se añade el número /) de la se!unda lista%. En este punto la lista 3 se queda sin elementos

i x Y z

1 6 5

2 15 10

3 23 25

4

5

6

/)

/0

0)

26

30

(



)

(

2/

2(

7

8

2

/)



10

11

Entonces los elementos restantes de la lista “x”    #desde 40  "asta 4% son añadidos al final de la lista resultante, con lo que se obtiene la lista intercalada (“z”), que como se $e está ordenada

I ! Y z

1 6 5

2 15 10

3 23 25

4 30 26

5 34 30

6 40

7

8



10

11

(



)

(

2/

2(

2

/)

/)

/0

0)

8.1.1.  Algoritmo y código  El al!oritmo para intercalar ascendentemente dos listas de datos simples se muestra en el dia!rama de acti$idades de la si!uiente pá!ina. Para que el al!oritmo pueda intercalar $ectores con diferentes tipos de datos  pueda intercalarlos no sólo de forma ascendente sino también descendente, debe recibir no sólo los $ectores a intercalar, sino también la función de comparación. &a función de comparación #al i!ual que en el método sort3%, es una función, casi siempre anónima, que recibe dos ar!umentos  de$uel$e un $alor positi$o si el primer ar!umento es maor que el se!undo, cero si son i!uales  un $alor ne!ati$o si el primer ar!umento es menor que el se!undo. &a librería sis).'s3 "a sido renombrada a "p$lib.'s3  en la misma se "a añadido una función para el método de intercalación #intercalar3%, que recibe los $ectores a intercalar  la función de comparación #fc3%

"#$%&i'$  intercalar#4,,fc%5 i" #fc66$#((% fc6"#$%&i'$ #a,b%5return  a==b?0:a>b?1:-1; 78 )*+  n464.len!t",n6.len!t",n*6n49n,i6),'6),:6),*6$,- Arra#n*%8  -i(, #i;n4 << ';n% i" #fc#4=i>,='>%;)% *=:99>64=i99>8 ,(/, *=:99>6='99>8  -i(, #i;n4% *=:99>64=i99>8  -i(, #';n% *=:99>6='99>8 +,&#+$  *8 7 +omo se puede $er, si no se manda la función de comparación #si fc3 es nulo%, se crea una función de comparación que de$uel$e ) si los $alores son i!uales,  si el primero es maor que el se!undo  - si es menor, es decir que por defecto se intercalan los $ectores en forma ascendente.

INTERCALACIÓN Y BÚSQUEDA

- 16" -

In)er#a*ar+ In)er#a*a *, e*e.en), de *, /e#),re 0& ( 0(! re#$%$r &' ( $  5 75 85 n&N9 de e*e.en), en & n(N9 de e*e.en), en ( 2e*e 2$
2e*e

2&$ < ( 7  :8 ( 7  77;1 88;1

:8&$ $$;1 88;1

2e*e 2$ < n&  :8&$ $$;1 88;1

2e*e 27 < n(  :8( 7 77;1 88;1

de/,*/er :

Por e'emplo, dada las si!uientes dos listas, !eneradas aleatoriamente  ordenadas con sort3 randseed6)8   46round#rand#(,,()%%.sort#function#a,b%5return a-b87%   =0, , , , ?, 2@, 2, /), /2, /0, /, /@, 0, 02, 0>   6round#rand#2),,()%%.sort#function#a,b%5return a-b87% =, , @, ?, 0, , 2), 2, 2@, 2?, /, /, /?, /?, 0, 02, 0/, 00, 0, 0>

1e obtiene una tercera lista con los llamando a intercalar3

elementos

intercalados

de ambas,

*6intercalar#4,,function#a,b%5return a-b87%   =0, , , @, ?, , , 0, , , ?, 2), 2, 2@, 2@, 2, 2?, /), /, /2, /0, /, /@, /, /?, /?, 0, 0, 02, 02, 0/, 00, 0, 0, 0>

En este e'emplo no es imprescindible mandar la función de comparación, porque la función que se manda es la función por defecto del método. 1in embar!o, si no se comparan los elementos, sino sólo al!unos de sus campos, o se intercala se!ún otro criterio, por e'emplo de forma descendente, la función de comparación es necesaria. Así, el anterior e'emplo, con listas ordenadas de forma descendente, es

  randseed6)8   46round#rand#(,,()%%.sort#function#a,b%5return b-a87% =0, 02, 0, /@, /, /0, /2, /), 2, 2@, ?, , , , 0>

- 166 -

Hernán Peñarand a !

  6round#rand#2),,()%%.sort#function#a,b%5return b-a87% =0, 0, 00, 0/, 02, 0, /?, /?, /, /, 2?, 2@, 2, 2), , 0, ?, @, , >   *6intercalar#4,,function#a,b%5return b-a87% =0, 0, 0, 00, 0/, 02, 02, 0, 0, /?, /?, /, /@, /, /0, /2, /, /), 2?, 2, 2@, 2@, 2, 2), ?, , , 0, , , ?, @, , , 0>

&as funciones de comparación son útiles no sólo en la intercalación, sino principalmente en los métodos de ordenación, pues con las mismas se pueden crear módulos de carácter más !eneral. Empleando estas funciones se "an añadido, a la librería "p$lib.'s3, funciones para los métodos de burbu'a #burbu'a3%, selección #seleccion3%, inserción #insercion3%, s"ell #s"ell3%  quic:-sort #quic:3%. Bodas ellas pueden recibir el $ector a ordenar  la función de comparación. Al i!ual que con intercalar3, si no se manda la función de comparación, los métodos de ordenación !eneran una función por defecto, la misma que en la función intercalar3. En otras palabras, si no se manda la función de comparación, los elementos se ordenan de forma ascendente. Por e'emplo si se !enera una lista con ))) elementos enteros aleatorios comprendidos entre   ())) randseed68 46round#rand#))),,()))%%8  

Puede ser ordenada de forma descendente, con el método 1"ell, escribiendo la si!uiente instrucción

  s"ell#4,function#a,b%5return b-a87%8 +on lo que los elementos del $ector 43 quedan ordenados descendentemente 4   =())), 0??, 0??/, 0??, 0?@, 0?, 0?0, 0?(@, 0?(/, 0?0?, 0?02, 0?2, 0?, 0?, 0?, 0?)?, 0?)@, 0?)(, 0?), 0?)), 0??, 0?, 0?(, 0?, 0@, 0@@, 0@(, 0@/, 0?, 0(?, 0(, 0(, 0(/, 0(/, 00, 0/, 0/@, 0/0, 0/, 02?, 02, 0)@, 0@?, 0@?/, 0@?/, 0@@, 0@), 0@@0, 0@@2, 0@@), 0@?, 0@2, 0@(/, 0@(, 0@0, 0@/, 0@/), 0@2?, 0@?, 0@@, 0@)?, 0@)?, 0@), 0?, 0?, 0?0, 00, 0@?, 0@, 0@0, 0@, 0@), 0?, 0?, 0, 0, 0, 0(, 0(0, 00(, 000, 0/, 0/, 0/@, 0//, 0//, 0/2, 0/), 02, 02/, 022, 022, 02), 0, 00, 0/, 0, 0), 0(@, 0(/, 0(2, 0(@?, 0(@0, 0(0, 0(, 0(0?, 0(0, 0(2(, 0(22, 0(2, 0(0, 0(/, 0()@, 0()2, 0(), 00?, 00?(, 00?), 00, 002, 00), 00@, 00@@, 00@, 000, 00/@, 00/0, 002@, 002(, 002/, 0022, 00(, 00), 00)(, 0/??, 0/?(, 0/?0, 0/(, 0/@0, 0/, 0/@, 0/2, 0/(, 0/(@, 0/0, 0//, 0//0, 0/2, 0/2, 0/2, 0/22, 0/, 0/@, 0/2, 0/), 0/), 0/)/, 0/)/, 02?, 02@), 022, 02(/, 02/0, 02/), 02?, 02, 020, 02)(, 02)0, 02)/, 02)2, 0?@, 0?(, 0?), 02, 0), 0), 0@, 0@, 0@(, 0@, 0/, 02, 0(, 00/, 002, 002, 0/?, 0/?, 0/, 0//, 0/, 02/, 022, 0), 0)2, 0)?, 0)?(, 0)?/, 0)(, 0)/, 0)@), 0)?, 0), 0)0, 0)2, 0)(@, 0)(0, 0)(0, 0)0(, 0)0(, 0)0(, 0)0(, 0)00, 0)02, 0)/, 0)/(, 0)2/, 0)22, 0)?, 0)@, /??, /??, /??, /??), /?(, /?@?, /?@(, /?@/, /??, /?, /?, /?0@, /?00, /?0/, /?/@, /?/, /?/(, /?2?, /?2(, /?20, /?(, /?, /?@, /?, /?0, /?, /@2, /(@, /(), //?, //, /2?, /20, /2, /, /(, /2, /@??, /@?@, /@?, /@/, /@(@, /@(@, /@(0, /@(, /@(, /@/?, /@/?, /@/@, /@/, /@2?, /@), /@)), /?0, /(, /@@, /@@, /@0, /@), /(, /(@, /(@, /0?, /00, /00, //?, //@, //, //, //), /?, /@, //, /), /), /)), /(?@, /(?(, /(?2, /(, /(), /(@?, /(@, /(@, /(, /(, /(@, /(@, /(, /(2, /(, /((), /(0@, /(0, /(/, /(/, /(//, /(/2, /(/), /(2, /(2), /0?0, /0?/, /0, /00, /0@), /0/, /0, /0), /0(/, /00@, /00/, /00), /0/?, /0/(, /020, /020, /0, /0, /0), ///, //((, //0?, //0, ///, ///@, ///,

INTERCALACIÓN Y BÚSQUEDA

///), //20, //20, //)?, /2?, /2), /2(/, /2(, /20(, /202, /?, /, /(, /), /@/, //, //0, //2, /2(, /20, /), /)@, /)@, /)@, /)(?, /)2, /), /)/, 2??0, 2?, 2?0, 2?/?, 2?/0, 2?//, 2?2@, 2/, 2/, 22, 2), 2@(, 2(2, 20?, 20, 20, 202, 2)), 2@??, 2@?0, 2@?0, 2@/, 2@(), 2@(), 2@0?, 2@0@, 2@0(, 2@), 2), 2), 2@@, 2@, 22, 2/, 2, 2)0, 2)0, 2(0, 2(2, 2(2, 2(((, 2(0, 2(/, 2(), 2(), 20?), 20, 20((, 20(2, 200), 20/, 20/, 20, 20), 20)0, 2/?, 2//, 2/0), 2//?, 2//2, 2/2, 2/2, 22, 22), 22@0, 22@, 22(?, 222, 222, 222, 22?, 22(, 22, 2@, 20, 22, 2, 2//, 2//, 22, 2, 2/, 2)(, 2)2, 2)), 2)(2, 2)0, ??, ?(, ?0, ?@@, ?(@, ??, ?, ?, ?2, ?), @), @, 0, (?, (, 2?, 2/, 2, 2, )/, @, @(, @(, @2, @, @2, @)?, ?2, ?), @/, )?, ), )/, (?(, (?0, (0, (2(, (22, (/, (2, 0@), 0@, 000, 0/), 02, /?, //, /@, /@), /?, //), /20, /20, /2, /2), 2@, 20, 2(@, 2(, 20?, 22, 2, 2), 2)/, 2)2, (0, (/, (), 0?, /, 2(, 22, @, @, 2, )), )@/, )@/, )?, )), )/), )2@, ), )), ))(, ?0@, ?0(, ?0), ?/, ?/, ?/, @2, (, (, 0@, 0@, /2, @@), @(/, @0, @/@, @2, @2, @)(, @)(, ?@, ?), 2, @?, /, ), (?/, (?2, (?), (, (/, (/, (2, (, (0, (0, 00, 0(?, 0(, 0(2, 00, 0/?, /?, /(, /(?, /(, /((, /(), 2), 2((, 2(/, 20(, 202, 2/, ?2, ?), @, (, 0, @/, 20, ?, @, )(, )/, )2, 2@, , @>

- 16= -

/2?0, /2?0, /2?, /2?), /2?, /2@, /2), /20), /2//, /2@, /20, /2)@, /2)), /?(, /@), /, /2, /(, /(/, /0?, /0(, /@, /, /(, /), /)), /)?@, /)@, /)(/, /)0(, /)0/, /)0), /)/, /)/, /)2@, 2?, 2?, 2?@), 2?, 2?2, 2?(, 2?(/, 2?2/, 2??, 2?0, 2?/, 2?/, 2?, 2@, 2?, 2?, 2, 20, 20, 2(?, 2(, 2/(, 2/, 22, 22, 2(, 2), 2)/, 2@@@, 2@@, 2@@, 2@@, 2@, 2@(?, 2@(, 2@0), 2@/, 2@/2, 2@2@, 2@2, 2@2), 2@?, 2@2, 2@, 2/, 2((, 20?, 2/?, 2//, 2)/, 2(?(, 2(?/, 2(@?, 2(@@, 2(@, 2((, 2(02, 2(/?, 2(/, 2(/0, 2(2(, 2(2(, 2(22, 200, 20/, 202, 20, 20(?, 20(, 20(, 20/2, 202, 202/, 2022, 20, 20@, 20@, 2/@?, 2/@2, 2/@), 2/@), 2/@), 2/@, 2/0(, 2/)?, 2/)@, 2/)(, 2/)0, 2/)2, 22?0, 22, 22(, 22(@, 22(/, 220@, 220, 22/, 22/(, 22(, 22(, 22, 22)0, 2??, 2?, 2?/, 2, 2, 2(@, 2((, 2(), 20@, 20@, 22, 2)), 2)0, 2)@), 2)@), 2)?, 2), 2)02, 2)0), 2)0), 2)/, 2)/), 2)2?, 2)?, ?(, ?(2, ?0?, ?0, ?0@, ?02, ?2, ?)(, ??, ?, , (, /, @, (/, (2, (, (), 0@, /, /2, )2, ), @?, @?), @?, @@?, @@, @((, @(0, @(), @0, @/@, @/@, @?, @2, (?, 0, /0, 2(, 22, ?, (@/, (@, (@), (?, ((, (, (), ()2, 0?, 0?, 0?2, 0?2, 0?), 0@, 0, 0, 0)?, 0)/, 0), /?@, /?/, /, /(, /2, /(0, /(0, /0, //, /, //, /, /)(, 22, 2), 2@2, 20@, 202, 2/?, 2/, 2/), 22, 2?, 2)), ??, @, @/, @, @), , /, /@, /0, //, //, /, 2, ), )0, ), )), )??, )?, )?), )), )(, )0@, )0, )02, )/?, )/@, ))2, ?, ?, ?@(, ?0, ?2, ?(, ?(0, ?(/, ?2, ?22, ?), ?), ?, , (, /, @, 2(, 22, ), )@, )2, @, @@@, @@@, @@@, @2, @20, @22, @?, @/, @2, @), @)(, @)(, (@, ((, (0, (2, /(, 2@, 2, ?, @, (@2, (@), (@), (, (0, (, ((@, (0?, (0), ()(, 0?@, 0?(, 0?0, 0?, 0, 0@/, 0@/, 0, 0/2, 02), 0, 00, /?, /?2, /?, /@, /?, /0, /0(, /02, //2, 2?@, 22, 2@/, 2, 2(, 22@, 22@, 22(, 22/, 222, 22), 2, 22, 2)), @, ?, @, (, /, (/, 0/, /2, 2, ?, ?2, ), @(, , (, (, (, (0, (0, /2,

+omo a se di'o, la intercalación puede ser empleada con'untamente los métodos de ordenación #principalmente los métodos directos% para optimi*ar el proceso de ordenación. En ese caso, sin embar!o, las listas a intercalar así como la lista resultante deben estar en el mismo $ector por lo que es necesario modificar los al!oritmos tanto del método de ordenación como de intercalación para tomar en cuenta ese "ec"o.

- 16> -

Hernán Peñarand a !

Por e'emplo en la si!uiente aplicación se emplea el método de Curbu'a con'untamente el de intercalación para ordenar una lista de )))) números enteros !enerados al a*ar  comprendidos entre   2)))). +on ese fin se ordena la lista, con el método de burbu'a, en !rupos de () elementos, los cuales se intercalan lue!o con el método de intercalación. Para comparar el tiempo que toma el método combinado, con relación al método de Curbu'a por sí solo, se ordena también la lista con este método ;DF+BGPE "tmlH ;"tmlH ;"eadH ;meta name6"viewport" content6"width=device-width, initial-scale=1"H ;titleHE'emplo Intercalación;JtitleH ;script src6"hpvlib.js"H;JscriptH ;scriptH )*+ $8

       

   

JJFrdena el $ec!tor K4K con el método de burbu'a e intercalación "#$%&i'$  burbu'ai#4,fc%5 i" #fc66$#((% fc6$,- "#$%&i'$ #4%5+,&#+$  a-b878 )*+ i6(),n64.len!t"8 JJFrdena el $ector K4K desde el índice KpK "asta el úndice KuK "#$%&i'$  burb#p,u%5 "'+ #)*+ i6u8iHp8i--%5 s6&+#,8 "'+ #)*+ '6p8';i8'99% i" #fc#4='>,4='9>%H)%5 au464='>8 4='>64='9>8 4='9>6au48 s6"*(/, 8 7 i" #s% +,*8 7 7 JJIntercala los elementos del $ector K4K comprendidos entre el JJíndice KpK  KuK con la lista comprendida entre )  Kp-K "#$%&i'$  inter#p,u%5 )*+ :6),i6),'6p,l,au48  -i(, #:;u << ';6u% i" #fc#4=:>,4='>%;)% :998 ,(/, 5   au464='>8 "'+#l6'8lH:8l--% 4=l>64=l->8 4=:99>6au48'9987 7 i" #n;6()% 5burb#),n-%8+,&#+$ 87 burb#),0?%8  -i(, #i90?;n%5 burb#i,i90?%8 inter#i,i90?%8 i96()8 7 i" #i;n%5 burb#i,n-%8 inter#i,n-%8 7 7

INTERCALACIÓN Y BÚSQUEDA

- 16? -

"#$%&i'$  !en$ec#%5    

randseed6)8 $6round#rand#)))),,2))))%%8 7

"#$%&i'$  !enerar#%5    

!en$ec#%8 document.!etElementCId#KtaK%.innerLBM&6$8 7

 

"#$%&i'$  ordenar#%5 )*+ t,t2,dt8 t6$,- ate#%8 burbu'ai#$,"#$%&i'$ #a,b%5+,&#+$ a-b87%8 t26$,- ate#%8

       

dt6t2.!etBime#%-t.!etBime#%8 document.!etElementCId#Kta2K%.innerLBM&6$8 document.!etElementCId#KitK%.$alue6dt9K ms.K8 !en$ec#%8 t 6 $,- ate#%8 burbu'a#$,"#$%&i'$ #a,b%5+,&#+$  a-b87%8 t2 6 $,- ate#%8 dt6t2.!etBime#%-t.!etBime#%8 document.!etElementCId#Kit2K%.$alue6dt9K ms.K8

      7

;JscriptH ;stle tpe6"text/css"H   &,x&*+,* 5   bac:!round-colorliht!ellow  8 7 ;JstleH ;J"eadH ;bodH ;label for6"ta1"H&ista !enerada;JlabelH ;te4tarea id6"ta1" roNs6"1" cols6"#"H;Jte4tareaH;brH ;label for6"ta$"H&ista ordenada;JlabelH ;te4tarea id6"ta$" roNs6"1" cols6"#"H;Jte4tareaH;brH ;button id6"bt1" onclic:6K!enerar#%KHOenerar;JbuttonH ;button id6"bt$" onclic:6Kordenar#%KHFrdenar;JbuttonH ;brH;label for6"it1"HBiempo burbu'a-intercalación;JlabelH ;input tpe6"text" id6"it1"H;brH ;label for6"it$"HBiempo Curbu'a solamente;JlabelH ;input tpe6"text" id6"it$"H;brH ;JbodH ;J"tmlH Abriendo la pá!ina en un na$e!ador, !enerando el $ector  ordenando el mismo  "aciendo correr el pro!rama se obtiene al!o parecido a

- 1=5 -

Hernán Peñarand a !

+omo se puede $er el método de Curbu'a, combinado con el método de intercalación, es 0. $eces más rápido que el método de Curbu'a por sí solo.

8.2.

BÚSQUEDA SECUENCIAL

+uando se traba'a con $ectores, ubicar un $alor implica determinar la posición #índice o dirección de memoria% del elemento que contiene ese $alor. En realidad sólo se puede "ablar de métodos de búsqueda cuando la información está ordenada, de lo contrario, no queda otra alternati$a que buscar la información de forma secuencial, es decir comparando elemento a elemento, "asta encontrar el $alor buscado o "asta que a no quedan más elementos en la lista. A este procedimiento que se conoce como búsqueda secuencial o lineal  es la única alternati$a disponible cuando los elementos no están ordenados. +omo en una lista pueden e4istir $alores duplicados, una $e* ubicado un elemento, se puede continuar la búsqueda, comen*ando con el elemento que se encuentra después del elemento ubicado, "asta ubicar la posición de otro de los $alores o "asta que a no queden más elementos en la lista. A pesar de ser intuiti$o  no constituir un método propiamente, la búsqueda secuencial es de utilidad práctica, porque !ran parte de la información e4istente, como ser el te4to de documentos  libros, se encuentra desordenada, por lo que la única alternati$a para ubicar información en los mismos es mediante la búsqueda secuencial o lineal. El al!oritmo correspondiente a la búsqueda secuencial se presenta en la si!uiente pá!ina.

INTERCALACIÓN Y BÚSQUEDA

- 1=1 -

%e#@en#$a*+ B@#a e* /a*,r 0/ en *a *$)a 0& ' #,.en:and, en *a A,$#$n 07 ' re#$%$r &' 7' / n  N9 de e*e.en), en & $7

2&$  / 2e*e $  $;1

de/,*/er $

2$
Al i!ual que con el método de intercalación  los de ordenación, para contar con un módulo de carácter más !eneral, es con$eniente reali*ar la búsqueda no directamente con la i!ualdad, sino mediante una función de comparación que de$uel$a ) si los $alores son i!uales, positi$o si el primer $alor es maor al se!undo  ne!ati$o en caso contrario. ic"a función, añadida a la librería "p$lib.'s3 es

"#$%&i'$  bsecuencial#4,',$,fc%5 i" #fc66$#((% fc6"#$%&i'$ #a,b%5return a==b ? 0: 1; 78 )*+ n64.len!t",i6'8 ' 5 i" #Dfc#$,4=i>%% +,&#+$ i8 i99 7 -i(,#i;n%8 +,&#+$  -8 7 +omo se puede $er, si no se le manda una función de comparación, el método !enera uno por defecto, la cual de$uel$e ) si el $alor buscado  el elemento comparado son i!uales. Por e'emplo, si se !enera una lista con 2)) números enteros comprendidos entre   /))

  randseed68 46round#rand#2)),,/))%% =@, 0, )/, 2, 2/), /?, 2@, 22, 2/, (, 2/(, 2)@, (, 20, ?, 2/, (, @, ((, /)), ), 2, 2/@, /, 0/, 20), 2??, 0, /0, ?, 2, 00, 2(), )@, ?(, 2, 2)?, 2, /2, 22, 2?, 2), ?, 20/, 0/, (, , 2), (, 2/, (, (, ), 202, 2/?, ?, 2(@, 22, @, 2((, ), 22, , (@, (@, ??, @, ), ?(, 2?, 2), @/, 20/, 2(?, (?, /@, )?, 2@, ), @0, ((, 2@/, 2), 2/, (, 2(2, 2@?, 2)@, 2, @?, 222, 2?(, /, /, , 2@(, @@, )2, 2/, (, @?, /, 2, @/, 0), ?, 2), 2(?, @@, @, @, 22, ?, 20@, 2/, (, 2(, //, (/, @, , @, @(, 20?, @2, , ), 2?/, (, /, ((, ?(, 20/, /, 0, @0, 2)2, ), 2@, 2/, (, /, /, 20, , 2(0, , , @, , 0), /, @@, 2?), 22(, 2), , 2, @), ?, 2, (2, ?), ?), ?2, 2, 2?0, (, , 0, 20(, /, 220, )?, 2?, , /), 2@0, 2, //, 00, )2, 20/, 0, @@, @, (@, 2, ?, 0?, ?, @/, , 2?(, 20, //, 0, , @/, 2>

1e puede encontrar la posición del primer número @@ con

- 1= -

Hernán Peñarand a !

  bsecuencial#4,),@@% ?

Por lo tanto, el primer número @@ se encuentra en la posición ?@ #recuerde que los $ectores en a$ascript el primer elemento es el elemento )%. 1e puede buscar otro elemento que ten!a el número @@ comen*ando la búsqueda en la posición ?@ #?9%

  bsecuencial#4,?@,@@% (2

G continuar de esa manera la búsqueda de otros elementos que ten!an el número @@ bsecuencial#4,(/,@@%   0 bsecuencial#4,(,@@%   -

+omo se puede $er e4iste otro elemento #en la posición (% que tiene el número @@, lue!o bsecuencial3 de$uel$e -3, informando que a no e4isten más elementos con ese número. 1e puede reali*ar la búsqueda de todos los elementos que tienen el número @@  de$ol$er un $ector con las posiciones de dic"os elementos, empleando un ciclo N"ile3 r6=>8 p6)8 N"ile##p6bsecuencial#4,p,@@%%H)%5r.pus"#p%8 p99878 r   =?, (2, 0>

En estos casos, funciona bien la función de comparación por defecto, sin embar!o, si por e'emplo se tiene la si!uiente lista con apellidos randseed6)8 $6neN Arra#))%8 for#i6)8i;))8i99% $=i>6!enerarApellido#%8   $ =+anquic"oque, Peinado, &osada, Pocoata, Qosado, An!lada, Rabre!at, 1alom, Siana, &ledó, +al*ada, Paco, Ta$as, +oello, Mesa, Aucapoma, Man*ano, Coada, á$ila, Oarri!a, Uuisicala, Uueso, +"ac"a'aque, 1e!uí, Qodrí!ue*, &eal, 1alas, 1irpa, Montes, Cae*a, Rerrán, Sarela, A*nar, Porras, Selasco, +asares, Ri!ueras, Almansa, Brillo, Pereira, Moreno, Mascaró, Coada, Carón, Morell, Carrios, Salle, Luanca, Alfonso, &edesma, &lanquec"oque, +olque, +"acón, +asado, uarte, Mateo, Vabala, Mateu, Bello, +aparrós, Ooicoec"ea, Taran'o, +respo, +oello, +amino, Ponce, Montaña, Adadia, 1olano, Qebollo, Inca, Cenito, +arreño, Alma*án, Sillalba, Este$e, Aruquipa, Uuero, Montoa, Aparicio, Salle, Riol, Espe'o, Wriarte, Aala, Oarcía, Caón, +aballero, Morillo, Sillarroel, Albero, Oascón, 1inc"iroca, Aquise, +anqui, +ar$a'al, Perea, Oar!allo, Inca, Rranc">

G se quiere encontrar el primer elemento cuo apellido comien*a con Pe3 #no apellidos i!uales a Pe3, sino los que comien*a con Pe3%. En ese caso es necesario mandar la función de comparación para se compare sólo los dos primeros caracteres de los apellidos con el $alor buscado, como sucede con la si!uiente instrucción bsecuencial#$,),KPeK,function#a,b%5return a66b.substr#),2% X )  87%   

Uue como se puede $er, informa que el se!undo elemento tiene un nombre que comien*a con Pe3. Para obtener la lista de todos los elementos cuos apellidos comien*an con Pe3, se procede como en el e'emplo anterior

  r6=>8 p6)8 N"ile##p6bsecuencial#$,p,KPeK,function#a,b%5return a66b.substr#),2% X ) 87%%H)%5r.pus"#p%8 p99878 r =, /?, ?>

INTERCALACIÓN Y BÚSQUEDA

- 1=3 -

G como se puede $er los elementos con los índices , /?  ? contienen apellidos que comien*an con Pe3.

8.3.  TD TD DE LA BISECCIÓN BISECCIÓN +omo a se di'o, sólo se pueden desarrollar $erdaderos métodos de búsqueda si los datos están ordenados. Wno de dic"os métodos es el método de bús queda binaria. En la e4plicación de este método se asumirá que los datos están ordenados ascendentemente.

En este método se compara el valor buscado con el elemento central del vector. Si el valor buscado es igual al elemento central el proceso conclu ye, caso contrario se divide el vector en dos y se repite el procedimiento en la mitad donde es probable ue se encuentre el valor buscado . Este procedimiento se repite #di$idiendo el $ector en dos en cada iteración% "asta que el $alor es encontrado o "asta que la mitad donde se reali*a la búsqueda queda sin elementos. 1e sabe en cuál de las mitades se encuentre el $alor buscado comparándolo con el elemento central 1i es maor al elemento central entonces se encuentra en la mitad derec"a #o superior%  si es menor en la mitad i*quierda #o inferior%. +uando en el $ector e4isten dos o más elementos con el $alor buscado, el método de búsqueda binaria ubica uno de esos elementos, pero no !aranti*a que dic"o elemento sea el primero. Por consi!uiente, una $e* ubicado el elemento, es necesario recorrer el $ector "acia atrás "asta que el $alor de un elemento es diferente al buscado. Para comprender me'or el procedimiento que se si!ue en el método se ubicará el número ( en el si!uiente $ector

&1

&C

&3

&4

&"

&6

&=

1

3

"

?

11

C1

CC

En el proceso se emplean / $ariables “i” para el índice del primer elemento8 “j” para el índice del último elemento  “%”  para el índice del elemento central. El $alor de “%”    se calcula como el cociente de la di$isión de i&j entre 2

&1

&C

&3

&4

&"

&6

&=

1

3

"

?

11

C1

CC

$1

8  #,#$en)eD$;7EFC4

7=

+omo el elemento central es maor al $alor buscado #(% se repite el procedimiento en la mitad i*quierda, por lo tanto, para repetir el proceso, el índice '3 toma el $alor del elemento central :3 menos  #0-6/%

&1

&C

&3

1

3

"

$1

8C

73

A"ora el elemento central es menor al $alor buscado #(%, por lo que el $alor buscado debe encontrarse en la mitad derec"a, entonces para repetir el proceso, el primer índice i3 toma el $alor del elemento central :3 más  #296/%

- 1=4 -

Hernán Peñarand a !

&3 " $3

83

73

En la lista derec"a queda un elemento,  como el mismo es i!ual al $alor buscado se "a encontrado la posición de mismo, es decir el $alor de :3 #/%. Para comprender me'or el método se $ol$erá a aplicar el mismo para ubicar un nue$o $alor, el número . +omo de costumbre el proceso comien*a tomando en cuenta el elemento central del $ector

&1

&C

&3

&4

&"

&6

&=

1

3

"

?

11

C1

CC

$1

8  #,#$en)eD$;7EFC4

7=

Puesto que el elemento central es menor al $alor buscado #% se repite el procedimiento en el $ector derec"o #i6:96(%

&"

&6

&=

11

C1

CC

$"

86

7=

ado que el elemento central es maor al $alor buscado #% se repite el procedimiento con el $ector i*quierdo #'6:-6(%, que tiene un solo elemento

&" 11 $"

8"

7"

G como el mismo es i!ual al $alor buscado el proceso conclue "abiéndose ubicado el $alor en la posición ( #el $alor de %%. 1i se busca un elemento que no e4iste en el $ector, por e'emplo el número 2, aplicando el procedimiento se lle!a al mismo $ector que en el caso anterior #cuando se busca el número %. En este caso sin embar!o el elemento que queda no es i!ual al $alor buscado  al no e4istir más elementos, se conclue que el $alor buscado no e4iste en la lista. Por lo tanto se sabe que el $alor buscado no se encuentra en la lista cuando en la misma queda un solo elemento  el mismo no es i!ual al $alor buscado.

8.!.1.  Algoritmo y código  +omo ocurre con los métodos de ordenación, el método de búsqueda binaria puede ser pro!ramado tanto en forma iterati$a como recursi$a, el al!oritmo iterati$o se presenta en la si!uiente pá!ina. Para su codificación  como se "a "ec"o con los anteriores métodos, es con$eniente reali*ar la comparación empleando una función en lu!ar del operador de i!ualdad. ic"o códi!o, añadido a la librería "p$lib.'s3 es el si!uiente

"#$%&i'$  bbinaria#4,$,fc%5 i" #fc66$#((% fc6"#$%&i'$ #a,b%5+,&#+$ a66bX)aHbX-87 )*+ '64.len!t"-,i6),:8

INTERCALACIÓN Y BÚSQUEDA

- 1=" -

%%$nar$a+ B@#a *a Ar$.era ,#@rren#$a de* /a*,r 0/ en e* /e#),r 0&! re#$%$r &' /  7  N9 de e*e.en), en & -1 $5 8  #,#$en)eD D$;7EFCE 2&8  / 2e*e 2e*e

2e*e

2&8 G /

2D&8-1 /E ( D8G5E  7  8-1

$  8;1

8  8-1

2e*e 2$ G 7 de/,*/er -1

de/,*/er 8

'5  

:6quot#i9',2%8 i" #Dfc#$,4=:>%% 5  -i(, #Dfc#$,4=:->% << :H)% :--8 +,&#+$ :87 i" #fc#$,4=:>%;)% '6:-8 ,(/, i6:98 7 -i(,#i;6'%8 +,&#+$  -8

} +omo de costumbre, si no se manda una función de comparación, el método !enera una por defecto, la cual funciona bien si el $alor buscado se compara directamente con los $alores #como un todo% de los elementos. Por e'emplo, si se !enera  ordena un $ector con )) números enteros comprendidos entre   2))

  randseed68 46round#rand#)),,2))%%.sort#function#a,b%5return a-b87% =0, (, , , , 2, 2(, 2, 2, 2?, 2?, /), /@, /, 0, 00, 00, (, (2, (/, (0, (@, ), , 0, 0, , , ?, @, @, @2, @/, @/, @(, @@, 2, /, (, ?), ?, ?2, ??, )0, )0, )(, ), )@, ), ), ), ), , , , ?, /), /2, /0, /, /, /?, 0), 0, 0, 02, 00, 0, 0@, 0, (/, (0, (@, (, (?, (?, ), 2, 2, 2, @, , @), @2, @/, @/, @0, , 2, /, (, , @, ?, ?, ?, ?@, ??, ??, 2))>

G se quiere ubicar la posición #el índice% del primer elemento que contiene el número @, la función de comparación por defecto es suficiente bbinaria#4,@%   2?

Entonces el primer número @ se encuentra en el elemento con el índice 2?. 1in embar!o, si se !enera  ordena una lista con )) nombres femeninos

- 1=6 -

Hernán Hern án Peñarand Peña rand a !

  randseed68 6=>8 for#i6)8i;))8i99% .pus"#!enerarTombreR#%%8 .sort#% randseed68 =Adelina, Afra, A!ostina, Almudena, Anelis, Ar!entina, Atoc"a, Aurora, A$i$, Ce!oña, Ce!oña, Celinda, +arolina, +aterina, +iara, +leopatra, +leopatra, arel, ariana, enise, esdemona, Edeltrudis, Electra, Elia, Emiliana, Ene$i, Ester, Eunice, E$anan, Eda, Rabia, Ratima, Raustina, Relicia, Rlorencia, Ruencisla, Oloria, Oraciela, Ouiomar, I:ler:, Imelda, Ines, emiel, Yariett, Yarina, Yarme, &arisa, &a$inia, &ibia, &idia, &idia, &idia, &oretta, &ourdes, &ucina, &uisana, Matilde, Melinda, Milca, Monica, Monica, Taara, Tadina, Tatanael, Tatas"a, Taudina, Terina, Tilda, Tolbin, Tubia, Paloma, Paola, Piedad, Presentacion, Purificacion, Uuerubina, Qaquel, Qene, Qees, Qees, 1abrina, 1arit*ia, 1"ael, 1"eli, 1ibila, 1il:a, 1imena, Beresa, Bremedal, Wrsula, Sentura, Sianne, Sictoria, Gadira, Ga"el, Ga"el, Vafiro, Vinnia, Voraida, Vulema>

G se quiere ubicar el primer nombre que comien*a con Ra3, se debe mandar además la función de comparación, porque en este caso sólo se deben comparar los dos primeros caracteres de los nombres #no todo el nombre%

  bbinaria#,KRaK,function#a,b%5return a66b.substr#),2%X)aHb.substr#),2%X bbinaria#,KRaK,function#a,b%5return )87% /)

Por lo tanto el primer elemento que contiene un nombre que comien*a con Ra3 es aquel con el índice /). Ftros casos en los que es necesario mandar una función de comparación ocurre cuando los datos son estructurados. En dic"os casos se deben comparar únicamente él o los campos correspondientes al $alor buscado.

8.4.

BÚSQUEDA SECUENCIAL INDE!ADA 

&a búsqueda secuencial inde4ada, al i!ual que la búsqueda binaria, requiere que el $ector donde se reali*a la búsqueda esté ordenado. En este método se reali*a una búsqueda secuencial, pero no en elementos consecuti$os, sino en elementos separados !eneralmente por al!ún múltiplo de ). &a búsqueda comien*a empleando como incremento un múltiplo de ), con la misma dimensión que el número de elementos en el $ector, por e'emplo, si el $ector tiene ()))) elementos, el incremento inicial es ))))), es decir que el $alor buscado se compara con los elementos ), ))))), 2))))), etc. 1i en esta búsqueda no se encuentra el $alor, se identifica el se!mento en el que se encuentra  la búsqueda continua en dic"o se!mento con un incremento i!ual a la décima parte del incremento anterior, continuando de esa manera "asta que se encuentra el $alor o "asta que el incremento es uno  no quedan más elementos en el se!mento, en cuo caso se sabe que el $alor buscado no e4iste en el $ector. El al!oritmo para la búsqueda secuencial inde4ada se presenta en la si!uiente pá!ina  el códi!o elaborado en base al mismo, empleando una función de comparación comparación en lu!ar de los operadores operadores relacionales relacionales directos  añadido a la librería "p$lib.'s3 es

"#$%&i'$  binde4ada#4,$,fc%5 i" #fc66$#((% fc6"#$%&i'$ #a,b%5+,&#+$ a66bX)aHbX-87 )*+  n64.len!t",m6n,d6,i6),'6n-,:8 i" #fc#$,4=i>%;) ZZ fc#$,4='>%H)% +,&#+$ -8  -i(, #mH)% 5m6quot#m,)%8 d[6)87 '5  

:6i8 '5 i" #Dfc#$,4=:>%%5

INTERC INT ERCALA ALACIÓ CIÓN N Y BÚSQUE BÚS QUEDA DA

- 1== -

%$nde&ada+ %$nde&ada+ B@#a B@#a *a Ar$.era Ar$.era ,#@rren#$a ,#@rren#$a de* /a*,r /a*,r 0/ en e* /e#),r /e#),r 0&! re#$%$r &' / n  N9 de e*e.en), e*e.en), en & .n d1 $5 7n-1 2D/<&$E , D/G& 7 E

2.G15 ..F15 ddH15 de/,*/er de/,*/er - 1 8$ 2/&8 2/<&8 2D8G5E ( D /& /&8E  88;d 8<7

88-1  78 de/,*/er 8

$8-d;1 ddF15 2dG5

de/,*/er -1

 -i(, #:H) << Dfc#$,4=:->%% :--8 +,&#+$ :8 7

i" #fc#$,4=:>%;)% 5'6:8 +,*87  

:96d8 7 -i(, #:;6'%8 i6:-d98 d6quot#d,)%8 7 -i(, #dH)%8 +,&#+$  -8

} Por e'emplo, si se !enera  ordena #con el método Uuic:-1ort% una lista con 2/)))) números enteros comprendidos entre   0)))))

  randseed68 46round#rand#2/))),,0))))%%8 quic:#4% randseed68 Para buscar en la misma por e'emplo el número 0(@, se escribe binde4ada#4,0(@% binde4ada#4,0(@%   /2/

Por lo tanto el elemento con el índice /2/ es el primer elemento que tiene el número buscado, lo que se puede corroborar, $iendo el $alor del mismo

- 1=> -

Hernán Hern án Peñarand Peña rand a !

  4=/2/> 4=/2/> 0(@

G $erificando además que el elemento anterior, no contiene el número buscado 4=/22> 4=/22>   0(@)

+omo de costumbre, si la lista contiene datos estructurados o si la búsqueda es parcial, parcial, para la la reali*ar reali*ar la búsqueda #así como como para ordenar la lista% se debe mandar además la función de comparación. Por e'emplo e'emplo, , si con el si!uient si!uiente e construc constructor, tor, que aleatorio con los campos nombre, dirección  teléfono

!enera !enera

un

re!istro re!istro

  !enre!6function#%5t"is.nombre6!enerarApellido#%9K K 9!enerarApellido#%9K !enre!6function#%5t"is.nombre6!enerarApellido#%9K K9#round#random#),%%X!enerarTombreR#%!enerarTombreM#%%, t"is.direccion6 !enerar+alle#%9K K9round#random#,)))%%, t"is.telefono60)))))9 round#random#,?????%%78

1e crea una lista con )) re!istros  se la ordena por el campo nombre #con el método Uuic:-1ort% randseed68 6=>8 for#i6)8i;))8i99% .pus"#neN !enre!#%%8 quic:#, randseed68   function#a,b%5return a.nombre66b.nombreX)a.nombreHb.nombreX-87%8  =5nombreAbascal Arti!as Tie$es, direccionOre!orio Pac"eco 0, telefono0//@@@7, 5nombreAlcá*ar &obo ora, direccionPas'e Estrada /, telefono0)?0/7, 5nombreAramburu &ucas Abib, direccionOeor!e Qouma 20, telefono0/)7, 5nombreA*nar +oello eanira, direccionPilinco ?0, telefono0/?(207, 5nombreCaena Iniesta Tatas"a, direccionPotosí ?0, telefono0//)7, 5nombreCala!uer Borrents Ticeto, direccionMi!uel Antel Salda 0, telefono0)/@7, 5nombreCarra!án Alemán Qene, direccionQe!imiento A*urdu ??, telefono0@7, 5nombreCarranco Quano 1amant"a, direccion\arnes 00, telefono0?/0/7, 5nombreCatlle Montserrat Sictoria, direccion&a Pa* (/, telefono0?((?7, 5nombreCatlle 1iripaca ie!o, direccionSilla 1errano ?2@, telefono0/(@@7, 5nombreCernat Tebot Sladimiro, direccionTataniel A!uirre (/0, telefono002207, 5nombreCernat Pu'ol Iris, direccionBomás Yatari @, telefono0)/)/?7, 5nombreClanes To$oa Adel!unda, direccionPotosí ()(, telefono0002/7, 5nombreClá*que* Almeida +asimiro, direccionOeor!e Qouma )2, telefono02(0/7, 5nombreColaños Carrios Qecaredo, direccionBari'a ?@?, telefono0?227, 5nombreConilla Luara"uara 1a$erio, direccionOuillermo &oa*a (?, telefono000@7, 5nombreCorrell +arba'o Lina, direccion. Prudencio Custillos 0/, telefono0)?7, 5nombreCou Mulet Marite, direccionWru!ua ?@?, telefono0)027, 5nombreCusquets Amo &eila, direccionIsabel Acrelo )?, telefono00?(7, 5nombre+abañas Cello Fmar, direccionemetrio +anelas (2, telefono0(2)@/7, 5nombre+amps &lanque ]imena, direccionIturric"a 0/, telefono0/@0(7, 5nombre+anquic"oque Esté$e* Fberto, direccionEmilio Loc"man 0/, telefono0/)27, 5nombre+arani +aparrós anae, direccionQa$elo (@2, telefono0//027, 5nombre+arani Oara Aspasia, direccion+obi'a ?(?, telefono02@)7, 5nombre+ardona 1alcedo Taim, direccionFs$aldo Molina /, telefono0)2(/(7, 5nombre+asares Qosales Lermalindo, direccionQe!imiento A*urdu /0, telefono00027, 5nombre+astells Luertas Becla, direccionEstudiantes ?@, telefono0/(@?27, 5nombre+astelló Carrios +edric, direccionWrriola!oitia 2, telefono00)(7, 5nombre+astrillo &oren*o Selasco, direccionPeru 2, telefono0?)007, 5nombre+"ana +armona Elfida, direccion. A. Martine* ?@0, telefono0)00/7, 5nombre+"arca Mora I$ana, direccionA$enida del Maestro (@), telefono0@7, 5nombre+"ico Moreno Ga'aira, direccion1ebastian Oarcia /@@, telefono0002?(7, 5nombre+"iuc"i

INTERCALACIÓN Y BÚSQUEDA

- 1=? -

+"aparro Qobertino, direccionAlfredo Sar!as 0, telefono0//7, 5nombre+"uNi Qódenas Réli4, direccionAdolfo Silar , telefono0(0?/7, 5nombre+obo Oallart Adelmo, direccionosé +arrasco ))), telefono02007, 5nombre+obo Palomares &ucrecia, direccionAble Ardu* 20, telefono0@)@)7, 5nombre+ollado Matas Lildebrando, direccionPeru 000, telefono0/@//7, 5nombre+ollo I!lesia Arabeli, direccionWru!ua 0, telefono0/2)(7, 5nombre+orominas Wría Fda, direccionPara!ua 22@, telefono0((7, 5nombre+áceres &arrea &isístrato, direccionEmilio Loc"man 0?, telefono0??207, 5nombre+éspedes Pu'ol Qees, direccionBrinidad )), telefono0?/(27, 5nombreuarte Sillalba +esarión, direccionColi$ar 0?, telefono0)@)7, 5nombreEc"e$arría +astillo Inmaculada, direccionQosendo Silla 22, telefono0()?(27, 5nombreEscudero Manrique Milena, direccionP'e. 1etesur (/, telefono0)/@/7, 5nombreEspinosa Barqui +aterina, direccion+"aco /??, telefono0)2027, 5nombreEsteban +orne'o Rrida, direccionosé +arrasco ?, telefono0//?/7, 5nombreRernánde* Oisbert Fsmundo, direccionCuenos Aires 0//, telefono0/0?7, 5nombreRerránde* Celtrán Oemma, direccionCena$ide* ?02, telefono00()0)7, 5nombreOaliano Qecio Tolbin, direccion. A. Martine* 02, telefono02))?7, 5nombreOiner Esteban Isaura, direccionBomás Yatari ((, telefono0)@@?(7, 5nombreOoñi Peña Ailen, direccionunín 0/, telefono0)0/)27, 5nombreOuaracusi +órdoba Aa4, direccionQeal Audiencia /(0, telefono0/007, 5nombreOuerrero Mir Lina, direccionFlañeta ?)/, telefono0)//7, 5nombreLeras Madrid Arnulfo, direccionIturric"a 2), telefono0?))2/7, 5nombreLierro Siana Bercio, direccion&ima Pampa ?0, telefono022@/7, 5nombreLuara"uara Carba Bico, direccionYilómetro @ 0(@, telefono0)/27, 5nombreIsern Bello Ylaus, direccionosé Mosta'o 20(, telefono0/2/)7, 5nombreI*a!uirre Fli$era &adislao, direccionSicente onoso @?, telefono0)@@(7, 5nombre&lanque Pui! &ida, direccionQe!imiento A*urdu @0, telefono0@@?/7, 5nombre&ucena 1ales Monica, direccionPara!ua 2/, telefono0@0)))7, 5nombreMan'ón áure!ui Elo, direccionestacamento /@ 2?, telefono0?@@/07, 5nombreMarí 1amper Oermán, direccion+añada 1tron!est (, telefono0?/@7, 5nombreMelénde* Sendrell emiel, direccion+apitan Wstare* ?/(, telefono02222)7, 5nombreMerino Pinedo Vamira, direccion&a &a!una //, telefono0)@2@7, 5nombreMoles Mollo Miner$a, direccionEl Sillar ?2@, telefono0@@27, 5nombreMolina +"eca Pascual, direccionosé Calli$ian /, telefono0?)07, 5nombreMorcillo Morán Li!inio, direccionA$enida uana A*urdu de Padilla 2(, telefono0?@(7, 5nombreFli$er Qo$ira Adam, direccionQosendo Silla ), telefono0()//7, 5nombreFsuna Mariscal 1ibila, direccionosé 1al!ueiro 0(@, telefono0/)0@7, 5nombrePaillo Moa Emerita, direccion&oa ?(, telefono0/)227, 5nombrePanti +alle'a Anacleto, direccionEstados Wnidos @@2, telefono0((0?7, 5nombrePedra*a Uuerol Piedad, direccionFs$aldo Molina 2(, telefono002?7, 5nombrePerelló Espar*a Terina, direccionArturo Postnas:i (, telefono02022/7, 5nombrePerera Peña Ootardo, direccionosé Mosta'o 2@, telefono0/?/)7, 5nombrePeñas Ale!ria 1aturnino, direccionose Antonio Arce (2/, telefono0?(?7, 5nombrePortillo Rranc" Siolane, direccion+añada 1tron!est /(, telefono0)?/?7, 5nombrePo*o +astillo Leráclito, direccionRortún /00, telefono02/)@27, 5nombreQeina Rlor 1i!ifredo, direccionemetrio +anelas 2, telefono02@(7, 5nombreQibas +"oque osé, direccionPrimero de mao @?(, telefono0()7, 5nombreQobledo Melero \a!ner, direccionCrasil 20, telefono00027, 5nombreQodrí!ue* +áno$as Marcial, direccionosé Mosta'o @, telefono02?/@7, 5nombreQoma Tadal Qómulo, direccionQeal Audiencia (/, telefono00)?(7, 5nombreQosell Oara Armentario, direccionPastor 1ain* 0/, telefono0()0?7, 5nombre1aldaña Posada Oastón, direccionBopater @2, telefono0@(07, 5nombre1armiento Pa*os 1"ael, direccionEmo Qees @/, telefono02)2/7, 5nombre1e!uí Palma +órdula, direccionSicente onoso ?, telefono0)@(/7, 5nombreBaboada Uuenta Audomaro,

- 1>5 -

Hernán Peñarand a !

direccionYilómetro @ ?2, telefono0@07, 5nombreBe'ada Ralcón &eocadio, direccionMonseñor Mi!uel de los 1antos ?, telefono0@//?@7, 5nombreBorrens 1aura Rla$io, direccionA. 1olares ?)(, telefono0)/7, 5nombreBorrents Marcos Wdolfo, direccionEmilio Loc"man @2, telefono0?(20)7, 5nombreBorres onoso +arolina, direccion1uipac"a ?//, telefono0@)?/7, 5nombreBorri'os Mita Ganina, direccionAnastacio Para$icini (, telefono022((/7, 5nombreBudela 1olera +oloma, direccionPas'e Estrada @2?, telefono0?20//7, 5nombreSaquero Pascual Antonio, direccionQicardo Andrade @/), telefono0?227, 5nombreSaquero Qeina Audomaro, direccionPotosí ??@, telefono00?(?7, 5nombreSilalta Rlor Marquelda, direccionulio Pin:as //, telefono0@0?@7, 5nombreSillena Carba Alem, direccionBari'a 2((, telefono0///07, 5nombreGucra Pou +andela, direccionQaúl e +órdoba 2?, telefono0/@2@)7, 5nombreVapata &ara Milca, direccionAacuc"o @, telefono022/2@7, 5nombreVara!o*a Pardo Patric:, direccion+anadá ?, telefono0?0/7>

Para encontrar, por e'emplo, el primer elemento cuo nombre comience con el apellido Be'ada3, no sólo se manda el $alor buscado, sino también la función de comparación de manera que se comparen sólo los primeros  caracteres del campo nombre3 #pues el $alor buscado sólo tiene  caracteres%

  binde4ada#,KBe'adaK,function#a,b%5return a66b.nombre.substr#),%X )aHb.nombre.substr#),%X-87% @

Uue corresponde al re!istro =@>   5nombreBe'ada Ralcón &eocadio, direccionMonseñor Mi!uel de los 1antos ?, telefono0@//?@7

Wna función de comparación más !eneral, aunque un tanto más lar!a  menos eficiente, se construe con la propiedad len!t". Por e'emplo, para ubicar el primer nombre que comience con el apellido +amps3 #sin necesidad de contar el número de caracteres del $alor buscado% se escribe binde4ada#,K+ampsK,function#a,b%5return a66b.nombre.substr#),a.len!t"%X   )aHb.nombre.substr#),a.len!t"%X-87% 2)

+uando se busca un $alor que no e4iste en la lista, por e'emplo, Pére*3, se obtiene - #un índice ine4istente% binde4ada#,KPére*K,function#a,b%5return a66b.nombre.substr#),a.len!t"%X   )aHb.nombre.substr#),a.len!t"%X-87% -

8.5.   EERCICIS Para presentar los e'emplos  e'ercicios del tema, debe crear una carpeta con el nombre tema3  !uardar en la misma todos los arc"i$os LBM& creados #e'emplos  e'ercicios%. . +ree una pá!ina LBM& con tres te4tarea3, dos botones  las etiquetas #label% que sean necesarias. En el primer te4tarea3 se deben mostrar los /))) elementos de un $ector con números aleatorios comprendidos entre   ())) ordenados ascendentemente con el método de selección. En el se!undo se deben mostrar los 2/() elementos de un $ector con números enteros aleatorios comprendidos entre   0)) ordenados ascendentemente con el método de burbu'a. En el tercer te4tarea3 se deben mostrar los elementos intercalados de los $ectores de los dos primeros te4tarea3.

INTERCALACIÓN Y BÚSQUEDA

- 1>1 -

&os elementos deben ser !enerados al "acer clic en uno de los botones  la intercalación debe tener lu!ar "aciendo clic en el otro. 2. +ree una pá!ina LBM& con dos te4tarea3, dos botones, dos input te4t3  las etiquetas #label% que sean necesarias. En el primer te4tarea3 se deben mostrar los /))) elementos de un $ector con re!istros aleatorios con los campos apellido paterno, apellido materno  nombres # o 2%. En el se!undo se deben mostrar los re!istros ordenados por los campos apellido paterno 9 apellido materno 9 nombres. &os re!istros deben ser !enerados al "acer clic en uno de los botones  deben ser ordenados, con una combinación entre los métodos de selección  de intercalación, al "acer clic en el otro. En los input te4t3 se debe mostrar el tiempo requerido para ordenar los re!istros por el método combinado  el método de selección por si solo. /. +ree una pá!ina LBM& con un te4tarea3, dos input te4t3, un button3  las etiquetas #label% que sean necesarias. En el te4tarea3 se deben mostrar los elementos de un $ector con )))) números enteros aleatorios comprendidos entre )  2)))), en uno de los input te4t3 se debe introducir el $alor a buscar  en el otro se debe mostrar la posición del $alor buscado. 1e debe "acer clic en el botón tanto para comen*ar la búsqueda con el método de búsqueda secuencial, como para continuar la búsqueda  ubicar el si!uiente $alor en el $ector. 0. +ree una pá!ina LBM& con un te4tarea3, dos input te4t3, un button3  las etiquetas #label% que sean necesarias. En el te4tarea3 se deben mostrar los elementos de un $ector con ))) nombres masculinos aleatorios, en uno de los input te4t3 se debe introducir el nombre a buscar, el cual puede ser un nombre completo o parcial  en el otro se debe mostrar la posición del $alor buscado. 1e debe "acer clic en el botón tanto para comen*ar la búsqueda con el método de búsqueda secuencial, como para continuar la búsqueda  ubicar el si!uiente $alor en el $ector. (. +ree una pá!ina LBM& con un te4tarea3, dos input te4t3, un button3  las etiquetas #label% que sean necesarias. En el te4tarea3 se deben mostrar los elementos de un $ector con )))) números enteros aleatorios comprendidos entre   ())), ordenados ascendentemente con el método 1"ell. En uno de los input te4t3 se debe introducir el $alor a buscar  en el otro se debe mostrar la posición del $alor buscado. 1e debe "acer clic en el botón para comen*ar la búsqueda con el método de búsqueda binaria. . +ree una pá!ina LBM& con un te4tarea3, dos input te4t3, un button3  las etiquetas #label% que sean necesarias. En el te4tarea3 se deben mostrar los elementos de un $ector con 2))) números nombres masculinos aleatorios, ordenados descendentemente con el método Uuic:-1ort. En uno de los input te4t3 se debe introducir el $alor a buscar, el cual puede ser un nombre completo o parcial  en el otro se debe mostrar la posición del $alor buscado. 1e debe "acer clic en el botón para comen*ar la búsqueda con el método de búsqueda binaria. @. +ree una pá!ina LBM& con un te4tarea3, dos input te4t3, un button3  las etiquetas #label% que sean necesarias. En el te4tarea3 se deben mostrar los elementos de un $ector con 2)))) números enteros comprendidos entre   /)))), ordenados descendentemente con el método 1"ell. En uno de los input te4t3 se debe introducir el $alor a buscar  en el otro se debe mostrar la posición del $alor buscado. 1e debe "acer clic en el botón para comen*ar la búsqueda con el método de búsqueda secuen-