Ingeniería de Software III

Séptimo semestre

Docente:
Ing. Jorge Adrián Muñoz Velasco
[email protected]
 Agenda

1) Fundamentos JavaScript
2) DOM y JavaScript
3) Frameworks JavaScript
4) Conclusiones generales
 Objetivos de aprendizaje

• Conocer los fundamentos del lenguaje interpretado JavaScript

y su relación con el estándar de documentos DOM.

• Conocer los principales frameworks de desarrollo para

JavaScript y como estos facilitan la programación web.
 Fundamentos JavaScript
Introducción:
✓ JavaScript es un lenguaje de programación interpretado que
permite añadir características y acciones interactivas a los sitios
web y aplicaciones web: actualizaciones de contenido, mapas
interactivos, animación de Gráficos 2D/3D, etc.
✓ Es un lenguaje robusto que puede aplicarse a documentos de marcado
como HTML. Fue inventado por Brendan Eich, cofundador del proyecto
Mozilla, Mozilla Foundation y la Corporación Mozilla.
✓ Los archivos JavaScript pueden ser referenciados o relacionados a lo largo
de las etiquetas de HTML. Los navegadores descargan los archivos JS y
ejecutan las ordenes o acciones que están escritas en el código.
✓ ECMAScript es la especificación que detalla cómo debe funcionar y
comportarse Javascript en un navegador.
https://lenguajejs.com/javascript/introduccion/ecmascript/
 Fundamentos JavaScript
Sintaxis:
✓ Para relacionar un documento Javascript se
utiliza la etiqueta <script> y el atributo src.
✓ El llamado de un documento JS puede tener
diferentes momentos.
✓ Javascript cuenta con comentarios de línea
(//) y comentarios múltiples (/* */).
✓ Encontramos las estructuras de control más
comunes If, If/else, if/else if/else, switch.
✓ Expresiones y operadores:
https://developer.mozilla.org/es/docs/Web/J
avaScript/Referencia/Operadores
✓ Console.log( ), consola de JavaScript.
 Fundamentos JavaScript
Sintaxis:
✓ Una variable es denotada con la palabra reservada var o
let (versión Javascript 2015 o superior).
✓ Las variables escritas con var tienen dos ámbitos global y a
nivel de la función. Mientras que las escritas con let son
globales y locales.
✓ En Javascript encontramos diferentes tipos de datos para
la variables, entre ellos: String, Number, Boolean, Array,
Object.
✓ Convención de constantes es en mayúsculas.
 Fundamentos JavaScript
Arreglos:
✓ Colección o agrupación de elementos en una misma variable, cada uno de ellos ubicado por la posición
que ocupa en el arreglo.

✓ Propiedades importantes: .length y [pos]; el primero retorna el tamaño y el según encuentra un

elemento en la posición pos.
✓ Añadir o eliminar elementos:
✓ Ordenamiento:
.reverse(), .sort(), .sort(func)
 Fundamentos JavaScript
Funciones :
✓ Las funciones se denotan por la palabra reservada
function y tienen dos momentos declaración y ejecución

✓ Al igual que en muchos lenguajes de programación, las

funciones en Javascript puede tomar el uso de
parámetros.
✓ Funciones de conversión
✓ Funciones de comprobación
✓ Funciones de conversión
✓ Funciones matemáticas
 Fundamentos JavaScript
Funciones :
✓ Hay varias formas de crear funciones en Javascript: por declaración (la más usada por
principiantes), por expresión (la más habitual en programadores con experiencia) o
mediante constructor de objeto (no recomendada).
1) function nombre(p1, p2...) { } //Por declaración
2) var nombre = function (p1, p2...) { } //Por expresión
3) new Function (p1, p2..., code); //Por objeto
 Fundamentos JavaScript
Objetos:
✓ Es una variable especial que puede contener más variables en su interior.
✓ Para crear un objeto se utiliza la palabra clave new.

✓ En Javascript se prefiere utilizar lo que se llaman los literales, un método abreviado para crear
objetos directamente, sin necesidad de utilizar la palabra new.
 Fundamentos JavaScript
Objetos:
✓ El acceso a la información de un objeto puede ser con “.” o “[ ]”
 Fundamentos JavaScript
Eventos:
✓ Son parte fundamental del mundo de Javascript, los eventos son estructuras de código que captan lo
que sucede en el navegador y permite dar respuesta a las acciones del usuario.
✓ Se denominan manejador de eventos (event handlers en inglés) y como JavaScript es un lenguaje muy
flexible, existen varias formas diferentes de indicar los manejadores:
✓ Evento de atributos:
✓ Evento de funciones:

✓ Eventos “semánticos”:
Evento Descripción Elementos para los que está definido
<button>, <input>, <label>, <select>, <textare
onblur Deseleccionar el elemento
a>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
<button>, <input>, <label>, <select>, <textare
onfocus Seleccionar un elemento
a>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>
 Fundamentos JavaScript
Ejemplo.
✓ Tomemos una etiqueta de texto simple como ejemplo para el contenido del HTML.

✓ Aplicar estilos CSS: ✓ Aplicar interactividad JavaScript:

 DOM y JavaScript
Relacionamiento y estructura:
✓ El DOM (Modelo de Objetos de Documento) es un API (Interfaz de Programación de Aplicaciones) para
documentos HTML, XHTML y XML, los cuales podremos modificar, eliminar, cambiar atributos, etc, que
permite cambiar el contenido de los documentos. https://dom.spec.whatwg.org

✓ La base del DOM para HTML es el objeto document, que representa un árbol jerárquico sobre los
elementos de la pagina. Document contiene elementos (etiqueta tipo HTML) y nodos (Etiquetas,
atributos y textos).
✓ Nodo padre: Aquel que tiene otros nodos <html>
✓ Nodos hijos. Los que cuelgan de un nodo padre <head> <body>
✓ Nodos hermanos. Tiene un mismo padre <head> <body>
✓ Nodos de elementos: (<br>, <hr>, <u>, </u>)
✓ Nodos de texto. Los textos que incluye una página web
 DOM y JavaScript
Manipulación DOM:
✓ JavaScript utiliza DOM para acceder al documento y a sus elementos. Ejemplo:

✓ En DOM los nodos se indican como elements, la lista de nodos como nodeLists y los nodos de atributo
como attributes.
✓ El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o
noción de las páginas web, de la páginas XML ni de los elementos.
✓ El contenido de las páginas es almacenado a través del DOM.
✓ El acceso y la manipulación del contenido (document o windows) se hace vía JavaScript.
 DOM y JavaScript
Propiedades:
✓ document y window son objetos cuya interfaces
son generalmente muy usadas en la
programación de DOM.

✓ En término simple, el objeto window representa

algo como podría ser el navegador, y el objeto
document es la raíz del documento en sí.

✓ Element hereda de la interfaz genérica Node, y

juntos, estas dos interfaces proporcionan muchos
métodos y propiedades utilizables sobre los
elementos individuales.
 DOM y JavaScript
Manipulación DOM:
✓ Javascript nos proporciona un conjunto de
herramientas para trabajar de forma nativa con el
DOM de la página, entre las que se encuentran:
1) Buscar etiquetas: .getElementById(), .querySelector()
o .querySelectorAll(), entre otras.
2) Crear etiquetas: .createElement().
3) Insertar etiquetas: .innerHTML, .appendChild(),
.insertAdjacentHTML(), entre otros.
4) Gestión de clases CSS: .className, .classList,
.getAttribute("class") y .setAttribute("class", v).
5) Navegar entre elementos: Utilización de una serie de
métodos y propiedades que nos permiten «navegar»
a través de la jerarquía del DOM.
 Frameworks JavaScript
Conceptualización:
✓ Los frameworks o marcos de trabajo, son proyectos que agrupan bibliotecas, librerías y
patrones de diseño avanzados. En el caso de los frameworks Javascript, sirven para el
desarrollo de la parte frontend de una web.
✓ La clave de un framework no es tanto que te ofrezca una cantidad enorme de funcionalidad ya
lista, sino que ofrezca al equipo de trabajo un esquema de desarrollo sólido.
✓ En Javascript el uso de frameworks está ampliamente extendido y todos ellos ofrecen a los
desarrolladores la posibilidad de trabajo con vistas (capa de presentación) a las cuales
introducir fácilmente valores que vienen de la capa de datos.
✓ La elección de un framework debe ser tomada con calma. Una vez comenzamos con el
desarrollo de un proyecto en un framework en concreto, es muy complicado migrar hacia otro
sin tener que comenzar prácticamente todo desde cero.
 “Frameworks” JavaScript
Herramientas:
✓ React: Es una biblioteca JavaScript muy buena, pero no es un framework
completo. Se encuentra respaldado por Facebook. https://es.reactjs.org

✓ AngularJS: comúnmente llamado Angula.js o Angular 1, de código abierto.

Se encuentra respaldado por Google. https://angularjs.org

✓ Vue.js: es una biblioteca progresiva y alta vertibilidad, creada por Evan

You. https://vuejs.org

✓ jQuery: es una biblioteca multiplataforma de código abierto creada por

John Resig. https://jquery.com
“Frameworks” JavaScript
 Conclusiones
1. JavaScript es un lenguaje de programación web interpretado que permite
agregar elementos interactivos a documentos de marcado como HTML.

2. La forma estándar para la manipulación de elementos de un documento

HTML esta dada por el Modelo de Objetos de Documento (DOM), el cual
especifica de que forma se accede y gestión la información de una página
web.
3. Las herramientas complementarias (frameworks) para el desarrollo web
facilitan la implementación de funcionalidades adicionales y atractivas que
mejoran la interacción y experiencia del usuario con páginas, sitios y
aplicaciones web.
 Tareas

• INFOGRAFÍA, equivalente al 20% del primer corte.

– Realice una infografía donde se relacione una de las tecnología base.
– La infografía debe ser visualmente agradable, comprensible y con elementos
relevante de la tecnología base seleccionada.
– Puede utilizar diferentes recursos de la web.
– Tiempo de exposición: 5 minutos.
– Formato de entrega: SW3_E1_APELLIDO_NOMBRE.pdf
– Fecha de exposición viernes 26 de noviembre.
– Calificación: 40% exposición, 60% infografía.
 Referencias
• https://developer.mozilla.org/es/docs/Web/JavaScript
• https://lenguajs.com
• https://www.w3schools.com
• https://www.arkaitzgarro.com/javascript/capitulo-15.html
• https://insights.stackoverflow.com/survey/2019