Ben tornato.
Quindi in questo video ci concentreremo sul front-end.
Impareremo su ogni TMLC valutato in javascript ad alto livello, non scriveremo
ancora alcun codice, ma vedremo il codice per la prima volta.
Quindi ci sono due grandi cose che vuoi sapere, qual è la differenza tra front e back end.
E poi anche qual è la differenza tra H. M. S. SS e Javascript e quali sono i loro rispettivi ruoli.
Quindi iniziamo discutendo di Front-End contro bacot.
Quindi quando vado a un tavolo sai che diciamo Vai a Facebook, premo Facebook, punto com, premo invio.
E se ti ricorderai del video su come funziona il web, creo una richiesta HTP che chiede Facebook
dot com e che va al server di Facebook o eventualmente a Facebook, quindi decide quale pagina mandarmi indietro.
Quindi, nel caso di Facebook, ha bisogno di capire quali immagini quali storie a quanti piace avere ciò che
gli amici che ho, quali post sono in cima a tutte le mie immagini di alto profilo e tutte
le cose che mi riguardano.
E poi lo manda indietro a me manda me timide dice in javascript che il mio browser me
lo mostra.
semplicemente la differenza tra il fronte e il back-end, dove tutto ciò che rientro in quello che vedo nel browser è solo H.
Quindi questo diagramma qui spiega M. S. Sì.
E javascript solo la punta dell'iceberg.
Ma è ciò che il mio browser vede che è il front end o il lato client.
È costruito dal back-end.
Tutto il resto che succede tutta la logica.
Capire se sono loggato per capire chi sono i miei amici quali sono le foto che ho che post ho postato
quante mi piace hanno.
Tutto ciò deriva dal back-end o dalla logica lato server.
Quindi puoi vedere che c'è molto di più qui.
La tecnologia è che ci sono così tante scelte sul front end che non c'è.
È sempre HTML CSS e javascript sul back-end hai linguaggi diversi come Python ph P
Ruby javascript che è quello che useremo.
Ci sono diversi database con postgrading e Mongo e divano D. B e Mya's.
Q Bene e il seguito di Lightener's ci sono così tante scelte.
Quindi è un po 'intimidatorio.
Parleremo sicuramente molto di più sul back-end quando arriveremo a quell'unità.
Ma per ora ricordati solo che il back-end è ciò che costruisce l'H a fondere e il C S che
viene rimandato indietro.
Facciamo quindi un esempio qui, quello che il mio ristorante preferito a San Francisco è chiamato lazy bear.
Ecco la pagina del ristorante.
Questa pagina è sempre la stessa.
Voglio dire, potrebbe essere cambiato.
Ma per essere cambiato.
Lo sviluppatore deve entrare in H. T. importo e modificarlo manualmente.
Quindi, in sostanza, aggiorno la pagina ogni volta che ottengo la stessa homepage. Ricevo le stesse domande frequenti
nella stessa pagina di contatto.
Non è una brutta cosa, ma non ha bisogno di cambiare.
È solo un ristorante una pagina.
Tuttavia la pagina di Yelp per lazy bear è dinamica.
Cambia ogni volta che viene scritta una nuova recensione che verrà mostrata qui ogni
volta e diciamo che in questo caso valutiamo 5 stelle.
Ho letto una recensione.
Probabilmente rifiuteresti la mia recensione, ma se avessi scritto una recensione sarebbe apparsa qui.
Le cose sono dinamiche stanno accadendo in ogni momento quindi potrei dire oh questa è stata una recensione utile.
Questa è stata una recensione divertente.
E i voti che ho aggiunto sono archiviati in un database.
Sta succedendo qualcosa, sto interagendo con questo ed è persistente.
Quindi se aggiorno la pagina ora è diverso non molto diverso.
Ma mentre prima non pensavo che fosse divertente ora si ricorda.
Pensavo fosse divertente.
Quindi, in pratica, il punto è quando vado in questa pagina. Chiedo per questo che Arel Yelp non invia sempre esattamente
la stessa identica cosa.
Scopriremo che l'utente ha effettuato l'accesso.
Se è così, vogliamo mettere la sua immagine del profilo qui.
Ha votato su qualsiasi cosa.
Sì.
OK assicurati di sapere che lo evidenziamo correttamente.
Cambia il colore
Non lasciarlo votare di nuovo e così via.
E poi quello che costruisce per lui elsea dice e Javascript e lo rimanda indietro.
Quindi un altro esempio di una pagina che è decisamente dinamica è Google News.
Ogni volta che aggiorno intendo quasi ogni cinque minuti qualcosa cambia
qui se è il tempo qui.
Voglio dire, questi sono aggiornamenti dal vivo.
Forse è la nuova storia ci sono novità che cambiano qualcosa.
Questo è molto molto diverso ogni volta.
Tuttavia questo è sempre lo stesso.
Quindi, ancora una volta la differenza sono due cose.
Uno è una pagina statica rispetto a una pagina dinamica.
Entrambi sono pagine web.
Entrambi sono TMLC e Javascript che ritornano.
Uno cambierà in base a qualche tipo di codice lato server sul back-end.
Quindi mi piace anche questa analogia con un ristorante.
Quindi se vai magicamente in un ristorante ti siedi.
Diciamo che ordini una bistecca quando ordini quella bistecca che stai facendo una richiesta che ritorna
in cucina, la cucina prepara tutto per te.
È una specie di back-end.
Decide quali ingredienti ottenere quanto tempo per cucinarli.
Tutto su un piatto e poi un cameriere o cameriera arriva e lo porta al tuo tavolo.
Quindi è molto simile.
Fai una richiesta lo chef o la cucina è il server.
e alla fine viene rispedito al tuo tavolo, che sei tu dal lato del cliente.
Questa parte dell'iceberg sta preparando tutto per cucinarlo mettendolo insieme
Quindi ora abbattiamo quei tre pezzi invecchiati.
Dice in Javascript.
Quindi entreremo in molti dettagli su ciascuno di questi componenti.
Ci sono sezioni e unità separate ma HDMI inizierà qui.
Si basa fondamentalmente sul linguaggio di marcatura dell'ipertesto.
Immaginalo.
E questo è ciò che è realmente accaduto nei primi giorni di Internet.
Non c'era un modo standardizzato per inviare informazioni e inviare documenti.
Quindi inizialmente sai che Internet è stato utilizzato per inviare comunicazioni tra università e college e
anche come strumento militare.
Quindi diciamo che volevo inviare un messaggio che volevo inviare a un amico.
Devo dire OK, questo è audace.
Questi sono piccoli punti elenco.
Ho del testo e delle citazioni su questo.
Ho bisogno di un modo per abbatterlo e descriverlo per inviarlo a qualcun altro.
E la soluzione era HMO, quindi HMO è in realtà la cosa più semplice che impareremo a non dire che è folle
facile, ma è molto semplice in quanto descriviamo solo ciò che vogliamo e ciò che scrivi è ciò
che ottieni.
Quindi HMO viene spesso definito come il nome di una pagina web.
È la struttura.
Alcune persone dicono che lo scheletro in pratica dice di mettere un'immagine qui mettere un punto elenco qui mettere un titolo qui mettere un
titolo leggermente più piccolo appena sotto quello.
stile di una pagina che ho bisogno di HVM come usare la valutazione CSSA da sola non fa assolutamente nulla.
Ti permette di descrivere la struttura di una pagina CSSA d'altra parte è come descriviamo lo
Ogni singola pagina web ha HMO alcune pagine web non hanno C S S Alcuni non hanno javascript.
Non è obbligatorio
H Tim L è il modo in cui i fogli di stile a cascata apprenderanno esattamente da dove viene quel nome e un
po '.
Fondamentalmente sono gli stili esistenti HMO in modo da poter dire cose come rendere tutti quei punti elenco verde.
Dare alla prima immagine un bordo giallo per dare all'ultima immagine un grande bordo rosa con dei trattini.
Spesso è considerato l'aggettivo di una pagina web o qualcuno direbbe la pelle all'H. T. qui è javascript.
uno scheletro maschile e l'ultimo pezzo
Javascript è probabilmente la cosa più complessa tra queste tre.
È come aggiungiamo Bahjat e l'interattività a una pagina.
Quindi con noi e Javascript possiamo creare un sito di bell'aspetto ma non faremo nulla, in realtà possiamo
fare semplici animazioni, ma possiamo caricare i dati da qualche altra parte.
Non puoi rendere le cose interattive non possiamo aggiungere la logica o avere un gioco con javascript, possiamo
usare un po 'dell'esempio che ho qui o fare dei calcoli matematici quando l'utente fa clic sul caricamento.
I nuovi dati di Twitter ricevono il tempo corrente.
Gli attuali punteggi NFL.
Se h tim L è il nome C Ss è l'aggettivo allora javascript è i verbi sono le azioni su una pagina.
Quindi ho tutto ben racchiuso in un codice e quindi la penna del codice è uno spettacolo meraviglioso.
Non useremo molto ma perché non abbiamo davvero iniziato a scrivere H-2 su LCS e Javascript.
Userò questo come esempio e in questo modo ti basterà scrivere semplici pagine nel browser in modo
da non dover utilizzare il testo di linea, lo scriviamo nel browser e posso condividerlo
con te facilmente.
Ho tre sezioni h TMLC SS e Javascript.
Ancora una volta il codice stesso non è ciò che è importante qui.
Sono i concetti.
Diamo un'occhiata e in effetti mi libererò dei miei C-s.
Mi libererò del mio lavoro e vedrai cosa ci rimane.
Materiale strutturale bianco e nero semplice.
Sto specificando il mio contenuto in modo che queste siano le mie parole e sto avvolgendo quel contenuto in
elementi strutturali specifici così in H1.
E ancora questa è una di quelle volte.
Non preoccuparti della sintassi specifica.
Abbiamo così tanti video avanti che andranno nei dettagli e ognuno di questi.
Ma in pratica questo sta dicendo di fare un grande testo proprio qui.
Questo sta dicendo di fare una lista e di renderla una singola voce di elenco che dice Make me a bullet point e un'altra che dice
di farmi un altro punto elenco e quindi di fare un pulsante che dice Make me a button here.
Come puoi vedere, è proprio la struttura.
Quindi ora andiamo o ci vediamo di nuovo.
Puoi vedere cosa sto facendo qui, sto dicendo.
Rendi l'H-1 che è qui rendilo viola, così possiamo cambiarlo per essere verde e diventa verde e sto anche
dicendo che il pulsante ha un bordo con un colore di sfondo e un colore del testo di bianco in modo
che possiamo cambiare quello per essere il colore del testo verde.
È difficile vedere ciò che cambia il verde.
Posso dargli un bordo molto più grande di 20 pixel che potrebbe vedere lì in modo
che ci siano aggettivi e l'ultimo pezzo è il nostro Javascript.
Quindi senza javascript quel pulsante non fa nulla.
Ora quello che abbiamo fatto è scritto javascript che dice quando l'utente fa clic sul pulsante.
Scegli un colore casuale e cambia il colore dello sfondo con quel colore casuale in modo da poter fare clic e
ottenere un colore casuale.
Quindi, se mi sono liberato di questo javascript e ho provato a farlo di nuovo, non succede niente perché non
ho verbi.
Sono solo nomi e additivi.
Solo lo scheletro strutturale e un po 'di pelle sulla parte superiore mentre aggiungo il mio javascript in Posso aggiungere
la logica.
Quindi javascript è davvero importante.
Questo non è esattamente ciò che faresti più probabilmente su un vero sito di produzione, ma forse avresti un gioco
che potresti fare con il mio sweeper.
Questa potrebbe essere la chat di Facebook, potrebbe essere un modulo per iscriversi a una pagina.
Usa javascript per renderlo interattivo.
Quindi di nuovo ti incoraggio a giocare sulla penna del codice.
Devi collegarti a questo ed esplorare un po '.
Non c'è fretta di spostare il bordo del prossimo video.
Prova a cambiare alcuni di questi colori se vuoi.
Prova a cambiare un po 'di questo.
Non concentrarti sul codice.
È divertente scherzare, ma non c'è nessuna pressione per capire tutto questo.
A parte una panoramica di altissimo livello su ciò che HDMI fa ciò che C S fa e ciò che fa javascript.
Destra