Minúsculas a mayúsculas JavaScript Herramienta Convertidor | Project Web App

Aquí, vamos a aprender más sobre la JavaScript mediante un ejemplo que es minúsculas a mayúsculas herramienta de conversión .

Hola! A veces, los principiantes siempre les resulta difícil conseguir la aplicación de la teoría que aprenden en la programación o un idioma determinado.

En este artículo, vamos a ver otra aplicación de JavaScript. Veremos el uso / aplicación de objetos de JavaScript y propiedades / métodos para construir una aplicación web que convertidos en minúsculas a mayúsculas las letras .

La aplicación obtendrá la entrada del usuario a través de un cuadro de texto o área de texto y de salida voluntad el resultado en el mismo cuadro de texto.

Parece magia justo !!!

Usted puede pensar que la aplicación del conocimiento es el mismo que cuando usted estaba recibiendo conferencias sobre él! Pero eso no es cierto.

La aplicación de todos los conceptos de la programación necesita consejos adicionales y conocimientos para tener éxito.

En primer lugar, vamos a empezar por revisar la sintaxis de los métodos de objeto cadena de JavaScript …

métodos de cadena JavaScript se utilizan para realizar tareas específicas en objetos de cadena o cadenas (algunas).

class ejemplo:

    var x = hello.toUpperCase();

asigna el texto hola a la variable x en mayúsculas.

Ahora, vamos a pasar a nuestro proyecto.

Abra un editor de texto y escriba el código de abajo.

Guarde el archivo con el nombre uppercase.html

NB: Puede seguir utilizando su propio estilo CSS deseada!

En el For de este proyecto, conseguiremos la entrada en el cuadro de texto / área usando su elemento y luego aplicamos el método objeto de cadena JavaScript para él.

Código:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style-index.css">
</head>
<body>
<div id="wrapper">
<div id="top">
<a href="https://go237.com"><img src="images/logo.png" alt="comic.browserling.com logo" title="Tools For All"></a>
</div>
<div id="body">
<h1>Coders</h1>
<div id="text">
Good coders code, great coders reuse.
</div>
<hr>
<center>
<script type=t ext/javascript>
function convert (){ w = document.getElementById('#1').value; var p = w.toUpperCase(); document.getElementById('#1').value = p ; }
</script>
<center>
<form>
<textarea name="text" rows="10" cols="30" placeholder='Your text here!' id='#1'></textarea>
<br/>
<br/>
<img id='pic' src="1.gif" width: '30%'>
<br/>
<br/>
<input type="button" onclick='convert();' value='Convert!' ); '></button>

</center>
</form>

  </body>
</html>

En este proyecto, utilicé mis propios estilos CSS. Usted puede sentirse libre de utilizar cualquier que desee.

abrir el archivo HTML y poner a prueba su aplicación web.

Salida de la imagen:

Lowercase to Uppercase Converter JavaScript Tool | Web App Project - 4
Lowercase to Uppercase Converter JavaScript Tool | Web App Project - 5

Gracias class de codificación conmigo. Tus comentarios son mas que bienvenidos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *