UB PROG3 WEB TEMA 09 JS Introduccion

(1)

UNIVERSIDAD DE BELGRANO

PROGRAMACIÓN 3

Profesor:

(2)

Introducción

 Introducción a JavaScript.

 Variables, tipos de datos y expresiones regulares.

 Operadores y conversión entre tipos.

(3)

Introducción

 Introducción a JavaScript:

 Es un lenguaje de programación interpretado por el motor de interpretación del navegador (browser).

 _{Es operacional (algoritmo) y orientado a objetos.}  _{No es Java.}

 _{Se utiliza en las páginas Web para cubrir carencias del HTML}

(interactividad + comportamiento personalizados)

 _{Incrementa funcionalidad de las páginas e interacción con el}

usuario.

 _{Manipula el DOM (Document Object Model): document y el}

(4)

Introducción

HTML (estructura)

(5)

Introducción

 ¿Qué se puede hacer? Ejemplos:

 Autocompletar en Google.

_{Validar datos introducidos en un formulario web.} _{Presentar imágenes.}

_{Contenidos dinámicos.}

(6)

Introducción

 El código puede ser interpretado en el:

 Cliente (computadora del usuario)

_{Servidor (entorno de desarrollo Node.js)}  _{Técnicas de desarrollo:}

_{DHTML (Dynamic HTML): mediante el uso de HTML, CSS y}

JavaScript es capaz de crear efectos visuales y aumentar la interactividad con el usuario.

 _{AJAX (Asynchronous JavaScript And XML): capaz de}

(7)

Introducción

 Versiones de JavaScript:

 Nace en 1995. Creador: Brendan Eich.

 Con el paso del tiempo se han ido implementando nuevas y ampliadas versiones de JavaScript para soportar nuevas funcionalidades.

 _{Esto obliga a actualizar los navegadores, dado que es donde}

se interpreta el código, y así poder mostrar correctamente una página que utilice estas nuevas versiones.

 _{Siempre que se programe un código JavaScript es}

conveniente probarlo sobre distintos navegadores para asegurar su correcto funcionamiento.

(8)

Introducción

 ¿Qué se necesita para programar en JavaScript?:

 Navegador.

 Editor de texto (Bracket, Sublime Text, etc.)

(9)

Introducción

 Integración con HTML:

 Para poder insertar código JavaScript dentro de una página HTML, se dispone de la etiqueta <SCRIPT>:

(10)

Introducción

 Si el código utiliza alguna característica especial de una versión en concreto, se puede especificar de la siguiente manera:

(11)

Introducción

 Si el código es muy extenso y se quiere reutilizarlo en otras páginas, existe la posibilidad de tener un archivo “.js”:

(12)

Introducción

(13)

Introducción

 Hay dos sitios dentro de una página donde se puede situar código:

 1. Dentro de la etiqueta <head>: se suele utilizar normalmente para cargar archivos externos.

_{2. Dentro de la etiqueta} _{<body>: aquí se coloca}

(14)

Introducción

 Sintaxis del lenguaje:

 Muy parecida a la de otros lenguajes como Java y C.

_{Mayúsculas y minúsculas.}  Comentarios.

(15)

Introducción

 Mayúsculas y minúsculas:

 JavaScript es case sensitive, es decir, es capaz de distinguir mayúsculas y minúsculas en los nombres de variables, funciones u otros objetos.

posicion != Posicion != POSICION

 _{Pudiendo estar definidas todas a la vez y con valores}

(16)

Introducción

 Comentarios:

 Sirven para ayudar al programador u otra persona a comprender mejor el código.

 _{Todo texto que se escriba como comentario no será}

interpretado por el navegador.

(17)

Introducción

(18)

Introducción

 Separación de instrucciones:

 Para separar las distintas instrucciones que contiene el código existen 2 opciones:

_{1. Escribir un punto y coma (;) al final de cada instrucción.} _{2. Insertar un salto de línea al terminar una instrucción.}

 _{Es aconsejable escribir cada instrucción en una nueva línea y}

(19)

Introducción

(20)

Introducción

 Navegadores sin soporte JavaScript:

 Puede darse la posibilidad de que el visitante de la página esté usando un navegador que no soporte JavaScript o lo tenga desactivado.

 _{En esto casos, todo el código no será interpretado ni}

ejecutado, ya que el navegador no reconoce la etiqueta <script> y todo el código se mostrará como un texto HTML.

 _{Para evitar, es bueno marcar el código como un comentario}

(21)

Introducción

 Navegadores sin soporte JavaScript:

(22)

Introducción

 Variables:

 Es un espacio de memoria donde se almacena temporalmente un dato que se utiliza en las operaciones dentro del código.

 _{Cada variable estará identificada por un nombre:}

 _Válidos: _{dos_numeros,} _nombre1, _{_Documento,}

nombreApellidos, $dinero, …

 _Inválidos: _{2_numeros,} _nombre-1, _@Documento,

nombre&apellidos, €dinero, …

 _{Nombre de variable: ( $ | _ | Letra ) ( Letra | Digito | $ | _ )*}

 _{El nombre de una variable no puede coincidir con el de una}

(23)

Introducción

 Declaración de variables:

 Para utilizar una variable en el código debe estar indicado cual es su nombre y, si procede, el valor que se le quiere dar.

 _{Tipos de declaración:}

_{Explícita: consiste en usar la sentencia var seguida del}

nombre de la variable y, opcionalmente, la asignación de un valor.

_{Implícita: se escribe directamente el nombre de la}

(24)

Introducción

(25)

Introducción

(26)

Introducción

(27)

Introducción

 Declaración de constantes:

(28)

Introducción

 Tipos de datos:

 Cada variable o constante que se defina pertenece a un tipo de datos como textos o números.

 _{No tipado: no es necesario definir el tipo de una variable al}

(29)

Introducción

 Tipos de datos:

 Tipos de datos que maneja JavaScript:

 Números.

(30)

Introducción

 Números:

 Todo número que se escriba, ya sea entero o real, será considerado del mismo tipo.

 _{También lo serán los números reales escritos en notación}

(31)

Introducción

 Números:

 Además, los números enteros pueden ser representados en otros sistemas distintos al decimal (base 10):

Base 10 Base 8 Base 16

(32)

Introducción

 Lógicos:

(33)

Introducción

 Cadenas:

 Consta de un texto con cualquier carácter (letra, números y símbolos).

 _{Las cadenas o strings se escriben en el código entre comillas}

(34)

Introducción

 typeof:

(35)

Introducción

 Caracteres especiales:

Carácte

r Modo de empleo Descripción

“ \” Comilla doble ‘ \’ Comilla simple \ \\ Barra inversa n \n Nueva línea t \t Tabulador

r \r Retorno de carro b \b Retroceso

(36)

Introducción

(37)

Introducción

 Objetos:

(38)

Introducción

 Valores especiales:

 Las variables en JavaScript pueden tomar una serie de valores especiales cuando se trabaja con ellas.

Valor Descripción Operación

undefined Indica que la variable aún no ha tomado

ningún valor. var numero; null Para definir o comprobar que una variable

está vacía. var ahorros = null; NaN Si la variable almacena el resultado de

una alguna operación matemática no válida.

var division = 0/0; var s = numero + 5;

Infinity,

(39)

Introducción

 Expresiones regulares (ER):

 Una ER o patrón, permite buscar coincidencias dentro de un texto.

 _{Se identifican colocando una barra (/) al principio y al final de}

la cadena que la constituyen.

(40)

Introducción

 Expresiones regulares (ER):

Patrón Significado Valores que lo

cumplirían

/mira*/ “mir” seguido de 0 ó + aes mir, mira, miraa, miraaa, …

/mira+/ “mir” seguido de 1 ó + aes mira, miraa, miraaa, … /mira?/ “mir” seguido de 0 ó 1 “a” mir, mira

/mira{2}/ “mir” seguido de 2 aes miraa

/mira{2,}/ “mir” seguido de 2 ó + aes miraa, miraaa, miraaaa, …

/

mira{2,4}/ “mir” seguido de 2 a 4 aes miraa, miraaa, miraaaa /mi+ra*/ “m” seguido de 1 ó + ies,

seguido de “r” y seguido de 0 ó + aes

(41)

Introducción

 Expresiones regulares útiles:

ER Descripción

^d{9}/ Número de teléfono ^d{8}[a-zA-Z]/ Número de DNI

^d{2}-\d{2}-\d{4}/ Fecha

(42)

Introducción

 Operadores:

 Permiten realizar cálculos o acciones sobre las variables o datos que maneja un script, devolviendo otro valor como resultado de dicha operación.

Nombre Operador/es Ejemplos

Asignación = miDato = 5;

Aritméticos +, -, ++, --, *, /, %, +=, -=, *=, /=, %=

miDato++; miDato--;

Sobre cadenas + miDato = “Java” + “Script”; Lógicos !, &&, || miDato = true && false;

Relacionales ==, !=, >, >=,

<, <= miDato = 5 > 3; Estricta (tipo y

valor)

(43)

Introducción

 Operadores especiales:

Nombre Operador Ejemplos

Condicional op1? Op2 : op3; mayoria = (edad >= 18)? ”si” : ”no”;

Tipo de dato typeof typeof(5.9); //”number” typeof(true); //”boolean” typeof(“hola”) //”string” typeof(alert); //”function”

(44)

Introducción

 Operadores especiales sobre objetos:

Nombre Operador Ejemplos

Punto (.) miObjeto.propiedad; Corchetes ([]) miObjeto[propiedad]; Creación new new miObjeto;

Borrado delete delete miObjeto.propiedad Existencia in propiedad in miObjeto

(45)

Introducción

 Precedencia de operadores:

Pre

c Operadores

1 . []

2 () new

3 ! – (signo -) + (signo +) ++ -- typeof delete 4 * / %

5 + (suma) – (resta) 6 << >>

7 < <= > >= in instanceof

8 == !=

Pre c Operadores 9 & 10 ^ 11 | 12 && 13 || 14 ?:

(46)

Introducción

 Conversión entre tipos:

(47)

Introducción

 Conversión entre tipos:

 Explícita: hay ocasiones en que la conversión implícita no ofrece un resultado predecible ni deseado, es preciso que intervenga la mano del programador para realizar estas conversiones cuando sea necesario.

(48)

Introducción

 Estructuras de control:

 Todas las instrucciones que se quieran ejecutar dentro de una estructura de control deben ir encerradas entre llaves {}.

 _{En JavaScript no es obligatorio usar las llaves si el bloque}

consta de una única instrucción, aunque es aconsejable ponerlas siempre para que el código sea uniforme.

 _{Toda estructura de control puede ir anidada dentro de}

cualquier otra estructura.

 _Tipos:

(49)

Introducción

 Estructuras condicionales:

 Evalúan una condición que, de cumplirse, permitirán que se ejecute su bloque de instrucciones asociado.

 _Tipos:

_{Sentencia if-else.}

(50)

Introducción

 Sentencia if-else:

(51)

Introducción

 Sentencia switch-case:

(52)

Introducción

 Estructuras de bucle:

 Ejecutan un conjunto de instrucciones repetidamente mientras se cumpla una condición.

 _{A cada repetición de un bucle se le denomina iteración.}  _Tipos:

(53)

Introducción

 Sentencia while:

(54)

Introducción

 Sentencia do-while:

(55)

Introducción

 Sentencia for:

(56)

Introducción

 Sentencia break:

 Sirve para finalizar prematuramente un bucle o, para delimitar un bloque case dentro de una sentencia switch.

(57)

Introducción

 Sentencia continue:

 Sirve para saltar una iteración de un bucle, ignorando además todas las instrucciones que hubiera por debajo.

(58)

UB PROG3 WEB TEMA 09 JS Introduccion

UNIVERSIDAD DE BELGRANO

PROGRAMACIÓN 3

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Introducción

Ejercicio