1
00:00:00,420 --> 00:00:01,690
Reeds Welkom terug.

2
00:00:01,980 --> 00:00:03,600
Dus ik heb een aantal zeer goed nieuws.

3
00:00:03,600 --> 00:00:08,130
Het is eindelijk tijd voor ons om javascript te nemen en deze te combineren met onze H.M.S. evalueren.

4
00:00:08,250 --> 00:00:10,160
Dit is veruit mijn favoriete toestel.

5
00:00:10,170 --> 00:00:13,800
Mijn favoriete onderwerp te leren alles wat ik mijn hele leven lesgeven hebt doorgebracht.

6
00:00:13,860 --> 00:00:16,180
Het is echt waar de javascript begint te payoff.

7
00:00:16,200 --> 00:00:18,480
Dus we hebben gedaan een aantal eenvoudige apps tot op dit punt.

8
00:00:18,540 --> 00:00:27,310
Eenvoudig om de lijst te doen met behulp van waarschuwingen en aanwijzingen en ik weet dat het niet erg spannend, maar dat is alles gaat nu veranderen, want we staan ​​op het punt om echt de kracht van Javascript.

9
00:00:27,510 --> 00:00:48,830
En dan is dit toestel gaan we dingen doen, zoals maken een interactief spel gaan we een echte to do list met een echte vorm met echte knoppen en checkboxes en Javascript erachter en animaties en allerlei echt interessant spannende dingen te maken waar je echt het gevoel dat je iets gemaakt niet alleen een beetje opdrachtregel of een beetje javascript console app, maar echt iets dat je zou kunnen delen.

10
00:00:48,840 --> 00:00:55,410
Dus de manier waarop we dit allemaal te doen is door middel van een technologie genaamd de DOM t o m het is zo.

11
00:00:55,530 --> 00:01:01,090
Dus deze les gaat dienen als een inleiding tot de DOM gaan praten over een paar dingen in de volgende paar video's.

12
00:01:01,140 --> 00:01:05,450
Ik wil beginnen met het definiëren van wat de DOM is wat die letters voor staan.

13
00:01:05,460 --> 00:01:08,300
Ik wil dat je een goed begrip van waarom dit is spannend te hebben.

14
00:01:08,310 --> 00:01:17,000
Ik ga je laten zien een aantal leuke toepassingen die andere mensen hebben gebouwd met behulp van dit spul dat we gaan om te leren dan gaan we praten over wat ik noem de selecteer manipuleren workflow.

15
00:01:17,250 --> 00:01:19,230
Dus laten we beginnen.

16
00:01:19,230 --> 00:01:20,910
Dus waarom zou je zorg over dit alles.

17
00:01:21,000 --> 00:01:22,550
Wel zijn er zoveel redenen.

18
00:01:22,680 --> 00:01:40,890
Vrijwel elke grote web app die er nu dingen zoals Twitter en Facebook Instagram YouTube Gmail ze gebruiken allemaal een ton van javascript en de meeste van die javascript is de interactie met de hond interactie met elk team uit en de SS Dus communiceren we met de Dom te doen dingen zoals games.

19
00:01:41,130 --> 00:01:50,780
We konden Tic Tac Toe maken we konden een platform een ​​spel als Mario kunnen we het gebruiken om meer praktische dingen, zoals drop-down menu's vorm validaties doen.

20
00:01:50,980 --> 00:01:52,760
Dat is hoe we webpagina's interactief.

21
00:01:52,770 --> 00:01:54,470
Zijn hoe we animaties kunt toevoegen.

22
00:01:54,600 --> 00:02:10,040
En de laatste hier echt vat het vrijwel elke geweldige plaats ooit hoewel eigenlijk alleen maar in de afgelopen jaren gebruikt veel javascript om de Dom te manipuleren zoals ik al eerder ik ga je voor het eerst laten zien een paar voorbeelden voordat we beginnen met het definiëren van genoemde deze termen te praten over wat de DOM is hoe het werkt.

23
00:02:10,080 --> 00:02:11,870
Ik wil je laten zien een paar websites.

24
00:02:12,540 --> 00:02:20,910
Dus de eerste is gewoon google en ik weet niet hoeveel je aandacht te besteden aan dit, maar wanneer je begint te zoeken naar iets op Google als Halo.

25
00:02:21,000 --> 00:02:34,020
Merk op hoe ik dit ding dat lijkt dit is al zijn Timo dit is een soort van div of iets die geraakt in en getoond en de veranderende terwijl ik typ soort dingen als ik typ hello kitty ik nieuwe resultaten te krijgen.

26
00:02:34,020 --> 00:02:39,080
Dat alles gebeurt met javascript maar dit is het soort ding dat we gaan kunnen doen na een paar video's.

27
00:02:39,120 --> 00:02:43,770
Natuurlijk zullen we niet in staat zijn om de backend dat Google te schrijven, maar we zullen in staat zijn om de front-end spul hier te doen.

28
00:02:43,770 --> 00:02:49,090
Alle HMO al het succes al deze effecten die je ziet zal gemakkelijk in staat zijn om te repliceren.

29
00:02:49,110 --> 00:03:01,000
Dus de volgende ding dat ik wil benadrukken is op uw website Tomi's er deze cursussen knop Brough en toen ik erop klik krijg ik de uitschuifbare menu dat alles naar rechts duwt en ik heb al deze categorieën om uit te kiezen.

30
00:03:01,290 --> 00:03:06,400
En als een hover over een categorie die u kunt zien heb ik krijg dit submenu dat verschijnt.

31
00:03:06,660 --> 00:03:11,140
Dus dat is alles wat ze javascript dingen worden toegevoegd aan de pagina nieuwe hem uit in de leeftijd elementen.

32
00:03:11,140 --> 00:03:13,230
Dit zijn waarschijnlijk lijst met items en anker-tags.

33
00:03:13,350 --> 00:03:19,790
Ze worden toegevoegd aan de pagina die wordt verborgen en in kleur weergegeven is aan het veranderen als ik over de dingen veel interactiviteit te scrollen.

34
00:03:19,830 --> 00:03:22,430
Dus de volgende ding dat ik wil laten zien is een van mijn favorieten.

35
00:03:22,650 --> 00:03:24,560
Het is een website genaamd pad aanval.

36
00:03:24,780 --> 00:03:26,030
Dus dit is een beetje anders.

37
00:03:26,100 --> 00:03:33,210
Het is niet echt een webapplicatie die je zou gebruiken, maar het is echt leuk speelgoed en een grote tech demo van wat u kunt doen met H.T. muis.

38
00:03:33,250 --> 00:03:37,940
SS In javascript dus ik beveel dat u doorgaan en proberen dit op uw eigen.

39
00:03:38,080 --> 00:03:48,810
Patta tap dot com en ik moet doen is beginnen met het typen op mijn toetsenbord in elke toets die ik druk komt overeen met een geluid dat speelt en een koele animatie die speelt.

40
00:03:48,900 --> 00:03:51,940
Dus laat ik u een voorbeeld geven.

41
00:03:52,080 --> 00:03:54,100
Hier is er nog een.

42
00:03:55,860 --> 00:04:02,230
Dus je kunt ergens verdwalen.

43
00:04:03,510 --> 00:04:06,010
Dus dit somt de soort dingen die we kunnen doen.

44
00:04:06,120 --> 00:04:19,710
We hebben interactiviteit waar ik het indrukken van een toets, zodat de code alleen wordt uitgevoerd als ik op een bepaalde toets en dan die code is niet alleen speelt als geluid, maar het is ook het veranderen van wat we zien visueel.

45
00:04:19,710 --> 00:04:26,280
Dus het is niet alleen voortdurend in te loggen het is niet alleen het gebruik van waarschuwingen het is eigenlijk het scherm kwam uit in de CSSA die we zien veranderen.

46
00:04:26,700 --> 00:04:31,790
Dus hopelijk deze voorbeelden heb je op zijn minst een beetje enthousiast over alle geweldige dingen die we staan ​​op het punt om te leren.