JavaScript: Lenguaje de programación

JavaScript: Lenguaje de programación
Francisco J. Martı́n Mateos
Carmen Graciani Diaz
Dpto. Ciencias de la Computación e Inteligencia Artificial
Universidad de Sevilla
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Literales
Enteros
Con base decimal: 45, -43
Con base octal: 043, -054
Con base hexadecimal: 0x32f, 0xdd
Reales
Notación decimal: 34.4, -23.3
Notación exponencial: 32.4e-7, -10.4e5
Lógicos (booleanos): true, false
Valor nulo: null
Se emplea únicamente para comprobar si una variable tiene un
valor asignado
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Literales
Cadenas (strings): Delimitadas por comillas dobles " o
simples ’
Caracteres especiales
\b:
\n:
\r:
\t:
\\:
\’:
\":
Retrocede un carácter
Nueva lı́nea
Retorno de carro
Tabulador
Barra invertida
Comillas simples
Comillas dobles
Se pueden emplear comillas de un tipo dentro de una cadena
delimitada por comillas del otro tipo, en lugar del carácter
especial correspondiente:
Enlace = ’<A href="http://www.cs.us.es">CCIA</A>’
Enlace = "<A href=’http://www.cs.us.es’>CCIA</A>"
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Valores
JavaScript reconoce los siguientes tipos de valores
Números, como 42, 3.14 o 3.2e-3
No hay diferencia explı́cita entre números enteros o reales
Lógicos: true y false
Cadenas, como "Hola"
El valor nulo: null
Las operaciones entre tipos de valores distintos se ajustan de
forma implı́cita
Conversiones explı́citas entre tipos de valores
eval(s): Trata de evaluar una cadena s como si fuera una
expresión matemática
parseInt(s,b): Convierte la cadena s a un entero, utilizando
la base b para analizarlo
parseFloat(s): Convierte la cadena s a un número en punto
flotante
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Variables
Las variables son contenedores donde se almacenan valores
para su posterior uso
Como nombre de variable se puede utilizar cualquier secuencia
de caracteres alfanuméricos y ’ ’, que no comience por un
número, ni coincida con una palabra reservada del lenguaje
Las variables se pueden declarar con la palabra reservada var,
aunque no es necesario
Una vez declarada una variable, se le puede asignar cualquier
valor
JavaScript distingue entre mayúsculas y minúsculas, ası́ que
dato, Dato y DATO son tres variables distintas
Todas las variables son globales salvo las declaradas en las
definiciones de funciones
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Variables
Variables en JavaScript
<HR>
<SCRIPT>
var Dato_1;
Dato_1 = "quince";
Dato_1 = 15;
var Dato_2 = 25;
Dato_3 = 35;
document.write("Total = " + (Dato_1 + Dato_2 + Dato_3));
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Instrucciones
Las instrucciones son sentencias de código
El final de una instrucción se indica con ;
En algunas ocasiones es necesario agrupar instrucciones en un
bloque, para ello utilizamos los delimitadores { y }
Los bloques de instrucciones no necesitan el indicador de final
de instrucción ;
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Comentarios
Hay dos formas de realizar comentarios en JavaScript
Comentarios de lı́nea: comienzan con //
Comentarios de bloque: delimitados por /* y */
Comentarios en JavaScript
<HR>
<SCRIPT>
// Datos de entrada
var Dato1 = 15;
var Dato2 = 25;
/* Vamos a realizar una operación
aritmética con ambos datos */
document.write("Total = " + (Dato1 + Dato2));
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Operadores
Operadores aritméticos
Operador
+
*
/
%
Uso
-x
x + y
x - y
x * y
x / y
x % y
Metodologı́a de la Programación
Significado
Opuesto
Suma
Resta
Multiplicación
División
Módulo
JavaScript: Lenguaje de programación
Operadores
Operadores de asignación
Operador
=
+=
-=
*=
/=
%=
Uso
x = y
x += y
x -= y
x *= y
x /= y
x %= y
Metodologı́a de la Programación
Significado
Asigna a x el valor de y
x = x + y
x = x - y
x = x * y
x = x / y
x = x % y
JavaScript: Lenguaje de programación
Operadores
Operadores de incremento y decremento
Operador
++
--
Uso
x++
++x
x---x
Significado
Usar x y después x = x + 1
Hacer x = x + 1 y después usar x
Usar x y después x = x - 1
Hacer x = x - 1 y después usar x
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Operadores
Operadores de comparación
Operador
==
!=
<
<=
>
>=
Uso
x == y
x != y
x < y
x <= y
x > y
x >= y
Metodologı́a de la Programación
Significado
Equivalencia
Distinto de
Menor que
Menor o igual que
Mayor que
Mayor o igual que
JavaScript: Lenguaje de programación
Operadores
Operadores lógicos
Operador
!
&&
||
Uso
!x
x && y
x || y
Metodologı́a de la Programación
Significado
Negación
Conjunción
Disyunción
JavaScript: Lenguaje de programación
Operadores
Operador condicional
Operador
? :
Uso
x ? y : z
Significado
Si x != false entonces evalúa y,
si x == false entonces evalúa z
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Operadores
Operadores de cadenas
Operador
+
+=
Uso
s1 + s2
s1 += s2
Significado
Concatenación
s1 = s1 + s2
El sı́mbolo + sirve tanto como operador aritmético como
operador de cadenas
En caso de querer concatenar el resultado de una expresión
aritmética, es conveniente agrupar ésta entre paréntesis
"Total = " + (5 + 5); =⇒ "Total = 10"
"Total = " + 5 + 5; =⇒ "Total = 55"
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Estructura del condicional if
if (condicion) {
consecuencia
} else {
alternativa
}
Funcionamiento
Si la condicion es cierta, se evalúa la consecuencia, en caso
contrario se evalúa la alternativa
Tanto la consecuencia como la alternativa pueden
contener más de una instrucción
La parte else { alternativa } es opcional
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Condicional compuesto con negación
<HR>
<SCRIPT>
if (!(login == "Hommer")) {
document.write("Bienvenido a Springfield");
} else {
document.write("No puedes entrar en la ciudad");
}
</SCRIPT>
<HR>
El operador lógico ! se utiliza cuando queremos que se
cumpla lo contrario de la condición expuesta
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Condicional compuesto con disyunción
<HR>
<SCRIPT>
if (login == "Bart" || login == "Lisa") {
document.write("Bienvenido a Springfield");
} else {
document.write("No puedes entrar en la ciudad");
}
</SCRIPT>
<HR>
El operador lógico || se utiliza cuando queremos que se
cumpla al menos una de las condiciones expuestas
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Condicional compuesto con conjunción
<HR>
<SCRIPT>
if (login == "Bart" && password == "aft123") {
document.write("Bienvenido a Springfield");
} else {
document.write("No puedes entrar en la ciudad");
}
</SCRIPT>
<HR>
El operador lógico && se utiliza cuando queremos que se
cumplan todas y cada una de las condiciones expuestas
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Condicionales anidados
<HR>
<SCRIPT>
if (login != "Bart") {
document.write("No puedes entrar en la ciudad");
} else if (password == "aft123") {
document.write("Bienvenido a Springfield");
} else {
document.write("Contraseña incorrecta");
}
</SCRIPT>
<HR>
Se pueden anidar tantos condicionales como sean necesarios
para obtener el resultado esperado
En este caso hay una anidación en la alternativa del primer
condicional
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Condicionales
Condicionales anidados
<HR>
<SCRIPT>
if (login == "Bart") {
if (password == "aft123") {
document.write("Bienvenido a Springfield");
} else {
document.write("Contraseña incorrecta");
}
} else {
document.write("No puedes entrar en la ciudad");
}
</SCRIPT>
<HR>
Aunque es menos natural, también se puede hacer una
anidación en la consecuencia del condicional
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Estructura del bucle for
for (inicializacion; condicion; actualizacion) {
instrucciones
}
Funcionamiento:
Se realiza la inicializacion
Mientras la condicion sea cierta, se evalúan las
instrucciones y después la actualizacion
Si la condicion es falsa, se termina el bucle
Usualmente existe una variable de control del bucle que toma
su valor inicial en la inicializacion, interviene en la
condicion y cambia en la actualizacion
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Bucle for con dos variables de control
<HR>
<SCRIPT>
for (subir = 1, bajar = 10;
subir < bajar, subir < 3;
subir++, bajar--) {
document.write("Bajar: " + bajar);
document.write(" - Subir: " + subir + "<BR>");
}
</SCRIPT>
<HR>
En este caso hay dos variables para controlar el bucle
Dos inicializaciones: subir = 1, bajar = 10
Dos condiciones: subir < bajar, subir < 3
Dos actualizaciones: subir++, bajar--
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Bucles for anidados
<HR>
<SCRIPT>
for (i = 1; i <= 6; i++) {
document.write("Ficha: ");
for (j = 1; j <= i; j++) {
document.write("|" + i + ":" + j + "| ");
}
document.write("<BR>");
}
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Estructura del bucle while
while (condicion) {
instrucciones
}
Funcionamiento:
Mientras la condicion sea cierta, se evalúan las
instrucciones
Si la condicion es falsa, se termina el bucle
Usualmente existe variables de control del bucle que toman su
valor inicial antes del bucle, intervienen en la condicion y
cambian en las instrucciones
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Bucle while con dos variables de control
<HR>
<SCRIPT>
subir = 1;
bajar = 10;
while (subir < bajar && subir < 3) {
document.write("Bajar: " + bajar);
document.write(" - Subir: " + subir + "<BR>");
subir++;
bajar--;
}
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
Bucles while anidados
<HR>
<SCRIPT>
i = 1;
while (i <= 6) {
document.write("Ficha: ");
j = 1;
while (j <= i) {
document.write("|" + i + ":" + j + "| ");
j++;
}
document.write("<BR>");
i++;
}
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
La instrucción break permite terminar de forma brusca la
ejecución de un bucle
Se puede utilizar con las bucles for y while
Sólo sirve para terminar un bucle
Uso de la instrucción break
<HR>
<SCRIPT>
document.write("Números:");
for (i = 1; i <= 6; i++) {
document.write(" " + i);
if (i == 3) {
break;
}
}
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Bucles
La instrucción continue permite saltar una iteración en la
ejecución de un bucle
En un bucle for salta hasta la actualizacion
En un bucle while salta hasta la condicion
Uso de la instrucción continue
<HR>
<SCRIPT>
document.write("Números:");
i = 1;
while (i <= 6) {
if (i == 3) {
i++;
continue;
}
document.write(" " + i);
i++;
}
</SCRIPT>
<HR>
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Funciones
Una función es un fragmento de código al que suministramos
unos datos y devuelve un resultado o efecto
En JavaScript las funciones se definen con la estructura
function
La instrucción return sirve para devolver un valor como
resultado de la ejecución de una función
Las variables que se utilizan en la definición de una función
son locales a la definición de la misma
Estructura de la definición de funciones
function nombre (var1, var2, ...) {
instrucciones
...
return valor
}
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Funciones
Para evaluar una función basta con utilizar su nombre con
tantos argumentos como variables aparezcan en la definición
de la función
Al evaluar una función, se ejecutan todas las instrucciones del
cuerpo de su definición, donde las variables de la definición
son sustituidas por los argumentos de la llamada
Evaluación de funciones
nombre (arg1, arg2, ...);
Metodologı́a de la Programación
JavaScript: Lenguaje de programación
Funciones
La cabecera del documento es el sitio más adecuado para
incluir la definición de funciones JavaScript, de esta forma nos
aseguramos de que el navegador las ha evaluado antes de que
se genere algún evento en el documento
Las llamadas a las funciones se suelen realizar en respuesta a
eventos generados en el documento
Metodologı́a de la Programación
JavaScript: Lenguaje de programación