View
4
Download
0
Category
Preview:
Citation preview
JavaScript (I)
1
Lenguajes de Script¿Qué son los Lenguajes de Script?
• Scritps de cliente: son programas que puedenacompañar a un documento HTML o bien irincrustados en él.
• Un lenguaje de script es un pequeño lenguaje deprogramación cuyo código se inserta dentro de undocumento HTML.
• Se ejecuta en el navegador del usuario al cargar lapágina, o cuando sucede algo especial como puedeser el pulsar sobre un enlace.
2
Lenguajes de ScriptCaracterísticas
• El programa se ejecuta en la maquina cliente• Son lenguajes sencillos en comparación con el
resto de los lenguajes• Son independientes de la plataforma en la que
se muestre el documento html.• Son Diseñados para usarlos en Páginas Web
3
Lenguajes de ScriptJavaScript
¿Qué es JavaSctript?• Javascript es un lenguaje de programación
utilizado para crear pequeños programitasencargados de realizar acciones dentro delámbito de una página web.
• Es un lenguaje de programación del lado delcliente más utilizado
4
• JavaScript es un lenguaje de script
• No es un lenguaje orientado a objetos
• Se organiza entorno a:– El núcleo del Lenguaje – El lado del Cliente– El lado del Servidor
5
JavaScript
JavaScript Básico
– Palabras reservadas– Sintaxis sentencias y programas– Reglas para expresiones, variables y literales– Modelo de objetos (aunque JavaScript cliente y
servidor tienen objetos predefinidos diferentes)– Objetos predefinidos y funciones (como Math)
6
JavaScript Cliente• Los navegadores pueden interpretar JavaScript en el cliente• Cuando un navegador solicita una página, el servidor
manda tanto el código HTML como los scripts incluidos en dicho código
• El navegador lee la página de arriba abajo, mostrando el código HTML y ejecutando los scripts en el orden en que aparecen o son invocados
• Los scripts pueden reaccionar a los eventos del usuario (ratón, forms, etc)
• Ejemplo típico: comprobar la corrección de los datos introducidos (antes de mandarlos al servidor) ahorra tiempo!
• En general, cuando se desarrolla una aplicación web, debemos realizar tanto como sea posible en la parte del cliente
7
¿Qué se puede hacer con JavaScript?
• mostrar la fecha/hora del usuario• realizar cálculos matemáticos• averiguar el navegador del usuario y su versión• redireccionar el navegador a otra página• crear un árbol de navegación dinámico que facilite
la visita de un sitio web• validar (localmente) los datos de un formulario
antes de enviarlos al servidor• crear animaciones (textos con movimiento,
imágenes,...)• manipular los elementos HTML de una página• almacenar temporariamente datos en el cliente
8
¿Qué NO se puede hacer con JavaScript?
• escribir datos en un archivo• acceder a los archivos del servidor• averiguar la dirección de correo del usuario, su
dirección IP, etc• obtener datos de una BD del servidor (necesita de
otra tecnologia como ajax, php)• gestionar la transmisión de ficheros al servidor• ...
9
¿Cómo incluir código JavaScript en un Documento?
• Incluir código dentro de un elemento <script> <script language = “JavaScript”>
Sentencias Javascript</script>
• Especificando un archivo externo<script language = “JavaScript” src=“ArchivoJS.js”>
10
¿Cómo incluir código JavaScript en un Documento?
• Dando valor a un atributo de un elemento HTML
• Incluido en otras etiquetas HTML como respuesta a algún evento.
• Ejemplo<form name=“f1”><input type=“button” name=&{var1};
onClick=“fun1;”></form>
11
• Resulta aconsejable escribir los scripts de la siguiente forma:</HEAD><!--DEMAS ETIQUETAS --><script language=“JavaScript” type=“text/javascript”><!--...instrucciones javascript...definición de funciones--></script></HEAD><BODY>
12
JavaScript
Características de los objetos del documento HTML
• Son creados por el navegador a medida que se carga la página
• El nombre de un objeto se corresponde con el atributo Name o Id
13
JavaScript - DOM
El Modelo de Eventos
• Los eventos son sucesos que ocurren:– Provocados por el usuario– Acciones sobre el navegador– Sobre un elemento de una página
14
JavaScript
Javascript ofrece para el tratamiento deeventos:•El objeto event.•La captura de eventos
15
El Modelo de Eventos
• onFocus usuario mueve el foco al objeto• onBlur usuario remueve el foco del objeto• onSelect usuario selecciona texto• onChange usuario cambia el valor de un objeto• onSubmit usuario entrega el formulario• onClick usuario hace un click en un botón o link• onMouseOver usuario pone el cursos sobre un link
Ejemplo• onMouseOut usuario saca el cursos del link• onLoad página termina de cargarse - Ejemplo• onUnload usuario abandona la página• onAbort usuario aborta la carga de la página• onError se encuentra un error en el script
16
JavaScript - Eventos
DOM:Modelo de Objetos del Documento
¿Qué es el DOM?• Es el medio a través del cual JavaScript interactúa con
los elementos HTML• Es el conjunto de objetos predefinidos que nos
permite acceder a todos los elementos de una página y a ciertas características específicas del navegador
• Es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador
17
18
Jerarquía de Objetos del DOM
Screen
JavascriptSintaxis
19
Elementos Básicos:• Comentarios:
– Para una línea “// Esto es un Comentario”– Para un bloque “/* .................................................
.................... ...... */”• Literales: Valores que puede tomar una variable
o una constante.– Ejemplos: "Soy una cadena“ - 3434 - 3.43 -
true, false• Sentencias y bloques: En JavaScript las
sentencias se separan con un punto y coma, y seagrupan mediante llaves 20
JavaScript Básico
Tipos de datos• JavaScript permite trabajar con tres tipos de
datos primitivos básicos: – Numéricos (54, 2.3698, etc.)– Cadenas o Strings (“Diseño Web”)– Booleanos (True o False)
21
JavaScript Básico
• Tipado “dinámico”:– Los tipos de datos se asignan dinámicamente – no es necesario declarar el tipo de las variables– se pueden convertir automáticamente de un
tipo a otro durante la ejecución• Ejemplo:
Var1=48.................
Var1=“Diseño Web”22
JavaScript BásicoTipos de datos
Tipos de datos Numéricos:• Sólo existe un tipo de datos numérico.• Todos los números son por tanto del tipo
numérico.• Los números reales también se pueden escribir en
notación científica (2.482e12).• Los números pueden escribirse en las bases
decimal, hexadecimal (0x3EF ) y octal (0234)23
JavaScript Básico
Tipos de datos Cadena o String• Sirve para guardar texto (números, letras, signos). • Se pueden introducir cualquier número de
caracteres.• Los textos se escriben entre comillas, dobles o
simples.• Todo lo que se coloca entre comillas es tratado
como una cadena de caracteres
24
JavaScript Básico
Tipos de datos Cadena o String• Caracteres especiales: Sirven para expresar en
una cadena de texto determinados controles• Se escriben con una notación especial que
comienza por una barra invertida seguida del código del carácter a mostrar.
• Los más comunes son:
25
JavaScript Básico
Salto de línea: \n Comilla simple: \' Comilla doble: \" Tabulador: \t
Retorno de carro: \r Avance de página: \f Retroceder espacio: \b Barra Invertida: \\
Tipos de datos Booleanos
• Verdadero o falso.• Se utiliza para realizar operaciones lógicas• Los dos valores que pueden tener las variables
boleanas son true o false.
26
JavaScript Básico
Variables• Una variable es un espacio en memoria donde se
almacena un dato• Los nombres de las variables se construyen con caracteres
alfanuméricos y el carácter guión bajo (_).• Tienen que comenzar por una letra o el guión bajo.• Ejemplos: Edad – _nombre – nombreApellido • No utilizar nombres reservados como variables (Ej.,
return o for• nombres de variables que no permitidos: mi variable –
return – di%a – 12aniversario 27
JavaScript Básico
Variables• Declaración: NO es obligación declarar las variables. • Declaración: Se utiliza la palabra var. • Ejemplos de declaraciones:
– var nombre– Edad=10
• Se puede inicializar una variable en la declaración– var nombre = “Juan”– var edad = 20
• Se pueden declarar varias variables en la misma línea,– var nombre, edad
28
JavaScript Básico
Funciones• Una función es una serie de instrucciones
englobadas dentro de un mismo proceso que se podrá ejecutar luego desde cualquier otro sitio con solo llamarlo.
• Tipos de Funciones en JavaScript– Funciones definidas por el usuario– Funciones Predefinidas en el Lenguaje.
29
JavaScript Básico
Funciones Definidas por el Usuario¿Cómo se escriben?
• La sintaxis es:function nombre_funcion (p1,p2,…,pn){
instrucciones de la función ...
} • Invocación
nombre_funcion (p1,p2,…,pn)
30
JavaScript Básico
¿Dónde colocarlas?• En cualquier lugar de la página dentro de
un bloque <SCRIPT>• Orden definición – invocación
– En el mismo bloque es indistinto• En bloques distintos: Primero debe estar
declarado el bloque de definición y luego el de invocación
31
JavaScript Básico Funciones D. P/U
Tipo de Pasaje de Parámetros
Por Valor
El valor de los parámetros reales no se modifican
32
JavaScript Básico Funciones D. P/U
Ejemplo
Valores de Retorno• Toda función puede retornar un valor• Sintaxis:
function nombre_funcion(){<sentencias>return <valor de retorno>
}
33
JavaScript Básico Funciones D. P/U
Ejemplo
Ámbito de las Variables• Se le llama ámbito de las variables al lugar donde
están disponibles. • En JavaScript las variables son accesibles dentro
de la página en la que se declaran.• Existen dos ámbitos
– Variables globales. – Variables locales.
34
JavaScript Básico
Ámbito de las Variables Variables globales
• Son las declaradas en el ámbito más amplio posible, que en Javascript es una página web.
• Una variable global a la página se declara en un script, <SCRIPT>
var variableGlobal </SCRIPT>
• Las variables globales son accesibles desde cualquier lugar de la página
35
JavaScript Básico
Ámbito de las Variables Variables locales
• Son las declaradas en ámbitos más acotados (Ej, funciones, iteraciones)
• Sólo pueden accederse dentro del lugar donde se han declarado.
• Ejemplos:<SCRIPT>
function miFuncion (){ var variableLocal
} </SCRIPT>
36
JavaScript Básico
Ámbito de las Variables • Pueden existir variables con el mismo nombre en ámbitos
distintos. • Ejemplo:
<SCRIPT> var numero = 2 function miFuncion (){
var numero = 19 document.write(numero) //imprime 19
} document.write(numero) //imprime 2 </SCRIPT>
37
JavaScript Básico
Ejemplo
Ámbito de las Variables • En Javascript tenemos libertad para declarar o no
las variables con la palabra var
• Diferencias entre utilizar var o no– Con var la variable es de ámbito local o global
dependiendo de donde se declaro.– Sin var tomará el valor de la variable global en caso de
existir una con el mismo nombre.
38
JavaScript Básico
Ámbito de las Variables • Ejemplo<SCRIPT>
var numero = 2function miFuncion (){
numero = 19document.write(numero) //imprime 19
}document.write(numero) //imprime 2//llamamos a la funciónmiFuncion()document.write(numero) //imprime 19
</SCRIPT>
39
JavaScript Básico
Ejemplo
Operadores• Los operadores se clasifican según el tipo de acciones
que realizan.• Se clasifican en:
– Operadores Aritméticos: Utilizados para operaciones matemáticas simples
– Operadores de asignación: Utilizados para asignar valores a las variables
– Operadores de cadenas: Utilizados para realizar acciones típicas sobre.
– Operadores lógicos Utilizados para realizar operaciones lógicas
– Operadores condicionales: utilizados para definir expresiones condicionales
40
JavaScript Básico
Operadores Aritméticos: • Javascript tiene los siguientes:
– + Suma de dos valores– - Resta de dos valores, – - cambio de signo de un número (un solo operando:
–23)– * Multiplicación de dos valores– / División de dos valores– % El resto de la división de dos números – ++ Incremento en una unidad (un solo operando)– -- Decremento en una unidad (un solo operando)
41
JavaScript Básico
Operadores de asignación• Javascript tiene los siguientes:
– = Asignación. Asigna la parte de la derecha del igual a la parte de la izquierda.
– += Asignación con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de la izquierda.
– -= Asignación con resta– *= Asignación de la multiplicación– /= Asignación de la división– %= Se obtiene el resto y se asigna
42
JavaScript Básico
Operadores de cadenas
• Javascript sólo tiene un operador para cadenas– + Concatena dos cadenas.
• Se pueden realizar otras acciones con una serie de funciones predefinidas en el lenguaje.
43
JavaScript Básico
Operadores lógicos
• Javascript tiene los siguientes:– ! Operador NO o negación. – && Operador Y– || Operador O
44
JavaScript Básico
Operadores condicionales• Javascript tiene los siguientes:
– == Comprueba si los dos operandos son iguales – != Comprueba si los dos operandos son distintos– > Mayor que, devuelve true si el primer operando es
mayor que el segundo– < Menor que, es true si el primer operando es menor
que el segundo– >= Mayor igual.– <= Menor igual
45
JavaScript Básico
Precedencia de los operadores
• Es el orden en el que se irán ejecutando las operaciones que representan los operadores en una expresión.
• Todos los operadores se evalúan de izquierda a derecha,
• La mayoría de las reglas de precedencia están sacadas de las matemáticas
46
JavaScript Básico
Precedencia de los operadores • () [] . Paréntesis, corchetes y el operador punto que
sirve para los objetos• ! - ++ -- negación, negativo e incrementos• * / % Multiplicación división y módulo• +- Suma y resta• << >> >>> Cambios a nivel de bit• < <= > >= Operadores condicionales• == != Operadores condicionales de igualdad y
desigualdad• & ^ | Lógicos a nivel de bit• && || Lógicos boleanos• = += -= *= /= %= <<= >>= >>>= &= ^= != Asignación
47
JavaScript Básico
Estructuras de Control
• Toma de decisiones: Para realizar unas acciones u otras en función de una condición.– IF– SWITCH
• Bucles o iteraciones: Para realizar ciertas acciones repetidamente. – FOR – WHILE – DO WHILE
48
JavaScript Básico
Estructuras de Control: IF • La sintaxis de la estructura IF es la siguiente. if (expresión) {
acciones a realizar en caso positivo ...
}
if (expresión) {acciones a realizar en caso positivo ...
} else { acciones a realizar en caso negativo ...
}49
JavaScript Básico
Estructuras de Control: IF
• Estructuras if anidadas
if (x == y){ x+=y; document.write("x + y = "+x) } else {
if (x > y) { x-=y; document.write("x - y = "+x) }else{ x*=y; document.write("x * y = "+x) }
}
50
JavaScript Básico
Ejemplo
Operador IF
• Es una forma más esquemática de realizar algunos IF sencillos.
• Sintaxis:Variable = (condición) ? valor1 : valor2
51
JavaScript Básico
Estructuras de Control: Switch
• Se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.
52
JavaScript Básico
• Sintaxis:switch (expersión) {case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1break
case valor2: Sentencias a ejecutar si la expresión tiene como valor a valor2 break
case valor3: Sentencias a ejecutar si la expresión tiene como valor a valor3 break
default: Sentencias a ejecutar si el valor no es ninguno de los anteriores
} 53
JavaScript Básico
Estructuras de Control: For• Se utiliza para repetir una o más instrucciones un
determinado número de veces. • Se suele utilizar cuando sabemos seguro el número de
veces que queremos que se ejecute las sentencias.• Sintaxis
for (inicialización;condición;actualización) { sentencias a ejecutar en cada iteración
}
54
JavaScript Básico
Estructuras de Control: While• Se utilizan cuando se quiere repetir la ejecución
de una o más sentencias un número indefinido de veces, según se cumpla una condición.
• Sintaxis:while (condición){
sentencias a ejecutar }
55
JavaScript Básico
Estructuras de Control: Do ... While• Se utiliza generalmente cuando se sabe que la
iteración se ejecutará al menos una vez
• Sintaxis:do {
sentencias del bucle } while (condición)
• Se ejecuta siempre una vez y al final se evalúa la condición.
56
JavaScript Básico
• Estructuras de iteración anidadas (For)<script type="text/javascript">document.write("<TABLE border=3>") document.write("<Tr>") for(i=1;i<=5; i++){ document.write("<TD>")
for(j=0;j<10; j++){ var prod=i*j;document.write(i +" x " +j +" = "+prod+"<br>")} document.write("</TD>") }
document.write("</Tr>")document.write("<Tr>")for(i=6;i<=10; i++){ document.write("<TD>")
for(j=0;j<10; j++){ var prod=i*j;document.write(i +" x " +j +" = "+prod+"<br>")} document.write("</TD>")}
document.write("</Tr>")document.write("</Table>")
</script> 57
JavaScript Básico
Ejemplo
Recommended