Manual JavaScript. Ejemplos de código

Actualizado el 02/12/2008 < > 1 Comentario

Resúmen: En este apéndice vamos a estudiar algunos ejemplos de código JavaScript que podemos adaptar a nuestras páginas.

Meneame Bitacoras

Ejemplos de código JavaScript

En este apéndice vamos a estudiar algunos ejemplos de código JavaScript que podemos adaptar a nuestras páginas. En estos ejemplos aparecerán también objetos y clases nuevas que no hemos visto a lo largo del curso, para extender el conocimiento que ya tenemos del código de scripts.

Caso 1: Como conseguir que un enlace gane o pierda el foco de entrada.

 <html>

  <head>

  <style type="text/css">

  a:active {color:blue}

  </style>

  <script type="text/javascript">

  function getfocus()

  {

  document.getElementById('w3s').focus();

  }

  function losefocus()

  {

  document.getElementById('w3s').blur();

  }

  </script>

  </head>

  <body>

  <a id="w3s" href="http://www.google.com">Google.com</a>

  //solo por presentacion

  <form>

  <input type="button" onclick="getfocus()"
  value="Coge el foco">

  <input type="button" onclick="losefocus()"
  value="Pierde el foco">

  </form>

  </body>

  </html>

getElementById es una función de document que permite llamar a un objeto concreto de la página. Esta es la forma normal de acceder a los elementos de la página, aunque como en el caso de los formularios, también es posible acceder a algunos elementos directamente usando sus nombres como propiedades de objetos.

Caso 2: seleccionar el texto de un cuadro de texto y darle el foco.

 <html>

  <head>

  <script type="text/javascript">

  function setfocus()

  {

  document.forms[0].txt.select();

  document.forms[0].txt.focus();

  }

  </script>

  </head>

  <body>

  <form>

  <input type="text" name="txt" size="30" value="¡Hola!"> 

  <input type="button" value="Selecciona texto"
 onclick="setfocus()"> 

  </form>

  </body>

  </html>

Como podemos ver, es posible conseguir el contenido de los formularios de la página por medio de la matriz forms[] de document.

Caso 3: obtener y cambiar la URL de un formulario.

 <html>

  <head>

  <script type="text/javascript">

  function getAction()

  {

  var x=document.forms.myForm;

  alert(x.action);

  }

  function changeAction(action)

  {

  var x=document.forms.myForm;

  x.action=action;

  alert(x.action);

  }

  </script>

  </head>

  <body>

  <form name="myForm" action="ejemplos.php">

  <input type="button" onclick="getAction()" 

  value="Ver el valor del atributo action">

  <br><br>

  <input type="button" onclick="changeAction('hola.php')" 

  value="Cambiar el valor del atributo action">

  </form>

  </body>

  </html>

En este ejemplo podemos ver otra forma de utilizar los formularios en el código JavaScript.

Caso 4: como actualizar dos iframes al mismo tiempo.

 <html>

  <head>

  <script language="javascript">

  function twoframes()

  {

  document.all("frame1").src="frame_c.htm";

  document.all("frame2").src="frame_d.htm";

  }

  </script>

  </head>

  <body>

  <iframe src="frame_a.htm" name="frame1"></iframe>

  <iframe src="frame_b.htm" name="frame2"></iframe>

  <br>

  <form>

  <input type="button" onclick="twoframes()" 

  value="Cambiar la URL de los dos iframes">

  </form>

  </body>

  </html>

Escríbanse las cuatro páginas de los frames que se especifican y probar. Es muy sencillo darse cuenta de que la función all nos permite acceder a los distintos elementos de la página, al igual que lo hemos hecho antes de otras formas.

Caso 5: conocer los datos del navegador.

 <html>

  <body>

  <script type="text/javascript">

  document.write("<p>Navegador: ");

  document.write(navigator.appName + "</p>");

  document.write("<p>Versión del navegador: ");

  document.write(navigator.appVersion + "</p>");

  document.write("<p>Código: ");

  document.write(navigator.appCodeName + "</p>");

  document.write("<p>Plataforma: ");

  document.write(navigator.platform + "</p>");

  document.write("<p>Cookies habilitadas: ");

  document.write(navigator.cookieEnabled + "</p>");

  document.write("<p>Cabecera de agente de
usuario del navegador: ");

  document.write(navigator.userAgent + "</p>");

  </script>

  </body>

  </html>

Caso 6: conocer los datos relacionados con la pantalla.

 <html>

  <body>

  <script language="javascript">

  document.write("Resolución de pantalla: ");

  document.write(screen.width + "*" + screen.height);

  document.write("<br>");

  document.write("Area visible disponible: ");

  document.write(screen.availWidth + "*" + screen.availHeight);

  document.write("<br>");

  document.write("Resolución de color: ");

  document.write(screen.colorDepth);

  document.write(" bits<br>");

  </script>

  </body>

  </html>

Caso 7: refrescar el contenido de una página.

 <html>

  <head>

  <script type="text/javascript">

  function refresh()

  {

  window.reload();

  }

  </script>

  </head>

  <body>

  <form>

  <input type="button" value="Refrescar página"
onclick="refresh()">

  </form>

  </body>

  </html>

Caso 8: Generar un reloj a intervalos de un segundo.

 <html>

  <head>

  <script language="javascript">

  var intval=""

  function start_Int()

  {

  if(intval=="")

  {

  intval=window.setInterval("start_clock()",1000);

  }

  else

  {

  stop_Int();

  }

  }

  function stop_Int()

  {

  if(intval!="")

  {

  window.clearInterval(intval);

  intval="";

  document.formu.tiempo.value="Tiempo detenido";

  }

  }

  function start_clock()

  {

  var d=new Date();

  var sw="am";

  var h=d.getHours();

  var m=d.getMinutes() + "";

  var s=d.getSeconds() + "";

  if(h>12)

  {

  h-=12;

  sw="pm";

  }

  if(m.length==1)

  {

  m="0" + m;

  }

  if(s.length==1)

  {

  s="0" + s;

  }

  document.formu.tiempo.
  value=h + ":" + m + ":" + s + " " + sw;

  }

  </script>

  </head>

  <body>

  <form id="formu" name="formu">

  <input type="text" name="tiempo" value="Tiempo parado">

  </form>

  <input type="button" value="Empezar" onclick="start_Int()">

  <input type="button" value="Parar" onclick="stop_Int()">

  <p>Este ejemplo actualiza el contenido del cuadro
de texto cada segundo. 

  Pulsa "Empezar" para iniciar la función setInterval.
Pulsa "Parar" para detener el 

  tiempo con la función clearInterval.</p>

  </body>

  </html>

Estudiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que podremos detener el intervalo usándolo en la llamada a clearInterval. Especialmente interesante es la función start_clock, que formatea la hora para su visualización.

Meneame Bitacoras

Publicado el 02/12/2008, última actualización 02/12/2008.

Seguir @lawebera

Autor: Marcos Legido Hernández

URL: Licencia GNU

Añadir Comentario (Subir al texto)

1 Comentario

cristian robledo cantillana
lo encontre muy didactico y entretenido, facil de entender, gracias..por favor mandar en tutorial a mi email… gracias

Lunes, 18 de octubre 2010

(Subir al texto)

Añadir Comentario