1
00:00:00,360 --> 00:00:01,380
Witamy spowrotem.

2
00:00:01,380 --> 00:00:04,380
Więc w tym filmie mamy zamiar skupić się na przednim końcu.

3
00:00:04,620 --> 00:00:12,530
Jedziemy, aby dowiedzieć się o sobie TMLC oceniana w javascript na wysokim poziomie nie będziemy rzeczywiście napisać jeszcze żadnego kodu, ale będziemy widząc kodu po raz pierwszy.

4
00:00:13,140 --> 00:00:17,900
Więc tam dwa duże rzeczy, które chcesz wiedzieć, co jest, co różni się pomiędzy przednim i tylnym końcu.

5
00:00:18,040 --> 00:00:24,500
I wtedy też jaka jest różnica między H.M.S. SS oraz Javascript i jakie są ich role.

6
00:00:25,080 --> 00:00:28,740
Więc zacznijmy od omówienia Czołowy kontra Bacot.

7
00:00:28,860 --> 00:00:35,610
Więc kiedy iść do wiesz powiedzmy Przejdź do Facebooka uderzę Facebook dot com i naciśnij Enter.

8
00:00:35,610 --> 00:00:51,050
A jeśli będziesz pamiętać, powrót do filmu o tym, jak działa web tworzę wniosek HTP prośbą o Facebooku kropka com i że idzie do serwera Facebooka lub ewentualnie Facebook następnie decyduje, jaka strona wysłać mnie z powrotem.

9
00:00:51,210 --> 00:01:03,790
Tak więc w przypadku Facebook musi dowiedzieć się, jakie obrazy jakie historie, ile głosów mają co mam przyjaciół, co posty są na szczycie wszystkich moich ustawień zdjęcia wysokiej profil Wszystkie rzeczy, które odnosi się do mnie.

10
00:01:04,110 --> 00:01:10,870
A następnie wysyła go do mnie wysyła mnie h tim elsea mówi w javascript moja przeglądarka wyświetla, że ​​dla mnie.

11
00:01:11,370 --> 00:01:21,650
Więc ten schemat tutaj niby właśnie wyjaśnia różnicę między przednim i tylnym końcu, gdzie wszystko, co mogę wrócić, że widzę w przeglądarce jest tylko H.M.S. Tak.

12
00:01:21,720 --> 00:01:24,190
I javascript tylko wierzchołek góry lodowej.

13
00:01:24,270 --> 00:01:28,910
Ale to, co moja przeglądarka widzi to przód lub po stronie klienta.

14
00:01:29,250 --> 00:01:31,960
Jest skonstruowany przez backend.

15
00:01:32,370 --> 00:01:34,360
Wszystko inne, co dzieje się cały logiki.

16
00:01:34,440 --> 00:01:42,000
Zastanawianie się, czy jestem zalogowany dowiedzieć się, kim są moi przyjaciele są zdjęcia co mam, co posty mam napisali ile głosów mają.

17
00:01:42,000 --> 00:01:45,970
Wszystko to pochodzi z backend lub logiki po stronie serwera.

18
00:01:46,200 --> 00:01:48,000
Więc widać, istnieje wiele więcej tutaj.

19
00:01:48,030 --> 00:01:50,820
Technologia ta jest tak wiele możliwości wyboru na przednim końcu nie jest.

20
00:01:50,850 --> 00:02:01,180
To zawsze CSS HTML i JavaScript w tylnym końcu pan dostał w różnych językach, takich jak Python ph P Ruby javascript rzeczywistości, która jest co będziemy używać.

21
00:02:01,350 --> 00:02:06,570
Jest różnych baz danych masz dobry postgrads i Mongo i kanapy D.B i Mya.

22
00:02:06,570 --> 00:02:09,320
P No i sequel Lightener tam jest tak wiele możliwości.

23
00:02:09,390 --> 00:02:11,010
Więc to trochę przytłaczający.

24
00:02:11,040 --> 00:02:15,060
Idziemy na pewno mówić dużo więcej o tylnym końcu, gdy mamy do tej jednostki.

25
00:02:15,060 --> 00:02:21,770
Ale teraz po prostu pamiętać, że tylny koniec co konstruuje H do stopienia i C S, który jest wysyłany z powrotem.

26
00:02:21,780 --> 00:02:27,200
Więc weźmy przykład tutaj co moja ulubiona restauracja w San Francisco nazywa leniwy miś.

27
00:02:27,390 --> 00:02:28,890
Oto strona restauracji.

28
00:02:29,100 --> 00:02:31,580
Ta strona jest zawsze taki sam.

29
00:02:31,620 --> 00:02:32,810
Znaczy to może zostać zmienione.

30
00:02:32,820 --> 00:02:34,790
Jednak aby nie ulec zmianie.

31
00:02:34,920 --> 00:02:38,600
Deweloper musi iść do H.T. wyniosą i ręcznie zmienić.

32
00:02:38,610 --> 00:02:46,540
Więc zasadniczo odświeżyć stronę za każdym razem dostaję tę samą stronę uzyskać ten sam często zadawane pytania samo o kontakt strona.

33
00:02:46,580 --> 00:02:48,650
To nie jest złe, ale nie trzeba zmieniać.

34
00:02:48,660 --> 00:02:50,580
To tylko restauracja na stronie.

35
00:02:50,610 --> 00:02:55,520
Jednak strona Yelp dla leniwego niedźwiedzia jest dynamiczna.

36
00:02:55,530 --> 00:03:05,070
To nie zmienia, więc w każdej chwili nowa ocena jest napisane, że będzie pojawiać się tu za każdym razem, a powiedzmy, że w tym przypadku niech oceń mu 5 gwiazdek.

37
00:03:05,070 --> 00:03:06,590
Czytałem recenzję.

38
00:03:07,170 --> 00:03:11,840
No pewnie odrzucić moją recenzję, ale jeśli napisałem recenzję byłoby pokazać się tutaj.

39
00:03:11,880 --> 00:03:17,000
Rzeczy są dynamiczne oni dzieje przez cały czas, więc mogę powiedzieć, oh to było użyteczne recenzji.

40
00:03:17,190 --> 00:03:18,700
To było zabawne recenzji.

41
00:03:19,140 --> 00:03:23,510
A te głosy, które dodałem są przechowywane w bazie danych.

42
00:03:23,520 --> 00:03:27,060
Coś się dzieje, jestem interakcji z tym i to jest utrzymująca się.

43
00:03:27,060 --> 00:03:32,010
Więc jeśli odświeżyć stronę teraz to nie różni się bardzo różne.

44
00:03:32,100 --> 00:03:36,350
Ale podczas gdy wcześniej nie miałem, że to było zabawne teraz pamięta.

45
00:03:36,350 --> 00:03:37,740
Myślałem, że to zabawne.

46
00:03:37,740 --> 00:03:45,650
Więc w zasadzie chodzi o to, kiedy idę do tej strony proszę o to, że AREL Yelp nie po prostu zawsze wysyłać dokładnie to samo z powrotem.

47
00:03:45,840 --> 00:03:49,060
To się dzieje, aby dowiedzieć się OK, to użytkownik zalogowany.

48
00:03:49,290 --> 00:03:52,600
Jeśli więc chcemy umieścić swoje zdjęcie profilowe tutaj.

49
00:03:52,710 --> 00:03:53,980
Ma on głosował na niczym.

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

51
00:03:54,510 --> 00:03:57,990
OK, niech upewnij się, że wiesz, wyróżnić go prawidłowo.

52
00:03:58,000 --> 00:03:59,260
Zmiana koloru.

53
00:03:59,310 --> 00:04:01,530
Nie pozwól mu głosować ponownie i tak dalej.

54
00:04:01,530 --> 00:04:05,420
A potem, że konstruuje się do niego mówi i elsea JavaScript i wysyła je z powrotem.

55
00:04:05,430 --> 00:04:10,150
Tak więc kolejny przykład strony, która jest zdecydowanie dynamiczny jest Google News.

56
00:04:10,620 --> 00:04:17,780
Za każdym razem, gdy odświeżyć To znaczy prawie co pięć minut coś się zmienia tu czy to pogoda tutaj NFL punktów.

57
00:04:17,820 --> 00:04:19,260
Znaczy to na żywo aktualizacje.

58
00:04:19,290 --> 00:04:23,190
Może to nowa historia nie łamie zmiany wiadomością coś.

59
00:04:23,190 --> 00:04:25,590
To jest bardzo, bardzo różni się za każdym razem.

60
00:04:25,620 --> 00:04:28,840
Jednak jest zawsze taki sam.

61
00:04:29,130 --> 00:04:31,020
Więc znowu różnica jest dwie rzeczy.

62
00:04:31,020 --> 00:04:34,530
Jednym z nich jest statyczna strona kontra dynamiczne strony.

63
00:04:34,530 --> 00:04:36,650
Obie z nich są strony internetowe.

64
00:04:36,660 --> 00:04:39,920
Obaj są TMLC s s oraz Javascript wraca.

65
00:04:40,110 --> 00:04:46,770
Jedno się nie zmieni opiera się jakiegoś kodu po stronie serwera coś na tylnym końcu.

66
00:04:47,340 --> 00:04:49,600
Tak Lubię również tę analogię z restauracji.

67
00:04:49,740 --> 00:04:52,350
Więc jeśli magicznie udać się do restauracji, trzeba usiąść.

68
00:04:52,380 --> 00:05:01,060
Powiedzmy zamówić stek kiedy zarządzić stek robisz wniosek, że idzie z powrotem do kuchni w kuchni przygotowuje dla ciebie wszystko.

69
00:05:01,080 --> 00:05:02,350
To rodzaj back-end.

70
00:05:02,460 --> 00:05:05,710
To decyduje o tym jakie składniki, aby uzyskać jak długo należy je gotować.

71
00:05:05,970 --> 00:05:11,430
Wszystko na talerzu, a potem kelner lub kelnerka przychodzi i przynosi, że do stolika.

72
00:05:11,430 --> 00:05:12,480
Więc to jest bardzo podobne.

73
00:05:12,480 --> 00:05:16,880
Możesz złożyć zamówienie lub kucharz kuchnia jest serwer.

74
00:05:17,070 --> 00:05:26,040
Ta część góry lodowej, który jest wymyślenie wszystkiego gotowaniem wprowadzenie go razem i wreszcie jest odsyłany do tabeli, która jest ci po stronie klienta.

75
00:05:27,290 --> 00:05:29,840
Więc teraz niech rozbić te trzy kawałki go wieku.

76
00:05:29,940 --> 00:05:31,610
Mówi w JavaScript.

77
00:05:32,390 --> 00:05:35,310
Więc mamy zamiar iść na wiele szczegółów na temat każdego z tych elementów.

78
00:05:35,330 --> 00:05:39,420
Istnieją oddzielne sekcje i zespoły, ale HDMI będzie istniała zacząć.

79
00:05:39,530 --> 00:05:43,760
Stojaki na hipertekstowy język znaczników zasadzie.

80
00:05:43,760 --> 00:05:44,870
Wyobraź sobie, że.

81
00:05:44,880 --> 00:05:47,900
I to jest to, co naprawdę wydarzyło się w pierwszych dniach w Internecie.

82
00:05:47,960 --> 00:05:53,610
Nie ma znormalizowanego sposobu przesyłania informacji oraz do wysyłania dokumentów.

83
00:05:53,720 --> 00:06:01,510
Więc początkowo wiesz, że Internet był wykorzystywany do wysyłania do komunikacji między uczelniach, a także jako narzędzie wojskowej.

84
00:06:01,520 --> 00:06:06,040
Więc powiedzmy, że chciałam wysłać Chciałem wysłać do przyjaciela.

85
00:06:06,560 --> 00:06:10,160
Muszę powiedzieć, OK, to pogrubione.

86
00:06:10,250 --> 00:06:12,170
Są to małe wypunktowania.

87
00:06:12,260 --> 00:06:14,770
Mam trochę tekstu i cytatów wokół tego.

88
00:06:14,770 --> 00:06:19,240
Muszę sposób złamać, że w dół i opisać to, aby wysłać do kogoś innego.

89
00:06:19,580 --> 00:06:36,450
I roztwór HMO tak HMO jest to faktycznie najłatwiej, że będziemy się uczyć, by nie powiedzieć, że to szaleństwo łatwe, ale jest to bardzo proste, że po prostu opisać to, co chcemy i co piszesz to co masz.

90
00:06:36,440 --> 00:06:39,800
Więc HMO jest często określane jako rzeczownik na strony WWW.

91
00:06:39,810 --> 00:06:40,830
Jest to struktura.

92
00:06:40,820 --> 00:06:50,570
Niektórzy ludzie twierdzą, że szkielet w zasadzie powiedzieć umieścić obraz tutaj umieścić podpunkt tutaj umieścić nagłówek tutaj umieścić nieco mniejszy pozycji tuż poniżej.

93
00:06:50,570 --> 00:07:04,720
Pozwala opisać strukturę CSSA strony, z drugiej strony jest to, w jaki sposób opisać styl strony muszę HVM jak używać ocenić CSSA na własną rękę tak naprawdę nie robić nic w ogóle.

94
00:07:04,740 --> 00:07:10,540
Każda strona ma HMO Niektóre strony internetowe nie mają C S Niektórzy nie mają JavaScript.

95
00:07:10,540 --> 00:07:11,620
To nie jest obowiązkowe.

96
00:07:11,700 --> 00:07:18,990
H Tim L jest tak c S stylów kaskadowych arkuszy będą uczyć się dokładnie tam, gdzie nazwa pochodzi i trochę.

97
00:07:19,010 --> 00:07:26,030
Zasadniczo jest to style istniejące HMO więc można powiedzieć takie rzeczy jak zrobić te wszystkie wypunktowania zielono.

98
00:07:26,150 --> 00:07:32,980
Podaj pierwszy obraz żółtą ramkę dać ostatni obraz duży różowy granicy z myślnikami przez nią.

99
00:07:33,000 --> 00:07:44,000
Jest często uważane za przymiotników strony internetowej lub niektórzy ludzie powiedzieliby skórę do H.T. płci męskiej szkielet i ostatni kawałek tutaj jest JavaScript.

100
00:07:44,000 --> 00:07:49,170
JavaScript jest prawdopodobnie jego zdecydowanie najbardziej skomplikowane rzeczy z tych trzech.

101
00:07:49,380 --> 00:07:52,940
To, w jaki sposób dodać Bahjat i interaktywność do strony.

102
00:07:53,210 --> 00:08:02,830
Więc z nami i JavaScript możemy zrobić piękny wygląd strony, ale to nie będzie nic robić naprawdę możemy zrobić proste animacje, ale możemy pobrać dane z innego miejsca.

103
00:08:02,830 --> 00:08:13,650
Nie można dokonać rzeczy interaktywne nie możemy dodać logikę lub zagrać z javascript możemy korzystać z niektórych przykład mam tutaj lub zrobić kilka matematyki zmieniają kolor, gdy użytkownik kliknie obciążenia.

104
00:08:13,640 --> 00:08:15,900
Nowe dane z Twittera uzyskać aktualną pogodę.

105
00:08:15,890 --> 00:08:17,640
Obecne wyniki NFL.

106
00:08:17,730 --> 00:08:26,230
Jeśli h Tim L jest rzeczowniki C SS to przymiotniki następnie JavaScript jest czasowniki są działania na stronie.

107
00:08:26,330 --> 00:08:33,400
Więc mam to wszystko ładnie opakowane w kodzie i tak kod pióro jest wspaniałym widokiem.

108
00:08:33,410 --> 00:08:39,460
Nie zamierzamy używać dużo, ale dlatego, że tak naprawdę nie zaczął pisać H-2 mu LCS i JavaScript.

109
00:08:39,620 --> 00:08:51,260
Zamierzam wykorzystać to jako przykład i co to robi to pozwala wystarczy napisać proste strony w przeglądarce, więc nie trzeba używać linii tekstu po prostu napisać go w przeglądarce i mogę podzielić się z wami bardzo z łatwością.

110
00:08:51,260 --> 00:08:54,900
Mam trzech sekcji H TMLC SS i JavaScript.

111
00:08:54,980 --> 00:08:58,100
Znowu sam kod nie jest tym, co jest tu ważne.

112
00:08:58,130 --> 00:08:59,650
Jest pojęcia.

113
00:09:00,050 --> 00:09:06,710
Warto więc spojrzeć i zamierzam faktycznie pozbyć mojego C-S z nami.

114
00:09:06,870 --> 00:09:11,280
Mam zamiar pozbyć z moich prac, a zobaczysz co mamy z lewej.

115
00:09:11,270 --> 00:09:14,490
Zwykły czarny i biały materiał konstrukcyjny.

116
00:09:14,510 --> 00:09:24,270
Jestem podając moje treści więc są to moje słowa, a ja owijania że zawartość poszczególnych elementów konstrukcyjnych, tak w H1.

117
00:09:24,530 --> 00:09:26,530
I znowu jest to jeden z tych czasów.

118
00:09:26,580 --> 00:09:28,730
Nie martw się o specyficznej składni.

119
00:09:28,910 --> 00:09:32,920
Mamy tak wiele filmów na prowadzenie, które będą iść w szczegóły i każdy z nich.

120
00:09:33,050 --> 00:09:36,910
Ale w zasadzie to mówiąc zrobić duże tekst tutaj.

121
00:09:36,980 --> 00:09:47,510
Ten mówi, zrób listę i sprawiają, że poszczególne element listy, które mówi Make me punkt zęby i jeszcze jeden, który mówi mi zrobić kolejny podpunkt a następnie zrobić przycisk z napisem Make me przycisk tutaj.

122
00:09:47,540 --> 00:09:50,950
Jak widać więc na swój własny, który jest po prostu struktura.

123
00:09:50,960 --> 00:09:54,110
Więc teraz chodźmy na lub zobaczyć nas widok.

124
00:09:54,120 --> 00:09:55,970
Można zobaczyć, co robię tutaj mówię.

125
00:09:56,120 --> 00:10:17,730
Wykorzystaj H-1, które sprawiają, że jest tutaj fioletowy więc możemy to zmienić, aby być zielone i zmienia kolor na zielony, a ja też mówiąc sprawiają przycisk mieć obramowanie mają kolor tła i kolor tekstu bieli, dzięki czemu możemy zmienić że aby być zielony kolor tekstu.

126
00:10:17,780 --> 00:10:20,020
Trudno, aby zobaczyć, co to zmienia na zielono.

127
00:10:20,120 --> 00:10:31,610
Mogę dać mu znacznie większy granicy 20 pikseli widziała tam tak, że istnieją przymiotniki i ostatni kawałek jest nasza JavaScript.

128
00:10:31,970 --> 00:10:35,420
Więc bez javascript, że przycisk nie robi nic.

129
00:10:35,450 --> 00:10:41,180
Teraz to, co zrobiliśmy jest napisane javascript, który mówi, gdy użytkownik kliknie przycisk.

130
00:10:41,340 --> 00:10:51,640
Wybrać losowy kolor i zmienić kolor tła, żeby tego losowego koloru tak, że można kliknąć i uzyskać losowy kolor.

131
00:10:52,460 --> 00:10:58,440
Więc jeśli pozbyłem tego javascript i starałem się zrobić to jeszcze raz nic się nie dzieje, ponieważ nie mam żadnych czasowników.

132
00:10:58,430 --> 00:11:00,410
To tylko rzeczowniki i dodatki.

133
00:11:00,450 --> 00:11:06,520
Wystarczy szkielet strukturalny i trochę skóry na górnej, jak mogę dodać moje JavaScript, mogę dodać logikę.

134
00:11:06,840 --> 00:11:08,300
Więc javascript naprawdę ważne.

135
00:11:08,370 --> 00:11:16,110
To nie jest dokładnie to, co byś zrobił, najprawdopodobniej na prawdziwym zakładzie produkcyjnym, ale trzeba być może gra może dokonać Saper.

136
00:11:16,130 --> 00:11:19,800
To może być Facebook Chat może być formą do zarejestrowania się na stronie.

137
00:11:19,860 --> 00:11:22,080
Za pomocą javascript, aby uczynić go interaktywne.

138
00:11:22,280 --> 00:11:25,510
Więc jeszcze raz zachęcam do zabawy na kodzie pióra.

139
00:11:25,640 --> 00:11:28,340
Trzeba odwołuje się do tego i zbadać trochę.

140
00:11:28,350 --> 00:11:30,280
Nie ma pośpiechu, aby przesunąć krawędź następnego filmu.

141
00:11:30,290 --> 00:11:32,960
Spróbuj zmienić niektóre z tych kolorów, jeśli chcesz.

142
00:11:32,960 --> 00:11:34,590
Spróbuj zmienić niektóre z tego.

143
00:11:34,640 --> 00:11:36,190
Nie skupiaj się na kodzie.

144
00:11:36,290 --> 00:11:40,020
To tylko zabawa bawić się, ale nie ma ciśnienia, żeby cokolwiek z tego rozumieją.

145
00:11:40,040 --> 00:11:46,060
Niezależnie od przegląd bardzo wysokim poziomie, co robi, co robi HDMI C S i co robi javascript.