Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje16-12-2013, 05:22 (UTC)    
Título del mensaje: [Javascript] Generador de Nick

COMO CREAR UN GENERADOR DE NICK USANDO JAVASCRIPT

Vamos a comenzar armando primero el script comenzando con el lenguaje basico.

Código:
<script languaje=javascript> Documento </script>


asi estamos listo para armar el documento del script, vamos a ir paso a paso.

agregamos la función de generar.

Código:
function generate(){


dejamos abierto el código, Si es necesario podemos darle una entrada antes del texto que vamos a escribir cuando lo generemos, para eso vamos a usar "entrada"

Código:
entrada = "Hola "


seguiremos vamos a poner nuestro espacio para que se genere nuestro nick, usaremos nickName.

Código:
nickName = ""


es importante dejar las comillas sin texto ya que ese lugar es donde el visitante atraves del input pueda escribir su texto nick.

ahora si pasemos al documento con formulario y el nickName que pusimos, el documento correcto seria asi.

Código:
if(document.formulario.nickName.value != "")


esto hará que el documento lea el formulario + lo que escribiremos y pasamos agregar la entrada.

Código:
{entrada += "" + document.formulario.nickName.value}


esto lo vamos a poner en una linea.

Código:
if(document.formulario.nickName.value != ""){entrada += "" + document.formulario.nickName.value}


Así queda.

Ahora como ultimo paso vamos a llamar el documento nickName para que podamos hacerlo andar correctamente.
Usamos if(documento){nickName} en documento usamos el mismo código que en el principio.

Código:
if(nickName != ""){nickName}


Para terminar vamos a validar el documento del textarea, que seria el campo regenerativo de lo que vamos a escribir, para eso ponemos todos los documentos que hicimos antes, excepto el nickName.

Código:
document.formulario.textcode.value = entrada


ahora cerramos el documento y el script.
Código:

}
</script>


Ya con el javascript terminado, vamos hacer la estructura para que pueda funciónar para aquellos que puedan generar su nick.


PASO 2 - HTML

Vamos con el formulario html
La estructura normal es.

Código:
<form> inputs </form>


Vamos a nombrar el formulario.

Código:
<form name="#">


En el javascript le pusimos formulario, entonces ese nombre llevará.

Código:
<form name="formulario">


Todavia no cerramos el formulario, ahora vamos a pasar con los input.

La estructura normal seria.

Código:
<input>


y le agreamos un name igual que el formulario del paso anterior, en este caso seria input donde el name será el nickName (respeten las mayuscula)

Código:
<input name="nickName" />


Solo pondremos eso, hasta ahi ya tenemos el campo para poder escribir, ahora agregamos el boton para que se genere el javascript, para eso usamos el mismo boton submit de envia en lo cual cambiaremos una proporciónes del código, que seria en button.

Código:
<input type="button" name="button" value="Generar" onclick="generate()" />


es importante comenzar con input, y luego los vamos type (es el tipo de boton) name (el nombre del boton que se conecta) el value seria el texto del boton, ahora esta parte es la mas importante.
como en el javascript le pusimos función de generate = function generate() vamos a poner onclick generate.
Esto hará que se lea el documento que hicimos anteriormente.

Ya tenemos el campo y el boton de generar, ahora lo unico que nos falta es el campo donde se verá nuestra vista previa de lo que hayamos escribido.
Usaremos el textarea y el textcode que pusimos en el javascript.
La estructura normal es..

Código:
<textarea></textarea>


Ahora pasamos a agregarle valores.

Código:
<textarea name="textcode" id="code"></textarea>


le agregamos el valor textcode lo que le pusimos en el documento asi lo lee y si hicimos estos pasos de conexiones con el documento, esto deberia andar perfectamente sin ningun error.
No nos olvidemos de cerrar el campor del formulario que todo esto va dentro del campo.

Código:
</form>


Vista previa.



#Ver tutorial en página web
#Ver el Generador
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group