Bem vindo de volta.
Então, neste vídeo, vamos nos concentrar no front-end.
Nós vamos aprender sobre cada TMLC avaliado em javascript em um nível alto, nós realmente não
vamos escrever nenhum código ainda, mas nós estaremos vendo o código pela primeira vez.
Então, há duas grandes coisas que você quer saber qual é o que é diferente entre a frente e a parte traseira.
E então também qual é a diferença entre H. M. S. SS e Javascript e quais são os respectivos papéis.
Então, vamos começar discutindo o Front-End versus o bacot.
Então, quando eu vou para um você sabe, digamos Vá para o Facebook Eu bati o Facebook dot com Eu bati Enter.
E se você se lembrará do vídeo sobre como funciona a web, crie uma solicitação HTP solicitando o Facebook dot com
e isso vá para o servidor do Facebook ou, eventualmente, o Facebook, então, decide qual a página para me enviar de volta.
Então, no caso do Facebook, precisa descobrir quais imagens que histórias quantos gostam de ter amigos que tenho,
o que são posts no topo de todas as minhas configurações de imagens de alto perfil todas as
coisas que pertencem a mim.
E então ele envia de volta para mim me envia h tim elsea diz em javascript meu navegador exibe isso
para mim.
apenas a diferença entre a frente e a extremidade traseira, onde tudo que eu recebo naquele que vejo no navegador é apenas H.
Então, este diagrama aqui explica M. S. Sim.
E javascript apenas a ponta do iceberg.
Mas é o que o meu navegador vê que é o front-end ou o lado do cliente.
É construído pelo backend.
Tudo o resto que acontece toda a lógica.
Descobrindo se eu estou logado descobrindo quem são meus amigos que fotos eu tenho o que postagens eu publiquei
quantos gostam de terem.
Tudo isso vem do backend ou da lógica do lado do servidor.
Então você pode ver que há muito mais aqui.
A tecnologia é que há tantas opções no front-end não existe.
É sempre HTML CSS e javascript na parte de trás, você tem idiomas diferentes como o Python ph P
Ruby javascript, na verdade, o que vamos usar.
Existem bancos de dados diferentes que você tem pós-graduação e Mongo e sofá D. B e Mya's.
Q Bem e a sequela, Lightener, há muitas escolhas.
Então é um pouco intimidante.
Nós definitivamente conversaremos muito sobre o back-end quando chegarmos a essa unidade.
Mas por agora, lembre-se de que a parte traseira é o que constrói o H para derreter e o C S que é
enviado de volta.
Então, vamos dar um exemplo aqui, o que o meu restaurante favorito em San Francisco é chamado de preguiçoso.
Aqui está a página do restaurante.
Esta página é sempre a mesma.
Quero dizer, isso pode ser alterado.
Mas para que isso seja alterado.
O desenvolvedor tem que entrar no H. T. Montar e alterá-lo manualmente.
Então, basicamente, atualizo a página toda vez que recebo a mesma página inicial, recebo as mesmas perguntas freqüentes
na mesma página de contatos.
Isso não é ruim, mas não precisa mudar.
É apenas um restaurante uma página.
No entanto, a página de Yelp urso preguiçoso é dinâmica.
Isso muda assim que qualquer vez que uma nova revisão seja escrita, ela aparecerá
aqui toda vez e digamos, neste caso, avaliemos 5 estrelas.
Eu li uma revisão.
Bem, você provavelmente rejeita minha revisão, mas se eu escrevi um comentário, isso apareceria aqui.
As coisas são dinâmicas que estão acontecendo o tempo todo, então eu posso dizer que foi uma revisão útil.
Essa foi uma revisão engraçada.
E os votos que adicionei são armazenados em um banco de dados.
Algo está acontecendo Eu estou interagindo com isso e está persistiendo.
Então, se eu atualizar a página agora, não é diferente.
Mas, enquanto antes não achava que isso fosse engraçado agora, lembra.
Pensei que era engraçado.
Então, basicamente, o ponto é quando eu vou para esta página, eu peço isso, você, a Arel Yelp, nem sempre
envia exatamente o mesmo.
Vai descobrir que o usuário está logado.
Se assim for, queremos colocar sua foto de perfil aqui.
Ele votou em qualquer coisa.
Sim.
OK, asseguremos que você saiba que o destacamos corretamente.
Mude a cor.
Não o deixe votar novamente e assim por diante.
E então, isso o constrói, diz e Javascript e o envia de volta.
Então, um outro exemplo de uma página que é definitivamente dinâmica é o Google Notícias.
Toda vez que eu atualizar, quero dizer, quase a cada cinco minutos, alguma coisa muda aqui
se é o clima aqui pontuações da NFL.
Quero dizer, são atualizações ao vivo.
Talvez seja a nova história que as novidades aconteçam.
Isso é muito diferente de cada vez.
No entanto, este é sempre o mesmo.
Então, novamente, a diferença é duas coisas.
Um é uma página estática versus uma página dinâmica.
Ambos são páginas da web.
Ambos são TMLC s s e Javascript está voltando.
Um vai mudar com base em algum tipo de código do lado do servidor algo no back-end.
Então, eu também gosto dessa analogia de um restaurante.
Então, se você ir magicamente a um restaurante, sente-se.
Digamos que você solicite um bife quando encomendar esse bife que está fazendo um pedido que volte para
a cozinha, a cozinha prepara tudo para você.
Essa é uma espécie de back-end.
Ele decide quais ingredientes obterão quanto tempo para cozinhá-los.
Tudo em um prato e depois um garçom ou garçonete vem e traz isso para a sua mesa.
Então, é muito parecido.
Você solicita que o chef ou a cozinha seja o servidor.
e, finalmente, é enviado de volta à sua mesa, que você está no lado do cliente.
Esta parte do iceberg que está preparando tudo cozinhando juntando
Então, vamos quebrar essas três peças envelhecidas.
Diz em Javascript.
Então, vamos entrar em muitos detalhes sobre cada um desses componentes.
Existem seções e unidades separadas, mas HDMI começará lá.
Suporta basicamente linguagem de marcação de hipertexto.
Imagine isso.
E isso é o que realmente aconteceu nos primeiros dias da Internet.
Não havia nenhuma maneira padronizada de enviar informações e enviar documentos.
Então, inicialmente, você sabe que a Internet foi usada para enviar para se comunicar entre universidades e faculdades e
também como uma ferramenta militar.
Então, digamos que queria enviar um desejo de enviar isso para um amigo.
Eu preciso dizer que isso está em negrito.
Estes são pequenos pontos de bala.
Eu tenho algum texto e citações sobre isso.
Eu preciso de uma maneira de quebrar isso e descrevê-lo para enviar para outra pessoa.
E a solução foi HMO, portanto, HMO é, na verdade, a coisa mais fácil que aprenderemos a não dizer que é insano
fácil, mas é muito simples em que descrevemos o que queremos e o que você escreve é ​​o
que você obtém.
Portanto, o HMO é frequentemente referido como o substantivo de uma página da Web.
É a estrutura.
Algumas pessoas dizem que o esqueleto basicamente diz colocar uma imagem aqui colocar um ponto de bala aqui colocar um título aqui colocar
um título ligeiramente menor logo abaixo disso.
estilo de uma página que eu preciso da HVM, como usar a avaliação CSSA por conta própria, na verdade, não faz nada.
Isso permite que você descreva a estrutura de uma página CSSA, por outro lado, é como descrevemos o
Toda página web tem HMO algumas páginas da web não possuem C S S Alguns não possuem javascript.
Não é obrigatório.
H Tim L é tão c s s que as folhas de estilo em cascata aprenderão exatamente de onde esse nome vem e
um pouco.
Basicamente, são estilos HMO existentes para que você possa dizer coisas como fazer todos esses pontos de bala em verde.
Dê a primeira imagem uma borda amarela dê à última imagem uma grande margem rosa com traços através dela.
Muitas vezes, são considerados os adjetivos de uma página da web ou algumas pessoas diriam a pele ao H. T. aqui é javascript.
um esqueleto masculino e a última peça
Javascript provavelmente é definitivamente o mais complexo desses três.
É como adicionamos Bahjat e interatividade a uma página.
Então, conosco e Javascript, podemos criar um site bonito, mas não vai fazer nada realmente,
podemos fazer animações simples, mas podemos carregar dados de outro lugar.
Você não pode tornar as coisas interativas, não podemos adicionar lógica ou ter um jogo com javascript, podemos
usar alguns dos exemplos que tenho aqui ou fazer alguma mudança de matemática quando o usuário clicar na carga.
Novos dados do Twitter recebem o clima atual.
Os resultados atuais da NFL.
Se h tim L é o substantivo C Ss é o adjetivo, em seguida, javascript é que os verbos são as ações em uma página.
Então eu tenho tudo bem envolvido em um código e, portanto, a caneta de código é uma visão maravilhosa.
Não vamos usar muito, mas não começamos a escrever H-2 ele LCS e Javascript.
Eu vou usar isso como um exemplo e o que isso faz, ele permite que você apenas escreva páginas simples no
navegador, então não temos que usar o texto de linha que acabamos de escrever no navegador e posso compartilhá-lo
muito com você. facilmente.
Eu tenho três seções h TMLC SS e Javascript.
Novamente o código em si não é o que é importante aqui.
São os conceitos.
Então, vamos dar uma olhada e eu realmente vou me livrar dos nossos C-s.
Eu vou me livrar dos meus empregos e você verá o que nos resta.
Material estrutural preto e branco liso.
Estou especificando o meu conteúdo, então essas são minhas palavras e estou envolvendo esse conteúdo em elementos
estruturais específicos, portanto, em H1.
E novamente, esse é um daqueles tempos.
Não se preocupe com a sintaxe específica.
Temos tantos vídeos à frente que vão entrar em detalhes e cada um desses.
Mas basicamente isso está dizendo, faça um grande texto aqui.
Isso está dizendo fazer uma lista e torná-lo item de lista individual que diz: Me faça um ponto de bala e outro que diz
me faça outro ponto de bala e depois faça um botão que diz: Me faça um botão aqui.
Como você pode ver, é só isso é apenas a estrutura.
Então, agora vamos ou nos vejamos de volta.
Você pode ver o que estou fazendo aqui, estou dizendo.
Faça o H-1 que está aqui torná-lo roxo para que possamos mudar isso para ser verde e ele muda para
verde e também estou dizendo que o botão possui uma borda tem uma cor de fundo e uma cor de texto de
branco para que possamos mudar que seja cor de texto verde.
É difícil ver o que muda o verde.
Posso dar uma borda muito maior de 20 pixels que ela poderia ver lá, de modo
que existam adjetivos e a última peça é o nosso Javascript.
Então, sem o javascript, esse botão não faz nada.
Agora, o que fizemos é o JavaScript escrito que diz quando o usuário clica no botão.
Escolha uma cor aleatória e mude a cor de fundo aqui para aquela cor aleatória para que eu possa clicar e eu
obtenho uma cor aleatória.
Então, se eu me livrar desse javascript e tentei fazer isso novamente, nada acontece porque não
tenho verbos.
Somente são substantivos e aditivos.
Apenas o esqueleto estrutural e um pouco de pele no topo, como eu adiciono meu javascript, eu posso adicionar
a lógica.
Então javascript é realmente importante.
Isso não é exatamente o que você faria mais provável em um site de produção real, mas você talvez tenha um
jogo que você possa fazer mine sweeper.
Este pode ser o Facebook, pode ser um formulário para se inscrever para uma página.
Você usa javascript para torná-lo interativo.
Então, novamente eu encorajo você a brincar na caneta de código.
Você tem que ligar para isso e explorar um pouco.
Não há pressa para mover o próximo vídeo.
Tente alterar algumas dessas cores se desejar.
Tente mudar algo disso.
Não se concentre no código.
É divertido brincar, mas não há pressão para entender nada disso.
Além de uma visão geral do nível muito alto do que o HDMI faz o que C S faz e o que o javascript faz.
Certo