[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:05.96,Default,,0000,0000,0000,,No último vídeo mostrei como definir\Nestilos em JavaScript, como este aqui.
Dialogue: 0,0:00:06.61,0:00:10.20,Default,,0000,0000,0000,,Se você definir um monte de estilos em\NJavaScript, você pode acabar
Dialogue: 0,0:00:10.20,0:00:14.67,Default,,0000,0000,0000,,com centenas de linhas de código apenas\Ndefinindo os valores das propriedades CSS.
Dialogue: 0,0:00:14.67,0:00:18.08,Default,,0000,0000,0000,,E isso pode realmente sobrecarregar\No seu JavaScript.
Dialogue: 0,0:00:18.57,0:00:20.67,Default,,0000,0000,0000,,Há uma outra forma que poderíamos\Nfazer isso.
Dialogue: 0,0:00:20.67,0:00:23.21,Default,,0000,0000,0000,,Poderíamos criar uma classe CSS,
Dialogue: 0,0:00:23.21,0:00:28.28,Default,,0000,0000,0000,,e adicionar uma regra CSS para essa classe\Ncom os novos estilos que queremos,
Dialogue: 0,0:00:28.28,0:00:33.12,Default,,0000,0000,0000,,e em seguida, adicionar dinamicamente\No nome da classe em JavaScript.
Dialogue: 0,0:00:33.12,0:00:38.93,Default,,0000,0000,0000,,Vamos começar aqui com a {\i1}tag{\i0} '{\i1}{\i0}'\Ne tentar fazer isso.{\i0}
Dialogue: 0,0:00:38.93,0:00:45.80,Default,,0000,0000,0000,,Vamos fazer uma classe '{\i1}.catcolors{\i0}'\Ne a regra CSS para ela.
Dialogue: 0,0:00:45.80,0:00:53.08,Default,,0000,0000,0000,,E vai ter {\i1}color: orange{\i0} (cor: laranja), \Ne {\i1}background-color: black{\i0} (fundo: preto).
Dialogue: 0,0:00:54.36,0:00:58.85,Default,,0000,0000,0000,,Agora, para atribuir isso ao elemento\N{\i1}heading{\i0}, podemos dizer:
Dialogue: 0,0:00:58.85,0:01:05.81,Default,,0000,0000,0000,,{\i1}headingEl.className = "catcolors"{\i0};
Dialogue: 0,0:01:05.81,0:01:09.48,Default,,0000,0000,0000,,Podemos eliminar a atribuição da cor
Dialogue: 0,0:01:09.48,0:01:12.22,Default,,0000,0000,0000,,e da cor de fundo em JavaScript.
Dialogue: 0,0:01:12.22,0:01:13.32,Default,,0000,0000,0000,,Pronto!
Dialogue: 0,0:01:13.32,0:01:15.11,Default,,0000,0000,0000,,Assim funcionou.
Dialogue: 0,0:01:15.11,0:01:17.47,Default,,0000,0000,0000,,Mas notou algo estranho?
Dialogue: 0,0:01:17.47,0:01:21.25,Default,,0000,0000,0000,,O atributo HTML para nomes de classes\Né apenas "{\i1}class{\i0}".
Dialogue: 0,0:01:21.25,0:01:26.78,Default,,0000,0000,0000,,Se tivesse feito isso em HTML, teria sido\N{\i1}class="catcolors"{\i0}.
Dialogue: 0,0:01:26.78,0:01:31.59,Default,,0000,0000,0000,,Mas quando eu faço isso em JavaScript,\Neu tenho que dizer {\i1}.className{\i0},
Dialogue: 0,0:01:31.59,0:01:33.81,Default,,0000,0000,0000,,o que não estamos acostumados.
Dialogue: 0,0:01:33.81,0:01:39.08,Default,,0000,0000,0000,,Isso é porque o {\i1}class{\i0} é na verdade uma\Npalavra-chave na linguagem JavaScript
Dialogue: 0,0:01:39.08,0:01:42.61,Default,,0000,0000,0000,,que tem um significado especial\Npara a linguagem.
Dialogue: 0,0:01:42.61,0:01:47.53,Default,,0000,0000,0000,,Por causa disso, os navegadores decidiram\Nusar "{\i1}className{\i0}" para se referir
Dialogue: 0,0:01:47.53,0:01:52.66,Default,,0000,0000,0000,,ao atributo de classe HTML, apenas\Npara que não se confundissem.
Dialogue: 0,0:01:53.22,0:01:56.61,Default,,0000,0000,0000,,Lembre-se, se você deseja definir o\Natributo de classe de um elemento
Dialogue: 0,0:01:56.61,0:02:00.33,Default,,0000,0000,0000,,você usa {\i1}.className={\i0}
Dialogue: 0,0:02:01.44,0:02:04.38,Default,,0000,0000,0000,,Agora, para atribuir isso a cada um\Ndos nomes de animais,
Dialogue: 0,0:02:04.38,0:02:06.66,Default,,0000,0000,0000,,podemos colocá-lo dentro do loop, então:
Dialogue: 0,0:02:06.66,0:02:13.45,Default,,0000,0000,0000,,{\i1}nameEls[i].className="catColors";{\i0}
Dialogue: 0,0:02:14.61,0:02:19.43,Default,,0000,0000,0000,,Isso adicionará o nome da classe, mas na\Nverdade, ele irá remover quaisquer classes
Dialogue: 0,0:02:19.43,0:02:23.70,Default,,0000,0000,0000,,que estavam lá antes, porque\Ndissemos que é igual.
Dialogue: 0,0:02:23.70,0:02:28.24,Default,,0000,0000,0000,,Se tivéssemos quaisquer classes lá antes,\Nagora já se foram.
Dialogue: 0,0:02:28.24,0:02:32.05,Default,,0000,0000,0000,,Agora, eles realmente têm classe antes,\Nque é {\i1}class = "animal"{\i0}.
Dialogue: 0,0:02:32.05,0:02:34.34,Default,,0000,0000,0000,,E então essa se tornou {\i1}catColors{\i0}.
Dialogue: 0,0:02:34.34,0:02:41.30,Default,,0000,0000,0000,,O que realmente queremos fazer é adicionar\Num novo nome de classe para este atributo.
Dialogue: 0,0:02:41.30,0:02:47.56,Default,,0000,0000,0000,,Podemos fazer isso escrevendo\N{\i1}+= " catColors{\i0}".
Dialogue: 0,0:02:47.56,0:02:48.83,Default,,0000,0000,0000,,Lá vamos nós.
Dialogue: 0,0:02:48.83,0:02:51.90,Default,,0000,0000,0000,,Essa é a coisa segura a fazer,\Nporque vai pegar
Dialogue: 0,0:02:51.90,0:02:53.90,Default,,0000,0000,0000,,qualquer que seja a classe anterior,
Dialogue: 0,0:02:53.90,0:02:58.05,Default,,0000,0000,0000,,adicionar a ela um espaço e\Ndepois a nova classe.
Dialogue: 0,0:02:58.100,0:03:02.21,Default,,0000,0000,0000,,Existe outra maneira de fazer isso\Nem navegadores mais recentes
Dialogue: 0,0:03:02.21,0:03:04.98,Default,,0000,0000,0000,,utilizando a propriedade {\i1}classList{\i0}.
Dialogue: 0,0:03:05.92,0:03:15.14,Default,,0000,0000,0000,,Então, para fazer isso dizemos:\N{\i1}nameEls[i].classList.add("catcolors");{\i0}.
Dialogue: 0,0:03:16.24,0:03:19.65,Default,,0000,0000,0000,,Isso é muito mais agradável,\Nmas não funciona em todos os lugares.
Dialogue: 0,0:03:19.65,0:03:24.01,Default,,0000,0000,0000,,Se você quiser usar isso,\Nvocê tem que ir na caniuse.com,
Dialogue: 0,0:03:24.01,0:03:26.53,Default,,0000,0000,0000,,e ter certeza que é suportado\Nem todos os navegadores
Dialogue: 0,0:03:26.53,0:03:28.76,Default,,0000,0000,0000,,nos quais você queira que\Nsua página funcione.
Dialogue: 0,0:03:28.76,0:03:32.19,Default,,0000,0000,0000,,É muito mais agradável, mas não é bom\Nse suas páginas pararem
Dialogue: 0,0:03:32.19,0:03:36.25,Default,,0000,0000,0000,,porque você está usando uma função que\No navegador não conhece.
Dialogue: 0,0:03:36.25,0:03:38.14,Default,,0000,0000,0000,,Por isso só vou comentá-la.
Dialogue: 0,0:03:38.14,0:03:41.34,Default,,0000,0000,0000,,Porque quero a minha funcionando \Nem um monte de navegadores.
Dialogue: 0,0:03:41.34,0:03:46.07,Default,,0000,0000,0000,,Têm muitas vezes que queremos \Nmudar os estilos individuais,
Dialogue: 0,0:03:46.07,0:03:48.56,Default,,0000,0000,0000,,em vez de atribuir nomes de classes.
Dialogue: 0,0:03:48.56,0:03:54.46,Default,,0000,0000,0000,,Lembre-se que você tem essas duas\Nferramentas em sua caixa de ferramentas,
Dialogue: 0,0:03:54.46,0:03:58.21,Default,,0000,0000,0000,,e pense sobre o que poderia ser melhor,\Ndependendo da situação.
Dialogue: 0,0:03:58.21,0:04:00.00,Default,,0000,0000,0000,,Legendado por [{\i1}Fernando dos Reis{\i0}]\NRevisado por [Carlos A. N. C. R.]