1
00:00:00,420 --> 00:00:01,690
Già bentornato

2
00:00:01,980 --> 00:00:03,600
Quindi ho delle ottime notizie.

3
00:00:03,600 --> 00:00:08,130
È finalmente giunto il momento di prendere javascript e combinarlo con il nostro H. M. S. valutare.

4
00:00:08,250 --> 00:00:10,160
Questa è di gran lunga la mia unità preferita.

5
00:00:10,170 --> 00:00:13,800
Il mio argomento preferito per insegnare tutto ciò che ho trascorso la vita insegnando.

6
00:00:13,860 --> 00:00:16,180
È davvero dove javascript inizia a pagare.

7
00:00:16,200 --> 00:00:18,480
Quindi abbiamo fatto alcune semplici app fino a questo punto.

8
00:00:18,540 --> 00:00:23,340
molto eccitante, ma tutto cambierà ora perché stiamo per scatenare la potenza di Javascript.

9
00:00:23,340 --> 00:00:27,310
Semplice da elencare usando avvisi e prompt e so che non è

10
00:00:27,510 --> 00:00:31,830
E poi questa unità faremo cose come fare un gioco interattivo faremo una vera lista

11
00:00:31,830 --> 00:00:38,070
delle cose con una forma reale con veri pulsanti e checkbox e Javascript dietro di essa e animazioni e ogni sorta

12
00:00:38,070 --> 00:00:43,200
di cose interessanti davvero interessanti dove hai davvero la sensazione di aver realizzato qualcosa non solo una

13
00:00:43,200 --> 00:00:48,360
piccola riga di comando o una piccola app per console javascript, ma qualcosa di reale che potresti condividere.

14
00:00:48,840 --> 00:00:55,410
Quindi il modo in cui facciamo tutto questo è attraverso una tecnologia chiamata DOM che è quella.

15
00:00:55,530 --> 00:01:00,210
Quindi questa lezione servirà come introduzione al DOM per parlare di alcune cose

16
00:01:00,210 --> 00:01:01,090
nei prossimi video.

17
00:01:01,140 --> 00:01:05,450
Voglio iniziare definendo cos'è il DOM ciò che rappresentano queste lettere.

18
00:01:05,460 --> 00:01:08,300
Voglio che tu capisca bene perché è eccitante.

19
00:01:08,310 --> 00:01:12,180
Vi mostrerò alcune interessanti applicazioni che altre persone hanno creato usando questa roba

20
00:01:12,180 --> 00:01:17,000
che impareremo, quindi parleremo di ciò che chiamo la selezione e manipoleremo il flusso di lavoro.

21
00:01:17,250 --> 00:01:19,230
Quindi iniziamo.

22
00:01:19,230 --> 00:01:20,910
Quindi perché dovresti preoccuparti di tutto questo.

23
00:01:21,000 --> 00:01:22,550
Bene, ci sono tanti motivi.

24
00:01:22,680 --> 00:01:29,550
con il cane che interagisce con ogni squadra e le SS Quindi interagiamo con il Dom per fare cose come i giochi.

25
00:01:29,790 --> 00:01:35,610
Praticamente tutte le app di grandi dimensioni là fuori in questo momento cose come Twitter e Facebook Instagram

26
00:01:35,610 --> 00:01:40,890
YouTube Gmail usano tutti un sacco di javascript e la maggior parte di questi javascript interagisce

27
00:01:41,130 --> 00:01:46,740
Potremmo fare tic tac toe potremmo fare di una piattaforma un gioco come Mario, possiamo

28
00:01:46,740 --> 00:01:50,780
usarlo per fare cose più pratiche come menu a tendina, convalide.

29
00:01:50,980 --> 00:01:52,760
Ecco come rendiamo le pagine web interattive.

30
00:01:52,770 --> 00:01:54,470
È come possiamo aggiungere animazioni.

31
00:01:54,600 --> 00:01:59,520
ultimi anni usa un sacco di javascript per manipolare il Dom come ho detto prima,

32
00:01:59,520 --> 00:02:04,710
vi mostrerò alcuni esempi prima di iniziare a definire questi termini parlano di come funziona il DOM.

33
00:02:04,710 --> 00:02:09,270
E l'ultimo qui lo riassume praticamente in ogni sito fantastico, anche se in realtà

34
00:02:09,270 --> 00:02:10,040
solo negli

35
00:02:10,080 --> 00:02:11,870
Voglio mostrarti alcuni siti web.

36
00:02:12,540 --> 00:02:17,370
Quindi il primo è solo google e non so quanto presti attenzione a questo,

37
00:02:17,370 --> 00:02:20,910
ma quando inizi a cercare qualcosa su Google come Halo.

38
00:02:21,000 --> 00:02:27,060
Notate come ottengo questa cosa che appare questa è tutta la sua Timo questa è una sorta di div

39
00:02:27,060 --> 00:02:33,000
o qualcosa che viene colpito e mostrato e che cambia mentre digito cose come se scrivo ciao kitty

40
00:02:33,000 --> 00:02:34,020
ottengo nuovi risultati.

41
00:02:34,020 --> 00:02:38,190
Questo è tutto fatto con javascript, ma questo è il tipo di cosa che saremo in grado di

42
00:02:38,190 --> 00:02:39,080
fare dopo alcuni video.

43
00:02:39,120 --> 00:02:43,140
Ovviamente non saremo in grado di scrivere il backend di Google ma saremo in grado di fare il

44
00:02:43,140 --> 00:02:43,770
front end qui.

45
00:02:43,770 --> 00:02:49,090
Tutti gli HMO, tutti i successi che tutti questi effetti potranno facilmente replicare.

46
00:02:49,110 --> 00:02:54,000
Quindi la prossima cosa che voglio evidenziare è sul tuo sito web di Tomi c'è il pulsante dei corsi

47
00:02:54,380 --> 00:02:59,280
di Brough e quando clicco su di esso ottengo il menu a scorrimento che spinge tutto verso destra e

48
00:02:59,280 --> 00:03:01,000
ho tutte queste categorie tra cui scegliere.

49
00:03:01,290 --> 00:03:06,400
E come al passaggio del mouse su una categoria puoi vedere che ho questo sottomenu che si apre.

50
00:03:06,660 --> 00:03:11,140
Quindi sono tutte cose javascript che vengono aggiunte alla pagina con elementi nuovi e invecchiati.

51
00:03:11,140 --> 00:03:13,230
Questi sono probabilmente articoli di elenco e tag di ancoraggio.

52
00:03:13,350 --> 00:03:17,970
Sono stati aggiunti alla pagina che è nascosta e mostrati a colori sta cambiando mentre scorro

53
00:03:18,420 --> 00:03:19,790
le cose con molta interattività.

54
00:03:19,830 --> 00:03:22,430
Quindi la prossima cosa che voglio mostrare è una delle mie preferite.

55
00:03:22,650 --> 00:03:24,560
È un sito Web chiamato pad attack.

56
00:03:24,780 --> 00:03:26,030
Quindi questo è un po 'diverso.

57
00:03:26,100 --> 00:03:31,410
Non è proprio un'applicazione web che useresti ma è un gioco davvero divertente e una grande dimostrazione tecnologica di ciò che puoi

58
00:03:31,410 --> 00:03:33,210
fare con H. T. topo.

59
00:03:33,250 --> 00:03:37,940
SS In javascript quindi consiglio vivamente di andare avanti e provare da solo.

60
00:03:38,080 --> 00:03:45,660
Patta tap dot com e devo fare è iniziare a digitare sulla mia tastiera in ogni tasto che premo corrisponde a un

61
00:03:45,660 --> 00:03:48,810
suono che suona e una bella animazione che suona.

62
00:03:48,900 --> 00:03:51,940
Quindi lascia che ti mostri un esempio.

63
00:03:52,080 --> 00:03:54,100
Ecco un altro.

64
00:03:55,860 --> 00:03:57,040
Quindi puoi perderti da qualche parte.

65
00:04:03,510 --> 00:04:06,010
Quindi questo riassume il tipo di cosa che possiamo fare.

66
00:04:06,120 --> 00:04:11,880
Abbiamo l'interattività in cui sto premendo un tasto in modo che il codice sia in esecuzione solo

67
00:04:11,890 --> 00:04:19,710
quando premo un determinato tasto e quindi quel codice non sta solo suonando come suono ma sta anche cambiando ciò che vediamo visivamente.

68
00:04:19,710 --> 00:04:23,970
Quindi non è solo la registrazione continua, non è solo usando gli avvisi, ma sta effettivamente cambiando

69
00:04:24,200 --> 00:04:26,280
lo schermo che è uscito nel CSSA che vediamo.

70
00:04:26,700 --> 00:04:31,110
Quindi spero che quegli esempi ti abbiano almeno un po 'emozionato riguardo a tutte le cose meravigliose che

71
00:04:31,110 --> 00:04:31,790
stiamo per imparare.