Entrada destacada

Como usar enums en Android, kotlin

el
0

Introducción al acceso de elementos html en JavaScript

el
En el siguiente ejemplo se muestra como obtener los valores de los campos "input" desde javascript.
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8">
 <title>Ejemplo Uno</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <style type="text/css">
  .form-group{
   padding: 15px;
  }
 </style> 
 
</head>
<body>
 <div class="container">
  <div class="form-group">
   <input type="text" id="textoEntrada" value="hola" name="" class="form-control">
   <script type="text/javascript">
    var inputEntrada = document.getElementById("textoEntrada"); //Objeto
    var textoInputEntrada = inputEntrada.value; //Obteniendo texto del input

    console.log(textoInputEntrada.toUpperCase());

   </script>
  </div>  
 </div> 
</body>
</html>

El ejemplo es un convertidor de minúsculas a mayúsculas, el valor a convertir ya está dado desde el elemento html en el atributo "value" y el resultado se muestra en consola.


Estilos

Usamos Bootstrap para darle estilo al input utilizando la clase .form-control y mediante una hoja de estilo se agrega un padding al elemento contenedor del input.

Para entender mejor como integrar bootstrap a paginas html haz clic aquí.

Variables en Javascript

Una variable se define con la palabra reservada "var", seguido por el nombre que le queramos poner a la variable (Ejemplos: nombre, apellidoPaterno, resultadoDeSuma). Los valores que pueden guardar las variables pueden ser números, texto, arreglos, objetos.

Un caso especial de variable son los objetos que hacen referencia a un elemento de html, para obtener una referencia mediante su "id" usamos document.getElementById ("idDelElemento");

document es el objeto que representa a todo el documento html y mediante este objeto podemos acceder a cada parte del html.

Para ver el resultado se debe abrir el inspector del navegador y ver en la zona de consola, ya que el resultado se imprime mediante la función console.log("texto").

Mediante console.log() se puede imprimir casi cualquier objeto no sólo texto. Intenta imprimir el objeto que representa el "input" o sea la variable inputEntrada.

console.log(inputEntrada);









Una vez obtenido el elemento como objeto javascript podemos obtener cada uno de sus propiedades, por ejemplo el type, id y value.







Funciones de cadenas de texto (String)







Existen funciones de javascript para aplicar formato a las cadenas de texto.







Algunos ejemplos:







toUpperCase(): Convierte texto a mayúsculas.



toLowerCase(): Convierte texto a minúsculas.



length: Obtiene el tamaño de la cadena.



charAt(posición): Accede a un carácter individual de una cadena en la posición dada.







Puedes ver el código y resultado a continuación (recuerda para ver la conversión tienes que abrir la consola del navegador).



See the Pen 
  Obtener valor de un input by Jesus Tepec (@JesusTepec)
  on CodePen.








Comenta tus dudas en los comentarios.























































Comentarios











Publicar un comentario