Informática. JavaScript: Lenguaje de programación. Fco J. Martín Mateos Carmen Graciani

Inform´

atica

JavaScript: Lenguaje de programaci´on

Fco J. Mart´ın Mateos Carmen Graciani

Dpto. Ciencias de la Computaci´on e Inteligencia Artificial Universidad de Sevilla

Literales

• Enteros

• Con base decimal: 45,-43 • Con base octal: 043,-054

• Con base hexadecimal: 0x32f,0xdd

• Reales

• Notaci´on decimal: 34.4,-23.3

• Notaci´on exponencial: 32.4e-7,-10.4e5

• L´ogicos (booleanos): true,false

• Valor nulo: null

• Se emplea ´unicamente para comprobar si una variable tiene un valor asignado

Literales

• Cadenas (strings): Delimitadas por comillas dobles ”o simples ’ • Caracteres especiales • \nNueva l´ınea • \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:

Valores

• No hay diferencia expl´ıcita entre n´umeros enteros o reales

• Las operaciones entre tipos de valores distintos se ajustan de forma impl´ıcita

• Conversiones expl´ıcitas

• eval(s)Trata de evaluar la cadenascomo si fuera una expresi´on matem´atica

• parseInt(s,b)Convierte la cadenasa un entero, utilizando la basebpara analizarlo

• parseFloat(s)Convierte la cadenasa un n´umero en punto flotante

Variables

• Las variables son contenedores donde se almacenan valores para su uso posterior

• Como nombre de variable se puede utilizar cualquier secuencia de caracteres alfanum´ericos y ’ ’, que no comience por un n´umero, ni coincida con una palabra reservada del lenguaje

• Las variables se pueden declarar con la palabra reservadavar, pero no es necesario.

• Una vez declarada una variable, se le puede asignar cualquier valor

• Distingue entre may´usculas y min´usculas, as´ı que dato,Dato

yDATO ser´ıan tres variables distintas.

• Todos las variables son globales salvo las declaradas en las definiciones de funciones

Variables

Variablesen JavaScript <SCRIPT type="text/javascript"> 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));

Instrucciones

• Las instrucciones son sentencias de c´odigo

• El final de una instrucci´on 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 final de instrucci´on;

Comentarios

• Hay dos formas de realizar comentarios • Comentarios de l´ınea: comienzan con// • Comentarios de bloque: delimitados por /*y*/

Comentariosen JavaScript <SCRIPT type="text/javascript">

// Datos de entrada var Dato 1 = 15; var Dato 2 = 25;

/* Vamos a realizar una operaci´on aritm´etica con ambos datos */

document.write("Total" = + (Dato 1 + Dato 2));

Operadores aritm´

eticos

Operador Uso Significado

- -x Opuesto + x + y Suma - x - y Resta * x * y Multiplicaci´on / x / y Divisi´on % x % y M´odulo

Operadores de asignaci´

on

Operador Uso Significado

= x = y Asigna ax el valor dey += 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

Operadores de incremento y decremento

Operador Uso Significado

++ x++ Usarxy despu´esx = x+1 ++x Hacerx = x+1 y despu´es usarx -- x-- Usarxy despu´esx = x-1

Operadores de comparaci´

on

Operador Uso Significado

== x == y Equivalente a

!= x != y Distinto de

< x < y Menor que

<= x <= y Menor o igual que

> x > y Mayor que

Operadores de l´

ogicos

Operador Uso Significado

! !x Negaci´on

&& x && y Conjunci´on

Operadores condicional

Operador Uso Significado

? : x ? y : z Si x != falseentonces eval´ua y,

Operadores de cadenas

Operador Uso Significado

+ x + y Concatenaci´on

+= x += y x = x + y

• El s´ımbolo +sirve como operador aritm´etico y como operador de cadenas

• En caso de querer concatenar el resultado de una expresi´on aritm´etica, es conveniente agrupar ´esta entre par´entesis

"Total = " + (5 + 5); =⇒"Total = 10" "Total = " + 5 + 5; =⇒ "Total = 55"

El condicional

if

if (condici´on) { consecuencia } else { alternativa }

• Si condici´on == true, se eval´ua consecuencia, en caso contrario se eval´ua alternativa

• Tanto la consecuencia como laalternativapueden contener m´as de una instrucci´on

Condicionales anidados

<SCRIPT type="text/javascript">

if (login != "Bart") {

document.write("No puedes entrar en la ciudad");

} else if (password == "aft123") {

document.write("Bienvenido a Springfield");

} else {

document.write("Contrase~na incorrecta");

}

</SCRIPT>

• Se pueden anidar tantos condicionales como sea necesario para obtener el resultado esperado

El bucle

for

for (inicializaci´on; condici´on; actualizaci´on) { instrucciones

}

• Se realiza lainicializaci´on

• Mientras la condici´onsea cierta, se eval´uan las

instruccionesy despu´es la actualizaci´on • Cuando la condici´on es falsa, se termina

• Usualmente:

existe una variable de control del bucle que toma su valor en la inicializaci´on, interviene en lacondici´ony cambia en la actualizaci´on

Bucle

for

con dos variables de control

<SCRIPT type="text/javascript"> for (s = 1, b = 10; s < b, s < 3; s++, b--) { document.write("Bajar: " + b); document.write(" - Subir: " + s + "<BR>"); } </SCRIPT>

• En este caso hay dos variables para controlar el bucle • Dos inicializaciones: s = 1, b = 10

• Dos condiciones: s < b, s < 3 • Dos actualizaciones: s++,

b--El bucle

while

while (condici´on) {

instrucciones

}

• Mientras la condici´onsea cierta, se eval´uan las

instrucciones

• Cuando la condici´on es falsa, se termina

• Usualmente:

existen variables de control del bucle que toma su valor inicial antes del bucle, interviene en lacondici´ony cambian en las instrucciones

Bucle

for

con dos variables de control

<SCRIPT type="text/javascript"> s = 1; b = 10; while (s < b && s < 3) { document.write("Bajar: " + b); document.write(" - Subir: " + s + "<BR>"); s++;; b--;; } </SCRIPT>

break

y

continue

• La instrucci´on breakpermite terminar de forma brusca la ejecuci´on de un bucle

• Se puede utilizar con los buclesforywhile • S´olo sirve para terminar un bucle

• La instrucci´on continuepermite saltar una iteraci´on en la ejecuci´on de un bucle

• En un bucleforsalta hasta laactualizaci´on • En un buclewhile salta hasta lacondici´on

Funciones

• Una funci´on es un fragmento de c´odigo al que suministramos unos datos y devuelve un resultado o efecto

• La instrucci´on returnsirve para devolver un valor como resultado de la ejecuci´on de una funci´on

• Las variables que se utilizan en la definici´on de una funci´on son locales a la definici´on de la misma

function nombre (var1, var2, ...) {

instrucciones return valor

Funciones

• Para evaluar una funci´on basta con utilizar su nombre con tantos argumentos como variables aparezcan en la definici´on de la funci´on

• Al evaluar una funci´on, se ejecutan todas las instrucciones del cuerpo de su definici´on, donde las variables de la definici´on son sustituidas por los argumentos de la llamada

Funciones

• La cabecera del documento es el sitio m´as adecuado para incluir la definici´on de funciones, de esta forma nos

aseguramos de que el navegador las ha evaluado antes de que se genere alg´un evento en el documento que las necesite.

• Las llamadas a las funciones se suelen realizar en respuesta a eventos generados en el documento