JavaScript: Lenguaje de programación

Transcripción

1 Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla

2 Literales Enteros Con base decimal: 45, -43 Con base octal: 043, -054 Con base hexadecimal: 0x32f, 0xdd Reales Notación decimal: 34.4, 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

3 Literales Cadenas (strings): Delimitadas por comillas dobles " o simples Caracteres especiales \b: Retrocede un carácter \n: Nueva ĺınea \r: Retorno de carro \t: 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=" Enlace = "<A href= >CCIA</A>"

4 Valores JavaScript reconoce los siguientes tipos de valores Números, como 42, 3.14 o 3.2e-3 No hay diferencia expĺı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 impĺıcita Conversiones expĺı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

5 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

6 Variables Variables en JavaScript <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>

7 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 ;

8 Comentarios Hay dos formas de realizar comentarios en JavaScript Comentarios de ĺınea: comienzan con // Comentarios de bloque: delimitados por /* y */ Comentarios en JavaScript <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>

9 Operadores Operadores aritméticos Operador Uso Significado - -x Opuesto + x + y Suma - x - y Resta * x * y Multiplicación / x / y División % x % y Módulo

10 Operadores Operadores de asignación Operador Uso Significado = x = y Asigna a x el valor de y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y

11 Operadores Operadores de incremento y decremento Operador Uso Significado ++ x++ Usar x y después x = x x Hacer x = x + 1 y después usar x -- x-- Usar x y después x = x x Hacer x = x - 1 y después usar x

12 Operadores Operadores de comparación Operador Uso Significado == x == y Equivalencia!= x!= y Distinto de < x < y Menor que <= x <= y Menor o igual que > x > y Mayor que >= x >= y Mayor o igual que

13 Operadores Operadores lógicos Operador Uso Significado!!x Negación && x && y Conjunción x y Disyunción

14 Operadores Operador condicional Operador Uso Significado? : x? y : z Si x!= false entonces evalúa y, si x == false entonces evalúa z

15 Operadores Operadores de cadenas Operador Uso Significado + s1 + s2 Concatenación += s1 += s2 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 = " ; = "Total = 55"

16 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

17 Condicionales Condicional compuesto con negación <SCRIPT> if (!(login == "Hommer")) { document.write("bienvenido a Springfield"); else { document.write("no puedes entrar en la ciudad"); </SCRIPT> El operador lógico! se utiliza cuando queremos que se cumpla lo contrario de la condición expuesta

18 Condicionales Condicional compuesto con disyunción <SCRIPT> if (login == "Bart" login == "Lisa") { document.write("bienvenido a Springfield"); else { document.write("no puedes entrar en la ciudad"); </SCRIPT> El operador lógico se utiliza cuando queremos que se cumpla al menos una de las condiciones expuestas

19 Condicionales Condicional compuesto con conjunción <SCRIPT> if (login == "Bart" && password == "aft123") { document.write("bienvenido a Springfield"); else { document.write("no puedes entrar en la ciudad"); </SCRIPT> El operador lógico && se utiliza cuando queremos que se cumplan todas y cada una de las condiciones expuestas

20 Condicionales Condicionales anidados <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> 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

21 Condicionales Condicionales anidados <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> Aunque es menos natural, también se puede hacer una anidación en la consecuencia del condicional

22 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

23 Bucles Bucle for con dos variables de control <SCRIPT> for (subir = 1, bajar = 10; subir < bajar, subir < 3; subir++, bajar--) { document.write("bajar: " + bajar); document.write(" - Subir: " + subir + "<BR>"); </SCRIPT> 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--

24 Bucles Bucles for anidados <SCRIPT> for (i = 1; i <= 6; i++) { document.write("ficha: "); for (j = 1; j <= i; j++) { document.write(" " + i + ":" + j + " "); document.write("<br>"); </SCRIPT>

25 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

26 Bucles Bucle while con dos variables de control <SCRIPT> subir = 1; bajar = 10; while (subir < bajar && subir < 3) { document.write("bajar: " + bajar); document.write(" - Subir: " + subir + "<BR>"); subir++; bajar--; </SCRIPT>

27 Bucles Bucles while anidados <SCRIPT> i = 1; while (i <= 6) { document.write("ficha: "); j = 1; while (j <= i) { document.write(" " + i + ":" + j + " "); j++; document.write("<br>"); i++; </SCRIPT>

28 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 <SCRIPT> document.write("números:"); for (i = 1; i <= 6; i++) { document.write(" " + i); if (i == 3) { break; </SCRIPT>

29 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 <SCRIPT> document.write("números:"); i = 1; while (i <= 6) { if (i == 3) { i++; continue; document.write(" " + i); i++; </SCRIPT>

30 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

31 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,...);

32 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