//Estas tres variables son diferentesvar edad =1;var Edad=2;var EDAD=3;
alert ("Valor de edad ="+edad);
alert ("Valor de Edad ="+Edad);
alert ("Valor de EDAD ="+EDAD);
If (edad==5)//Esto daría un error pues If no es una palabra reservada//.....
Las instrucciones no necesitan acabar en punto y coma, pero se recomienda su uso
document.write("¡Hola Mundo!");//también puede acabar en salto de línea:
document.write("¡Hola de nuevo Mundo!")
Comentarios:
// comentario de una línea/* comentario
Multilínea */
Un programa es un conjunto de instrucciones y estructuras de control
Las instrucciones se crean con tokens
Un token es cada una de las palabras o símbolos que en sí mismo es reconocido por el lenguaje y tiene un significado.
El conjunto de tokens constituye el léxico del lenguaje
Puntos clave
Title; Los tokens
El interprete elimina cualquier espacio en blanco entre tokens
nombre="Pepito";
nombre ="Pepito";
Son equivalentes
Aviso de continuación de sentencia en otra línea:
document.write("Hello \
World!");
Variables
Declaración de variables
var x;var _nombrecoche;
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:
Esta práctica no se recomienda de forma habitual, si en casos concretos
var iva =16;// variable tipo enterovar total =234.65;// variable tipo decimal
Cadenas de texto
/* 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';
Caracteres especiales:
Estos caracteres van precedido de la contrabarra \
Cuando el intérprete se encuentra éste carácter, entiende que el carácter que le sigue tiene un significado especial que hay que interpretar
Lista de caracteres especiales
\' 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:
Pantallazo ejercicio
Solución ejercicio 3:
<!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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Ejercicio 2 - Mostrar mensajes complejos</title><scripttype="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 0var 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().
Solución ejercicio 4:
<!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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Ejercicio 3 - Arrays simples</title><scripttype="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 = 6var numero =5;++numero;
alert(numero);// numero = 6var numero =5;
numero=numero -1;
alert(numero);// numero = 4var numero =5;--numero;
alert(numero);// numero = 4
Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo:
<script type="text/javascript">//Escribe “A desayunar” si son las 9 var d=newDate();var time=d.getHours();if(time==9){
document.write("<b>¡A desayunar!</b>");}</script>
if-else if - else
<script type="text/javascript">var d =newDate()var time = d.getHours()if(time>6&& time<=14){
document.write("<b>Buenos días</b>");}elseif(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=newDate();
dia=d.getDay();switch(dia){case5:
document.write("Por fin viernes");break;case6:
document.write("Sábado fiestuqui");break;case0:
document.write("A dormir que es domingo");break;default:
document.write("¡A ver si llega el fin de semana!");}</script>
Ventanas popup
Alert Box
Presentan un botón de ok. Simplemente muestran información.
<html><head><scripttype="text/javascript">
function mostrar_alerta()
{
alert("¡Hola!" + '\n' + "Me has pulsado!");
}
</script></head><body><inputtype="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><scripttype="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><inputtype="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><scripttype="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><inputtype="button"onclick="disp_confirm()"value="Mostrar un confirm box"/></body></html>
Bucle for
<html><body><scripttype="text/javascript">
var i=0;
for (i=0;i<=10;i++){ document.write("El número es " + i); document.write("<br />");
}
</script></body></html>
Resultado:
El número es 0
El número es 1
El número es 2
....
El número es 10
Bucle while
<html><body><scripttype="text/javascript">
var i=0;
while (i<=10){ document.write("El número es " + i); document.write("<br />");
i=i+1;
}
</script></body></html>
Resultado:
El número es 0
El número es 1
El número es 2
....
El número es 10
Bucle do ... while
<html><body><scripttype="text/javascript">
var i=0;
do
{
document.write("El número es " + i);
document.write("<br/>");
i=i+1;
}
while (i<0); </script></body></html>
Resultado:
El número es 0
break
<html><body><scripttype="text/javascript">
var i=0;
for (i=0;i<=10;i++){ if (i==3){ break;} document.write("El número es " + i); document.write("<br />");
}
</script></body></html>
Resultado:
El número es 0
El número es 1
El número es 2
continue
<html><body><scripttype="text/javascript">
var i=0
for (i=0;i<=4;i++){ if (i==3){ continue;} document.write(“El número es " + i); document.write("<br/>");
}
</script></body></html>
Resultado:
El número es 0
El número es 1
El número es 2
El número es 4
for (variable in object)
<html><body><scripttype="text/javascript">
var x;
var mis_coches = new Array();
mis_coches[0] = "Saab";
mis_coches[1] = "Volvo";
mis_coches[2] = "BMW";
for (x in mis_coches)
{
document.write(mis_coches[x] + "<br/>");
}
</script></body></html>
Funciones
Funciones de usuario
function nombre_función (var1,var2,...,varX){//aquí iría el código de la función}//Ejemplo: function multiplicar(a,b){
x=a*b;return x;}
Llamada a la función (se guarda en la variable resultado, declarada previamente):
resultado=prod(2,3);
Las variables son locales a las funciones donde son declaradas.
Las variables definidas fuera de las funciones, pueden ser accedidas desde todas.
Funciones útiles para cadenas de texto
//length, calcula la longitud de una cadena de textovar mensaje ="Hola Mundo";var numeroLetras = mensaje.length;// numeroLetras = 10//+, se emplea para concatenar varias cadenas de textovar mensaje1 ="Hola";var mensaje2 =" Mundo";var mensaje = mensaje1 + mensaje2;// mensaje = "Hola Mundo"//la función concat se utiliza de modo similar al operador +var mensaje1 ="Hola";var mensaje2 = mensaje1.concat(" Mundo");// mensaje2 = "Hola Mundo"
//toUpperCase(), transforma a mayúsculasvar mensaje1 ="Hola";var mensaje2 = mensaje1.toUpperCase();// mensaje2 = "HOLA"//toLowerCase(), transforma a minúsculas:var mensaje1 ="HolA";var mensaje2 = mensaje1.toLowerCase();// mensaje2 = "hola"//charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:var mensaje ="Hola";var letra = mensaje.charAt(0);// letra = H
letra = mensaje.charAt(2);// letra = l//indexOf(caracter), calcula la primera ocurrencia del carácter indicadovar mensaje ="Hola";var posicion = mensaje.indexOf('a');// posicion = 3
posicion = mensaje.indexOf('b');// posicion = -1 //lastIndexOf(caracter), empieza a buscar por detrás en la cadenavar mensaje ="Hola";var posicion = mensaje.lastIndexOf('a');// posicion = 3//función substring(número), extraer parte de la cadena:var mensaje ="Hola Mundo";
porcion = mensaje.substring(5);// porcion = "Mundo"var porcion = mensaje.substring(1,8);// porcion = "ola Mun"//función split para obtener arrays de texto:var mensaje ="Hola Mundo, soy una cadena de texto!";var palabras = mensaje.split(" ");// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];//Con esta función se pueden extraer fácilmente las letras que forman una palabra:var palabra ="Hola";var letras = palabra.split("");// letras = ["H", "o", "l", "a"]
Funciones útiles para arrays
//length, calcula el número de elementos de un arrayvar vocales =["a","e","i","o","u"];var numeroVocales = vocales.length;// numeroVocales = 5//concat(), se emplea para concatenar los elementos de varios arraysvar array1 =[1,2,3];
array2 = array1.concat(4,5,6);// array2 = [1, 2, 3, 4, 5, 6]//join(separador), es la función contraria a split(). Une los elementos de un array para formar una cadena de texto. var array =["hola","mundo"];var mensaje = array.join("");// mensaje = "holamundo"//Para unir los elementos se utiliza el carácter separador indicado:
mensaje = array.join(" ");// mensaje = "hola mundo"//pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.var array =[1,2,3];var ultimo = array.pop();// ahora array = [1, 2], ultimo = 3
push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento.
var array =[1,2,3];
array.push(4);// ahora array = [1, 2, 3, 4]//shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.var array =[1,2,3];var primero = array.shift();// ahora array = [2, 3], primero = 1//unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)var array =[1,2,3];
array.unshift(0);// ahora array = [0, 1, 2, 3]
reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:var array =[1,2,3];
array.reverse();// ahora array = [3, 2, 1]
Funciones útiles para números
//función isNaN para comprobar si es un número:var numero1 =0;var numero2 =0;
alert(numero1/numero2);// se muestra el valor NaNvar numero1 =0;var numero2 =0;if(isNaN(numero1/numero2)){
alert("La división no está definida para los números indicados");}else{
alert("La división es igual a => "+ numero1/numero2);}//función toFixed(digitos), devuelve el número con los decimales indicados y los redondeos necesarios:var numero1 =4564.34567;
numero1.toFixed(2);// 4564.35
Ámbito de las variables
Variables locales: Declaradas dentro de una función. Visibles solo desde la función.
Variables globales: Declaradas fuera de las funciones. ¡O sin declarar!
function creaMensaje(){var mensaje = “Mensaje de prueba”;
alert(mensaje);}
CreaMensaje();//variable local, el alert tiene mensajefunction creaMensaje(){var mensaje = “Mensaje de prueba”;}
creaMensaje();
alert(mensaje);//variable local, el alert vacío
var mensaje = “Mensaje de prueba”;function muestraMensaje(){
alert(mensaje);}//variable global, el alert tiene mensajefunction creaMensaje(){
mensaje ="Mensaje de prueba";}
creaMensaje();
alert(mensaje);//variable global, el alert tiene mensaje