1
00:00:00,360 --> 00:00:01,380
Welkom terug.

2
00:00:01,380 --> 00:00:04,380
Dus in deze video gaan we focussen op de front-end.

3
00:00:04,620 --> 00:00:12,530
We gaan om te leren over elke TMLC in javascript beoordeeld op een hoog niveau dat we niet van plan om nog echt te schrijven elke code, maar we zullen het zien van de code voor de eerste keer.

4
00:00:13,140 --> 00:00:17,900
Dus er zijn twee grote dingen die je wilt weten en dat is wat is het verschil tussen de voor- en achterkant.

5
00:00:18,040 --> 00:00:24,500
En dan ook nog wat is het verschil tussen H.M.S. SS en Javascript en wat zijn hun respectieve rollen.

6
00:00:25,080 --> 00:00:28,740
Dus laten we beginnen met het bespreken van Front-End versus Bacot.

7
00:00:28,860 --> 00:00:35,610
Dus toen ik naar een bekende laten we zeggen Ga naar Facebook ik raakte Facebook dot com ik druk op enter.

8
00:00:35,610 --> 00:00:51,050
En als je terug naar de video zult herinneren over hoe het web werkt maak ik een HTP verzocht te Facebook dot com en dat gaat naar Facebook server of eventueel Facebook beslist dan welke pagina om me terug te sturen.

9
00:00:51,210 --> 00:01:03,790
Dus in het geval van Facebook het nodig heeft om erachter te komen wat afbeeldingen wat verhalen hoeveel wil ze hebben wat vrienden die ik heb wat berichten aan de top van al mijn instellingen high profile foto alle spullen die betrekking heeft op mij.

10
00:01:04,110 --> 00:01:10,870
En dan stuurt het terug naar me stuurt me h tim ELSEA zegt in javascript mijn browser geeft dat voor mij.

11
00:01:11,370 --> 00:01:21,650
Dus dit diagram hier soort net verklaart het verschil tussen de voor- en de achterkant, waar alles wat ik terug in die ik zie in de browser is gewoon H.M.S. Ja.

12
00:01:21,720 --> 00:01:24,190
En javascript slechts het topje van de ijsberg.

13
00:01:24,270 --> 00:01:28,910
Maar het is wat mijn browser ziet is de front-end of de client.

14
00:01:29,250 --> 00:01:31,960
Het is gebouwd door de backend.

15
00:01:32,370 --> 00:01:34,360
Al het andere dat alle logica gebeurt.

16
00:01:34,440 --> 00:01:42,000
Uitzoeken als ik ingelogd in het uitzoeken wie mijn vrienden zijn wat foto's die ik heb wat berichten die ik heb gepost hoeveel wil ze hebben.

17
00:01:42,000 --> 00:01:45,970
Dat alles komt uit de backend of de server side logica.

18
00:01:46,200 --> 00:01:48,000
Dus je kunt zien dat er veel meer hier.

19
00:01:48,030 --> 00:01:50,820
De technologie is er zo veel keuzes op de voorkant is er niet.

20
00:01:50,850 --> 00:02:01,180
Het is altijd HTML CSS en Javascript op de back-end je hebt verschillende talen zoals Python ph P Ruby javascript eigenlijk dat is wat we gaan gebruiken.

21
00:02:01,350 --> 00:02:06,570
Er zijn verschillende databases je hebt postgrads en Mongo en bank D.B en Mya's.

22
00:02:06,570 --> 00:02:09,320
Q Nou en sequel Lightener's er zo veel keuzes.

23
00:02:09,390 --> 00:02:11,010
Dus het is een beetje intimiderend.

24
00:02:11,040 --> 00:02:15,060
We gaan zeker praten veel meer over de back-end als we in die eenheid.

25
00:02:15,060 --> 00:02:21,770
Maar voor nu alleen niet vergeten dat de back-end is wat bouwt de H te smelten en de C-S, dat wordt teruggestuurd.

26
00:02:21,780 --> 00:02:27,200
Dus laten we eens een voorbeeld hier wat mijn favoriete restaurant in San Francisco wordt luie beer genoemd.

27
00:02:27,390 --> 00:02:28,890
Hier is het restaurant pagina.

28
00:02:29,100 --> 00:02:31,580
Deze pagina is altijd hetzelfde.

29
00:02:31,620 --> 00:02:32,810
Ik bedoel, het zou kunnen worden veranderd.

30
00:02:32,820 --> 00:02:34,790
Maar om deze te veranderen.

31
00:02:34,920 --> 00:02:38,600
De ontwikkelaar heeft in de H.T. te gaan bedragen en het handmatig veranderen.

32
00:02:38,610 --> 00:02:46,540
Dus eigenlijk ik Vernieuw de pagina elke keer als ik krijg het zelfde homepage krijg ik dezelfde veelgestelde vragen hetzelfde contact met ons op pagina.

33
00:02:46,580 --> 00:02:48,650
Dat is geen slechte zaak, maar het hoeft niet te veranderen.

34
00:02:48,660 --> 00:02:50,580
Het is gewoon een restaurant een pagina.

35
00:02:50,610 --> 00:02:55,520
Echter, de Yelp pagina voor luie beer is dynamisch.

36
00:02:55,530 --> 00:03:05,070
Er verandert dus elke keer een nieuwe recensie is geschreven dat het gaat om opdagen hier elke keer en laten we zeggen in dit geval laten we waarderen het 5 sterren.

37
00:03:05,070 --> 00:03:06,590
Ik las een recensie.

38
00:03:07,170 --> 00:03:11,840
Nou je waarschijnlijk afwijzen mijn beoordeling, maar als ik schreef een review zou het hier opdagen.

39
00:03:11,880 --> 00:03:17,000
Dingen zijn dynamisch ze gebeuren te allen tijde dus ik kon zeggen oh dat was een nuttige beoordeling.

40
00:03:17,190 --> 00:03:18,700
Dat was een grappig beoordeling.

41
00:03:19,140 --> 00:03:23,510
En degenen stemmen die ik heb toegevoegd, worden opgeslagen in een database.

42
00:03:23,520 --> 00:03:27,060
Er gebeurt iets dat ik de interactie met dit en het voortduurt.

43
00:03:27,060 --> 00:03:32,010
Dus als ik de pagina nu vernieuwen is het anders niet heel anders.

44
00:03:32,100 --> 00:03:36,350
Maar terwijl ik wist niet dat dit grappig was nu onthoudt.

45
00:03:36,350 --> 00:03:37,740
Ik dacht dat het grappig was.

46
00:03:37,740 --> 00:03:45,650
Dus eigenlijk het punt is als ik naar deze pagina Ik vraag om dit te Arel Yelp niet alleen altijd precies hetzelfde terug te sturen.

47
00:03:45,840 --> 00:03:49,060
Het gaat om erachter te komen OK is de gebruiker ingelogd.

48
00:03:49,290 --> 00:03:52,600
Als dus we willen zijn profiel foto hier plaatsen.

49
00:03:52,710 --> 00:03:53,980
Heeft hij op iets gestemd.

50
00:03:54,000 --> 00:03:54,470
Ja.

51
00:03:54,510 --> 00:03:57,990
OK laten we ervoor zorgen dat je weet dat we de juiste wijze te markeren.

52
00:03:58,000 --> 00:03:59,260
Verander de kleur.

53
00:03:59,310 --> 00:04:01,530
Laat hem niet opnieuw en ga zo maar door stemmen.

54
00:04:01,530 --> 00:04:05,420
En dan is dat construeert hem ELSEA zegt en Javascript en stuurt het terug.

55
00:04:05,430 --> 00:04:10,150
Dus een ander voorbeeld van een pagina die is zeker dynamiek is Google Nieuws.

56
00:04:10,620 --> 00:04:17,780
Elke keer als ik refresh bedoel ik bijna elke vijf minuten iets verandert hier of het nu is het weer hier NFL scores.

57
00:04:17,820 --> 00:04:19,260
Ik bedoel, dit zijn live-updating.

58
00:04:19,290 --> 00:04:23,190
Misschien is het de nieuwe verhaal Er is breaking news iets verandert.

59
00:04:23,190 --> 00:04:25,590
Dit is heel erg elke keer anders.

60
00:04:25,620 --> 00:04:28,840
Dit is echter altijd hetzelfde.

61
00:04:29,130 --> 00:04:31,020
Dus nogmaals het verschil is twee dingen.

62
00:04:31,020 --> 00:04:34,530
Een daarvan is statische pagina versus een dynamische pagina.

63
00:04:34,530 --> 00:04:36,650
Beiden zijn webpagina's.

64
00:04:36,660 --> 00:04:39,920
Beiden zijn TMLC s s en Javascript terugkomen.

65
00:04:40,110 --> 00:04:46,770
Men gaat veranderen op basis off van een soort van server-side code iets op de back-end.

66
00:04:47,340 --> 00:04:49,600
Dus ik hou ook van deze analogie van een restaurant.

67
00:04:49,740 --> 00:04:52,350
Dus als je op magische wijze naar een restaurant dat je gaat zitten.

68
00:04:52,380 --> 00:05:01,060
Laten we zeggen dat je een biefstuk bestellen als je dat biefstuk je het maken van een verzoek die teruggaat naar de keuken de keuken bereidt alles voor je.

69
00:05:01,080 --> 00:05:02,350
Dat is een soort van de back-end.

70
00:05:02,460 --> 00:05:05,710
Zij beslist welke ingrediënten te krijgen hoe lang ze koken.

71
00:05:05,970 --> 00:05:11,430
Alles op een plaat en vervolgens een ober of serveerster komt en brengt die naar uw tafel.

72
00:05:11,430 --> 00:05:12,480
Dus het is zeer vergelijkbaar.

73
00:05:12,480 --> 00:05:16,880
Je maakt een verzoek van de chef-kok of de keuken is de server.

74
00:05:17,070 --> 00:05:26,040
Dit deel van de ijsberg dat alles koken zet het samen en dan eindelijk het wordt teruggestuurd naar uw tafel, die je op de client wordt verzinnen.

75
00:05:27,290 --> 00:05:29,840
Dus laten we nu breken deze drie stukken hem in de leeftijd.

76
00:05:29,940 --> 00:05:31,610
Zegt in Javascript.

77
00:05:32,390 --> 00:05:35,310
Dus we gaan in een veel detail op elk van deze onderdelen om te gaan.

78
00:05:35,330 --> 00:05:39,420
Er zijn aparte afdelingen en eenheden, maar HDMI zal daar beginnen.

79
00:05:39,530 --> 00:05:43,760
Staat voor HyperText Markup Language principe.

80
00:05:43,760 --> 00:05:44,870
Stel je voor dat.

81
00:05:44,880 --> 00:05:47,900
En dit is wat eigenlijk gebeurde in de vroege dagen van het internet.

82
00:05:47,960 --> 00:05:53,610
Er was geen gestandaardiseerde manier om informatie te sturen en om documenten te verzenden.

83
00:05:53,720 --> 00:06:01,510
Dus in eerste instantie weet dat je het internet werd gebruikt om te sturen om te communiceren tussen universiteiten en hogescholen en ook als een militair instrument.

84
00:06:01,520 --> 00:06:06,040
Dus laten we zeggen dat ik wilde een wilde ik dit sturen naar een vriend te sturen.

85
00:06:06,560 --> 00:06:10,160
Ik moet zeggen dat dit OK is vet.

86
00:06:10,250 --> 00:06:12,170
Dit zijn kleine bullet points.

87
00:06:12,260 --> 00:06:14,770
Ik heb een aantal teksten en citaten rond deze kreeg.

88
00:06:14,770 --> 00:06:19,240
Ik heb een manier om af te breken en die beschrijven te sturen naar iemand anders.

89
00:06:19,580 --> 00:06:36,450
En de oplossing was HMO dus HMO is het eigenlijk de makkelijkste ding dat we gaan leren om niet te zeggen dat het is krankzinnig eenvoudig, maar het is heel simpel in dat we net beschrijven wat we willen en wat je schrijft is wat je krijgt.

90
00:06:36,440 --> 00:06:39,800
Dus HMO wordt vaak aangeduid als het zelfstandig naamwoord is van een webpagina.

91
00:06:39,810 --> 00:06:40,830
Het is de structuur.

92
00:06:40,820 --> 00:06:50,570
Sommige mensen zeggen dat het skelet in feite zeggen dat een afbeelding te plaatsen hier een kogel punt hier zet hier een kop zet een iets kleinere rubriek net onder dat.

93
00:06:50,570 --> 00:07:04,720
Hiermee kunt u de structuur van een pagina CSSA aan de andere kant beschrijven het is hoe we de stijl van een pagina moet ik HVM het gebruik van de te beoordelen CSSA op zich niet echt iets te doen op alle te beschrijven.

94
00:07:04,740 --> 00:07:10,540
Elke webpagina heeft HMO sommige webpagina's hebben geen C S S Sommige hebben geen javascript.

95
00:07:10,540 --> 00:07:11,620
Het is niet verplicht.

96
00:07:11,700 --> 00:07:18,990
H Tim L is zo c s s cascading style sheets precies leren waar die naam vandaan komt en een beetje.

97
00:07:19,010 --> 00:07:26,030
Eigenlijk is het stijlen bestaande HMO, zodat je kunt zeggen dingen willen maken al die bullet points groen.

98
00:07:26,150 --> 00:07:32,980
Geef het eerste beeld een gele rand geven de laatste afbeelding van een grote roze grens met streepjes doorheen.

99
00:07:33,000 --> 00:07:44,000
Het wordt vaak beschouwd als de bijvoeglijke naamwoorden van een webpagina of sommige mensen zouden de huid aan de H.T. zeggen een mannelijke skelet en het laatste stuk is hier javascript.

100
00:07:44,000 --> 00:07:49,170
Javascript is waarschijnlijk het is zeker de meest complexe ding uit deze drie.

101
00:07:49,380 --> 00:07:52,940
Het is hoe we Bahjat en interactiviteit aan een pagina toe te voegen.

102
00:07:53,210 --> 00:08:02,830
Dus met ons en Javascript kunnen we een mooi uitziende website te maken, maar het is niet van plan om iets echt kunnen we eenvoudige animaties doen, maar we kunnen de gegevens van ergens anders te laden.

103
00:08:02,830 --> 00:08:13,650
U kunt geen dingen interactieve we kunnen niet de logica toe te voegen of een spel met javascript we een aantal van het voorbeeld dat ik hier heb kunnen gebruiken of te doen wat wiskunde van kleur veranderen wanneer de gebruiker klikt belasting te maken.

104
00:08:13,640 --> 00:08:15,900
Nieuwe gegevens van Twitter te krijgen van de huidige weersomstandigheden.

105
00:08:15,890 --> 00:08:17,640
De huidige NFL scores.

106
00:08:17,730 --> 00:08:26,230
Als h tim L is de zelfstandige naamwoorden C Ss is de bijvoeglijke naamwoorden dan javascript is de werkwoorden zijn de acties op een pagina.

107
00:08:26,330 --> 00:08:33,400
Dus ik heb dit allemaal verpakt keurig in een code en dus code pen is een prachtig gezicht.

108
00:08:33,410 --> 00:08:39,460
We gaan niet om een ​​heleboel te gebruiken, maar omdat we nog niet echt begonnen met het schrijven H-2 hem LCS en Javascript.

109
00:08:39,620 --> 00:08:51,260
Ik ga om dit te gebruiken als een voorbeeld en wat dit doet het laat je gewoon schrijven eenvoudige pagina's in de browser, zodat we niet hoeven te gebruiken van de regel tekst schrijven we het gewoon in de browser en ik kan het zeer met u delen gemakkelijk.

110
00:08:51,260 --> 00:08:54,900
Ik heb drie secties h TMLC SS en Javascript.

111
00:08:54,980 --> 00:08:58,100
Opnieuw is de code zelf is niet wat belangrijk hier.

112
00:08:58,130 --> 00:08:59,650
Het is de concepten.

113
00:09:00,050 --> 00:09:06,710
Dus laten we eens een kijkje nemen en ik ga om daadwerkelijk te ontdoen van mijn C-s ons.

114
00:09:06,870 --> 00:09:11,280
Ik ga om zich te ontdoen van mijn banen te krijgen en je zult zien wat we vertrokken met.

115
00:09:11,270 --> 00:09:14,490
Effen zwart en wit structureel materiaal.

116
00:09:14,510 --> 00:09:24,270
Ik ben mijn inhoud te specificeren, zodat dit zijn mijn woorden en ik ben het verpakken van die inhoud in bepaalde structurele elementen zo in H1.

117
00:09:24,530 --> 00:09:26,530
En ook dit is een van die momenten.

118
00:09:26,580 --> 00:09:28,730
Maak je geen zorgen over de specifieke syntaxis.

119
00:09:28,910 --> 00:09:32,920
We hebben zo veel video's vooruit die in detail te gaan en elk van deze.

120
00:09:33,050 --> 00:09:36,910
Maar in principe is deze zegt maken grote tekst hier.

121
00:09:36,980 --> 00:09:47,510
Dit zegt een lijst maken en maken het individuele item in de lijst die zegt: Maak me een stip en een andere die zegt dat maakt me nog een puntje en vervolgens een knop met de tekst Maak me een knop hier.

122
00:09:47,540 --> 00:09:50,950
Zoals je kunt zien dus op zijn eigen, dat is gewoon de structuur.

123
00:09:50,960 --> 00:09:54,110
Dus nu laten we gaan op of bekijk ons ​​terug in.

124
00:09:54,120 --> 00:09:55,970
Je kunt zien wat ik doe hier wat ik zeg.

125
00:09:56,120 --> 00:10:17,730
Maak de H-1, die is hier te maken is paars dus we kunnen veranderen om groen te zijn en het verandert naar groen en ik ben ook zeggen te maken op de knop een grens hebben een achtergrond kleur en een tekstkleur wit, zodat we kunnen veranderen dat voor groene tekstkleur zijn.

126
00:10:17,780 --> 00:10:20,020
Het is moeilijk om te zien wat dat de groene verandert.

127
00:10:20,120 --> 00:10:31,610
Ik kan geven een veel grotere rand 20 pixels ze daar kon zien, zodat er bijvoeglijke naamwoorden en het laatste stuk is onze Javascript.

128
00:10:31,970 --> 00:10:35,420
Dus zonder javascript die knop doet niets.

129
00:10:35,450 --> 00:10:41,180
Nu wat we hebben gedaan is geschreven javascript die zegt dat wanneer de gebruiker op de knop klikt.

130
00:10:41,340 --> 00:10:51,640
Kies een willekeurige kleur en verander de achtergrondkleur hier om die willekeurige kleur, zodat ik kan klikken en ik krijg een willekeurige kleur.

131
00:10:52,460 --> 00:10:58,440
Dus als ik verlost van dit javascript en ik heb geprobeerd om dat opnieuw te doen niets gebeurt, want ik heb geen werkwoorden.

132
00:10:58,430 --> 00:11:00,410
Het is gewoon naamwoorden en additieven.

133
00:11:00,450 --> 00:11:06,520
Alleen de structurele skelet en een beetje van de huid op de top als ik mijn javascript ik de logica kan toevoegen.

134
00:11:06,840 --> 00:11:08,300
Dus javascript echt belangrijk.

135
00:11:08,370 --> 00:11:16,110
Dit is niet precies wat je waarschijnlijk zou doen op een echte productie-site, maar je zou misschien een spel dat je misschien mijnenveger te maken.

136
00:11:16,130 --> 00:11:19,800
Dit kan Facebook chat kan een formulier aan te melden voor een pagina zijn.

137
00:11:19,860 --> 00:11:22,080
U gebruikt javascript om het interactief te maken.

138
00:11:22,280 --> 00:11:25,510
Dus nogmaals, ik moedig u aan om rond te spelen op de code pen.

139
00:11:25,640 --> 00:11:28,340
Je moet om te linken naar deze en ontdek een beetje.

140
00:11:28,350 --> 00:11:30,280
Er is geen haast om naar de rand van de volgende video.

141
00:11:30,290 --> 00:11:32,960
Probeer het veranderen van een aantal van deze kleuren als je wilt.

142
00:11:32,960 --> 00:11:34,590
Probeer het veranderen van een aantal van deze.

143
00:11:34,640 --> 00:11:36,190
Richt je niet op de code.

144
00:11:36,290 --> 00:11:40,020
Het is gewoon leuk om mee te spelen, maar er is geen druk om het even welk van dit te begrijpen.

145
00:11:40,040 --> 00:11:46,060
Afgezien van een zeer hoog niveau overzicht van wat HDMI doet wat C S doet en wat javascript doet.