Objetos

Un objeto es una colección de datos o funciones.

En el Código 46, la variable persona es un objeto porque tiene varias propiedades que es nombre_completo, edad, educación y casado.

Descargar archivo codigo046.html

Copiar enlace:

Pegar enlace en la url del explorador web y descarga el archivo:

Código 46: Variable Objeto


<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title> Ejercicio </title>
</head>
<body>

<script>
// Objeto
var persona = {
// Propiedades
nombre_completo: "Antonia Santos",
edad: 39,
educacion: "Universitario",
casado: "No"
}
// Escribir por pantalla
document.write(persona.nombre_completo);
// Escribir en la línea de abajo
document.write("<br/>");
document.write(persona.edad);
document.write("<br/>");
document.write(persona.educacion);
document.write("<br/>");
document.write(persona.casado);
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo046.html

El objeto persona contiene propiedades con sus valores (Figura 43):

Propiedad: nombre_completo
Valor: “Antonio Santos”

Propiedad: edad
Valor: 30

Propiedad: educación
Valor: “Universitario”

Propiedad: casado
Valor: “No”

Figura 43 – Vista en el explorador Web

Código 46: Variable Objeto

Para tener acceso a las propiedades del objeto persona hay dos maneras de hacerlo:
1. persona.nombre_completo
2. persona.[nombre_completo]

El nombre de la propiedad y su valor está separado por dos puntos (:).
Las propiedades están separadas por comas (,).

Métodos en un Objeto

Un objeto puede contener funciones, en un objeto puede tener funciones, en objeto persona la función se llama mostrar_nombre y la función se puede invocar de esta manera: persona.mostrar_nombre() y en la función alert(this.nombre_completo) que está dentro de la función mostrar_nombre, está la clave this, esta clave hace referencia al objeto actual (persona).

En el Código 47, la variable persona invoca la función mostrar_nombre que es “Antonio Santos”.

Descargar archivo codigo047.html

Código 47: Métodos en un Objeto

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title> Ejercicio </title>
</head>
<body>

<script>
// Objeto
var persona = {
// Propiedad
nombre_completo: "Antonia Santos",
// Función
mostrar_nombre: funtion() {
alert(this.nombre_completo);
}
}
// Invocar la función
persona.mostrar_nombre();
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo047.html

En la Figura 44, muestra el nombre completo Antonio Santos con la función alert().

Figura 44 – Vista en el explorador Web

Código 47: Métodos en un Objeto

En el Código 48, la variable texto es un objeto string.

Descargar archivo codigo048.html

Código 48: Método del Objeto String


<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title> Ejercicio </title>
</head>
<body>

<script>
// Variable string
var texto = "Hola Mundo";
</script>
</body>
</html>
Este código es para mostrar la teoría, no para ejecutarlo.

Longitud de un Objeto String (propiedad lenght)

Para obtener el número de caracteres de un objeto string se usa la propiedad lenght.

En el Código 49, con el método length calcula la longitud del texto “Colibrí” de la variable texto y se lo asigna a la varaible longitud_texto.

Descargar archivo codigo049.html

Código 49: Propiedad lenght

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title> Ejercicio </title>
</head>
<body>

<script>
// Variable string
var texto = "Colibrí";
// Longitud de la variable texto
var longitud_texto = texto.length
// Escribir por pantalla
document.write(longitud_texto);
</script>
</body>
</html>
Enlace : localhost/js_ajax_jquery/codigo049.html

En la Figura 45, el valor de la variable longitud_texto da como resultado 7 porque la variable texto tiene 7 caractéres.

Figura 45 – Vista en el explorador Web

Código 49: Propiedad lenght

Retornar un Carácter de un String

Para extraer un carácter de un string se usa corchetes ([ ]).

En el Código 50, la instrucción texto[4], extrae la letra b del texto “Colibrí” de la variable texto y se lo asigna a la variable x.

Descargar archivo codigo050.html

Código 50: Retornar un Carácter de un String

<!DOCTYPE html>

<html>

<head>

<title> Ejercicio </title>

</head>

<body>

// Variable string

var texto = "Colibrí";

// Retornar un caracter

var x = texto[4];

// Escribir por pantalla

document.write(x);

</script>

</body>

</html>

Enlace: localhost/js_ajax_jquery/codigo050.html

En la Figura 46, el valor de la variable x es b porque el primer carácter comienza con el índice 0 que es C.

Figura 46 – Vista en el explorador Web

Código 50: Retornar un Carácter de un String

Trimming (trim) de un String

El Trimming (trim) remueve los espacios en blanco al comienzo y final de un string.

En el Código 51, la propiedad trim(), remueve los espacios en blanco al comienzo y final del texto de la variable texto1.

Descargar archivo codigo051.html

Código 51: Trimming (trim) de un String

<!DOCTYPE html>

<html>

<head>

<title> Ejercicio </title>

</head>

<body>

// Variable string

var texto1 = " El azulejo esta grande ";

// Elimina los espacios en blanco a los lados

var texto2 = texto1.trim();

// Escribir por pantalla

document.write(texto2);

</script>

</body>

</html>

Enlace: localhost/js_ajax_jquery/codigo051.html

En la Figura 47, el valor de la variable texto2 es “El azulejo esta grande” porque el trim() elimina los espacios en blanco a los lados.

Figura 47 – Vista en el explorador Web

Código 51: Trimming (trim) de un String

Buscar este blog

Conceptos Básicos de JavaScript

Objetos

Comentarios

Publicar un comentario

Entradas populares de este blog

Conceptos Básicos de JavaScript