Apresentação Das aulas de programação (Versão em Video)

Isso é apenas uma apresentação da nossa aula interativa de codificação, preparada para fazer captions e traduções facilmente. Recomendamos assistir também nossa aula aqui:
https://www.khanacademy.org/cs/programming/

ok, vamos começar a fazer um programa.

Começaremos do zero. E no final, tudo ficará legal. Como um pequeno programa de desenho

Pense nisso como um passei dentro de um redemoinho de vento ao assistir as primeiras lições da Academia Khan.

Apenas tenha uma ideia do que será possivel fazer com este aprendizado.

Não se preocupe em entender todos os pequenos detalhes agora.

Nós apenas queremos dar a você uma ideia do que virá daqui pra frente e que tipos de programa você será capaz de fazer antes de prosseguir.

Agora, não há nada aqui. Então vamos começar desenhando.

Desenharei uma elipse, que é parecida com o círculo.

Assim é feito uma elipse. Você irá aprender como fazê-la também.

E pronto. Como se fosse mágica.

A razão do aparecimento da figura é que há algumas comandos que o ambiente da academia Khan entende.

E vejam só, elipse é um deles.

Não se preocupe sobre quais são todos esses números.

Nós aprenderemos sobre eles em "introdução ao desenho"

isto é apenas uma pequena apresentação.

Assim que nós modificarmos os números, nós poderemos ver que o primeiro a distância na horizontal.

O segundo número, significa a distância na vertical.

O terceiro ponto, significa a "largura" e o último é a "altura" da elipse.

Novamente, você não precisa saber isso agora.

Mas você poderá pausar essa aula e testar esta função .

Você irá aprender todos os detalhes nas aulas posteriores.

A coisa importante agora é entender que estes números controlam como a figura irá parecer-se.

ok, legal. Mas você não está tão impressionado.

Então eu irei fazer alguma coisa que parece uma pouco mais complicada e então por esta elipse que nós fizemos , aqui dentro.

Ok, nada mudou. E você provavelmente ainda não está muito impressionado .

Mas agora o que eu irei fazer, e o resultado será um pouco mais impressionante, é animar o programa.

e agora como você poderá ver , há vários círculos e eles estão seguindo meu mouse assim que o movo.

Você poderá pausar o programa agora e testar esta funcionalidade.

ok, então como é que isto acontece ?

De Onde vem todos os círculos ?

Bem, você irá aprender sobre tudo isso em "introdução à animação" posteriormente, mas já que você está se perguntando, o que acontece é que o computador conversa com nosso programa automaticamente, várias vezes para desenhar e desenhar ..

e você deverá pensar que nosso programa irá ficar cansado disso. Mas pelo contrário, ele continuará fazendo o que está dentro dessa parte mágica do desenho.

Então ele continuará desenhando elipses e depois elipses, infinitamente.

E isso é o que acontece nos bastidores quando nós movimentamos nosso mouse, para fazer diversas elipses.

Mesmo que só escrevemos uma vez.

Então, como um programa sabe onde desenhar a elipse?

Por exemplo, como ele sabe que deve seguir o mouse?

Bem, você aprenderá mais sobre isso em "Interação do mouse"

A grande ideia é que cada vez que o computador fala para nosso programa sobre o mouse usando estes dois comandos.

MouseX e MouseY .

Você não precisa conhecer sobre eles agora, mas MouseX é somente como o mouse se move na horizontal.

Enquanto que MouseY é como o mouse se move na vertical .

Vamos recapitular, quando nós fazemos essa elipse, o que nós estamos dizendo é que o primeiro número diz é : desenhe uma elipse na horizontal assim que o mouse se mover.

A segunda diz: desenhe uma elipse assim que o mouse se movimentar na vertical.

O que significa no final é , desenhe uma elipse na mesma posição que o mouse está.

E então esses últimos dois parâmetros significam que tamanho a elipse terá.

E novamente, não se preocupe sobre todos esses detalhes agora.

Depois de você assistir as próximas lições, isso fará muito sentido.

E agora, como você pode ver, isso está ficando um pouco confuso.

Nós somente clicamos esse botão de reiniciar para iniciar o programa novamente com o quadro branco à esquerda.

Vá em frente e pause o programa agora.

Experimente você mesmo. Para você ver o que acontece.

ok, então agora nós temos alguma coisa agradável acontecendo.

Mas o que nós podemos fazer ?

Bem, esses círculo são um pouco feios.

Eles são sem cor.

Então como seria se nós pudéssemos colorí-los?

Há uma aula "introdução às cores", onde nós aprenderemos sobre todas as cores.

Mas eu estou estragando o segredo e mostrarei para você como fazer isso agora.

olha sóóó.

Agora nós temos círculos vermelhos seguindo nosso mouse.

Mas eles não tem somente que ser vermelhos, porque quando você clica nessas cores aqui, você poderá ver quando você poderá fazer isso, você poderá escolher qualquer cor que você quiser.

Um arco-íris inteiro de cor.

Então que tal, violeta agora.

E você poderá aprender sobre como mudar cores na aula "introdução à cores"

Reiniciaremos de novo. Agora nós temos somente círculos violetas.

Agora nós podemos pensar, nós colocamos tudo isso que aprendemos para desenhar figuras maravilhosas.

Sempre que movemos o mouse.

Mas, isso poderia ser legal desenhar somente algumas coisas, como quando somente o mouse é pressionado.

E eu mostrarei para você como fazer isso agora.

Logicamente, isso não é tão complicado, tudo que nós estamos dizendo é : Se o mouse é pressionado, desenhe um círculo .

De outra forma, não faça nada .

Dissemos: Se, e então , esses estranhos parênteses você não precisa se preocupar.

Então Se(MouseÉPressionado), bem, nós apenas não queremos fazer nada.

Então nós deixamos esta parte aqui embaixo em branco.

Então quando nós reiniciamos , nos podemos dizer:

Estou movendo meu mouse, nada acontece.

Mas quando eu pressiono o mouse, Eu faço o desenho.

Em violeta.

E escrevo coisas, e desenho coisas...

E qualquer coisa que eu deseje. Isso é um tanto agradável.

Já que em poucas linhas de código, nós fizemos esse pequeno programa de desenho.

Então, isso é uma introdução à declaração if.

Onde você aprenderá tudo sobre o que este código faz. O if (se) que acabamos de aprender.

E como ele funciona. Mas Eu aposto que você pode começar a ver a ideia geral.

Tudo o que nós estamos dizendo é : Se o mouse é pressionado, faça isso, e de outra forma:

Se o mouse não for pressionado, então não faça nada.

Legal. Isso é a mesma cosia que lógica que nós temos na nossa cabeça.

Nós somente escrevemos ela em código.

E.. você poderá assinalar, como, o que dizer de todo esse contorno feio ao redor do nosso círculo?

Bem, você poderá aprender como controlar isso mais tarde. Você poderá fazer isso maior...

você poderá fazer isso mais largo...

Você poderá fazer isso de cores diferentes...

Mas por hora, honestamente, E apenas gostaria de me livrar disso.

Então eu irei apenas por nenhum delineamento... aqui em cima ( porque esse pequeno contorno é chamado de delineamento) .

E quando reiniciamos...

Olha! O delineamento desapareceu.

Perfeito! Isso parece como muito mais um programa de desenho.

Então, vamos rapidamente voltar alguns passos atrás.

Você poderá estar curioso: De onde vem todas aquelas habilidades mágicas como ...

"Se" e "Elipse" , e "Desenho"?

Esses comandos úteis são construídos dentro da Academia Khan.

Nós fizemos isso.

E a parte divertida vem do aprendizado de combinar eles dentro dos programas.

Se você está realmente curioso, nós estamos usando uma linguagem chamada de JavaScript

Na academia Khan.

JavaScript é uma das mais populares formas de escrever programas no mundo.

Especialmente na internet.

Então você estará em perfeita companhia.