domingo, 19 de junio de 2011

Funciones que retornan un valor.

Son comunes los casos donde una función, luego de hacer un proceso, retorne un valor.
Práctica: Realizar una función que reciba un valor entero comprendido entre 1 y 5. Luego retornar en letra el valor recibido.
<html>
<head>
</head>
<body>
<script language="javascript">
function convertirLetra(x)
{
  if (x==1)
    return "uno";
  else
    if (x==2)
      return "dos";
    else
      if (x==3)
        return "tres";
      else
        if (x==4)
          return "cuatro";
        else
          if (x==5)
            return "cinco";
          else
            return "valor incorrecto";
}

var valor;
valor=prompt("Ingrese un valor entre 1 y 5","");
valor=parseInt(valor);
var r;
r=convertirLetra(valor);
document.write(r);
</script>
</body>
</html>

Práctica: Realizar  una función que reciba una fecha con el formato de día, mes y año y retorne un string con un formato similar a: "Hoy es 20 de junio de 2011".
<html>
<head>
</head>
<body>
<script language="javascript">

function formatearFecha(dia,mes,año)
{
  var s='Hoy es '+dia+' de ';
  switch (mes) {
  case 1:s=s+'enero ';
         break;
  case 2:s=s+'febrero ';
         break;
  case 3:s=s+'marzo ';
         break;
  case 4:s=s+'abril ';
         break;
  case 5:s=s+'mayo ';
         break;
  case 6:s=s+'junio ';
         break;
  case 7:s=s+'julio ';
         break;
  case 8:s=s+'agosto ';
         break;
  case 9:s=s+'septiembre ';
         break;
  case 10:s=s+'octubre ';
         break;
  case 11:s=s+'noviembre ';
         break;
  case 12:s=s+'diciembre ';
         break;
  } //fin del switch
  s=s+'de '+año;
  return s;
}


document.write(formatearFecha(20,6,2011));
</script>
</body>
</html>
Programación orientada a objetos

Clase Date

JavaScript dispone de varias clases predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas.

Esta clase nos permitirá manejar fechas y horas. Se invoca así:
fecha = new Date();//creación de un objeto de la clase Date
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);
Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales, obtenidas del reloj de nuestra computadora. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Así, por ejemplo:
navidad06 = new Date(2006, 11, 25)
El objeto Date dispone, entre otros, de los siguientes métodos:
  getYear()
  setYear(año)
    Obtiene y coloca, respectivamente, el año de la fecha.
    Éste se devuelve como número de 4 dígitos excepto en el
    caso en que esté entre 1900 y 1999, en cuyo caso
    devolverá las dos últimas cifras.
  getFullYear()
  setFullYear(año)
    Realizan la misma función que los anteriores, pero sin
    tanta complicación, ya que siempre devuelven números 
    con todos sus dígitos.
  getMonth()
  setMonth(mes)
  getDate()
  setDate(dia)
  getHours()
  setHours(horas)
  getMinutes()
  setMinutes(minutos)
  getSeconds()
  setSeconds(segundos)
    Obtienen y colocan, respectivamente, el mes, día, hora,
    minuto y segundo de la fecha.
  getDay()
    Devuelve el día de la semana de la fecha en forma de
    número que va del 0 (domingo) al 6 (sábado)
Ejemplo: Mostrar en una página la fecha y la hora actual.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mostrarFechaHora()
{
  var fecha
  fecha=new Date();
  document.write('Hoy es ');
  document.write(fecha.getDate()+'/');
  document.write((fecha.getMonth()+1)+'/');
  document.write(fecha.getYear());
  document.write('<br>');
  document.write('Es la hora ');
  document.write(fecha.getHours()+':');
  document.write(fecha.getMinutes()+':');
  document.write(fecha.getSeconds());
}
//Llamada a la función
mostrarFechaHora();
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

lunes, 13 de junio de 2011

Código capas

<HTML>
<HEAD>
<TITLE> Menus con java y capas</TITLE>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</HEAD>
<BODY BGCOLOR="white">
<P ALIGN="CENTER"> <B>DOCENTE: </B> ISC. REYNA CARLOTA TUNALES DEL RIVERO</P>
<B> "CREAR MENÚS USANDO JAVASCRIPT Y CAPAS"</B></P>
<P ALIGN="CENTER"><B>6TO. SEMESTRE GRUPO: </B>  </P>
<P ALIGN="JUSTIFY"><B>NOMBRE DEL ALUMNO:</B>  </P>
<HR SIZE="9" COLOR="#0000FF">
<CENTER><H1>CREANDO MENÚS USANDO JAVASCRIPT Y CAPAS</H1></CENTER>
<!--Creando la tabla principal:-->
<table border="1" bgcolor="#fffc59">
<!--Creando el menu1:-->
<tr><td><div align="center"><a name="#" onMouseOver="MM_showHideLayers('Menu1','','show');MM_showHideLayers('Menu2','','hide','Menu3','','hide','Menu4','','hide')">
Enlace 1</a>
<span id="Menu1" style="position:absolute; width:100px; height:115px; z-index:1; left: 13px; top:331px; overflow: visible; visibility: hidden;">
             
<!--submenus del menu1-->
<table width="162" border="1" cellspacing="0" cellpadding="0">
                      <tr>
<td width="158" bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace11.html">Enlace11</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace12.html">Enlace12</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace13.html">Enlace13</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace14.html">Enlace14</a></font></strong></td>
                      </tr>
                      </table></span></div></td>
<!--Creando el menu2:-->
<td><div align="center"><a name="#" onMouseOver="MM_showHideLayers('Menu1','','hide');MM_showHideLayers('Menu2','','show','Menu3','','hide','Menu4','','hide')">
Enlace 2</a>
<span id="Menu2" style="position:absolute; width:100px; height:115px; z-index:1; left:73px; top:331px; overflow: visible; visibility: hidden;">
             
<!--submenus del menu2-->
<table width="162" border="1" cellspacing="0" cellpadding="0">
                      <tr>
<td width="158" bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace11.html">Enlace21</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace12.html">Enlace22</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace13.html">Enlace23</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace14.html">Enlace24</a></font></strong></td>
                      </tr>
                      </table></span></div></td>
<!--Creando el menu3:-->
<td><div align="center"><a name="#" onMouseOver="MM_showHideLayers('Menu1','','hide');MM_showHideLayers('Menu2','','hide','Menu3','','show','Menu4','','hide')">
Enlace 3</a>
<span id="Menu3" style="position:absolute; width:100px; height:115px; z-index:1; left:128px; top:331px; overflow: visible; visibility: hidden;">
             
<!--submenus del menu3-->
<table width="162" border="1" cellspacing="0" cellpadding="0">
                      <tr>
<td width="158" bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace31.html">Enlace31</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace32.html">Enlace32</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace33.html">Enlace33</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace34.html">Enlace34</a></font></strong></td>
                      </tr>
                      </table></span></div></td>
<!--Creando el menu4:-->
<td><div align="center"><a name="#" onMouseOver="MM_showHideLayers('Menu1','','hide');MM_showHideLayers('Menu2','','hide','Menu3','','hide','Menu4','','show')">
Enlace 4</a>
<span id="Menu4" style="position:absolute; width:100px; height:115px; z-index:1; left:185px; top:331px; overflow: visible; visibility: hidden;">
             
<!--submenus del menu4-->
<table width="162" border="1" cellspacing="0" cellpadding="0">
                      <tr>
<td width="158" bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace41.html">Enlace41</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace42.html">Enlace42</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#FFCC99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace43.html">Enlace43</a></font></strong></td>
                      </tr>
                      <tr>
<td bgcolor="#ffcc99"><strong><font color="#ffcc99" size="2" face="Times New Roman, Times, serif">
<a href="enlace44.html">Enlace44</a></font></strong></td>
                      </tr>
                      </table></span></div></td>
</table>
</body>
</HTML>

jueves, 9 de junio de 2011

A mis alumnos que se encuentran enfermos

Yecenia  y Joan, mucho ánimo, mucha fuerza, echenle ganas, espero que se recuperen pronto.

Uso del acumulador

Explicaremos el concepto de un acumulador con un ejemplo. Problema: Desarrollar un programa que permita la carga de 5 valores por teclado y nos muestre posteriormente la suma.
<script language="javascript">
var x=1;
var suma=0;
var valor;
while (x<=5)
{
  valor=prompt('Ingrese valor:','');
  valor=parseInt(valor);
  suma=suma+valor;
  x=x+1;
}
document.write("La suma de los valores es "+suma+"<br>");
</script>

En este problema, a semejanza de los anteriores, llevamos un CONTADOR llamado x que nos sirve para contar las vueltas que debe repetir el while.
También aparece el concepto de ACUMULADOR (un acumulador es un tipo especial de variable que se incrementa o decrementa con valores variables durante la ejecución del programa).
Hemos dado el nombre de suma a nuestro acumulador. Cada ciclo que se repita la estructura repetitiva, la variable suma se incrementa con el contenido ingresado en la variable valor.

 Este es un seguimiento del programa planteado. Los números que toma la variable valor dependerá de qué cifras cargue el operador durante la ejecución del programa.
Hay que tener en cuenta que cuando en la variable valor se carga el primer valor (en este ejemplo es el valor 5), al cargarse el segundo valor (16), el valor anterior 5 se pierde, por ello la necesidad de ir almacenando en la variable suma los valores ingresados.

Operadores lógicos || (o) en las estructuras condicionales

Traducido se lee como "O". Si la condición 1 es Verdadera o la condición 2 es Verdadera, luego ejecutar la rama del Verdadero.
Cuando vinculamos dos o más condiciones con el operador "O", con que una de las dos condiciones sea Verdadera alcanza para que el resultado de la condición compuesta sea Verdadero.

Por ejemplo:
Realiza un programa en el que se cargue una fecha (día, mes y año) por teclado. Mostrar un mensaje si corresponde al primer trimestre del año (enero, febrero o marzo). Cargar por teclado el valor numérico del día, mes y año por separado.
<script language="javascript">
var dia,mes,año;
dia=prompt('Ingrese día:','');
mes=prompt('Ingrese mes:','');
año=prompt('Ingrese año:','');
dia=parseInt(dia);
mes=parseInt(mes);
año=parseInt(año);
if (mes==1 || mes==2 || mes==3)
{
  document.write('corresponde al primer trimestre del año.');
}
</script>

Operadores lógicos && (y) en las estructuras condicionales

El operador &&, traducido se lee como "Y". Se emplea cuando en una estructura condicional se disponen dos condiciones.
Cuando vinculamos dos o más condiciones con el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura condicional.
Recordemos que la condición debe ir entre paréntesis en forma obligatoria.
La utilización de operadores lógicos permiten en muchos casos, plantear algoritmos más cortos y comprensibles.

Ejemplo:
Realiza  un programa que lea por teclado tres números distintos y nos muestre el mayor de ellos.
<script language="javascript">   
var num1,num2,num3;
num1=prompt('Ingrese primer número:','');
num2=prompt('Ingrese segundo número:','');
num3=prompt('Ingrese tercer número:','');
num1=parseInt(num1);
num2=parseInt(num2);
num3=parseInt(num3);
if (num1>num2 && num1>num3)
{
  document.write('el mayor es el '+num1);
}
else
{
  if (num2>num3)
  {
    document.write('el mayor es el '+num2);
  }
  else
  {
    document.write('el mayor es el '+num3);
  }
}
</script>