1
00:00:00,360 --> 00:00:01,380
Nous saluons le retour.

2
00:00:01,380 --> 00:00:04,380
Donc, dans cette vidéo, nous allons nous concentrer sur l'avant-garde.

3
00:00:04,620 --> 00:00:12,530
Nous allons apprendre sur chaque TMLC évalué en javascript sur un niveau élevé, nous n'allons pas réellement écrire tout code encore, mais nous allons voir le code pour la première fois.

4
00:00:13,140 --> 00:00:17,900
Donc, il ya deux grandes choses que vous voulez savoir ce qui est différent entre l'avant et l'arrière-plan.

5
00:00:18,040 --> 00:00:24,500
Et puis aussi quelle est la différence entre H.M.S. SS et Javascript et quels sont leurs rôles respectifs.

6
00:00:25,080 --> 00:00:28,740
Commençons par discuter Front-End versus bacot.

7
00:00:28,860 --> 00:00:35,610
Donc, quand je vais à un vous savez, disons aller à Facebook, j'ai frappé Facebook dot com j'ai frappé entrer.

8
00:00:35,610 --> 00:00:51,050
Et si vous vous souvenez de retour à la vidéo sur la façon dont le web fonctionne, je crée une demande HTP demandant Facebook dot com et qui va au serveur Facebook ou éventuellement Facebook puis décide quelle page de me renvoyer.

9
00:00:51,210 --> 00:01:03,790
Donc, dans le cas de Facebook, il a besoin de comprendre ce que les images de ce que les histoires de combien ils aiment ce qu'ils ont des amis que les messages sont au sommet de tous mes réglages images de haut profil toutes les choses qui se rapportent à moi.

10
00:01:04,110 --> 00:01:10,870
Et puis il m'envoie à moi m'envoie h tim elsea dit en javascript mon navigateur affiche que pour moi.

11
00:01:11,370 --> 00:01:21,650
Donc ce diagramme ici juste explique la différence entre l'avant et l'arrière-plan où tout ce que je reçois en ce que je vois dans le navigateur est juste H.M.S. Oui.

12
00:01:21,720 --> 00:01:24,190
Et javascript juste la pointe de l'iceberg.

13
00:01:24,270 --> 00:01:28,910
Mais c'est ce que mon navigateur voit c'est le front-end ou le côté client.

14
00:01:29,250 --> 00:01:31,960
Il est construit par le backend.

15
00:01:32,370 --> 00:01:34,360
Tout le reste qui se passe toute la logique.

16
00:01:34,440 --> 00:01:42,000
Déterminer si je suis connecté à trouver qui mes amis sont quelles photos, j'ai ce que les messages que j'ai posté combien ils aiment.

17
00:01:42,000 --> 00:01:45,970
Tout cela vient du backend ou de la logique côté serveur.

18
00:01:46,200 --> 00:01:48,000
Donc vous pouvez voir qu'il ya beaucoup plus ici.

19
00:01:48,030 --> 00:01:50,820
La technologie est il ya tellement de choix sur le front end il n'y a pas.

20
00:01:50,850 --> 00:02:01,180
Il est toujours HTML CSS et javascript sur le back-end vous avez des langues différentes comme Python ph P Ruby javascript en fait ce qui est ce que nous allons utiliser.

21
00:02:01,350 --> 00:02:06,570
Il ya différentes bases de données que vous avez postgrads et Mongo et couch D.B et Mya.

22
00:02:06,570 --> 00:02:09,320
Q Bien et la suite Lightener's il ya tellement de choix.

23
00:02:09,390 --> 00:02:11,010
Donc c'est un peu intimidant.

24
00:02:11,040 --> 00:02:15,060
Nous allons certainement parler beaucoup plus sur l'arrière-fond lorsque nous arrivons à cette unité.

25
00:02:15,060 --> 00:02:21,770
Mais pour l'instant, n'oubliez pas que l'extrémité arrière est ce qui construit le H à fondre et le C S qui est renvoyé.

26
00:02:21,780 --> 00:02:27,200
Alors prenons un exemple ici ce que mon restaurant préféré à San Francisco est appelé ours paresseux.

27
00:02:27,390 --> 00:02:28,890
Voici la page du restaurant.

28
00:02:29,100 --> 00:02:31,580
Cette page est toujours la même.

29
00:02:31,620 --> 00:02:32,810
Je veux dire qu'il pourrait être changé.

30
00:02:32,820 --> 00:02:34,790
Mais pour qu'elle soit changée.

31
00:02:34,920 --> 00:02:38,600
Le développeur doit entrer dans le H.T. Et modifiez-le manuellement.

32
00:02:38,610 --> 00:02:46,540
Donc, fondamentalement, je rafraîchir la page chaque fois que je reçois la même page d'accueil, je reçois les mêmes questions fréquemment posées la même page nous contacter.

33
00:02:46,580 --> 00:02:48,650
Ce n'est pas une mauvaise chose, mais il n'a pas besoin de changer.

34
00:02:48,660 --> 00:02:50,580
C'est juste un restaurant une page.

35
00:02:50,610 --> 00:02:55,520
Cependant, la page Yelp de paresseux est dynamique.

36
00:02:55,530 --> 00:03:05,070
Il ne change donc chaque fois qu'une nouvelle critique est écrit, il va apparaître ici à chaque fois et disons que dans ce cas, nous allons le taux de 5 étoiles.

37
00:03:05,070 --> 00:03:06,590
J'ai lu un commentaire.

38
00:03:07,170 --> 00:03:11,840
Suite Cet avis vous a-t-il été utile?

39
00:03:11,880 --> 00:03:17,000
Les choses sont dynamiques, ils se produisent en tout temps, donc je pourrais dire oh, c'était une critique utile.

40
00:03:17,190 --> 00:03:18,700
Cet avis vous a-t-il été utile?

41
00:03:19,140 --> 00:03:23,510
Et les votes que j'ai ajoutés sont stockés dans une base de données.

42
00:03:23,520 --> 00:03:27,060
Quelque chose se produit Je suis en interaction avec cela et il est persistant.

43
00:03:27,060 --> 00:03:32,010
Donc, si je rafraîchir la page maintenant, c'est différent pas très différent.

44
00:03:32,100 --> 00:03:36,350
Mais alors qu'avant je ne pensais pas que c'était drôle maintenant, il se souvient.

45
00:03:36,350 --> 00:03:37,740
Je pensais que ce était drôle.

46
00:03:37,740 --> 00:03:45,650
Donc, fondamentalement, le point est lorsque je vais à cette page, je vous demande Arel Yelp ne fait pas toujours envoyer exactement la même chose en arrière.

47
00:03:45,840 --> 00:03:49,060
Il va comprendre que OK est l'utilisateur connecté.

48
00:03:49,290 --> 00:03:52,600
Si oui, nous voulons mettre sa photo de profil ici.

49
00:03:52,710 --> 00:03:53,980
A-t-il voté quoi que ce soit.

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

51
00:03:54,510 --> 00:03:57,990
OK nous allons nous assurer que vous savez que nous le soulignons correctement.

52
00:03:58,000 --> 00:03:59,260
Changez la couleur.

53
00:03:59,310 --> 00:04:01,530
Ne le laissez pas voter à nouveau et ainsi de suite.

54
00:04:01,530 --> 00:04:05,420
Et puis que lui construit le elsea dit et Javascript et il le renvoie.

55
00:04:05,430 --> 00:04:10,150
Donc, un autre exemple d'une page qui est certainement dynamique est Google Nouvelles.

56
00:04:10,620 --> 00:04:17,780
Chaque fois que je rafraîchir je veux dire presque tous les cinq minutes quelque chose change ici si c'est le temps ici NFL scores.

57
00:04:17,820 --> 00:04:19,260
Je veux dire que ce sont des mises à jour en direct.

58
00:04:19,290 --> 00:04:23,190
Peut-être que c'est la nouvelle histoire il ya des nouvelles de rupture quelque chose change.

59
00:04:23,190 --> 00:04:25,590
C'est très différent à chaque fois.

60
00:04:25,620 --> 00:04:28,840
Cependant, c'est toujours la même chose.

61
00:04:29,130 --> 00:04:31,020
Donc encore la différence est deux choses.

62
00:04:31,020 --> 00:04:34,530
L'une est une page statique versus une page dynamique.

63
00:04:34,530 --> 00:04:36,650
Les deux sont des pages web.

64
00:04:36,660 --> 00:04:39,920
Les deux sont TMLC s s et Javascript revenant.

65
00:04:40,110 --> 00:04:46,770
On va changer basé hors d'une sorte de côté côté serveur quelque chose sur l'extrémité arrière.

66
00:04:47,340 --> 00:04:49,600
J'aime aussi cette analogie d'un restaurant.

67
00:04:49,740 --> 00:04:52,350
Donc, si vous magiquement aller à un restaurant, vous vous asseyez.

68
00:04:52,380 --> 00:05:01,060
Disons que vous commandez un steak quand vous commandez que steak vous faites une demande qui remonte à la cuisine la cuisine prépare tout pour vous.

69
00:05:01,080 --> 00:05:02,350
C'est une sorte de back-end.

70
00:05:02,460 --> 00:05:05,710
Il décide quels ingrédients pour obtenir combien de temps pour les faire cuire.

71
00:05:05,970 --> 00:05:11,430
Tout sur un plat et puis un serveur ou une serveuse vient et apporte cela à votre table.

72
00:05:11,430 --> 00:05:12,480
C'est donc très semblable.

73
00:05:12,480 --> 00:05:16,880
Vous faites une demande le chef ou la cuisine est le serveur.

74
00:05:17,070 --> 00:05:26,040
Cette partie de l'iceberg qui concocte tout cuisiner le mettant ensemble et puis finalement il est renvoyé à votre table qui est vous du côté du client.

75
00:05:27,290 --> 00:05:29,840
Alors, maintenant, nous allons briser ces trois morceaux âgés de lui.

76
00:05:29,940 --> 00:05:31,610
Dit en Javascript.

77
00:05:32,390 --> 00:05:35,310
Nous allons donc aborder beaucoup de détails sur chacune de ces composantes.

78
00:05:35,330 --> 00:05:39,420
Il ya des sections et des unités distinctes, mais HDMI va commencer là.

79
00:05:39,530 --> 00:05:43,760
Fondamentalement pour le langage de balisage hypertexte.

80
00:05:43,760 --> 00:05:44,870
Imagine ça.

81
00:05:44,880 --> 00:05:47,900
Et c'est ce qui s'est réellement passé dans les premiers jours de l'Internet.

82
00:05:47,960 --> 00:05:53,610
Il n'existait pas de moyen normalisé d'envoyer des informations et d'envoyer des documents.

83
00:05:53,720 --> 00:06:01,510
Donc, au début vous savez que l'Internet a été utilisé pour envoyer à communiquer entre les universités et les collèges et aussi comme un outil militaire.

84
00:06:01,520 --> 00:06:06,040
Alors, disons simplement que je voulais envoyer un message que je voulais envoyer à un ami.

85
00:06:06,560 --> 00:06:10,160
J'ai besoin de dire OK c'est en gras.

86
00:06:10,250 --> 00:06:12,170
Ce sont de petits points.

87
00:06:12,260 --> 00:06:14,770
J'ai un texte et des citations à ce sujet.

88
00:06:14,770 --> 00:06:19,240
J'ai besoin d'une façon de briser cela et de le décrire pour envoyer à quelqu'un d'autre.

89
00:06:19,580 --> 00:06:36,450
Et la solution était HMO afin HMO est-il est en fait la chose la plus facile que nous allons apprendre à ne pas dire que c'est fou facile, mais il est très simple en ce que nous décrivons simplement ce que nous voulons et ce que vous écrivez est ce que vous obtenez.

90
00:06:36,440 --> 00:06:39,800
Donc HMO est souvent appelé le nom d'une page Web.

91
00:06:39,810 --> 00:06:40,830
C'est la structure.

92
00:06:40,820 --> 00:06:50,570
Certaines personnes disent que le squelette signifie essentiellement mettre une image ici mettre un point de balle ici mettre un titre ici mettre un titre légèrement plus petit juste en dessous.

93
00:06:50,570 --> 00:07:04,720
Il vous permet de décrire la structure d'une page CSSA d'autre part, c'est comment nous décrivons le style d'une page dont j'ai besoin HVM comment utiliser l'évaluation CSSA sur ses propres ne fait vraiment rien du tout.

94
00:07:04,740 --> 00:07:10,540
Chaque page Web a HMO certaines pages Web n'ont pas C S S Certains n'ont pas de javascript.

95
00:07:10,540 --> 00:07:11,620
Ce n'est pas obligatoire.

96
00:07:11,700 --> 00:07:18,990
H Tim L est si c s s feuilles de style en cascade va apprendre exactement d'où ce nom vient et un peu.

97
00:07:19,010 --> 00:07:26,030
Fondamentalement, il existe des styles existants HMO afin que vous puissiez dire des choses comme faire tous ces points de balle vert.

98
00:07:26,150 --> 00:07:32,980
Donner à la première image une bordure jaune donner à la dernière image une grande bordure rose avec des tirets à travers elle.

99
00:07:33,000 --> 00:07:44,000
Il est souvent considéré comme les adjectifs d'une page web ou certains diront que la peau à l'H.T. Un squelette masculin et la dernière pièce ici est javascript.

100
00:07:44,000 --> 00:07:49,170
Le Javascript est sans doute la chose la plus complexe de ces trois.

101
00:07:49,380 --> 00:07:52,940
C'est comment nous ajoutons Bahjat et l'interactivité à une page.

102
00:07:53,210 --> 00:08:02,830
Donc, avec nous et Javascript, nous pouvons faire un beau site à la recherche mais il ne va pas faire quoi que ce soit vraiment nous pouvons faire des animations simples, mais nous pouvons charger des données à partir d'ailleurs.

103
00:08:02,830 --> 00:08:13,650
Vous ne pouvez pas rendre les choses interactives, nous ne pouvons pas ajouter de logique ou avoir un jeu avec javascript, nous pouvons utiliser certains de l'exemple que j'ai ici ou faire des changements mathématiques couleur lorsque l'utilisateur clique sur la charge.

104
00:08:13,640 --> 00:08:15,900
Nouvelles données de Twitter obtenir le temps actuel.

105
00:08:15,890 --> 00:08:17,640
Les scores actuels NFL.

106
00:08:17,730 --> 00:08:26,230
Si h tim L est les noms C Ss est les adjectifs alors javascript est les verbes sont les actions sur une page.

107
00:08:26,330 --> 00:08:33,400
Donc, j'ai ce tout enveloppé joliment dans un code et le stylo code est donc une vue merveilleuse.

108
00:08:33,410 --> 00:08:39,460
Nous n'allons pas utiliser beaucoup, mais parce que nous n'avons pas vraiment commencé à écrire H-2 lui LCS et Javascript.

109
00:08:39,620 --> 00:08:51,260
Je vais utiliser cela comme un exemple et ce que cela ne vous permet d'écrire des pages simples dans le navigateur afin que nous n'avons pas à utiliser de texte de ligne, nous l'écrivons juste dans le navigateur et je peux le partager avec vous très facilement.

110
00:08:51,260 --> 00:08:54,900
J'ai trois sections TMLC SS et Javascript.

111
00:08:54,980 --> 00:08:58,100
Encore une fois, le code lui-même n'est pas ce qui est important ici.

112
00:08:58,130 --> 00:08:59,650
Ce sont les concepts.

113
00:09:00,050 --> 00:09:06,710
Alors allons jeter un coup d'oeil et je vais vraiment me débarrasser de mon C-s nous.

114
00:09:06,870 --> 00:09:11,280
Je vais me débarrasser de mes emplois et vous verrez ce qu'il nous reste.

115
00:09:11,270 --> 00:09:14,490
Matériau de structure noir et blanc.

116
00:09:14,510 --> 00:09:24,270
Je suis spécifiant mon contenu de sorte que ce sont mes mots et je suis envelopper ce contenu dans les éléments structurels spécifiques dans H1.

117
00:09:24,530 --> 00:09:26,530
Et encore une fois, c'est l'un de ces moments.

118
00:09:26,580 --> 00:09:28,730
Ne vous inquiétez pas de la syntaxe spécifique.

119
00:09:28,910 --> 00:09:32,920
Nous avons tellement de vidéos à venir qui vont aller dans les détails et chacun de ceux-ci.

120
00:09:33,050 --> 00:09:36,910
Mais, fondamentalement, c'est dire faire gros texte ici.

121
00:09:36,980 --> 00:09:47,510
C'est dire de faire une liste et de le faire élément de liste individuelle qui dit me faire un point de balle et un autre qui dit me faire un autre point de balle et puis faire un bouton qui dit Make me a button here.

122
00:09:47,540 --> 00:09:50,950
Comme vous pouvez le voir sur son propre qui est juste la structure.

123
00:09:50,960 --> 00:09:54,110
Maintenant, allons-y ou revenez nous voir.

124
00:09:54,120 --> 00:09:55,970
Vous pouvez voir ce que je fais ici, je dis.

125
00:09:56,120 --> 00:10:17,730
Faire le H-1 qui est ici le rendre pourpre afin que nous puissions changer cela pour être vert et il change en vert et je dis aussi faire le bouton ont une bordure ont une couleur de fond et une couleur de texte de blanc afin que nous puissions changer Que pour être couleur de texte verte.

126
00:10:17,780 --> 00:10:20,020
Il est difficile de voir ce qui change le vert.

127
00:10:20,120 --> 00:10:31,610
Je peux lui donner une frontière beaucoup plus grande de 20 pixels qu'elle pouvait voir là pour qu'il y ait des adjectifs et la dernière pièce est notre Javascript.

128
00:10:31,970 --> 00:10:35,420
Donc, sans javascript ce bouton ne fait rien.

129
00:10:35,450 --> 00:10:41,180
Maintenant, ce que nous avons fait est écrit javascript qui indique quand l'utilisateur clique sur le bouton.

130
00:10:41,340 --> 00:10:51,640
Choisissez une couleur aléatoire et changez la couleur d'arrière-plan ici à cette couleur aléatoire de sorte que je puisse cliquer et je reçois une couleur aléatoire.

131
00:10:52,460 --> 00:10:58,440
Donc, si je me suis débarrassé de ce javascript et j'ai essayé de le faire à nouveau rien ne se passe parce que je n'ai pas de verbes.

132
00:10:58,430 --> 00:11:00,410
C'est juste des noms et des additifs.

133
00:11:00,450 --> 00:11:06,520
Juste le squelette structurel et un peu de peau sur le dessus comme j'ajoute mon javascript dans je peux ajouter la logique.

134
00:11:06,840 --> 00:11:08,300
Donc javascript vraiment important.

135
00:11:08,370 --> 00:11:16,110
Ce n'est pas exactement ce que vous feriez le plus probablement sur un vrai site de production mais vous auriez peut-être un jeu que vous pourriez faire le balayeur de mine.

136
00:11:16,130 --> 00:11:19,800
Cela pourrait être Facebook chat, il pourrait être un formulaire pour vous inscrire à une page.

137
00:11:19,860 --> 00:11:22,080
Vous utilisez javascript pour le rendre interactif.

138
00:11:22,280 --> 00:11:25,510
Encore une fois, je vous encourage à jouer sur le code stylo.

139
00:11:25,640 --> 00:11:28,340
Vous devez lier à ceci et explorer un peu.

140
00:11:28,350 --> 00:11:30,280
Il n'y a aucune précipitation pour déplacer le bord la prochaine vidéo.

141
00:11:30,290 --> 00:11:32,960
Essayez de changer certaines de ces couleurs si vous voulez.

142
00:11:32,960 --> 00:11:34,590
Essayez de changer une partie de cela.

143
00:11:34,640 --> 00:11:36,190
Ne vous concentrez pas sur le code.

144
00:11:36,290 --> 00:11:40,020
C'est juste amusant de jouer avec, mais il n'y a aucune pression pour comprendre tout cela.

145
00:11:40,040 --> 00:11:46,060
Mis à part un aperçu très haut niveau de ce que HDMI fait ce que C S fait et ce javascript ne.