Bienvenidos sean a este post, despues de haber hablado sobre los objetos de navegador mas comunes y populares pasemos ahora a los objetos del lenguaje.
En este caso hablaremos sobre un objeto que nos permittira manipular las cadenas de texto, si bien nosotros a diferencia de otros lenguajes no necesitamos definir que la variable u objeto sea de tipo String sino que se convierte automaticamente al asignarle un caracter, es bueno saber las propiedades y metodos que tendremos disponibles para manejarlas, las propiedades de este objeto son:
- length, valor numerico con la cantidad de caracteres en dicha cadena
- prototype, permite asignar nuevas propiedades al objeto String
Pasemos a continuacion a hablar sobre algunos metodos disponibles:
- anchor(nombre), crea un anchor asignado al nombre informado
- big(), muestra la cadena con fuente grande
- blink(), crea un efecto intermitente en la cadena
- charAt(indice), devuelve el caracter en el indice informado
- eval(), evalua la cadena como una sentencia en referencia al objeto String
- fixed(), muestra la cadena con una fuente proporcionada
- fontColor(color), cambia el color con el que se muestra la cadena
- fontSize(tamano), cambia el tamaño de la cadena con la informada
- indexOf(cadena_buscada, indice), devuelve la posicion de primera ocurrencia de la cadena_buscada dentro de la cadena actual, indice es opcional si se informa comienza desde ahi sino desde el inicio
- italics(), muestra la cadena en cursiva
- lastIndexOf(cadena_buscada, indice), es igual al indexOf pero en lugar de la primera ocurrencia devuelve la ultima ocurrencia, indice tambien es opcional.
- link(url), convierte la cadena en un link, el url informado se asigna al HREF
- small(), muestra la cadena con una fuente pequeña
- split(separador), convierte la cadena en un array en base al separador, sino encuentra el separador el array es igual a la cadena
- strike(), muestra la cadena tachada
- sub(), muestra la cadena con formato subindice
- sup(), muestra la cadena con formato superindice
- toLowerCase(), convierte toda la cadena a minusculas
- toUpperCase(), convierte toda la cadena a mayusculas
- valueOf(), convierte el valor a su tipo primitivo
- substring(inicio, final), extrae la porcion de la cadena en el rango indicado entre inicio y final
Como podemos ver en este listado tenemos muchas opciones interesantes para nuestras cadenas de texto, para entenderlo un poco mejor veamos el siguiente ejemplo:
<html>
<head>
<script language="javascript">
<!--
document.title="Ejemplos de String()";
function crearCuerpo()
{
var texto="Esto es un texto de ejemplo.";
var textin="";
document.write("italics(): " + texto.italics() + "<br>");
document.write("toLowerCase(): " + texto.toLowerCase() + "<br>");
document.write("toUpperCase(): " + texto.toUpperCase() + "<br>");
document.write("sup(): " + texto.sup() + "<br>");
document.write("sub(): " + texto.sub() + "<br>");
document.write("big(): " + texto.big() + "<br>");
document.write("small(): " + texto.small() + "<br>");
document.write("Ejemplo de substring: " + texto.substring(11,16) + "<br>")
document.write("Ejemplo de split: <br>");
var a=texto.split(" ");
for(b=0;b<a.length;b++)
document.write(a[b] + "<br>");
for(b=0;b<a.length;b++)
textin+=a[b] + "->";
document.write(textin.substring(0,textin.length-2));
}
//-->
</script>
</head>
<body>
<script language="javascript">crearCuerpo()</script>
</body>
</html>Hablemos primero del codigo HTML, es simple y conciso, es un clasico cuerpo HTML el cual por medio de un tag de SCRIPT llama a la funcion crearCuerpo, la misma se encuentra en el otro tag SCRIPT que esta ubicado en el tag HEAD, hablemos sobre la funcion en cuestion.
Antes de la funcion primero le da un nombre a la pagina por medio de la propiedad title y el objeto document, luego viene la funcion donde primero crearemos un variable llamada texto donde almacenaremos un texto de ejemplo, luego crearemos otra variable vacia llamada textin, despues vendran una serie de lineas donde utilizaremos el document.write para mostrar un mensaje y un metodo para la cadena guardada en texto, despues le agregaremos un salto de linea de HTML, los metodos que usaremos son:
- italics
- toLowerCase
- toUpperCase
- sup
- sub
- big
- small
- substring
En el ultimo metodo, substring, le diremos que extraiga la subcadena de texto entre la posicion 11 y 16, por ultimo haremos dos ejemplos de split, primero crearemos el array el cual se llamara a donde pueden ver que utilizamos el split con texto y el separador va a ser el espacio en blanco pero aca puede usar la coma (,), el punto y coma(;), el punto (.) o cualquier letra o numero lo ideal es utilizar todo aquello que se usa para separar las distintas palabras, una vez creado nuestro array utilizaremos dos bucles for, analicemos el primero:
for(b=0;b<a.length;b++)
document.write(a[b] + "<br>");Este es simple, utilizaremos a length para que nos informe el total de elementos en a y a su vez sea el limite de nuestro bucle, el bloque de instrucciones es mostrar en pantalla los valores de cada posicion almacenados en a, veamos el segundo bucle:
for(b=0;b<a.length;b++)
textin+=a[b] + "->";
document.write(textin.substring(0,textin.length-2));El condicional del bucle es igual al anterior pero en lugar de mostrarlo en pantalla lo almacenamos en textin y a su vez le agregamos un separador especial, como este separador va despues del texto nos va a quedar un texto con un adicional que no necesitamos y para ello volvemos a usar substring pero esta vez sobre textin, donde iniciaremos en cero, en todo lenguaje la primera posicion siempre es cero, y el final sera determinado por la cantidad de caracteres en textin pero restandole dos que es la cantidad de caracteres de nuestro separador, esto permitira eliminarlo de textin, si lo probamos en un navegador la pantalla queda asi
Como pueden ver en la imagen, observen como se aplico cada efecto, especialmente noten la diferencia entre cambiar todas las letras a mayusculas o minusculas y agrandar o reducir las fuentes del texto, tambien el efecto de sup y sub, el de substring donde extrajimos la palabra texto, y por ultimo los dos efectos de split, el primer bucle donde muestra valor por valor y despues lo mismo pero con el separador especial, si desean prueben de comentar o eliminar la ultima linea de la funcion (donde utilizamos de vuelta el substring) para ver que sucede.
En resumen, hoy hemos visto al objeto String, uno de los objetos propios del lenguaje, hemos visto sus propiedades, sus metodos, hemos hecho un ejemplo, y hemos visto como modificar texto, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 