Você está na página 1de 75

Microsoft Small Basic

Uma introduo programao

Introduo
Small Basic e Programao
Programao de Computadores definida como o processo de criar aplicativos de computador utilizando linguagens de programao. Assim como ns falamos e entendemos ingls, espanhol ou francs, computadores podem entender programas escritos em certas linguagens. Essas so chamadas de linguagens de programao. No comeo existiam apenas algumas linguagens de programao e elas eram muito fceis de aprender e compreender. Mas como computadores e aplicativos se tornaram mais e mais sofisticados, linguagens de programao evoluram rapidamente, acumulando conceitos mais complexos com o passar do tempo. Como resultado, a maioria das modernas linguagens de programao e seus conceitos so bastante difceis de entender para um iniciante. Este fato comeou a desencorajar as pessoas de aprenderem ou tentarem programar. Small Basic uma linguagem de programao que desenhada para tornar a programao extremamente fcil, acessvel e divertida para iniciantes. A inteno do Small Basic derrubar a barreira e servir como trampolim para o incrvel mundo da programao.

Captulo 1

O Ambiente do Small Basic


Vamos comear com uma rpida introduo ao ambiente do Small Basic. Quando SmallBasic.exe lanado pela primeira vez, voc ver uma janela parecida com a da seguinte figura.

Figura 1 O ambiente do Small Basic

Este o ambiente do Small Basic, onde escreveremos e executaremos nossos programas Small Basic. Este ambiente tem vrios elementos distintos que esto identificados por nmeros. O Editor, identificado pelo [1] aonde escreveremos nossos programas Small Basic. Quando voc abre um programa exemplo ou um programa salvo anteriormente, ele ser exibido neste editor. Voc pode ento modific-lo e salv-lo para uso posterior. Voc tambm pode abrir e trabalhar com mais de um programa ao mesmo tempo. Cada programa com o qual voc est trabalhando ser exibido em um editor separado. O editor que contm o programa que voc est atualmente trabalhando chamado de editor ativo. A Barra de ferramentas, identificada pelo [2] usada para gerar comandos tanto para o editor ativo como para o ambiente. Ns aprenderemos sobre os vrios comandos da barra de ferramentas conforme avanamos. A Superfcie, identificada pelo [3] o lugar aonde todas as janelas do editor se encontram.

Nosso Primeiro Programa


Agora que voc est familiarizado com o ambiente do Small Basic, ns iniciaremos a programar nele. Como indicado anteriormente, o editor o lugar aonde escrevemos nossos programas. Portanto digite a seguinte linha no editor.
TextWindow.WriteLine("Ol Mundo")

Este o nosso primeiro programa em Small Basic. E se voc digitou corretamente, voc deveria ver algo similar seguinte figura.

Figura 2 Primeiro Programa

Agora que digitamos nosso novo programa, vamos execut-lo para ver o que acontece. Ns podemos executar nosso programa clicando no boto Executar na barra de ferramentas ou atravs do uso da tecla de atalho F5 no teclado. Se tudo correr bem, nosso programa deveria executar com o resultado como mostrado abaixo.

Figura 3 Resultado do Primeiro Programa

Parabns! Voc acabou de escrever e executar seu primeiro programa em Small Basic. Um programa bem pequeno e simples, mas, no entanto, um grande passo rumo a tornar-se um verdadeiro programador! Agora, tem apenas mais um detalhe antes de criar programas maiores. Ns temos que entender o que acabou de acontecer o que exatamente ns dissemos ao computador para fazer e como o computador sabe o que fazer? No prximo captulo, analisaremos o programa que acabamos de escrever, para alcanar este entendimento.

Enquanto voc digitava seu primeiro programa, voc pode ter observado que um menu contextual apareceu com uma lista de itens (Figura 4). Isto chamado de Intellisense e lhe ajuda a digitar seu programa mais rapidamente. Voc pode percorrer esta lista pressionando as teclas de direo para baixo e para cima, e quando voc encontrar o que deseja, voc pode pressionar a tecla Enter para inserir o item selecionado no seu programa.

Figura 4 - Intellisense

Salvando nosso programa


Se voc deseja fechar o Small Basic e voltar mais tarde para trabalhar no programa que voc acabou de digitar, voc pode salvar o programa. De fato, uma boa prtica salvar os programas de tempos em tempos, para que voc no perca informaes caso o computador seja desligado acidentalmente ou uma falha de energia. Voc pode salvar o programa atual clicando no cone Salvar na barra de ferramentas ou atravs da tecla de atalho Ctrl+S (pressione a tecla S enquanto pressionando a tecla Ctrl).

Entendendo Nosso Primeiro Programa


O que realmente um programa de computador?
Um programa um conjunto de instrues para o computador. Essas instrues dizem ao computador exatamente o que fazer, e o computador sempre segue essas instrues. Assim como pessoas, computadores s podem seguir instrues se especificadas numa linguagem que eles possam entender. Elas so chamadas de linguagens de programao. Existem muitas linguagens que o computador pode entender e Small Basic uma delas. Imagine uma conversa entre voc e seu amigo. Voc e seus amigos usariam palavras, organizadas em frases para trocar informaes. Da mesma forma, linguagens de programao contm colees de palavras que podem ser organizadas em frases para transmitir Existem vrias linguagens que um informaes ao computador. E programas computador pode entender. Java, C++, so basicamente conjuntos de frases Python, VB, etc. so modernas e poderosas (algumas vezes poucas e outras vezes linguagens de programao que so milhares) que juntas fazem sentido tanto para usadas para criar tanto programas simples o programador como para o computador. como complexos.

Captulo 2

Programas Small Basic


Um programa tpico em Small Basic consiste em um conjunto de instrues. Cada linha do programa representa uma instruo e cada instruo um comando para o computador. Quando pedimos ao computador para executar um programa em Small Basic, ele pega o programa e l a primeira instruo. Ele entende o que estamos tentando dizer e ento executa

nossa instruo. Uma vez que ele termina a execuo da primeira instruo, ele retorna ao programa e l e executa a segunda linha. Ele continua fazendo isso at que ele alcana o fim do programa. Nosso programa ento termina.

Retomando o Nosso Primeiro Programa


Aqui est o primeiro programa que escrevemos:
TextWindow.WriteLine("Ol Mundo")

Este um programa muito simples que consiste de uma instruo. Essa instruo diz ao computador para escrever uma linha de texto, que Ol Mundo, na janela de texto. Essa instruo traduz literalmente no computador como:
Escrever (Write) Ol Mundo

Voc pode j ter observado que a instruo pode ser dividida em segmentos menores assim como frases podem ser divididas em palavras. A primeira instruo contm 3 segmentos distintos:
a) TextWindow b) WriteLine c) Ol Mundo

O ponto, os parnteses e as aspas duplas so pontuaes que devem ser colocadas nas posies corretas na instruo, para o computador entender nossa inteno. Pontuao tais como aspas duplas, espaos e parnteses so muito importantes em um Voc pode ter notado a janela preta que programa de computador. Eles podem apareceu quando executamos nosso primeiro mudar o significado do que est sendo programa. Esta janela preta chamada de expresso baseado na sua posio e TextWindow (janela Texto) ou algumas vezes nmero. tambm chamada de Console. ali que o resultado do programa sai. TextWindow, no nosso programa, chamado de objeto. Existem diversos objetos disponveis para usarmos em nossos programas. Podemos realizar diversas operaes nesses objetos. Ns j utilizamos a operao WriteLine (Escrever Linha) no nosso programa. Voc tambm pode ter notado que a operao WriteLine seguida de Ol Mundo entre aspas. Esse texto passado como entrada para a operao WriteLine, que ento

imprime este texto para o usurio. Isso chamado de entrada para uma operao. Algumas operaes aceitam um ou mais parmetros enquanto algumas operaes no aceitam nenhum.

Nosso Segundo Programa


Agora que voc entendeu nosso primeiro programa, vamos seguir adiante e adicionar algumas cores ao programa.
TextWindow.ForegroundColor = "Yellow" TextWindow.WriteLine("Ol Mundo")

Figura 5 Adicionando Cores

Quando voc executa o programa acima, voc ir notar que ele imprime a mesma frase Ol Mundo dentro da janela Texto (TextWindow), mas desta vez ele imprime o texto em amarelo (Yellow) ao invs de cinza como foi anteriormente.

Figura 6 Ol Mundo em Amarelo

Note a nova instruo que adicionamos ao nosso programa original. Ela utiliza uma nova palavra, ForegroundColor (cor de fundo) que ns igualamos ao valor de Yellow (amarelo). Isso significa que ns atribumos Yellow a ForegroundColor. Agora, a diferena entre ForegroundColor e a operao WriteLine que ForegroundColor no aceita nenhum parmetro de entrada e tambm no necessitou de parnteses. Ao invs disso, foi seguido de um smbolo de igual a e uma palavra. Ns definimos ForegroundColor como uma Propriedade de TextWindow. Aqui est uma lista de valores que so vlidos para a propriedade ForegroundColor. Tente substituir Yellow com um destes e veja os resultados no se esquea das aspas duplas, elas so pontuao obrigatria.
Black Blue Cyan Gray Green Magenta Red White Yellow DarkBlue DarkCyan DarkGray DarkGreen DarkMagenta DarkRed DarkYellow

Introduzindo Variveis
Usando Variveis no nosso programa
No seria bacana se nosso programa pudesse dizer Ol com o nome dos usurios ao invs de dizer o genrico Ol Mundo? Para fazer isso, ns precisamos primeiro perguntar ao usurio o seu nome e ento armazen-lo em algum lugar e ento imprimir Ol com o nome do usurio. Vejamos como podemos fazer isso:
TextWindow.Write("Digite seu Nome: ") nome = TextWindow.Read() TextWindow.WriteLine("Ol " + nome)

Captulo 3

Quando voc digita e executa seu programa, voc ver uma sada parecida com a sada a seguir:

Figura 7 Pergunte o nome do usurio

E quando voc digita seu nome e pressiona a tecla ENTER, voc ver a seguinte sada:

Figura 8 Um Ol Caloroso

Agora, se voc executar o programa novamente, a mesma pergunta ser feita novamente. Voc pode digitar um nome diferente e o computador ir dizer Ol com aquele nome.

Anlise do programa
No programa que voc acabou de executar, a linha que pode ter chamado sua ateno esta:
nome = TextWindow.Read()

Read() se parece com WriteLine(), porm sem entradas. Read (ler) uma operao e basicamente diz ao computador para esperar que o usurio digite algo e pressione a tecla ENTER. Uma vez que o usurio pressiona a tecla ENTER, ele pega o que o usurio digitou e o retorna para o programa. O ponto interessante que tudo aquilo que o usurio digitou agora est armazenado numa varivel chamada nome. Uma varivel definida como um Write, assim como WriteLine outra lugar onde voc pode armazenar valores operao em TextWindow. Write permite temporariamente e us-los mais tarde. Na que voc escreva algo na TextWindow mas linha acima, nome foi usado para armazenar permite que texto sucessor seja escrito na o nome do usurio. mesma linha que o texto atual. A prxima linha tambm interessante:
TextWindow.WriteLine("Ol " + name)

Este o lugar onde ns usamos o valor armazenado na nossa varivel, nome. Ns pegamos o valor em nome e o anexamos ao fim de Ol e escrevemos isso na TextWindow. Uma vez que uma varivel definida, voc pode reus-la inmeras vezes. Por exemplo, voc pode fazer o seguinte:
TextWindow.Write("Digite seu Nome: ") nome = TextWindow.Read() TextWindow.Write("Ol " + nome + ". ")

TextWindow.WriteLine("Como voc est " + nome + "?")

E voc ver a seguinte sada:

Figura 9 Reusando uma Varivel

Regras para nomear Variveis


Variveis tm nomes associados a elas e assim que voc as identifica. Existem algumas regras simples e diretrizes muito boas para nomear essas vriaveis. Elas so:
1. O nome deve comear com uma letra e no deve colidir com nenhuma outra palavra-chave como por exemplo if, for, then, etc. 2. Um nome pode conter qualquer combinao de letras, dgitos e sublinhados (_). 3. til nomear variveis de forma significativa j que variveis podem ser to compridas quanto voc desejar, use nomes de variveis para descrever sua inteno.

Brincando com Nmeros


Ns acabamos de ver como voc pode usar variveis para armazenar o nome do usurio. Nos programas a seguir, ns veremos como podemos armazenar e manipular nmeros em variveis. Vamos comear com um programa bem simples:
numero1 = 10 numero2 = 20 numero3 = numero1 + numero2 TextWindow.WriteLine(numero3)

Quando voc executar este programa, voc obter a seguinte sada:

Figura 10 Somando Dois Nmeros

Na primeira linha do programa, voc est Note que os nmeros no esto entre atribuindo varivel numero1 o valor 10. E na aspas duplas. Para nmeros, aspas no segunda linha, voc est atribuindo varivel so necessrias. Voc somente necessita de numero2 o valor 20. Na terceira linha, voc aspas quando voc est usando texto. est somando numero1 e numero2 e ento atribuindo o resultado da soma varivel numero3. Portanto, neste caso, numero3 ter o valor 30. E isso o que ns imprimimos em TextWindow. Agora, vamos modificar ligeiramente esse programa e ver os resultados:
numero1 = 10 numero2 = 20 numero3 = numero1 * numero2 TextWindow.WriteLine(numero3)

O programa acima multiplicar numero1 por numero2 e armazenar o resultado em numero3. E voc pode ver o resultado deste programa abaixo:

Figura 11 Multiplicando Dois Nmeros

Da mesma forma, voc pode subtrair ou dividir nmeros. Aqui est a subtrao:
numero3 = numero1 - numero2

E o smbolo para a diviso /. E o programa se parecer com isso:


numero3 = numero1 / numero2

E o resultado da diviso seria:

Figura 12 Dividindo Dois Nmeros

Um Simples Conversor de Temperatura


Para o prximo programa, ns usaremos a frmula em Fahrenheit para temperaturas em Clsius. Primeiro, ns obteremos a temperatura em Fahrenheit do usurio e a armazenaremos em uma varivel. Existe uma operao que nos deixa ler nmeros digitados pelo usurio que TextWindow.ReadNumber.
TextWindow.Write("Digite a temperatura em Fahrenheit: ") fahr = TextWindow.ReadNumber()

para converter temperaturas

Uma vez que temos a temperatura em Fahrenheit armazenada em uma varivel, ns podemos convert-la para Clsius assim:
celsius = 5 * (fahr - 32) / 9

Os parnteses dizem ao computador para calcular a primeira parte fahr 32 e ento processar o resto. Agora tudo que temos que fazer imprimir o resultado para o usurio. Juntando tudo isto, ns temos este programa:
TextWindow.Write("Digite a temperatura em Fahrenheit: ") fahr = TextWindow.ReadNumber() celsius = 5 * (fahr - 32) / 9 TextWindow.WriteLine("Temperatura em Clsius " + celsius)

E o resultado do programa seria:

Figura 13 Converso de Temperatura

Condies e Ramificao
Voltando ao nosso primeiro programa, no seria legal que ao invs de dizer o genrico Ol Mundo, ns pudssemos dizer Bom Dia Mundo, ou Boa Tarde Mundo dependendo da hora do dia? Para o nosso prximo programa, ns faremos o computador dizer Bom Dia Mundo se o horrio for antes do meio-dia; e Boa Tarde se o horrio for aps o meio-dia.
If (Clock.Hour < 12) Then TextWindow.WriteLine("Bom Dia Mundo") EndIf If (Clock.Hour >= 12) Then TextWindow.WriteLine("Boa Tarde Mundo") EndIf

Captulo 4

Dependendo de quando voc executa o programa, voc ver uma das seguintes sadas:

Figura 14 Bom Dia Mundo

Figura 15 Boa Tarde Mundo

Vamos analisar as trs primeiras linhas do programa. Essas linhas dizem ao computador que se Clock.Hour menor que 12, imprima Bom Dia Mundo. As palavras If, Then e EndIf so palavras especiais que so entendidas pelo computador quando o programa executa. A Em Small Basic, voc pode usar o objeto palavra If (se) sempre seguida de uma Clock para acessar a data e hora atuais. Ele condio, que neste caso (Clock.Hour < 12). tambm fornece a voc uma srie de Lembre que os parnteses so necessrios propriedades que permitem que voc para o computador entender suas intenes. obtenha o Dia, Ms, Ano, Hora, Minutos e A condio seguida da palavra Then (ento) Segundos atuais separadamente. e a real operao para executar. E depois da operao vem a palavra EndIf (final da condio if). Ela diz ao computador que a execuo condicional terminou. Entre a palavra Then e a palavra EndIf, poderiam existir mais de uma operao e o computador ir executar todas se a condio for vlida. Por exemplo, voc poderia escrever algo similar a isto:
If (Clock.Hour < 12) Then TextWindow.Write("Bom Dia. ") TextWindow.WriteLine("Como estava o caf da manh?") EndIf

Else
No programa do incio do captulo, voc pode ter notado que a segunda condio um pouco redundante. O valor Clock.Hour poderia ser maior que 12 ou no. Ns no precisaramos realmente fazer a segunda checagem. Nessas situaes, ns podemos encurtar as duas instrues if..then..endif para ser apenas uma usando uma nova palavra, Else (caso contrrio). Se tivssemos que escrever o programa usando Else, ele seria parecido com este:
If (Clock.Hour < 12) Then TextWindow.WriteLine("Bom Dia Mundo") Else

TextWindow.WriteLine("Boa Tarde Mundo") EndIf

E esse programa far exatamente o mesmo que o outro, o que nos leva para uma importante lio em programao de computadores:

Em programao, existem diversas maneiras de fazer a mesma coisa. s vezes, um jeito faz mais sentindo que o outro. A escolha fica a cargo do programador. Conforme voc for escrevendo mais programas e ficando mais experiente, voc comear a notar as diferentes tcnicas e suas vantagens e desvantagens.

Recuo
Em todos os exemplos voc pode ver que as instrues entre If, Else e EndIf esto recuadas. Este recuo no necessrio. O computador ir entender o programa normalmente sem o recuo. Entretanto, o recuo nos ajuda a ver e entender a estrutura do programa mais facilmente. Portanto, geralmente considerado boa prtica recuar as instrues entre este tipo de bloco de instrues.

Par ou mpar
Agora que ns temos a instruo If..Then..Else..EndIf na nossa mala de truques, vamos escrever um programa que, dado um nmero, o programa dir se o nmero par ou mpar.
TextWindow.Write("Digite um nmero: ") num = TextWindow.ReadNumber() resto = Math.Remainder(num, 2) If (resto = 0) Then TextWindow.WriteLine("O nmero Par ") Else TextWindow.WriteLine("O nmero mpar ") EndIf

E quando voc executa esse programa, voc ver uma sada como esta:

Figura 16 Par ou mpar

Nesse programa, ns introduzimos outra poderosa operao, Math.Remainder (resto da diviso). Math.Remainder, como voc pode imaginar, ir dividir o primeiro nmero pelo segundo nmero e ento retornar o resto da diviso.

Ramificao
Lembre-se, no segundo captulo voc aprendeu que o computador processa um programa uma instruo por vez, em ordem do incio ao fim. Entretanto, existe uma instruo especial que pode fazer o computador pular para outra instruo fora de ordem. Vamos examinar o prximo programa.
i = 1 inicio: TextWindow.WriteLine(i) i = i + 1 If (i < 25) Then Goto inicio EndIf

Figura 17 - Usando Goto

No programa acima, ns atribumos o valor 1 varivel i. E ento ns adicionamos uma nova instruo que termina em dois-pontos (:)
inicio:

Isto chamado de rtulo. Rtulos so como indicadores que o computador entende. Voc poder dar o nome que voc quiser para o indicador e voc pode adicionar quantos rtulos voc quiser no programa, desde que todos eles tenham nomes nicos. Outra instruo interessante esta aqui:
i = i + 1

Isso apenas diz ao computador para adicionar 1 varivel i e atribuir o resultado de volta a i. Portanto, se o valor de i era 1 antes dessa instruo, ele ser 2 depois que essa instruo executada. E finalmente,
If (i < 25) Then Goto inicio EndIf

Essa a parte que diz ao computador que se o valor de i for menor que 25, o computador deve comear a processar as instrues a partir do indicador inicio.

Execuo sem fim


Usando a instruo Goto, voc pode fazer o computador repetir algo qualquer nmero de vezes. Por exemplo, voc pode pegar o programa Par ou mpar e modific-lo como no exemplo abaixo, e o programa ir executar sem parar. Voc pode parar o programa, clicando no boto Fechar (X) no canto superior direito da janela.
inicio: TextWindow.Write("Digite um nmero: ") num = TextWindow.ReadNumber() resto = Math.Remainder(num, 2) If (resto = 0) Then TextWindow.WriteLine("O nmero Par ") Else TextWindow.WriteLine("O nmero mpar ") EndIf Goto inicio

Figura 18 Par ou mpar executando sem parar

Loops
Loop For
Vamos examinar o programa que escrevemos no captulo anterior.
i = 1 inicio: TextWindow.WriteLine(i) i = i + 1 If (i < 25) Then Goto inicio EndIf

Captulo 5

Este programa imprime nmeros de 1 a 24 em ordem. Este processo de incrementar uma varivel muito comum na programao que linguagens de programao geralmente fornecem um mtodo mais fcil de fazer isto. O programa acima equivalente ao programa abaixo:
For i = 1 To 24 TextWindow.WriteLine(i) EndFor

E o resultado :

Figura 19 Usando o Loop For

Note que reduzimos o programa de 8 linhas para um programa de 4 linhas, e ele ainda faz exatamente o mesmo que o programa de 8 linhas! Lembra que antes dissemos que geralmente existem vrias maneiras de fazer a mesma coisa? Este um timo exemplo. For..EndFor , em termos de programao, chamado de loop. Ele permite que voc pegue uma varivel, d um valor inicial e final e deixe que o computador incremente a varivel para voc. Toda vez que o computador incrementa a varivel, ele roda os comandos entre For e EndFor. Mas se voc quisesse que a varivel fosse incrementada de 2 em 2 ao invs de 1 em 1 por exemplo, se voc quiser imprimir todos os nmeros mpares entre 1 e 24, voc pode usar o loop para fazer isso tambm.
For i = 1 To 24 Step 2 TextWindow.WriteLine(i) EndFor

Figura 20 Somente Nmeros mpares

A parte Step 2 do comando For diz ao computador para incrementar o valor de i em 2 ao invs do usual 1. Ao utilizar Step voc pode especificar qualquer incremento que voc quiser. Voc pode at especificar um valor negativo para o passo e fazer o computador contar de trs para frente, como no exemplo abaixo:
For i = 10 To 1 Step -1 TextWindow.WriteLine(i) EndFor

Figura 21 Contando de Trs pra Frente

Loop While
O loop While (enquanto) outro mtodo de looping, que especialmente til quando o contador de loop no conhecido de antemo. Enquanto um loop For executado um nmero pr-determinado de vezes, o loop While executado at que uma dada condio seja verdadeira. No exemplo abaixo, ns estamos dividindo um nmero ao meio enquanto o resultado maior que 1.
numero = 100 While (numero > 1) TextWindow.WriteLine(numero) numero = numero / 2 EndWhile

Figura 22 Loop de Diviso ao Meio

No programa acima, ns atribumos o valor 100 a numero e executamos o loop While enquanto o nmero for que 1. Dentro do loop, ns imprimimos o nmero e ento o dividimos por dois, efetivamente dividindo-o ao meio. E como esperado, a sada do programa nmeros que so progressivamente divididos ao meio um aps o outro. Seria muito difcil escrever este programa usando um loop For, porque ns no sabemos quantas vezes o loop ir executar. Com um loop While fcil checar a condio e pedir ao computador que ou continue o loop ou pare. interessante observar que todo loop While pode ser desembrulhado num comando If..Then. Por exemplo, o programa abaixo pode ser rescrito como segue, sem afetar o resultado final.
numero = 100 inicio: TextWindow.WriteLine(numero) numero = numero / 2 If (numero > 1) Then Goto inicio EndIf

Na verdade, o computador internamente reescreve todo loop While em comandos que usam If..Then com um ou mais comandos Goto.

Introduo a Grficos
At agora nos nossos exemplos, ns temos usado a TextWindow para explicar os conceitos bsicos da linguagem Small Basic. Entretanto, Small Basic vem com um conjunto poderoso de recursos grficos que ns comearemos a explorar neste captulo.

Captulo 6

Apresentando a GraphicsWindow
Assim como ns temos a TextWindow (janela Texto) que nos permite trabalhar com texto e nmeros, Small Basic tambm fornece uma GraphicsWindow (janela Grficos) que podemos usar para desenhar coisas. Vamos comear mostrando a GraphicsWindow.
GraphicsWindow.Show()

Quando voc executar este programa, voc ir notar que ao invs da usual janela de texto preta, voc obter uma janela branca como a mostrada abaixo. Ainda no tem muita coisa para fazer nesta janela. Mas esta ser a janela base na qual iremos trabalhar neste captulo. Voc pode fechar esta janela clicando no boto X no canto superior direito.

Figura 23 Uma janela Grficos vazia

Configurando a janela Grficos


A janela Grficos permite que voc personalize sua aparncia como voc desejar. Voc pode alterar o ttulo, a cor de fundo e seu tamanho. Vamos seguir adiante e modific-la um pouco, apenas para se familiarizar com a janela.
GraphicsWindow.BackgroundColor = "SteelBlue" GraphicsWindow.Title = "Minha Janela Grficos" GraphicsWindow.Width = 320 GraphicsWindow.Height = 200 GraphicsWindow.Show()

Aqui est como a janela Grficos personalizada se parece. Voc pode alterar a cor de fundo por um dos diferentes valores listados no Apndice B. Brinque com essas propriedades para ver como voc pode modificar a aparncia da janela.

Figura 24 Uma janela Grficos Personalizada

Desenhando Linhas
Uma vez que temos a GraphicsWindow ativa, ns podemos desenhar figuras, texto e at imagens nela. Vamos comear desenhando algumas figuras simples. Aqui est um programa que desenha algumas linhas na janela Grficos.
GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.DrawLine(10, 100, 100, 10)

Figura 25 Linhas Cruzadas

As primeiras duas linhas do programa configuram a janela e as duas prximas linhas desenham as linhas cruzadas. Os primeiros dois nmeros que seguem DrawLine (desenhar

Em vez de usar nomes para cores, voc pode usar a notao de cores da web (#RRGGBB). Por exemplo, #FF0000 designa o vermelho, #FFFF00 o amarelo, e assim por diante. Ns aprenderemos mais sobre cores no captulo Cores.

linha) especificam as coordenadas iniciais x e y e os outros dois nmeros especificam as coordenadas finais x e y. interessante observar que com computadores as coordenadas (0,0) iniciam no canto superior esquerdo da janela. Na verdade, no sistema de coordenadas a janela considerada estando no 2 quadrante.

Figura 26 O mapa de coordenadas

Se voltarmos ao programa da linha, interessante notar que o Small Basic permite que voc modifique as propriedades da linha, tais como a cor e sua espessura. Primeiro, vamos modificar as cores das linhas como mostrado no programa abaixo.
GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.PenColor = "Green" GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.PenColor = "Gold" GraphicsWindow.DrawLine(10, 100, 100, 10)

Figura 27 Alterando a Cor da Linha

Agora, vamos modificar o tamanho tambm. No programa abaixo, ns alteramos a largura da linha para 10, ao invs do valor padro que 1.
GraphicsWindow.Width = 200 GraphicsWindow.Height = 200

GraphicsWindow.PenWidth = 10 GraphicsWindow.PenColor = "Green" GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.PenColor = "Gold" GraphicsWindow.DrawLine(10, 100, 100, 10)

Figura 28 Linhas Grossas e Coloridas

PenWidth (largura da caneta) e PenColor (cor da caneta) modificam a caneta com que essas linhas so desenhadas. Eles no apenas afetam linhas mas qualquer figura que seja desenhada depois que essas propriedades foram atualizadas. Atravs do uso das instrues de loop que ns aprendemos nos captulos anteriores, ns podemos facilmente escrever um programa que desenha mltiplas linhas aumentando a grossura da caneta.
GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.Width = 200 GraphicsWindow.Height = 160 GraphicsWindow.PenColor = "Blue" For i = 1 To 10 GraphicsWindow.PenWidth = i GraphicsWindow.DrawLine(20, i * 15, 180, i * 15) endfor

Figura 29 Mltiplas Larguras de Caneta

A parte interessante deste programa o loop, onde ns incrementamos PenWidth toda vez que o loop executado e ento desenhamos uma nova linha abaixo da anterior.

Desenhando e Preenchendo Figuras


Quando se trata de desenhar figuras, geralmente existem dois tipos de operaes para cada figura. Elas so as operaes Draw para desenho e Fill para preenchimento. Operaes Draw desenham o contorno da figura usando uma caneta, e operaes Fill pintam a figura usando um pincel. Por exemplo, no programa abaixo, existem dois retngulos, um que desenhado usando uma caneta vermelha (Red) e outro que preenchido usando o pincel verde (Green).
GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawRectangle(20, 20, 300, 60) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillRectangle(60, 100, 300, 60)

Figura 30 Desenhando e Preenchendo

Para desenhar ou preencher um retngulo, voc precisa de quatro nmeros. Os dois primeiros nmeros representam as coordenadas X e Y para o canto superior esquerdo do retngulo. O terceiro nmero especifica a largura do retngulo enquanto o quarto especifica sua altura. Na verdade, o mesmo se aplica para desenhar e preencher elipses, como mostrado no programa abaixo.
GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawEllipse(20, 20, 300, 60) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillEllipse(60, 100, 300, 60)

Figura 31 Desenhando e Preenchendo Elipses

Crculos so apenas um tipo especial de elipses. Se voc deseja desenhar crculos, voc teria que especificar a mesma largura e altura para a elipse.
GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawEllipse(20, 20, 100, 100) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillEllipse(100, 100, 100, 100)

Figura 32 Crculos

Diverso com as Figuras


Ns iremos nos divertir neste captulo com tudo que aprendemos at agora. Este captulo contm exemplos que mostram algumas maneiras interessantes de combinar tudo que voc aprendeu at agora para criar alguns programas visualmente bacanas.

Captulo 7

Retangular
Aqui ns desenhamos mltiplos retngulos em um loop, enquanto aumentamos seu tamanho.
GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.PenColor = "LightBlue" GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 For i = 1 To 100 Step 5 GraphicsWindow.DrawRectangle(100 - i, 100 - i, i * 2, i * 2) EndFor

Figura 33 - Retangular

Circular
Uma variante do programa anterior que desenha crculos ao invs de quadrados.
GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.PenColor = "LightGreen" GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 For i = 1 To 100 Step 5 GraphicsWindow.DrawEllipse(100 - i, 100 - i, i * 2, i * 2) EndFor

Figura 34 Circular

Aleatrio
Este programa usa a operao GraphicsWindow.GetRandomColor (obter cor aleatria) para atribuir cores aleatrias para o pincel e ento usa Math.GetRandomNumber (obter nmero aleatrio) para atribuir as coordenadas x e y aos crculos. Essas duas operaes podem ser combinadas de maneiras interessantes para criar programas atraentes que do diferentes resultados cada vez que eles so executados.

GraphicsWindow.BackgroundColor = "Black" For i = 1 To 1000 GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() x = Math.GetRandomNumber(640) y = Math.GetRandomNumber(480) GraphicsWindow.FillEllipse(x, y, 10, 10) EndFor

Figura 35 Aleatrio

Fractais
O programa a seguir desenha um simples tringulo fractal usando nmeros aleatrios. Um fractal uma figura geomtrica que pode ser subdividida em partes, cada uma delas se parece com a figura original exatamente. Neste caso, o programa desenha centenas de tringulos, onde cada um se parece com o tringulo original. E j que o programa executa por alguns segundos, voc pode realmente ver os tringulos se formando lentamente a partir de meros pontos. A lgica em si um pouco difcil de descrever e deixaremos como um exerccio para voc explorar.
GraphicsWindow.BackgroundColor = "Black" x = 100 y = 100

For i = 1 To 100000 r = Math.GetRandomNumber(3) ux = 150 uy = 30 If (r = 1) then ux = 30 uy = 1000 EndIf If (r = 2) Then ux = 1000 uy = 1000 EndIf x = (x + ux) / 2 y = (y + uy) / 2 GraphicsWindow.SetPixel(x, y, "LightGreen") EndFor

Figura 36 - Triangulo Fractal

Se voc quiser realmente ver os pontos lentamente formando o fractal, voc pode introduzir um atraso no loop atravs do uso da operao Program.Delay. Essa operao tem como

parmetro um nmero que especifica em milissegundos quanto tempo retardar. Aqui est o programa modificado, com a linha alterada em negrito.
GraphicsWindow.BackgroundColor = "Black" x = 100 y = 100 For i = 1 To 100000 r = Math.GetRandomNumber(3) ux = 150 uy = 30 If (r = 1) then ux = 30 uy = 1000 EndIf If (r = 2) Then ux = 1000 uy = 1000 EndIf x = (x + ux) / 2 y = (y + uy) / 2 GraphicsWindow.SetPixel(x, y, "LightGreen") Program.Delay(2) EndFor

Aumentando o atraso far seu programa executar mais lentamente. Experimente com os nmeros para ver qual voc gosta mais. Outra modificao que voc pode fazer substituir a seguinte linha:
GraphicsWindow.SetPixel(x, y, "LightGreen")

por
color = GraphicsWindow.GetRandomColor() GraphicsWindow.SetPixel(x, y, color)

Essa mudana far com que o programa desenhe os pixels do tringulo usando cores aleatrias.

Tartaruga Grfica
Logo
Nos anos 70, existia uma linguagem de programao bem simples mas poderosa chamada Logo que foi usada por alguns pesquisadores. Isso foi at que algum adicionou o que foi chamado de Tartaruga Grfica linguagem e tornou disponvel uma tartaruga que era visvel na tela e respondia a comandos tais como v para frente, vire direita, vire esquerda, etc. Usando a tartaruga, as pessoas eram capazes de desenhar formas interessantes na tela. Isso fez a linguagem imediatamente acessvel e atraente para pessoas de todas as idades, e foi amplamente responsvel por sua grande popularidade nos anos 80. Small Basic vem com um objeto Turtle (tartaruga) com vrios comandos que podem ser chamados a partir de programas Small Basic. Neste captulo, ns usaremos a tartaruga para desenhar grficos na tela.

Captulo 8

A Tartaruga
Para comear, ns precisamos fazer a tartaruga visvel na tela. Isso pode ser alcanado atravs de uma simples linha de programa.
Turtle.Show()

Quando voc executa este programa, voc observar uma janela branca, assim como a que vimos no captulo anterior, exceto que esta tem uma tartaruga no centro. esta tartaruga que ir seguir nossas instrues e desenhar o que pedirmos a ela.

Figura 37 A tartaruga est visvel

Movendo e Desenhando
Uma das instrues que a tartaruga entende Move (mover). Esta operao recebe um nmero como entrada. Este nmero diz tartaruga o quanto se mover. Digamos, no exemplo abaixo, ns pediremos tartaruga para se mover 100 pixels.
Turtle.Move(100)

Quando voc executa este programa, voc pode realmente ver a tartaruga se mover lentamente uns 100 pixels para cima. Conforme ela se move, voc tambm perceber que ela est desenhando uma linha atrs dela. Quando a tartaruga tiver parado de se mover, o resultado se parecer com o da figura abaixo.

Quando usar operaes de Turtle, no necessrio chamar o mtodo Show(). A tartaruga se tornar visvel automaticamente sempre que uma operao de Turtle for executada.

Figura 38 Movendo cem pixels

Desenhando um Quadrado
Um quadrado tem quatro lados, dois verticais e dois horizontais. Para desenhar um quadrado, ns precisamos ser capazes de fazer a tartaruga desenhar uma linha, virar direita e desenhar outra linha e continuar isso at que os quatro lados estejam terminados. Se traduzssemos isso em um programa, assim como ele se pareceria.
Turtle.Move(100) Turtle.TurnRight() Turtle.Move(100) Turtle.TurnRight() Turtle.Move(100) Turtle.TurnRight() Turtle.Move(100) Turtle.TurnRight()

Quando voc executa este programa, voc pode ver a tartaruga desenhando um quadrado, uma linha por vez, e o resultado se parece com a figura abaixo.

Figura 39 A tartaruga desenhando um quadrado

Ser interessante notar que ns estamos emitindo as mesmas duas instrues uma vez aps a outra quatro vezes para sermos mais precisos. E ns j aprendemos que tais comandos repetitivos podem ser executados usando loops. Portanto, se pegarmos o programa anterior e o modificarmos para usar o loop For..EndFor, ns terminaremos com um programa muito mais simples.
For i = 1 To 4 Turtle.Move(100) Turtle.TurnRight() EndFor

Mudando as Cores
A tartaruga desenha na mesma GraphicsWindow (janela Grficos) que ns vimos no captulo anterior. Isso significa que todas as operaes que ns aprendemos no captulo anterior ainda so vlidas aqui. Por exemplo, o programa a seguir desenhar o quadrado com cada lado com uma cor diferente.
For i = 1 To 4 GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor() Turtle.Move(100)

Turtle.TurnRight() EndFor

Figura 40 Mudando as Cores

Desenhando figuras mais complexas


A tartaruga, alm das operaes TurnRight (virar direita) e TurnLeft (virar esquerda), possui uma operao Turn (virar). Esta operao recebe uma entrada que especifica o ngulo de rotao. Usando esta operao, possvel desenhar um polgono com qualquer quantidade de lados. O programa a seguir desenha um hexgono (um polgono de seis lados).
For i = 1 To 6 Turtle.Move(100) Turtle.Turn(60) EndFor

Experimente este programa para ver se ele realmente desenha um hexgono. Observe que como o ngulo entre os lados de 60 graus, ns usamos Turn(60). Para tal polgono, cujos lados so todos iguais, o ngulo entre os lados pode ser facilmente obtido dividindo 360 pelo nmero de lados. Munidos com esta informao e usando variveis, ns podemos escrever um programa bastante genrico para desenhar um polgono com qualquer nmero de lados.

lados = 12 comprimento = 400 / lados angulo = 360 / lados For i = 1 To lados Turtle.Move(comprimento) Turtle.Turn(angulo) EndFor

Usando este programa, ns podemos desenhar qualquer polgono apenas modificando a varivel lados. Colocando 4 aqui nos daria o quadrado que ns comeamos. Colocando um valor suficiente grande, digamos 50, faria o resultado indistinguvel de um crculo.

Figura 41 Desenhando um polgono de 12 lados

Usando a tcnica que acabamos de aprender, ns podemos fazer a tartaruga desenhar crculos cada vez com um pequeno movimento resultando em uma sada interessante.
lados = 50 comprimento = 400 / lados angulo = 360 / lados Turtle.Speed = 9

For j = 1 To 20 For i = 1 To lados Turtle.Move(comprimento) Turtle.Turn(angulo) EndFor Turtle.Turn(18) EndFor

O programa acima tem dois loops For..EndFor, um dentro do outro. O loop interno (i = 1 to lados) similar ao programa do polgono e responsvel por desenhar um crculo. O loop externo (j = 1 to 20) responsvel por virar a tartaruga um pouco cada vez que um crculo desenhado. Isso diz tartaruga para desenhar 20 crculos. Quando colocados juntos, este programa resulta num padro muito interessante, como o mostrado abaixo.

No programa acima, ns fizemos a tartaruga ir mais rpido, definindo a propriedade Speed (velocidade) para 9. Voc pode configurar esta propriedade para qualquer valor entre 1 e 10 para fazer a tartaruga se mover o quo rpido voc desejar.

Figura 42 Indo em crculos

Movendo
Voc pode fazer a tartaruga no desenhar usando a operao PenUp (levantar a caneta). Isso permite que voc mova a tartaruga para qualquer lugar na tela sem desenhar uma linha. Usando PenDown (abaixar a caneta) far a tartaruga desenhar novamente. Isso pode ser usado para obter alguns efeitos interessantes, como por exemplo, linhas pontilhadas. Aqui est um programa que usa isso para desenhar um polgono com linhas pontilhadas.
lados = 6 comprimento = 400 / lados angulo = 360 / lados For i = 1 To lados For j = 1 To 6 Turtle.Move(comprimento / 12) Turtle.PenUp() Turtle.Move(comprimento / 12) Turtle.PenDown() EndFor Turtle.Turn(angulo) EndFor

Novamente, este programa tem dois loops. O loop interno desenha uma linha pontilhada, enquanto o loop externo especifica quantas linhas desenhar. No nosso exemplo, ns usamos 6 para a varivel lados e portanto ns obtivemos um hexgono de linhas pontilhadas, como mostra a figura abaixo.

Figura 43 - Usando PenUp e PenDown

Sub-rotinas
Muito frequentemente, enquanto escrevemos programas, ns encontramos casos onde teremos que executar os mesmos passos repetidamente. Nesses casos, no faria muito sentido reescrever as mesmas instrues mltiplas vezes. ento que sub-rotinas se tornam teis. Uma sub-rotina uma poro de cdigo dentro de um programa maior que geralmente faz algo bastante especfico, e pode ser chamada de qualquer ponto no programa. Sub-rotinas so identificadas por um nome que segue a palavra-chave Sub e so terminadas pela palavra-chave EndSub. Por exemplo, o fragmento de cdigo a seguir representa uma sub-rotina cujo nome ImprimirHora, e ela realiza a tarefa de imprimir a hora atual na TextWindow.
Sub ImprimirHora TextWindow.WriteLine(Clock.Time) EndSub

Captulo 9

A seguir est um programa que inclui a sub-rotina e a chama a partir de vrios lugares.
ImprimirHora() TextWindow.Write("Digite seu nome: ") nome = TextWindow.Read() TextWindow.Write(nome + ", a hora agora : ") ImprimirHora() Sub ImprimirHora

TextWindow.WriteLine(Clock.Time) EndSub

Figura 44 Chamando uma simples sub-rotina

Voc executa uma sub-rotina chamando NomeSubrotina (). Como sempre, os parnteses () so necessrios para dizer ao computador o que fazer quando executar a sub-rotina.

Vantagens de usar sub-rotinas


Como acabamos de ver, sub-rotinas ajudam a reduzir a quantidade de cdigo que voc tem que digitar. Uma vez que voc tem a subrotina ImprimirHora escrita, voc pode cham-la a partir de qualquer ponto no seu programa e ela imprimir a hora atual. Lembre-se que voc s pode chamar uma sub-rotina Small Basic a partir do mesmo programa. Voc no pode chamar uma sub-rotina a partir de qualquer outro programa.

Alm disso, sub-rotinas ajudam a decompor problemas complexos em peas mais simples. Digamos que voc tenha uma equao complexa para resolver, voc pode escrever diversas sub-rotinas que resolvem peas menores da equao complexa. Ento voc pode juntar os resultados para obter a soluo para a equao complexa original. Sub-rotinas tambm podem auxiliar a melhorar a legibilidade de um programa. Em outras palavras, se voc nomear bem as sub-rotinas para pores que so executadas frequentemente no seu programa, seu programa se torna fcil de ler e compreender. Isto muito importante se voc quiser entender o programa de outra pessoa ou se voc quer que seu programa seja entendido por outros. Algumas vezes, til mesmo quando voc quer ler seu prprio programa, digamos uma semana depois que voc o escreveu.

Usando variveis
Voc pode acessar e usar qualquer varivel que voc tem em um programa de dentro de uma sub-rotina. Por exemplo, o programa a seguir aceita dois nmeros e imprime o maior dos dois. Observe que a varivel maior usada tanto dentro como fora da sub-rotina.

TextWindow.Write("Digite o primeiro nmero: ") num1 = TextWindow.ReadNumber() TextWindow.Write("Digite o segundo nmero: ") num2 = TextWindow.ReadNumber() DescobrirMaior() TextWindow.WriteLine("O maior nmero : " + maior) Sub DescobrirMaior If (num1 > num2) Then maior = num1 Else maior = num2 EndIf EndSub

E a sada do programa se parece com isso:

Figura 45 O maior de dois nmeros usando sub-rotina

Vamos examinar outro exemplo que ilustrar o uso de sub-rotinas. Desta vez usaremos um programa grfico que calcula vrios pontos que ele armazenar nas variveis x e y. Ento ele chama uma sub-rotina DesenharCirculoUsandoCentro que responsvel por desenhar um crculo usando x e y como o centro.
GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.PenColor = "LightBlue" GraphicsWindow.Width = 480 For i = 0 To 6.4 Step 0.17 x = Math.Sin(i) * 100 + 200 y = Math.Cos(i) * 100 + 200 DesenharCirculoUsandoCentro() EndFor Sub DesenharCirculoUsandoCentro inicioX = x - 40

inicioY = y - 40 GraphicsWindow.DrawEllipse(inicioX, inicioY, 120, 120) EndSub

Figura 46 Exemplo Grfico para sub-rotinas

Chamando sub-rotinas dentro de Loops


Algumas vezes sub-rotinas so chamados de dentro de um loop, durante o qual elas executam o mesmo conjunto de instrues mas com diferentes valores em uma ou mais variveis. Por exemplo, digamos que voc tenha uma sub-rotina chamada VerificarPrimo e esta sub-rotina determina se um nmero primo ou no. Voc pode escrever um programa que deixa o usurio digitar um valor e voc pode ento dizer se primo ou no, usando esta sub-rotina. O programa abaixo ilustra isso.
TextWindow.Write("Digite um nmero: ") i = TextWindow.ReadNumber() primo = "True" VerificarPrimo() If (primo = "True") Then TextWindow.WriteLine(i + " um nmero primo ") Else

TextWindow.WriteLine(i + " no um nmero primo ") EndIf Sub VerificarPrimo For j = 2 To Math.SquareRoot(i) If (Math.Remainder(i, j) = 0) Then primo = "False" Goto FimLoop EndIf Endfor FimLoop: EndSub

A sub-rotina VerificarPrimo recebe o valor de i e tenta dividi-lo por nmeros menores. Se um nmero divide i e tem resto zero, ento i no um nmero primo. Neste ponto, a sub-rotina configura o valor de primo para False (falso) e sai. Se o nmero era indivisvel por nmeros menores ento o valor de primo permanece como True (verdadeiro).

Figura 47 Verificando se um nmero primo

Agora que temos uma sub-rotina que pode fazer a verificao de nmeros primos para ns, voc pode querer usar isso para listar todos os nmeros primos menores que, por exemplo, 100. muito fcil modificar o programa anterior e chamar VerificarPrimo de dentro de um loop. Isso d sub-rotina um valor diferente para calcular toda vez que o loop executa. Vejamos como isso feito no exemplo a seguir.
For i = 3 To 100 primo = "True" VerificarPrimo() If (primo = "True") Then TextWindow.WriteLine(i) EndIf EndFor Sub VerificarPrimo For j = 2 To Math.SquareRoot(i) If (Math.Remainder(i, j) = 0) Then

primo = "False" Goto FimLoop EndIf Endfor FimLoop: EndSub

No programa anterior, o valor de i atualizado toda vez que o loop executado. Dentro do loop, uma chamada para a sub-rotina VerificarPrimo feita. A sub-rotina VerificarPrimo ento recebe o valor de i e calcula se i ou no um nmero primo. Este resultado armazenado na varivel primo onde ento acessada pelo loop fora da sub-rotina. O valor de i ento impresso se ele for um nmero primo. E j que o loop inicia em 3 e vai at 100, ns obtemos a lista de todos os nmeros primos que esto entre 3 e 100. Abaixo est o resultado do programa.

Figura 48 Nmeros Primos

Matrizes
A esta altura, voc deve estar bem acostumado em como usar variveis afinal voc chegou at este ponto e ainda est se divertindo, certo? Vamos, por um momento, revisitar o primeiro programa que voc escreveu com variveis:
TextWindow.Write("Digite seu Nome: ") nome = TextWindow.Read() TextWindow.WriteLine("Ol " + nome)

Captulo 10

Neste programa, ns recebemos e armazenamos o nome do usurio numa varivel chamada nome. Depois ns dissemos Ol ao usurio. Agora, vamos dizer que existam mais de um usurio digamos que existam 5 usurios. Como iramos armazenar todos esses nomes? Uma maneira de fazer isso :
TextWindow.Write("Usuario1, nome1 = TextWindow.Read() TextWindow.Write("Usuario2, nome2 = TextWindow.Read() TextWindow.Write("Usuario3, nome3 = TextWindow.Read() TextWindow.Write("Usuario4, nome4 = TextWindow.Read() TextWindow.Write("Usuario5, nome5 = TextWindow.Read() digite nome: ") digite nome: ") digite nome: ") digite nome: ") digite nome: ")

TextWindow.Write("Ol ") TextWindow.Write(nome1 + ", TextWindow.Write(nome2 + ", TextWindow.Write(nome3 + ", TextWindow.Write(nome4 + ", TextWindow.WriteLine(nome5)

") ") ") ")

Quando voc executar este cdigo, voc obter um resultado similar a este:

Figura 49 Sem usar matrizes

Claramente deve existir um forma mais fcil de escrever um programa to simples, certo? Especialmente j que o computador muito bom ao fazer tarefas repetitivas, porque deveramos se dar ao trabalho de escrever o mesmo cdigo vez aps outra para cada novo usurio? O truque aqui armazenar e recuperar mais de um nome de usurio usando a mesma varivel. Se pudermos fazer isso, ento podemos usar o loop For que aprendemos em captulos anteriores. Aqui aonde matrizes vm nos ajudar.

O que uma matriz?


Uma matriz um tipo especial de varivel que pode armazenar mais de um valor ao mesmo tempo. Basicamente, isso significa que ao invs de ter que criar nome1, nome2, nome3, nome4 e nome5 para armazenar cinco nomes de usurio, ns podemos apenas usar nome para armazenar os cinco nomes de usurio. A maneira como armazenamos valores mltiplos atravs do uso de uma coisa chama ndice. Por exemplo, nome[1], nome[2], nome[3], nome[4] e nome[5] podem armazenar um valor cada um. Os nmeros 1, 2, 3, 4 e 5 so chamados ndices para a matriz. Apesar de nome[1], nome[2], nome[3], nome[4] e nome[5] parecerem que so variveis diferentes, eles so na realidade apenas uma varivel. E qual a vantagem disso, voc pode perguntar. A melhor parte de armazenar valores em uma matriz que voc pode especificar o ndice usando outra varivel que nos permite acessar matrizes dentro de loops.

Agora, vamos ver como podemos colocar nosso novo conhecimento em prtica rescrevendo nosso programa anterior com matrizes.
For i = 1 To 5 TextWindow.Write("Usuario" + i + ", digite nome: ") nome[i] = TextWindow.Read() EndFor TextWindow.Write("Ol ") For i = 1 To 5 TextWindow.Write(nome[i] + ", ") EndFor TextWindow.WriteLine("")

Muito mais fcil de ler, no? Observe as duas linhas em negrito. A primeira armazena um valor na matriz e a segunda l um valor da matriz. O valor que voc armazena em nome[1] no sera afetado pelo que voc armazenar em nome[2]. Portanto, para a maioria dos casos, voc pode tartar nome[1] e nome[2] como duas variveis diferentes com a mesma identidade.

Figura 50 Usando matrizes

O programa acima d quase exatamente o mesmo resultado que o programa sem matrizes, exceto pela virgule aps Louva-a-Deus. Ns podemos consertar isso rescrevendo o loop de impresso assim:
TextWindow.Write("Hello ") For i = 1 To 5 TextWindow.Write(nome[i]) If i < 5 Then TextWindow.Write(", ") EndIf EndFor TextWindow.WriteLine("")

Indexando uma matriz

ndices da matriz no distinguem maisculas de minsculas, assim como variveis regulares.

No nosso programa anterior, voc viu que usamos nmeros como ndices para armazenar e recuperar valores da matriz. Acontece que ndices no so restritos apenas a nmeros e na verdade muito til usar ndices textuais tambm. Por exemplo, no programa a seguir, ns solicitamos e armazenamos vrias informaes a respeito de um usurio e ento imprimimos a informao que o usurio desejar.
TextWindow.Write("Digite nome: ") usuario["nome"] = TextWindow.Read() TextWindow.Write("Digite idade: ") usuario["idade"] = TextWindow.Read() TextWindow.Write("Digite cidade: ") usuario["cidade"] = TextWindow.Read() TextWindow.Write("Digite CEP: ") usuario["CEP"] = TextWindow.Read() TextWindow.Write("Que informao voc deseja? ") indice = TextWindow.Read() TextWindow.WriteLine(indice + " = " + usuario[indice])

Figura 51 Usando ndices no numricos

Mais de uma dimenso


Digamos que voc queira armazenar o nome e o telephone de todos seus amigos e ento ser capaz de buscar seus telefones quando voc precisar uma espcie de agenda telefnica. Como voc escreveria tal programa? Neste caso, existem dois conjuntos de ndices (tambm conhecidos como dimenso da matriz) envolvidos. Vamos assumir que ns identificamos cada amigo pelo seu apelido. Isso se torna nosso primeiro ndice na matriz. Uma vez que usamos o primeiro ndice para obtermos a

varivel do nosso amigo, o segundo dos ndices, nome e telefone nos ajudariam a obter o nome e telefone daquele amigo. A maneira como armazenamos estes dados seria assim:
amigos["JC"]["Nome"] = "Joo Carlos" amigos["JC"]["Telefone"] = "3221-1234" amigos["Van"]["Nome"] = "Vanessa" amigos["Van"]["Telefone"] = "3227-4567" amigos["Carol"]["Nome"] = "Caroline" amigos["Carol"]["Telefone"] = "3224-2345"

J que temos dois ndices na mesma matriz amigos, esta matriz chamada de matriz de duas dimenses. Uma vez que temos este programa configurado, ns podemos receber como entrada o apelido de um amigo e imprimir a informao que temos armazenada sobre eles. Aqui est o programa completo que faz isso:
amigos["JC"]["Nome"] = "Joo Carlos" amigos["JC"]["Telefone"] = "3221-1234" amigos["Van"]["Nome"] = "Vanessa" amigos["Van"]["Telefone"] = "3227-4567" amigos["Carol"]["Nome"] = "Caroline" amigos["Carol"]["Telefone"] = "3224-2345" TextWindow.Write("Digite o apelido: ") apelido = TextWindow.Read() TextWindow.WriteLine("Nome: " + amigos[apelido]["Nome"]) TextWindow.WriteLine("Telefone: " + amigos[apelido]["Telefone"])

Figura 52 Uma agenda telefnica simples

Usando Matrizes para representar grades


Um uso muito comum de matrizes multidimensionais representar grades/tabelas. Grades tem linhas e colunas, que podem se ajustar muito bem em uma matriz de duas dimenses. Um programa simples que dispe caixas numa grade dado a seguir:
linhas = 8 colunas = 8 tamanho = 40 For l = 1 To linhas For c = 1 To colunas GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() caixas[l][c] = Shapes.AddRectangle(tamanho, tamanho) Shapes.Move(caixas[l][c], c * tamanho, l * tamanho) EndFor EndFor

Este programa adiciona retngulos e os posiciona para formarem uma grade 8x8. Alm de posicionar essas caixas, o programa tambm armazena essas caixas numa matriz. Isso nos permite controlar essas caixas facilmente e us-las novamente quando necessrio.

Figura 53 Posicionando caixas numa grade

Por exemplo, adicionando o cdigo a seguir no final do programa anterior faria essas caixas se moverem para o canto superior esquerdo.
For l = 1 To linhas For c = 1 To colunas Shapes.Animate(caixas[l][c], 0, 0, 1000) Program.Delay(300) EndFor EndFor

Figura 54 Controlando as caixas na grade

Eventos e Interatividade
Nos primeiros dois captulos, ns introduzimos objetos que tem Propriedades e Operaes. Alm de propriedades e operaes, alguns objetos tm o que chamamos de Eventos. Eventos so como sinais que so are gerados, por exemplo, em resposta a aes do usurio, tais como mover o mouse ou clicar em um boto do mouse. De certa forma, eventos so o oposto de operaes. No caso da operao, voc como um programador chama a operao para fazer o computador fazer algo; onde no caso de eventos, o computador lhe informa quando algo interessante aconteceu.

Captulo 11

Como os eventos so teis?


Eventos so centrais para introduzir interatividade em um programa. Se voc quer permitir que um usurio interaja com seu programa, eventos so o que voc vai usar. Digamos que voc esteja escrevendo um jogo da velha. Voc quer permitir que o usurio escolha a sua jogada, certo? A onde eventos entram voc recebe a entrada do usurio de dentro do seu programa usando eventos. Se isso parece difcil de entender, no se preocupe, ns examinaremos um exemplo bem simples que ajudar voc a entender o que so eventos e como eles podem ser usados. A seguir est um programa bem simples que tem apenas uma instruo e uma sub-rotina. A sub-rotina usa a operao ShowMessage (mostrar mensagem) no objeto GraphicsWindow (janela Grficos) para exibir um caixa de mensagem para o usurio.
GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown GraphicsWindow.ShowMessage("Voc clicou.", "Ol") EndSub

A parte interessante de observar no programa acima que a linha onde ns atribumos o nome da sub-rotina ao evento MouseDown do objeto GraphicsWindow. Voc observar que o evento MouseDown se parece muito com uma propriedade exceto que ao invs de atribuirmos um valor, ns estamos atribuindo a sub-rotina OnMouseDown a ele. Isto que especial a respeito de eventos quando o evento acontece, a sub-rotina automaticamente chamada. Neste caso, a sub-rotina OnMouseDown chamada toda vez que o usurio clica o mouse, na GraphicsWindow. Vamos l, execute o programa e experimente. Cada vez que clicar na GraphicsWindow com seu mouse, voc ver uma caixa de mensagem como a mostrada na figura abaixo.

Figura 55 Resposta a um evento

Este tipo de manipulao de eventos muito poderoso e permite a criao de programas bem criativos e interessantes. Programas escritos desta forma so geralmente chamados de programas orientados a eventos. Voc pode modificar a sub-rotina OnMouseDown para fazer outras coisas alm de exibir uma caixa de mensagem. Por exemplo, como no programa a seguir, voc pode desenhar grandes crculos azuis onde o usurio clicar com o mouse.
GraphicsWindow.BrushColor = "Blue" GraphicsWindow.MouseDown = OnMouseDown Sub OnMouseDown x = GraphicsWindow.MouseX - 10 y = GraphicsWindow.MouseY - 10 GraphicsWindow.FillEllipse(x, y, 20, 20) EndSub

Figura 556 Manipulando o evento Mouse Down

Observe que no programa acima ns usamos MouseX e MouseY para obter as coordenadas do mouse. Ns ento usamos isto para desenhar um crculo usando as coordenadas do mouse como o centro do crculo.

Manipulando mltiplos eventos


No existem limites para quantos eventos voc deseja manipular. Voc pode at mesmo ter uma sub-rotina que manipula mltiplos eventos. Entretanto, voc pode manipular um evento apenas uma vez. Se voc tentar atribuir duas sub-rotinas ao mesmo evento, a segunda vence. Para ilustrar isso, vamos pegar o exemplo anterior e adicionar uma sub-rotina que manipula pressionamento de teclas. Alm disso, vamos fazer esta nova sub-rotina alterar a cor do pincel, para que quando voc clicar com o mouse, voc obter um crculo de uma cor diferente.
GraphicsWindow.BrushColor = "Blue" GraphicsWindow.MouseDown = OnMouseDown GraphicsWindow.KeyDown = OnKeyDown Sub OnKeyDown GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() EndSub

Sub OnMouseDown x = GraphicsWindow.MouseX - 10 y = GraphicsWindow.MouseY - 10 GraphicsWindow.FillEllipse(x, y, 20, 20) EndSub

Figura 567 Manipulando mltiplos eventos

Se voc executar este programa e clicar na janela, voc obter um crculo azul. Agora, se voc pressionar qualquer tecla uma vez e clicar novamente, voc obter um crculo com uma cor diferente. O que est acontecendo quando voc pressiona uma tecla que a sub-rotina OnKeyDown executada, mudando a cor do pincel para uma cor randmica. Depois disso quando voc clica com o mouse, um crculo desenhado usando a nova cor que foi configurada dando os crculos de cores randmicas.

Um programa de desenho
Munido com eventos e sub-rotinas, ns agora podemos escrever um programa que deixa usurios desenhar na janela. surpreendentemente fcil escrever tal programa, dado que ns podemos quebrar o problema em pequenas partes. Como primeiro passo, vamos escrever um programa que permite que usurios movam o mouse aonde eles quiserem na janela Grficos, deixando um rastro por onde eles passam.

GraphicsWindow.MouseMove = OnMouseMove Sub OnMouseMove x = GraphicsWindow.MouseX y = GraphicsWindow.MouseY GraphicsWindow.DrawLine(prevX, prevY, x, y) prevX = x prevY = y EndSub

Entretanto, quando voc executa este programa, a primeira linha sempre comea a partir do canto superior esquerdo da janela (0, 0). Ns podemos consertar este problema manipulando o evento MouseDown e capturando os valores prevX e prevY quando o evento ocorre. Alm disso, ns apenas precisamos do rastro quando o usurio est pressionando o boto do mouse. Nas outras vezes, ns no deveramos desenhar a linha. Para obter este comportamento, ns usaremos a propriedade IsLeftButtonDown do objeto Mouse. Esta propriedade diz se o boto esquerdo do mouse est sendo pressionado ou no. Se o valor for verdadeiro, desenharemos a linha, seno pularemos.
GraphicsWindow.MouseMove = OnMouseMove GraphicsWindow.MouseDown = OnMouseDown Sub OnMouseDown prevX = GraphicsWindow.MouseX prevY = GraphicsWindow.MouseY EndSub Sub OnMouseMove x = GraphicsWindow.MouseX y = GraphicsWindow.MouseY If (Mouse.IsLeftButtonDown) Then GraphicsWindow.DrawLine(prevX, prevY, x, y) EndIf prevX = x prevY = y EndSub

Exemplos Divertidos
Fractal com a Tartaruga

Apndice A

Figura 578 Tartaruga desenhando um fractal em forma de rvore

angulo = 30 delta = 10 distancia = 60 Turtle.Speed = 9

GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.PenColor = "LightGreen" DrawTree() Sub DrawTree If (distancia > 0) Then Turtle.Move(distancia) Turtle.Turn(angulo) Stack.PushValue("distancia", distancia) distancia = distancia - delta DrawTree() Turtle.Turn(-angulo * 2) DrawTree() Turtle.Turn(angulo) distancia = Stack.PopValue("distancia") Turtle.Move(-distancia) EndIf EndSub

Fotos do Flickr

Figura 589 - Recuperando fotografias do Flickr

GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.MouseDown = OnMouseDown Sub OnMouseDown foto = Flickr.GetRandomPicture("montanhas, rio") GraphicsWindow.DrawResizedImage(foto, 0, 0, 640, 480) EndSub

Papel de Parede da rea de Trabalho Dinmico


For i = 1 To 10 foto = Flickr.GetRandomPicture("montanhas") Desktop.SetWallPaper(foto) Program.Delay(10000) EndFor

O Jogo de Paddle

Figura 59 O Jogo de Paddle

GraphicsWindow.BackgroundColor = "DarkBlue" paddle = Shapes.AddRectangle(120, 12) bola = Shapes.AddEllipse(16, 16)

GraphicsWindow.MouseMove = OnMouseMove x = 0 y = 0 deltaX = 1 deltaY = 1 LoopExecucao: x = x + deltaX y = y + deltaY gw = GraphicsWindow.Width gh = GraphicsWindow.Height If (x >= gw - 16 or x <= 0) Then deltaX = -deltaX EndIf If (y <= 0) Then deltaY = -deltaY EndIf padX = Shapes.GetLeft(paddle) If (y = gh - 28 and x >= padX and x <= padX + 120) Then deltaY = -deltaY EndIf Shapes.Move(bola, x, y) Program.Delay(5) If (y < gh) Then Goto LoopExecucao EndIf GraphicsWindow.ShowMessage("Voc Perdeu ", "Paddle") Sub OnMouseMove paddleX = GraphicsWindow.MouseX Shapes.Move(paddle, paddleX - 60, GraphicsWindow.Height - 12) EndSub

Apndice B

Cores

Aqui est uma lista de nomes de cores suportadas pelo Small Basic, classificadas pela sua matiz.

Vermelhos
IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed #CD5C5C #F08080 #FA8072 #E9967A #FFA07A #DC143C #FF0000 #B22222 #8B0000

Laranjas
LightSalmon Coral Tomato OrangeRed DarkOrange Orange #FFA07A #FF7F50 #FF6347 #FF4500 #FF8C00 #FFA500

Amarelos
Gold Yellow LightYellow LemonChiffon PapayaWhip Moccasin PeachPuff #FFD700 #FFFF00 #FFFFE0 #FFFACD #FFEFD5 #FFE4B5 #FFDAB9

Rosas
Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed #FFC0CB #FFB6C1 #FF69B4 #FF1493 #C71585 #DB7093

LightGoldenrodYellow #FAFAD2

PaleGoldenrod Khaki DarkKhaki

#EEE8AA #F0E68C #BDB76B

MediumSpringGreen #00FA9A SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen DarkSeaGreen LightSeaGreen DarkCyan Teal #00FF7F #3CB371 #2E8B57 #228B22 #008000 #006400 #9ACD32 #6B8E23 #808000 #556B2F #8FBC8F #20B2AA #008B8B #008080

Roxos
Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue MediumSlateBlue #E6E6FA #D8BFD8 #DDA0DD #EE82EE #DA70D6 #FF00FF #FF00FF #BA55D3 #9370DB #8A2BE2 #9400D3 #9932CC #8B008B #800080 #4B0082 #6A5ACD #483D8B #7B68EE

MediumAquamarine #66CDAA

Azuis
Aqua Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue #00FFFF #00FFFF #E0FFFF #AFEEEE #7FFFD4 #40E0D0 #48D1CC #00CED1 #5F9EA0 #4682B4 #B0C4DE #B0E0E6 #ADD8E6 #87CEEB

Verdes
GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen #ADFF2F #7FFF00 #7CFC00 #00FF00 #32CD32 #98FB98 #90EE90

LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue

#87CEFA #00BFFF #1E90FF #6495ED #7B68EE #4169E1 #0000FF #0000CD #00008B #000080 #191970

Brancos
White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose #FFFFFF #FFFAFA #F0FFF0 #F5FFFA #F0FFFF #F0F8FF #F8F8FF #F5F5F5 #FFF5EE #F5F5DC #FDF5E6 #FFFAF0 #FFFFF0 #FAEBD7 #FAF0E6 #FFF0F5 #FFE4E1

Marrons
Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon #FFF8DC #FFEBCD #FFE4C4 #FFDEAD #F5DEB3 #DEB887 #D2B48C #BC8F8F #F4A460 #DAA520 #B8860B #CD853F #D2691E #8B4513 #A0522D #A52A2A #800000

Cinzas
Gainsboro LightGray Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black #DCDCDC #D3D3D3 #C0C0C0 #A9A9A9 #808080 #696969 #778899 #708090 #2F4F4F #000000