1
00:00:00,360 --> 00:00:01,380
Dar una buena acogida.

2
00:00:01,380 --> 00:00:04,380
Entonces en este video nos enfocaremos en la parte delantera.

3
00:00:04,620 --> 00:00:08,790
Vamos a aprender sobre cada TMLC evaluado en javascript en un alto nivel, no

4
00:00:08,790 --> 00:00:12,530
vamos a escribir ningún código todavía, pero veremos el código por primera vez.

5
00:00:13,140 --> 00:00:17,900
Entonces, hay dos cosas importantes que desea saber, que es lo que es diferente entre el frente y el extremo posterior.

6
00:00:18,040 --> 00:00:23,970
Y luego también cuál es la diferencia entre H. METRO. S. SS y Javascript y cuáles son sus respectivos roles.

7
00:00:25,080 --> 00:00:28,740
Comencemos discutiendo Front-End versus Bacot.

8
00:00:28,860 --> 00:00:35,610
Entonces, cuando voy a un sitio que conoces vamos a ir a Facebook, presiono Facebook punto com, presiono Enter.

9
00:00:35,610 --> 00:00:43,050
Y si recuerdas el video sobre cómo funciona la web, creo una solicitud de HTP solicitando un

10
00:00:43,050 --> 00:00:50,850
punto com de Facebook y eso va al servidor de Facebook o eventualmente Facebook decide qué página enviarme.

11
00:00:51,210 --> 00:00:56,760
Entonces, en el caso de Facebook, necesita averiguar qué imágenes, qué historias, cuántos "me gusta", qué amigos

12
00:00:56,760 --> 00:01:02,400
tengo, qué publicaciones están en la parte superior de todas mis configuraciones. Imágenes de alto perfil, todas

13
00:01:02,400 --> 00:01:03,790
las cosas que me pertenecen.

14
00:01:04,110 --> 00:01:10,200
Y luego me lo envía de regreso. Me lo envía. Else dice en javascript que mi navegador lo muestra

15
00:01:10,200 --> 00:01:10,870
para mí.

16
00:01:11,370 --> 00:01:16,980
la diferencia entre el frente y la parte de atrás, en donde todo lo que recuperé y que veo en el navegador es simplemente H.

17
00:01:16,980 --> 00:01:21,650
Entonces, este diagrama simplemente explica METRO. S. Sí.

18
00:01:21,720 --> 00:01:24,190
Y javascript solo la punta del iceberg.

19
00:01:24,270 --> 00:01:28,910
Pero es lo que mi navegador ve que es la interfaz o el lado del cliente.

20
00:01:29,250 --> 00:01:31,960
Está construido por el back-end.

21
00:01:32,370 --> 00:01:34,360
Todo lo demás que sucede toda la lógica.

22
00:01:34,440 --> 00:01:40,680
Averiguar si estoy conectado, averiguar quiénes son mis amigos, qué fotos tengo, qué publicaciones he publicado, cuántos

23
00:01:40,680 --> 00:01:42,000
me gusta tienen.

24
00:01:42,000 --> 00:01:45,970
Todo eso proviene de la lógica del servidor o del lado del servidor.

25
00:01:46,200 --> 00:01:48,000
Entonces puedes ver que hay mucho más aquí.

26
00:01:48,030 --> 00:01:50,820
La tecnología es que hay tantas opciones en la parte delantera que no.

27
00:01:50,850 --> 00:01:58,010
Siempre es HTML CSS y javascript en la parte de atrás tienes diferentes lenguajes como Python ph P Ruby javascript

28
00:01:58,020 --> 00:02:01,180
en realidad, que es lo que vamos a usar.

29
00:02:01,350 --> 00:02:06,570
Hay diferentes bases de datos que tienes posgrads y Mongo y couch D. B y Mya's.

30
00:02:06,570 --> 00:02:09,320
Q Bueno y secuela de Lightener's hay tantas opciones.

31
00:02:09,390 --> 00:02:11,010
Entonces es un poco intimidante.

32
00:02:11,040 --> 00:02:15,060
Definitivamente vamos a hablar mucho más sobre el back-end cuando lleguemos a esa unidad.

33
00:02:15,060 --> 00:02:20,940
Pero por ahora solo recuerda que el back-end es lo que construye la H para fundirse y la C S que se

34
00:02:20,940 --> 00:02:21,770
envía de regreso.

35
00:02:21,780 --> 00:02:27,200
Tomemos como ejemplo aquí que mi restaurante favorito en San Francisco se llama oso perezoso.

36
00:02:27,390 --> 00:02:28,890
Aquí está la página del restaurante.

37
00:02:29,100 --> 00:02:31,580
Esta página es siempre la misma.

38
00:02:31,620 --> 00:02:32,810
Quiero decir que podría ser cambiado.

39
00:02:32,820 --> 00:02:34,790
Pero para poder cambiarlo

40
00:02:34,920 --> 00:02:38,600
El desarrollador tiene que ir al H. T. cantidad y cambiarlo manualmente.

41
00:02:38,610 --> 00:02:44,490
Básicamente, actualizo la página cada vez que obtengo la misma página de inicio. Recibo las mismas preguntas frecuentes

42
00:02:44,730 --> 00:02:46,540
en la misma página de contacto.

43
00:02:46,580 --> 00:02:48,650
Eso no es malo, pero no necesita cambiar.

44
00:02:48,660 --> 00:02:50,580
Es solo un restaurante por página.

45
00:02:50,610 --> 00:02:55,520
Sin embargo, la página de Yelp para oso perezoso es dinámica.

46
00:02:55,530 --> 00:03:01,110
Sí cambia, así que cada vez que se escriba una nueva reseña, se mostrará aquí

47
00:03:01,170 --> 00:03:05,070
cada vez y digamos que en este caso calificamos 5 estrellas.

48
00:03:05,070 --> 00:03:06,590
Leí una reseña.

49
00:03:07,170 --> 00:03:11,840
Bueno, probablemente rechaces mi crítica, pero si escribo una reseña, aparecerá aquí.

50
00:03:11,880 --> 00:03:17,000
Las cosas son dinámicas y están sucediendo en todo momento, así que podría decir que fue una revisión útil.

51
00:03:17,190 --> 00:03:18,700
Esa fue una crítica divertida.

52
00:03:19,140 --> 00:03:23,510
Y esos votos que he agregado se almacenan en una base de datos.

53
00:03:23,520 --> 00:03:27,060
Algo está sucediendo. Estoy interactuando con esto y persiste.

54
00:03:27,060 --> 00:03:32,010
Entonces, si actualizo la página ahora, no es muy diferente.

55
00:03:32,100 --> 00:03:36,350
Pero mientras que antes no pensaba que esto fuera gracioso ahora lo recuerda.

56
00:03:36,350 --> 00:03:37,740
Pensé que era divertido.

57
00:03:37,740 --> 00:03:44,250
Así que, básicamente, el punto es que cuando voy a esta página, le pido esto. Arel Yelp no siempre

58
00:03:44,250 --> 00:03:45,650
envía exactamente lo mismo.

59
00:03:45,840 --> 00:03:49,060
Entenderá que el usuario está conectado.

60
00:03:49,290 --> 00:03:52,600
Si es así, queremos poner su foto de perfil aquí.

61
00:03:52,710 --> 00:03:53,980
Ha votado sobre cualquier cosa.

62
00:03:54,000 --> 00:03:54,470
Sí.

63
00:03:54,510 --> 00:03:57,990
OK, asegúrate de que sabes que lo resaltamos correctamente.

64
00:03:58,000 --> 00:03:59,260
Cambiar el color

65
00:03:59,310 --> 00:04:01,530
No lo dejes votar de nuevo, y así sucesivamente.

66
00:04:01,530 --> 00:04:05,420
Y luego eso construye a elsea dice y Javascript y lo envía de vuelta.

67
00:04:05,430 --> 00:04:10,150
Entonces, otro ejemplo de una página que es definitivamente dinámica es Google News.

68
00:04:10,620 --> 00:04:15,330
Cada vez que renuevo quiero decir casi cada cinco minutos algo cambia aquí si es

69
00:04:15,330 --> 00:04:17,780
el clima aquí los puntajes de la NFL.

70
00:04:17,820 --> 00:04:19,260
Quiero decir, estas son actualizaciones en vivo.

71
00:04:19,290 --> 00:04:23,190
Quizás es la nueva historia que hay noticias de última hora, algo cambia.

72
00:04:23,190 --> 00:04:25,590
Esto es muy muy diferente cada vez.

73
00:04:25,620 --> 00:04:28,840
Sin embargo, esto es siempre lo mismo.

74
00:04:29,130 --> 00:04:31,020
Entonces, de nuevo, la diferencia son dos cosas.

75
00:04:31,020 --> 00:04:34,530
Una es una página estática frente a una página dinámica.

76
00:04:34,530 --> 00:04:36,650
Ambos son páginas web.

77
00:04:36,660 --> 00:04:39,920
Ambos son TMLC s y Javascript está regresando.

78
00:04:40,110 --> 00:04:46,770
Uno va a cambiar basado en algún tipo de código del lado del servidor algo en el back-end.

79
00:04:47,340 --> 00:04:49,600
Entonces también me gusta esta analogía de un restaurante.

80
00:04:49,740 --> 00:04:52,350
Entonces, si mágicamente vas a un restaurante, te sientas.

81
00:04:52,380 --> 00:04:58,230
Digamos que pides un bistec cuando pides ese bistec, estás haciendo una petición que regresa a la

82
00:04:58,230 --> 00:05:01,060
cocina, la cocina lo prepara todo para ti.

83
00:05:01,080 --> 00:05:02,350
Esa es una especie de back-end.

84
00:05:02,460 --> 00:05:05,710
Decide qué ingredientes obtener cuánto tiempo cocinarlos.

85
00:05:05,970 --> 00:05:11,430
Todo en un plato y luego un camarero o mesera viene y trae eso a su mesa.

86
00:05:11,430 --> 00:05:12,480
Entonces es muy similar.

87
00:05:12,480 --> 00:05:16,880
Usted hace una solicitud al chef o la cocina es el servidor.

88
00:05:17,070 --> 00:05:22,530
juntarlo y finalmente enviarlo a su mesa, que es usted del lado del cliente.

89
00:05:22,530 --> 00:05:26,040
Esta parte del iceberg que está preparando todo, cocinarlo,

90
00:05:27,290 --> 00:05:29,840
Así que ahora analicemos esas tres piezas envejecidas.

91
00:05:29,940 --> 00:05:31,610
Dice en Javascript.

92
00:05:32,390 --> 00:05:35,310
Así que vamos a entrar en muchos detalles sobre cada uno de esos componentes.

93
00:05:35,330 --> 00:05:39,420
Hay secciones y unidades separadas, pero HDMI comenzará allí.

94
00:05:39,530 --> 00:05:43,760
Sobresale el lenguaje de marcado de hipertexto básicamente.

95
00:05:43,760 --> 00:05:44,870
Imagina eso.

96
00:05:44,880 --> 00:05:47,900
Y esto es lo que realmente sucedió en los primeros días de Internet.

97
00:05:47,960 --> 00:05:53,610
No había una forma estandarizada para enviar información y enviar documentos.

98
00:05:53,720 --> 00:05:59,810
Entonces, inicialmente, usted sabe que Internet se usaba para enviar comunicaciones entre universidades y universidades, y

99
00:05:59,820 --> 00:06:01,510
también como una herramienta militar.

100
00:06:01,520 --> 00:06:06,040
Digamos que quería enviar una. Quería enviar esto a un amigo.

101
00:06:06,560 --> 00:06:10,160
Debo decir que está en negrita.

102
00:06:10,250 --> 00:06:12,170
Estos son pequeños puntos.

103
00:06:12,260 --> 00:06:14,770
Tengo un texto y citas sobre esto.

104
00:06:14,770 --> 00:06:19,240
Necesito una forma de desglosarlo y describirlo para enviarlo a otra persona.

105
00:06:19,580 --> 00:06:28,230
Y la solución fue HMO así que HMO es en realidad lo más fácil que aprenderemos a no decir que es increíblemente fácil,

106
00:06:28,220 --> 00:06:35,390
pero es muy simple en el sentido de que simplemente describimos lo que queremos y lo que escribes es

107
00:06:35,390 --> 00:06:36,450
lo que obtienes.

108
00:06:36,440 --> 00:06:39,800
Así que HMO a menudo se conoce como el sustantivo de una página web.

109
00:06:39,810 --> 00:06:40,830
Es la estructura.

110
00:06:40,820 --> 00:06:48,360
Algunas personas dicen que el esqueleto básicamente dice poner una imagen aquí ponga un punto de viñeta aquí ponga un encabezado aquí ponga un título

111
00:06:48,360 --> 00:06:50,570
ligeramente más pequeño justo debajo de eso.

112
00:06:50,570 --> 00:06:58,350
describimos el estilo de una página. Necesito HVM cómo usar la evaluación CSSA por sí misma, realmente no hace nada en absoluto.

113
00:06:58,340 --> 00:07:04,720
Te permite describir la estructura de una página de CSSA, por otra parte, es la forma en que

114
00:07:04,740 --> 00:07:10,540
Cada página web tiene HMO algunas páginas web no tienen C S S Algunas no tienen javascript.

115
00:07:10,540 --> 00:07:11,620
No es obligatorio

116
00:07:11,700 --> 00:07:18,350
H Tim L is so c s s las hojas de estilo en cascada aprenderán exactamente de dónde viene ese nombre y

117
00:07:18,360 --> 00:07:18,990
un poco.

118
00:07:19,010 --> 00:07:26,030
Básicamente es estilos existentes HMO para que pueda decir cosas como hacer todos esos puntos de viñetas verdes.

119
00:07:26,150 --> 00:07:32,980
Dale a la primera imagen un borde amarillo para darle a la última imagen un gran borde rosado con guiones a través de ella.

120
00:07:33,000 --> 00:07:39,110
A menudo se consideran los adjetivos de una página web o algunas personas dirían la piel a la H. T. aquí es javascript.

121
00:07:39,360 --> 00:07:44,000
un esqueleto masculino y la última pieza

122
00:07:44,000 --> 00:07:49,170
Javascript es probablemente su definitivamente la cosa más compleja de estos tres.

123
00:07:49,380 --> 00:07:52,940
Es la forma en que agregamos Bahjat y la interactividad a una página.

124
00:07:53,210 --> 00:07:58,940
Entonces, con nosotros y Javascript podemos hacer un sitio atractivo pero no va a hacer nada,

125
00:07:58,940 --> 00:08:02,830
podemos hacer animaciones simples pero podemos cargar datos desde otro lugar.

126
00:08:02,830 --> 00:08:08,150
No puede hacer que las cosas sean interactivas, no podemos agregar lógica o tener un juego con javascript, podemos

127
00:08:08,150 --> 00:08:13,650
usar parte del ejemplo que tenemos aquí o hacer algunos cambios de color cuando el usuario hace clic en cargar.

128
00:08:13,640 --> 00:08:15,900
Los nuevos datos de Twitter obtienen el clima actual.

129
00:08:15,890 --> 00:08:17,640
Los puntajes actuales de la NFL.

130
00:08:17,730 --> 00:08:25,730
Si h tim L es los sustantivos C Ss son los adjetivos, entonces javascript es los verbos son las acciones en una página.

131
00:08:26,330 --> 00:08:33,400
Así que tengo todo esto envuelto muy bien en un código y, por lo tanto, el lápiz de código es una vista maravillosa.

132
00:08:33,410 --> 00:08:39,160
No vamos a usar mucho, pero porque realmente no hemos empezado a escribir H-2 le LCS y Javascript.

133
00:08:39,620 --> 00:08:45,090
Voy a usar esto como un ejemplo y lo que hace esto te permite simplemente escribir páginas simples en el navegador

134
00:08:45,290 --> 00:08:50,330
para que no tengamos que usar el texto de línea, simplemente lo escribimos en el navegador y puedo compartirlo

135
00:08:50,340 --> 00:08:51,260
contigo muy fácilmente.

136
00:08:51,260 --> 00:08:54,900
Tengo tres secciones h TMLC SS y Javascript.

137
00:08:54,980 --> 00:08:58,100
De nuevo, el código en sí mismo no es lo importante aquí.

138
00:08:58,130 --> 00:08:59,650
Son los conceptos.

139
00:09:00,050 --> 00:09:06,710
Así que echemos un vistazo y realmente me desharé de mi C-s us.

140
00:09:06,870 --> 00:09:11,280
Me desharé de mis trabajos y verás lo que nos queda.

141
00:09:11,270 --> 00:09:14,490
Material estructural en blanco y negro.

142
00:09:14,510 --> 00:09:21,890
Estoy especificando mi contenido, así que estas son mis palabras y estoy envolviendo ese contenido en elementos

143
00:09:21,890 --> 00:09:24,270
estructurales específicos, así que en H1.

144
00:09:24,530 --> 00:09:26,530
Y de nuevo, este es uno de esos momentos.

145
00:09:26,580 --> 00:09:28,730
No te preocupes por la sintaxis específica.

146
00:09:28,910 --> 00:09:32,920
Tenemos muchos videos por delante que entrarán en detalles y cada uno de estos.

147
00:09:33,050 --> 00:09:36,910
Pero básicamente esto es decir hacer un gran texto aquí.

148
00:09:36,980 --> 00:09:43,010
Esto significa hacer una lista y convertirla en un elemento de la lista individual que dice Hacerme un viñeta y otra

149
00:09:43,010 --> 00:09:47,510
que dice hacerme otro punto y luego hacer un botón que dice Hacerme un botón aquí.

150
00:09:47,540 --> 00:09:50,950
Como puedes ver, es solo la estructura.

151
00:09:50,960 --> 00:09:54,110
Así que ahora vamos a vernos de nuevo.

152
00:09:54,120 --> 00:09:55,970
Puedes ver lo que estoy haciendo aquí, estoy diciendo.

153
00:09:56,120 --> 00:10:03,750
Haz que el H-1 que está aquí lo vuelva morado para que podamos cambiarlo para que sea verde y cambie a

154
00:10:04,490 --> 00:10:12,830
verde y también estoy diciendo que haga que el botón tenga un borde tenga un color de fondo y un color de texto

155
00:10:13,700 --> 00:10:17,730
blanco para que podamos cambiar que sea el color del texto verde.

156
00:10:17,780 --> 00:10:20,020
Es difícil ver qué cambia el verde.

157
00:10:20,120 --> 00:10:26,970
Puedo darle un borde mucho más grande de 20 píxeles que podría ver allí para

158
00:10:26,960 --> 00:10:31,610
que haya adjetivos y la última pieza sea nuestro Javascript.

159
00:10:31,970 --> 00:10:35,420
Entonces, sin javascript ese botón no hace nada.

160
00:10:35,450 --> 00:10:41,180
Ahora lo que hemos hecho es un javascript escrito que dice cuando el usuario hace clic en el botón.

161
00:10:41,340 --> 00:10:50,030
Elija un color aleatorio y cambie el color de fondo aquí a ese color aleatorio para que pueda hacer clic y

162
00:10:50,030 --> 00:10:51,640
obtengo un color aleatorio.

163
00:10:52,460 --> 00:10:57,800
Entonces, si me deshice de este javascript e intenté hacer eso nuevamente, no pasa nada porque no tengo

164
00:10:57,810 --> 00:10:58,440
ningún verbo.

165
00:10:58,430 --> 00:11:00,410
Solo son sustantivos y aditivos.

166
00:11:00,450 --> 00:11:05,840
Solo el esqueleto estructural y un poco de piel en la parte superior a medida que agrego mi javascript, puedo

167
00:11:05,850 --> 00:11:06,520
agregar la lógica.

168
00:11:06,840 --> 00:11:08,300
Entonces javascript realmente importante.

169
00:11:08,370 --> 00:11:14,100
Esto no es exactamente lo que haría más probable en un sitio de producción real, pero podría tener un

170
00:11:14,100 --> 00:11:16,110
juego que podría hacer barredora de minas.

171
00:11:16,130 --> 00:11:19,800
Puede ser un chat de Facebook, puede ser un formulario para registrarse en una página.

172
00:11:19,860 --> 00:11:22,080
Usas javascript para hacerlo interactivo.

173
00:11:22,280 --> 00:11:25,510
Así que de nuevo te animo a jugar con el lápiz de códigos.

174
00:11:25,640 --> 00:11:28,340
Tienes que vincular a esto y explorar un poco.

175
00:11:28,350 --> 00:11:30,280
No hay prisa por moverse al siguiente video.

176
00:11:30,290 --> 00:11:32,960
Intenta cambiar algunos de estos colores si quieres.

177
00:11:32,960 --> 00:11:34,590
Intenta cambiar algo de esto.

178
00:11:34,640 --> 00:11:36,190
No te enfoques en el código.

179
00:11:36,290 --> 00:11:40,020
Es divertido jugar pero no hay presión para entender nada de esto.

180
00:11:40,040 --> 00:11:46,060
Además de una visión general de muy alto nivel de lo que HDMI hace, lo que C S hace y lo que javascript hace.

181
00:11:46,340 --> 00:11:46,630
Derecha