1
00:00:00,360 --> 00:00:01,380
Ben tornato.

2
00:00:01,380 --> 00:00:04,380
Quindi in questo video ci concentreremo sul front-end.

3
00:00:04,620 --> 00:00:08,790
Impareremo su ogni TMLC valutato in javascript ad alto livello, non scriveremo

4
00:00:08,790 --> 00:00:12,530
ancora alcun codice, ma vedremo il codice per la prima volta.

5
00:00:13,140 --> 00:00:17,900
Quindi ci sono due grandi cose che vuoi sapere, qual è la differenza tra front e back end.

6
00:00:18,040 --> 00:00:23,970
E poi anche qual è la differenza tra H. M. S. SS e Javascript e quali sono i loro rispettivi ruoli.

7
00:00:25,080 --> 00:00:28,740
Quindi iniziamo discutendo di Front-End contro bacot.

8
00:00:28,860 --> 00:00:35,610
Quindi quando vado a un tavolo sai che diciamo Vai a Facebook, premo Facebook, punto com, premo invio.

9
00:00:35,610 --> 00:00:43,050
E se ti ricorderai del video su come funziona il web, creo una richiesta HTP che chiede Facebook

10
00:00:43,050 --> 00:00:50,850
dot com e che va al server di Facebook o eventualmente a Facebook, quindi decide quale pagina mandarmi indietro.

11
00:00:51,210 --> 00:00:56,760
Quindi, nel caso di Facebook, ha bisogno di capire quali immagini quali storie a quanti piace avere ciò che

12
00:00:56,760 --> 00:01:02,400
gli amici che ho, quali post sono in cima a tutte le mie immagini di alto profilo e tutte

13
00:01:02,400 --> 00:01:03,790
le cose che mi riguardano.

14
00:01:04,110 --> 00:01:10,200
E poi lo manda indietro a me manda me timide dice in javascript che il mio browser me

15
00:01:10,200 --> 00:01:10,870
lo mostra.

16
00:01:11,370 --> 00:01:16,980
semplicemente la differenza tra il fronte e il back-end, dove tutto ciò che rientro in quello che vedo nel browser è solo H.

17
00:01:16,980 --> 00:01:21,650
Quindi questo diagramma qui spiega M. S. Sì.

18
00:01:21,720 --> 00:01:24,190
E javascript solo la punta dell'iceberg.

19
00:01:24,270 --> 00:01:28,910
Ma è ciò che il mio browser vede che è il front end o il lato client.

20
00:01:29,250 --> 00:01:31,960
È costruito dal back-end.

21
00:01:32,370 --> 00:01:34,360
Tutto il resto che succede tutta la logica.

22
00:01:34,440 --> 00:01:40,680
Capire se sono loggato per capire chi sono i miei amici quali sono le foto che ho che post ho postato

23
00:01:40,680 --> 00:01:42,000
quante mi piace hanno.

24
00:01:42,000 --> 00:01:45,970
Tutto ciò deriva dal back-end o dalla logica lato server.

25
00:01:46,200 --> 00:01:48,000
Quindi puoi vedere che c'è molto di più qui.

26
00:01:48,030 --> 00:01:50,820
La tecnologia è che ci sono così tante scelte sul front end che non c'è.

27
00:01:50,850 --> 00:01:58,010
È sempre HTML CSS e javascript sul back-end hai linguaggi diversi come Python ph P

28
00:01:58,020 --> 00:02:01,180
Ruby javascript che è quello che useremo.

29
00:02:01,350 --> 00:02:06,570
Ci sono diversi database con postgrading e Mongo e divano D. B e Mya's.

30
00:02:06,570 --> 00:02:09,320
Q Bene e il seguito di Lightener's ci sono così tante scelte.

31
00:02:09,390 --> 00:02:11,010
Quindi è un po 'intimidatorio.

32
00:02:11,040 --> 00:02:15,060
Parleremo sicuramente molto di più sul back-end quando arriveremo a quell'unità.

33
00:02:15,060 --> 00:02:20,940
Ma per ora ricordati solo che il back-end è ciò che costruisce l'H a fondere e il C S che

34
00:02:20,940 --> 00:02:21,770
viene rimandato indietro.

35
00:02:21,780 --> 00:02:27,200
Facciamo quindi un esempio qui, quello che il mio ristorante preferito a San Francisco è chiamato lazy bear.

36
00:02:27,390 --> 00:02:28,890
Ecco la pagina del ristorante.

37
00:02:29,100 --> 00:02:31,580
Questa pagina è sempre la stessa.

38
00:02:31,620 --> 00:02:32,810
Voglio dire, potrebbe essere cambiato.

39
00:02:32,820 --> 00:02:34,790
Ma per essere cambiato.

40
00:02:34,920 --> 00:02:38,600
Lo sviluppatore deve entrare in H. T. importo e modificarlo manualmente.

41
00:02:38,610 --> 00:02:44,490
Quindi, in sostanza, aggiorno la pagina ogni volta che ottengo la stessa homepage. Ricevo le stesse domande frequenti

42
00:02:44,730 --> 00:02:46,540
nella stessa pagina di contatto.

43
00:02:46,580 --> 00:02:48,650
Non è una brutta cosa, ma non ha bisogno di cambiare.

44
00:02:48,660 --> 00:02:50,580
È solo un ristorante una pagina.

45
00:02:50,610 --> 00:02:55,520
Tuttavia la pagina di Yelp per lazy bear è dinamica.

46
00:02:55,530 --> 00:03:01,110
Cambia ogni volta che viene scritta una nuova recensione che verrà mostrata qui ogni

47
00:03:01,170 --> 00:03:05,070
volta e diciamo che in questo caso valutiamo 5 stelle.

48
00:03:05,070 --> 00:03:06,590
Ho letto una recensione.

49
00:03:07,170 --> 00:03:11,840
Probabilmente rifiuteresti la mia recensione, ma se avessi scritto una recensione sarebbe apparsa qui.

50
00:03:11,880 --> 00:03:17,000
Le cose sono dinamiche stanno accadendo in ogni momento quindi potrei dire oh questa è stata una recensione utile.

51
00:03:17,190 --> 00:03:18,700
Questa è stata una recensione divertente.

52
00:03:19,140 --> 00:03:23,510
E i voti che ho aggiunto sono archiviati in un database.

53
00:03:23,520 --> 00:03:27,060
Sta succedendo qualcosa, sto interagendo con questo ed è persistente.

54
00:03:27,060 --> 00:03:32,010
Quindi se aggiorno la pagina ora è diverso non molto diverso.

55
00:03:32,100 --> 00:03:36,350
Ma mentre prima non pensavo che fosse divertente ora si ricorda.

56
00:03:36,350 --> 00:03:37,740
Pensavo fosse divertente.

57
00:03:37,740 --> 00:03:44,250
Quindi, in pratica, il punto è quando vado in questa pagina. Chiedo per questo che Arel Yelp non invia sempre esattamente

58
00:03:44,250 --> 00:03:45,650
la stessa identica cosa.

59
00:03:45,840 --> 00:03:49,060
Scopriremo che l'utente ha effettuato l'accesso.

60
00:03:49,290 --> 00:03:52,600
Se è così, vogliamo mettere la sua immagine del profilo qui.

61
00:03:52,710 --> 00:03:53,980
Ha votato su qualsiasi cosa.

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

63
00:03:54,510 --> 00:03:57,990
OK assicurati di sapere che lo evidenziamo correttamente.

64
00:03:58,000 --> 00:03:59,260
Cambia il colore

65
00:03:59,310 --> 00:04:01,530
Non lasciarlo votare di nuovo e così via.

66
00:04:01,530 --> 00:04:05,420
E poi quello che costruisce per lui elsea dice e Javascript e lo rimanda indietro.

67
00:04:05,430 --> 00:04:10,150
Quindi un altro esempio di una pagina che è decisamente dinamica è Google News.

68
00:04:10,620 --> 00:04:15,330
Ogni volta che aggiorno intendo quasi ogni cinque minuti qualcosa cambia

69
00:04:15,330 --> 00:04:17,780
qui se è il tempo qui.

70
00:04:17,820 --> 00:04:19,260
Voglio dire, questi sono aggiornamenti dal vivo.

71
00:04:19,290 --> 00:04:23,190
Forse è la nuova storia ci sono novità che cambiano qualcosa.

72
00:04:23,190 --> 00:04:25,590
Questo è molto molto diverso ogni volta.

73
00:04:25,620 --> 00:04:28,840
Tuttavia questo è sempre lo stesso.

74
00:04:29,130 --> 00:04:31,020
Quindi, ancora una volta la differenza sono due cose.

75
00:04:31,020 --> 00:04:34,530
Uno è una pagina statica rispetto a una pagina dinamica.

76
00:04:34,530 --> 00:04:36,650
Entrambi sono pagine web.

77
00:04:36,660 --> 00:04:39,920
Entrambi sono TMLC e Javascript che ritornano.

78
00:04:40,110 --> 00:04:46,770
Uno cambierà in base a qualche tipo di codice lato server sul back-end.

79
00:04:47,340 --> 00:04:49,600
Quindi mi piace anche questa analogia con un ristorante.

80
00:04:49,740 --> 00:04:52,350
Quindi se vai magicamente in un ristorante ti siedi.

81
00:04:52,380 --> 00:04:58,230
Diciamo che ordini una bistecca quando ordini quella bistecca che stai facendo una richiesta che ritorna

82
00:04:58,230 --> 00:05:01,060
in cucina, la cucina prepara tutto per te.

83
00:05:01,080 --> 00:05:02,350
È una specie di back-end.

84
00:05:02,460 --> 00:05:05,710
Decide quali ingredienti ottenere quanto tempo per cucinarli.

85
00:05:05,970 --> 00:05:11,430
Tutto su un piatto e poi un cameriere o cameriera arriva e lo porta al tuo tavolo.

86
00:05:11,430 --> 00:05:12,480
Quindi è molto simile.

87
00:05:12,480 --> 00:05:16,880
Fai una richiesta lo chef o la cucina è il server.

88
00:05:17,070 --> 00:05:22,530
e alla fine viene rispedito al tuo tavolo, che sei tu dal lato del cliente.

89
00:05:22,530 --> 00:05:26,040
Questa parte dell'iceberg sta preparando tutto per cucinarlo mettendolo insieme

90
00:05:27,290 --> 00:05:29,840
Quindi ora abbattiamo quei tre pezzi invecchiati.

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

92
00:05:32,390 --> 00:05:35,310
Quindi entreremo in molti dettagli su ciascuno di questi componenti.

93
00:05:35,330 --> 00:05:39,420
Ci sono sezioni e unità separate ma HDMI inizierà qui.

94
00:05:39,530 --> 00:05:43,760
Si basa fondamentalmente sul linguaggio di marcatura dell'ipertesto.

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

96
00:05:44,880 --> 00:05:47,900
E questo è ciò che è realmente accaduto nei primi giorni di Internet.

97
00:05:47,960 --> 00:05:53,610
Non c'era un modo standardizzato per inviare informazioni e inviare documenti.

98
00:05:53,720 --> 00:05:59,810
Quindi inizialmente sai che Internet è stato utilizzato per inviare comunicazioni tra università e college e

99
00:05:59,820 --> 00:06:01,510
anche come strumento militare.

100
00:06:01,520 --> 00:06:06,040
Quindi diciamo che volevo inviare un messaggio che volevo inviare a un amico.

101
00:06:06,560 --> 00:06:10,160
Devo dire OK, questo è audace.

102
00:06:10,250 --> 00:06:12,170
Questi sono piccoli punti elenco.

103
00:06:12,260 --> 00:06:14,770
Ho del testo e delle citazioni su questo.

104
00:06:14,770 --> 00:06:19,240
Ho bisogno di un modo per abbatterlo e descriverlo per inviarlo a qualcun altro.

105
00:06:19,580 --> 00:06:28,230
E la soluzione era HMO, quindi HMO è in realtà la cosa più semplice che impareremo a non dire che è folle

106
00:06:28,220 --> 00:06:35,390
facile, ma è molto semplice in quanto descriviamo solo ciò che vogliamo e ciò che scrivi è ciò

107
00:06:35,390 --> 00:06:36,450
che ottieni.

108
00:06:36,440 --> 00:06:39,800
Quindi HMO viene spesso definito come il nome di una pagina web.

109
00:06:39,810 --> 00:06:40,830
È la struttura.

110
00:06:40,820 --> 00:06:48,360
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

111
00:06:48,360 --> 00:06:50,570
titolo leggermente più piccolo appena sotto quello.

112
00:06:50,570 --> 00:06:58,350
stile di una pagina che ho bisogno di HVM come usare la valutazione CSSA da sola non fa assolutamente nulla.

113
00:06:58,340 --> 00:07:04,720
Ti permette di descrivere la struttura di una pagina CSSA d'altra parte è come descriviamo lo

114
00:07:04,740 --> 00:07:10,540
Ogni singola pagina web ha HMO alcune pagine web non hanno C S S Alcuni non hanno javascript.

115
00:07:10,540 --> 00:07:11,620
Non è obbligatorio

116
00:07:11,700 --> 00:07:18,350
H Tim L è il modo in cui i fogli di stile a cascata apprenderanno esattamente da dove viene quel nome e un

117
00:07:18,360 --> 00:07:18,990
po '.

118
00:07:19,010 --> 00:07:26,030
Fondamentalmente sono gli stili esistenti HMO in modo da poter dire cose come rendere tutti quei punti elenco verde.

119
00:07:26,150 --> 00:07:32,980
Dare alla prima immagine un bordo giallo per dare all'ultima immagine un grande bordo rosa con dei trattini.

120
00:07:33,000 --> 00:07:39,110
Spesso è considerato l'aggettivo di una pagina web o qualcuno direbbe la pelle all'H. T. qui è javascript.

121
00:07:39,360 --> 00:07:44,000
uno scheletro maschile e l'ultimo pezzo

122
00:07:44,000 --> 00:07:49,170
Javascript è probabilmente la cosa più complessa tra queste tre.

123
00:07:49,380 --> 00:07:52,940
È come aggiungiamo Bahjat e l'interattività a una pagina.

124
00:07:53,210 --> 00:07:58,940
Quindi con noi e Javascript possiamo creare un sito di bell'aspetto ma non faremo nulla, in realtà possiamo

125
00:07:58,940 --> 00:08:02,830
fare semplici animazioni, ma possiamo caricare i dati da qualche altra parte.

126
00:08:02,830 --> 00:08:08,150
Non puoi rendere le cose interattive non possiamo aggiungere la logica o avere un gioco con javascript, possiamo

127
00:08:08,150 --> 00:08:13,650
usare un po 'dell'esempio che ho qui o fare dei calcoli matematici quando l'utente fa clic sul caricamento.

128
00:08:13,640 --> 00:08:15,900
I nuovi dati di Twitter ricevono il tempo corrente.

129
00:08:15,890 --> 00:08:17,640
Gli attuali punteggi NFL.

130
00:08:17,730 --> 00:08:25,730
Se h tim L è il nome C Ss è l'aggettivo allora javascript è i verbi sono le azioni su una pagina.

131
00:08:26,330 --> 00:08:33,400
Quindi ho tutto ben racchiuso in un codice e quindi la penna del codice è uno spettacolo meraviglioso.

132
00:08:33,410 --> 00:08:39,160
Non useremo molto ma perché non abbiamo davvero iniziato a scrivere H-2 su LCS e Javascript.

133
00:08:39,620 --> 00:08:45,090
Userò questo come esempio e in questo modo ti basterà scrivere semplici pagine nel browser in modo

134
00:08:45,290 --> 00:08:50,330
da non dover utilizzare il testo di linea, lo scriviamo nel browser e posso condividerlo

135
00:08:50,340 --> 00:08:51,260
con te facilmente.

136
00:08:51,260 --> 00:08:54,900
Ho tre sezioni h TMLC SS e Javascript.

137
00:08:54,980 --> 00:08:58,100
Ancora una volta il codice stesso non è ciò che è importante qui.

138
00:08:58,130 --> 00:08:59,650
Sono i concetti.

139
00:09:00,050 --> 00:09:06,710
Diamo un'occhiata e in effetti mi libererò dei miei C-s.

140
00:09:06,870 --> 00:09:11,280
Mi libererò del mio lavoro e vedrai cosa ci rimane.

141
00:09:11,270 --> 00:09:14,490
Materiale strutturale bianco e nero semplice.

142
00:09:14,510 --> 00:09:21,890
Sto specificando il mio contenuto in modo che queste siano le mie parole e sto avvolgendo quel contenuto in

143
00:09:21,890 --> 00:09:24,270
elementi strutturali specifici così in H1.

144
00:09:24,530 --> 00:09:26,530
E ancora questa è una di quelle volte.

145
00:09:26,580 --> 00:09:28,730
Non preoccuparti della sintassi specifica.

146
00:09:28,910 --> 00:09:32,920
Abbiamo così tanti video avanti che andranno nei dettagli e ognuno di questi.

147
00:09:33,050 --> 00:09:36,910
Ma in pratica questo sta dicendo di fare un grande testo proprio qui.

148
00:09:36,980 --> 00:09:43,010
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

149
00:09:43,010 --> 00:09:47,510
di farmi un altro punto elenco e quindi di fare un pulsante che dice Make me a button here.

150
00:09:47,540 --> 00:09:50,950
Come puoi vedere, è proprio la struttura.

151
00:09:50,960 --> 00:09:54,110
Quindi ora andiamo o ci vediamo di nuovo.

152
00:09:54,120 --> 00:09:55,970
Puoi vedere cosa sto facendo qui, sto dicendo.

153
00:09:56,120 --> 00:10:03,750
Rendi l'H-1 che è qui rendilo viola, così possiamo cambiarlo per essere verde e diventa verde e sto anche

154
00:10:04,490 --> 00:10:12,830
dicendo che il pulsante ha un bordo con un colore di sfondo e un colore del testo di bianco in modo

155
00:10:13,700 --> 00:10:17,730
che possiamo cambiare quello per essere il colore del testo verde.

156
00:10:17,780 --> 00:10:20,020
È difficile vedere ciò che cambia il verde.

157
00:10:20,120 --> 00:10:26,970
Posso dargli un bordo molto più grande di 20 pixel che potrebbe vedere lì in modo

158
00:10:26,960 --> 00:10:31,610
che ci siano aggettivi e l'ultimo pezzo è il nostro Javascript.

159
00:10:31,970 --> 00:10:35,420
Quindi senza javascript quel pulsante non fa nulla.

160
00:10:35,450 --> 00:10:41,180
Ora quello che abbiamo fatto è scritto javascript che dice quando l'utente fa clic sul pulsante.

161
00:10:41,340 --> 00:10:50,030
Scegli un colore casuale e cambia il colore dello sfondo con quel colore casuale in modo da poter fare clic e

162
00:10:50,030 --> 00:10:51,640
ottenere un colore casuale.

163
00:10:52,460 --> 00:10:57,800
Quindi, se mi sono liberato di questo javascript e ho provato a farlo di nuovo, non succede niente perché non

164
00:10:57,810 --> 00:10:58,440
ho verbi.

165
00:10:58,430 --> 00:11:00,410
Sono solo nomi e additivi.

166
00:11:00,450 --> 00:11:05,840
Solo lo scheletro strutturale e un po 'di pelle sulla parte superiore mentre aggiungo il mio javascript in Posso aggiungere

167
00:11:05,850 --> 00:11:06,520
la logica.

168
00:11:06,840 --> 00:11:08,300
Quindi javascript è davvero importante.

169
00:11:08,370 --> 00:11:14,100
Questo non è esattamente ciò che faresti più probabilmente su un vero sito di produzione, ma forse avresti un gioco

170
00:11:14,100 --> 00:11:16,110
che potresti fare con il mio sweeper.

171
00:11:16,130 --> 00:11:19,800
Questa potrebbe essere la chat di Facebook, potrebbe essere un modulo per iscriversi a una pagina.

172
00:11:19,860 --> 00:11:22,080
Usa javascript per renderlo interattivo.

173
00:11:22,280 --> 00:11:25,510
Quindi di nuovo ti incoraggio a giocare sulla penna del codice.

174
00:11:25,640 --> 00:11:28,340
Devi collegarti a questo ed esplorare un po '.

175
00:11:28,350 --> 00:11:30,280
Non c'è fretta di spostare il bordo del prossimo video.

176
00:11:30,290 --> 00:11:32,960
Prova a cambiare alcuni di questi colori se vuoi.

177
00:11:32,960 --> 00:11:34,590
Prova a cambiare un po 'di questo.

178
00:11:34,640 --> 00:11:36,190
Non concentrarti sul codice.

179
00:11:36,290 --> 00:11:40,020
È divertente scherzare, ma non c'è nessuna pressione per capire tutto questo.

180
00:11:40,040 --> 00:11:46,060
A parte una panoramica di altissimo livello su ciò che HDMI fa ciò che C S fa e ciò che fa javascript.

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