herramientas modernas de programación licenciatura...

Herramientas Modernas de ProgramaciónLicenciatura en Administración de Tecnologías de Información y Comunicaciones

Rafael Vázquez Pérez

jueves 21 de abril de 16

Contenido• Introducción a JavaScript

• Tratamiento de variables

• Los operadores

• Estructuras condicionales

• Objetos, funciones y métodos

• Objetos del navegador

• Eventos

• Cookies


Introducción a Javascript

• ¿Que es Javascript?

• JavaScript, al igual que Java o VRML, es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML.

• Al ser la más sencilla, es por el momento la más extendida.

• Antes que nada conviene aclarar lo siguiente:



• JavaScript no es un lenguaje de programación propiamente dicho.

• Es un lenguaje de scripts u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto.

• Nunca podrás hacer un programa con JavaScript, tan sólo podrás mejorar tu página Web.



• ¿Para que sirve Javascript?

• JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente/servidor.

• Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario.

• Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario.


Ejemplo:

• Cuando la página HTML es un formulario que permite acceder a una anuario telefónico, se puede insertar un script que verifique la validez de los parámetros proporcionados por el usuario.

• Esta prueba se efectúa localmente y no necesita un acceso a la red.


Diferencia con Java

• La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de programación completo.

• Lo único que comparten es la misma sintaxis.


Utilización de javascript en un documento HTML

• Para insertar un script de javascript en un documento de HTML, se lleva a cabo mediante el tag SCRIPT utilizando la sintaxis:

<SCRIPT>Código del script</SCRIPT>


Utilización de javascript en un documento HTML

• Los atributos del tag script son:

LANGUAGE="JavaScript"Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC.SRC=urlEl atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML.


Primer ejemplo de script


Segundo ejemplo de script


Los comentarios en javascript• Los comentarios en el código permiten insertar observacionesdel autor del

código para describir las distintas partes del programa.

• El interprete JavaScript los ignora y posee por ello una sintaxis particular.

• Se distinguen los comentarios en una sola línea, precedidos por la barra diagonal doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */.

• Por ejemplo:

• // esto es un comentario

• /* esto es un comentario de varias líneas con una longitud cualquiera */


Identificadores y palabras reservadas

• Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición.

• Los identificadores deben seguir las siguientes reglas:

• El identificador debe empezar por una letra o por el caracter '_'.

• Los caracteres siguientes, además de letras o el caracter '_', pueden ser cifras.

• Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:

• Num_linea

• aux1

• _exit


Identificadores y palabras reservadas

• Primeramente decir que las palabras reservadas son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.


Tercer ejemplo de script


Practica 1

• Capture el siguiente código y ejecútelo


Tratamiento de Variables

• Lo que JavaScript reconoce son tipos de valores, ya que como veremos más adelante JavaScript no requiere que las variables tengan un tipo determinado en su declaración, pues que JavaScript trata a todos los tipos por igual realizando una conversión automática de los mismos. Ejemplo:

• mi_variable = 345; // mi_variable es de tipo entero.

• mi_variable = "hola"; //mi_variable es de tipo string.


Tipos de datos numéricos

• Existen 2 tipos de datos numéricos:

• Entero

• var1=20;

• Real

• var2=25.478;


Tipos de datos

• Strings: Ejemplos

• confirm("¿Estas seguro?");

• OnMouseOver = "confirm('¿Estas seguro?')";

• var1= "hola mundo";


Tipos de datos

• El tipo booleano simplemente distingue entre dos estados, un estado de éxito o de activado, valor verdadero true, y un estado de fracaso o de desactivado, valor false.

• En JavaScript a las variables se les puede asignar un valor que indica el vacío, este valor es el valor null.


Conversión de Datos

• var una_string = "7";

• var un_numero = 42;

• x = una_string + un_numero;

• y = una_numero + una_string;

• x=”742”

• y=49


Los arreglos en Javascript

• Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un índice que comenzará desde el elemento número 1 (no desde el 0 como en Java o C/C++).

• En los arrays al igual que con las variables no existen tipos predeterminados.

• Para crear un array es necesario definirnos una función como la que veremos a continuación:


Los arreglos en Javascriptfunction CreaArray(n) { this.length = n; for (var i=1; i<=n; i++) this[i] = 0; return this; }


Los arreglos en Javascript• Comentar sobre la función que la palabra

reservada this hace referencia a la variable a actual, es decir, a la variable que contendrá el array.

• Por otro lado, observar que los array tienen una propiedad length que nos muestra la longitud de dicho array.

• Por último mostrar el uso de dicha función:


mi_array = new CreaArray (2);// new: Creamos una instancia del objeto, en este caso un array// Llenamos el arraymi_array[1] = "Pepe";mi_array[2] = 35;longitud = mi_array.length; //longitud será 2


Los operadores• JavaScript posee una amplia variedad de

operadores.

• Estos operadores los podemos distinguir en dos grupos: binarios, que actúa sobre dos operandos y unarios, que sólo requieren un operando.

• Así, su sintaxis general es:


Los operadores

• operando1 operador_Binario operando2

• operando1 operador_unario

• operador_unario operando1


Operadores aritméticos

• JavaScript suministra las operaciones básicas con el único añadido del operador que devuelve el resto de la división entre el operador izquierdo y el derecho.

• Se carece de operadores más complejos, aunque el objeto Math definido en JavaScript posee dichas tareas.


Operadores aritméticosOperadores AritméticosOperadores Aritméticos

+ Suma

- Resta

* Multiplicación

/ División

% Residuo


Operadores aritméticos

• n=k++; // El valor de k se asigna a n y luego se incrementa k.

• n=++k; // Primero se incrementa k y luego se asigna a n.


Operadores RelacionalesOperadores RelacionalesOperadores Relacionales

> mayor que

< menor que

>= mayor o igual que

<= menor o igual que

!= diferente

== igual


operadores lógicosOperadores LógicosOperadores Lógicos

&& And

|| Or

! Not


Estructuras condicionales

• La instrucción if

if ( Condición ) Instrucción 1 o bloque de instrucciones;[ else Instrucción 2 o bloque de instrucciones; ]

{ Instrucción 1; Instrucción 2; ... Instrucción N;}


Ejemplo

• Escriba el siguiente código, probar y comentar


Practica

• Implementar un script que lea el RFC con homoclave y que no permita una cadena vacía ni una cadena mayor de 13 caracteres

• Puede ayudarse con el siguiente ejemplo


Ejercicio

• Implementar un script que lea por teclado la cantidad de kw consumidos y calcule el costo a pagar a 2.25 pesos por kw.


Ejercicio

• Modifique el programa anterior para que se puedan aplicar las tarifas de costos de kw

• entre 1 y 100 kw el costo del kw es 2.25

• mas de 100 kw el costo es 4.50

• Deberá considerar 15 % de iva


Ejercicio

• Hacer un script que lea 3 números enteros y los ordene de mayor a menor


La instrucción while

• while ( Condición ) Instrucción o bloque de instrucciones;


for• for ([inicialización]; [condición]; [expresión] )

• Instrucción o bloque de instrucciones;


Break• La instrucción break se puede colocar dentro de

un bucle o bucles anidados. Cuando se ejecuta la sentencia break se abandona el bucle más interno.

• A todos los efectos la sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta.


Continue• La sentencia continue, no abandona el bucle si no

hace que se ejecute la siguiente iteración.

• En el bucle while la ejecución del continue hace que el flujo del programa salte a la condición.

• En el bucle for la ejecución del continue hace que la expresión de incremento, para después continuar normalmente con la condición.

• Es decir, la ejecución del continue evita que se ejecute el resto del cuerpo del bucle.


Switch• switch ( Expresión )

• {

• case Valor 1: Instrucción o bloque de instrucciones;

• [break;]


• [break;]


• [break;]

• ...

• case Valor N: Instrucción o bloque de instrucciones;

• [break;]

• [default:]Instrucción o bloque de instrucciones;

• }


Objetos, funciones y métodos

• La instrucción function permite la definición de funciones.

• Después de esta palabra reservada se coloca el nombre de la función seguido de una lista de argumentos delimitados por paréntesis y separados por comas.

• function nombre (param1, param2,..., paramn){

• instrucciones en JavaScript;

• }


Return• La sentencia return es la que permite devolver el resultado de una función.

En el ejemplo que se verá a continuación, se muestra una función que devuelve el área de un cuadrado de lado l.

• function Area(lado){

• return lado*lado;

• }


cuidado• El lenguaje JavaScript no permite las definiciones

anidadas de funciones.

• El paso de parámetros se realiza por valor.

• Es decir, si una función modifica el contenido de sus argumentos, esta modificación es local y no repercute ni globalmente ni a la función que llama.


Objetos predefinidos por el lenguaje javascript

• El lenguaje JavaScript posee objetos predefinidos, estos objetos nos permiten representar:

• las cadenas de caracteres y los métodos asociados.

• las constantes matemáticas y las funciones matemáticas.

• las fechas y los métodos asociados.


El objeto string

• //crea un objeto mystring de tipo stringmystring = "Prueba";

• El objeto string posee una sola propiedad, la propiedad length, que contiene el tamaño de la cadena de caracteres representada por dicho objeto.


Manipulación de cadenas• charAt(índice).- Extrae un caracter representado por el índice especificado.

Índice está entre 0 y length-1.

• indexOf(carácter) o indexOf(carácter,índice).-Devuelve el índice de la primera ocurrencia del carácter. También se le puede especificar el lugar por el que se quiere que empiece a buscar.

• lastIndexOf(cadena de caracteres).-Devuelve la última ocurrencia de la cadena de caracteres.

• substring(principo,fin).- Extrae una cadena de caracteres entre un valor de índice inicial y otro final.

• toLowerCase().- Transforma una cadena de caracteres en minúsculas.

• toUpperCase().- Transforma una cadena de caracteres en mayúsculas.


El objeto Date• El lenguaje JavaScript no posee variables tipo fecha, pero el objeto

predefinido Date permiten la manipulación de datos que representen fechas. Este objeto no posee propiedades pero posee un número importante de métodos que permiten su actualización, la obtención y la manipulación de fechas.

• JavaScript gestiona las fechas como el lenguaje Java. Estos dos lenguajes comparten un gran número de métodos que permiten la manipulación de fechas y utilizan la misma referencia: 1 de enero de 1970.

•


El objeto Date• Se utilizará la sintaxis siguiente para crear

un objeto de tipo de Date:

• NombreVariable = new Date(parámetros)

• donde NombreVariable es el nombre de la variable en JavaScript que representa al objeto creado. Esta variable puede ser un objeto o la propiedad de un objeto existente.


El objeto Date• El constructor Date admite los parámetros siguientes:

• ninguno, para crear un objeto que tenga la hora actual. hoy = new Date();

• una cadena de caracteres con el formato. "Mes día, año horas:minutos:segundos"

• Por ejemplo: fecha = new Date("January 6, 1996 14:50:00"); Si las horas, los minutos y los segundos se omiten, se ponen a cero.

• tres enteros que representan el año, el mes y el día. Por ejemplo: fecha = new Date(79,2,12);

• seis enteros que representan el año, el mes, el día, la hora, los minutos y los segundos. Por ejemplo: fecha = new Date(79,2,12,6,45,0);


Los métodos de Date• Entre los métodos del objeto Date que veremos a continuación podremos

distinguir cuatro categorías bien diferenciadas:

• Aquellos que nos permiten acceder a la fecha y hora

• fijar la fecha y hora

• analizar las cadenas de caracteres que representan las fechas

• convertir las fechas en una cadena de caracteres


Los métodos de Date• getDate() Devuelve el día del mes de 1 a 31.

• getDay() Devuelve el día de la semana de 0 (domingo) a 6 (sábado).

• getHours() Devuelve la hora de 0 a 23.

• getMinutes() Devuelve los minutos de 0 a 59.

• getSeconds() Devuelve los segundos de 0 a 59.

• getMonth() Devuelve el mes de un objeto Date. La salida es un valor entero entre 0 (Enero) y 11 (Diciembre).

• getTime() Devuelve el valor numérico correspondiente al objeto Date que lo llama, el valor de salida va referido al 1 de Enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fecha es posterior a la de referencia y con signo negativo si la fecha está antes de ésta.

• getTimezoneOffset() Devuelve la diferencia con la zona GMT en minutos.

• getYear() Devuelve el año.

• parse(cadena) Devuelve el número de milisegundos de una string que representa a una fecha con respecto a la ya conocida fecha de referencia del 1 de Enero de 1970 a las 00:00:00 horas. Para referenciar este método no hemos de crear ninguna instancia del objeto Date, bastará con realizar lo siguiente:

• var miliseg = Date.parse(string);


Ejercicio

• Haga un script que lea 2 fechas de un mismo año y calcule la diferencia en dias.

• Suponga que todos los años son iguales y que febrero siempre tiene 28 dias.


Ejercicio

• Hacer un script que lea una fecha de nacimiento y despliegue la edad de la persona


Objetos del navegador

• Cuando un cliente carga un documento HTML, crea los objetos correspondientes al documento, a su contenido y a la información útil.

• Cada documento HTML crea los objetos siguientes:


Objetos del Navegador• window. Representa la raíz del árbol, y posee descendientes cuando el

documento contiene subventanas.

• location. Contiene las propiedades de la dirección URL del documento.

• history. Contiene la información relativa a las direcciones URL visitadas en la sesión actual.

• document. Contiene información sobre el documento actual como el título, los formularios,... Las propiedades del objeto document dependen del contenido de la página HTML. Se crean en función del contenido de dicha página, algunas de estas propìedades son objetos.


La jerarquía de objetos asociados al cliente www

• El objeto creado por el cliente se describe de manera jerárquica y representa la estructura jerárquica del documento HTML.

• Esta jerarquía es del tipo jerarquía instanciada porque es específica de las instancias de objeto y no de la clase del objeto.

• En esta jerarquía, los descendientes de un objeto se representan mediante propiedades del objeto. Por ejemplo, un formulario form1 es un objeto pero también es una propiedad del objeto document y será referenciado como document.form1. Para referenciar una propiedad específica a un objeto de esta jerarquía es necesario precisar sus ascendientes. En cualquier caso, la raíz del árbol puede omitirse.


El objeto document• El objeto document contiene la información

respecto al objeto actual.

• Se define por la marca BODY. El contenido del documento se delimita por la secuencia <BODY>...</BODY>; y se puede acceder a las propiedades del objeto document.

• El objeto document contiene los eventos vistos anteriormente asociados a la marca BODY (onLoad, onUnLoad).


Las propiedades de Document• alinkColor. Color RGB de los enlaces activados.

• bgColor. Color RGB del fondo. Ejemplo: document.bgColor = white

• cookie. Cadena de caracteres que contiene el cookie asociado al recurso representado por el objeto.

• fgColor. Color RGB del primer plano de un documento.

• forms. Propiedad del tipo objeto form que contiene los formularios presentes en el documento. Este objeto contendrá propiedades de que permitirán acceder a cada uno de los elementos del formulario. [object HTMLFormElement]


Las propiedades de Document

• lastModified. Fecha de la última modificación.

• linkColor. Color RGB de los enlaces hipertexto.

• links. Propiedad del tipo link que contiene todos los enlaces del documento.

• location. Propiedad del tipo location que contiene la dirección URL del documento.

• title. Título del documento HTML.

• vlinkColor. Color RGB de enlaces accedidos.


Ejemplo

• Para el manejo de los objetos del navegador descargue el código practicadeobjetos.html que esta en la pagina y visualícelo en el navegador


Ejercicio

• Pasarán alumnos a probar las propiedades del objeto window


Ejercicio

• Descargue el script nieve.html y la imagen snow.gif, ejecútelo.

• La imagen y el script deben estar en la misma carpeta.

• Reto: Modifique el script para que automáticamente comienze a nevar el lunes 10 de octubre


El objeto history• Es bien sabido que el visualizador guarda un historial de los sitios que se han

visitado en cada sesión, de modo que podemos utilizar los botones de anterior y siguiente para movernos por las páginas.

• Todas las direcciones que se han visitado se guardan en este historial en forma de matriz.

• Desde Javascript, podemos utilizar este objeto para crear nuestros propios botones de retroceso y avance dentro de la páginas.

• Sin embargo, no podemos acceder a los nombres de las direcciones URL ya que son información privilegiada y solo las puede saber el usuario.

• Las caracteristicas más importantes del objeto history son propiedades como next y previous (almacena nel URL posterior y anterior, respectivamente). Y métodos como back, forward y go, que permiten cargar en el navegador las páginas que están en el historial del mismo.


Eventos• El interés de los scripts JavaScript reside en

gestionar localmente los eventos detectados. Los eventos son el resultado de una acción del usuario. Por ejemplo, hacer clic sobre un botón o seleccionar un campo de un formulario son eventos.

• La importancia de los eventos radica en que nos posibilita modificar el contenido de un documento HTML sin intercambio de datos a través de la red. Esto se hacía hasta ahora mediante la programación CGI.


¿Como se gestionan los eventos?

• La gestión de eventos se efectúa mediante scripts ejecutados automáticamente cuando se produce un evento dado. Esta gestión se indica en ciertas marcas y se especifica la acción asociada a cada evento. La sintaxis es la siguiente:

• <TAG eventHandler="JavaScript code">

• donde TAG representa una marca HTML y eventHandler el nombre del evento detectado.

• Así, en el siguiente ejemplo se ejecutará la función evaluar cuando el usuario haga clic sobre el botón calcular.

• <INPUT TYPE="button" VALUE="calcular" onClick="evalua(this.form)">

• La estructura this.form se refiere al formulario que contiene el botón. Esta estructura representa la variable pasada como argumento a la función evalua.


Eventos• En JavaScript, la interacción con el usuario se consigue mediante la captura

de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

• Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.

• La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado.


Cookies

• Las cookies son pequeños paquetes de información enviadas por las webs que visitas y que el navegador almacena en el pc del usuario.

• Son útiles para guardar preferencias del usuario u otros datos referentes a usuarios en particular.


Que información se puede almacenar en una cookie

• Se puede almacenar una gran variedad de información.

• Esta información se almacena en cadenas de texto en la forma variable=valor.

• Todas estas variables van en una sola cadena de texto no más de 4KB y cada par variable/valor se separa de la siguiente por un ; de la siguiente forma:


Que información se puede almacenar en una cookie

• "estilo=rojo; max-age=40; path=/; domain=efxto.com"

• Analizando el código que escrito. max-age, path y domain son nombres de variables reservados pues son leidos por el navegador para controlar información como la vida útil de la cookie o la web para la que es válida.

• La variable estilo se ha introducido y cuyo valor va a ser el estilo seleccionado por el usuario para que sea el mismo cuando vuelva a mi página.


Ejercicio

• Alumno buscar un ejemplo de aplicación en internet de las cookies, correrlo y explicarlo


herramientas modernas de programación licenciatura...

Documents