├── projeto-lampada ├── img │ ├── ligada.jpg │ ├── desligada.jpg │ └── quebrada.jpg ├── style.css ├── lampada.js └── index.html └── README.md /projeto-lampada/img/ligada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcode25/aulaJS-DOM/HEAD/projeto-lampada/img/ligada.jpg -------------------------------------------------------------------------------- /projeto-lampada/img/desligada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcode25/aulaJS-DOM/HEAD/projeto-lampada/img/desligada.jpg -------------------------------------------------------------------------------- /projeto-lampada/img/quebrada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcode25/aulaJS-DOM/HEAD/projeto-lampada/img/quebrada.jpg -------------------------------------------------------------------------------- /projeto-lampada/style.css: -------------------------------------------------------------------------------- 1 | header, 2 | main { 3 | display: flex; 4 | flex-direction:column; 5 | align-items: center; 6 | } 7 | 8 | button { 9 | width: 80px; 10 | } 11 | 12 | 13 | -------------------------------------------------------------------------------- /projeto-lampada/lampada.js: -------------------------------------------------------------------------------- 1 | const turnOn = document.getElementById( 'turnOn' ); 2 | const turnOff = document.getElementById( 'turnOff' ); 3 | const lamp = document.getElementById( 'lamp' ); 4 | 5 | function isLampBroken() { 6 | return lamp.src.indexOf('quebrada') > -1 7 | } 8 | 9 | function lampOn() { 10 | if (!isLampBroken ()) { 11 | lamp.src='./img/ligada.jpg'; 12 | } 13 | } 14 | 15 | function lampOff() { 16 | if (!isLampBroken ()) { 17 | lamp.src='./img/desligada.jpg'; 18 | } 19 | } 20 | 21 | turnOn.addEventListener('click', lampOn); 22 | 23 | lamp.addEventListener('mouseover', lampOn); 24 | lamp.addEventListener('mouseleave', lampOff); 25 | -------------------------------------------------------------------------------- /projeto-lampada/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Projeto Lâmpada 8 | 9 | 10 |
11 |

Teste a lâmpada!

12 |
13 |
14 |
15 | lâmpada desligada 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # aulaJS-DOM 2 | 3 | 4 | # O que é JavaScript? 5 | 6 | ![O que é JavaScript](https://d2v4zi8pl64nxt.cloudfront.net/javascript-seo/5948abfc0e2df5.02876591.gif) 7 | 8 | JavaScript é uma linguagem de programação criada em 1995 por Brendan Eich. 9 | 10 | O seu propósito na criação envolvia possibilitar que as páginas web fossem mais dinâmicas, com eventos, botões com funções específicas, e uma conexão melhorada com o back-end. 11 | 12 | Um ano depois de seu lançamento, a Microsoft portou a linguagem para seu navegador, o que ajudou a consolidar a linguagem e torná-la uma das tecnologias mais importantes e utilizadas na internet. 13 | 14 | Embora ela tenha esse nome, **não se deve confundir JavaScript com Java**. Java e JavaScript são linguagens completamente diferentes e possuem propósitos diversos. 15 | 16 | O JavaScript fornece às páginas web a possibilidade de programação, transformação e processamento de dados enviados e recebidos, interagindo com a marcação e exibição de conteúdo da linguagem HTML e com a estilização desse conteúdo proporcionada pelo CSS nessas páginas. 17 | 18 | Outro ponto é que os scripts em JavaScript permitem que se atualize parte do conteúdo de uma página web sem ser necessário carregá-la totalmente. Isso permite a criação de uma infinidade de softwares completos e totalmente funcionais para diversas finalidades. Sites como o Google Docs não existiriam sem essa função, por exemplo. 19 | 20 | ## Adicionando JavaScript no HTML 21 | 22 | Para referenciar o arquivo JS a ser utilizado pelo HTML usaremos a tag ` 29 | 30 | ``` 31 | 32 | Onde utilizar: 33 | 34 | ```HTML 35 | 36 | 37 | 38 | 39 | 40 | 41 | Exemple 42 | 43 | 44 | 45 | 46 | 47 | 48 | ``` 49 | **OBS**: a tag script não é autocontida. Assim, ela deve ser composta por uma tag de abertura, seu conteúdo, e a tag de fechamento. 50 | 51 | --- 52 | 53 | # DOM - Document Object Model 54 | 55 | ![O que é DOM](./assets/domhtml.gif) 56 | 57 | ## O que é DOM ? 58 | 59 | DOM é uma sigla que significa **Document Object Model.** Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do **HTML.** 60 | 61 | O DOM é uma representação de uma página HTML e de todos os seus conteúdos. Por isso, ele se assemelha a uma árvore cujos galhos são nós, onde cada tag e conteúdo geram um nó. 62 | 63 | ![domtree](https://raw.githubusercontent.com/reprograma/On10-TodasEmTech-JavascriptI/main/assets/domtree.jpg) 64 | 65 | **IMPORTANTE**: **o DOM não pertence nem ao HTML, nem ao JavaScript**. Ele é apenas um conjunto de regras implementado pelos principais navegadores. O seu conteúdo é alimentado pelo arquivo em HTML, e ele é consumido pelo nosso script, mas isso não quer dizer que ele pertença ao HTML ou ao JavaScript. 66 | 67 | Tudo em uma página HTML é um nó em uma árvore do DOM, de onde podem surgir ainda outros nós filhos. Cada elemento HTML é um nó. O texto dentro de um elemento HTML é um nó filho da tag em que está inserido. Cada comentário é um nó de comentário dentro da árvore do DOM. 68 | 69 | Assim, o DOM é composto por quatro tipos principais de nós: 70 | 71 | 72 | - **Document** - representa o documento HTML. 73 | - **Element** - são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM. 74 | - **Text** - é o conteúdo de texto que vai entre os elementos (tags). 75 | - **Attribut** - são os todos atributos para um nó específico. No caso, o attribute class="HERO" está associado ao elemento, outros exemplos de atributos são o href, o id, entre outros. 76 | 77 | ![Arvore DOM com tipos de nós](https://raw.githubusercontent.com/reprograma/On10-TodasEmTech-JavascriptI/main/assets/arvoredom.jpeg) 78 | 79 | --- 80 | 81 | ## Manipulando o DOM 82 | 83 | Por que é tão importante entender o que é o DOM e como ele funciona? Para que possamos manipular conteúdo, estrutura e estilo, bem como criar eventos dentro da página HTML por meio do JavaScript ou outras linguagens de programação. 84 | 85 | Podemos manipular o DOM para realizar alterações na estrutura do HTML, alterar estilos, modificar conteúdos e adicionar diversos eventos. 86 | 87 | ![Manipulação DOM](./assets/manipulacaodom.gif) 88 | 89 | --- 90 | 91 | # Métodos de manipulação - HTML/DOM 92 | 93 | Primeiramente, é importante destacar que os métodos de manipulação fazem a ligação entre os nós (elementos) e os eventos. 94 | 95 | São inúmeros os métodos de manipulação do DOM, cuja documentação se encontra nesse [link.](https://developer.mozilla.org/pt-BR/docs/Web/API/Document) 96 | 97 | Mas, vamos concentrar os nossos estudos nos 5 métodos mais utilizados pelo JavaScript. 98 | 99 | ### **getElementById()** 100 | 101 | Esse método retorna o elemento que estiver contendo o nome do ID informado. Como os IDs devem ser únicos, é um método muito útil para pegar apenas o elemento desejado. 102 | 103 | Exemplo: 104 | 105 | #### *HTML* 106 | 107 | ```HTML 108 |
109 | 110 |
111 | ``` 112 | 113 | #### *JavaScript* 114 | 115 | ```js 116 | let getInputId = document.getElementById('textInput'); 117 | ``` 118 | 119 | ### **getElementsByTagName()** 120 | 121 | Uma coleção de todos elementos que contenham o nome da tag informada. 122 | 123 | Exemplo: 124 | 125 | #### *HTML* 126 | 127 | ```HTML 128 |
129 | 130 |
131 | ``` 132 | 133 | #### *JavaScript* 134 | 135 | ```js 136 | const getAge = document.getElementByTagName("text"); 137 | ``` 138 | 139 | ### **querySelector()** 140 | 141 | Mais versátil, esse método retorna qualquer elemento do DOM, como classes, tags e ID's. 142 | 143 | Você apenas precisa deixar explicito se está chamando uma classe, um ID ou uma tag. 144 | 145 | Exemplo: 146 | 147 | #### HTML 148 | 149 | ```HTML 150 |
151 | 152 |
153 | ``` 154 | 155 | #### Javascript 156 | 157 | ```js 158 | let getInputId = document.querySelector('#textInput'); 159 | let getInputClass = document.querySelector('.text-input'); 160 | let getInputTag = document.querySelector('input'); 161 | ``` 162 | 163 | ### **querySelectorAll()** 164 | 165 | Semelhante ao querySelector(), só que retorna um objeto representando os elementos do documento que correspondem ao seletor. 166 | 167 | Se nenhum elemento coincide, a função retorna um objeto vazio. Se a string do seletor é inválida, querySelectorAll() lançará uma exceção. 168 | 169 | ### **Importante**: 170 | 171 | Para selecionar apenas um elemento pelo `id`, é mais viável utlizar `document.getElementById` pois o mesmo é específico para essa finalidade. Caso precise de uma seleção mais avançada, use `document.querySelector` pelo fato de ter a liberdade de utilizar seletores CSS, o que é uma grande vantagem além de ser mais performático para o browser. 172 | 173 | ### **Sintaxe para seletores**: 174 | 175 | ```js 176 | document.getElementById('nome-id'); 177 | //utilizar o nome do ID entre aspas 178 | 179 | document.querySelector('.classe'); 180 | //utilizar o nome da classe entre aspas e acompanhada do ponto . 181 | 182 | document.querySelector('#id'); 183 | //utilizar o nome do id entre aspas e utilizando a hashtag # 184 | 185 | document.querySelector('div'); 186 | //utilizar o nome da tag entre aspas 187 | ``` 188 | ### **getElementsByClassName()** 189 | 190 | Esse método nos permite selecionar elementos do documento incluídos dentro do atributo class. 191 | 192 | Ele recebe um único argumento de string, que pode conter vários identificadores separados por espaços. 193 | 194 | ### **Outros métodos DOM**: 195 | 196 | | Propriedade | Descrição | 197 | | :------------------- | :----------------------------------------------------------------------------------- | 198 | | documentElement | Captura o elemento raiz de um documento HTML. | 199 | | getElementById | Busca um elemento da página Web com o uso do atributo id do elemento. | 200 | | querySelector | Busca um elemento da página Web com o uso do atributo id, classe ou tag do elemento. | 201 | | createElement | Cria um novo elemento na página. | 202 | | createAttribute | Cria um novo atributo na página. | 203 | | createTextNode | Cria um novo texto na página. | 204 | | getElementsByTagName | Retorna um array dos elementos com o mesmo nome. | 205 | | appendChild | Insere um novo elemento filho. | 206 | | removeChild | Remove um elemento filho. | 207 | | parentNode | Retorna o novo pai de um nó. | 208 | 209 | --- 210 | 211 | ## Criar, inserir e excluir elementos da árvore DOM. 212 | 213 | A função `document.createElement()` aceita como parâmetro o nome da tag e retorna o elemento recém criado (mas ainda não inserido). 214 | 215 | ```javascript 216 | let novaTag = document.createElement('p'); 217 | ``` 218 | 219 | Inserimos o elemento com a função `appendChild()`, mas ainda precisamos criar um conteúdo (nó de texto) para o elemento `

`, caso contrário, estaremos inserindo apenas o elemento, sem texto. Para criar um nó de texto utilizaremos a função `document.createTextNode()`. 220 | 221 | ```javascript 222 | let texto = document.createTextNode('meu texto novo'); 223 | ``` 224 | 225 | Antes de inserir o elemento, devemos atribuir o nó de texto a ele. Ou seja, referenciar corretamente o elemento pai ao elemento filho. 226 | 227 | ```javascript 228 | novaTag.appendChild(texto); 229 | ``` 230 | 231 | O Novo elemento existe e tem conteúdo, porém ainda não foi inserido no html existente. Para isso utilizaremos a função `document.querySelector('.nome-da-classe')` e selecionaremos o nó onde o novo elemento que criamos será inserido. 232 | 233 | ```javascript 234 | let minhaDiv = `document.querySelector('.classe-da-div')`; 235 | ``` 236 | 237 | Ou seja, agora com o elemento completo, podemos então, anexá-lo a um elemento

já existente em nossa página HTML. A função `appendChild()` insere o novo elemento filho ao final do elemento pai. 238 | 239 | ```javascript 240 | minhaDiv.appendChild(novaTag); 241 | ``` 242 | 243 | É possível inserir um elemento através da função insertBefore(), ela aceita dois parâmetros: o primeiro é o elemento filho e o segundo é o elemento que servirá de referência para inserir o elemento filho. 244 | Para remover um elemento utilizamos a função removeChild(). 245 | 246 | ## Sintaxe Criar elementos 247 | 248 | ```javascript 249 | document.createElement("nome-da-tag") para criar um elemento 250 | document.createTextNode("algum texto") para criar um nó de texto 251 | elementoPai.appendChild(elementoFilho) para inserir um elemento na última posição 252 | elementoPai.insertBefore(elementoFilho, elementoAnterior) pra inserir um elemento em posição específica 253 | elementoPai.removeChild(elementoFilho) para remover um elemento 254 | ``` 255 | 256 | --- 257 | 258 | ## Métodos do DOM para manipular CSS 259 | 260 | O DOM HTML permite que o JavaScript mude o estilo dos elementos HTML. 261 | 262 | Para alterar o estilo de um elemento HTML, use esta sintaxe: 263 | 264 | ```javascript 265 | elemento.style.property = novo estilo 266 | ``` 267 | 268 | --- 269 | 270 | ## Adicionar e remover classes do HTML pelo Javascript 271 | 272 | O Element.classList é uma propriedade somente leitura que retorna uma coleção com as classes do elemento. 273 | 274 | ```javascript 275 | elemento.classList; 276 | ``` 277 | 278 | A propriedade classList é somente leitura, no entanto, você pode modificá-la usando os métodos add() e remove(). 279 | 280 | `contains()` Retorna um valor booleano, indicando se um elemento tem o nome da classe especificado. Valores possíveis: 281 | 282 | - true - o elemento contém o nome da classe especificado 283 | - false - o elemento não contém o nome da classe especificado 284 | 285 | ```javascript 286 | elemento.classList.contains('classe'); 287 | ``` 288 | 289 | `add()` Adiciona um ou mais nomes de classe a um elemento. Se a classe especificada já existir, a classe não será adicionada 290 | 291 | ```javascript 292 | elemento.classList.add('classe'); 293 | ``` 294 | 295 | `remove()` Remove um ou mais nomes de classe de um elemento. A remoção de uma classe que não existe, NÃO gera um erro 296 | 297 | ```javascript 298 | elemento.classList.remove('classe'); 299 | ``` 300 | 301 | --- 302 | 303 | # Eventos no Javascript 304 | 305 | Os eventos são basicamente um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. Muitas das interações do usuário que está visitando sua página com o conteúdo do seu site podem ser consideradas eventos. 306 | 307 | | Evento | Descrição | 308 | | :---------- | :----------------------------------------------------------- | 309 | | onBlur | remove o foco do elemento | 310 | | onChange | muda o valor do elemento | 311 | | onClick | o elemento é clicado pelo usuário | 312 | | onFocus | o elemento é focado | 313 | | onKeyPress | o usuário pressiona uma tecla sobre o elemento | 314 | | onLoad | carrega o elemento por completo | 315 | | onMouseOver | define ação quando o usuário passa o mouse sobre o elemento | 316 | | onMouseOut | define ação quando o usuário retira o mouse sobre o elemento | 317 | | onSubmit | define ação ao enviar um formulário | 318 | 319 | ### **onClick:** 320 | Evento que realiza alguma coisa quando o usuário clica em um elemento HTML. 321 | 322 | 323 | ```javascript 324 | elemento.addEventListener('click', function (evento) { 325 | //ação a ser executada no clique do elemento 326 | console.log(evento); 327 | }); 328 | ``` 329 | 330 | ### **onSubmit:** 331 | Evento que define uma ação no momento em que um formulário é enviado. 332 | 333 | --- 334 | 335 | ## Event Listener: 336 | 337 | É um manipulador e rastreador de eventos, onde é possível adicionar ou remover um evento sobre qualquer elemento. O Event Listener disponibiliza duas funções principais, são elas: 338 | 339 | - **addEvent** - Adiciona uma função que será disparada quando ocorrer determinado evento no objeto. 340 | - **removeEvent** - Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso. 341 | 342 | ## preventDefault: 343 | 344 | O método cancela o comportamento default/padrão de um determinado item, ou seja, cancela o comportamento que os elementos geralmente tem na página. 345 | 346 | Isso pode ser útil nesses cenários: 347 | 348 | - Ao clicar no botão "Enviar", evite que ele envie um formulário 349 | - Ao clicar em um link, impeça o link de seguir o URL 350 | 351 | *Obs.: nem todos os eventos são canceláveis.* 352 | 353 | ## value: 354 | Define ou retorna o valor do atributo value de um campo de texto. 355 | 356 | A propriedade value contém o valor padrão OU o valor em que um usuário digita. 357 | 358 | Retorne a propriedade value: 359 | 360 | ```javascript 361 | input.value; 362 | ``` 363 | 364 | Defina a propriedade value: 365 | 366 | ```javascript 367 | input.value = texto; 368 | ``` 369 | 370 | --- 371 | 372 | # Funções 373 | 374 | Uma função é um procedimento JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor, 375 | ou seja, uma função é um bloco de código projetado para executar uma tarefa específica. Esse código é definido uma vez e chamado quantas vezes for necessário. 376 | 377 | ```javascript 378 | function square(numero) { 379 | return numero * numero; // não pulamos linha entre return e o que vai ser retornado 380 | } 381 | 382 | console.log(square(4)); //16 383 | console.log(square(5)); //25 384 | alert(square(9)); //81 385 | ``` 386 | --- 387 | 388 | # Condicionais 389 | 390 | Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. 391 | 392 | Exemplos: 393 | 394 | 1) Num jogo, quando a vida do jogador acaba, o jogo se encerra. 395 | 396 | 2) Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; mostra estrelas e uma lua se for noite. 397 | 398 | ![if/else](./assets/if...else.gif) 399 | 400 | ## Tipos de Condicionais 401 | 402 | ### **if...else** 403 | 404 | A mais simples – e mais utilizada – declaração condicional. Sintaxe básica: 405 | 406 | ```javascript 407 | if (condicao) { 408 | //codigo para executar caso a condição seja verdadeira 409 | } else { 410 | //senão, executar este código 411 | } 412 | ``` 413 | 414 | OBS: Não é obrigatório incluir a palavra reservada *else*. O código apresentado a seguir é válido e não produz erros: 415 | 416 | ```javascript 417 | if (condicao) { 418 | 419 | //codigo para executar se a condição for verdadeira 420 | 421 | } 422 | 423 | //código a ser executado 424 | ``` 425 | 426 | ### **if...else if...else** 427 | 428 | O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois? 429 | 430 | Solução: o else if. 431 | 432 | Cada escolha extra requer um bloco adicional para colocar entre if() { ... } e else { ... } 433 | 434 | 435 | ```html 436 | 437 | 444 | ``` 445 | 446 | ```javascript 447 | var select = document.querySelector('select'); 448 | var para = document.querySelector('p'); 449 | 450 | select.addEventListener('change', setWeather); 451 | 452 | function setWeather() { 453 | var choice = select.value; 454 | 455 | if (choice === 'sunny') { 456 | para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; 457 | } else if (choice === 'rainy') { 458 | para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; 459 | } else if (choice === 'snowing') { 460 | para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; 461 | } else if (choice === 'overcast') { 462 | para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; 463 | } else { 464 | para.textContent = ''; 465 | } 466 | } 467 | ``` 468 | ### **switch** 469 | 470 | A estrutura condicional *switch* permite executar um bloco de código diferente de acordo com cada opção (case) especificada. 471 | 472 | Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos. 473 | 474 | ```javascript 475 | var tipoUsuario = "Gerente"; 476 | 477 | switch (tipoUsuario) { 478 | case "Admin": 479 | mensagem = "*|*| Feliz Natal, chefe! |*|*"; 480 | break; 481 | case "Gerente": 482 | mensagem = "Boas festas, meu amigo!"; 483 | break; 484 | default: 485 | mensagem = "Boas festas!"; 486 | } 487 | ``` 488 | 489 | ### **Operador Ternário** 490 | 491 | O operador ternário ou condicional é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for *true*, e outro caso seja *false*. 492 | 493 | ```javascript 494 | ( condition ) ? run this code : run this code instead 495 | ``` 496 | 497 | Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código, ou simplesmente efetuar uma comparação. 498 | 499 | ``` html 500 | 501 | 505 | 506 |

This is my website

507 | ``` 508 | 509 | ``` javascript 510 | var select = document.querySelector('select'); 511 | var html = document.querySelector('html'); 512 | document.body.style.padding = '10px'; 513 | 514 | function update(bgColor, textColor) { 515 | html.style.backgroundColor = bgColor; 516 | html.style.color = textColor; 517 | } 518 | 519 | select.onchange = function() { 520 | ( select.value === 'black' ) ? update('black','white') : update('white','black'); 521 | } 522 | ``` 523 | --- 524 | # Objeto Date() 525 | 526 | **new Date()** -> cria uma instância JavaScript de Date que representa um momento no tempo. 527 | 528 | ``` javascript 529 | new Date(); 530 | new Date(valor); 531 | new Date(dataString); 532 | new Date(ano, mês, dia, hora, minuto, segundo, milissegundo); 533 | ``` 534 | 535 | O objeto Date não possui propriedades, por outro lado, possui muitos métodos. A seguir serão apresentados alguns dos seus principais métodos. 536 | 537 | - getDate(): devolve o dia do mês, um inteiro entre 1 e 31. Não confundir com getDay que retorna o dia da semana. 538 | - getDay() : devolve o dia da semana, inteiro entre 0 e 6 (0 para Domingo). 539 | - getHours(): retorna a hora, inteiro entre 0 e 23. 540 | - getMinutes(): devolve os minutos, inteiro entre 0 e 59. 541 | - getSeconds(): devolve os segundos, inteiro entre 0 e 59. 542 | - getMonth(): devolve o mês, um inteiro entre 0 e 11 (0 para Janeiro). 543 | - getTime(): devolve os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data correspondente ao objeto ao que se passa a mensagem. 544 | - getFullYear(): retorna o ano com todos os dígitos. Funciona com datas posteriores ao ano 2000. 545 | - setDate(d): atualiza o dia do mês. 546 | - setHours(h): atualiza a hora. 547 | - setMinutes(m): muda os minutos. 548 | - setMonth(m): muda o mês (atenção ao mês que começa por 0). 549 | - setSeconds(s): muda os segundos. 550 | - setTime(t): atualiza a data completa. Recebe um número de segundos desde 1 de janeiro de 1970. 551 | - setFullYear(): muda o ano da data ao número que recebe por parâmetro. O número se indica completo ex: 2005 ou 1995. Utilizar este método para estar certo de que tudo funciona para datas posteriores a 2000. 552 | - getimezoneOffset(): Devolva a diferença entre a hora local e a hora GMT (Greenwich, UK Mean Time) sob a forma de um inteiro representando o número de minutos (e não em horas). 553 | - toGMTString(): devolva o valor do atual em hora GMT (Greenwich Mean Time) 554 | 555 | ---- 556 | 557 | # Links Úteis 558 | 559 | **DOM, métodos de manipulação e eventos:** 560 | 561 | https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction 562 | 563 | https://tableless.com.br/entendendo-o-dom-document-object-model/ 564 | 565 | https://www.w3schools.com/jsref/dom_obj_all.asp 566 | 567 | https://www.w3schools.com/js/js_htmldom_events.asp 568 | 569 | **Condicionais:** 570 | 571 | https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals 572 | 573 | *Switch:* 574 | 575 | https://www.devmedia.com.br/javascript-switch/39761 576 | 577 | https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals#instru%C3%A7%C3%B5es_switch 578 | 579 | *Operadores Ternários:* 580 | 581 | https://programadorviking.com.br/if-ternario-javascript/ 582 | 583 | **Objeto Date():** 584 | 585 | http://www.linhadecodigo.com.br/artigo/1003/entendendo-o-objeto-date-do-javascript.aspx 586 | 587 | https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date 588 | 589 | **Exercícios de JavaScript** 590 | 591 | https://www.w3resource.com/javascript-exercises/javascript-dom-exercises.php 592 | 593 | https://exercism.io/tracks/javascript/exercises 594 | --------------------------------------------------------------------------------