Lance um foguete: JavaScript básico e divertido!

1. Uma introdução: Ei, olá. Meu nome é Rich Armstrong, e eu tenho feito sites, aplicativos e coisas interativas nos últimos 10 anos ou mais. Esta classe é sobre como aprender a escrever JavaScript básico. Vou ensinar-te uma teoria. Eu vou ensinar a vocês como JavaScript se relaciona com HTML e CSS, e então eu vou ensinar fora de escrever. Ser capaz de escrever JavaScript permite criar sites interativos, aplicativos e jogos dinâmicos, que se movem e que podem até pensar por si mesmos. JavaScripts é super divertido. Ao combiná-los com HTML e CSS, você poderá dominar o mundo. No final desta classe, você será um ninja JavaScript de faixa branca, e terá uma compreensão básica de JavaScript. Você lançou alguns foguetes. Seus amigos vão achar que você é incrível. Sua mãe vai pensar que você do futuro, e você será capaz de fazer coisas mais interativas. Eu realmente acreditava que saber codificar faz uma grande diferença no mundo moderno, especialmente se você é um designer, especialmente se você é criativo. Estou muito entusiasmada para te ensinar a programar, então junta-te a mim e entusiasma-te. 2. O que vamos fazer?: O que vamos fazer? O que eu vou te ensinar? Bem, vamos fazer uma sequência de lançamento de foguetes da qual Elon Musk se orgulharia. Vamos pegar um foguete para ir de paralisação para atingir a cicatriz, talvez até explodindo. Eu vou levá-lo através de cliques de botão e animações CSS, e funções, e variáveis e se declarações, você vai aprender muito, mas não muito, seu cérebro não vai explodir. Mostrarei como usar o Sublime Text, mostrarei como usar as ferramentas de desenvolvedor do Google Chrome e como usar o GitHub desktop e como usar páginas do GitHub e como compartilhar sua criação com o resto do mundo. Começamos pequeno e fácil e, em seguida, entrar nos fundamentos do JavaScript. É leve, é divertido. Eu narro tudo visualmente e forneço metáforas simples para você entender. Venha juntar-se a esta classe e vamos lançar um foguete juntos. - Sim. 3. Baixe esses 3 aplicativos gratuitos: Então, para começar a escrever JavaScript, precisamos de três coisas. O primeiro é um editor de código, estará usando Sublime Text 3. O próximo aplicativo que precisamos baixar é o Google Chrome, que é um navegador. O terceiro aplicativo que precisamos baixar é GitHub Desktop, que sincroniza com o GitHub online e usando isso, você pode compartilhar seu código e você pode fazer backup e sincronizá-lo. Abra o Safari ou o Internet Explorer e vamos procurar o Sublime Text 3. Clique nesse link e baixe o correto para seu sistema operacional. Para mim, é OS X. A próxima coisa que precisamos fazer é procurar o Google Chrome, clicar no primeiro link. Às vezes, esta página leva um tempo para carregar e às vezes ela muda. Basta obter um para computadores pessoais e baixar o Chrome, aceita e instalar e, mais cedo ou mais tarde, o Chrome estará instalando. O último é o GitHub Desktop. Procure por isso, abra primeiro link e clique no botão Baixar GitHub Desktop. Está disponível para Mac ou Windows. Eles parecem um pouco diferentes, mas não deve incomodá-lo muito. A próxima coisa que você precisa fazer é acessar github.com e criar uma nova conta. Cadastre-se, se você não tiver a conta do GitHub. Você escolhe um nome de usuário, insere seu e-mail e cria uma senha. O que é realmente importante aqui é que você precisa verificar a conta antes de começar a usar o GitHub Pages. Para aqueles de vocês que já têm um, inicie sessão e introduza os seus dados. Tudo pronto, então faça login. O que vamos fazer aqui é que realmente queremos criar um novo projeto. É chamado de repositório no GitHub. Tudo o que eu quero fazer aqui é você querer voltar e criar um novo repositório, e nós vamos chamar isso de foguetes JS. Podemos colocar uma descrição de foguetes de lançamento com JavaScript. Vamos mantê-lo público. Ele sempre ajuda a inicializar um repositório com um arquivo README. Tudo bem. Vamos criar esse repositório, e de agora em diante você estará bem no caminho para começar. 4. Instale, inscreva-se e escreva alguns JS: Assim que todos os seus aplicativos tiverem baixado, você só precisará arrastar seu aplicativo GitHub Desktop para a pasta de aplicativos. Eu já tenho um, então eu vou apenas substituí-lo, fantástico. Seu Google Chrome, você precisará abrir porque é um DMG, não tenho certeza do que acontece no Windows, mas apenas fazer o processo normal de instalação de um aplicativo. Para o Google Chrome, basta arrastá-lo diretamente para a pasta Aplicativos. Texto Sublime. Clique duas vezes nesse arquivo DMG e arraste-o para a pasta de aplicativos também. Eu já o tenho. Legal, vou substituí-lo. Esse é o seu processo de instalação. Em seguida, você pode excluir esses aplicativos. Então o que você pode fazer é, você pode ir para o seu Finder, você pode ir para a pasta de aplicativos e você pode encontrá-lo lá. A primeira coisa que queremos fazer é abrir nosso aplicativo GitHub Desktop. Então eu já o tenho no meu bar, no fundo, aqui. Então abra você. Então, claro, vamos abrir. Se você já tem alguns projetos em seu GitHub, ele mostrará que, hey, há um monte de mudanças se você precisar de alterações. Mas o que queremos fazer aqui é, se você ainda não fez login, acesse suas preferências e saiba qual é seu nome de usuário e qual é sua senha. Então, faça o login. Então daqui, você pode realmente ir Clone, então eu quero dizer legal, eu quero clonar aquele js-foguete, js-foguete clonado. Onde eu vou colocar isso, eu vou colocá-lo na minha área de trabalho. Então eu escolho meu desktop, e agora ele vai dizer legal, clonagem. O que precisamos fazer aqui é realmente precisamos criar uma nova ramificação. Vou chamar isso de páginas GH. Vou clonar a partir do mestre, e então aqui vamos trabalhar neste ramo porque então podemos acessá-lo como um site online. Criar ramificação. Então você vai ver que você tem seu js-rocket e talvez um par de outros que você pode escolher, mas agora você tem sua pasta js-rocket na área de trabalho com nada muito nele. Então vamos abrir js-rocket em texto sublime e você verá que há um monte de arquivos e pastas à esquerda e, em seguida, seu cartão estará à direita. Então vamos Arquivo, Novo Arquivo, e vamos chamá-lo de index.html. Então vamos salvá-lo. Vou para a minha área de trabalho, salve-a como index.html. Obrigado, as baterias do mouse estão baixas. Aqui. Vamos apenas escrever olá js-foguete e soletrar corretamente, e depois salvar. O que precisamos fazer agora é apenas verificar se isso está funcionando, então voltamos ao nosso localizador, arrastamos nosso arquivo index.html para o Google Chrome. Fantástico. Abra isso também. Olá js-foguete. Isso está funcionando. Eu estou indo para ir para GitHub Desktop, ele vai, hey, você fez alguma coisa. Então tudo o que precisamos fazer aqui é apenas dizer adicionado nosso arquivo de índice. Você pode dar uma descrição mais detalhada se quiser. Você então se compromete com GH Pages. O que você faz é então publicá-lo. Então isso realmente sincroniza sua versão local de js-foguete para a versão on-line do js-rocket. Então, no Chrome, precisamos acessar github.com e entrar em nossa conta. O meu é mrra-screencast e minha senha é meu segredo. Por favor, lembre-se da sua senha. Em seguida, queremos navegar para o nosso repositório js-rocket, queremos ir para o ramo mestre e alterá-lo para GH Pages branch, e então você verá que há um arquivo aqui, ele diz leia-me, ele diz index.html. Os arquivos que estão em seu site do GitHub devem ser os mesmos que os arquivos em seu aplicativo GitHub Desktop. Você pode ver nossa história aqui. Então o que queremos fazer agora é realmente queremos entrar nesta página contas. Então o que vamos fazer é, vamos fazer mrra-screencast e usar seu nome de usuário aqui. Então, se o seu é Bob, use bob.github.io, e então nós vamos colocar nosso projeto aqui. Então, o último que fiz com um desenho animado aqui. Então o que vamos fazer aqui, é ir js-foguete, pressionar Enter e lá vamos nós. Então, se você ver isso, está funcionando. Se você não vê isso, você precisa sincronizá-lo e você precisa ter certeza que você está trabalhando na filial da GH Page. A próxima coisa que queremos fazer é escrever um pouco de JavaScript. O que fazemos aqui é abrir script tag e ver o que Sublime Text faz. Faz muito trabalho para nós. Ele vai para tag script, é do tipo texto em JavaScript e até mesmo fechá-lo para nós. Por aqui nós estamos indo para ir console.log Olá lá amigos. Então vamos salvá-lo. Oh, eu não sei o que eu fiz lá. Estou tentando fechar isso. Você deveria dizer “Salvar”. Você vai notar que quando você voltar para o GitHub Desktop, ele vai dizer hey, houve uma pequena mudança aqui. Você só vai dizer Adicionado algum código ou adicionado algum JS, Commit to GH-pages. Então ele comete a mudança, e então nós sincronizamos. Torna-o o mesmo em nosso computador local como faz on-line. Às vezes, pode demorar um pouco para sincronizar. Em seguida, vamos para o Google Chrome, navegamos para o nosso projeto js-rocket ou repositório, podemos então ir para a guia commits aqui, é muito importante às vezes, e podemos ver que ele adicionou algum JS. Se você atualizar aqui, você pode não ver nada diferente, mas se você clicar com o botão direito do mouse e às vezes isso pode estar na parte inferior, ou às vezes isso pode estar ao lado. O que precisamos fazer aqui é que realmente precisamos ir para o console. Se você tiver uma mensagem dizendo olá lá amigos, seu JavaScript está funcionando, seu GitHub está funcionando e você está pronto para o rock and roll. Bombeado. Sim. 5. Javascript: O que é Javascript exatamente? Bem, JavaScript é uma linguagem de programação muito legal e inteligente usada principalmente na web, na internet. Javascript ama HTML, ele ama CSS, e realmente ama os seres humanos. Ele também pode se comunicar com um servidor, então eu acho que é como o melhor amigo de todos. Legal. Então, onde é que a usamos? Usamos principalmente no navegador, mas podemos usá-lo em alguns outros lugares também. Javascript também está sendo usado como uma linguagem de servidor, que significa que você potencialmente só precisa conhecer uma linguagem de programação para fazer tudo na web, mas não se preocupe, nós não vamos entrar em coisas de servidor nesta classe. Vou mantê-lo leve, divertido e fácil. Então, o que o JavaScript pode fazer? Bem, JavaScript pode fazer muito, ele pode contar pronto rápido, ele pode contar até 1000 mais rápido do que você pode, ele pode contar até um milhão de maneira mais rápido do que qualquer humano, ele é incrível, ele é realmente bom em matemática, ele pode fazer as coisas se moverem , o que é incrível, ele pode falar com o servidor, ele pode mudar palavras, ele pode arrastar as coisas ao redor da tela, ele pode alertá-lo, ele pode ser programado para fazer qualquer coisa, ele sabe muito, ele armazena um monte de informações sobre o navegador e a página web em que está. Você pode simplesmente perguntar, como, quão grande é a tela? Ou qual navegador eles estão usando? Ou qual é a cor do fundo? Ou qual é a URL? Onde estamos? Ele sabe muito, o que é muito legal. 6. Propriedades e métodos: O que é JavaScript realmente? Bem, é bem simples, na verdade. JavaScript é uma lista de objetos aos quais tem acesso e uma lista de ações que você pode pedir para executar. Os primeiros são chamados de propriedades. É a lista de objetos que tem excesso, eles são chamados de propriedades. A lista de ações que você pode pedir a ele para executar, eles são chamados de métodos. Há um monte de propriedades e métodos padrão, e então há aqueles que você pode escrever e adicionar ao JavaScript. Se fôssemos ver JavaScript como um carro, por exemplo. Um carro teria propriedades como cor de tinta, assentos, pneus, motor, marca, modelo, é ligado, ano feito, velocidade atual. Então talvez tivesse métodos como ligar, mudar de marcha, mostrar o quão rápido estamos indo, o capô, abrir o teto solar, mostrar a luz de aviso. As propriedades podem variar no interior. Então a propriedade ligada poderia ter sido sim ou pode ser não. A propriedade de cor é uma palavra, pode ser vermelha, pode ser azul. A propriedade do motor, bem, isso é uma coisa real, é outro objeto. Assentos, é uma lista de assentos, e cada um desses assentos é um objeto. Agora, cada objeto também tem seu próprio conjunto de propriedades e métodos. A propriedade assento é uma lista, e assim poderia ter sua própria propriedade de número de assentos e ter seu próprio método de me dar assento número um e uma vez que você tem assento número um, você pode acessar suas propriedades e métodos, como cor, é o cinto de segurança funcionando, e o método como aquecer os assentos ou reclinar. Bem, como se escreve JavaScript? Então, para acessar todas essas propriedades e métodos de um objeto, devemos usar.sintaxe ou.notação. Podemos dizer assentos de carro e isso nos daria os assentos. Ou podemos dizer car.isturnedon e ele diria sim ou não. Poderíamos dizer carro.currentspeed ou carro.color ou carro.make ou carro.turnon. Isso é um método. Algumas instruções, poderíamos dizer carro.Popthehood, ou você poderia dizer carro.opensunroof. Você pode ver como estas são instruções e as instruções são diferentes porque eles têm os parênteses após eles. Para fazer uso disso, há uma língua que podemos começar a aprender, e é uma língua que vou começar a ensinar a vocês. Vamos fazer isso. 7. Variáveis: A primeira coisa que eu quero fazer é explicar o que é uma variável. Uma variável é algo que se refere a outra coisa. Se eu disser FavColor, e eu vou dar meu FavColor um valor de vermelho. Você pode ver aqui que há esta palavra-chave var seguida por um espaço, seguido por um nome, seguido por um sinal de igual e, em seguida, um valor. Acaba com o ponto-e-vírgula que basicamente diz: “Ok, terminamos com esta linha.” Esta palavra-chave var é especial, você tem que soletrá-lo desta maneira. Você deve deixar um espaço entre a palavra-chave var e seu nome de sua variável. Este nome pode ter sublinhados, ele simplesmente não pode ter espaços e não pode ter traços. Eu prefiro usar CamelCase que é uma pequena primeira letra, e então toda vez que há outra palavra, em vez de um espaço ou um sublinhado, eu apenas uso uma letra grande ou uma letra maiúscula. Em torno do sinal de igualdade, você não precisa ter espaços, mas para mim, isso torna muito mais fácil de ler. Em seguida, atribuímos um valor. A razão pela qual atribuímos um valor é porque isso pode mudar, isso pode mudar para verde, pode mudar para azul, e então quando estamos trabalhando em nosso código, não precisamos manter o controle do que esse valor realmente é, Nós só precisamos ter a cor favorita. Vou copiar isto e mostrar-vos como isto funciona. Se eu disser azul, ou talvez eu apenas copie tudo isso, eu vou para o Google Chrome e vou dizer “Exibir”, “Desenvolvedor”, “Ferramentas do desenvolvedor”, ou você pode simplesmente clicar com o botão direito do mouse e dizer “Inspecionar” e, em seguida, ir para o console. O que eu gostaria de fazer aqui é apenas colar isso e dizer var FavColor é igual a azul. Posso então dizer FavColor e me dá azul. Agora, eu posso mudar isso e dizer FavColor é igual a verde. Então eu posso dizer FavColor e ele vai me dar verde. Eu não preciso manter o controle deste JavaScript, ninguém mantém o controle disso. O que podemos armazenar aqui ou a que podemos nos referir? Bem, há algumas coisas que podemos nos referir. O primeiro é o texto. Em JavaScript e na maioria das linguagens de programação, você chama de string. Você pode colocar aspas duplas ou você pode colocar aspas simples. Sublime Text é muito legal porque se não há nada lá e você pressionar uma citação, normalmente ele lhe dá dois deles. Se eu fizer isso, dá-te dois, então escreves o teu texto e acabas com um ponto-e-vírgula. Agora, outro tipo é um array. Agora, array é basicamente uma lista. O que você pode fazer aqui é manter qualquer tipo de lista. Você pode manter texto, você pode manter números, você pode manter variáveis, você pode manter objetos, você pode manter funções, você pode manter e armazenar e listar o que quiser. Por exemplo, posso dizer MyArray ou vamos chamá-lo de meus FavColors. Posso dizer azul, vermelho, verde. Então isso se torna uma lista. Eu não tenho que então ter a cor favorita número 1, cor favorita número 2, cor favorita número 3. Eu posso então dizer, var NumOfFavColors é igual a 3. Agora, este é um número. Você vê que eu não tenho nenhuma aspas em torno dele porque se eu fizesse assim, na verdade seria uma string agora ou texto, mas nós queremos que ele seja um número para que possamos executar operações matemáticas nele. O próximo tipo de objeto é um booleano. Este é um valor verdadeiro ou falso ou um sim/não. Eu posso dizer verdade ou posso dizer falso. É basicamente o mesmo que dizer zero ou um, zero é falso, um é verdadeiro. Você pode dizer verdadeiro com maiúsculas e dizer verdadeiro ou falso com maiúsculas também. Sublime gosta em minúsculas, assim. Temos esses quatro tipos básicos. Há outro que é um objeto, que pode combinar todas essas coisas. Um objeto é como uma matriz, mas você pode dar-lhe um nome para cada item da lista. Eu posso dizer FirstName, e em vez de dizer iguais assim, eu faço dois pontos, e então eu vou dizer Rich. Então eu vou vírgula, e eu posso dizer Sobrenome, e eu posso dizer, Armstrong. Então eu posso dizer FavColors, e eu vou apenas copiar isso, e eu posso colocar um array lá. Eu posso dizer, Yearsalve 103, e isso é um número. Posso dizer que é masculino, é verdade. Você pode ver que tudo isso está dentro de um objeto que é muito legal. Isso significa que você pode acessar todos esses detalhes com notação de pontos. Então Richobject é masculino e isso vai me dar verdade. Então, vamos copiar isso e mostrarei como ele funciona no Google Chrome. Vamos limpar esta consola. Eu vou dizer objetos ricos, e agora, eu quero dizer RichaBject.FirstName. Vai dizer “Rich”. Isto é muito fixe porque não precisamos de saber disso. Agora posso mudar isso e dizer FirstName é igual a Bob. Agora, quando eu pedir RichObject.FirstName, será Bob. Então isso são variáveis em poucas palavras. 8. Funções: Tudo bem. Então, o que é uma função? Agora, uma função é algo que pode ser reutilizado. Então é muito parecido com uma variável e pode realmente ser armazenado em uma variável, ou uma variável pode se referir a uma função. Então precisamos dizer função, dar-lhe um nome de função, WhatIsmyFavColor. Então isso é algo que o torna uma função, esses dois parênteses, colchetes, o que você quiser chamá-los. Então o material que acontece dentro da função ou do método está dentro desses dois suportes ou dentro deste fechamento. Agora, podemos chamar isso de funcional ou digitá-lo assim, e então podemos facilmente digitá-lo assim, que eu prefiro muito porque isso significa que isso só precisa variáveis em vez de variáveis e funções. Mas é um pouco diferente porque tem esses parênteses. Então, qual é a minha cor favorita? Tudo bem. Então esta é uma pergunta e você quer que ela devolva alguma coisa. Então, vou copiar isto e dizer “Faça alguma coisa”. Tudo bem. Agora, DoSomething poderia fazer um console.log fazer algo. Tudo bem. Agora, se copiarmos isso e entrarmos no Chrome, e agora eu digo “Colar”, Enter”, e agora digo “fazer algo sem parênteses”, ele vai dizer: “Legal, há a função a que você está se referindo. Mas se eu disser “Faça algo “e eu colocar esses parênteses depois dele, ele vai registrá-lo, ele vai fazer alguma coisa. Então, colocar esses parênteses após uma função é muito, muito importante, especialmente se você quiser chamá-la ou apenas se você quiser chamá-la ou invocá-la. Agora, qual é a minha cor favorita? Bem, eu quero saber qual é a minha cor favorita, então aqui podemos realmente dizer azul de retorno. Então, se eu quiser questionar qual é a minha cor favorita, e eu posso colocar um monte de código e lógica nesta função para determinar o que é, eu quero que ele retorne azul. Não quero apenas que registre algo ou faça algo, quero obtê-lo. Então isso é muito legal porque é muito parecido com uma função embutida. Eu só vou tentar esclarecer isso. Então, quando você diz Math.round e você dá um valor de 4.568, ele vai te dar cinco. Você não quer que ele faça algo e não diga a você. Então, quando eu colar WhatIsmyFavColor, eu vou dizer, WhatIsmyFavColor, e ele vai dizer azul. Fantástico. Enquanto este outro, este DoSomething, você verá que ele retorna indefinido. Na verdade, não nos devolve nada, só faz coisas. Então, há dois tipos diferentes de fazer funções. Você também pode retornar true, você pode retornar arrays, você pode retornar qualquer coisa que quiser. Mas se você devolver algo, ele não retorna ou chega a qualquer outra coisa, ele literalmente pára essa função ali mesmo. Então, se copiarmos isso, vamos limpar esse console, e colá-lo, quando eu disser WhatIsmyFavColor agora, ele vai dizer falso. Você vê que não devolve mais nada. Então isso é muito importante lembrar, que qualquer coisa após o retorno não funciona de fato. Agora há mais uma coisa que preciso mostrar a vocês sobre funções. Então, se quiséssemos fazer algo como conhecer a área, então dentro desses parênteses, podemos realmente dizer, bem, largura e altura. Então podemos dizer largura de retorno multiplicada pela altura, e você pode ver que estou fazendo algumas contas aqui. Então, se copiarmos isso, e limparmos o console, colá-lo, e eu digo área, não um número. É tipo, o que está acontecendo? Agora, se eu passar em cinco e quatro, lá vamos nós, ele vai me dar 20. Então, podemos fazer isso novamente e dizer var fullname igual função, e aqui podemos dizer firstname, secondname. Então, podemos então retornar primeiro nome mais segundo nome, mas podemos colocar um espaço no meio. Você pode ver aqui estes também são quase como variáveis, exceto que eles são parâmetros. Então este primeiro nome, embora não saibamos o que é, será combinado com o segundo nome com um espaço no meio. Então, se copiarmos isso e colarmos isso, e então dissermos nome completo e passarmos em Rich, e ele está querendo cordas agora, ele vai voltar com Rich Armstrong. Se dissermos Rich e Armstrong assim, vai dizer, bem, o que realmente está acontecendo? Isso é muito importante, mas o que podemos fazer aqui é dizer, var MyName é igual a Richard. Então podemos dizer fullname e podemos copiar MyName e colocar um cheque porque isso agora está se referindo a Richard. Quando pressionarmos Enter, depois de eu fazer um fio, você pode ver que ele volta com Richard Armstrong. Tudo bem. Então, essas são funções em poucas palavras. Você não tem que ter dois, você pode ter quantos quiser. Às vezes você só precisa de um para fazer o que você precisa fazer dentro da função. Lembre-se, você pode retornar as coisas com essas funções, para que elas se tornem realmente úteis, e você só pode fazer as coisas com elas sem retornar. 9. O "if-else": Agora eu quero dizer a vocês o que é uma declaração IF. Basicamente, podemos dizer se alguma coisa, então fazer alguma coisa. Se o que está entre esses parênteses for verdadeiro, então faça alguma coisa. O que eu vou dizer é apenas um homem alerta. Agora, se for verdade, alerte o homem. Vou copiar isto e colar isto, macho. É verdade porque estamos explicitamente dizendo que isso é verdade. Mas agora queremos realmente tornar isso um pouco mais dinâmico. Podemos dizer que se macho é igual a macho, alerta macho. Masculino, fantástico. Mas isso pode ser um pouco obscuro para você. Por que não usar apenas um igual? Bem, porque um igual atribui um valor. Simplesmente não vai funcionar. Na verdade, estamos testando se isso é verdadeiro ou falso. É uma declaração de comparação. Podemos dizer coisas como um é igual a dois, o que você claramente diria falso. Ótima. Bem feito. Mas se dissermos que um é igual a um, é verdade. Ou podemos dizer que 10 é maior que um, verdade. Ou podemos dizer que 10 é menor que um, falso. Também podemos dizer que 10 é maior ou igual a um, o que é verdade. Ou podemos dizer que 10 é menor ou igual a um, falso. Estes se tornam bastante poderosos quando combinados com variáveis. Podemos dizer que o número 1 é igual a algum número, e o número 2 é outro número. Podemos fazer isso com cordas, podemos fazer isso com arrays, podemos fazer qualquer tipo de coisa aqui. Lembre-se, nossas funções, eles também podem retornar verdadeiro ou falso. Aqui, estamos à procura de um valor verdadeiro ou falso. Podemos dizer que o número 1 é maior que o número 2. Agora, se copiarmos e colarmos tudo isso com as variáveis incluídas, nada aconteceu porque o número 1 não é maior que o número 2. Mas se fizermos isso, agora podemos tirar os vasos porque eles já estão lá e dizer masculino. Talvez não devêssemos dizer masculino, masculino, deveríamos apenas dizer “verdade”. Não está funcionando, mas funciona. Podemos dizer, se algo acontecer, se isso for verdade, faça as coisas aqui, o que é ótimo. Mas agora também podemos dizer, senão. Se isso não for verdade, então alerte isso. Vamos fazer alguma coisa aqui. Se você sempre quiser executar alguma ação, seja ela verdadeira ou falsa, é ótimo usar uma instrução if-else. Mas agora isso é um padrão. Com números, está tudo bem. Mas agora se quisermos dizer que o nome 1 é Rich e o nome 2 é Bob. Se o nome 1 for igual a Rich, alerta verdadeiro, else-if, nome 2 é igual a Rich, alerta true, else, alerta false. Vamos esclarecer isto. Se o nome 1 é Rich, alerta verdadeiro, e o que eu vou fazer aqui é verdadeiro 1 e eu digo verdadeiro 2, só para sabermos qual deles é qual. Só vou copiar isso e colá-lo para mais referência. Verdadeiro 1. Nós esperávamos isso. Se tivermos que mudar o nome 1 para Gareth, e depois tivemos que repetir isso, é falso. Porque agora o nome 1 é Gareth. Nome 1 ser rico, e nome 2 não é rico. Agora podemos dizer que o nome 2 é igual a Rich, e voilá. Se, em seguida, dizemos, que declaração IF novamente, é verdade. Fantástico. Agora podemos dizer se, e else-se, e mais. Podemos dizer, se isso for verdade, faça isso, else-if, isso é verdade, faça isso, senão, como padrão, faça isso, o que é ótimo. Agora outra grande coisa com declarações IF é que você pode dizer e, ou você pode dizer ou. Pode-se dizer que o nome 1 é Rich e o nome 2 é igual a Bob. O que estamos fazendo aqui, é que estamos dizendo que isso deve ser verdade e isso deve ser verdade. O que estamos dizendo com este, este ou, é bastante difícil de lembrar, é que estamos dizendo se isso é verdade, ou isso é verdade, então continue. Estas são afirmações “if-else”. 10. Escreva em JavaScript básico: Vamos arrastar na pasta js-rocket para o nosso aplicativo Sublime Text, e vamos fazer exatamente a mesma coisa para o Chrome, exceto vamos abrir index.html. Lá vamos nós. É praticamente onde paramos da última vez e agora vamos começar a escrever um pouco de JavaScript. Nós temos a tag script que se destina a caber em nosso HTML. Você vê o que o Sublime Text faz, é incrível. Ele só completa coisas para você. Eu vou cortar isso e eu vou colocá-lo apenas dentro da etiqueta de cabeça aqui e recuo um pouco, e dar à página HTML um título de JS Rocket. Vou salvá-lo depois de colocar o foguete Hello JS no corpo, e podemos colocar isso em uma etiqueta H1. Vamos recuar isso, e agora vamos salvar. Onde paramos da última vez, inspecionamos a página e dentro da nossa guia Console aqui, podemos ver que ele dizia, Olá amigos. Isso é muito legal porque significa que podemos nos comunicar e ver o que está acontecendo mesmo que o usuário não veja isso. Se inspecionarmos novamente, vemos que, Olá amigos. Isso ocorre porque você está escrevendo console.log. Vamos começar a escrever um pouco de JavaScript, e eu vou explicar as coisas enquanto eu for. O que eu quero fazer é criar meu próprio objeto. Eu quero dizer var carro. Quando eu digo var, é uma variável, é algo que pode mudar. Carro é um objeto. Agora este objeto, vamos dizer igual a igual, dê-lhe um nome chamado carro igual a um objeto. Isso é uma coisa muito estranha. Vamos pressionar “Enter” e aqui dentro, vamos dar algumas propriedades. Eu vou dizer fazer, e eu vou dizer VW. Então eu vou dizer tipo, e eu vou dizer Polo. É um VW Polo, e posso dizer cor: azul. Na verdade, tenho um VW Polo azul. Lá vamos nós, começamos com três propriedades. Meu carro é um objeto. Você significa um objeto com essas chaves e, em seguida, você tem uma propriedade e um valor, valor de chave chave. O que também podemos fazer aqui é que você pode ver que estes são apenas texto. O que podemos então fazer é dizer, que outros tipos de propriedades temos? É verdade, ou podemos dizer falso. Você pode ver aqui este é um valor sim-não, um valor verdadeiro falso. Isso é chamado de booleano, um nome tão estranho. Tem o nome de alguém. A outra coisa que podemos ter é um número, então NumberOfWheels. Foi um bom apito, Número de Rodas, e quatro. Você pode ver que estes não são texto, estes são na verdade números. Então podemos dizer lugares. Então aqui, podemos realmente ter assento 1, assento 2, assento 3, e assento 4. Você pode ver que estes são realmente ainda texto e JavaScript não é precioso sobre como você coloca isso para fora. Oh, não é muito precioso, eu diria. Mas vamos facilitar a leitura e recuar. Você pode ver que eu estou colocando vírgulas depois de cada par de valores chave. Esta é realmente uma boa prática. Este é o meu carro, por enquanto, vou guardar isto. Então eu vou para o Google Chrome, atualizar aqui, e eu vou ver se o carro está aqui. O carro está aqui. Podemos ver que, sua cor é azul, falsa , fazer VW, NumberOfWheels quatro, assentos, é uma matriz. Uma matriz é, na verdade, uma lista. Aqui vamos nós, tipo Polo. Temos um par de outras coisas aqui. Você pode ver que os assentos têm uma propriedade de comprimento e são quatro. Vamos para carros. Assentos. Você pode ver que ele nos devolve um monte de assentos ou a lista de assentos. Se eu pressionar para cima no console e eu ir carro.assentos, ele diz quatro. Você pode ver aqui que, uau, assentos de carro, é uma propriedade. Me dá um monte de coisas. Carro.assentos. Comprimento, na verdade estou fazendo notação de pontos, estou indo mais e mais para baixo, mas carro ainda é a coisa a que estou me referindo. Eu não vou sentar. Comprimento porque se eu for sentar vai dizer, ah, flap. Os assentos não estão aqui. Agora vamos criar um método. Dentro deste carro, podemos então dizer TurnON, e vamos chamá-lo de função. Agora este é um método e é assim que se escreve. Poderíamos passar um valor aqui, mas chegaremos a isso agora mesmo. Mas basicamente o que isso faz é que eu posso dizer, ISUrnedon é verdadeiro ou falso. Nós vamos dizer, copie isto, e eu vou dizer isto. Istrinedon é igual a verdadeiro. É assim que escrevemos. Esta função ou esta propriedade é na verdade um método, que todos os métodos realmente são, mas esta propriedade é uma função, é um método. Nós vamos dizer isso, e isso se refere ao carro, Isurnedon , que é esse cara aqui, é verdade. Você vê que é falso, inicialmente. Vamos salvar isso. Vamos refrescar. Carro. Esturnedon, falso. Agora vamos dizer carro. Turnon, e agora não podemos fazer isso porque ele vai dizer, legal, tem a função. Isso é o que é. O que precisamos fazer é dizer car.Turnon e, em seguida, colocar esses parênteses depois dele para dizer, fazer isso. Diz “indefinido”. Mas isso é porque ele não está nos devolvendo nada, e eu vou te mostrar como ele dá algo de volta. Mas agora o que podemos fazer é dizer carro. É verdade. Você pode ver o que aconteceu aqui. Você fez algo, você ligou e mudou a propriedade sem ter que mudá-la. Pode-se dizer que quando o usuário clica neste botão, faça algo, mude algo. Outro exemplo disso é, vamos escrever outra função. Digamos que voe. Poderíamos dizer alerta de mosca. Você pode ver aqui que quando dizemos voar, não é apenas uma função normal, você está passando algo para ela. Você vai ver o que acontece aqui agora. Nós dizemos “Salvar”. Vamos voltar para o Google Chrome, atualizar, e podemos dizer car.isturnedon, é falso. Mas por quê? Bem, é porque nós atualizamos a página. Quando você atualiza a página, tudo o resto começa desde o início, e começamos em falso. O que eu estava realmente tentando mostrar aqui é o carro. Fly. Porque é um método e queríamos executar esse método, colocamos esses parênteses depois dele. Ele vem com esta pequena caixa irritante que diz, voar. Agora o que é realmente legal é que podemos dizer, bem, podemos fazer isso? Vamos tentar, e vamos criar uma nova propriedade, que é um método chamado switch. Switch é uma palavra reservada, na verdade. Vamos SwitchCar, função, parênteses e chaves, e então lá vamos colocar um parâmetro, iON. Dissemos SwitchCar. Podemos dizer que se iSON, copiamos isso, é igual a verdadeiro. Se usarmos apenas um igual, dizemos que iON é verdade, o que não é. Dizemos que se o iSON é verdade, por isso estamos a fazer uma pergunta, então vamos fazer alguma coisa. Eu só vou copiar isso aqui, e então eu vou dizer outra coisa, falso. Se eu for dizer SwitchCar, eu vou dizer isso, iSON é verdade, e dizer que este iSurnedon é verdadeiro, senão, se não for falso, e eu vou dizer que este iSurnedon é igual a falso. Isso é um pouco de lógica para você. Você pode começar a fazer coisas diferentes com base no que você passa. Vamos salvar. Vamos apenas console.log, e aqui eu vou dizer vire carro. Vou colocar um espaço aqui e depois vou dizer mais iSON. O que isso faz é que vai, eu vou registrar “virar carro” e então eu vou adicionar em iON a este pedaço de texto. Vamos salvar isso. Google Chrome para atualizar e vamos para o carro.Istrinedon é falso. Eu posso dizer carro. Switchcar e podemos dizer verdade. Virar carro, verdade. Agora podemos dizer carro isturnedon e é verdade. Podemos dizer carro. Switchcar, falso carro Turn, falso. Então dizemos que o carro é falso. Lá nós podemos realmente colocar através de um monte de argumentos e você pode ver cada vez que o console está indo virar carro falso ou virar carro verdadeiro, ele está indo e mudando o que ele faz com base no que nós analisá-lo. Podemos analisar em verdadeiro ou falso ou poderíamos analisar em um monte de outras coisas, mas vamos, se for verdade, fazer isso, caso contrário, fazer aquilo. Isto é muito poderoso. Você pode começar a colocar em coisas diferentes para uma função e obter coisas diferentes para fora, dependendo do que você colocar em. Não temos muito JavaScript aqui. Não tenho muito HTML. Temos um pouco de JavaScript aqui. Se isso ficar realmente pesado, muito e muito HTML, não queremos ter que escrever nosso JavaScript aqui. A melhor coisa que podemos fazer é cortar tudo isso. Então, em vez de ter tudo isso, literalmente vamos fonte igual e, em seguida, aqui vamos nós js, script.js e salvar isso. O que precisamos fazer aqui em nosso localizador é criar uma nova pasta chamada js. Dentro Sublime Text, precisamos ir Arquivo, Novo Arquivo, e colar. Vamos voltar a recuar aqui. Então, se ele não pegar automaticamente, o que provavelmente não vai porque não tem título, você sempre pode alterá-lo para JavaScript. Você pode ver que as cores voltam. Vamos salvá-lo agora e salvá-lo como script.js. Salve e, em seguida, vamos ver se funciona. Olá amigos. Carro isturnedon falso, SwitchCar para verdadeiro. Fantástico é verdade. Agora também podemos usar o carro TurnON e isso ainda pode ser verdade. Lá você tem, agora temos nosso JavaScript em um arquivo separado. Assim como colocamos nossas imagens em um arquivo separado, assim como colocamos nosso CSS em um arquivo separado, desculpe, pastas separadas. Temos nosso JavaScript em uma pasta separada, eu acho e em um arquivo separado. Agora temos o nosso HTML. Estamos fazendo referência ao nosso JavaScript está aqui. Se quiséssemos fazer referência ao nosso CSS, diríamos, legal, vamos “css/style.css” e você pode ver que é um pouco diferente. Sua tag de script JavaScript parece um pouco com uma tag de imagem e sua tag CSS parece muito diferente e tem esse href, mas é praticamente a mesma coisa. Não temos uma pasta CSS no momento, então vamos criar uma. Em sua pasta CSS permite criar um novo arquivo. Nós só vamos dizer corpo e dizer cor de fundo, cinza. Salve isso dentro do CSS como style.css. Se você receber um desses pop-ups, basta dizer para cancelar. Não compre Sublime Text. Eu tenho uma licença, mas não no perfil de elenco. Vamos salvá-lo e index.html, e vamos salvar este. Em seguida, você volta para o Google Chrome, atualiza e agora você tem CSS funcionando e JavaScript funcionando. Mas agora eu quero alguma interação com o usuário. Lembre-se, o usuário não poderá acessar tudo isso por meio de seu console. Vamos nos divertir um pouco agora. Se criarmos um link aqui e vamos definir seu href para hash, e eu vou mostrar-lhe por que isso é importante. Clique em Eu, Arquivo Salvar. Refresque. Se formos Click Me, você pode ver que ele só coloca esse hash. Não atualiza a página inteira. Isto é muito importante e pode poupar-lhe muitas dores de cabeça. A próxima coisa que queremos fazer é ir para Href. Legal, é isso. Mas que tal no clique? Vamos fazer alguma coisa. Talvez possamos dizer carro. Fly. Isso é muito interessante, estamos executando JavaScript em HTML. Vamos onclick atributo. Que diabos é isso? Bem, há um monte de que se relacionam com JavaScript. Vamos salvar isso. Vamos ver se funciona. Clique em Mim. Isso é basicamente JavaScripts. Você pode montar um site inteiro como este. Você tem seu roteiro, que tem um carro e tem esse método de mosca. Quando você chama, ele alerta voar. Agora o que podemos fazer tão bem quanto podemos dizer, SwitchCar para algo. Talvez não tenhamos carro para pilotar, podemos dizer: “SwitchCar, é verdade.” Podemos ligá-lo. Vamos salvar. Vamos voltar aqui. Agora, se vemos o carro virou falso, clique em mim, carro isturnedon, verdadeiro. Agora você pode ver que à medida que você interage na interface, as coisas realmente começam a mudar onde você não pode vê-lo. Você pode fazer as coisas aparecerem, você pode mudar de cores, você pode animar as coisas. Divirta-se aqui e experimente coisas, experimentos. uma boa maneira de fazer as coisas. Você pode até escrever coisas não com o ponto do carro. Você poderia escrever algo como var e você pode apenas fazer uma função como sayMyName é igual à função e, em seguida, aqui você pode dizer nome e você pode dizer console ou talvez você quer dizer, alerta, “Meu nome é mais nome.” Arquivo salvo. O que é realmente importante para qualquer texto e em JavaScript nós os chamamos de string, usamos vírgulas invertidas, então aspas duplas ou aspas simples. Apenas certifique-se de que eles são os mesmos em ambos os lados. SayMyName. Se copiarmos isso e colocarmos aqui, diga MyName e eu colocaremos “Rich” lá. Apenas tenha cuidado aqui. Se você estiver usando aspas duplas aqui, use aspas simples aqui, se você usar aspas simples aqui usar aspas duplas aqui. Salve isso. Clique em Mim. Meu nome é Rich. Lá vamos nós. Divirta-se, faça coisas incríveis. Mas agora, se você quiser compartilhar isso com seus amigos, e eu realmente encorajo você a compartilhar na galeria do projeto, apenas para mostrar, apenas para mostrar o que você fez e você também pode fazer perguntas. Se as coisas não estiverem funcionando, publique-o, coloque no GitHub, publique um link e diga : “Rich, estou preso, não está funcionando”. Então posso entrar aqui e dizer: “Parece que há alguns erros.” Posso ver seu código e dizer: “Isso não está funcionando.” Outras pessoas também podem fazer isso. Na área de trabalho do GitHub, basta confirmar suas alterações dizer: “Fez algumas coisas do carro acontecerem”. Comprometa em gh-pages. Certifique-se de que ele está em gh-pages e não gh-pages mestre. Legal. Então você sincroniza. Enquanto isso está sincronizando, vamos para github.com. Aqui nós só queremos navegar para o nosso repositório de foguetes JS e olhar para os nossos commits. Vá para a ramificação gh-pages. Fez algumas coisas do carro acontecerem. Vamos abrir uma nova guia, e vamos para o seu nome de tela ou seu nome de usuário.github.io/js-rocket. Você pode ver que as coisas mudaram. Clique em Mim, meu nome é Rich. Se você inspecionar aqui e ir para o console, você pode ir de carro. Se você pressionar Enter, verá um monte de coisas que seu carro pode fazer. Fantástico. Compartilhe seus projetos. 11. Comece a brincar com CSS e JS!: - Sim. Mas Rich, eu não quero ter apenas texto chegando e aparecendo e texto no console. Quero que algumas coisas legais aconteçam. Bem, deixe-me mostrar-lhe algumas coisas legais então. Onclick, digamos DoCoolStuff. Que tal isso? Então vamos colocar um div, e vai ter uma classe de legal. Dentro dele, vai ter alguns textos como, “Olá, estou bem.” Vamos recuar isso. Agora o que você vai ver o que acontece aqui, certifique-se de que você está em seu host local é que quando você diz clique em mim, ele diz, “Algo não está funcionando.” É muito legal ter seu console aberto porque ele informa quando há erros. Ele também pode dizer-lhe um erro. Se você clicar lá, e ele dirá: “É aí que está o erro, por favor, ajude-me.” Olá, estou bem! Ótima. O que queremos fazer aqui é que só queremos estilizar esse elemento legal um pouco. Eu só vou copiar isso, eu preciso estilizá-lo. Vou dar-lhe uma largura de 100 pixels. Vou dar-lhe uma altura de 100 pixels, e depois vou dar-lhe uma cor de fundo verde. Então o que eu vou fazer é eu vou dizer. Cool.red, cor de fundo vermelho, e então eu vou definir uma transição. Deixe tocar isso para fora. Transição de cor de fundo, vou dizer, vamos fazer um 1.000 milissegundos. Bem, talvez só um segundo. Vamos salvar isso. Agora o que podemos ver acontecendo aqui, é legal, é verde. Mas se você inspecionar esse cara, e você fazê-lo, se eu disser vermelho? Você viu isso? Bem, há coisas legais acontecendo lá. Vou só fazer a Apple Zed e a Apple mudar de aula. Se eu mudar isso de volta para apenas legal, você vai dizer que ele muda para verde. Isso é o que vamos fazer. Vou clicar no botão “Clique em mim” fazer agora. Há algumas maneiras de fazer isso. Uma das maneiras mais fáceis é dar a isso uma identificação de algo único, e vamos chamá-lo de legal, depois Salvar. Vou copiar isto. Então aqui dentro, eu vou dizer var. Como é que lhe chamei? DoCoolStuff, e vai ser uma função. Aqui, eu vou dizer document.getElementByID. Vou colocar isso aí. O documento é a sua principal coisa, como a janela, o documento. Acho que é mais importante, ou talvez não seja. Mas não importa agora. Desde um documento getElementById.Cool, e agora vamos mudar o nome da classe. Um document.getElementById.ClassName é igual a vermelho e frio . Podemos mudar o embrulho disso, acho que em algum lugar. Texto Sublime, vamos alterar as configurações padrão. Só vou procurar embrulhos. Word_wrap automático, Arquivos, Preferências, Configuração-Usuário, word_ wrap. Você pode ver que mesmo no Sublime, é JavaScript, verifique isso. Word_wrap, verdadeiro, Salve isso. ClassName é igual a vermelho frio. Vamos salvar isso, e podemos fechar os padrões. Fantástico. Vamos entrar no Google Chrome, Atualizar, Click Me. Whoa, você viu isso? As coisas acabaram de ficar reais. Isso é muito legal. Você pode fazer coisas legais agora. Algumas outras coisas que eu só gostaria de mostrar a você é ir, se você quiser fazer um comentário, é assim que você faz. Se você quiser fazer isso em várias linhas, faça assim. Qualquer coisa entre aqui é comentado fora, o navegador quando você olha para ele. Mas é muito útil quando você diz algo assim. Esta função faz isso. Quando você diz document.getElementById legal, o ClassName. Você pode apenas dizer como mudar o nome da classe. Isso é você fazer comentários. Esses são muito legais. Agora, o que seria legal é mudá-lo de volta. Agora faça coisas legais. O que podemos fazer é dizer var CurrentClassName é igual a isso. Não estamos conseguindo, o ClassName. Podemos dizer se CurrentClassName é igual a legal. Então podemos dizer, e vamos torná-lo vermelho fresco, ou podemos dizer outro espaço, e apenas dizer que é legal. Vamos fechar isto, File, Save. Se estiver frio, muda para vermelho frio. Se não for, mudou-o para esfriar. A forma como está a fazer a transição é a cor de fundo da transição. Podemos mudar isso para dois segundos, e quando você adicioná-lo, ele está em transição. Super legal. Vamos atualizar, clique em mim. Fantástico. Muda para vermelho. Clique em Mim novamente, isso mudou? Não, não aconteceu. Eu me pergunto por que não está mudando. Aqui vamos nós. Temos mais declarações, mas temos aqui no fundo, só estamos enviando para o vermelho frio. Eu só vou remover isso. Vamos salvar de novo. Atualizar, clique em mim. Vai para vermelho, ótimo. Clique em Mim, fica verde novamente, e você pode ver o que está acontecendo aqui. O nome da classe está mudando. Agora você pode mudar de classes com JavaScript que estamos em, e essa cláusula pode simplesmente fazer quantidades incríveis de coisas. Pode mudar de tamanho, pode mudar sua capacidade, pode girar. Pode fazer coisas loucas. Você vai da esquerda para a direita. Ele pode ser exibido, e então pode se esconder. É simplesmente ridículo. Apenas confira isso. Podemos dizer, ok legal. Vamos colocar uma exibição de nenhuma. Legal. Bloco de exibição. Legal. Vamos salvar isso. Vamos ver o que acontece. Ele se foi. Está ali. Ele se foi. Está ali. É muito legal. Você pode ver que não está em transição, e isso é porque ele está apenas exibindo bloco e exibindo nenhum. O que podemos fazer lá é definir a visibilidade para oculta, e depois a visibilidade para visível. Vamos salvar isso, e então bem legal. É assim que você pode fazer algumas coisas bem legais. Mas a seguir, é hora de construir nosso foguete, e nossa sequência de lançamento de foguetes. Estou entusiasmada. 12. Primeiro, planejamento :): O que eu gostaria de fazer é apenas um pouco de planejamento. Quero fazer uma sequência de lançamento de foguetes com JavaScript. Basicamente eu quero que o foguete vá de lá quando o usuário clicar no botão, lançar o foguete no ar, e ele fica um pouco de chamas embaixo e ele vai. Então o que eu faço é criar como um storyboard. Basicamente começar aqui, os foguetes à direita e a interface à esquerda, então eles clicam em “Ir” e então começa a contagem regressiva. Há um link abortar ou botão abortar para levar o usuário de volta ao estágio um. O foguete ainda está parado. Depois chega a zero e diz “decolagem”. Os foguetes pegam algumas chamas por baixo e começam a decolar, e em algum momento diz: “Muito bem. e me oferece uma chance de fazer isso de novo. O foguete sobre este palco está a cruzar, está fora da atmosfera. Está indo tão bem. Não há chance de falhar. Mas entre esse estágio, algo pode dar errado. Pode haver uma explosão, pode haver todo o tipo de coisas acontecendo. Mais uma vez, temos de o fazer outra vez. Então esse botão vai nos levar volta como com aquele todo o caminho para começar a fazê-lo novamente. Certo, e esse é o meu plano. 13. Vamos escrever o HTML e CSS básico do nosso foguete: Agora que sabemos como queremos a sequência de lançamento do foguete, vamos abrir o projeto e arrastá-lo para um texto sublime. Agora, o que eu vou fazer é criar um novo arquivo, ou Arquivo Novo, e então eu vou salvá-lo como rocket.html. Vou guardá-lo na pasta JS-Rocket. Rocket.html, e eles vão digitar rapidamente algum HTML aqui. Fantástico. Então dizemos sequência de lançamento de foguetes. Espero que seja assim que se escreve sequência. Mas não é o que estamos fazendo aqui. Não estamos fazendo uma aula de ortografia, estamos fazendo uma aula de JavaScript. Agora, o que vou fazer aqui é começar escrever o meu HTML para esta sequência de foguetes. Basicamente tenho dois divs. Um está à esquerda, o outro à direita. Vou chamar este para a esquerda, e vou chamar o próximo para a direita. Vamos dar a este um pouco de espaço também. Em seguida, a esquerda vai ser várias quantidades de divs diferentes, e à direita vai ser um foguete e talvez algum terreno. O que vamos fazer é dizer, vamos div com uma classe de foguetes. Então aqui, vamos dizer div com uma classe de estado 1. Vou fechar essa div. Agora, aqui dentro, vou dar a ele um título 1, e dizer JS Rocket Launch. Então vamos ter um botão, href, dizer Lançamento. Eu vou dar-lhe uma classe de botão, e o que eu vou fazer aqui é eu vou dizer na contagem decrescente de início clique . Lá vamos nós. Temos nosso primeiro estado 1, e vamos ver como isso parece. Eu vou salvar isso, e eu vou abrir foguete HTML dentro do Google Chrome, clique em Launch. Vamos abrir a nossa consola. É muito bom tê-lo no fundo, às vezes no lado, isso é ótimo também. Mas agora não começa a contar connosco. Isso está tudo bem. Vou começar a estilizar esta página. Eu tenho a minha esquerda, eu tenho a minha direita, este é o lugar onde meu foguete vai estar, este é o lugar onde minha interface vai estar. Tudo bem. Dentro do meu CSS, eu preciso criar uma pasta CSS, então eu vou definir meu href como meu link para CSS/rocket.css. Salve isso, e no meu CSS, vou dizer “File”. Novo arquivo, e vamos para a esquerda. Vou salvar este rocket.css. Dot certo. Então, como é que o botão vai parecer? Então como vai ser o outro A? Não temos nenhum outro “A “, mas sabemos que eles estão vindo. O que eu quero fazer é, à esquerda, eu quero definir esta posição para ser corrigida. Consertado é incrível. Vou te mostrar o que ele faz. Vou definir a cor de fundo para, deixe-me procurar uma cor de fundo muito legal. Fundo HTML. Vamos configurá-lo para água-marinha. Posição fixa, e eu vou dar-lhe uma largura de 50% e eu vou dizer altura, eu quero que seja 100%. Então eu vou dizer top zero, esquerda zero. Isso significa que vai ser 50 por cento da largura da janela do meu navegador, altura vai ser 100 por cento. O topo vai ser zero e a esquerda vai ser zero também. Vamos salvar isso, vamos ver o que acontece. Fantástico. Lá vamos nós. Você vê que eu realmente não posso rolar muito, e isso é o que acontece quando você define algo como fixo. Então eu vou apenas copiar isso e colá-lo no caminho certo. Em vez da esquerda, eu vou definir a direita para ser zero, então ele vai ficar para a direita. Eu quero outra cor para este, então deixe-me mudar esta cor. Eu quero um azul, então talvez o sinal funcione. Alice azul parece legal. Então eu vou mudar isso para Alice azul e atualizar. Veja, eu tenho meus dois painéis agora, esquerda, direita, interface aqui, foguete aqui. O próximo que eu quero fazer é, vamos estilizar meus foguetes. Vou colocar esse cara na posição certa, talvez eu deva dizer posição absoluta. Agora absoluto é muito legal porque ele vai, onde está meu pai? Então o foguete, que está aqui, vai, onde estão os meus pais? E vai para a direita, certo é o meu pai. Então ele vai, legal, eu vou me posicionar de acordo com onde ele está. Essa é a folha de estilo errada. Meu foguete está em posição absoluta, eu vou definir sua esquerda para 50% e eu vou definir seu fundo para 20 pixels. Então o que eu vou fazer é dar-lhe uma largura de 20 pixels e uma altura de 100 pixels com uma cor de fundo azul. Porque foguetes legais são azuis. Refresque, e ali está o meu foguete. Aquele pequeno lápis azul. Agora o que eu quero fazer é realmente eu quero colocar um pouco de terra sobre isso. Basta ir para a aula de terra, e eu vou guardar isso, e então minha folha de estilo, e eu vou colocar um pouco de aterramento. Eu vou dizer cor de fundo é verde, e dizer posição absoluta, e então eu vou dizer zero inferior e zero esquerdo, e largura eu vou dizer 100 por cento, e altura, 20 pixels. Vou guardar isso. Vamos ver como isso se parece. Fantástico. Agora, temos um foguete lançável. Podemos fazer com que pareça ainda melhor agora, mas esta é uma lição de JavaScript, a classe JavaScript. Então, não estamos muito preocupados com a aparência, mas podemos fazer parecer bem legal agora. Tudo bem. Agora o que eu quero fazer são os foguetes, e uma vez que você adiciona uma cláusula, eu quero dizer foguetes voando, e eu quero dizer fundo, 1000 pixels. Eu vou então colocar uma transição sobre isso de baixo, digamos 1000 milissegundos. Lá vamos nós. Eu vou salvá-lo, então foguete. Voando. Então podemos inspecionar isso aqui em cima. Eu tenho o chão, os foguetes. Agora, se colocarmos este vôo, o que acontece, nada. É porque ainda não nos refrescamos. Então vamos atualizar e fazer isso de novo. Voando. Você viu aquele foguete voar? Talvez tenhamos de abrandar isso um pouco. Então vamos colocar um zero extra lá, File Save. Voando. Lá vamos nós. O foguete está voando. 14. Vamos adicionar JavaScript ao foguete: Então o que vamos fazer agora é colocar estados diferentes para fazer este foguete voar. Vamos pressionar Lançamento, queremos a contagem regressiva, quando a contagem regressiva terminar, queremos dizer decolar, queremos que o foguete continue subindo e então queremos dizer, bem feito, ou queremos dizer falha e tente novamente. Vamos dar uma chance a isso. Então temos nossos cinco estados que precisamos colocar aqui. Só vou copiar e colar isto e dizer estado 2. Vou dar a isto uma identificação da contagem regressiva e vai começar às 10. Então vamos dizer botão, StartCountdown e podemos dizer Abortar. Podemos ver como isso se parece. Parece bastante semelhante, estado 1, estado 2 eles vêm debaixo um do outro então se olharmos à esquerda aqui estado1, estado 2 eles vêm debaixo um do outro. Então, queremos outro chamado estado 3. Não queremos fazer uma contagem regressiva, o que queremos agora é dizer “Levante Off”. Não vai haver botões lá. O próximo que queremos é queremos um estado4 e isso vai dizer, Bem feito sem uma garantia. Em vez de abortar, vamos dizer, faça de novo. Então o nosso último deve ser o estado 5. Eu vou dizer: “Oh, não, outra vez, fantástico. Então eu só quero dizer Tente de novo aqui. Vamos salvar esse comando S, controle S, ou você apenas vai para Arquivo, Salvar. Agora, o que temos aqui é que temos um monte de estados diferentes, mas eu só quero que cada um esteja lá quando ele precisa estar lá. Não todos lá de uma vez. Então o que eu vou fazer é aqui dentro, eu vou dizer y.state1 e eu vou apenas copiar isso algumas vezes 2, 3, 4, 5. Eu vou dizer “display “: nenhum. Então o que isso vai fazer é escondê-los até eu precisar deles. Então, File, Save e lá vamos nós. Eles se foram até eu precisar deles. Então o que posso fazer aqui é dizer que quando a classe do corpo muda para outra coisa, então podemos começar a mudá-la. Quando o corpo vai body.state1 podemos então dizer state1, exibir, bloquear. Vou escrever em um que será mais fácil. Usando como state2, state3, state4, state5. Então temos state2, state3, state4, state5. 2, 3, 4, 5. Caso contrário, podemos dizer que todos estes realmente apenas exibir: nenhum. Exibir: nenhum, exibir: nenhum, exibir: nenhum, exibir: nenhum. Em vez de ter display interagir: nenhum tantas vezes eu vou apenas ir, todos eles exibem: nenhum. Então guarde lá. Vamos ver o que acontece. Não há nada lá que esteja bem. O que precisamos fazer é mudar nossa classe corporal para estado1. Guardamos isso, atualizamos, e algo quebrou. O que aconteceu aqui é que o state1 é display: nenhum. Então isso agora é problemático. O que precisamos fazer é pensar sobre isso, como podemos realmente mudar isso? Nós podemos realmente mudar isso para corpo-estado 1. Podemos copiar isso. Devemos salvar isso e mudar este corpo-estado 1. Arquivo, Salvar. As coisas voltam para o caminho que vão embora. Agora podemos ir. Classe corpo-estado 2. Lá vamos nós, corpo-estado3, Levante, corpo-estado4 fantástico, corpo-estado5. Isso é ótimo. Mas agora eu estou pensando, uau. Esses estados então o que acontece se esses cliques podem apenas mudar um estado? Então eu posso mudar para dois, parece muito bom. O botão abortar ChangeGate volta para um, legal. Faça isso de novo, ChangeGate de volta para um porque nós vamos voltar para o estado1. Em seguida, faça novamente, altere novamente para um. Mas como chegamos a três distintos? Bem, ainda não escrevemos nenhum JavaScript. Então você verá aqui lembrar que você tem um console ChangeGate não está definido. Nós nem sequer temos nenhum JavaScripts inserido aqui. Vamos colocar um pouco de JavaScript aqui. Roteiro, fantástico. Qual será a fonte? A fonte será js/rocket.js, fantástico. Agora em nossa pasta JavaScript vamos para o novo, vamos salvar isso como rocket.js fantástico. Então agora nós podemos realmente, eu vou fechar isso. Podemos começar a interagir com as coisas, então vamos fazer coisas rápidas em JavaScript. Podemos ir var ChangeGate é uma função. Então podemos dizer, estado. O que vamos fazer aqui? Eu só vou salvar isso, mas agora na verdade eu não sei como fazer isso. Eu quero ir e mudar a classe corporal para o que eu vou dizer vamos procurar isso, JavaScript como mudar a classe corporal. Vamos ver isso, document.body.className é igual a qualquer coisa. Legal. Eu só vou copiar isso, e eu vou ir aqui e colá-lo, document.body.className é igual a corpo-state1. Vou pausar os números. Se eu copiar isso, e eu vou dizer, “Legal, vamos mudar para corpo-estado mais estado.” Lá vamos nós. Vamos ver se isto funciona. Então File, Save, Refresh aqui, Launch, lá vamos nós. Isso acabou de mudar do estado. Abortar, de volta a um, Lançamento. Fantástico. Temos algumas coisas acontecendo. Em seguida, como passamos da contagem regressiva para a contagem regressiva? Vamos fazer isto. Se o estado for igual a 2, vamos começar a contagem regressiva. A forma como fazemos isto é que temos a identificação da contagem regressiva, por isso vou copiar isso. Eu vou dizer, document.getElementsById ('contagem regressiva') .innerHTML. Não parece certo. O que eu posso fazer aqui só para testar é que eu vou copiar isso, e entrar aqui e eu vou colar isso ('contagem regressiva') .innerHTML. Lá vamos nós. Eu não sei por que sublime não estava pegando. InnerHTML é igual, e eu lança uma função talvez, mas na verdade é apenas uma propriedade, e nós vamos dizer, nove. Vamos salvar isso, e vamos ver se isso funciona. Atualizamos aqui, pressionamos “Lançamento”, vai para nove. Mas eu quero realmente contagem regressiva, então o que eu vou fazer é eu vou criar um temporizador; var timer é igual a nulo. Só vou pô-lo nulo, o que não significa nada enquanto isso, só para que eu saiba que tenho um temporizador aqui em cima. Então eu vou copiar isso e então eu vou dizer timeout é igual a setInterval, e então eu vou colocar uma função aqui. Vamos dizer ir a cada 1.000 milissegundos. O que é isso, é um temporizador. Em um determinado intervalo, 1.000 milissegundos, ele executa uma função. É basicamente passar nos estados ou passar o parâmetro, exceto que estou passando em uma função inteira e estou dizendo, faça isso a cada 1.000 milissegundos, o que é um segundo. Então eu vou dizer document.getElementById innerHTML é igual, e agora o que eu vou fazer? Agora eu vou dizer var CountDownNumber é igual a 10. Direi que é igual a CountDownNumber. Então vamos dizer CountDownNumber é igual a CountDownNumber menos 1. Isso significa que da próxima vez que correr, será um a menos. Vamos ver se isto funciona. Atualizamos aqui, Lançamento. Lá vamos nós 10, 9, 8, 7. Você vê que há um pouco de atraso, mas tudo bem. Então ele entra em menos. Vamos resolver isso a seguir. O que eu gostaria de fazer aqui é ir, se CountDownNumber é menor ou igual a zero, e então você vai dizer ClearInterval. Na verdade, vou parar o temporizador. Então vou dizer ChangeGate para três. Mas agora, também, talvez eu não devesse colocar o ClearInterval aqui, porque o que acontece se quisermos importar o temporizador? O que vou fazer é colocar o temporizador aqui em cima. Se houver um intervalo no temporizador, ele vai limpá-lo. Então eu vou para outra coisa se o estado é igual, igual a três, fazer outra coisa. Mas vamos ver se isto funciona. Bem, já está bom para 79, demorando muito para explicar isso. Nós clicávamos em “Lançamento”, 8, 7, 6, 5, 4, 3, 2, 1, decolar. Legal. Então isso funciona. Meus foguetes não estão subindo, então vamos ter que mudá-los [inaudível] ou eu posso, então foguete. Talvez o que precisamos fazer é dizer corpo.corpo-estado 3, foguete. Legal. Vamos salvar isso. O que eu vou fazer é aumentar isso para 500, só para que seja um pouco mais rápido. Atualize-o, clique em “Iniciar” e vejamos o que acontece. Temos foguetes. Se você está seguindo e digitando com, parabéns, você acabou de lançar seu primeiro foguete. Fantástico. Então vamos dizer, “Se for bom, então mostre a mensagem de sucesso. Se não for bom, mostre a, oh, nenhuma mensagem.” Nós vamos dizer, var sucesso é igual a setTimeout, que é a falta de intervalo definido, exceto que ele executa a função em um determinado tempo, não repetidamente. Aqui dentro, eu vou dizer, legal, executá-lo em 2.000 milissegundos, então em dois segundos. Então eu vou dizer, var RandomNumber é igual a Math.Random. Vamos mostrar o método aleatório é real. Podemos sempre ir aqui e ir ao Math.Random. Vamos fazer de novo para ver se é realmente aleatório. Legal. Não é o que eu queria definir método aleatório, eu só quero um número de 0-10. Então o que eu vou fazer é dizer, multiplicar isso por 10, o que é ótimo. Mas também queremos arredondá-lo, então eu vou dizer Math.round. Eu estou basicamente indo e analisando em um número. Estou arredondando um número; esse número vai ser um número aleatório e multiplicá-lo por 10. Lá vamos nós. Só vou copiar e colar isso. Número aleatório é esse número. Então eu vou dizer, se RandomNumber é maior que cinco, faça outra coisa. O que eu gostaria de fazer se for maior que cinco é que isso seria um sucesso. Em seguida, no [inaudível], eu vou dizer ChangeGate para quatro, senão, ChangeGate para cinco. Vamos ver o que acontece aqui. Eu também gosto de registrar isso, apenas para ter certeza de que é o número certo. Então console.log, RandomNumber, então vamos dizer texto mais RandomNumber. Também posso dizer RandomNumber, RandomNumber. Agora, este texto de números aleatórios e isso vai realmente colocar o valor desta variável aqui. Vamos salvar isso e ver o que acontece. Lançamento, 10, 9, 8, 7, 6, 5. Bem, não posso contar tão rápido. Woo, sobe. Ok, bem feito. Faça isso de novo. Por que nosso foguete está descendo? O RandomNumber era nove, fantástico. Vamos fazer isso de novo. A chave aqui é que ele está realmente mudando o estado do corpo. Então, se forem quatro, há um pequeno problema. Então o que eu vou fazer aqui é apenas ir, Controle C, Controle V, e mudar isso para 4,2, para que ele sempre vai continuar subindo se é hora de subir ou se é um sucesso. Vamos salvar isso. Atualizar, lançar, e ele desce. Se abortarmos, ele vai voltar para lá, mas por que você voltou para dois? Temos que cobrir isso. Oh não, tente de novo. Então RandomNumber era cinco. Isso está correto? Se for maior que cinco, é sucesso. Então, se forem cinco, permitiremos que falhe. O que eu quero fazer aqui agora é ir, CountDownNumber é 10. Então, aconteça o que acontecer, deve ser 10. Se for o estado 2, podemos contar. Além disso, se for estado3, podemos dizer, vamos ver se é um sucesso ou um fracasso. Vamos tentar de novo. Lançamento. Muito bem, faça de novo e lá vamos nós. Temos um lançamento de foguetes bem sucedido. O foguete desce. Você vê isso como uma transição lá, podemos mudar isso se quisermos. Então, se dissermos corpo-estado 1, foguete. Podemos dizer transição, nenhuma. Vamos guardar isso. Vamos voltar ao Chrome, atualizar, lançar, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, decolar. Fantástico, tente de novo. Vê o que acontece quando eu clico em “Tentar de novo”? Foi direto para trás. Lançamento, havia algo um pouco estranho lá. Não começou imediatamente. Então o que aconteceu lá é que mesmo que o CountDownNumber foi para 10, o HTML real não. Então eu vou copiar e colar isso bem ali. Então o que eu vou fazer aqui é eu vou colocar este CountDownNumber antes do HTML real muda, só para que ele não fique em 10 muito. Vamos atualizar isso, lançar novamente. Você pode ver quantas vezes você vem e volta e muda as coisas. Não é só como um corte claro, como fazer uma vez, nunca mais tocar, fazer de novo. Então isso está se sentindo muito melhor. Agora, é claro, podemos fazer essa coisa parecer incrível. Como é que o teu foguete vai parecer? Oh, eu não sei, tente de novo. Acho que se fizesses isso, o teu foguete explodiria e eventualmente voltaria ao fundo. Mas sim, como vai parecer o seu foguete? Como vai parecer a sua interface? Como é que isto se parece? Descolar. Oh, não. Você pode ver aqui, 7, 5, 2. Vamos tentar de novo. Descolar, oh não, de novo. Vamos tentar mais uma vez, ver se a coisa é um sucesso. Você pode ver que isso é como se fosse aleatório. JavaScript está gerando números aleatórios. Terrível. Mas de qualquer forma, abra, vá para a área de trabalho e você vai querer ter certeza que você está em gh-pages e então você vai dizer, “Fiz meu foguete.” Entre em gh-pages e, em seguida, você deseja sincronizar. Toda aquela sincronização. Vamos para GitHub, github.com. Vamos ao nosso repositório js-foguete, certificar-nos de que estamos na ramificação gh-pages. Vá para os nossos commits, fiz os meus foguetes. Agora, o que queremos fazer é ir para mrra-screencasts.github.io/js-rocket. Mas se formos para cá, vai levar-nos àquela página antiga. Então, na verdade, queremos ir para rocket.html e ta-da. Vai funcionar? Sim, online para todos verem. Oh não, tente de novo, perdeu um. Vamos ver se funciona. O último. Oh, não, nossa sorte não é boa. Então você pode mudar esse número para outra coisa, se você realmente quiser. Então você pode dizer que se é maior que um, então é um sucesso. Tem uma pequena chance de falhar. Esse é o nosso foguete, você pode parar aqui, você pode compartilhá-lo. O próximo vídeo eu vou mostrar a vocês como eu fiz meu foguete parecer legal. 15. Depois, deixamos o foguete bem bonito!: Temos nosso foguete para lançar, e agora vamos fazer parecer legal. Eu tenho um par de elementos que eu vou colocar dentro Eu fiz um monte de imagens. Aqui está o meu terreno e aqui está o meu foguete. Aqui está o meu foguete no estado 2 com um pouco de impulso, e este é o meu foguete em arco cheio com muito impulso, muito ness. Então é o que acontece se as coisas não funcionarem, explode. Então eu também gostaria de adicionar um “Eu não posso esperar” e um “Eu estou nervoso” para o cara pequeno que está no foguete. Vê-lo sorrindo. Vamos abrir o foguete JS. O que vou fazer aqui é criar uma nova pasta e vou chamá-la de IMG, e é aí que vou colocar todas as minhas imagens. Então eu estou apenas tentando criar um novo arquivo na janela, ir para documentos, ir para a área de trabalho. Vou arrastar uma destas imagens para o IMG. Fantástico. Não consigo lembrar como é o nosso foguete. Vamos apenas ver. Vamos arrastar rocket.html para o Google Chrome. Enquanto esperamos por isso, vamos abrir o GitHub desktop 2. Ok. É muito chato. Vou ver se o CSS funciona. Então vamos fazer com que pareça um pouco melhor. Vou começar com o foguete e depois quero focar na interface. Certo, então vamos entrar aqui. Vamos abrir nosso foguete CSS. Só vou diminuir um pouco o tamanho da fonte. Então nós temos o foguete nos pequenos estados fundidos, mas eu só quero ver o tamanho dessas imagens. Então, estado do foguete 1, 143 por 272, e eu fiz todos iguais, então será mais fácil trabalhar com ele. Se você apenas copiar isso, e eu vou para aqui, e eu vou definir a largura para 143 pixels e alturas de 272 pixels. Tudo bem, e vamos ver como isso se parece. Então, vamos guardar isto, refrescar. Sim, parece muito bom, mas não está no meio. O que eu gosto de fazer aqui é colocar uma margem negativa, então eu vou apenas dizer margem esquerda, e eu vou dizer negativo 272 dividido por 2, 136. Fantástico. O que ele faz é colocá-lo no meio, mas então você ainda tem toda a largura de um lado. Então você precisa de uma margem esquerda de metade da largura. Agora eu realmente fiz a margem esquerda de metade da altura. Então vamos tentar isso novamente, 143 dividido por 2 é 71,5. Então é isso que eu vou fazer, 71,5 pixels. Cor de fundo. Na verdade, não quero mais uma cor de fundo. Então o que eu vou fazer é apenas usar fundo, e sim, eu quero um URL, e então aqui eu quero minha pasta de imagens. Porque o CSS tem uma pequena sub-pasta, eu vou ir um para cima e então eu vou para ir e encontrar as imagens na pasta de imagem. Ok. Então, como é que lhe chamei? Estado do foguete 1, state1.png. O que é realmente bom sobre essa propriedade de fundo é que podemos dizer, “Sem repetição”, o que significa que o fundo não se repete, e eu queria que 0-0, o que significa que a posição x é zero, a posição y é zero. Você pode definir isso como 10 pixels, menos 10 pixels, o que quiser. Você também pode dizer superior e inferior ou centro e centro. Para mim, isso realmente não faz muita diferença porque minha largura e altura são exatamente iguais à largura e altura do meu fundo. Então eu vou apenas manter isso em zero e zero. Arquivo Salvar. Vamos ver como é. Ok, então aqui temos o meu foguete pequeno, parece incrível. É um pouco fora do chão, o que me frustra. Então o que eu vou fazer aqui é em vez de ter um fundo em 20 pixels, eu vou ter o fundo em zero. Acho que tenho que ter um fundo negativo. Ok, então vamos ver o que tenho que fazer para que isto funcione. Poderíamos ir e voltar do Editor ao Chrome e atualizar o tempo todo, mas isso pode ficar muito trabalhoso. Então o que eu gostaria de fazer aqui é apenas ir para baixo menos 10 pixels. Isso funciona? Lá vamos nós, menos 13. Menos 13. Fantástico. Guarde isso, legal. Refrescante. Aqui vamos nós. Ok, agora a próxima coisa que precisamos fazer é mudar nossa imagem de fundo quando ela começar a ser lançada. O que eu vou fazer aqui é eu vou dizer [inaudível], eu vou fazer comentários. Agora comente em CSS, você tem que usar esses comentários. Enquanto JavaScript, você pode usar comentários como esse, e CSS não funciona. Então eu vou dizer aqui é foguete imagem bg. Então estado 1 nós classificamos, mas agora estado 2. Como é que o estado 2 vai parecer? Então eu também quero o estado 3 e para cima. Então estado 3, estado 4, e então estado 5 é, oh, não, eu vou ter que fazer algo um pouco diferente lá. Ok. Vamos tirar este por enquanto. Eu só vou cortar isso para que as coroas estejam acima aqui, só para que haja alguma diferenciação clara. Ok, então estado 2, eu vou mudar isso para imagem de fundo, e eu vou apenas copiar e colar isso. Como é imagem de fundo, eu não posso colocar “no repeat” em, e eu não posso definir a posição de fundo. Tudo o que estou mudando é a imagem de fundo. Eu estava estado 2 que, eu vou mudá-lo para o estado 2 e eu vou ter certeza que é um GIF ou JIF, você preferir dizer isso. Ok, eu vou refrescar, lançar isso. Então você vê que pequenos propulsores estão saindo. Fantástico. Então ele decola. Ok. Para o estado 3 e o estado 4, vamos mudar isto para o estado 3. Fantástico. Vamos ver como isso funciona. Voilá. Temos um foguete de propulsão. Então, se fizermos de novo, ele começa lá atrás. Isso é fantástico. Agora, precisamos fazer o estado5. Eu só vou copiar e colar isso de novo, e estados. Como é que lhe chamei? boom.png. Agora, ele tem uma largura e altura diferentes, então o que eu vou fazer é copiar isso, eu vou mudá-lo, largura 209 pixels, com uma altura de 200 pixels. Agora, porque eu tenho essa margem esquerda de 71,5, eu ainda quero centralizá-la, então o que eu vou fazer aqui é, ele tem uma largura de 209, então isso deve ser negativo 104,5. Eu poderia resolver isso. Vamos “Salvar” isso e vamos abrir nosso rocket.js. Vamos até aqui para o RandomNumbers, se for maior que um, será um sucesso. Quais são as chances de que ele vai falhar? Muito magro no momento, então eu quero dizer se é maior que nove, o que significa que tem uma grande chance de falhar. Mas isso é ótimo por enquanto, porque eu queria testar minha imagem de boom. Vou “Salvar” isso, voltar para o Chrome, “Atualizar” isso. O que significa Sublime? Não, eu não quero comprá-lo agora, embora obrigado. Nós “Atualizar” isso, “Lançar”. Fantástico. Boom. Tudo bem, então isso funciona. “ Tente de novo”. Você pode ver como estamos nos divertindo um pouco aqui. Isso está nas minhas imagens, nas minhas imagens de foguetes. Eu gostaria de mudar isso de volta para dois talvez já que ainda tem uma boa chance de sucesso. Eu vou “salvar” isso. Então o que eu gostaria de fazer é mudar o chão, um pouco de cor, então mudar isso para o fundo e o url. Eu vou dizer, vamos encontrar no diretório de imagens. Eu acho que eu chamo de ground.png. Vamos ver que ground.png, e é 723 por 15. A largura está boa. Mas o que vamos fazer aqui é dizer, não repita, mas o x vai estar no centro. Eu simplesmente não posso soletrar centro, desculpe , centro, e o y também vai ser o centro. Sempre vai estar no centro para que o foguete fique sentado nele exatamente no meio. Altura 20, tudo bem, mas vamos mudar para 15, provavelmente funcionará melhor, e vamos “Salvar” isso. Parece muito bom, mas eu queria que ele fosse um pouco mais alto novamente, então x estará no centro, y eu vou mudar isso para zero, então ele vai ficar no topo, então eu vou mudar isso de volta para 20. Vamos ver como isso parece. Ainda não é ótimo, então vamos mudar a posição inferior do solo para 10 pixels. Vou copiar isso. Em seguida, o fundo, eu vou colocar em 10 pixels. “ Salvar”. Agora, nós temos o chão, nós temos nossos foguetes muito bonitos. Está parecendo legal, um cara pequeno. Mas agora eu quero que ele diga coisas enquanto a contagem decrescente está indo. Teremos que mudar de JavaScripture e mudar alguns CSS. Está dentro do nosso rocket.js quando a contagem regressiva está acontecendo aqui. Posso dizer, se CountDownNumber for qualquer coisa, você pode mudar os estados. O que podemos fazer aqui é dizer, se CountDownNumber for igual a cinco, vamos fazer alguma coisa. Talvez possamos dizer, fique nervoso. Então também podemos dizer, CountDownNumber é igual a três, podemos dizer, mal posso esperar. O que eu gostaria de fazer aqui é que eu realmente gostaria de mudar algumas aulas. Se você vir aqui, eu quero que ele apareça em algum lugar aqui e em algum lugar aqui, então eu vou ter que colocar em um novo pedaço de HTML. Este é à esquerda, o que está à direita, os foguetes aqui, então eu vou dizer, div eu quero dar-lhe uma classe de “nervoso”, e eu quero fazer outra div com uma classe de “não posso esperar”. Eu vou “salvar” isso e eu vou copiar nervoso e não posso esperar. Vamos copiar isso. Isso vai para rocket.css. Aqui, digamos nervoso, quero dar-lhe uma posição absoluta novamente. Só por agora, vou dizer top 100 pixels e esquerda 100 pixels. O fundo, ele não vai ser uma cor de fundo, ele vai ser uma imagem novamente, então diga url, e nós dizemos img/, eu vou chamá-lo nervous.png. Não vai ser nenhuma repetição, e ele vai ser posicionado x em zero e posição y em zero. Agora, a largura vai ser 223, a altura vai ser 100. Fantástico. Desculpe, fiz algo errado. Veremos como isso funciona. Eu vou salvar isso. Rocket JS, eu também vou salvar. Você verá que mesmo que não haja nada aqui, não afetará nada. Eu estou nervoso, isso parece realmente muito bom, dependendo de onde isso é. Mas por enquanto, provavelmente é melhor estar no fundo. Então eu vou inspecionar isso e eu vou mover isso para o lado, só para termos uma boa compreensão de onde isso está. Veja se não há muito espaço aqui, mas tudo bem. O que eu vou fazer é dizer que este div nervoso na verdade eu quero que seja do fundo. Então eu vou mudar de cima para baixo, e eu vou mudá-lo para 100 pixels. Isso parece certo. Então, 220 abaixo. Voltarei para aqui e mudarei este fundo para 220. Vamos guardar isso. Teríamos de resolver a posição esquerda. À esquerda, 100, podemos ir 50% de novo. Cinquenta por cento, isso é ótimo. Então eu vou para a margem esquerda. Então eu faço mais, ou eu posso apenas pressionar Enter aqui. Margin-esquerda, isso vai ser um valor negativo, então negativo 20 pixels. Então 180 negativo parece certo. Então, margin-esquerda, cole isso. Legal. Vamos salvar isso de novo. Você pode pressionar isso, atualizar. Fantástico. Significa que provavelmente vai estar no mesmo lugar, não importa onde estamos na tela. Isso é ótimo. Isso é uma coisa incrível sobre o posicionamento absoluto. A próxima coisa que preciso é que não posso esperar. Faremos exatamente a mesma coisa. Onde diz “cant-espere “, vou copiar isto e vou colar isto. Vou literalmente copiar e colar tudo isso e mudar isso para cant-wait. Quero ver o quão grande isso é. Então 206 por 65. Agora vamos ter que ver como isso funciona exatamente. O fundo provavelmente vai ser a mesma coisa, esquerda, 50 por cento. Só vou comentar isso. Podemos ir barra de comando, que deve ser o seu comentário, ou você pode tocar seus comentários manualmente. Então, File, Save. Vamos ver como isso se parece. Mal posso esperar. Na verdade, parece muito bom. Vou remover esta margem à esquerda. Então nós temos um can-esperar e nós temos eu estou nervoso. O que eu gostaria de fazer agora é exibir isso como nenhum e exibir isso como nenhum. Quando eu adiciono uma cláusula de cant-wait.show, eu quero exibi-lo como bloco, que é seu tipo de exibição natural. Se adicionarmos uma cláusula e mostrarmos a cada uma delas, ela deve funcionar. Vamos refrescar-nos aqui. Inspecione o elemento. Podemos ver à direita, aqui estou nervoso. Se adicionarmos uma cláusula de show, eles vão dizer, “Ei, estou nervoso”, e se adicionarmos uma cláusula no cant-wait, eles dirão, “Ei, eu não posso esperar.” Se tirarmos isso de novo, verá que está indo embora. Então é isso que vamos fazer com JavaScript. Nós vamos adicionar dinamicamente essas cláusulas de show. Se CountDownNumber for igual a cinco, vamos dizer, pegue este elemento. Então vamos dar a isto uma identificação de nervoso e de não esperar. Deixe-me salvar isso. Eu vou dizer document.getElementByID. Vamos então passar, deixe-me dizer, .className = show nervoso. Vamos copiar e colar isto aqui. Vamos apenas fazer cant-esperar e copiar isso assim. Vamos salvar isso e ver o que acontece. Cinco, três, fantástico. Mas agora não queremos que essas coisas fiquem lá para sempre. O que podemos fazer aqui é dizer outra coisa, copiá-lo, apenas mudar para nervoso, e então, apenas mudar para não esperar. Agora o que podemos dizer é, se é CountDownNumber é maior que três, e CountDownNumber é menor que cinco ou menor que seis, mas podemos dizer menor ou igual a cinco. O que isso significa? É maior que três, então seriam quatro ou cinco. Então talvez possamos fazer este seis e CountDownNumber, vamos deixar para três. Devíamos refrescar-nos aqui. Lançamento. Estou nervoso aparece, vai embora, mal posso esperar, foi muito, muito rápido. Então vamos mudar isso de novo. Talvez possamos mudar isto para sete e isto para quatro. Isso nos dá um alcance de cinco, seis e sete. Vamos fazer exatamente a mesma coisa aqui, exceto que precisa ser maior que um e deve ser quatro aqui. Então são três e dois e quatro. Quatro ou três, dois. Vamos salvar isso. Volte para o Chrome, atualize. Lançá-lo. Bem, sim, lá vamos nós. É o nosso foguete. Nosso foguete em grande estilo, temos alguns elementos extras acontecendo com base na contagem decrescente. Então eu tenho um dia divertido. É muito legal o que você pode fazer. Na verdade, só quero fazer isso parecer bom. Então o HTML foguete, todos estes são código, estado 1, estado 2, estado 3, estado 4, estado 5. Todos parecem praticamente iguais. Então o que eu vou fazer aqui é eu vou apenas chamá-lo de uma interface. Eu vou dar-lhe uma classe de interface, só para que eu possa estilizá-los para todos olhar exatamente o mesmo. Eu vou salvar isso, comando S, ou Controle S ou apenas salvá-lo lá. Agora esta interface, embora esteja tudo à esquerda, então eu vou colocar apenas agora, .interface. Agora, como é que queremos que isto pareça? Quero que tudo esteja alinhado no centro antes de tudo. Então eu vou dizer text-align, center. Eu então quero dar-lhe um preenchimento, digamos de 20 pixels. Incrível. Agora você vê o que acontece aqui. Isso é bem interessante. Se você pode descobrir como tirá-los quando eu clicar em Abortar, bom para você, mas eu vou estilizar o lado esquerdo por enquanto. Quero que os botões grandes sejam grandes. Você pode ver aqui onde diz botão. O resto deles são todos botões. Eu não quero que todos eles sejam botões, eu quero que o lançamento seja o botão, e talvez eles tentem novamente ser um botão. Faça de novo, isso é legal. Vamos tirar o botão do abortar e salvar isso. Essa é a nossa interface. Agora eu quero mudar o botão, então eu posso colocar um botão ou eu posso apenas deixá-lo como botão, mas vamos fazer um botão. Eu vou dizer display inline-block, e eu vou dizer background-color vamos torná-lo branco, vamos fazer a cor do texto preto, e vamos ver como isso parece por agora. Só vou guardá-lo, refrescar-me. Parece bem por enquanto. Vou dar-lhe um preenchimento de 40 pixels. Vou dizer transformar-texto, maiúsculas. Legal. Vamos dar uma olhada e ver como isso parece. É um botão muito estranho, então eu vou dizer 20 pixels no topo e 40 pixels ao redor dos lados. Isso parece bom. Eu vou dizer decoração de texto, nenhuma, porque eu não gosto de sublinhar, e então eu vou dar-lhe um raio de borda de 10 pixels para fazer com que pareça um botão. Vamos ver como isso parece. Muito melhor. Mas eu não gosto do fato de que é tudo fonte serif, eu quero fonte sans-serif. Eu vou mudar isso e dizer corpo, font-family, e vamos mudar isso para Helvetica ou Arial ou sans-serif. Guarde isso. Parece muito melhor agora. A interface, o botão está aqui. Agora eu quero adicionar um cursor do mouse para o meu botão, e aqui eu vou apenas mudar a cor de fundo. Que cor devo mudá-la? Talvez eu mude a cor para vermelho. Eu quero que ele não pareça tão nervoso, então eu vou dizer transição, e então dizer cor, 300 milissegundos. Lá vamos nós. Clique nele. O aborto ainda está lá. Descolar. Você pode ver que meu botão está aqui, ainda no centro. Vamos tentar de novo. É assim que estiliza sua página. Torná-lo tão incrível quanto você quiser. Se você quiser experimentar algumas coisas diferentes, se você quiser experimentar algumas coisas incríveis e legais, dê uma chance. Estarei aqui para te ajudar. Mas é assim que você faz as coisas parecerem legais, é assim que você faz as coisas interativas. Espero que tenha aprendido muito. Há mais uma coisa que eu preciso mostrar a vocês, que eu acho muito legal, e então nós vamos sincronizá-la com o GitHub. Quando alguém faz js-foguete no meu anfitrião local, isso me dá essa coisa, que é como, “Oh meu Deus, o que está acontecendo aqui são apenas um monte de arquivos. Você pode realmente clicar em índice ou foguetes. Se formos para o índice, é o que parece. Mas lembre-se, no URL do GitHub, ele só leva você direto para lá. Você nem está no index.html. Neste, gostaria de adicionar um link que redireciona para rockets.html ou vai automaticamente lá com base em um temporizador. Vamos para o nosso index.html, e o que vamos fazer aqui é dizer um, vá para rocket.html, vá para a página do foguete. Vamos guardar isto e ver se funciona. Sim, ele faz. Isso é uma coisa. O que vamos fazer aqui é apenas dizer p, você será redirecionado em breve. Eu Arquivo, Salvar. Vamos entrar em nosso script.js e digamos, no topo aqui, definir o tempo limite. Eu vou colocar uma função aqui, e nós vamos dizer, eu não sei, dois segundos. O que vamos fazer aqui é que realmente vamos mudar o local, então se tivéssemos que testar isso em nosso console, podemos dizer location.href é igual a rocket.html. Assim mesmo, e isso vai mudar. O que vamos fazer é definir isso nos tempos limite, então depois de dois segundos ele vai nos redirecionar. Location.href é igual a rocket.html. Vamos salvar isso. Vamos voltar aqui, refrescar-nos, e depois de dois segundos leva-nos ao nosso lançamento de foguetes onde podemos divertir-nos. Oh, não. Então, uma vez que você está feito com isso, você abre suas páginas do GitHub, certifique-se de que você está no repositório do js-rocket, certifica-se que você está na ramificação gh-pages, não na ramificação mestre, na ramificação gh-pages, e então diz, fez nosso foguete legal com desenhos etc.” Você confirma e, em seguida, você sincroniza. Enquanto a sua sincronização, o que pode levar um pouco de tempo. Vamos abrir uma nova guia e ir para github.com. Se não tiver sessão iniciada, inicie sessão e, em seguida, vá para o repositório js-rocket, vá para a ramificação gh-pages, vá para os seus commits. Feito nosso foguete legal com desenhos etc Uma vez que isso aconteceu, vamos atualizar esta página do GitHub e vamos ver se isso funciona. Fantástico, funciona. Vamos ver se tudo está enxertando aqui. Parece que é. Você verá que há alguns flashes à medida que as imagens mudam, isso é completamente normal, mas é porque seu navegador não o armazenou em cache. Se tentarmos novamente, você provavelmente verá menos piscando. Sim, sem piscar. Compartilhe suas criações de foguetes na galeria do projeto. Espero que tenha aprendido muito. 16. Valeu! Veja os próximos passos: É o fim dos projetos. Espero que tenha aprendido muito. Eu sei que pode ser bastante esmagador tentar aprender HTML, CSS e JavaScript. Eles são todos tão grandes, e eu sinto que JavaScript é provavelmente o maior porque ele pode manipular HTML e mudar CSS ao mesmo tempo. Espero que tenha se divertido muito. Espero que você tenha gostado, e eu realmente espero que você continue escrevendo JavaScript, HTML e CSS, e mesmo que você faça duas linhas ou cinco ou 10 minutos todos os dias, seu cérebro começará a se lembrar disso. Não será uma sobrecarga, então dê uma chance, tente. Entendemos o que são propriedades, quais métodos são. Entendemos como escrever JavaScript, a sintaxe. Construímos um foguete, lançamos um foguete. Aprendemos um monte de pequenas coisas como, se afirmações, aprendemos sobre funções que aprendemos sobre variáveis, picadores. Há muito mais para aprender sobre JavaScript. Também aprendemos como usar o Sublime Text com JavaScript. Aprendemos como usar o Console no Google Chrome. Aprendemos como usar páginas do GitHub. Aprendemos como usar o GitHub, como criar repositórios ou projetos. Eu realmente gostaria que você compartilhasse seus projetos com pessoas que você conhece. Dê uma parte, vá para sua galeria de projeto, poste links, e lembre-se que o Google, é seu amigo. Se você está preso, se você tem um problema e você não consegue descobrir, Google. Há tanta coisa lá fora. Toda a Web é construída por pessoas que conhecem HTML e JavaScript e CSS. Eles serão capazes de ajudá-lo. Se isso não ajudar, pergunte a um humano de verdade. Eu sou um humano real, então pergunte no fórum sobre Compartilhar Escola. Outras pessoas podem ser capazes de responder, mas eu certamente serei capaz de ajudá-lo se ninguém mais puder. Espero que tenha gostado. Tchau, por enquanto.