Digital Girls

Lógica de programação

Como faço para postar um stories no instagram?

1. Desbloqueio o celular 2. Veriﬁcar se o app existe
no celular, caso contrário, instalo 3. Veriﬁcar 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

Como eu consigo comer uma bala?

1. Tirar a ﬁta da mesa 2. Segurar a bala
3. Retirar o papel da bala 4. Colocar a bala na boca 5. Comer a bala

Legal! Mas como fazemos o computador entender essas instruções?

Para isso, utilizamos as linguagens de programação!

É uma linguagem que o computador entende. Serve como uma
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.

https://codepen.io/pen/

HTML Estrutura e conteúdo de um site.

Estrutura: visualização das fotos, menu de opções, botões, visualização dos
números de seguidores e seguidos Conteúdo: imagens, textos, números e links HTML: Estrutura e conteúdo de um site.

Em uma analogia, a estrutura de um celular, por exemplo:
os botões, a tela, a câmera etc seria a estrutura que o HTML deﬁne em um site. O HTML é como se fosse a carcaça de um celular

<html> <body> <h1>Meu primeiro site!</h1> </body> </html> Ao invés de
telas e câmeras, nós teremos várias tags (elementos HTMLs) que vão montar nosso site Nosso primeiro código em HTML

Estrutura básica de um site <html></html> Essa tag <html> é
o que identiﬁca o código como sendo um código do tipo html. <html> <body> <h1>Meu site!</h1> </body> </html>

Estrutura básica de um site <body></body> A tag <body>, que
traduzindo signiﬁca “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>

Estrutura básica de um site <h1></h1> A tag chamada <h1>
é a tag que usamos para adicionar um título ao nosso site, como se fosse o título de um livro. <html> <body> <h1>Meu site!</h1> </body> </html>

Primeiro desaﬁo! Crie o seu primeiro site usando os elementos
HTML <html>, <body> e <h1>. No título do site, coloque algum texto que você quiser.

Criando um parágrafo A tag <p></p> serve para criarmos um
novo parágrafo no nosso site <html> <body> <h1>Era uma vez...</h1> <p>três porquinhos que viviam na floresta</p> </body> </html>

Desaﬁo: parágrafo! Crie um novo parágrafo usando o elemento HTML
<p></p> que você acabou de aprender. Em seguida, adicione a mensagem “Eu amo bolo de aniversário”

Adicionando uma imagem Para adicionar uma imagem no nosso site,
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>

Elemento <img> Como vocês podem ver, o elemento HTML <img>
é 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"/>

Nosso primeiro site O nosso site ﬁcará da seguinte forma:
<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/Tres-Porquinhos.jpg"/> </body> </html>

Adicionando imagem no nosso site! Para adicionar uma imagem no
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;

CSS Estilo, formato e cores do site

CSS: Estilo, formato e cores do site. Formato: botões arredondado,
foto de perﬁl e stories em círculo Cores: textos em preto, links em azul, quantidade de notiﬁcação em vermelho

O CSS é a parte que deﬁne o estilo do
celular Usando a mesma analogia, o CSS vai deﬁnir as cores, formato, tamanho da tela, do botão, da câmera etc do celular.

Adicionando código CSS <style></style> No HTML existe a tag <style>
(estilo) onde podemos adicionar nosso código CSS. <html> <body> <h1>Meu site!</h1> </body> <style> </style> </html>

Seletor CSS Seletor CSS é a identiﬁcação de onde vamos
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>

Para mudar a cor de plano de fundo de um
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>

Colorindo o fundo do nosso site! Utilizando o código “background-color”
do CSS dentro da tag <style> do HTML, mude a cor do plano de fundo para “RosyBrown”

Para mudar a cor da fonte/letra de um texto, nós
utilizamos o código CSS “color” com alguma cor que escolhermos. Mudando a cor da fonte do site <style> h1 { color: Blue; } </style>

Colorindo as letras do site Utilizando o código “color” do
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”

Existe também um atributo no CSS para alinhar os textos
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>

Centralizando nosso site! Utilizando o código “text-align” do CSS dentro
da tag <style> do HTML, centralize o título (tag <h1>), o parágrafo (tag <p>) e a imagem (tag <img>) do nosso site.

Adicionando borda No CSS também é possível criar uma borda
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>

Criando uma borda na imagem Utilizando os vários atributos CSS
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

Javascript Comportamento, ações e interações do site

Javascript: Ações e interações do site Ações e interações: clicar
em uma foto e conseguir visualizá-la maior, clicar no botão postar e uma foto ser postada...

O Javascript ﬁca responsável por executar ações Ações do tipo
capturar uma foto ao pressionar um botão, desbloquear o celular ao digitar a senha etc seria o que o Javascript faria.

<html> <body> <h1>Meu primeiro site!</h1> <script> alert("Eu sou um alerta");
</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.

Nosso primeiro código Javascript! Crie um espaço para adicionar seu
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");

Programar é fazer experimentos! Crie outros dois alertas com a
mensagem que você quiser logo abaixo desse primeiro que você criou e veja o que acontece!

Erro de sintaxe Agora ao invés de usar o código
“alert” em Javascript, vamos escrever “alerta” com alguma mensagem que você preferir. alerta("Eu sou um alerta");

Erro de sintaxe O código “alerta” não é um código
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");

Variáveis Permite salvar informações na memória do computador

Criação de uma variável Para salvar uma informação no computador,
é 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;

Salvando informação na variável Até agora nós criamos uma variável
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";

Salvando informação na variável Tudo que ﬁca dentro das aspas
é a informação que a variável salva. Perceba que para salvar ou modiﬁcar 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";

Vamos criar nossa primeira variável! Dentro da tag <script> no
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).

Exibindo o valor da variável Para exibir o valor que
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>

Exibindo o valor da sua primeira variável Dentro da tag
<script>, utilizando o código alert em javascript, crie um alerta que imprima e exiba o valor da sua variável no site.

Programar é fazer experimentos! Dentro da tag <script>, crie uma
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

Somando variáveis Imagine que você quer exibir uma mensagem “Meu
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>

Exibindo mensagens mais legais. Usando o exemplo anterior com as
variáveis que você criou nome, comidaFavorita e bandaFavorita, salve informações que você preﬁra 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”

Alterando a informação da variável Nesse exemplo, nós estamos alterando
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>

Alterando a informação da variável Perceba que para modiﬁcar o
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>

Alterando as informações da variável... Abaixo do novo alerta que
você criou imprimindo a variável nome, altere o valor dessa variável e crie um novo alerta exibindo o novo valor.

Alterando as informações da variável... Agora imagine que você queira
adicionar o nome das pessoas que estão visitando o seu site em uma mensagem de boas vindas. Como faríamos isso?

Utilizando o código prompt O código prompt do javascript exibe
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>

Utilizando o código prompt No código abaixo, o prompt retorna
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>

Descobrindo quem está visitando nosso site! Crie um prompt do
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

Funções São conjuntos de comandos que podem ser chamados em
outros lugares do código.

Bolo Gostoso ...

Fazendo isso no código... Para montar uma função basta digitar
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>

Mas então por que nada aconteceu?

Fazendo isso no código... Para que aconteça o comando descrito
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>

Programar é fazer experimentos! Escreva o nome da função alertarDoces()
várias vezes e veja o que acontece!

Programar é fazer experimentos! Crie uma função que chame minhasMusicasFavoritas()
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

Programar é fazer experimentos! Agora utilizando o código prompt do
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!”

Criando botões! <button></button> Para criar um botão usamos a tag
HTML `button`. O nome do botão ﬁca entre as tags <button> e </button>, da mesma forma que a tag de parágrafo <p></p>, por exemplo. <button> Clique aqui </button>

Como executar uma ação quando clicar no botão? Diferente das
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>

Como executar uma ação quando clicar no botão? Essa ação
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>

Criando um primeiro botão! Crie um botão no seu HTML
chamado “Descubra minhas músicas favoritas” que quando você clicar, mostre um alerta em Javascript com as suas três músicas favoritas.

Comando de condição Imagine que você vai entrar em uma
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ê ﬁca no escuro.

Comando de condição Nessas situações de dúvida, nós temos os
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!

Comando de condição Então antes de tomar a decisão de
apertar ou não o interruptor, nós veriﬁcamos se a luz está apagada. se luz for igual "apagada", então: apertar interruptor

Comando de condição Em Javascript, esse código ﬁcaria um pouco
diferente. se luz for igual "apagada", então: apertar interruptor var luz = "apagada"; if (luz == "apagada") { alert("Você deve apertar o interruptor"); }

Comando de condição Como vocês puderam observar, nós temos um
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 de condição var luz = "acesa"; if (luz ==
"apagada") { alert("Você deve apertar o interruptor"); } Mude a informação da variável luz para “acesa” e veriﬁque o que acontece com o código.

Programar é experimentar! • Dentro da tag <script>, use o
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.

Programar é experimentar! <html> <body> <h1>Oi, eu sou a Bete</h1>
<script> var luzApagada; luzApagada = prompt("A luz está apagada?"); if (luzApagada == "sim") { alert("Você deve apertar o interruptor"); } </script> </body> </html>

Programar é experimentar! Nesse exemplo, teste diferentes valores além do
“sim” para responder a pergunta “A luz está apagada?” e observe o que acontece.

Comando de condição “senão” Como vocês podem observar no exemplo
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:

Comando de condição “senão” Ou seja, no exercício anterior de
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

Comando de condição “else” Em Javascript, você utiliza o comando
“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"); }

Programar é experimentar! • Crie uma variável chamada temSorvete que
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.”

Programar é experimentar! Agora altere o valor da variável temSorvete
para qualquer outro valor e execute novamente o programa e veja o que acontece!

Programar é experimentar! Agora vamos usar o comando prompt do
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.

<html> <body> <h1>Oi, eu sou a Bete</h1> <script> var temSorvete;
temSorvete = prompt("Tem sorvete na geladeira?"); if (temSorvete == "sim") { alert("UHULL!"); } else { alert("Ahhh, acabou o sorvete. "); } </script> </body> </html>

Comando “senão se” Agora imagine que se não tiver sorvete,
você gostaria de saber se tem brigadeiro! se temSorvete então: caso contrário, se temBrigadeiro então: caso contrário:

Comando “senão se” Em Javascript, você utiliza os mesmos comandos
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. "); }

Programar é experimentar! Agora altere o valor da variável temSorvete
e temBrigadeiro para diferentes valores, execute novamente o programa e veja o que acontece!

Vamos criar um recomendador de músicas! Que tal agora a
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.

Pedra-Papel-Tesoura

Passo 1 - primeiros passos para um site Comece criando
um novo documento HTML com as tags <html> e <body>

Passo 2 - Dando um título para o nosso jogo
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.”

Passo 3 - Ações de cada jogador Nesse nosso jogo,
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”

Passo 4 - Ações de cada jogador Adicione também uma
descrição <p> que informe quais são as opções de botão do Jogador 1 e quais são as opções de botão do jogador 2.

Passo 5 - Ações de cada jogador Vamos salvar a
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>

Passo 6 - Salvando as ações de cada jogador Adicione
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>

Passo 7 - Salvando as ações de cada jogador Crie
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); }

Passo 8 - Salvando as ações de cada jogador Da
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); }

Passo 9 - Veriﬁcando quem é o vencedor Agora vamos
criar mais um botão que vai veriﬁcar 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>

Primeira Regra: Empate É considerado empate quando ambos os jogadores
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.

Primeira Regra: Empate “Se a escolhaJogador1 for igual a escolhaJogador2,
teremos um empate.” Considerando a primeira regra de empate, como ﬁcaria nosso código? function descobrirVencedor() { if (escolhaJogador1 == escolhaJogador2) { alert("Empatou!"); } }

Segunda Regra: Pedra Se escolhaJogador1 for Pedra, o Jogador 1
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.

Segunda Regra: Pedra “Se escolhaJogador1 for igual a Pedra, o
Jogador 1 somente ganha se escolhaJogador2 for igual a Tesoura.” Considerando essa regra, como ﬁcaria nosso código? ... else if (escolhaJogador1 == "Pedra") { if (escolhaJogador2 == "Tesoura") { alert("Jogador 1 ganhou!"); } else { alert("Jogador 2 ganhou!"); } }

Terceira Regra: Papel Se escolhaJogador1 for Papel, o Jogador 1
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.

Terceira Regra: Papel “Se escolhaJogador1 for Papel, o Jogador 1
somente ganha se escolhaJogador2 escolher a jogada Pedra.” Considerando essa regra, como ﬁcaria nosso código? ... else if (escolhaJogador1 == "Papel") { if (escolhaJogador2 == "Pedra") { alert("Jogador 1 ganhou!"); } else { alert("Jogador 2 ganhou!"); } }

Quarta Regra: Tesoura Se escolhaJogador1 for Tesoura, o Jogador 1
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.

Terceira Regra: Papel “Se escolhaJogador1 for igual a Tesoura, o
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!"); } }

Digital Girls

Digital Girls

More Decks by BIANCA

Other Decks in Education

Featured

Transcript