Nous saluons le retour.
Donc, dans cette vidéo, nous allons nous concentrer sur l'avant-garde.
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.
Donc, il ya deux grandes choses que vous voulez savoir ce qui est différent entre l'avant et l'arrière-plan.
Et puis aussi quelle est la différence entre H.M.S. SS et Javascript et quels sont leurs rôles respectifs.
Commençons par discuter Front-End versus bacot.
Donc, quand je vais à un vous savez, disons aller à Facebook, j'ai frappé Facebook dot com j'ai frappé entrer.
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.
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.
Et puis il m'envoie à moi m'envoie h tim elsea dit en javascript mon navigateur affiche que pour moi.
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.
Et javascript juste la pointe de l'iceberg.
Mais c'est ce que mon navigateur voit c'est le front-end ou le côté client.
Il est construit par le backend.
Tout le reste qui se passe toute la logique.
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.
Tout cela vient du backend ou de la logique côté serveur.
Donc vous pouvez voir qu'il ya beaucoup plus ici.
La technologie est il ya tellement de choix sur le front end il n'y a pas.
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.
Il ya différentes bases de données que vous avez postgrads et Mongo et couch D.B et Mya.
Q Bien et la suite Lightener's il ya tellement de choix.
Donc c'est un peu intimidant.
Nous allons certainement parler beaucoup plus sur l'arrière-fond lorsque nous arrivons à cette unité.
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é.
Alors prenons un exemple ici ce que mon restaurant préféré à San Francisco est appelé ours paresseux.
Voici la page du restaurant.
Cette page est toujours la même.
Je veux dire qu'il pourrait être changé.
Mais pour qu'elle soit changée.
Le développeur doit entrer dans le H.T. Et modifiez-le manuellement.
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.
Ce n'est pas une mauvaise chose, mais il n'a pas besoin de changer.
C'est juste un restaurant une page.
Cependant, la page Yelp de paresseux est dynamique.
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.
J'ai lu un commentaire.
Suite Cet avis vous a-t-il été utile?
Les choses sont dynamiques, ils se produisent en tout temps, donc je pourrais dire oh, c'était une critique utile.
Cet avis vous a-t-il été utile?
Et les votes que j'ai ajoutés sont stockés dans une base de données.
Quelque chose se produit Je suis en interaction avec cela et il est persistant.
Donc, si je rafraîchir la page maintenant, c'est différent pas très différent.
Mais alors qu'avant je ne pensais pas que c'était drôle maintenant, il se souvient.
Je pensais que ce était drôle.
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.
Il va comprendre que OK est l'utilisateur connecté.
Si oui, nous voulons mettre sa photo de profil ici.
A-t-il voté quoi que ce soit.
Oui.
OK nous allons nous assurer que vous savez que nous le soulignons correctement.
Changez la couleur.
Ne le laissez pas voter à nouveau et ainsi de suite.
Et puis que lui construit le elsea dit et Javascript et il le renvoie.
Donc, un autre exemple d'une page qui est certainement dynamique est Google Nouvelles.
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.
Je veux dire que ce sont des mises à jour en direct.
Peut-être que c'est la nouvelle histoire il ya des nouvelles de rupture quelque chose change.
C'est très différent à chaque fois.
Cependant, c'est toujours la même chose.
Donc encore la différence est deux choses.
L'une est une page statique versus une page dynamique.
Les deux sont des pages web.
Les deux sont TMLC s s et Javascript revenant.
On va changer basé hors d'une sorte de côté côté serveur quelque chose sur l'extrémité arrière.
J'aime aussi cette analogie d'un restaurant.
Donc, si vous magiquement aller à un restaurant, vous vous asseyez.
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.
C'est une sorte de back-end.
Il décide quels ingrédients pour obtenir combien de temps pour les faire cuire.
Tout sur un plat et puis un serveur ou une serveuse vient et apporte cela à votre table.
C'est donc très semblable.
Vous faites une demande le chef ou la cuisine est le serveur.
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.
Alors, maintenant, nous allons briser ces trois morceaux âgés de lui.
Dit en Javascript.
Nous allons donc aborder beaucoup de détails sur chacune de ces composantes.
Il ya des sections et des unités distinctes, mais HDMI va commencer là.
Fondamentalement pour le langage de balisage hypertexte.
Imagine ça.
Et c'est ce qui s'est réellement passé dans les premiers jours de l'Internet.
Il n'existait pas de moyen normalisé d'envoyer des informations et d'envoyer des documents.
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.
Alors, disons simplement que je voulais envoyer un message que je voulais envoyer à un ami.
J'ai besoin de dire OK c'est en gras.
Ce sont de petits points.
J'ai un texte et des citations à ce sujet.
J'ai besoin d'une façon de briser cela et de le décrire pour envoyer à quelqu'un d'autre.
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.
Donc HMO est souvent appelé le nom d'une page Web.
C'est la structure.
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.
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.
Chaque page Web a HMO certaines pages Web n'ont pas C S S Certains n'ont pas de javascript.
Ce n'est pas obligatoire.
H Tim L est si c s s feuilles de style en cascade va apprendre exactement d'où ce nom vient et un peu.
Fondamentalement, il existe des styles existants HMO afin que vous puissiez dire des choses comme faire tous ces points de balle vert.
Donner à la première image une bordure jaune donner à la dernière image une grande bordure rose avec des tirets à travers elle.
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.
Le Javascript est sans doute la chose la plus complexe de ces trois.
C'est comment nous ajoutons Bahjat et l'interactivité à une page.
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.
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.
Nouvelles données de Twitter obtenir le temps actuel.
Les scores actuels NFL.
Si h tim L est les noms C Ss est les adjectifs alors javascript est les verbes sont les actions sur une page.
Donc, j'ai ce tout enveloppé joliment dans un code et le stylo code est donc une vue merveilleuse.
Nous n'allons pas utiliser beaucoup, mais parce que nous n'avons pas vraiment commencé à écrire H-2 lui LCS et Javascript.
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.
J'ai trois sections TMLC SS et Javascript.
Encore une fois, le code lui-même n'est pas ce qui est important ici.
Ce sont les concepts.
Alors allons jeter un coup d'oeil et je vais vraiment me débarrasser de mon C-s nous.
Je vais me débarrasser de mes emplois et vous verrez ce qu'il nous reste.
Matériau de structure noir et blanc.
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.
Et encore une fois, c'est l'un de ces moments.
Ne vous inquiétez pas de la syntaxe spécifique.
Nous avons tellement de vidéos à venir qui vont aller dans les détails et chacun de ceux-ci.
Mais, fondamentalement, c'est dire faire gros texte ici.
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.
Comme vous pouvez le voir sur son propre qui est juste la structure.
Maintenant, allons-y ou revenez nous voir.
Vous pouvez voir ce que je fais ici, je dis.
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.
Il est difficile de voir ce qui change le vert.
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.
Donc, sans javascript ce bouton ne fait rien.
Maintenant, ce que nous avons fait est écrit javascript qui indique quand l'utilisateur clique sur le bouton.
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.
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.
C'est juste des noms et des additifs.
Juste le squelette structurel et un peu de peau sur le dessus comme j'ajoute mon javascript dans je peux ajouter la logique.
Donc javascript vraiment important.
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.
Cela pourrait être Facebook chat, il pourrait être un formulaire pour vous inscrire à une page.
Vous utilisez javascript pour le rendre interactif.
Encore une fois, je vous encourage à jouer sur le code stylo.
Vous devez lier à ceci et explorer un peu.
Il n'y a aucune précipitation pour déplacer le bord la prochaine vidéo.
Essayez de changer certaines de ces couleurs si vous voulez.
Essayez de changer une partie de cela.
Ne vous concentrez pas sur le code.
C'est juste amusant de jouer avec, mais il n'y a aucune pression pour comprendre tout cela.
Mis à part un aperçu très haut niveau de ce que HDMI fait ce que C S fait et ce javascript ne.