Clase 6 sin fondo [Modo de compatibilidad]dirinfo.unsl.edu.ar/dweb/javascript_parte1.pdf · Lenguajes de Script ¿Qué son los Lenguajes de Script? • Scritps de cliente: son programas

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><script language=“JavaScript” type=“text/javascript”></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


Ejemplo

Valores de Retorno• Toda función puede retornar un valor• Sintaxis:

function nombre_funcion(){<sentencias>return <valor de retorno>

}

33


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

Documents

Clase 6 sin fondo [Modo de compatibilidad]dirinfo.unsl.edu.ar/dweb/javascript_parte1.pdf · Lenguajes de Script ¿Qué son los Lenguajes de Script? • Scritps de cliente: son programas