# iVProgH5 : Visual Programming (LInE-IME-USP)

#

## iVProg : Visual Programming (LInE-IME-USP)

LInE. Software educacional livre. Interatividade na Internet para aprendizagem.
O iVProgH é mais um sistema educacional livre do LInE, implementado em HTML5 (usa fortemente JavaScript), este destinado ao ensino e aprendizagem de algoritmos e programação. O iVProgH é uma nova implementação do iVProg que é implementado em Java. Ambos iVProg dispõem de um esquema para avaliação automática de exercícios, experimente!
Esses sistemas foram desenhados a partir de um modelo visual para programação, podendo ser utilizado desde o segundo ciclo do Ensino Fundamental.
1. Sobre a interface principal

A imagem 1 apresenta a interface inicial do iVProgH (quando configurado para não apresentar o gabarito do exercício).
Abaixo são explicadas os cinco botões da interface principal e a área cinza inferior seguindo a ordem em que aparecem, de cima para baixo.

1. Este botão deve ser utilizado para avaliar o código resposta a um exercícios;
2. Este botão serve para criar novas variáveis (que nascem com nomes `newVarN`, se de um "clique" duplo sobre seu nome pode-se alterá-lo);

Fig. 1: Interface principal do iVProgH.

3. Este botão serve para inserir no código novos comandos (vide abaixo "Sobre opções de comandos"));
4. Este botão serve para "rodar" o código construído;
5. Este botão serve para "limpar" o console de mensagens, ou seja, remove todas as mensagens previamente "impressas";
6. Esta é a área em que as mensagens aparecerão (as saídas de dados).

1. Sobre variáveis

Em qualquer ambiente para codificar algoritmos, as variáveis são utilizadas para armazenar valores a serem utilizados no código. Um exemplo simples de sua utilidade é a obtenção do quadrado de um número a ser digitado pelo usuário. Ou seja, ao escrever o código o programador não sabe qual valor será digitado, assim tem que redigir seu código supondo um "local" especial para armazenar o valor a ser digitado, que é representado por uma variável.

1.1 Sobre a criação de variáveis

No iVProgH, para criar uma nova variável deve-se utilizar o botão .

Inicialmente não existem variáveis disponíveis (como indicado na figura 1). Ao "clicar" a primeira vez no botão para criar variável, aparecerá uma nova variável (atualmente com nome inicial `newVar0`). Mas pod-se "clicar" sobre o nome da variável para alterar seu nome.

Na imagem abaixo estão 3 passos para a criação e edição dos nomes de 2 variáveis, cronologicamente da esquerda para a direita.. Na esquerda resultado após criar as 2 variáveis, seguida da imagem indicando o início da alteração do nome da primeira variável e, mais à direita, o resultado após trocar os nomes das variáveis, respectivamente, para `a` e `b`.

Fig. 2: Processo de criação e alteração de nomes de variáveis.
1.2 Sobre os tipos de variáveis

Outra característica importante de variáveis é o espaço que cada uma ocupa e o formato de sua representação. Isso quer dizer que cada tipo de variável utiliza uma quantidade padrão de memória (isso costuma ser expresso em bytes - agrupamento de 8 bits). Esta questão não será aprofundada aqui, pois o foco deste manual é apresentar os rudimentos da programação e o funcionamento básico do iVProgH.

Mas existe uma questão muito importante que precisa ser enfatizada: qualquer computador digital dispõe de uma quantidade finita de memória e por isso não consegue representar qualquer número. Se quiser entender a razão dessa impossibilidade, tente entender a frase seguinte, senão pule-a.

> Os números inteiros são infinitos, não existindo nem um maior inteiro e nem um menor inteiro, ou dito de outra forma, dado qualquer número inteiro sempre existe um outro maior que ele e também um outro menor que ele!
> Assim, suponha que cada dígito (que são: 0, 1 até 9) precise de 4 bits para ser representado e que o computador considerado tenha disponível um total de N bits. Então este computador poderia representar um número com até N/4 dígitos.
> Por exemplo, um computador básico atual vem com no mínimo 2 giga-bytes de espaço em memória (RAM - Random Access Memory), o que equivale a aproximadamente 2 bilhões de bytes, resultando em 2 x 8 bilhões de bits. Assim, o maior número inteiro positivo que caberia neste computador seria um número com 2 x 8 / 4 = 16 bilhões de dígitos.
> Note que um inteiro com 16 bilhões de dígitos é tremendamente maior que o inteiro 16 bilhões, pois esse último tem apenas 11 dígitos.
> Então, se representarmos esse número com 16 bilhões de dígitos por X, basta multiplicá-lo por 10 que resultaria em um número com 16 bilhões e 1 dígitos, o que não caberia na memória do computador considerado, o que resultaria em erro (que usualmente é denominado por overflow).

Se estiver interessado em saber um pouquinho mais sobre esta questão de espaço-representação, siga este apontador e este apontador.

Do ponto de vista prático, no iVProgH estão disponíveis as variáveis inteiras, reais, textos e lógicas. Ao criar uma variável, como indicado na figura 2, esta "nasce" do tipo inteira. Para alterar seu tipo, pode-se "clicar" no ícone da chave inglesa, ao lado do nome da variável (e.g. `newVar0`) e escolhendo o tipo.

Abaixo uma imagem ilustrando como alterar o tipo da variável de nome x de inteiro para real, em 3 passos.

Fig. 3: Processo de alteração de tipo inteiro para real na variável x.

Note que na esquerda aparece `x=1`, enquanto na direita vê-se `x=1.0000`. Isso significa que a variável `x` será iniciada com a unidade e que o aparecimento de "ponto decimal" diferencia o tipo inteiro do tipo real, no primeiro aparece `1` e no último `1.0000`. O valor inicial da variável pode ser alterado de modo análogo à alteração de seu nome, basta "clicar" sobre o número e editá-lo.

2. Sobre comandos

Os comandos são as difentes instruções disponíveis na linguagem. Na atual versão do iVProgH existem seis (6) diferentes comandos, explicados abaixo.
Em cada um dos 6 comando, apresentaremos uma versão sintética do comando, em uma linguagem que será apelidada de Portugol. Também será apresentado um exemplo em linguagem C.

1. `Atribuição` Para atribuir valor a alguma variável. Obtém-se a imagem abaixo.
   Representação em "Portugol": `x = x * x + x + 1;`. Variável `x` receberá o valor resultante da expressão à direita (`x * x + x + 1;`).
   Representação em C: `x = x * x + x + 1;`.
   Fig. 4: Comando de atribuição, situação inicial.
   Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois construir a expressão aritmética que definirá a variável. Por exemplo, pode-se fazer `i = i+1`, significando a variável receberá o valor atual nela acrescido de uma unidade.
   Em programação a atribuição `x = x*x + x + 2` deve ser entendida como: cálcula-se primeiro o valor da expressão à direita, cujo resultado final é atribuido à variável à esquerda.
2. `Se verdadeiro então` Para executar comando de acordo com uma condição (expressão lógica).
   Representação em "Portugol": `se (a < b) faça CMD1; senão CMD2`. Se `a` for estritamente menor que `b`, execute comando `CMD1`, senão execute comando `CMD2`.
   Representação em C: `if (a < b) CMD1; else CMD2;`. Sendo `CMD1` e `CMD2` qualquer comando válido de `C`.
   Fig. 5: Comando de seleção.
   Nesse momento deve-se selecionar a variável (a versão corrente tem um erro: ao clicar no `Selecione...` deve-se pegar a opção `Valor` e não `Variável`) e seguir construindo a expressão lógica.
   Atenção, a decisão (execução do comando) ocorre durante sua execução, com os valores desse contexto. Durante a execução, a condição é avaliada, se resoltar verdadeiro o comando subordinado ao `se` será executado, senão será executado o comando sob o `senão`. Pode-se deixar qualquer um deles vazio.
   Exemplo: para a expressão `a < b`
3. `Repita N vezes` Repetir todos os comandos sobordinados (sob esse) `N` vezes.
   Representação em "Portugol": `repetir N vezes { CMD1; ...; CMK; }`.
   Representação em C: `for (i=0; i < N; i++) { CMD1; ...; CMK; }`.
   Fig. 6: comando para repetir um número fixo de vezes (dado por uma variável ou expressão).
   Na parte de superior da figura 6 está a imagem obtida imediatamente após pegar comando `Repita N vezes`, na parte inferior após "clicar" no símbolo .
4. `Enquanto verdadeiro` Outro comando de repetição, repetindo enquanto a condição for verdadeira.
   Representação em "Portugol": `enquanto (CONDICAO) { CMD1; ...; CMK; }`.
   Representação em C: `while (CONDICAO) { CMD1; ...; CMK; }`.
   Fig. 7: comando para repetir enquanto a condição resultar verdadeiro.
   Nesse comando, o bloco subordinando será repetido até que a condição de entrada deixe de ser verdadeira.
5. `Leitura de dados` Comando para permitir que o usuário entre um número/texto/Verdadeiro/Falso para o programa.
   Representação em "Portugol": `leia(x);`. Ler um valor e armazenar em `x`.
   Representação em C: `scanf("%d", &x);`.
   Fig. 8: Comando para entrada de dados. Abaixo após definir a variável na qual o valor digitado será armazenado (`x`).
   Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois
6. `Escrita de dados` Comando para permitir que o usuário receba uma saída do programa.
   Representação em "Portugol": `escreva(x);`. Escreva no dispositivo de saída padrão o valor armazenado em `x`.
   Representação em C: `printf("%d\n", x);`.
   Fig. 9: Comando para saída de dados. Na imagem inferior após definir qual variável terá seu valor impresso.
   Nesse momento deve-se selecionar a variável (destacado em fundo amarelo) e depois

3. Solução para o Exercício 1: somar 2 números digitados
Exercício 1: Fazer um algoritmo que solicite que o usuário digite 2 valores (inteiros), depois compute a soma dos valores digitados e por último imprima esta soma.
Solução para o Exercício 1: passos para obter o algoritmo/programa da figura 10.

- Criar 3 variáveis e renomeá-las para nomes mais significativos. Eventualmente poderia-se dispensar a variável `soma` e acumular a soma em `a` ou em `b`, mas o código não ficaria tão claro;
- Criar o comando `leia(a);` e `leia(b);`, para capturar e armazenar os 2 valores a serem digitados pelo usuário (seria impossível usar apenas uma, perderia-se o primeiro valor que fosse digitado);
- Criar o comando de atribuição correspondente ao comando Porgugol `soma = a+b;`;
- Criar o comando para imprimir a resposto, correspondente ao comando Portugol `escreva(soma);`;

Fig. 10: Imagem do programa para receber 2 valores digitados e imprimir sua soma.
4. iVProgH com o exercício 1 (da soma de 2 inteiros) para experimentar novamente.

LInE | iMática | MOOC