Welkom terug.
Dus in deze video gaan we focussen op de front-end.
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.
Dus er zijn twee grote dingen die je wilt weten en dat is wat is het verschil tussen de voor- en achterkant.
En dan ook nog wat is het verschil tussen H.M.S. SS en Javascript en wat zijn hun respectieve rollen.
Dus laten we beginnen met het bespreken van Front-End versus Bacot.
Dus toen ik naar een bekende laten we zeggen Ga naar Facebook ik raakte Facebook dot com ik druk op enter.
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.
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.
En dan stuurt het terug naar me stuurt me h tim ELSEA zegt in javascript mijn browser geeft dat voor mij.
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.
En javascript slechts het topje van de ijsberg.
Maar het is wat mijn browser ziet is de front-end of de client.
Het is gebouwd door de backend.
Al het andere dat alle logica gebeurt.
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.
Dat alles komt uit de backend of de server side logica.
Dus je kunt zien dat er veel meer hier.
De technologie is er zo veel keuzes op de voorkant is er niet.
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.
Er zijn verschillende databases je hebt postgrads en Mongo en bank D.B en Mya's.
Q Nou en sequel Lightener's er zo veel keuzes.
Dus het is een beetje intimiderend.
We gaan zeker praten veel meer over de back-end als we in die eenheid.
Maar voor nu alleen niet vergeten dat de back-end is wat bouwt de H te smelten en de C-S, dat wordt teruggestuurd.
Dus laten we eens een voorbeeld hier wat mijn favoriete restaurant in San Francisco wordt luie beer genoemd.
Hier is het restaurant pagina.
Deze pagina is altijd hetzelfde.
Ik bedoel, het zou kunnen worden veranderd.
Maar om deze te veranderen.
De ontwikkelaar heeft in de H.T. te gaan bedragen en het handmatig veranderen.
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.
Dat is geen slechte zaak, maar het hoeft niet te veranderen.
Het is gewoon een restaurant een pagina.
Echter, de Yelp pagina voor luie beer is dynamisch.
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.
Ik las een recensie.
Nou je waarschijnlijk afwijzen mijn beoordeling, maar als ik schreef een review zou het hier opdagen.
Dingen zijn dynamisch ze gebeuren te allen tijde dus ik kon zeggen oh dat was een nuttige beoordeling.
Dat was een grappig beoordeling.
En degenen stemmen die ik heb toegevoegd, worden opgeslagen in een database.
Er gebeurt iets dat ik de interactie met dit en het voortduurt.
Dus als ik de pagina nu vernieuwen is het anders niet heel anders.
Maar terwijl ik wist niet dat dit grappig was nu onthoudt.
Ik dacht dat het grappig was.
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.
Het gaat om erachter te komen OK is de gebruiker ingelogd.
Als dus we willen zijn profiel foto hier plaatsen.
Heeft hij op iets gestemd.
Ja.
OK laten we ervoor zorgen dat je weet dat we de juiste wijze te markeren.
Verander de kleur.
Laat hem niet opnieuw en ga zo maar door stemmen.
En dan is dat construeert hem ELSEA zegt en Javascript en stuurt het terug.
Dus een ander voorbeeld van een pagina die is zeker dynamiek is Google Nieuws.
Elke keer als ik refresh bedoel ik bijna elke vijf minuten iets verandert hier of het nu is het weer hier NFL scores.
Ik bedoel, dit zijn live-updating.
Misschien is het de nieuwe verhaal Er is breaking news iets verandert.
Dit is heel erg elke keer anders.
Dit is echter altijd hetzelfde.
Dus nogmaals het verschil is twee dingen.
Een daarvan is statische pagina versus een dynamische pagina.
Beiden zijn webpagina's.
Beiden zijn TMLC s s en Javascript terugkomen.
Men gaat veranderen op basis off van een soort van server-side code iets op de back-end.
Dus ik hou ook van deze analogie van een restaurant.
Dus als je op magische wijze naar een restaurant dat je gaat zitten.
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.
Dat is een soort van de back-end.
Zij beslist welke ingrediënten te krijgen hoe lang ze koken.
Alles op een plaat en vervolgens een ober of serveerster komt en brengt die naar uw tafel.
Dus het is zeer vergelijkbaar.
Je maakt een verzoek van de chef-kok of de keuken is de server.
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.
Dus laten we nu breken deze drie stukken hem in de leeftijd.
Zegt in Javascript.
Dus we gaan in een veel detail op elk van deze onderdelen om te gaan.
Er zijn aparte afdelingen en eenheden, maar HDMI zal daar beginnen.
Staat voor HyperText Markup Language principe.
Stel je voor dat.
En dit is wat eigenlijk gebeurde in de vroege dagen van het internet.
Er was geen gestandaardiseerde manier om informatie te sturen en om documenten te verzenden.
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.
Dus laten we zeggen dat ik wilde een wilde ik dit sturen naar een vriend te sturen.
Ik moet zeggen dat dit OK is vet.
Dit zijn kleine bullet points.
Ik heb een aantal teksten en citaten rond deze kreeg.
Ik heb een manier om af te breken en die beschrijven te sturen naar iemand anders.
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.
Dus HMO wordt vaak aangeduid als het zelfstandig naamwoord is van een webpagina.
Het is de structuur.
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.
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.
Elke webpagina heeft HMO sommige webpagina's hebben geen C S S Sommige hebben geen javascript.
Het is niet verplicht.
H Tim L is zo c s s cascading style sheets precies leren waar die naam vandaan komt en een beetje.
Eigenlijk is het stijlen bestaande HMO, zodat je kunt zeggen dingen willen maken al die bullet points groen.
Geef het eerste beeld een gele rand geven de laatste afbeelding van een grote roze grens met streepjes doorheen.
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.
Javascript is waarschijnlijk het is zeker de meest complexe ding uit deze drie.
Het is hoe we Bahjat en interactiviteit aan een pagina toe te voegen.
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.
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.
Nieuwe gegevens van Twitter te krijgen van de huidige weersomstandigheden.
De huidige NFL scores.
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.
Dus ik heb dit allemaal verpakt keurig in een code en dus code pen is een prachtig gezicht.
We gaan niet om een ​​heleboel te gebruiken, maar omdat we nog niet echt begonnen met het schrijven H-2 hem LCS en Javascript.
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.
Ik heb drie secties h TMLC SS en Javascript.
Opnieuw is de code zelf is niet wat belangrijk hier.
Het is de concepten.
Dus laten we eens een kijkje nemen en ik ga om daadwerkelijk te ontdoen van mijn C-s ons.
Ik ga om zich te ontdoen van mijn banen te krijgen en je zult zien wat we vertrokken met.
Effen zwart en wit structureel materiaal.
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.
En ook dit is een van die momenten.
Maak je geen zorgen over de specifieke syntaxis.
We hebben zo veel video's vooruit die in detail te gaan en elk van deze.
Maar in principe is deze zegt maken grote tekst hier.
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.
Zoals je kunt zien dus op zijn eigen, dat is gewoon de structuur.
Dus nu laten we gaan op of bekijk ons ​​terug in.
Je kunt zien wat ik doe hier wat ik zeg.
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.
Het is moeilijk om te zien wat dat de groene verandert.
Ik kan geven een veel grotere rand 20 pixels ze daar kon zien, zodat er bijvoeglijke naamwoorden en het laatste stuk is onze Javascript.
Dus zonder javascript die knop doet niets.
Nu wat we hebben gedaan is geschreven javascript die zegt dat wanneer de gebruiker op de knop klikt.
Kies een willekeurige kleur en verander de achtergrondkleur hier om die willekeurige kleur, zodat ik kan klikken en ik krijg een willekeurige kleur.
Dus als ik verlost van dit javascript en ik heb geprobeerd om dat opnieuw te doen niets gebeurt, want ik heb geen werkwoorden.
Het is gewoon naamwoorden en additieven.
Alleen de structurele skelet en een beetje van de huid op de top als ik mijn javascript ik de logica kan toevoegen.
Dus javascript echt belangrijk.
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.
Dit kan Facebook chat kan een formulier aan te melden voor een pagina zijn.
U gebruikt javascript om het interactief te maken.
Dus nogmaals, ik moedig u aan om rond te spelen op de code pen.
Je moet om te linken naar deze en ontdek een beetje.
Er is geen haast om naar de rand van de volgende video.
Probeer het veranderen van een aantal van deze kleuren als je wilt.
Probeer het veranderen van een aantal van deze.
Richt je niet op de code.
Het is gewoon leuk om mee te spelen, maar er is geen druk om het even welk van dit te begrijpen.
Afgezien van een zeer hoog niveau overzicht van wat HDMI doet wat C S doet en wat javascript doet.