no celular, caso contrário, instalo 3. Verificar se o app está logado na conta, caso contrário, instalo 4. Clico no botão do stories 5. Tiro uma foto 6. Clico no botão postar
ferramenta para que o computador entenda o que deve fazer de acordo com os comandos do desenvolvedor. Assim como para conversar com um cachorro, seria necessário saber latir da forma correta para que ele entenda. Ou se comunicar com um russo, alemão, americano, seria necessário saber algumas palavras na linguagem russa, alemã ou inglês.
traduzindo significa “corpo”, é onde vamos inserir todo o conteúdo e estrutura do site. Exemplo: textos, imagens, botões etc. <html> <body> <h1>Meu site!</h1> </body> </html>
nós usamos o elemento <img />. <html> <body> <h1>Era uma vez...</h1> <p>três porquinhos que viviam na floresta</p> <img src="https://www.historiaparadormir.com.br/wp-content/uploads/2018/01/Tre s-Porquinhos.jpg"/> </body> </html>
é um pouco diferente dos demais. Para usá-lo é necessário inserir um atributo “src” com o link da imagem que você quer adicionar no seu site. Atributos são informações necessárias que passamos para os elementos HTMLs <img src="https://www.historiaparadormir.com.br/wp-content/uploads/2018/01/Tres-Po rquinhos.jpg"/>
seu site, você precisa: 1. Procure uma imagem na internet 2. Copie o link dela usando o botão direito e selecionando “Copy image address”; 3. Use o atributo “src” da tag <img> para carregar essa imagem;
aplicar o estilo. Nós vamos aprender a maneira mais simples de criar um seletor, que é utilizando a própria tag HTML. <html> <body> <h1>Meu site!</h1> </body> <style> body {} </style> </html>
seletor, nós utilizamos o código CSS “background-color” com alguma cor que escolhermos. Mudando a cor do plano de fundo <html> <body> <h1>Meu site!</h1> </body> <style> body { background-color: red; } </style> </html>
CSS dentro da tag <style> do HTML, mude a cor das letras do nosso título (tag <h1>) e do nosso parágrafo (tag <p>) 1. Mude a cor da tag <h1> para “DarkMagenta” 2. Mude a cor da tag <p> para “MediumVioletRed”
e imagens do site. Esse atributo é o “text-align”. Aqui vamos aprender a centralizar o texto do nosso site usando o text-align com valor “center”. Alinhando o conteúdo do site <style> h1 { text-align: center; } </style>
em volta dos componentes do site. Para isso, usamos alguns atributos: • border-width: espessura da borda • border-color: cor da borda • border-style: estilo da borda <style> img { border-width: 10px; border-color: brown; border-style: solid; } </style>
que acabamos de aprender, vamos criar uma borda na nossa imagem! 1. Para o tamanho da borda, utilize o atributo border-width com o tamanho 10px, por exemplo. 2. Para a cor da borda, utilize o atributo border-color e escolha uma cor de sua preferência 3. Para o estilo, escolha o border-style
</script> </body> </html> Nosso primeiro código Javascript Contudo, ao invés de capturar uma foto ou desbloquear a tela, nós teremos uma tag chamada <script> dentro do nosso HTML, onde vamos adicionar nosso código Javascript.
código Javascript usando o elemento HTML <script> dentro da tag <body> no seu site. Crie seu primeiro alerta usando o código “alert” com a mensagem “Seja bem-vinda ao meu site!” e veja o que acontece! alert("Eu sou um alerta");
válido Javascript, por isso, ele não consegue exibir o alerta com o texto, como estava fazendo antes… Dessa forma, é importante escrever o código correto para que tudo funcione perfeitamente e o computador consiga entender o código que você quer que execute. alert("Eu sou um alerta");
é necessário criar uma variável. Para criar uma variável nós usamos o código var e em seguida o nome da variável que você preferir. No exemplo abaixo, estamos criando uma variável chamada “doce” var doce;
mas nenhuma informação foi salva nela. Para salvar uma informação na variável nós usamos o símbolo = (igual) Nos exemplos abaixo, a variável doce que criamos com o código var está salvando o valor “Brigadeiro” e a variável comidaSalgada está salvando o valor “Pizza de palmito”. var doce; doce = "Brigadeiro"; var comidaSalgada = "Pizza de palmito";
é a informação que a variável salva. Perceba que para salvar ou modificar o valor de uma variável não é necessário utilizar o código var novamente. var doce; doce = "Brigadeiro"; var comidaSalgada = "Pizza de palmito";
seu site, crie uma nova variável chamada “nome” utilizando o código var. Em seguida, salve o seu nome ou qualquer outro nome que você queira com o símbolo = (igual).
você salvou dentro da variável, você pode usar o código alert da seguinte forma. • No código ao lado, estamos criando uma variável com o código var chamada nome, • Salvando o valor “brigadeiro” com o símbolo = (igual) • Exibindo um alerta com o código alert em javascript <html> <body> <h1>Oi, eu sou a Bete</h1> <script> var doce; doce = "brigadeiro"; alert(doce); </script> </body> </html>
variável nome, comidaFavorita e bandaFavorita, salve as suas informações favoritas e imprima essas informações em vários alertas Javascript utilizando o código alert
doce favorito é ” e o valor da variável na frente. Em javascript, nós usamos o + para juntar vários valores de texto e variável em uma única mensagem. <script> var doce = "brigadeiro"; alert("Meu doce favorito é " + doce); </script>
variáveis que você criou nome, comidaFavorita e bandaFavorita, salve informações que você prefira e imprima esses valores em um único alerta do javascript da seguinte forma: “Oi, meu nome é ” + nome + “ eu gosto muito de comer ” + comidaFavorita + “e minha banda favorita é ” + bandaFavorita”
o valor da variável doce. Quando ela é criada com o código var, a informação que é salvada nela é “brigadeiro”. Depois do primeiro alerta, o valor dela é alterado para “sorvete”. <script> var doce = "brigadeiro"; alert(doce); doce = "sorvete"; alert(doce); </script>
valor de uma variável que já foi criada, não é necessário utilizar o código var novamente. <script> var doce = "brigadeiro"; alert(doce); doce = "sorvete"; alert(doce); </script>
um alerta com a possibilidade de o usuário inserir uma resposta que podemos usar no nosso código. <script> var doce; doce = prompt("Qual seu doce favorito?"); alert("Hmmmm... " + doce + " é muito bom!"); </script>
o valor que o usuário digitou no campo de texto. Esse valor é salvo na variável chamada doce e em seguida ela é exibida em uma mensagem no alerta do javascript. <script> var doce; doce = prompt("Qual seu doce favorito?"); alert("Hmmmm... " + doce + " é muito bom!"); </script>
javascript que pergunte o nome da pessoa que está acessando o site. Salve a informação que a pessoa digitou em um variável chamada nome. Em seguida, exiba um alerta de boas vindas personalizado: “Seja bem-vinda ao meu site, ” + nome que a pessoa digitou
o código function, em seguida o nome desejado para a função, e um (). Depois disso vem o {}, e dentro dele todos os comandos que queremos para essa função. <script> function alertarDoce() { var doce; doce = "brigadeiro"; alert(doce); } </script>
na função nós precisamos escrever seu nome em algum lugar do código! <script> function alertarDoce() { var doce; doce = "brigadeiro"; alert(doce); } alertarDoce(); </script>
e que imprima em um alerta do Javascript as suas três músicas favoritas. Da mesma forma, crie uma função chamada minhaSobremesaFavorita que imprima sua sobremesa favorita em um alerta do Javascript
Javascript que você aprendeu, crie uma função chamada exibirComidaFavorita que pergunte a comida favorita e exiba uma mensagem: “hmmm…. Eu adoro comer ” + comida + “ com catchup e mostarda!”
HTML `button`. O nome do botão fica entre as tags <button> e </button>, da mesma forma que a tag de parágrafo <p></p>, por exemplo. <button> Clique aqui </button>
outras tags, o botão tem um atributo chamado `onclick` que recebe uma ação a ser executada quando ele for clicado. <button onclick="alert('Botão Clicado')"> Clique aqui </button>
deve receber uma função, seja ela padrão do javascript, como alert() ou alguma que foi declarada dentro de <script> … </script>. <button onclick="alertarDoce()"> Clique aqui </button>
sala e ela está escura, o que você faz? Aperta o interruptor para acender a luz, certo? Mas e se a luz já estiver ligada e você apertar o interruptor, o que acontece? Sim!! Você fica no escuro.
comandos de condição, que nos ajudam a validar uma situação antes de tomar uma decisão. Usando o exemplo da luz acesa ou apagada, normalmente validamos se a luz está acesa ou apagada antes de apertar o interruptor, certo? Podemos fazer isso no computador também!
diferente. se luz for igual "apagada", então: apertar interruptor var luz = "apagada"; if (luz == "apagada") { alert("Você deve apertar o interruptor"); }
novo código! O == (dois iguais juntos). Em Javascript, como um único igual sozinho é utilizado para salvar alguma informação numa variável, nós usamos == quando queremos comparar se uma coisa é igual a outra. var luz = "apagada"; if (luz == "apagada") { alert("Você deve apertar o interruptor"); }
comando prompt para perguntar se a luz está apagada. • Em seguida, salve essa informação dentro de uma variável chamada luzApagada. • Agora valide se a informação da variável luzApagada é sim. Se for sim, ela deve exibir a mensagem “Você deve apertar o interruptor!” em um alerta.
<script> var luzApagada; luzApagada = prompt("A luz está apagada?"); if (luzApagada == "sim") { alert("Você deve apertar o interruptor"); } </script> </body> </html>
anterior, se a pessoa digitar qualquer valor que não seja igual a “sim”, o alerta não será exibido! Para resolver isso, nós temos o comando “senão” que é executado em caso contrário da validação; se temSorvete então: caso contrário:
validação da luz apagada, podemos exibir a mensagem para “Ligar a luz” quando a resposta for “sim” para a pergunta “A luz está apagada?”. Mas caso a resposta seja outra diferente de sim, podemos exibir “Nao precisa apertar o interruptor” se luz for igual "apagada", então: apertar interruptor caso contrário: Não precisa apertar o interruptor
“else” para colocar o caso contrário. var luz = "apagada"; if (luz == "apagada") { alert("Você deve apertar o interruptor"); } else { alert("Não precisa apertar o interruptor"); }
recebe o valor “sim”. • Em seguida, crie uma condição que valida se o valor que a variável recebeu é “Sim”. • Se for “Sim”, exiba um alerta “Uhuuuulll!!!” • Caso contrário, exiba um alerta “Ahhh, acabou o sorvete.”
Javascript para fazer a pergunta “Tem sorvete?”, salvar a resposta na variável temSorvete. Se a resposta for “sim”, exibir a mensagem de comemoração e em caso contrário, de decepção.
de “else” e “if” que aprendemos anteriormente. if (temBrigadeiro == "sim") { alert("UHULL! "); } else if (temSorvete == "sim") { alert("UHULL! "); } else { alert("Ahhh, não tem mais nada pra comer. "); }
gente sugerir músicas para uma amiga de acordo com o gosto musical dela? Use o prompt para perguntar qual o gênero musical a pessoa mais gosta (rock, funk, kpop, etc) e mostre uma lista de três músicas legais de acordo com a opção que a pessoa escolheu.
Adicione o título “Pedra - Papel - Tesoura” utilizando a tag <h1>. Em seguida, adicione a seguinte descrição utilizando a tag <p> “Pedra quebra tesoura. Tesoura corta papel. Papel embrulha pedra.”
teremos o jogador 1 que irá jogar contra o jogador 2. Cada jogador terá três opções de jogada: Pedra, papel ou tesoura. Aqui vamos representar cada jogada com um botão. Crie três botões para cada jogador. Cada um com a opção “Pedra”, “Papel” e “Tesoura”
jogada de cada jogador? Para isso, crie uma função para cada botão de acordo com o nome e a jogada que ele representa. <button onclick="salvarPedraJogador1()">Pedra</button> <button onclick="salvarPapelJogador1()">Papel</button> <button onclick="salvarTesouraJogador1()">Tesoura</button>
a tag <script> logo depois da tag </body>. Em seguida, crie duas variáveis para salvar as escolhas dos jogadores. <script> var escolhaJogador1 = ""; var escolhaJogador2 = ""; </script>
cada função do jogador 1 dentro da tag <script>, salve o valor da jogada na variável “escolhaJogador1” e exiba um alerta usando o código alert com o valor da variável. function salvarPedraJogador1() { escolhaJogador1 = "Pedra"; alert(escolhaJogador1); }
mesma forma, crie cada função do jogador 2, salve o valor da jogada na variável “escolhaJogador2” e exiba o valor da jogada em um alerta usando o código alert. function salvarPedraJogador2() { escolhaJogador2 = "Pedra"; alert(escolhaJogador2); }
criar mais um botão que vai verificar quem é o vencedor. Para isso, utilize a tag <button> e o nome “Mostrar vencedor!” <p>Descobrir quem é o vencedor</p> <button onclick="descobrirVencedor()"> Mostrar vencedor!</button>
fazem a mesma Jogada. Então: Se a escolhaJogador1 for igual a escolhaJogador2, teremos um empate. Exemplo: Se escolhaJogador1 for igual a papel e escolhaJogador2 for igual a papel, ninguém ganha e ninguém perde.
teremos um empate.” Considerando a primeira regra de empate, como ficaria nosso código? function descobrirVencedor() { if (escolhaJogador1 == escolhaJogador2) { alert("Empatou!"); } }
somente ganha se escolhaJogador2 escolher a jogada Tesoura. Exemplo: • Se escolhaJogador1 for igual a pedra e escolhaJogador2 for igual a tesoura, Jogador 1 vence porque pedra quebra tesoura. • Se escolhaJogador1 for igual a pedra e escolhaJogador2 for igual a pedra, o jogo empata! • Se escolhaJogador1 for igual a pedra e escolhaJogador2 for igual a papel, jogador 2 vence porque papel embrulha pedra.
Jogador 1 somente ganha se escolhaJogador2 for igual a Tesoura.” Considerando essa regra, como ficaria nosso código? ... else if (escolhaJogador1 == "Pedra") { if (escolhaJogador2 == "Tesoura") { alert("Jogador 1 ganhou!"); } else { alert("Jogador 2 ganhou!"); } }
somente ganha se escolhaJogador2 escolher a jogada Pedra. Exemplo: • Se escolhaJogador1 for igual a Papel e escolhaJogador2 for igual a Pedra, Jogador 1 vence porque Papel embrulha Pedra. • Se escolhaJogador1 for igual a Papel e escolhaJogador2 for igual a Papel, o jogo empata! • Se escolhaJogador1 for igual a Papel e escolhaJogador2 for igual a Tesoura, jogador 2 vence porque Tesoura corta Papel.
somente ganha se escolhaJogador2 escolher a jogada Papel. Exemplo: • Se escolhaJogador1 for igual a Tesoura e escolhaJogador2 for igual a Papel, Jogador 1 vence porque Tesoura corta Papel. • Se escolhaJogador1 for igual a Tesoura e escolhaJogador2 for igual a Tesoura, o jogo empata! • Se escolhaJogador1 for igual a Tesoura e escolhaJogador2 for igual a Pedra, jogador 2 vence porque Pedra quebra Tesoura.
Jogador 1 somente ganha se escolhaJogador2 for igual a Papel.” ... else if (escolhaJogador1 == "Tesoura") { if (escolhaJogador2 == "Papel") { alert("Jogador 1 ganhou!"); } else { alert("Jogador 2 ganhou!"); } }
biancanalien
signer
kzkmaeda
akiraasano
akasan
datarian
robintux
yatabe
georgesinnott
yasslab
cbtlibrary
afnizarnur
inesmontani
rkendrick25
portentint
reverentgeek
chriscoyier
akosma
pwiseman
tessaabrams
sugarenia
tammyeverts
