1
00:00:00,420 --> 00:00:01,690
Bienvenue.

2
00:00:01,980 --> 00:00:03,600
J'ai donc de très bonnes nouvelles.

3
00:00:03,600 --> 00:00:08,130
Il est enfin temps pour nous de prendre javascript et de le combiner avec notre H.M.S. évaluer.

4
00:00:08,250 --> 00:00:10,160
C'est de loin mon unité préférée.

5
00:00:10,170 --> 00:00:13,800
Mon sujet préféré pour enseigner tout ce que j'ai passé ma vie d'enseignement.

6
00:00:13,860 --> 00:00:16,180
C'est vraiment là où javascript commence à payer.

7
00:00:16,200 --> 00:00:18,480
Nous avons donc fait certaines applications simples jusqu'à ce point.

8
00:00:18,540 --> 00:00:27,310
Simple à faire la liste en utilisant les alertes et les invites et je sais que ce n'est pas très excitant, mais tout va changer maintenant parce que nous sommes sur le point de vraiment libérer la puissance de Javascript.

9
00:00:27,510 --> 00:00:48,830
Et puis cette unité, nous allons faire des choses comme faire un jeu interactif, nous allons faire une liste réelle à faire avec une vraie forme avec de vrais boutons et des cases à cocher et Javascript derrière elle et des animations et toutes sortes de choses vraiment intéressantes intéressantes Où vous vous sentez vraiment comme vous avez fait quelque chose non seulement une petite ligne de commande ou une petite application console javascript, mais quelque chose de réel que vous pourriez partager.

10
00:00:48,840 --> 00:00:55,410
Donc, la façon dont nous faisons tout cela est par le biais d'une technologie appelée DOM t o m c'est ça.

11
00:00:55,530 --> 00:01:01,090
Donc, cette leçon va servir d'introduction au DOM pour parler de quelques choses dans les prochaines vidéos.

12
00:01:01,140 --> 00:01:05,450
Je veux commencer par définir ce qu'est le DOM ce que représentent ces lettres.

13
00:01:05,460 --> 00:01:08,300
Je veux que vous ayez une bonne compréhension de pourquoi cela est passionnant.

14
00:01:08,310 --> 00:01:17,000
Je vais vous montrer quelques applications cool que d'autres personnes ont construit à l'aide de ce matériel que nous allons apprendre alors nous allons parler de ce que j'appelle le sélectionner puis manipuler le flux de travail.

15
00:01:17,250 --> 00:01:19,230
Alors, commençons.

16
00:01:19,230 --> 00:01:20,910
Alors pourquoi devriez-vous vous soucier de tout cela.

17
00:01:21,000 --> 00:01:22,550
Eh bien, il ya tellement de raisons.

18
00:01:22,680 --> 00:01:40,890
Pratiquement toutes les grandes applications web là-bas maintenant les choses comme Twitter et Facebook Instagram YouTube Gmail, ils utilisent tous une tonne de javascript et la plupart de ce javascript est en interaction avec le chien interagissant avec chaque équipe et les SS Nous interagissons avec le Dom à faire Choses comme des jeux.

19
00:01:41,130 --> 00:01:50,780
Nous pourrions faire tic tac toe nous pourrions faire une plate-forme un jeu comme Mario, nous pouvons l'utiliser pour faire des choses plus pratiques comme les menus déroulants valides formulaire.

20
00:01:50,980 --> 00:01:52,760
C'est ainsi que nous rendons les pages Web interactives.

21
00:01:52,770 --> 00:01:54,470
C'est comment nous pouvons ajouter des animations.

22
00:01:54,600 --> 00:02:10,040
Et le dernier ici vraiment résume à peu près tous les sites impressionnants jamais bien que vraiment juste dans les dernières années utilise beaucoup de javascript pour manipuler le Dom que j'ai mentionné plus tôt, je vais vous montrer quelques exemples d'abord avant de commencer à définir Ces termes parlent de ce que le DOM est comment il fonctionne.

23
00:02:10,080 --> 00:02:11,870
Je veux vous montrer quelques sites Web.

24
00:02:12,540 --> 00:02:20,910
Donc, le premier est juste google et je ne sais pas combien vous prêtez attention à cela, mais quand vous commencez à chercher quelque chose sur Google comme Halo.

25
00:02:21,000 --> 00:02:34,020
Remarquez comment je reçois cette chose qui apparaît c'est tout son Timo c'est une sorte de div ou quelque chose qui est frappé dans et montré et son évolution que je tape des choses comme si je tape hello kitty je obtenir de nouveaux résultats.

26
00:02:34,020 --> 00:02:39,080
C'est tout fait avec javascript, mais c'est le genre de chose que nous allons être en mesure de faire après quelques vidéos.

27
00:02:39,120 --> 00:02:43,770
Bien sûr, nous ne serons pas en mesure d'écrire le backend que Google a, mais nous serons en mesure de faire le front end stuff ici.

28
00:02:43,770 --> 00:02:49,090
Tous les HMO tous les succès de tous ces effets que vous voyez sera facilement capable de reproduire.

29
00:02:49,110 --> 00:03:01,000
Donc, la prochaine chose que je veux mettre en évidence est sur votre site Tomi, il ya le bouton des cours de ce Brough et quand je clique dessus, je reçois le menu glisser vers le bas qui pousse tout sur la droite et j'ai toutes ces catégories à choisir.

30
00:03:01,290 --> 00:03:06,400
Et comme un survol d'une catégorie, vous pouvez voir, je reçois ce sous-menu qui apparaît.

31
00:03:06,660 --> 00:03:11,140
Donc, c'est tout ce qu'ils sont des choses javascript sont ajoutés à la page nouvelle vieilli lui éléments.

32
00:03:11,140 --> 00:03:13,230
Ce sont probablement des éléments de liste et des balises d'ancrage.

33
00:03:13,350 --> 00:03:19,790
Ils sont ajoutés à la page en cours de dissimulation et affiché en couleur est en train de changer au fur et à mesure que je défile sur les choses beaucoup d'interactivité.

34
00:03:19,830 --> 00:03:22,430
Donc la prochaine chose que je veux montrer est l'un de mes favoris.

35
00:03:22,650 --> 00:03:24,560
C'est un site Web appelé attaque pad.

36
00:03:24,780 --> 00:03:26,030
Donc, c'est un peu différent.

37
00:03:26,100 --> 00:03:33,210
Ce n'est pas vraiment une application web que vous utiliserez, mais c'est vraiment un jouet amusant et une démonstration de grande technologie de ce que vous pouvez faire avec H.T. Souris.

38
00:03:33,250 --> 00:03:37,940
SS En javascript, je vous recommande fortement d'aller de l'avant et de l'essayer par vous-même.

39
00:03:38,080 --> 00:03:48,810
Patta tap dot com et je dois faire est de commencer à taper sur mon clavier dans chaque touche que je presse correspond à un son qui joue et une animation cool qui joue.

40
00:03:48,900 --> 00:03:51,940
Permettez-moi de vous montrer un exemple.

41
00:03:52,080 --> 00:03:54,100
En voici un autre.

42
00:03:55,860 --> 00:04:02,230
Alors vous pouvez vous perdre quelque part.

43
00:04:03,510 --> 00:04:06,010
Donc, cela résume le genre de chose que nous pouvons faire.

44
00:04:06,120 --> 00:04:19,710
Nous avons l'interactivité où j'appuie sur une touche pour que le code ne s'exécute que lorsque j'appuie sur une touche particulière et que le code ne joue pas seulement en tant que son, mais il change aussi ce que nous voyons visuellement.

45
00:04:19,710 --> 00:04:26,280
Donc, ce n'est pas seulement en permanence l'enregistrement, il n'est pas seulement en utilisant des alertes, il est en fait changer l'écran de la sortie dans le CSSA que nous voyons.

46
00:04:26,700 --> 00:04:31,790
Donc j'espère que ces exemples vous ont au moins un peu excités à propos de toutes les choses impressionnantes que nous sommes sur le point d'apprendre.