Introdução à Programação com JavaScript

A programação de computadores é a técnica de encadear pensamentos para atingir determinado objetivo por meio de um computador ou outro sistema programável.

Este material aborda os principais conteúdos para que você entenda e consiga aplicar os fundamentos básicos da programação com a linguagem JavaScript. No final deste material existem listas de exercícios para a prática dos fundamentos aprendidos em cada uma das seções. Se você está começando agora, a recomendação é: resolva todos os exercícios, se possível, até mais de uma vez.

Não tenha pressa. Leia com atenção e seja persistente. A programação de computadores pode ser intimidadora, mas, a cada passo que der, você se sentirá cada vez mais motivado a entrar nesse mundo.

Bons estudos!

Sumário

{% include toc.html html=content %}

1. Algoritmo

Após entender o que é a programação de computadores, o primeiro conceito com o qual costumamos nos deparar no aprendizado de programação é o conceito de algoritmo.

Podemos definir algoritmo como uma sequência finita e ordenada de passos para a resolução de um problema específico.

Para exemplificar, vamos começar com um algoritmo descritivo para um problema clássico do cotidiano: como fritar ovos?

Algoritmo para fritar ovos

1.    pegar frigideira, ovo, óleo e sal
2.    colocar óleo na frigideira
3.    acender o fogo
4.    lelet a frigideira ao fogo
5.    esperar o óleo esquentar
6.    quebrar o ovo
7.    colocar o ovo
8.    colocar sal no ovo
9.    retirar quando pronto
10.   apagar o fogo

Percebe que o algoritmo acima é basicamente uma receita? Algoritmos são exatamente como receitas.

Uma boa recomendação para a construção de algoritmos descritivos é sempre utilizar apenas um verbo por linha, já que cada verbo geralmente indicará uma ação diferente a ser tomada.

O nosso principal objetivo ao estudar Lógica de Programação é compreender como criar programas de computador. Um Programa de Computador nada mais é que um algoritmo escrito com o uso de uma linguagem de computador, ou linguagem de programação, como C, Pascal, Java, JavaScript, PHP etc. Há uma infinidade de linguagens de programação disponíveis mundo afora. Futuramente veremos como elas funcionam.

2. Variável

Na Matemática, variável é o nome que se dá ao termo que substitui um outro desconhecido. Variáveis são amplamente utilizadas em equações, por exemplo: y = 2x + 1. Na programação, o valor de uma variável pode ser conhecido ou não.

De forma bastante simplista, uma variável é uma referência a um local na memória do computador, onde um valor pode estar armazenado. Por exemplo: em um programa de computador, podemos ter uma variável chamada idade, que armazena o valor 18.

2.1. Nomenclatura de variáveis

Há algumas regras a serem seguidas ao nomear variáveis. Algumas linguanges de programação poderão apresentar padrões diferentes, mas há algumas convenções que devem ser sempre seguidas para manter o código legível e livre de erros:

• O nome de uma variável não deve conter espaços;
• O nome de uma variável não deve conter operadores;
• O nome de uma variável não deve ser só um número;
• Embora seja permitido em JavaScript, o uso de acentos não é permitido em muitas linguagens de programação, por isso recomendamos evitá-los;
• Algumas linguagens de programação diferenciam letras maiúsculas de letras minúsculas, logo: Nome pode ser diferente de nome;
• Variáveis cujo nome seja um substantivo composto, como "data de nascimento", podem ser nomeadas com o padrão camelCase: dataDeNascimento. Este padrão define que todas as palavras após a primeira devem começar com letra maiúscula. Outra alternativa é utilizar um traço inferior (_), ou underline, entre cada palavra: data_de_nascimento.

2.2. Atribuição de valores

Atribuir um valor a uma variável é dar um valor a uma variável. É o mesmo que guardar um valor em um espaço da memória.

a = 4;

Pode ser lido como: variável a recebe 4.

nome = "José";

Pode ser lido como: variável nome recebe José.

Observe que o símbolo de igualdade, =, aqui é utilizado como operador de atribuição. Para igualdade, utilize == ou ===.

2.3. Tipos de variáveis

O tipo de uma variável define o tipo de valor que ela poderá armazenar. Por exemplo, se precisamos armazenar um número inteiro, podemos criar uma variável do tipo inteiro; para armazenar nomes, utilizamos cadeias de caracteres. Cada linguagem de programação pode possuir seus próprios tipos ou simplesmente utilizar nomes diferentes dos usados por outras linguagens. Abaixo listamos os tipos primitivos de variáveis mais comumente encontrados nas linguagens de programação.

• Inteiro (integer): utilizado para representar um número inteiro. Ex.: 10 ou 50.
• Real (float): utilizado para representar um número real. Ex.: 10.5 ou 0.8.
• Caractere (character): utilizado para representar uma letra do alfabeto, algarismo, sinal de pontuação ou símbolo. Ex.: 'A' ou '2' ou '$'. Valores do tipo caractere geralmente são representados entre aspas simples ('').
• Cadeia de caracteres (string): utilizado para representar números, letras, palavras, frases e/ou outros símbolos. Ex.: "A" ou "abc123" ou "* é um asterisco.". Valores do tipo cadeia de caracteres geralmente são representados entre aspas duplas (""); embora em JavaScript se possa utilizar também aspas simples ('').
• Lógico (boolean): utilizado para representar um tipo de dado lógico que pode ter apenas dois valores possíveis: verdadeiro ou falso (true ou false em JavaScript).

Os valores entre parênteses correspondem aos tipos de variáveis como são usados em linguagens de programação como C++ ou Java. Geralmente, esses tipos aparecem de forma abreviada, como int, char e bool.

2.4. Exercícios com tipos de variáveis

Para fixar seu conhecimento a respeito de tipos de variáveis, reflita sobre o tipo de variável adequado para cada item abaixo:

• a) Idade de uma pessoa
• b) Valor de uma conta de luz
• c) Nome de um cliente
• d) Estado de uma lâmpada (acesa/apagada)
• e) Senha de acesso ao Facebook
• f) Quantidade de litros de combustível abastecidos em um posto
• g) Situação de uma determinada fatura (paga/não paga)
• h) Média final de um aluno

3. Operadores

Um operador é um símbolo que, como seu próprio nome diz, é utilizado para representar operações lógico-matemáticas. Os operadores que iremos utilizar são os operadores aritméticos, os operadores relacionais e os operadores lógicos. Observe que alguns deles, já utilizados na Matemática, terão seu símbolo substituído por outro na Programação. Já que utilizaremos JavaScript como linguagem de programação neste material, todos os operadores nos exemplos serão operadores válidos na linguagem JavaScript.

3.1. Operadores Aritméticos

• Soma (+): 1 + 3
• Subtração (-): 5 – 4
• Multiplicação (*): 8 * 8
• Divisão (/): 40 / 5
• Resto/Módulo (%): 20 % 3
• Potenciação (**): 2 ** 2

3.2. Operadores Relacionais

• Igual (==): 5 == 5
• Diferente (!=): 8 != 80
• Maior que (>): 12 > 11
• Menor que (<): 11 < 12
• Maior ou igual (>=): 18 >= 17
• Menor ou igual (<=): 16 <= 16

3.3. Operadores Lógicos

• E/Conjunção (&&): 5 == 5 && 9 > 7
• Ou/Disjunção (||): 5 > 3 || 7 >= 1
• Não/Negação (!): !(3 > 2) == false

4. Tabela verdade

Uma tabela verdade é uma tabela utilizada em Lógica para verificar se uma expressão é verdadeira ou falsa.

4.1. Operadores "e", "ou" e "não"

No exemplo a seguir, temos a tabela verdade dos operadores lógicos e e ou (&& e || em JavaScript). Observe que as variáveis X e Y representam expressões que podem ser verdadeiras ou falsas de forma independente.

Para compreender como se dá a construção desta tabela, podemos nos fazer as seguintes perguntas:

• X e Y são verdadeiros?
• X ou Y são verdadeiros?

Ao questionar se X e Y são verdadeiros, questionamos se ambos são verdadeiros. Ou seja: a expressão X && Y só é verdadeira quando X == true e Y == true. Repare que aqui já começamos a utilizar os termos true e false para representar valores verdadeiros ou falsos.

O operador ou (||) já funciona de maneira diferente. Ao questionarmos se X ou Y são verdadeiros, questionamos se pelo menos um deles é verdadeiro. Ou seja: a expressão X || Y é verdadeira quando X == true e Y == false, ou X == false e Y == true, ou X == true e Y == true.

O operador não (!) é utilizado para negar uma determinada expressão. Ex.: se X == true, então !X == false; se X == false, então !X == true.

4.2. Exercícios com tabela verdade

1. Complete a seguinte tabela verdade:

5. Precedência de operadores

A precedência, ou ordem, de operadores é a convenção que indica a ordem em que as operações devem ser realizadas em uma expressão. A lista abaixo descreve a ordem em que os operadores devem ser considerados:

1. Parênteses e funções
2. Potência e resto
3. Multiplicação e divisão
4. Adição e subtração
5. Operadores relacionais
6. Operadores lógicos

No exemplo abaixo, a multiplicação deve ser resolvida antes da soma.

3 + 4 * 9;
3 + 36;
39;

Neste exemplo, a parte da expressão entre parênteses é resolvida antes da multiplicação.

(3 + 4) * 9;
7 * 9;
63;

Quando operadores de mesma prioridade se chocam, a operação mais à esquerda prevalece sobre as demais. Ex.:

(3 * 4) / 3;
12 / 3;
4;

Neste exemplo, o operador de soma tem prioridade sobre os operadores relacionais, e os operadores relacionais têm prioridade sobre o operador lógico.

10 < 9 e 6 + 3 > 10
10 < 9 e 9 > 10
F e F
F

Para facilitar, isole as expressões que estão antes e após o operador lógico, resolva-as e só então compare seus resultados através do operador lógico.

5.1. Exercícios com expressões

1. Indique o resultado das expressões seguindo as regras de precedência dos operadores.

• a) 2 + 3 - 5 * 8 / 4
• b) 7 * 4 / 2 + 9 - 6
• c) (4 + 2) * 3 / 4
• d) 7 > 2 && 3 -5 < 8
• e) 8 > 12 && 5 < 3 + 4
• e) 9 > 15 || 3 < 3 + 4

6. Primeiros passos em programação

Em nossos exemplos de código utilizaremos a sintaxe da linguagem JavaScript.

Em Lógica de Programação, a sintaxe está ligada à estrutura da linguagem de programação. Ela é o conjunto de regras que definem a forma correta de composição das estruturas básicas de uma linguagem. É o que deve responder à pergunta: como construir tal estrutura corretamente?

Outro conceito que precisamos compreender é o de semântica. Em Lógica de Programação, a semântica está ligada ao significado de um determinado código. A semântica deve responder à pergunta: tal código faz realmente o que se espera que ele faça?

6.1. Olá, mundo!

Para começar a programar em JavaScript, não é necessário nenhum programa específico, você só precisa de um navegador. Nós recomendamos o Google Chrome ou o Mozilla Firefox. Se você estiver utilizando um smartphone Android, poderá utilizar o aplicativo JS Run ou o Spck Editor; caso esteja utilizando um iPhone, baixe o aplicativo JS Code Run: JavaScript Editor.

Recomendamos que você faça a leitura dos capítulos a seguir testando cada um dos exemplos.

No Google Chrome, pressione Ctrl + <kb