Usar Javascript Sencillito

zcriptz · 6 May 2014

Hice un Codigo Javascript para facilitar su uso el cual es este: http://nflix.net/zcriptz.js

Pueden descargarlo o bien usarlo desde la URL así:

Insertar CODE, HTML o PHP:

<script type="text/javascript" src="http://nflix.net/zcriptz.js"></script>

Tomar HTML de un elemento
Para esto se puede usar la función getHTML()
Ejemplo:

Insertar CODE, HTML o PHP:

<div id="html" onclick="alert(getHTML(this))">Este es <b>mi</b> contenido, en <i>HTML</i> y lo puedes ver haciendome click</div>

Online: http://nflix.net/ejemplos/html.php

Tomar valor de un campo
Para esto se puede usar la función getValue()
Ejemplo:

Insertar CODE, HTML o PHP:

<input type="text" id="campo"><input type="button" value="Tomar valor" onclick="alert(getValue('campo'))">

Online: http://nflix.net/ejemplos/value.php

Ocultar un elemento
Para esto se puede usar la función noshow()
Ejemplos:

Insertar CODE, HTML o PHP:

<div id="capa">Hola soy una capa</div><input type="button" value="Ocultar capa" onclick="noshow('capa')">

Insertar CODE, HTML o PHP:

<div onclick="noshow(this)">Hazme click para ocultarme</div>

Online: http://nflix.net/ejemplos/noshow.php

Mostrar un elemento
Para esto se puede usar la función show()
Ejemplos:

Insertar CODE, HTML o PHP:

<div id="capa" style="display:none">Hola una capa que no se ve&iacute;a</div><input type="button" value="Mostrar capa" onclick="show('capa')">

Online: http://nflix.net/ejemplos/show.php

Cambiar ancho de un elemento:
Para esto se puede usar la función ChangeWidth()
Ejemplo:

Insertar CODE, HTML o PHP:

<div style="background-color:green; font-weight:bold; color:white; width:300px; height:50px" onclick="ChangeWidth(this, '600px')">HAZME CLICK PARA CAMBIAR MI ANCHO</div>

Online: http://nflix.net/ejemplos/width.php

Cambiar alto de un elemento:
Para esto se puede usar la función ChangeHeight()
Ejemplo:

Insertar CODE, HTML o PHP:

<div style="background-color:green; font-weight:bold; color:white; width:300px; height:50px" onclick="ChangeHeight(this, '200px')">HAZME CLICK PARA CAMBIAR MI ALTURA</div>

Online: http://nflix.net/ejemplos/height.php

Simular click a un elemento:
Para esto se puede usar la función makeClick()
Ejemplo:

Insertar CODE, HTML o PHP:

<input type="button" onclick="makeClick('enlace')" value="Hazme click y sera como si hubieras clickeado el enlace">
<br>
<br>
<a href="http://www.google.com" target="_blank" id="enlace">Soy un enlace a Google</a>

Online: http://nflix.net/ejemplos/click.php

Hacer una redirección:
Para esto se puede usar la función Redirection()
Ejemplo:

Insertar CODE, HTML o PHP:

<div onclick="Redirection('http://www.google.com')">Hazme click y har&eacute; una redirecci&oacute;n a Google, y no soy un enlace :P</div>

Online: http://nflix.net/ejemplos/redirection.php

"Escribir" HTML en un elemento:
Para esto se puede usar la función WriteHTML()
Ejemplo:
En este ejemplo usamos getValue() para tomar el valor de el campo y colocarlo en el div.

Insertar CODE, HTML o PHP:

<input type="text" onkeyup="WriteHTML(getValue(this), 'capa2')"><br><br>

<div id="capa2">Aqu&iacute; saldr&aacute; lo que escribas en el campo de texto</div>

Online: http://nflix.net/ejemplos/writehtml.php

Añadir HTML en un elemento:
Para esto se puede usar la función AddHTML()
Ejemplo:
En este ejemplo usamos getValue() para tomar el valor de el campo y añadirlo al html del div.

Insertar CODE, HTML o PHP:

<input type="text" id="campo"><input type="button" value="Añadir HTML" onclick="AddHTML(getValue('campo'), 'capa2')"><br><br>

<div id="capa2">Aqu&iacute; abajo se a&ntilde;adir&aacute; lo que escribas en el campo de texto luego de clickear el boton<br><br></div>

Online: http://nflix.net/ejemplos/addhtml.php

Cambiar clase de un elemento:
Para esto se puede usar la función ChangeClass()
Ejemplo:

Insertar CODE, HTML o PHP:

<style>
.negro{
width:300px; height:250px; 
background:black;
color:white
}

.gris{
width:300px; height:250px; 
background: #e9e9e9;
color:black;
}

.verde{
	width:300px; height:250px; background:green; color:red
}
</style>
<input type="button" value="NEGRO" onclick="ChangeClass('negro', 'capa')"><input type="button" value="GRIS" onclick="ChangeClass('gris', 'capa')"><br><br>
<div id="capa" class="verde">HOLA SOY UNA CAPA</div>

Online: http://nflix.net/ejemplos/changeclass.php

Añadir clase a un elemento:
Para esto se puede usar la función AddClass()
Ejemplo:
En este ejemplo uso las funciones noshow() y show() que se pueden ver arriba.

Insertar CODE, HTML o PHP:

<script type="text/javascript" src="http://nflix.net/zcriptz.js"></script>
<style>
.clase1{
	width:150px; height:150px; background: black; color:white;
}

.clase2{
	border: 1px red solid; text-align:center; font-weight:bold
}

.clase3{
	border-radius:75px; font-style: italic;
}

.clase4{
	font-family:Tahoma; font-size:11px;
}

.clase5{
	margin: 0 auto; text-decoration:underline
}

.texto{
	margin: 60px 0 60px 0;
}
</style>
<input type="button" value="Clase 1" onclick="ChangeClass('clase1', 'capa'); noshow(this); show('clase2');">
<input id="clase2" style="display:none" type="button" value="Clase 2" onclick="AddClass('clase2', 'capa'); noshow(this); show('clase3');">
<input id="clase3" style="display:none" type="button" value="Clase 3" onclick="AddClass('clase3', 'capa'); noshow(this); show('clase4');">
<input id="clase4" style="display:none" type="button" value="Clase 4" onclick="AddClass('clase4', 'capa'); noshow(this); show('clase5');">
<input id="clase5" style="display:none" type="button" value="Clase 5" onclick="AddClass('clase5', 'capa'); noshow(this); noshow('sin'); show('con');">
<br><br><br><br>
<div id="capa"><div id="sin" class="texto">Soy una capa sin clases</div><div id="con" style="display:none" class="texto">Era una capa sin clases</div></div>

Online: http://nflix.net/ejemplos/addclass.php

Contar caracteres de una cadena:
Para esto se puede usar la función CountChars()
Ejemplos:
En este ejemplo uso getValue() para tomar el valor del campo y así contar la cantidad de caracteres.

Insertar CODE, HTML o PHP:

<script type="text/javascript">
function miFuncion(){
	texto = getValue('campo');
	caracteres = CountChars(texto);
	alert(caracteres);
}
</script>
<input type="text" id="campo"><input type="button" value="Contar caracteres" onclick="miFuncion()">

Insertar CODE, HTML o PHP:

<div onclick="alert(CountChars(getHTML(this)))">Haz click para contar cuantos caracteres tengo :)</div>

Online: http://nflix.net/ejemplos/countchars.php

kanikase · 7 May 2014

Estan buenos

zcriptz · 7 May 2014

kanikase dijo:
Estan buenos

Gracias :encouragement:

Todavía no puse todos!

Ezequiel Velarde · 7 May 2014

Algun dia le dare utilidad, gracias. :encouragement:

IsmaReal · 7 May 2014

oooh espectacular!
seria una especia de zQuery? o jCriptz? jajajaj

zcriptz · 7 May 2014

IsmaReal dijo:
oooh espectacular!
seria una especia de zQuery? o jCriptz? jajajaj

jajaja xD!

zQuery queda buena jaja xD

nahuelvazquez6 · 1 Jun 2014

Se agradece, muy bueno!! Me sirvio

Billy Mays · 2 Jun 2014

muy bueno bro :encouragement:

nullPointer · 2 Jun 2014

Enhorabuena por el curro!

Sigue así.

Un saludo.