1
00:00:00,450 --> 00:00:05,880
La idea del curso es mostrarte las diferentes facetas de las distintas tecnologías que tenemos en desarrollo

2
00:00:05,880 --> 00:00:06,650
web.

3
00:00:06,720 --> 00:00:12,460
Hasta aquí hemos escrito un poco de PHP para reutilizar por ejemplo el Getter el futuro Führer el formulario.

4
00:00:12,460 --> 00:00:19,680
Un poco de HTML para toda la estructura un poco de CSS para que se vea bien y los próximos vídeos estaremos

5
00:00:19,680 --> 00:00:27,120
utilizando más JavaScript más PHP y las consultas de SQL así como modelar la base de datos.

6
00:00:27,120 --> 00:00:30,690
La idea de este vídeo es que comencemos a escribir un poco de JavaScript.

7
00:00:30,900 --> 00:00:34,580
Cuando damos clic en Añadir podemos ver qué arroja esta notificación.

8
00:00:34,680 --> 00:00:36,620
JavaScript nos añade esta interacción.

9
00:00:36,630 --> 00:00:38,770
Cuando doy clic en Añadir aparece la notificación.

10
00:00:38,770 --> 00:00:44,020
Todo esto es parte de CSS la notificación la validación es por medio de JavaScript.

11
00:00:44,040 --> 00:00:48,510
Todo eso lo estaremos viendo de aquí en adelante así que vamos a comenzar.

12
00:00:48,510 --> 00:00:51,990
Si recuerdas hemos definido una pjs de momento está vacío.

13
00:00:51,990 --> 00:00:58,290
Aquí va a crear una variable estaremos utilizando la sintaxis nueva de JavaScript no está como al 100

14
00:00:58,290 --> 00:01:02,670
por ciento soporta tiene muy buen soporte pero no al 100 por ciento.

15
00:01:02,670 --> 00:01:08,040
Pero es importante conocer la nueva sintaxis comenzar a utilizarla aunque su soporte no sea del 100.

16
00:01:08,130 --> 00:01:14,760
Si un proyecto está hecho en Internet Explorer 6 o 7 son muy viejos no se verá no funcionará al 100

17
00:01:14,760 --> 00:01:15,780
por ciento.

18
00:01:15,780 --> 00:01:20,100
Pero de nuevo es importante que conozcas la nueva sintaxis y comiences a utilizarla.

19
00:01:20,280 --> 00:01:27,780
Por qué los nuevos Frend Works y librerías como Not J.S. como bullies break angular todos estos nuevos

20
00:01:27,780 --> 00:01:34,570
Frend Works que están apareciendo utilizan la nueva sintaxis entonces vamos a comenzar con Aquí Voy

21
00:01:34,570 --> 00:01:43,370
a cerrar algunos archivos que no voy a ocupar y lo que viene siendo Fuhrer tampoco el formulario y este

22
00:01:43,420 --> 00:01:45,310
sí lo voy a dejar aquí un momento.

23
00:01:45,310 --> 00:01:50,530
Puedes ver que de momento tengo el Index y le agregué este forma y que dice contactes este mismo forma

24
00:01:50,560 --> 00:01:53,840
y está aquí en militar.

25
00:01:53,840 --> 00:02:01,100
Entonces vamos a seleccionar el Form por medio de JavaScript que va a poner const constante porque nunca

26
00:02:01,100 --> 00:02:08,090
va a cambiar este valor siempre base de este formulario pero el formulario contactos igual a document

27
00:02:08,600 --> 00:02:09,680
.4 y selector.

28
00:02:09,680 --> 00:02:15,790
Esta es la nueva sintaxis también recomendada para utilizar o seleccionar elementos ya no ya.

29
00:02:15,820 --> 00:02:23,360
Poco a poco ha ido dejándose utilizar JEET Element Bayarri elements TACC name the elements Class name

30
00:02:23,390 --> 00:02:29,890
etc. ahora se recomienda utilizar XLS lector cuál es el nos retornã máximo un elemento puede retornar

31
00:02:29,900 --> 00:02:36,110
cero si no lo encuentra utilizar es lector porque nada más tenemos un formulario.

32
00:02:36,430 --> 00:02:42,210
Utiliza una sintaxis similar a la de CSS signo de gato porque éste es un Airi.

33
00:02:42,220 --> 00:02:48,200
Si fuera una clase sería un punto y eso va a seleccionar ese formulario.

34
00:02:48,370 --> 00:02:51,540
Desde aquí crea un función que lo voy a nombrar.

35
00:02:51,640 --> 00:02:57,870
Les energies es una preferencia personal nuevamente más que nada para no tenerlo se ven Lissner de aquí

36
00:02:57,880 --> 00:03:05,100
afuera va a ser una función que mandó llamar una vez o inmediatamente que se ejecuta el código más que

37
00:03:05,100 --> 00:03:10,020
nada es una preferencia personal no tenerlos lista de forma global aunque esto sí los va a tener de

38
00:03:10,020 --> 00:03:13,660
forma global porque necesito acceder a ellos.

39
00:03:13,740 --> 00:03:18,320
Es muy probable que tenga que acceder a ellos en distintas partes del código entonces para no estar

40
00:03:18,420 --> 00:03:21,810
declarando la mínima variable lo voy a dejar global aquí afuera.

41
00:03:22,770 --> 00:03:30,340
Entonces funciones Bendixen vamos a crear aquí un comentario que diga cuándo el formulario de crear

42
00:03:30,370 --> 00:03:39,940
o editar se ejecuta y qué vamos a poner formulario contactos punto a deben tener y vamos a escuchar

43
00:03:39,940 --> 00:03:43,270
y esperar a que el formulario tengan Submit.

44
00:03:43,510 --> 00:03:50,680
Cuando alguien a quien añadir o esté en la parte de editar quieres añadir también más adelante veremos

45
00:03:50,680 --> 00:03:51,940
la lógica para cambiarlo.

46
00:03:51,940 --> 00:03:58,510
Editar entonces cuando se presione este botón se va a realizar la acción de Submit y queremos que ejecute

47
00:03:58,550 --> 00:04:01,040
una una función que voy a nombrar.

48
00:04:01,060 --> 00:04:04,450
Leer formulario es una función pero nada más.

49
00:04:04,450 --> 00:04:06,160
Tienes que pasarle el nombre.

50
00:04:06,340 --> 00:04:08,570
No tienes que pasarle paréntesis en este caso.

51
00:04:09,280 --> 00:04:17,480
Entonces esta es una función voy a crear la que abajo más función del formulario y quiero poner un Consol

52
00:04:17,480 --> 00:04:20,350
punto log que diga presionarte

53
00:04:22,930 --> 00:04:30,400
y voy a guardar cambios y recargamos el proyecto de Speck y vamos a ver dos cosas primero si abro aquí

54
00:04:30,400 --> 00:04:32,200
consola y doy clic en Añadir.

55
00:04:32,200 --> 00:04:36,650
Pudiste ver ese flash que aparece el texto y desaparece automáticamente.

56
00:04:36,760 --> 00:04:40,930
Aquí en la web releen nos agrega el signo de gato y un signo de interrogación.

57
00:04:40,930 --> 00:04:45,720
Si lo eliminas esa parte y lo vuelves a dar añadir puedes ver que aparece el flash.

58
00:04:45,730 --> 00:04:50,560
Nuevamente si le das a añadir ya no aparece pero ya no se agregó esto la borre.

59
00:04:51,040 --> 00:04:52,770
Esto se conoce como la acción por Defour.

60
00:04:52,780 --> 00:04:59,200
Cuando tú agregas un formulario cuando le das enviar tratá de ejecutar lo que se encuentre en el Action

61
00:04:59,290 --> 00:05:04,450
por ejemplo aquí en editar este Action puedes ver que tiene un signo de gato entonces trata de ir a

62
00:05:04,450 --> 00:05:05,410
ese archivo.

63
00:05:05,410 --> 00:05:10,120
Esto se conoce como la acción por default y en muchos proyectos ese archivo te va a llevar algo así

64
00:05:10,120 --> 00:05:17,400
como registro punto PHP porque de ahí va utilizar PHP para que trate los datos de ahí en adelante.

65
00:05:17,470 --> 00:05:22,110
En nuestro caso queremos realizar las inserciones y ediciones con JavaScript.

66
00:05:22,330 --> 00:05:27,470
Por lo tanto tenemos que hacer algo que se conoce como prevenir la acción por default.

67
00:05:28,240 --> 00:05:34,610
Suena más complicado de lo que es porque nada más exponerla aquí una E que se refiere al evento con

68
00:05:34,610 --> 00:05:43,320
su blog y recargas el proyecto haz click en Añadir aquí dice el evento entonces el evento que está sucediendo

69
00:05:43,980 --> 00:05:48,580
es un evento que alguien presionó al clic en el botón de Añadir.

70
00:05:48,630 --> 00:05:56,150
Aquí viene mucha información entonces tenemos ese elemento y utilizamos una función que llama preven

71
00:05:56,150 --> 00:06:03,240
default entonces ya la siguiente vez que da clic en consola y elimina lo que está aquí en la web Relay

72
00:06:04,510 --> 00:06:10,070
da clic en Añadir puedes ver que sigue apareciendo muchas veces ya no se actualiza la web y estamos

73
00:06:10,070 --> 00:06:12,080
previniendo la acción por default.

74
00:06:12,080 --> 00:06:18,120
Se recomienda hacer esto siempre que quieras realizar alguna operación con JavaScript o con Ayax.

75
00:06:18,680 --> 00:06:21,880
Entonces puedes ver que tengo estos consolados ya los voy a quitar.

76
00:06:21,890 --> 00:06:28,350
Hay a crear una variable que diga leer los datos de los inputs que tenemos los inputs Guacara por ejemplo

77
00:06:28,350 --> 00:06:35,750
en icons nombre Todo esto va a ser de document punto y selector y si recuerdas le habíamos dado una

78
00:06:35,750 --> 00:06:44,300
idea a cada uno de ellos tiene una idea del nombre es copiarlo Squares selector abrimos paréntesis comillas

79
00:06:44,300 --> 00:06:49,550
dobles o sencillas cualquiera de las dos mientras no las mezcles y el nombre de Leidi y para atraerme

80
00:06:49,550 --> 00:06:58,190
el valor del impugnamos como equivalió puedes darle con el punto log nombre y guardar cambios y abrir

81
00:06:58,190 --> 00:07:02,600
la consola y se da clic en Añadir pues el que no imprime nada porque no hay nada aquí pero si yo le

82
00:07:02,600 --> 00:07:09,750
pongo un 1 Añadir aparece un 1 panel aquí Juan aparece mi nombre.

83
00:07:09,990 --> 00:07:17,810
Entonces de esta forma puedes comprobar que los valores tengan algo si por ejemplo le pones if nombre

84
00:07:18,380 --> 00:07:23,690
es igual y lo vamos a revisar estrictamente con los tres síguenos siempre se recomienda con tres en

85
00:07:23,690 --> 00:07:24,830
JavaScript.

86
00:07:24,830 --> 00:07:37,890
Si el nombre es igual a nada con su blog el campo está vacío es consolador tiene algo guardamos cambios

87
00:07:38,290 --> 00:07:40,560
y recargamos nuevamente de clic en Añadir.

88
00:07:40,590 --> 00:07:41,920
El campo está vacío.

89
00:07:42,120 --> 00:07:46,300
Si le agrego algo lo que sea aquí no añadir pues ver que tiene algo.

90
00:07:46,310 --> 00:07:51,150
Esta es una forma muy sencilla de validar que tengas algo en tus formularios.

91
00:07:51,150 --> 00:07:59,010
Ahora tengo más campos tengo empresa y tengo también lo que es el nombre.

92
00:07:59,090 --> 00:08:03,710
Este debería ser diferente voy a darle un formulario este teléfono

93
00:08:07,680 --> 00:08:16,440
entonces teléfono contacto y aquí también teléfono porque debe ser el mismo Heydi.

94
00:08:16,960 --> 00:08:23,990
Entonces tenemos estos tres distintos campos por lo tanto abro mi ABC y para no escribir tres veces

95
00:08:23,990 --> 00:08:25,640
const pues polendas que una coma.

96
00:08:26,850 --> 00:08:28,200
Y crear una copia de este

97
00:08:33,610 --> 00:08:35,410
y una más.

98
00:08:35,410 --> 00:08:44,210
Punto y Coma aquí entonces el segundo va a ser empresa y el tercero va a ser el teléfono.

99
00:08:48,910 --> 00:08:53,830
Y debido a que todos los campos son obligatorios ver todos los campos son obligatorios.

100
00:08:53,850 --> 00:09:01,820
Podemos ponerle un OR podría ser también con un y pero va a ser honor porque en caso de que alguien

101
00:09:01,820 --> 00:09:12,310
deje al menos un campo vacío se va a lanzar esta notificación entonces de que aquí dice Los campos están

102
00:09:12,310 --> 00:09:13,230
vacíos.

103
00:09:14,880 --> 00:09:19,050
O al menos un campo está vacío esta condición Revisa acá al menos un campo esté vacío.

104
00:09:19,170 --> 00:09:23,550
Por lo tanto puedo recargar aquí y seguro la consola de clic en Añadir.

105
00:09:23,670 --> 00:09:28,290
Los campos están vacíos y agrego algo aquí vemos que se sigue arrojando porque si no entra a una condición

106
00:09:28,290 --> 00:09:35,500
entra otra debido a Lord y si agregas algo a los tres vemos que tiene algo entonces de una forma muy

107
00:09:35,500 --> 00:09:36,530
sencilla de validar.

108
00:09:36,910 --> 00:09:39,070
Entonces en el siguiente video vamos a crear la notificación.

109
00:09:39,070 --> 00:09:44,350
La idea es que en lugar de que diga los campos están vacíos te muestra una notificación veremos cómo

110
00:09:44,350 --> 00:09:46,130
crearla así como ésta.

111
00:09:46,310 --> 00:09:48,280
Si todo eso lo veremos en el próximo video.