<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body style="color:white;background-color:black">
<h4>Codigo para pruebas</h4>
<p id="campo_para_mostrar_datos"></p>
<input type="text" id="campo_para_ingresar_datos" placeholder="Ingrese informacion">
<button onclick="fn_Presionar_Boton()">Mensaje en el boton</button>
<script>
function fn_Presionar_Boton() // Codigo de ejemplo al presionar el boton
{ console.log("Iniciando fn_Presionar_Boton");
alert("Hago algo al presionar el boton");
//Codigo para recuperar
let info_campo = document.getElementById("campo_para_ingresar_datos").value;
info_campo = info_campo.trim(); // Elimina los espacios en blanco
let longitud_campo = info_campo.length; // Determina la longitud del campo.
if (longitud_campo==0) // Verifica el campo tenga texto
{ alert("No ingresaste nada"); }
else
{ alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" )
//Codigo para copiar el contenido dentro del campo de texto
document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
}//fin if
}//fin de function fn_Presionar_Boton()
</script>
</body>
</html>
LITERALES
Podemos crear un objeto en Javascript asignando un valor literal de objeto en una variable. Eso se consigue colocando dicho literal entre llaves y dentro de ellas tantas propiedades o métodos con pares "clave/valor", por medio de una sintaxis como esta:
<script>
var dimensiones =
{
altura: 34,
anchura: 455
}
</script>
Como estás viendo, tenemos una variable dimensiones. Al asignarle un literal objeto estamos realmente asignando una referencia a un objeto en la memoria creado con las propiedades que acabamos de asignar.
Las propiedades se separan por comas y se coloca siempre el nombre de la propiedad, el caracter : [dos puntos] y luego el valor de la propiedad.
Por supuesto, también podremos asignar métodos a nuestros objetos literales.
<script>
var dimensiones =
{
altura: 34,
anchura: 455,
area: function()
{
return this.altura * this.anchura;
}
}
</script>
Como ves, los métodos en Javascript simplemente son propiedades a los que les asignas una función. Dentro del código de tus métodos puedes acceder a las propiedades del objeto a través de la variable this.
Una vez creado ese objeto, puedes usar la notación punto para acceder a sus propiedades o métodos.
<script>
// Crea un objeto llamado dimensiones con tres propiedades:
// altura, anchura y area (que es una función)
var dimensiones = {
altura: 34, // Propiedad numérica
anchura: 455, // Propiedad numérica
area: function() { // Propiedad función
return this.altura * this.anchura; // Retorna el área
}
};
// Accede a la propiedad altura y le asigna un nuevo valor
dimensiones.altura = 90;
console.log(dimensiones.area()); // Retorna el área con la nueva altura (90)
// Salida: 40950
</script>
ACTIVIDADES A REALIZAR
Objetivo:Crear una aplicación web simple que permita capturar y procesar información y mostrar el resultado en una interfaz fácil de usar, utilizando un objeto con propiedades.
Consideraciones:
- El código debe estar documentado y seguir buenas prácticas de programación.
- El código debe ser legible y fácil de entender
Crea un documento HTML y su codigo JavaScript asociado.
El HTML debe tener:
- Un renglón con 2 inputs de tipo número para ingresar altura y anchura.
- Un renglón con un botón para procesar la información.
- Un renglón para presentar el resultado.
El codigo JavaScript debe:
- Capturar el valor de altura mediante un input de texto.
- Capturar el valor de anchura mediante un input de texto.
- Procesar la información al presionar el botón
- Impedir el calculo si alguno de los campos tiene información invalida : vacia ó cero. Además de informar al usuario.
- Mostrar el resultado en el párrafo.
Procura no copiar directamente la respuesta desde una IA
nuevas propiedades y métodos sobre objetos creados
Javascript es muy permisivo y nos deja hacer cosas que producirían errores en otros lenguajes. Es el caso de la asignación de valores a propiedades que no han sido creadas previamente.
RECUERDA QUE JavaScript LO PERMITA, NO SIGNIFICA QUE SEA ADECUADO. EVITA REALIZARLO
<script>
var coche = {
color: "rojo",
marca: "Opel"
}
</script>
Ahora podría crear nuevas propiedades en ese objeto asignando valores a las propiedades que no existían previamente.
<script>
coche.anoFabricacion = 2014;
</script>
Los métodos los creas asignando funciones:
<script>
coche.arrancar = function()
{
alert("rum rum");
}
</script>
Los métodos y funciones que acabamos de crear son tan válidos como los que ya estuvieran en mi objeto cuando fue definido por medio de su literal. Podré acceder a sus elementos con la notación punto, que ya conoces.
<script>
console.log(coche.color);
console.log(coche.anoFabricacion);
coche.arrancar();
</script>
ACTIVIDADES A REALIZAR
Objetivo: Buenas practicas para utilizar un objeto.
Consideraciones:
- El código debe estar documentado y seguir buenas prácticas de programación.
- El código debe ser legible y fácil de entender
Crea un documento HTML y su codigo JavaScript asociado.
El HTML debe:
- Un renglón con 2 inputs : color y marca
- Un renglón con 2 inputs : modelo y placa
- Un renglón con 1 input : kilometraje
- Un renglón para presentar : color, marca y modelo del objeto
- Un renglón para presentar la ultima operacion
El codigo JavaScript debe tener :
- Un objeto
coche con las propiedades
- color
- marca
- modelo
- placa
- kilometraje
- operacion
- metodo : establecerKilometraje; fijara el cuentakilometros, con un valor proporcionado (parametro)
- metodo : restablecerKilometraje; fijara el cuentakilometros a cero sin utilizar parametro
- La operacion funcionara de la siguiente manera :
- crearse el objeto = "salido de fabrica",
- establecer el kilometraje = "lectura de taller" y
- restablecer el kilometraje = "restablecimiento".
Procura no copiar directamente la respuesta desde una IA