Dar una buena acogida.
Entonces en este video nos enfocaremos en la parte delantera.
Vamos a aprender sobre cada TMLC evaluado en javascript en un alto nivel, no
vamos a escribir ningún código todavía, pero veremos el código por primera vez.
Entonces, hay dos cosas importantes que desea saber, que es lo que es diferente entre el frente y el extremo posterior.
Y luego también cuál es la diferencia entre H. METRO. S. SS y Javascript y cuáles son sus respectivos roles.
Comencemos discutiendo Front-End versus Bacot.
Entonces, cuando voy a un sitio que conoces vamos a ir a Facebook, presiono Facebook punto com, presiono Enter.
Y si recuerdas el video sobre cómo funciona la web, creo una solicitud de HTP solicitando un
punto com de Facebook y eso va al servidor de Facebook o eventualmente Facebook decide qué página enviarme.
Entonces, en el caso de Facebook, necesita averiguar qué imágenes, qué historias, cuántos "me gusta", qué amigos
tengo, qué publicaciones están en la parte superior de todas mis configuraciones. Imágenes de alto perfil, todas
las cosas que me pertenecen.
Y luego me lo envía de regreso. Me lo envía. Else dice en javascript que mi navegador lo muestra
para mí.
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.
Entonces, este diagrama simplemente explica METRO. S. Sí.
Y javascript solo la punta del iceberg.
Pero es lo que mi navegador ve que es la interfaz o el lado del cliente.
Está construido por el back-end.
Todo lo demás que sucede toda la lógica.
Averiguar si estoy conectado, averiguar quiénes son mis amigos, qué fotos tengo, qué publicaciones he publicado, cuántos
me gusta tienen.
Todo eso proviene de la lógica del servidor o del lado del servidor.
Entonces puedes ver que hay mucho más aquí.
La tecnología es que hay tantas opciones en la parte delantera que no.
Siempre es HTML CSS y javascript en la parte de atrás tienes diferentes lenguajes como Python ph P Ruby javascript
en realidad, que es lo que vamos a usar.
Hay diferentes bases de datos que tienes posgrads y Mongo y couch D. B y Mya's.
Q Bueno y secuela de Lightener's hay tantas opciones.
Entonces es un poco intimidante.
Definitivamente vamos a hablar mucho más sobre el back-end cuando lleguemos a esa unidad.
Pero por ahora solo recuerda que el back-end es lo que construye la H para fundirse y la C S que se
envía de regreso.
Tomemos como ejemplo aquí que mi restaurante favorito en San Francisco se llama oso perezoso.
Aquí está la página del restaurante.
Esta página es siempre la misma.
Quiero decir que podría ser cambiado.
Pero para poder cambiarlo
El desarrollador tiene que ir al H. T. cantidad y cambiarlo manualmente.
Básicamente, actualizo la página cada vez que obtengo la misma página de inicio. Recibo las mismas preguntas frecuentes
en la misma página de contacto.
Eso no es malo, pero no necesita cambiar.
Es solo un restaurante por página.
Sin embargo, la página de Yelp para oso perezoso es dinámica.
Sí cambia, así que cada vez que se escriba una nueva reseña, se mostrará aquí
cada vez y digamos que en este caso calificamos 5 estrellas.
Leí una reseña.
Bueno, probablemente rechaces mi crítica, pero si escribo una reseña, aparecerá aquí.
Las cosas son dinámicas y están sucediendo en todo momento, así que podría decir que fue una revisión útil.
Esa fue una crítica divertida.
Y esos votos que he agregado se almacenan en una base de datos.
Algo está sucediendo. Estoy interactuando con esto y persiste.
Entonces, si actualizo la página ahora, no es muy diferente.
Pero mientras que antes no pensaba que esto fuera gracioso ahora lo recuerda.
Pensé que era divertido.
Así que, básicamente, el punto es que cuando voy a esta página, le pido esto. Arel Yelp no siempre
envía exactamente lo mismo.
Entenderá que el usuario está conectado.
Si es así, queremos poner su foto de perfil aquí.
Ha votado sobre cualquier cosa.
Sí.
OK, asegúrate de que sabes que lo resaltamos correctamente.
Cambiar el color
No lo dejes votar de nuevo, y así sucesivamente.
Y luego eso construye a elsea dice y Javascript y lo envía de vuelta.
Entonces, otro ejemplo de una página que es definitivamente dinámica es Google News.
Cada vez que renuevo quiero decir casi cada cinco minutos algo cambia aquí si es
el clima aquí los puntajes de la NFL.
Quiero decir, estas son actualizaciones en vivo.
Quizás es la nueva historia que hay noticias de última hora, algo cambia.
Esto es muy muy diferente cada vez.
Sin embargo, esto es siempre lo mismo.
Entonces, de nuevo, la diferencia son dos cosas.
Una es una página estática frente a una página dinámica.
Ambos son páginas web.
Ambos son TMLC s y Javascript está regresando.
Uno va a cambiar basado en algún tipo de código del lado del servidor algo en el back-end.
Entonces también me gusta esta analogía de un restaurante.
Entonces, si mágicamente vas a un restaurante, te sientas.
Digamos que pides un bistec cuando pides ese bistec, estás haciendo una petición que regresa a la
cocina, la cocina lo prepara todo para ti.
Esa es una especie de back-end.
Decide qué ingredientes obtener cuánto tiempo cocinarlos.
Todo en un plato y luego un camarero o mesera viene y trae eso a su mesa.
Entonces es muy similar.
Usted hace una solicitud al chef o la cocina es el servidor.
juntarlo y finalmente enviarlo a su mesa, que es usted del lado del cliente.
Esta parte del iceberg que está preparando todo, cocinarlo,
Así que ahora analicemos esas tres piezas envejecidas.
Dice en Javascript.
Así que vamos a entrar en muchos detalles sobre cada uno de esos componentes.
Hay secciones y unidades separadas, pero HDMI comenzará allí.
Sobresale el lenguaje de marcado de hipertexto básicamente.
Imagina eso.
Y esto es lo que realmente sucedió en los primeros días de Internet.
No había una forma estandarizada para enviar información y enviar documentos.
Entonces, inicialmente, usted sabe que Internet se usaba para enviar comunicaciones entre universidades y universidades, y
también como una herramienta militar.
Digamos que quería enviar una. Quería enviar esto a un amigo.
Debo decir que está en negrita.
Estos son pequeños puntos.
Tengo un texto y citas sobre esto.
Necesito una forma de desglosarlo y describirlo para enviarlo a otra persona.
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,
pero es muy simple en el sentido de que simplemente describimos lo que queremos y lo que escribes es
lo que obtienes.
Así que HMO a menudo se conoce como el sustantivo de una página web.
Es la estructura.
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
ligeramente más pequeño justo debajo de eso.
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.
Te permite describir la estructura de una página de CSSA, por otra parte, es la forma en que
Cada página web tiene HMO algunas páginas web no tienen C S S Algunas no tienen javascript.
No es obligatorio
H Tim L is so c s s las hojas de estilo en cascada aprenderán exactamente de dónde viene ese nombre y
un poco.
Básicamente es estilos existentes HMO para que pueda decir cosas como hacer todos esos puntos de viñetas verdes.
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.
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.
un esqueleto masculino y la última pieza
Javascript es probablemente su definitivamente la cosa más compleja de estos tres.
Es la forma en que agregamos Bahjat y la interactividad a una página.
Entonces, con nosotros y Javascript podemos hacer un sitio atractivo pero no va a hacer nada,
podemos hacer animaciones simples pero podemos cargar datos desde otro lugar.
No puede hacer que las cosas sean interactivas, no podemos agregar lógica o tener un juego con javascript, podemos
usar parte del ejemplo que tenemos aquí o hacer algunos cambios de color cuando el usuario hace clic en cargar.
Los nuevos datos de Twitter obtienen el clima actual.
Los puntajes actuales de la NFL.
Si h tim L es los sustantivos C Ss son los adjetivos, entonces javascript es los verbos son las acciones en una página.
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.
No vamos a usar mucho, pero porque realmente no hemos empezado a escribir H-2 le LCS y Javascript.
Voy a usar esto como un ejemplo y lo que hace esto te permite simplemente escribir páginas simples en el navegador
para que no tengamos que usar el texto de línea, simplemente lo escribimos en el navegador y puedo compartirlo
contigo muy fácilmente.
Tengo tres secciones h TMLC SS y Javascript.
De nuevo, el código en sí mismo no es lo importante aquí.
Son los conceptos.
Así que echemos un vistazo y realmente me desharé de mi C-s us.
Me desharé de mis trabajos y verás lo que nos queda.
Material estructural en blanco y negro.
Estoy especificando mi contenido, así que estas son mis palabras y estoy envolviendo ese contenido en elementos
estructurales específicos, así que en H1.
Y de nuevo, este es uno de esos momentos.
No te preocupes por la sintaxis específica.
Tenemos muchos videos por delante que entrarán en detalles y cada uno de estos.
Pero básicamente esto es decir hacer un gran texto aquí.
Esto significa hacer una lista y convertirla en un elemento de la lista individual que dice Hacerme un viñeta y otra
que dice hacerme otro punto y luego hacer un botón que dice Hacerme un botón aquí.
Como puedes ver, es solo la estructura.
Así que ahora vamos a vernos de nuevo.
Puedes ver lo que estoy haciendo aquí, estoy diciendo.
Haz que el H-1 que está aquí lo vuelva morado para que podamos cambiarlo para que sea verde y cambie a
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
blanco para que podamos cambiar que sea el color del texto verde.
Es difícil ver qué cambia el verde.
Puedo darle un borde mucho más grande de 20 píxeles que podría ver allí para
que haya adjetivos y la última pieza sea nuestro Javascript.
Entonces, sin javascript ese botón no hace nada.
Ahora lo que hemos hecho es un javascript escrito que dice cuando el usuario hace clic en el botón.
Elija un color aleatorio y cambie el color de fondo aquí a ese color aleatorio para que pueda hacer clic y
obtengo un color aleatorio.
Entonces, si me deshice de este javascript e intenté hacer eso nuevamente, no pasa nada porque no tengo
ningún verbo.
Solo son sustantivos y aditivos.
Solo el esqueleto estructural y un poco de piel en la parte superior a medida que agrego mi javascript, puedo
agregar la lógica.
Entonces javascript realmente importante.
Esto no es exactamente lo que haría más probable en un sitio de producción real, pero podría tener un
juego que podría hacer barredora de minas.
Puede ser un chat de Facebook, puede ser un formulario para registrarse en una página.
Usas javascript para hacerlo interactivo.
Así que de nuevo te animo a jugar con el lápiz de códigos.
Tienes que vincular a esto y explorar un poco.
No hay prisa por moverse al siguiente video.
Intenta cambiar algunos de estos colores si quieres.
Intenta cambiar algo de esto.
No te enfoques en el código.
Es divertido jugar pero no hay presión para entender nada de esto.
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.
Derecha