La idea del curso es mostrarte las diferentes facetas de las distintas tecnologías que tenemos en desarrollo
web.
Hasta aquí hemos escrito un poco de PHP para reutilizar por ejemplo el Getter el futuro Führer el formulario.
Un poco de HTML para toda la estructura un poco de CSS para que se vea bien y los próximos vídeos estaremos
utilizando más JavaScript más PHP y las consultas de SQL así como modelar la base de datos.
La idea de este vídeo es que comencemos a escribir un poco de JavaScript.
Cuando damos clic en Añadir podemos ver qué arroja esta notificación.
JavaScript nos añade esta interacción.
Cuando doy clic en Añadir aparece la notificación.
Todo esto es parte de CSS la notificación la validación es por medio de JavaScript.
Todo eso lo estaremos viendo de aquí en adelante así que vamos a comenzar.
Si recuerdas hemos definido una pjs de momento está vacío.
Aquí va a crear una variable estaremos utilizando la sintaxis nueva de JavaScript no está como al 100
por ciento soporta tiene muy buen soporte pero no al 100 por ciento.
Pero es importante conocer la nueva sintaxis comenzar a utilizarla aunque su soporte no sea del 100.
Si un proyecto está hecho en Internet Explorer 6 o 7 son muy viejos no se verá no funcionará al 100
por ciento.
Pero de nuevo es importante que conozcas la nueva sintaxis y comiences a utilizarla.
Por qué los nuevos Frend Works y librerías como Not J.S. como bullies break angular todos estos nuevos
Frend Works que están apareciendo utilizan la nueva sintaxis entonces vamos a comenzar con Aquí Voy
a cerrar algunos archivos que no voy a ocupar y lo que viene siendo Fuhrer tampoco el formulario y este
sí lo voy a dejar aquí un momento.
Puedes ver que de momento tengo el Index y le agregué este forma y que dice contactes este mismo forma
y está aquí en militar.
Entonces vamos a seleccionar el Form por medio de JavaScript que va a poner const constante porque nunca
va a cambiar este valor siempre base de este formulario pero el formulario contactos igual a document
.4 y selector.
Esta es la nueva sintaxis también recomendada para utilizar o seleccionar elementos ya no ya.
Poco a poco ha ido dejándose utilizar JEET Element Bayarri elements TACC name the elements Class name
etc. ahora se recomienda utilizar XLS lector cuál es el nos retornã máximo un elemento puede retornar
cero si no lo encuentra utilizar es lector porque nada más tenemos un formulario.
Utiliza una sintaxis similar a la de CSS signo de gato porque éste es un Airi.
Si fuera una clase sería un punto y eso va a seleccionar ese formulario.
Desde aquí crea un función que lo voy a nombrar.
Les energies es una preferencia personal nuevamente más que nada para no tenerlo se ven Lissner de aquí
afuera va a ser una función que mandó llamar una vez o inmediatamente que se ejecuta el código más que
nada es una preferencia personal no tenerlos lista de forma global aunque esto sí los va a tener de
forma global porque necesito acceder a ellos.
Es muy probable que tenga que acceder a ellos en distintas partes del código entonces para no estar
declarando la mínima variable lo voy a dejar global aquí afuera.
Entonces funciones Bendixen vamos a crear aquí un comentario que diga cuándo el formulario de crear
o editar se ejecuta y qué vamos a poner formulario contactos punto a deben tener y vamos a escuchar
y esperar a que el formulario tengan Submit.
Cuando alguien a quien añadir o esté en la parte de editar quieres añadir también más adelante veremos
la lógica para cambiarlo.
Editar entonces cuando se presione este botón se va a realizar la acción de Submit y queremos que ejecute
una una función que voy a nombrar.
Leer formulario es una función pero nada más.
Tienes que pasarle el nombre.
No tienes que pasarle paréntesis en este caso.
Entonces esta es una función voy a crear la que abajo más función del formulario y quiero poner un Consol
punto log que diga presionarte
y voy a guardar cambios y recargamos el proyecto de Speck y vamos a ver dos cosas primero si abro aquí
consola y doy clic en Añadir.
Pudiste ver ese flash que aparece el texto y desaparece automáticamente.
Aquí en la web releen nos agrega el signo de gato y un signo de interrogación.
Si lo eliminas esa parte y lo vuelves a dar añadir puedes ver que aparece el flash.
Nuevamente si le das a añadir ya no aparece pero ya no se agregó esto la borre.
Esto se conoce como la acción por Defour.
Cuando tú agregas un formulario cuando le das enviar tratá de ejecutar lo que se encuentre en el Action
por ejemplo aquí en editar este Action puedes ver que tiene un signo de gato entonces trata de ir a
ese archivo.
Esto se conoce como la acción por default y en muchos proyectos ese archivo te va a llevar algo así
como registro punto PHP porque de ahí va utilizar PHP para que trate los datos de ahí en adelante.
En nuestro caso queremos realizar las inserciones y ediciones con JavaScript.
Por lo tanto tenemos que hacer algo que se conoce como prevenir la acción por default.
Suena más complicado de lo que es porque nada más exponerla aquí una E que se refiere al evento con
su blog y recargas el proyecto haz click en Añadir aquí dice el evento entonces el evento que está sucediendo
es un evento que alguien presionó al clic en el botón de Añadir.
Aquí viene mucha información entonces tenemos ese elemento y utilizamos una función que llama preven
default entonces ya la siguiente vez que da clic en consola y elimina lo que está aquí en la web Relay
da clic en Añadir puedes ver que sigue apareciendo muchas veces ya no se actualiza la web y estamos
previniendo la acción por default.
Se recomienda hacer esto siempre que quieras realizar alguna operación con JavaScript o con Ayax.
Entonces puedes ver que tengo estos consolados ya los voy a quitar.
Hay a crear una variable que diga leer los datos de los inputs que tenemos los inputs Guacara por ejemplo
en icons nombre Todo esto va a ser de document punto y selector y si recuerdas le habíamos dado una
idea a cada uno de ellos tiene una idea del nombre es copiarlo Squares selector abrimos paréntesis comillas
dobles o sencillas cualquiera de las dos mientras no las mezcles y el nombre de Leidi y para atraerme
el valor del impugnamos como equivalió puedes darle con el punto log nombre y guardar cambios y abrir
la consola y se da clic en Añadir pues el que no imprime nada porque no hay nada aquí pero si yo le
pongo un 1 Añadir aparece un 1 panel aquí Juan aparece mi nombre.
Entonces de esta forma puedes comprobar que los valores tengan algo si por ejemplo le pones if nombre
es igual y lo vamos a revisar estrictamente con los tres síguenos siempre se recomienda con tres en
JavaScript.
Si el nombre es igual a nada con su blog el campo está vacío es consolador tiene algo guardamos cambios
y recargamos nuevamente de clic en Añadir.
El campo está vacío.
Si le agrego algo lo que sea aquí no añadir pues ver que tiene algo.
Esta es una forma muy sencilla de validar que tengas algo en tus formularios.
Ahora tengo más campos tengo empresa y tengo también lo que es el nombre.
Este debería ser diferente voy a darle un formulario este teléfono
entonces teléfono contacto y aquí también teléfono porque debe ser el mismo Heydi.
Entonces tenemos estos tres distintos campos por lo tanto abro mi ABC y para no escribir tres veces
const pues polendas que una coma.
Y crear una copia de este
y una más.
Punto y Coma aquí entonces el segundo va a ser empresa y el tercero va a ser el teléfono.
Y debido a que todos los campos son obligatorios ver todos los campos son obligatorios.
Podemos ponerle un OR podría ser también con un y pero va a ser honor porque en caso de que alguien
deje al menos un campo vacío se va a lanzar esta notificación entonces de que aquí dice Los campos están
vacíos.
O al menos un campo está vacío esta condición Revisa acá al menos un campo esté vacío.
Por lo tanto puedo recargar aquí y seguro la consola de clic en Añadir.
Los campos están vacíos y agrego algo aquí vemos que se sigue arrojando porque si no entra a una condición
entra otra debido a Lord y si agregas algo a los tres vemos que tiene algo entonces de una forma muy
sencilla de validar.
Entonces en el siguiente video vamos a crear la notificación.
La idea es que en lugar de que diga los campos están vacíos te muestra una notificación veremos cómo
crearla así como ésta.
Si todo eso lo veremos en el próximo video.