Debuggin JavaScript Online

En esta web podeis probar vuestros scripts y ver los resultados de manera online. Muy útil para empezar a trastear con javascript.

http://jsbin.com/

Si no teneis ni idea de javascript, os aconsejo estos manuales:

http://www.hunlock.com/blogs/Essential_Javascript_–_A_Javascript_Tutorial

 

Podeis ver mi ejemplo en http://jsbin.com/otode y editarlo en http://jsbin.com/otode/edit

Este es el codigo fuente (hecho por mi) que amplia una linea de texto cada vez que haces click sobre ella:

JavaScript

if (document.getElementById('titulo')) { 
var numero=10; 
function mi_funcion_click(){ 
  document.getElementById('titulo').innerHTML = 'Smultron POTENCIA !! '+'Tamañoletra('+numero+'pt)'; 
  document.getElementById('titulo').style.fontSize=numero+"pt"; 
  numero++; 
  } 
}

Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } 
</style> 
</head> 
<body> 
 
 
  <p id="id_smultron"> 
    Hello This Code was written by <a target="_blank" href="http://smultron.es">Smultron.es</a> 
  </p> 
  <p style="font-size:10pt; cursor:pointer;" id="titulo" onClick="mi_funcion_click()"> 
    Click Aquí !! 
  </p> 
 
 
 
</body> 
</html>

Resultado

Hello This Code was written by Smultron.es

Click Aquí !!

Related posts:

  1. Capitulo1.- GENESIS
  2. Capitulo2.- Luz, La araña en PHP
  3. Aprende Ingles Online – Con Videos Subtitulados

About this entry

You’re currently reading “Debuggin JavaScript Online,” an entry on Smultron POTENCIA !!

Published:
07.29.09 / 11am
Category:
Interesante, Programacion, Web 2.0