Curso de Javascript

PROGRAMA INGENIERÍA DE SISTEMAS

Desarrollo Web
Ricardo Marín Daza
 CURSO JAVASCRIPT

Datos, Expresiones, Condicionales, Ciclos

Menú Javascript ECMA
Introducción e Historia

Datos, Expresiones, Condiciones, Ciclos

Arrays, String, Numéricas

Funciones
Formularios, Eventos, Objetos y Módulos

Archivos de texto
Manejo del BOM

Manejo del DOM

 CURSO JAVASCRIPT

Introducción e Historia

• Ranking, consolidado, popular, todo Objetos,

mas demandado
• Orientado al Front-End, Asincrónico, dinámico ,
stackOverFlow
• Crecimiento en otros sistemas
• Base de los mejores Frameworks
• Origen y Evolución
• Comunidad ECMA
 CURSO JAVASCRIPT

Datos, Expresiones, Condiciones, Ciclos

• var, let, const.

• Operadores Aritméticos, Lógicos
• if, if-else , if-else if-else , switch,
try catch
• While , do while , for, in, of
 CURSO JAVASCRIPT

Funciones

• Declaradas:
(sin/con) parámetros, (sin/con) argumentos. Puede
ser llamada antes o después
• Parámetros Rest: … predeterminados
• Envio Array , retorno múltiple
• Anónimas o expresadas (se asigna vble) se llama despues
• callBacks
• De flecha ‘ => ‘ es anónima quitándole function y () =>
 CURSO JAVASCRIPT

Formularios , Eventos, Objetos y Módulos

• Manejo por Js. <form>
• tpye: text, radio, checkbox, <button>
• Salida sin/con refresco
• Lectura vbles: con getElementById
• Lectura variables: com forms.
• 2 formas de envio formularios js: onsubmit .submit()
• Introducción, Características , Clases Objetos (ejemplos)
• Método constructor Herencia y Módulos (import , export)
• Ejercicio (Bootstrap, clases, forms, módulos y Arrays
 CURSO JAVASCRIPT

Archivos de Texto
• Introducción (localhost)
• Método Ajax: XMLHTTPRequest(), onreadystatechange()
• readyState 4, status 200 responseText .open(), .send()
• Lectura de un Archivo (.txt), Array()
• Escritura archivo (textarea)
• .addtext.name.value
• .createElement .setAttribute() .appendChild()
 CURSO JAVASCRIPT

Manejo del BOM

 CURSO JAVASCRIPT

Manejo del BOM

• BOM: Browser Object Model
• window: propiedades y métodos
• ancho, alto documento, ancho y alto navegador.
• Márgenes: izquierdo y superior.
• .frames (es un array)
• History .screen .navigator .location
• Métodos: .open() .close()
• .resizeTo() resizeBy() .blur .focus()
• .alert()
 CURSO JAVASCRIPT

Manejo del DOM

 CURSO JAVASCRIPT

Manejo del DOM

• DOM: Document Object Model

• etiquetas a modificar deben estar con class, o id, o name…
• Se accesan con: .querySelector, .querySelectorAll, ó
getElement: ByName, ById, ByTagName..
• .innerHTML modifica contenido de etiqueta, html
 CURSO JAVASCRIPT

Formativa 1, corte 2.

A continuación a cada estudiante se le encarga un diseño UML

para que diseñe realice los siguientes compromisos:
• Diseñe el Front End con herramientas de estilos y formularios
(Frameworks vistos) relacionado con su problema. Use las herramientas
vistas…
• Controle y procese los datos en JavaScript aplicando: Clases, Objetos,
Arrays, Herencia, Módulos, funciones =>, Anónimas, .filter(), .map(),
.reduce(), .forEach(). Para poder usarlos, debe crearse (si se requiere) en el
diseño entregado ejemplos relacionado con su ejercicio en donde se
apliquen (por ejemplo: atributos y/o métodos)
 CURSO JAVASCRIPT

Formativa 1
Vladimir Roca
Pendiente, Juan
Abel
Descargar clase, Domínguez
Camacho
,
Link exia ejercicio hoy

Stevens Luis
Fonseca Eversley
 CURSO JAVASCRIPT

Formativa 1, corte 2.
Alejandro
Jefferson Miguel Cabas
Ponce
Ospino

Sebastián Sacned
David Peña Matute Arrieta
 CURSO JAVASCRIPT

Formativa 1, corte 2.
Jhaison
Gómez
 CURSO JAVASCRIPT

Formativa 2 y Parcial: corte 2.

Basados en la Factura diseñada por usted en el corte 1, se le pide que diseñe el Front-
End interactivo a través del Framework de su preferencia y desarrolle en JavaScript el
proceso de llenado de datos de la factura, para esto es importante el uso de las
herramientas vistas del corte 1: (Navbar, Dropdown, cards, botones, collapse, Modal,
entre otras…).

Igualmente es necesario el uso de Objetos, Arrays, módulos etc. Vistos en JavaScript.

Para el Parcial: usar import/export de archivos de texto en Javascript, para guardar una
factura, y para consultarla.

 Aviso Importante 
Ambas formativas y Parcial serán sustentados el día: del parcial: 50% el desarrollo del
trabajo, 30% la presentación y sustentación de preguntas, 20% video.
 Curso de Javascript
Gracias por participar en el curso

Final del curso Desarrollo

Web