01- JAVASCRIPT - PREPARANDO O AMBIENTE.
CRIE UMA PASTA CURSO JAVASCRIPT
DENTRO DESSA PASTA CRIE A PASTA AULA 01
Vamos usar o VSCODE para desenvolver nossos trabalhos.
Você pode baixar o VSCode em https://code.visualstudio.com/download
BAIXE E INSTALE O VSCODE ANTES DE PROSSEGUIR
NOSSO PRIMEIRO EXEMPLO:
Abra o VSCode e clique em FILE/NEW TEXT FILE
Na tela exibida clique em Select a language e selecione HTML
EXEMPLO 1 0 SAÍDA DE DADOS COM ALERTA:
<SRIPT>
alert("Bem-Vindo ao Mundo JavaScript!")
console.log("Meu primeiro programa...")
</SRIPT>
Digite o código acima (lembre-se que o JavaScript, diferencia letras maiúsculas de minúsculas) e salve na pasta AULA01 COM O NOME EXEMP01.HTML.
Abra o arquivo no navegador
Os programas desta aula são dedicados a apresentar os primeiros passos
de programação. Por isso, utilizamos o comando/método alert() para exibir
mensagens em uma caixa no navegador. Este e os demais métodos
JavaScript precisam estar delimitados por <script> e </script>
VARIÁVEIS
Em JavaScript, os nomes de variáveis não podem:
Variáveis escritas com letras maiúsculas são diferentes de variáveis escritas com letras minúsculas
O uso do caractere "_" é valido. Ex: Salario_hora
Porém a maioria dos programadores java declaram as variáveis com letras minúsculas e usam
uma letra maiúscula para destacar palavras compostas.
São exemplos de nomes válidos de variáveis:
cidade, nota1, salarioHora, primeiroNome, novoSalario, precoFinal, dataNascimento
Procure usar nomes que indiquem o conteúdo que a variável vai armazenar
Para declarar uma variável em JavaScript, podemos utilizar os comandos var, let ou const.
Nas últimas versões do JavaScript, passou-se a recomendar o uso de const ou let.
Uma variável criada a partir de um desses comandos possui um escopo local (de bloco), o que pode
evitar desperdício de memória pois, ao final do bloco, a variável deixa de existir.
Além disso, const e let impedem que um programa rode com alguns problemas no código,
como declarar duas variáveis com o mesmo nome no script.
Para atribuir um valor a uma variável usamos o sinal "=".
Exemplo:
const idade = 18
Declarar uma variável com const serve para indicar que essa variável deve possuir uma única atribuição de valor e não ser alterada no decorrer do programa. Então, caso o conteúdo da variável possa ser alterado, declare-a com let. Em todos os demais casos, opte pelo const.
Entrada de dados com prompt()
Vamos agora receber uma informação e apresentar uma mensagem utilizando a informação recebida.
Para receber dados do usuário, uma das formas possíveis em JavaScript é utilizar o comando(método) prompt(), que exibe uma caixa com um texto e um espaço para digitação.
Digite o código abaixo e salve na pasta AULA01 com o nome EXEMP02.HTML
Vamos aos detalhes desse programa.
Como destacado no primeiro exemplo, os códigos JavaScript devem ser
delimitados por <script> e </script>.
Antes deles foi adicionado um comando HTML, também chamado de tag, ou nesse caso metatag, que serve para
ajustar os caracteres de acentuação a serem exibidos pela página.
A linha 3 contém o comando:
const nome = prompt("Qual é o seu nome?")
Esse comando realiza as tarefas de declarar uma variável e executar o método prompt().
O nome digitado pelo usuário na caixa de diálogo do prompt é atribuído á variável
nome.
A linha 4 contém o método alert(),, também visto no primeiro exemplo.
No entanto, há um importante detalhe nesse comando.
alert("Olá " + nome)
Há um texto entre aspas, que é um texto fixo a ser exibido na execução do comando, concatenado (+) com a
variável nome. O fato de nome estar fora das aspas indica que naquele local
deve ser apresentado o conteúdo da variável, e não um texto fixo.
O resultado será a exibição da palavra Olá, seguida do nome digitado pelo usuário
Outra forma de exibir mensagens que contenham um texto fixo e o conteúdo de uma variável em JavaScript é com o uso da chamada Template Strings. Para isso, deve-se delimitar a mensagem entre `` (crases) e inserir o nome das variáveis usando a sintaxe: ${nomeVar}. Observe a linha a seguir:
alert(`Olá ${nome}`);
O uso do ponto e vírgula ";" no final dos comandos em programas JavaScript é opcional.
COMENTÁRIOS
Um comentário é uma observação inserida pelo programador no código, com o objetivo de explicar algum detalhe do programa.
Os comentários não afetam a execução do programa. Eles são ignorados pela linguagem, mas essenciais para o programador. é fundamental adicionar comentários para explicar os detalhes de alguma fórmula utilizada em um sistema, como o cálculo do décimo terceiro salário em um sistema de folha de pagamento. Também é de fundamental importância adicionar comentários para salientar a função de algum comando não utilizado com frequência. Ou, então, alguma particularidade da linguagem ou sistema em desenvolvimento.
Os comentários Também são importantes quando estamos programando um sistema maior, que será concluído em outro momento ou após alguma outra tarefa. Dessa forma, ao retomar a implementação do programa, a leitura dos comentários vai nos auxiliar a manter a linha de raciocínio, além de facilitar a compreensão do ponto em que haviámos parado.
Entenda que gastar alguns segundos digitando um breve comentário no seu sistema poderá economizar um bom tempo quando você precisar dar manutenção nesse sistema no futuro. então, não poupe nas linhas de comentário nos sistemas que você vai desenvolver.
Em JavaScript, os comentários podem ser inseridos para uma linha ou várias, utilizando os seguintes caracteres:
// para comentários de uma linha
/*
para comentários de duas
*/
Tipos de dados e convers�es de tipos
os tipos principais de dados em javascript são:
� �strings (vari�veis de texto);
� �N�meros;
� valores booleanos (true ou false)
Exemplo 1.3 � Opera��es envolvendo strings e n�mero
<script>
� const a = "20"
� const b = a * 2��� // b = 40
� const c = a / 2��� // c = 10
� const d = a - 2��� // d = 18
� const e = a + 2��� // e = 202 ???
� alert("e: " + e)�� // exibe o valor de uma vari�vel
�</script>
Nesse exemplo, temos uma vari�vel do tipo string que recebe �20� (const a = "20"). Ela � entendida como sendo do tipo string por estar delimitada por aspas. Nas opera��es de multiplica��o, divisão e subtra��o, a linguagem converte esse texto em n�mero e o valor retornado est� de acordo com o esperado. Contudo, quando realizamos a adi��o, o valor de retorno � diferente do padr�o, pois a linguagem concatena (+) o texto com o n�mero.
Para resolver esse problema, precisamos converter o texto em n�mero. Isso pode ser feito, em JavaScript, pelos m�todos
� Number();
� parseInt();
� parseFloat().
Vamos utilizar o m�todo Number() para facilitar o processo de aprendizagem. Dessa forma, modifique a linha que declara a vari�vel "e" para conter o m�todo Number():
const e = Number(a) + 2� // e = 22
Em JavaScript não � obrigat�rio definir o tipo da vari�vel na sua declara��o. Ela assume um tipo no momento da atribui��o de valor � vari�vel.
� A atribui��o de um conte�do entre aspas (simples ou dupla, mas sempre aos pares) cria uma vari�vel do tipo String.
� �Para vari�veis num�ricas, não devem ser utilizadas as aspas.
� �As vari�veis booleanas podem conter os valores true ou false.
As entradas de dados realizadas com o m�todo prompt() criam vari�veis do tipo String, exceto se houver uma função de conversão de dados como Number().
Exibir uma vari�vel que não recebeu uma atribui��o de valor vai gerar uma sa�da �undefined�.
O Exemplo 1.4 declara vari�veis e exibe seus tipos a partir do comando typeof.
Exemplo 1.4 � Tipos de vari�veis
<script>
� const fruta = "Banana"
� const preco = 3.50
� const levar = true
� let novoValor
� console.log(typeof fruta)����� // string
� console.log(typeof preco)����� // number
� console.log(typeof levar)����� // boolean
� console.log(typeof novoValor)� // undefined
</script>
A declara��o de uma vari�vel/constante com const exige uma atribui��o de valor � que se manter� fixo durante o programa ou bloco de c�digo onde foi declarada. além da possibilidade de verificar se uma vari�vel � do tipo number, Também é poss�vel verificar se o n�mero � inteiro ou possui decimais: Number.isInteger() faz essa verifica��o:
console.log(Number.isInteger(12))��� // true console.log(Number.isInteger(3.50))� // false
Exemplos de entrada, processamento e sa�da
Para elaborar um programa simples, � necess�rio realizar tr�s etapas:
� Entrada;
� Processamento;
� Sa�da.
Vamos agora implementar alguns exemplos de algoritmos de programa��o sequencial, os quais realizam essas etapas.
a) Elaborar um programa que leia um n�mero. Calcule e informe o dobro desse n�mero.
� Entrada de dados: ler um n�mero
� Processamento: calcular o dobro
� Sa�da: informar o dobro
Exemplo 1.5 � cálculo do dobro de um n�mero
<meta charset="utf-8">
<script>
� const num = prompt("N�mero: ")� // l� um dado de entrada
� const dobro = num * 2���������� // calcula o dobro
� alert("Dobro �: " + dobro)����� // exibe a resposta
</script>
�Obs.: Como estamos realizando uma opera��o de multiplica��o, não � necess�rio converter a entrada de dados realizada pelo m�todo prompt() � que retorna sempre um texto, em n�mero. Contudo, se quisermos calcular o dobro do n�mero a partir de uma opera��o de adi��o, a conversão � necess�ria. Para isso, pode-se utilizar o m�todo Number() direto na entrada de dados, como demonstra a linha a seguir:
const num = Number(prompt("N�mero: "))� // l� dado de entrada e converte para n�mero
b) Elaborar um programa que leia dois n�meros. Calcule e informe a soma desses n�meros.
� Entrada de dados: ler dois n�meros
� Processamento: calcular a soma
� Sa�da: informar a soma
Para realizar a leitura dos dois n�meros, vamos declarar as vari�veis num1 e num2. Lembre-se de que os nomes de vari�vel não devem conter espa�os e não podem come�ar por n�mero. O exemplo implementa uma forma de resolu��o para esse programa. Observe que o m�todo prompt() � utilizado duas vezes e, como deve ser realizada uma soma, � necess�rio converter a entrada em n�mero.
<meta charset="utf-8">
<script>
� const num1 = Number(prompt("1� N�mero: "))� // l� os n�meros
� const num2 = Number(prompt("2� N�mero: "))
� const soma = num1 + num2�� // calcula a soma
� alert(`Soma �: ${soma}`)�� // exibe o resultado
�</script>
c) Elaborar um programa que leia o valor de um jantar. Calcule e informe o valor da taxa do gar�om (10%) e o valor total a ser pago.
Exemplo 1.7 � cálculo do valor do jantar (ex1_7.html
<meta charset="utf-8">
<script>
� const jantar = Number(prompt("Valor do Jantar R$: "))� // l� o valor do jantar
� const garcom = jantar * 0.10��� // calcula vari�veis de sa�da
� const total = jantar + garcom
� alert(`Taxa Gar�om R$: ${garcom.toFixed(2)}\nTotal R$: ${total.toFixed(2)}`)
</script>
Observe que o m�todo toFixed(2) foi adicionado �s vari�veis de sa�da. Ele serve para indicar que o valor a ser apresentado deve conter 2 casas decimais.
�\n� gera uma quebra de linha
d) Elaborar um programa que leia a dura��o de uma viagem em dias e horas. Calcule e informe a dura��o total da viagem em n�mero de horas.
Exemplo de dados de entrada e sa�da do programa (para uma viagem que dura 2 dias + 5 horas).
N� Dias: 2
N� Horas: 5
Total de Horas: 53
Exemplo 1.8 � cálculo da dura��o de horas de uma viagem
<meta charset="utf-8">
<script>
� const dias = Number(prompt("N� Dias: "))� // l� os dados de entrada
� const horas = Number(prompt("N� Horas: "))
� const total = (dias * 24) + horas�������� // calcula a dura��o
� alert(`Total de Horas: ${total}`)�������� // exibe o total </script>
Exerc�cios
a) Elaborar um programa que leia um n�mero. Calcule e informe os seus vizinhos, ou seja, o n�mero anterior e posterior.
Exemplo:
N�mero: 15
Vizinhos: 14 e 16
b) Elaborar um programa para uma pizzaria, o qual leia o valor total de uma conta e quantos clientes v�o pag�-la. Calcule e informe o valor a ser pago por cliente.
Exemplo:
Valor da Conta R$: 90.00
N�mero de Clientes: 3
Valor por cliente R$: 30.00
c) Elaborar um programa para uma loja, o qual leia o pre�o de um produto e informe as op��es de pagamento da loja. Calcule e informe o valor para pagamento � vista com 10% de desconto e o valor em 3x.
Exemplo:
Pre�o R$: 60.00
� Vista R$: 54.00
Ou 3x de R$: 20.00
d) Elaborar um programa que leia 2 notas de um aluno em uma disciplina.
Calcule e informe a m�dia das notas.
Exemplo:
1� Nota: 7.0
2� Nota: 8.0
M�dia: 7.5
CONSIDERA��ES FINAIS
Para nos tornarmos desenvolvedores de sistemas, � preciso construir um conhecimento s�lido sobre a base, assim como na constru��o de um grande edif�cio, em que o alicerce � fundamental para as demais estruturas.
Construir e entender os exemplos e exerc�cios deste cap�tulo são igualmente fundamentais para que você avance nos estudos sobre l�gica de programa��o.
BIBLIOGRAFIA
IEPSEN, Ed�cio Fernando. L�gica de Programa��o e Algoritmos com JavaScript: Uma introdu��o � programa��o de computadores com exemplos e exerc�cios para iniciantes. 2a. Ed. Novatec Editora, 2022.