Ir al contenido principal

Tutorial JavaScript - Parte 3

Buenas Cachorros, cómo andan

Vamos a dar un paso más alla y vamos por Popups y Condicionales

Popups
Este termino es usado para nombrar a las ventanas emergentes..

alert:
muestra una ventana con un texto.
bueno vamos a comenzar con un alert sencillo
[code]

<html>
<head>
<script type="text/javascript">
{
alert("Soy una ventana de alert");
}
</script>
</head>
<body>
</body>
</html>

[/code]

Todo bien, salió el alert, pero salto sin previo aviso ni nada.. más adelante vamos a usar alert para muchas cosas. Ahora suponiendo que no queremos que ese mensaje salga de la nada, vamos a crear un botón para que cuando lo pulsemos salga el contenido del alert

[code]

<html>
<head>
<script type="text/javascript">
function mostrar_alert()
{
alert("Soy una ventana de alert");
}
</script>
</head>
<body>

<input type="button" onclick="mostrar_alert()" value="mostrar alert" />

</body>
</html>
[/code]

Con este programa (al hacer clic en el boton), nos va a mostrar el contenido del alert
lo que hicimos acá es crear con html un boton, que cuando le hagan clic (ONCLICK) salga el contenido de la funcion ("MOSTRAR_ALERT()").
No vamos a ahondar en detalles, hoy.. sigamos con

confirm:
Muesta una ventana con dos opciones, Aceptar(verdadero = true) y Cancelar (falso = False)
[code]
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Presiona un boton");
if (r==true)
  {
  alert("vos presionaste aceptar ");
  }
else
  {
  alert("vos presionaste Cancelar!");
  }
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Presioname O:" />

</body>
</html>
[/code]

prompt:
muestra una ventana en la cual podemos insertar texto
ejemplo:
[code]
<html>
<head>
<script type="text/javascript">
var nombre;
nombre=prompt("escribe tu nombre de usuario");
{
alert("bienvenido a la pagina " + nombre ); // deje un pequeño espacio para que no quede todo junto
}
</script>
</head>
<body>
</body>
</html>
[/code]

Condicionales
Muy a menudo, al escribir el código, se quiere realizar diferentes acciones para diferentes decisiones. Puede utilizar las sentencias condicionales en su código para hacer esto.

Condicional if
Sintaxis básica
[code]

if(condicion)
{
codigo que sera ejecutado sí la condición es verdadera
}

[/code]
bien ahi vemos la estructura del condicional if. Vemos que esta conformacio por if,la condicion entre parentesis, luego el código que va a ser ejecutado(mientras la condicion sea cierta) va entre corchetes.
Ejemplo
[code]

<html>
<head></head>
<body>
<script type="text/javascript">

//Escribe "Buen día" sí
// si es menos de las 9 de la mañana (formato 24 hs)

var saluda=new Date(); //new Date si puede tener un espacio en blanco
var tiempo=saluda.getHours(); //la variable tiempo

if (tiempo<10) //si la variable tiempo es menor que 10hs (si ejecutas este codigo antes de las diez...)
{
document.write("<b>Buen Día, Madrugador (?) </b>"); //escribir Buen Día
}
[//no creo que alguien esté levantado el domingo a las 10 am, así que no creo que vean ese mensaje xD
</script>
</body>
</html>

[/code]

pasemos al siguiente

Condicional If .. else
Es casi lo mismo que el if, pero agregamos else. Else es la parte del código que se ejecuta en caso de que if sea falso.
Sintaxis del if, else
[code]
if (condicion)
{
codigo a ser ejecutado si la condicion del if, es verdadera
}
else
{
codigo que sera executado si el condicional no es verdadero
}
[/code]
Ejemplo práctico
vamos a seguir con el mismo programa que ejecutamos recien, pero más interesante
[code]
<html>
<head></head>
<body>
<script type="text/javascript">
//Escribe "Buen día" sí
// si es menos de las 9 de la mañana (formato 24 hs)

var saluda=new Date(); //new Date si puede tener un espacio en blanco
var tiempo=saluda.getHours(); //más adelante voy a explicar esto
if (tiempo<10) //si la variable tiempo es menor que 10hs (si ejecutas este codigo antes de las diez...)
{
document.write("Buen Día, Madrugador (?)"); //escribir Buen Día
}
else //si son más de las 10...
{
document.write("Tenes que levantarte más temprano cachorro"); //escribir (texto) ...
}

//no creo que alguien esté levantado el domingo a las 10 am, así que no creo que vean ese mensaje xD
</script>
</body>
</html>
[/code]

LEE EL CODIGO, LOS COMENTARIOS, MODIFICA COSAS PROBA NUEVAS COSAS HDP


sentencia else if (todo junto)
Sintaxis del else if
[code]
if (condicion1)
{
código que va a ser ejecutado si la condicion1 es verdadera
}
else if (condicion2)
{
codigo que va a ser ejecutado si la condicion2 es verdadera
}
else
{
codigo que va a ser ejecutado si ni la condicion1 y la condicion2 no son verdaderas
}
[/code]

Ejemplo y seguimos metiendonos en la vida de los usuarios

[code]
<html>
<head></head>
<body>
<script type="text/javascript">
var saludo = new Date();
var tiempo = saludo.getHours();
if (tiempo<10)
{
document.write("Buen dia");
}
else if (tiempo>=10 && tiempo<18)
{
document.write("Buenas Tardes");
}
else
{
document.write("Se hace tarde, disfruta el día !");
}
</script>
</body>
</html>
[/code]

Entonces este programa nos va a devolver distintos resultados dependiendo de la hora
en la que ejecutemos el programa, estos ejemplos son sencillos en este caso usamos cosas
que aun no habiamos visto...operadores lógicos... a continuación
vamos a ver los operadores que usamos en javascript (similares a otros lenguajes)

Operadores Logicos

Los operadores logicos son usados para determinar la logica entre variables o valores

[code]
&& and( y .. )
|| or( ó )
! not( NO )
[/code]


Bueno seguramente nos vemos en un rato otra vez, saludos. Daniel.
descargate esta pagina como PDF http://www.mediafire.com/?m93acq843qrjbdy