|
|
Línea 390: |
Línea 390: |
| } | | } |
| </script> | | </script> |
| + | </source> |
| + | |
| + | </div> |
| + | |
| + | <div class="slide"> |
| + | ===Ventanas popup=== |
| + | </div> |
| + | |
| + | <div class="slide"> |
| + | ====Alert Box==== |
| + | *Presentan un botón de ok. Simplemente muestran información. |
| + | <source lang="html4strict"> |
| + | <html> |
| + | <head> |
| + | <script type="text/javascript"> |
| + | function mostrar_alerta() |
| + | { |
| + | alert("¡Hola!" + '\n' + "Me has pulsado!"); |
| + | } |
| + | </script> |
| + | </head> |
| + | <body> |
| + | <input type="button" onclick="mostrar_alerta()" value="Mostrar ventana de alerta" /> |
| + | </body> |
| + | </html> |
| + | |
| + | </source> |
| + | |
| + | </div> |
| + | |
| + | <div class="slide"> |
| + | ====Prompt Box==== |
| + | *Se utilizan para que el usuario introduzca un valor antes de entrar a la página. |
| + | <source lang="html4strict"> |
| + | <html> |
| + | <head> |
| + | <script type="text/javascript"> |
| + | function disp_prompt() |
| + | { |
| + | var nombre=prompt("Por favor escribe aquí tu nombre","Pepito piscinas"); |
| + | if (nombre!=null && nombre!="") |
| + | { |
| + | document.write("Hola " + nombre + "¿Qué tal estás?"); |
| + | } |
| + | } |
| + | </script> |
| + | </head> |
| + | <body> |
| + | <input type="button" onclick="disp_prompt()" value="Mostrar un prompt box" /> |
| + | </body> |
| + | </html> |
| + | |
| + | </source> |
| + | |
| + | </div> |
| + | |
| + | <div class="slide"> |
| + | ====Confirm Box==== |
| + | *Presentan un botón de ok y otro de cancelar. Devuelven verdadero (ok) o falso (cancel). |
| + | <source lang="html4strict"> |
| + | <html> |
| + | <head> |
| + | <script type="text/javascript"> |
| + | function disp_confirm() |
| + | { |
| + | var r=confirm("Pulsa un botón"); |
| + | if (r==true) |
| + | { |
| + | document.write("¡Has pulsado el botón de OK!"); |
| + | } |
| + | else |
| + | { |
| + | document.write("¡Has pulsado el botón de cancelar!"); |
| + | } |
| + | } |
| + | </script> |
| + | </head> |
| + | <body> |
| + | <input type="button" onclick="disp_confirm()" value="Mostrar un confirm box" /> |
| + | </body> |
| + | </html> |
| + | |
| </source> | | </source> |
| | | |
Revisión de 07:52 24 sep 2012
javaScript
Tutorial para desarrollar en Web mediante JavaScript
Sintaxis
- JavaScript diferencia MAYÚSCULAS y minúsculas
- Las instrucciones no necesitan acabar en punto y coma.
document.write("¡Hola Mundo!");
//también puede acabar en salto de línea:
document.write("¡Hola de nuevo Mundo!")
// comentario de una línea
/* comentario
Multilínea */
- Se ignoran los espacios extras en blanco:
nombre="Pepito";
nombre = "Pepito";
Son equivalentes
- Aviso de continuación de sentencia en otra línea:
document.write("Hello \
World!");
Variables
Las variables no se inicializan (su valor está vacío). ¡Habrá que inicializarlas!
- Declaración e inicialización de variables
var x=5;
var _nombrecoche=”volvo”;
Las variables se pueden declarar e inicializar a la vez. Si es texto, ¡entre comillas!
- Se pueden utilizar variables sin haber sido declaradas:
var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal
/* El contenido de texto1 tiene comillas simples, por lo que
se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
/* El contenido de texto2 tiene comillas dobles, por lo que
se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
\' comilla simple
\" comillas
\& ampersand
\\ backslash
\n nueva línea
\r retorno de carro
\t tabulador
\b backspace
\f form feed
Ejercicio 3
Crea una página que guarde un texto en una variable y lo muestre luego por pantalla:
|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 2 - Mostrar mensajes complejos</title>
<script type="text/javascript">
var msg = "Hola Mundo! \n Qué facil es incluir \'comillas simples\' \n y \"comillas dobles\" ";
alert(msg);
</script>
</head>
<body>
<p>Esta página muestra un mensaje complejo</p>
</body>
</html>
Arrays
Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente.
//variables para los días de la semana:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
//usando un array:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
//el array empieza en 0
var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"
var otroDia = dias[5]; // otroDia = "Sábado"
Ejercicio 4
Crear un array llamado meses y que almacene el nombre de los doce meses del año. Mostrar por pantalla los doce nombres utilizando la función alert().
|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 3 - Arrays simples</title>
<script type="text/javascript">
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", “Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
alert(meses[0]); alert(meses[1]);alert(meses[2]);alert(meses[3]);
alert(meses[4]); alert(meses[5]);alert(meses[6]);alert(meses[7]);
alert(meses[8]); alert(meses[9]);alert(meses[10]);alert(meses[11]);
</script>
</head>
<body>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>
Booleanos
Puede tener 2 valores: false o true.
Trabajaremos con ellos en programación más avanzada de JavaScript.
Ejemplos:
var clienteRegistrado = false;
var ivaIncluido = true;
Operadores
Operadores de asignación
= += -= *= /= %=
var numero1 = 3;
var numero2 = 4;
5 = numero1;
/* Error, la asignación siempre se realiza a una variable,
por lo que en la izquierda no se puede indicar un número */
// Ahora, la variable numero1 vale 5
numero1 = 5;
// Ahora, la variable numero1 vale 4
numero1 = numero2;
Operadores de incremento y decremento
var numero = 5;
numero=numero +1;
alert(numero); // numero = 6
var numero = 5;
++numero;
alert(numero); // numero = 6
var numero = 5;
numero=numero - 1;
alert(numero); // numero = 4
var numero = 5;
--numero;
alert(numero); // numero = 4
Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo:
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Operadores lógicos
var visible = true;
alert(!visible); // Muestra "false" y no "true"
var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultado = false
valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true
var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2; // resultado = true
valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false
Operadores matemáticos
+ - * / %
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
Operadores relacionales
Sentencias condicionales
if-else
- Ejemplo de uso de if en una sentencia condicional
<script type="text/javascript">
//Escribe “A desayunar” si son las 9
var d=new Date();
var time=d.getHours();
if (time==9)
{
document.write("<b>¡A desayunar!</b>");
}
</script>
if-else if - else
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time>6 && time<=14)
{
document.write("<b>Buenos días</b>");
}
else if (time>14 && time<22)
{
document.write("<b>Buenas tardes</b>");
}
else
{
document.write("<b>Buenas noches</b>");
}
</script>
switch
<script type="text/javascript">
//Recibes diferente saludo en función del día de la semana en que estemos
//Domingo=0, Lunes=1 etc.
var d=new Date();
dia=d.getDay();
switch (dia)
{
case 5:
document.write("Por fin viernes");
break;
case 6:
document.write("Sábado fiestuqui");
break;
case 0:
document.write("A dormir que es domingo");
break;
default:
document.write("¡A ver si llega el fin de semana!");
}
</script>
Alert Box
- Presentan un botón de ok. Simplemente muestran información.
<html>
<head>
<script type="text/javascript">
function mostrar_alerta()
{
alert("¡Hola!" + '\n' + "Me has pulsado!");
}
</script>
</head>
<body>
<input type="button" onclick="mostrar_alerta()" value="Mostrar ventana de alerta" />
</body>
</html>
Prompt Box
- Se utilizan para que el usuario introduzca un valor antes de entrar a la página.
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var nombre=prompt("Por favor escribe aquí tu nombre","Pepito piscinas");
if (nombre!=null && nombre!="")
{
document.write("Hola " + nombre + "¿Qué tal estás?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Mostrar un prompt box" />
</body>
</html>
Confirm Box
- Presentan un botón de ok y otro de cancelar. Devuelven verdadero (ok) o falso (cancel).
<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Pulsa un botón");
if (r==true)
{
document.write("¡Has pulsado el botón de OK!");
}
else
{
document.write("¡Has pulsado el botón de cancelar!");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value="Mostrar un confirm box" />
</body>
</html>