Upload
phungthu
View
253
Download
2
Embed Size (px)
Citation preview
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
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
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
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
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
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
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
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
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
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
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
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
Operadores
Operadores logicos
Operador Uso Significado
! !x Negacion
&& x && y Conjuncion
|| x || y Disyuncion
Metodologıa de la Programacion JavaScript: Lenguaje de programacion
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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