Tema 22.docx

Tema 22. Desarrollo Web II: Javascript: Sintaxis básica y manejo de cookies. Desarrollo de aplicaciones AJAX. Transferencia de datos JSON. JavaScript es un lenguaje de programación interpretado que se utiliza principalmente para agregar interactividad a las páginas web. Junto con HTML y CSS, es uno...

Tema 22. Desarrollo Web II: Javascript: Sintaxis básica y manejo de cookies. Desarrollo de aplicaciones AJAX. Transferencia de datos JSON. JavaScript es un lenguaje de programación interpretado que se utiliza principalmente para agregar interactividad a las páginas web. Junto con HTML y CSS, es uno de los tres pilares fundamentales del desarrollo web. JavaScript es un lenguaje que aparece en prácticamente todo desarrollo web como lenguaje del lado del cliente. No obstante, hace ya varios años que ha empezado a tener uso en algunos desarrollos web como lenguaje del lado del servidor para permitir desarrollos web completos. JavaScript cuando se ejecuta en el lado del cliente (en el navegador web del usuario) y se utiliza para: - controlar el comportamiento de los elementos de la página web, como botones, menús desplegables y formularios de entrada. - manipular y actualizar el contenido de la página web en tiempo real, sin necesidad de recargar la página completa. El desarrollo en JavaScript del lado del servidor se hace instalando en el servidor herramientas que permiten el uso de JavaScript del lado del servidor como Node.js que es quizás la herramienta más utilizada dentro de los desarrollos que usan JavaScript del lado del servidor. Node.js es un entorno de programación que incluye numerosas librerías preparadas para ser usadas por parte de los programadores. Entre las principales ventajas: - Simplicidad. Posee una estructura sencilla que lo vuelve más fácil de aprender e implementar. - Velocidad. Se ejecuta más rápido que otros lenguajes y favorece la detección de los errores. - Versatilidad. Es compatible con otros lenguajes, como: PHP, Perl y Java. - Popularidad. Existen numerosos recursos y foros disponibles para ayudar a los principiantes con habilidades y conocimientos limitados. - Descarga de carga al servidor. La validación de datos puede realizarse a través del navegador web y las actualizaciones solo se aplican a ciertas secciones de la página web. - Actualizaciones. Se actualiza de forma continua con nuevos frameworks y librerías, esto le asegura relevancia dentro del sector. Desventajas - Compatibilidad con los navegadores. Los diferentes navegadores web interpretan el código JavaScript de forma distinta. Por lo tanto, necesitarás probarlo en todos los navegadores populares, incluyendo las versiones más antiguas. ECMAScript es la especificación donde se mencionan todos los detalles de cómo debe funcionar y comportarse Javascript en un navegador. De esta forma, los diferentes navegadores (Chrome, Firefox, Opera, Edge, Safari\...) saben cómo deben desarrollar los motores de Javascript para que cualquier código o programa funcione exactamente igual, independientemente del navegador que se utilice. Aunque no siempre se consigue. - Depuración. Aunque algunos editores de HTML admiten la depuración, son menos eficaces que otros editores. Encontrar el problema puede ser un reto, ya que los navegadores no muestran ninguna advertencia sobre los errores. **Sintaxis básica de JavaScript** Existen dos formas de incluir código javascript dentro de una página HTML: - Javascript en línea: Javascript está escrito directamente en el código HTML. No es la forma recomendable de escribirlo, ya que lo ideal es separar el código HTML del código Javascript (en archivos diferentes) para organizarnos mejor. - Javascript en fichero externo: tiene la ventaja de, en el caso de necesitar incluir el código Javascript desde varios documentos HTML, no tendremos que volver a escribir dicho código, sino simplemente referenciar el nombre del mismo archivo Javascript a incluir en todas las páginas HTML. Las etiquetas \ y \ pueden ir colocadas dentro de la sección \ o de \ de HTML: - Si queremos que un documento Javascript actúe antes que se muestre la página, la opción de colocarlo en el \ es la más adecuada. - Si por el contrario, queremos que actúe una vez se haya terminado de cargar la página, la opción de colocarlo justo antes del \ es la más adecuada. La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes: - No se tienen en cuenta los espacios en blanco y las líneas en blanco: por lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.) - Se distinguen las mayúsculas y minúsculas. - Si las sentencias están en la misma línea hay que separarlas por punto y coma (";"). Pero si las sentencias están cada una en líneas diferentes, no es necesario terminar cada sentencia con el carácter de punto y coma (;): en la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentencia con el carácter del punto y coma (;). - Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del programa. JavaScript define dos tipos de comentarios: - los de una sola línea: comienzan por doble barra (//) - los que ocupan varias líneas: empiezan por /\* y terminan por \*/ [Variables] JavaScript tiene tres tipos de declaraciones de variables. - var: Declara una variable, opcionalmente la inicia a un valor. - let: Declara una variable local con ámbito de bloque, opcionalmente la inicia a un valor. - const: Declara un nombre de constante de solo lectura y ámbito de bloque. Una variable declarada usando la instrucción var o let sin un valor asignado especificado tiene el valor de undefined y no es necesario asignarle tipo de datos. El nombre de una variable de JavaScript debe cumplir: - Estar formado por letras, números y los símbolos \$ (dólar) y \_ (guión bajo). - El primer carácter no puede ser un número. [Tipos de datos] JavaScript es un lenguaje de programación \"no tipado\", lo que significa que una misma variable puede guardar diferentes tipos de datos a lo largo de la ejecución de la aplicación. De esta forma, una variable se podría inicializar con un valor numérico, después podría almacenar una cadena de texto y podría acabar la ejecución del programa en forma de variable booleana. JavaScript divide los distintos tipos en dos grupos: - Tipos primitivos: undefined, null, boolean, number y string. - tipos de referencia o clases. **Manejo de cookies en JavaScript** (\*) Si la cookie fue creada por otros lenguajes como php,...puede que tenga el parámetro "httponly" y no podrá se accedida desde javascript. Solo desde el protocolo http. Las cookies son información enviada y recibida entre cliente y servidor Web en las cabeceras HTTP y que queda almacenada localmente en el navegador del usuario durante un tiempo determinado. El protocolo HTTP es un protocolo sin estado, esto significa que entre diferentes solicitudes-respuestas entre cliente-servidor no existe asociación. Si el mismo usuario vuelve a solicitar la misma u otra página al mismo servidor, será tratado como si fuera la primera solicitud que realiza. Con las cookies el servidor puede enviar información al cliente en las cabeceras HTTP de respuesta y esta información queda almacenada en el dispositivo del usuario (en el cliente). En la siguiente solicitud que realice el usuario la cookie es enviada de vuelta al servidor en las cabeceras HTTP de solicitud. De esta forma servidor y usuario (cliente) quedan asociados y el servidor podrá "recordar" información acerca del usuario. Una cookie consiste en una cadena de texto con varios pares "key=valor" cada uno separado por ";". Se puede acceder a las cookies desde el navegador usando la propiedad document.cookie desde javascript. A través de ella podemos crear, leer, modificar y eliminar cookies. Para crear una cookie en JavaScript, se utiliza el siguiente código: document.cookie = "\=\; expires=\; max-age=\; path=\; domain=\; secure"; donde: \=\ Requerido. \ es el nombre (key) que identifica la cookie y \ es su valor. A diferencia de las cookies en PHP, en JavaScript se puede crear una cookie con un valor vacío (\=). expires=\ y max-age=\ Opcional. Ambos parámetros especifican el tiempo de validez de la cookie. expires establece una fecha (ha de estar en formato UTC) mientras que max-age establece una duración máxima en segundos. max-age toma preferencia sobre expires. [Si no se especifica ninguno de los dos se creará una session cookie, la cookie sólo es válida para la sesión actual. Si es max-age=0 o expires=fecha-pasada la cookie se elimina]. path=\ Opcional. Establece la ruta para la cual la cookie es válida. Si no se especifica ningún valor, la cookie será válida para la ruta de la página actual. domain=\ Opcional. Dentro del dominio actual y subdominios para el que la cookie es válida. El valor predeterminado es el subdominio actual. Por motivos de seguridad, los navegadores no permiten crear cookies para dominios diferentes al que crea la cookie (same-origin policy). secure Opcional. Parámetro sin valor. Si está presente, la cookie sólo es válida para conexiones encriptadas (por ejemplo, mediante protocolo HTTPS). Si se desea añadir nuevas cookies se debe seguir asignando valores a document.cookie. Este comportamiento se debe a que document.cookie no es un dato con un valor, sino una propiedad de acceso con métodos set y get nativos (accessor property). Cada vez que se le asigna una nueva cookie, no se sobrescriben las cookies anteriores, sino que la nueva se añade a la colección de cookies del documento. Puede que obtener el valor sea el paso más tedioso de trabajar con cookies en JavaScript, y es que no hay un método de lectura directo para cada cookie individual. Sólo se puede obtener un string con todas las cookies válidas para el documento y manipular el string hasta encontrar el nombre y valor de la cookie que queremos. El string con todas las cookies se obtiene del siguiente modo: var miCookies = document.cookie; Y tiene el siguiente formato: \"cookie1=valor1;cookie2=valor2;cookie3=valor3\[;\...\]\" El string sólo contiene pares de nombre de la cookie y su valor. No se puede acceder a otros parámetros a través de document.cookie. Aunque en una página puedan crearse cookies para otros subdominios y paths, sólo se pueden leer las que son válidas para el subdominio y path actual. Para manipular el string con todas las cookies y dividirlo por cada ; para separar cada par nombrecookie=valor. Luego se divide cada uno de estos pares por = para separar el nombre de la cookie y su valor. Se puede conseguir utilizando varios métodos, o utilizando muchas de las librerías de cookies para eso. **AJAX** AJAX es una técnica de desarrollo web, por la cual se pueden crear aplicaciones web del lado del cliente más rápidas y cómodas para el usuario. AJAX, no es una tecnología en sí, sino que es un conjunto de tecnologías aplicadas que combinan JavaScript y XML. [Permite la comunicación asíncrona con el servidor] En las aplicaciones clásicas la comunicación cliente/servidor se hace de una forma síncrona, cada vez que se realiza una petición al servidor, el usuario lo único que puede hacer es esperar y hasta que no reciba todos los datos del servidor, no se mostrará el resultado, con lo que el usuario no podrá interactuar de ninguna manera con el navegador. Por medio de esta técnica el cliente puede interactuar con el servidor de manera asíncrona, actualizando el contenido de las páginas sin necesidad de volver a cargarlas. AJAX lo que se intenta evitar, son esencialmente esas esperas. El cliente podrá hacer solicitudes al servidor, mientras el navegador sigue mostrando la misma página web, y cuando el navegador reciba una respuesta del servidor, la mostrará al cliente y todo ello sin recargar o cambiar de página. Cuando el cliente hace una HTTP request al servidor, la hace por medio de JavaScript (lenguaje client-side). El servidor procesa la request y en vez de devolverle al cliente una página HTML, le devuelve un resultado en XML (no necesariamente, pero generalmente en XML), que es procesado por JavaScript, y este actualiza sólo las secciones de la página necesarias (sin tener que cargar una nueva página) modificación del DOM del documento. Porque en AJAX en la primera interacción con el servidor, el cliente se descarga toda la aplicación, incluyendo la lógica. En las siguientes llamadas el servidor solo devolverá datos y será el cliente el responsable de hacer la modificación de la página con la modificación del DOM de la página. AJAX es un conjunto de técnicas de desarrollo web que comprende: - HTML/XHTML para el lenguaje principal y CSS para la presentación. - El Modelo de objetos del documento (DOM) para manipular los documentos HTML y sus elementos. - XML para el intercambio de datos y XSLT para su manipulación. Muchos desarrolladores han comenzado a reemplazarlo por JSON porque es más similar a JavaScript en su forma. - El objeto XMLHttpRequest para la comunicación asíncrona. - Finalmente, el lenguaje de programación JavaScript para unir todas estas tecnologías. [El objeto XMLHttpRequest] El objeto XMLHttpRequest es un elemento fundamental para la comunicación asíncrona con el servidor. Este objeto nos permite enviar y recibir información en formato XML y en general en cualquier formato. La creación de un objeto de esta clase varía si del navegador que se esté utilizando. Mediante los métodos del objeto XMLHttpRequest: - open: Abre una petición HTTP al servidor. Con el primer parámetro del método se podrá indicar cuál es el método de envío de los datos al servidor. - send: Envía una petición al servidor. **JSON** (JavaScript Object Notation) Es un formato ligero de intercambio de datos que se utiliza en la web para la transferencia de datos entre aplicaciones Web. Los datos en este formato se organizan en pares clave-valor, lo que facilita su manipulación y consumo tanto por parte de humanos como de máquinas. JSON es un formato nativo de JavaScript pero realmente es independiente de cualquier lenguaje de programación. JSON se ha convertido en un estándar en el desarrollo web, siendo ampliamente utilizado en la comunicación entre servidores y clientes, así como en el almacenamiento y transporte de datos en aplicaciones modernas. Las reglas sintácticas de JSON son bastante sencillas: - Un documento JSON está formado por un único elemento (un objeto o una matriz). - En JSON existen dos tipos de elementos: - matrices (arrays): Las matrices son listas de valores separados por comas. Las matrices se escriben entre corchetes \[ \] - objetos (objects). Los objetos son listas de parejas nombre / valor. El nombre y el valor están separados por dos puntos : y las parejas están separadas por comas. Los objetos se escriben entre llaves { } y [los nombres de las parejas se escriben siempre entre comillas dobles.] - Los valores (tanto en los objetos como en las matrices) pueden ser: - números: enteros, decimales o en notación exponencial. El separador decimal es el punto., un número negativo empieza por el signo menos - y el indicador de la notación exponencial es e o E. Los números positivos no pueden empezar por el signo +, los números no pueden empezar por varios ceros o por un cero seguido de otra cifra. - cadenas. Las cadenas se escriben entre comillas dobles. Los caracteres especiales y los valores Unicode se escriben con una contrabarra \\ delante. Los caracteres que deben escribirse siempre como caracteres especiales son \\\" (comillas), \\\\ (contrabarra), \\b (retroceso), \\f (salto de página), \\n (salto de línea), \\r (retorno de carro), \\t (tabulador) y los caracteres unicode (\\u\...). El carácter / (barra) puede escribirse como carácter / o como carácter especial \\/ (suele ser necesario cuando el contenido es código html y la barra indica un cierre de etiquetas). - los valores true, false y null. Estos valores se escriben sin comillas. - objetos y matrices. Puede haber objetos y matrices dentro de objetos y de matrices, sin límite de anidamiento. - Los ficheros JSON no pueden contener comentarios. - Tanto en los objetos como en las matrices, el último elemento no puede ir seguido de una coma. - Los espacios en blanco y los saltos de línea no son significativos, es decir, puede haber cualquier número de espacios en blanco o saltos de línea separando cualquier elemento o símbolo del documento. Para transferir datos JSON, se sigue generalmente los siguientes pasos: 1. Creación de los datos: Se crean los datos que se van a transferir en formato JSON. Los datos pueden ser creados manualmente o a través de una herramienta de serialización. 2. Envío de los datos: Los datos en formato JSON se envían al servidor a través de una solicitud HTTP utilizando la técnica de AJAX. La solicitud puede ser enviada utilizando la función XMLHttpRequest de JavaScript o a través de una librería de AJAX como jQuery utilizando el método \$.ajax(). 3. Procesamiento de los datos en el servidor: El servidor procesa los datos recibidos y los convierte en un objeto en el lenguaje de programación utilizado en el servidor. Por ejemplo, en el caso de Java, los datos JSON pueden ser convertidos en objetos Java utilizando una librería como Jackson o Gson. 4. Envío de la respuesta: El servidor envía una respuesta al cliente con los datos procesados en formato JSON. La respuesta es recibida por el cliente y se puede procesar utilizando JavaScript. 5. Procesamiento de la respuesta en el cliente: El cliente procesa la respuesta recibida y utiliza los datos para actualizar la interfaz de usuario de la página web. Algunas de las ventajas de utilizar JSON en la transferencia de datos incluyen: - Ligereza: El formato JSON es muy ligero, lo que permite transferir grandes cantidades de datos con rapidez y eficiencia. - Facilidad de uso: La notación de objetos de JavaScript utilizada en JSON hace que sea fácil de entender y utilizar. - Compatibilidad: JSON es compatible con una amplia gama de lenguajes de programación y sistemas, lo que lo hace una buena opción para la transferencia de datos entre diferentes aplicaciones.