JavaScript: Lenguaje de programación

32
JavaScript: Lenguaje de programaci´on Francisco J. Mart´ ın Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computaci´on e Inteligencia Artificial Universidad de Sevilla Metodolog´ ıa de la Programaci´ on JavaScript: Lenguaje de programaci´ on

Transcript of JavaScript: Lenguaje de programación

Page 1: JavaScript: Lenguaje de programación

JavaScript: Lenguaje de programacion

Francisco J. Martın Mateos

Carmen Graciani Diaz

Dpto. Ciencias de la Computacion e Inteligencia Artificial

Universidad de Sevilla

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 2: JavaScript: Lenguaje de programación

Literales

Enteros

Con base decimal: 45, -43

Con base octal: 043, -054

Con base hexadecimal: 0x32f, 0xdd

Reales

Notacion decimal: 34.4, -23.3

Notacion exponencial: 32.4e-7, -10.4e5

Logicos (booleanos): true, false

Valor nulo: null

Se emplea unicamente para comprobar si una variable tiene un

valor asignado

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 3: JavaScript: Lenguaje de programación

Literales

Cadenas (strings): Delimitadas por comillas dobles " o

simples ’

Caracteres especiales

\b: Retrocede un caracter

\n: Nueva lı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 caracter

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 Programacion JavaScript: Lenguaje de programacion

Page 4: JavaScript: Lenguaje de programación

Valores

JavaScript reconoce los siguientes tipos de valores

Numeros, como 42, 3.14 o 3.2e-3

No hay diferencia explıcita entre numeros enteros o reales

Logicos: 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

expresion matematica

parseInt(s,b): Convierte la cadena s a un entero, utilizando

la base b para analizarlo

parseFloat(s): Convierte la cadena s a un numero en punto

flotante

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 5: 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 alfanumericos y ’ ’, que no comience por un

numero, 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 mayusculas y minusculas, 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 Programacion JavaScript: Lenguaje de programacion

Page 6: 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 Programacion JavaScript: Lenguaje de programacion

Page 7: JavaScript: Lenguaje de programación

Instrucciones

Las instrucciones son sentencias de codigo

El final de una instruccion 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 instruccion ;

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 8: 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 onaritm etica con ambos datos * /

document.write("Total = " + (Dato1 + Dato2));</SCRIPT><HR>

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 9: JavaScript: Lenguaje de programación

Operadores

Operadores aritmeticos

Operador Uso Significado

- -x Opuesto

+ x + y Suma

- x - y Resta

* x * y Multiplicacion

/ x / y Division

% x % y Modulo

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 10: JavaScript: Lenguaje de programación

Operadores

Operadores de asignacion

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

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 11: JavaScript: Lenguaje de programación

Operadores

Operadores de incremento y decremento

Operador Uso Significado

++ x++ Usar x y despues x = x + 1

++x Hacer x = x + 1 y despues usar x

-- x-- Usar x y despues x = x - 1

--x Hacer x = x - 1 y despues usar x

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 12: JavaScript: Lenguaje de programación

Operadores

Operadores de comparacion

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

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 13: JavaScript: Lenguaje de programación

Operadores

Operadores logicos

Operador Uso Significado

! !x Negacion

&& x && y Conjuncion

|| x || y Disyuncion

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 14: JavaScript: Lenguaje de programación

Operadores

Operador condicional

Operador Uso Significado

? : x ? y : z Si x != false entonces evalua y,

si x == false entonces evalua z

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 15: JavaScript: Lenguaje de programación

Operadores

Operadores de cadenas

Operador Uso Significado

+ s1 + s2 Concatenacion

+= s1 += s2 s1 = s1 + s2

El sımbolo + sirve tanto como operador aritmetico como

operador de cadenas

En caso de querer concatenar el resultado de una expresion

aritmetica, es conveniente agrupar esta entre parentesis"Total = " + (5 + 5); =⇒ "Total = 10"

"Total = " + 5 + 5; =⇒ "Total = 55"

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 16: JavaScript: Lenguaje de programación

Condicionales

Estructura del condicional ifif (condicion) {

consecuencia} else {

alternativa}

Funcionamiento

Si la condicion es cierta, se evalua la consecuencia, en caso

contrario se evalua la alternativa

Tanto la consecuencia como la alternativa pueden

contener mas de una instruccion

La parte else { alternativa } es opcional

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 17: JavaScript: Lenguaje de programación

Condicionales

Condicional compuesto con negacion<HR><SCRIPT>if (!(login == "Hommer")) {

document.write("Bienvenido a Springfield");} else {

document.write("No puedes entrar en la ciudad");}</SCRIPT><HR>

El operador logico ! se utiliza cuando queremos que se

cumpla lo contrario de la condicion expuesta

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 18: JavaScript: Lenguaje de programación

Condicionales

Condicional compuesto con disyuncion<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 logico || se utiliza cuando queremos que se

cumpla al menos una de las condiciones expuestas

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 19: JavaScript: Lenguaje de programación

Condicionales

Condicional compuesto con conjuncion<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 logico && se utiliza cuando queremos que se

cumplan todas y cada una de las condiciones expuestas

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 20: 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 na incorrecta");}</SCRIPT><HR>

Se pueden anidar tantos condicionales como sean necesarios

para obtener el resultado esperado

En este caso hay una anidacion en la alternativa del primer

condicional

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 21: 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 na incorrecta");

}} else {

document.write("No puedes entrar en la ciudad");}</SCRIPT><HR>

Aunque es menos natural, tambien se puede hacer una

anidacion en la consecuencia del condicional

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 22: 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 evaluan las

instrucciones y despues 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 Programacion JavaScript: Lenguaje de programacion

Page 23: 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 Programacion JavaScript: Lenguaje de programacion

Page 24: 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 Programacion JavaScript: Lenguaje de programacion

Page 25: JavaScript: Lenguaje de programación

Bucles

Estructura del bucle while

while (condicion) {instrucciones

}

Funcionamiento:

Mientras la condicion sea cierta, se evaluan 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 Programacion JavaScript: Lenguaje de programacion

Page 26: 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 Programacion JavaScript: Lenguaje de programacion

Page 27: 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 Programacion JavaScript: Lenguaje de programacion

Page 28: JavaScript: Lenguaje de programación

Bucles

La instruccion break permite terminar de forma brusca laejecucion de un bucle

Se puede utilizar con las bucles for y while

Solo sirve para terminar un bucle

Uso de la instruccion break

<HR><SCRIPT>document.write("N umeros:");for (i = 1; i <= 6; i++) {

document.write(" " + i);if (i == 3) {

break;}

}</SCRIPT><HR>

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 29: JavaScript: Lenguaje de programación

Bucles

La instruccion continue permite saltar una iteracion en laejecucion de un bucle

En un bucle for salta hasta la actualizacion

En un bucle while salta hasta la condicion

Uso de la instruccion continue

<HR><SCRIPT>document.write("N umeros:");i = 1;while (i <= 6) {

if (i == 3) {i++;continue;

}document.write(" " + i);i++;

}</SCRIPT><HR>

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 30: JavaScript: Lenguaje de programación

Funciones

Una funcion es un fragmento de codigo al que suministramos

unos datos y devuelve un resultado o efecto

En JavaScript las funciones se definen con la estructura

function

La instruccion return sirve para devolver un valor como

resultado de la ejecucion de una funcion

Las variables que se utilizan en la definicion de una funcion

son locales a la definicion de la misma

Estructura de la definicion de funcionesfunction nombre (var1, var2, ...) {

instrucciones...return valor

}

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 31: JavaScript: Lenguaje de programación

Funciones

Para evaluar una funcion basta con utilizar su nombre con

tantos argumentos como variables aparezcan en la definicion

de la funcion

Al evaluar una funcion, se ejecutan todas las instrucciones del

cuerpo de su definicion, donde las variables de la definicion

son sustituidas por los argumentos de la llamada

Evaluacion de funcionesnombre (arg1, arg2, ...);

Metodologıa de la Programacion JavaScript: Lenguaje de programacion

Page 32: JavaScript: Lenguaje de programación

Funciones

La cabecera del documento es el sitio mas adecuado para

incluir la definicion de funciones JavaScript, de esta forma nos

aseguramos de que el navegador las ha evaluado antes de que

se genere algun evento en el documento

Las llamadas a las funciones se suelen realizar en respuesta a

eventos generados en el documento

Metodologıa de la Programacion JavaScript: Lenguaje de programacion