Programación en JavaScript / Ejemplos de código
De Wikilibros, la colección de libros de texto de contenido libre.
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.
[editar] Caso 1: Cómo 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">Visita 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.
[editar] 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 mundo!">
<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.
[editar] 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.
[editar] 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.
[editar]
<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>
[editar] 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>
[editar] Caso 7: refrescar el contenido de una página.
<html>
<head>
<script type="text/javascript">
function refresh()
{
window.location.reload();
}
</script>
</head>
<body>
<form>
<input type="button" value="Refrescar página" onclick="refresh()">
</form>
</body>
</html>
[editar] 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.
[editar] Caso 9: Generar otro reloj, fecha y hora a intervalos de un segundo.
<html>
<head>
<title>Proforma de Computadora</title>
<script>
function relojFecha(){
var mydate=new Date();var year=mydate.getYear();
if (year < 1000)year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10)daym="0"+daym;
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado");
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
"Septiembre","Octubre","Noviembre","Diciembre");
var horas = mydate.getHours();
horas = (horas<10)?"0"+horas:horas;
var minutos = mydate.getMinutes();
minutos = (minutos<10)?"0"+minutos:minutos;
var segundos = mydate.getSeconds();
segundos = (segundos<10)?"0"+segundos:segundos;
document.getElementById("idReloj").innerHTML = "<"+"small><"+"font color='000000' face='Verdana'>"+
dayarray[day]+" "+daym+" de "+montharray[month]+" de "+
year+" "+horas+":"+minutos+":"+segundos+"<"+"/font><"+"/small>";
setTimeout('relojFecha()',1000);
}
</script>
</head>
<body onload="relojFecha()">
<p id="idReloj"></p>
</body>
</html>
Téngase en cuenta que, a diferencia del anterior ejemplo, el reloj está orientado a usar setTimeout, que permite lanzar la función relojFecha cada segundo. Por ello, no se puede parar y se lanza usando el evento onload de body.
