1
00:00:00,300 --> 00:00:03,940
Quindi ora abbiamo discusso perché dovresti preoccuparti della Domm perché è eccitante.

2
00:00:03,990 --> 00:00:07,640
E abbiamo anche parlato di cosa significhi il modello a oggetti del documento.

3
00:00:07,680 --> 00:00:13,320
Il fatto che sia solo un modello di ogni elemento di una pagina che utilizza oggetti javascript l'oggetto

4
00:00:13,350 --> 00:00:15,130
di livello superiore è chiamato documento.

5
00:00:15,240 --> 00:00:18,340
Quindi è grandioso, ma non abbiamo ancora visto come farlo.

6
00:00:18,390 --> 00:00:23,460
Quindi in questo video introdurrò brevemente il processo di manipolazione delle cose usando il cane.

7
00:00:23,790 --> 00:00:29,630
Quindi ho ridotto l'intero processo a due parole chiave selezionate e manipolate.

8
00:00:29,670 --> 00:00:36,540
applichiamo stili come il colore di sfondo viola bordo un pixel nero solido con javascript e Dom e popolazione.

9
00:00:36,540 --> 00:00:43,620
Quindi, proprio come si vede valutare dove scriviamo un selettore per selezionare qualcosa con la classe di speciali o tutti

10
00:00:43,710 --> 00:00:47,840
quelli h o tutti i tag immagine selezioniamo gli elementi e poi

11
00:00:47,850 --> 00:00:51,380
Selezioniamo anche gli elementi anche se lo facciamo in un modo molto diverso.

12
00:00:51,480 --> 00:00:56,910
Scriviamo il codice javascript che va e seleziona gli elementi e li restituisce a noi e quindi

13
00:00:56,910 --> 00:01:01,260
cambiamo proprietà su di essi in modo da selezionare qualcosa e quindi manipolarlo.

14
00:01:01,290 --> 00:01:06,810
Quindi nelle prossime diapositive ti mostrerò come può selezionare questa intestazione H-1

15
00:01:06,810 --> 00:01:09,750
e come possiamo cambiarla in rosa.

16
00:01:09,750 --> 00:01:14,070
ultimi video, ma non voglio che tu ti concentri sulla sintassi tanto quanto i concetti.

17
00:01:14,160 --> 00:01:15,290
L'ho detto molto negli

18
00:01:15,330 --> 00:01:18,930
I prossimi video entreranno nel nocciolo della selezione e della manipolazione.

19
00:01:18,930 --> 00:01:21,150
Questa è solo una panoramica di come funziona.

20
00:01:21,150 --> 00:01:25,600
Quindi su questa diapositiva mostrerò come puoi selezionare quell'H1 come con C.

21
00:01:25,620 --> 00:01:28,580
Esistono molti modi diversi per selezionare un determinato elemento.

22
00:01:28,800 --> 00:01:36,270
In questo caso questa riga di selezione del puntatore di codici a punti del documento di codice H-1 selezionerà l'H-1 in

23
00:01:36,270 --> 00:01:36,920
questa pagina.

24
00:01:37,050 --> 00:01:40,960
Quindi ho evidenziato qui con questa casella verde in modo da poter vedere cosa viene selezionato.

25
00:01:41,340 --> 00:01:48,640
Quindi, ancora una volta var H-1 questa è una qualsiasi variabile che vogliamo equivale a quel parametro di selezione 8: 1.

26
00:01:48,690 --> 00:01:52,420
Quindi passeremo molto più tempo con il selettore delle query e definiremo di cosa si tratta e come funziona.

27
00:01:52,470 --> 00:01:59,920
Ma restituisce un oggetto che rappresenta questo H1 e lo salva nella variabile H-1.

28
00:01:59,970 --> 00:02:02,190
Quindi questo è il processo di selezione.

29
00:02:02,190 --> 00:02:08,340
La prossima parte è manipolare così da manipolarlo posso fare ogni sorta di cose e tutto quello che ho intenzione

30
00:02:08,340 --> 00:02:11,170
di fare qui è cambiare il colore in rosa.

31
00:02:11,490 --> 00:02:18,470
Quindi scriviamo semplicemente H-1, che è la nostra variabile che ha l'oggetto che rappresenta lo stile del punto H-1.

32
00:02:18,510 --> 00:02:24,690
proprietà e quella proprietà di stile è un oggetto enorme con un mucchio di altre proprietà e il colore è uno di questi.

33
00:02:24,690 --> 00:02:25,580
Questa è una

34
00:02:25,920 --> 00:02:28,920
Quindi H-1 fa stile ma il colore è uguale al rosa.

35
00:02:28,920 --> 00:02:30,240
E poi questo è tutto quello che dobbiamo fare.

36
00:02:30,270 --> 00:02:35,400
E il browser vede che cambio la proprietà in rosa e aggiorna automaticamente ciò

37
00:02:35,820 --> 00:02:37,500
che viene visualizzato rendendolo rosa.

38
00:02:37,500 --> 00:02:41,140
Quindi abbiamo selezionato qui e poi abbiamo manipolato.

39
00:02:42,120 --> 00:02:43,560
Quindi ho un altro esempio qui.

40
00:02:43,610 --> 00:02:45,230
È un po 'più complicato.

41
00:02:45,240 --> 00:02:50,610
Stiamo facendo un'animazione molto semplice in cui ogni secondo cambiamo il colore di sfondo del corpo

42
00:02:50,910 --> 00:02:52,940
tra il blu e il bianco.

43
00:02:52,950 --> 00:02:58,620
Quindi, quello che dobbiamo fare prima è selezionare il corpo e quindi manipolarlo in modo da selezionarlo.

44
00:02:58,740 --> 00:03:03,300
Ho un'altra linea che utilizza il selettore di query di dump del documento che torneremo

45
00:03:03,300 --> 00:03:06,720
ancora nel prossimo documento video che interrogano il corpo del selettore.

46
00:03:06,780 --> 00:03:11,880
Quindi questo mi dà l'elemento del corpo dove effettivamente mi dà la rappresentazione dell'oggetto

47
00:03:11,880 --> 00:03:15,450
il modello di esso che salvi nella variabile del corpo.

48
00:03:15,450 --> 00:03:20,490
userò perché ho bisogno di sapere se vado dal blu al bianco o al bianco al blu.

49
00:03:20,640 --> 00:03:23,940
Poi ho questa variabile blu che è solo un booleano che

50
00:03:24,030 --> 00:03:28,870
Quindi inizia come falso e quindi sto usando l'intervallo impostato che abbiamo coperto alcuni anni fa.

51
00:03:28,920 --> 00:03:32,230
Se non ricordi come funziona, fondamentalmente richiede due argomenti.

52
00:03:32,340 --> 00:03:38,880
Il primo è un codice per eseguire una funzione e il secondo è un numero o un tempo in millisecondi.

53
00:03:39,150 --> 00:03:44,880
Quindi ci vuole questo numero di millisecondi che è di mille o un secondo e ogni secondo

54
00:03:44,880 --> 00:03:46,230
che chiamerà questo codice.

55
00:03:46,560 --> 00:03:51,080
Quindi, cosa fa questo codice, controlla se lo sfondo è attualmente blu se lo è.

56
00:03:51,180 --> 00:03:56,330
Quindi lo cambiamo in bianco se lo sfondo è bianco, quindi lo cambiamo in blu.

57
00:03:56,610 --> 00:04:00,030
Quindi per dare un'occhiata più da vicino abbiamo il nostro se è blu.

58
00:04:00,120 --> 00:04:01,640
Quindi è solo variabile.

59
00:04:01,650 --> 00:04:02,900
Inizia come falso.

60
00:04:02,910 --> 00:04:07,890
Quindi la prima volta che la pagina carica lo sfondo è bianco è blu è falso.

61
00:04:07,920 --> 00:04:15,240
Quindi questa linea non funziona, ma questo corpo altro fa lo sfondo scuro uguale a questo colore esadecimale

62
00:04:15,240 --> 00:04:16,570
che è blu.

63
00:04:16,770 --> 00:04:18,840
In questo modo lo sfondo diventa blu.

64
00:04:19,140 --> 00:04:22,960
Quindi, cambiamo semplicemente la nostra variabile blu da falso a vero.

65
00:04:23,130 --> 00:04:27,690
E questo è un modo carino di farlo con il punto esclamativo o con l'operatore non.

66
00:04:27,780 --> 00:04:32,550
Quindi, questo codice ricomincia la prossima volta è blu è già vero.

67
00:04:32,850 --> 00:04:36,870
Quindi questo codice non esegue il corpo ma lo stile è uguale al bianco.

68
00:04:36,870 --> 00:04:38,550
Quindi ora torniamo al bianco.

69
00:04:38,670 --> 00:04:42,980
Questo non funziona e quindi cambiamo è blu di nuovo a falso.

70
00:04:43,290 --> 00:04:44,980
E questo continua ad andare per sempre.

71
00:04:45,090 --> 00:04:49,740
Quindi non vorrai mai qualcosa di così distratto come un colore di sfondo che cambia ogni secondo.

72
00:04:50,190 --> 00:04:56,160
Ma questo dimostra che possiamo fare cose più complesse del semplice cambio di un H1 dal nero al rosa.

73
00:04:57,450 --> 00:05:03,930
Quindi per racchiudere tutto questo due parole selezionare manipola noi selezioniamo Prendiamo alcuni oggetti che rappresentano gli elementi

74
00:05:03,930 --> 00:05:06,260
e quindi facciamo qualcosa per loro.

75
00:05:06,750 --> 00:05:11,010
Quindi il resto di questa unità sarà focalizzato su diversi modi di selezionare e

76
00:05:11,010 --> 00:05:12,370
quindi diversi modi di manipolare.

77
00:05:12,390 --> 00:05:16,830
Quindi il prossimo video approfondirà i diversi modi di selezionare gli elementi usando javascript.

78
00:05:17,190 --> 00:05:19,470
Ne abbiamo già visto uno già selezionato.

79
00:05:19,500 --> 00:05:21,450
Ci espanderemo su questo e ne impareremo altri