Curso Gratuito de Javascript

Prévia do material em texto

<p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>Curso de Javascript</p><p>Illusion Squad</p><p>Javascript: programação</p><p>para a web</p><p>___</p><p>Por: sɪʀɪᴜs#4601</p><p>INTRODUÇÃO</p><p>Olá, eu sou Sirius e este é um curso gratuito de Javascript promovido pela Illusion Squad.</p><p>Introdução ao Javascript</p><p>Vou supor que você viu a aula do professor anterior, Jeall, sobre alerts, consoles e variáveis. Caso</p><p>não tenha visto ainda, sugiro que a assista para que possamos seguir sem complicações</p><p>Aula 1 - alerts, consoles e variáveis:</p><p>https://www.youtube.com/watch?v=Zn184zws8tE</p><p>https://www.youtube.com/watch?v=Zn184zws8tE</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>2</p><p>Classe document</p><p>O document representa qualquer página da web carregada no navegador. Ele</p><p>descreve propriedades e métodos comuns para qualquer tipo de documento.</p><p>Alguns exemplos de propriedades</p><p>- title : Define ou retorna o título da página</p><p>Neste exemplo, exibimos o título da página em um alert(), depois</p><p>alteramos/atualizamos seu valor (document.title = ‘New title’) e solicitamos um</p><p>último alert para exibir o novo título da página</p><p>- URL: retorna o link/url completo da página</p><p>Exemplo:</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>3</p><p>- visibilityState: Diz se o document está visível(visible) ou oculto(hidden).</p><p>(alert(document.visibilityState))</p><p>Exemplo de método</p><p>- write: Escreve um texto no documento.</p><p>Exemplo:</p><p>alert(document.write=’text’)</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>4</p><p>- Você pode acessar a lista completa de propriedades e métodos na documentação.</p><p>- Dica: algumas funções ou métodos do Javascript podem ter sido descontinuados, então</p><p>sempre que ver o ícone de uma lixeirinha na função(documentação). É porque não se</p><p>deve mais usá -lo(a).</p><p>Exemplo:</p><p>-> nesse caso, não se deve mais usar o alinkColor.</p><p>Arrays e objetos</p><p>É muito importante saber usar arrays e objetos. Vamos lá?</p><p>- Objetos</p><p>Um objeto é uma coleção de dados .Usamos objetos para agrupar propriedades ,</p><p>funções e valores em variáveis.</p><p>Exemplo:</p><p>var people = {</p><p>name: 'João',</p><p>https://developer.mozilla.org/en-US/docs/Web/API/Document</p><p>https://developer.mozilla.org/en-US/docs/Web/API/Document</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>5</p><p>age: 17,</p><p>weight: 65,</p><p>}</p><p>alert(people.name)</p><p>Aqui eu defini, name, age e weight (nome, idade e peso) de uma pessoa, depois usei um</p><p>alert para acessar o name dentro do objeto:</p><p>Você ainda pode alterar e adicionar novas propriedades a um objeto!</p><p>Veja como é simples</p><p>people.age = 18;</p><p>people.friends = 9;</p><p>people['height'] = '1,70';</p><p>alert(`${people.height}, ${people.age}, ${people.friends}`);</p><p>para adicionar uma propriedade numérica, basta apenas inserir</p><p>people.NomeDaPropriedade, agora, se for uma em string,</p><p>people[‘NomeDaPropriedade’] = ‘string’</p><p>Resultado:</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>6</p><p>A propriedade age foi atualizada, enquanto height e friends foram adicionadas.</p><p>- Array</p><p>Arrays, geralmente conhecidos como lista de itens. Eles são, basicamente, objetos que podem</p><p>possuir múltiplos valores em lista. Um array pode ser armazenado em uma variável e</p><p>manipulado como qualquer um. A diferença, é que se nós quisermos podemos acessar apenas</p><p>um valor dele.</p><p>1. Como declarar?</p><p>Para usar um array, precisamos declará-lo em uma variável e fornecer-lhe um valor:</p><p>let owners = ['cleito', 'Duarte', 'N1ght'];</p><p>let members = ['_Vênus', 'AllyO', '! aKL'];</p><p>Se quisermos exibir um nome em específico, como ‘Duarte’, devemos informar sua</p><p>posição.</p><p>alert(owners[1])</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>7</p><p>Resultado:</p><p>E então você se pergunta:</p><p>‘Mas, Sirius, o primeiro nome não é “cleito”? Por quê ele exibiu o segundo nome?’</p><p>A resposta é bem simples;</p><p>Um array não se inicia na posição ‘1’, e sim na posição ‘0’, logo, se eu quisesse exibir</p><p>‘cleito’, eu colocaria alert(owners[0]).</p><p>Para alterar um item, basta indicar sua posição e o novo valor:</p><p>alert(members[2] = ‘Homo’)</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>8</p><p>Neste exemplo, alterei o nome na posição 2 do array(! aKL), para ‘Homo’ e exibi usando</p><p>alert.</p><p>Para adicionar, usamos o método push().</p><p>members.push('Sirius', '! Black')</p><p>alert(members)</p><p>Resultado:</p><p>Existe ainda, o método pop(). Que remove o último item da lista.</p><p>let owners = ['cleito', 'Duarte', 'N1ght'];</p><p>let members = ['_Vênus', 'AllyO', '! aKL'];</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>9</p><p>members.push('Sirius', '! Black')</p><p>members.pop()</p><p>alert(members)</p><p>Resultado:</p><p>- Para quem quiser se aprofundar(MDN).</p><p>Funções</p><p>Uma função é um conjunto de instruções(código), que pode fazer um cálculo ou executar uma</p><p>tarefa/ação.</p><p>Sem mais enrolação, é assim que se declara uma função</p><p>Funçoẽs estáticas</p><p>function functionName (parametros) {</p><p>// código da função</p><p>https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>10</p><p>return //ação que deve ser efetuada</p><p>}</p><p>Primeiro, digitamos function, uma chave para indicar que estamos criando uma função, logo</p><p>após, damos um nome a ela. Depois usamos parênteses e definimos os parâmetros. Que são</p><p>uma espécie de itens que vamos usar ou mandar para a função, tudo isso, envolvido por um par</p><p>de chaves(objeto).</p><p>Exemplo:</p><p>function soma(a , b) {</p><p>return a + b;</p><p>}</p><p>alert(soma(2, 4))</p><p>Aqui, criamos a função soma, damos como parâmetro, a e b, que podem ser qualquer número</p><p>real. Após isso, usamos return para retornar o resultado de a + b.</p><p>No final , chamamos a função e definimos a como 2 e b como 4. Ou seja, retorne 2 + 4.</p><p>Resultado:</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>11</p><p>Você também pode fazer isso com multiplicação(*), divisão(/),resto(%), subtração(-) ou</p><p>exponencial(**).</p><p>Exemplo de como usar retornando no Html:</p><p>document.write('O dobro de 49 é: ')</p><p>document.write(dobro(49)) // num vezes 2</p><p>function dobro(num) {</p><p>var resposta = num * 2;</p><p>return resposta</p><p>}</p><p>Resultado:</p><p>Vamos a um exemplo um pouco diferente:</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>12</p><p>var numero = prompt("Digite num numero: ");</p><p>numero = parseInt(numero);</p><p>document.write("O quadrado de " + numero + " é: " +</p><p>quadrado(numero))</p><p>function quadrado(numero) {</p><p>return (numero * numero);</p><p>}</p><p>Retorna:</p><p>Usamos prompt(um tipo de window.alert) para que possamos pegar o número fornecido(7),</p><p>e exibir o quadrado dele (7 * 7)</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>13</p><p>Funções anônimas</p><p>As funções anônimas, são aquelas que não tem nome.</p><p>Exemplo:</p><p>let show = function() {</p><p>alert('Hello world!')</p><p>}</p><p>show()</p><p>Aqui, atribuímos uma função a uma variável de nome show e a chamei no final (show()). Mas</p><p>note que não há nenhum nome entre a palavra chave function e os parênteses’()’</p><p>Resultado:</p><p>Arrow functions</p><p>Podemos reduzir a função do exemplo anterior usando uma arrow function.</p><p>Exemplo:</p><p>let show = () => alert('Hello world!')</p><p>show()</p><p>Il</p><p>lu</p><p>si</p><p>on</p><p>S</p><p>qu</p><p>ad</p><p>14</p><p>Resultado:</p><p>se você for usar mais de uma linha, vai ser obrigado a usar um objeto({}) para envolver tudo</p><p>Exemplo:</p><p>let show = () => {</p><p>alert('Hello world!');</p><p>}</p><p>show()</p><p>Observação</p><p>E todos os exemplos que usei alert, vocês pode sim usar outra função, como console.log, por</p><p>exemplo</p><p>- Palavras chave da aula: document, arrays, objetos e funções.</p><p>Illusion Family © 2021 - 2023</p>