Para criar uma página web geralmente usamos o Html, o Css e o JavaScript, todos juntos e integrados. Nesse capítulo estudaremos o básico do Html e do Css. Basicamente o Html é o conteúdo apresentado no site, como títulos, parágrafos, imagens, etc. O Css é responsável pelo design do site, como cores de texto e fundo, tamanho de fontes, espaçamento entre parágrafos, etc.
17 |
Como funciona o HTML
18 |
O Html funciona através de um documento HTML, ou seja, um documento com a extensão .html, o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox).
19 |
Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo uma para cada página do website.
20 |
O Html trabalha com tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Alguns exemplos de tags:
21 |
22 |
A maioria das tags são compostas por uma estrutura de abertura e uma de fechamento:
23 |
24 |
Há também tags de estrutura única, como a tag br que realiza uma quebra de linha.
25 |
26 |
Digamos que você queira escrever um paragrafo, chamamos então a tag p, escrevemos o paragrafo e finalmente fechamos a tag:
27 |
28 |
Principais tags (Existem mais de 140 tags em Html)
29 |
30 |
A estrutura básica de um documento HTML
31 |
32 |
O DOCTYPE Html é uma declaração para informar ao navegador qual é a versão do HTML utilizada no arquivo. Essa declaração vem antes das tags HTML, portanto, geralmente é apresentada na primeira linha de um código.
33 |
O atributo lang ajuda a definir o idioma de um elemento, a língua em que elementos devem ser escritos pelo usuário.
34 |
O elemento head recebe todas as informações básicas da página, como o título, links de elementos externos, metadados, etc.
35 |
Para que não ocorram erros de renderização ou incompatibilidade de caracteres, devemos também declarar o padrão de teclado. No Brasil e em boa parte da América Latina, utilizamos o padrão UTF-8. Dessa forma, através da tag de metadados meta, vamos declarar dentro de um atributo charset que nosso padrão é o UTF-8.
36 |
As duas próximas tags que estão dentro do meta não são importantes para esse momento. Só devem ser escritas.
37 |
38 |
A tag title é onde você irá colocar o título do site e se localizará no topo do navegador.
39 |
40 |
Entre a tag body é onde ficará o corpo do site, é a parte que será visível no navegador.
41 |
No editor de código Visual Studio Code, temos um comando que nos trás a estrutura do HTML pronto para usar, sem precisarmos escrever linha por linha. Digite um ponto de exclamação e espere aparecer a seguinte tela:
42 |
43 |
Em seguida aperte enter, então a estrutura HTML irá aparecer sem precisarmos digitar.
44 |
Agora faremos o nosso primeiro site.
45 |
46 |
Note que houve uma mudança em lang.
47 |
pt-br, significa que a linguagem dos elementos agora é em português.
48 |
Dentro do título title digitamos "Meu Primeiro Site".
49 |
Dentro do body temos um h1 (título) e 3 parágrafos.
50 |
Ao abrir o arquivo html através do navegador, o site ficará assim:
51 |
52 |
Css Básico
53 |
O seletor aponta para o elemento HTML que você deseja estilizar. O bloco de declaração fica entre as chaves { }. As declaraçções ficam dentro do bloco e são separadas por ponto e vírgula.
54 |
Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
55 |
No exemplo abaixo, o seletor é o body e a declaração background-color serve para mudar a cor de fundo do seletor. O valor aqua é o nome da cor.
56 |
57 |
Existem três maneiras que você pode usar para implementar o CSS: interno, externo e inline.
58 |
O CSS interno ou incorporado requer que você adicione a tag style na seção head do seu documento HTML.
59 |
60 |
Ao abrir o arquivo no navegador:
61 |
62 |
Css Inline - para este estilo de CSS você somente vai precisar adicionar o atributo style para cada tag HTML, sem usar os seletores. Este tipo de CSS não é recomendado.
63 |
64 |
Ao abrir o arquivo no navegador:
65 |
66 |
Com o CSS externo, você vai linkar a página Html com um arquivo .css externo. Este tipo de CSS é o método mais eficiente, especialmente se você está estilizando um site grande. Ao editar um arquivo .css, você pode modificar um site inteiro de uma só vez.
67 |
Primeiramente devemos criar o arquivo .css, nesse caso criaremos o arquivo style.css.
68 |
69 |
O segundo passo é incluir o comando de criação dentro da tag head. O Visual Studio Code nos ajuda com essa criação apenas digitando a palavra link e clicando em link:css.
70 |
71 |
O comando aparecerá dessa forma:
72 |
73 |
href é o local onde o arquivo css se encontra. Como o arquivo style.css se encontra na mesma pasta em que o arquivo index.html, basta escrever da forma que está na imagem.
74 |
Agora com tudo configurado, podemos iniciar as declarações dentro do arquivo style.css.
75 |
76 |
Iremos mexer em 3 seletores, o body, h1 e o p.
77 |
O body é corpo da página, é a parte visível do site. Nele declaramos a cor de fundo (background-color) como aqua.
78 |
O h1 é o título da página, nele declaramos que a cor da fonte é vermelha.
79 |
O p é o parágrafo, nele declaramos que a cor da fonte é blueviolet.
80 |
81 |
Alguns Comandos em Css
82 |
color ➜ edita a cor da fonte.
83 |
background-color ➜ edita a cor do fundo.
84 |
width ➜ edita a largura do elemento.
85 |
height ➜ edita a altura do elemento.
86 |
font-family ➜ edita o tipo da fonte. Ex: Arial, Times New Roman, Georgia, Impact.
87 |
font-size ➜ edita o tamanho da fonte.
88 |
font-weight ➜ especifica o peso ou a intensidade da fonte (ex.: negrito).
89 |
border ➜ é utilizada para adicionar um contorno ao elemento.
90 |
Class e Id
91 |
Até agora aplicamos os estilos somente nos seletores body, h1 e p. Mas há outros tipos de seletores que são muito utilizados em Html e Css, são as classes e id's.
92 |
As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. O atributo class="paragrafo" é escrito dentro da tag de abertura, no exemplo abaixo foi escrito dentro da tag de abertura p.
93 |
94 |
No arquivo style.css, temos o seletor .paragrafos que faz referência aos parágrafos que receberam class="paragrafos" no arquivo Html.
95 |
O ponto (.) antes do paragrafo (dentro do arquivo css) informa que é uma classe. Logo, todos os elementos receberão a configuração color: green;.
96 |
97 |
Aqui temos todos os parágrafos na cor verde.
98 |
99 |
Já os id's, identificam apenas um único elemento.
100 |
101 |
No arquivo style.css, temos o seletor #titulo que faz referência ao título que recebeu id="titulo" no arquivo Html.
102 |
O hash ou jogo da velha (#) antes do titulo (dentro do arquivo css) informa que é um id. Logo, o elemento h1 receberá a configuração de color: red; e font-size: 60px;
103 |
104 |
Aqui temos o resultado ao abrir o arquivo index.html pelo navegador.
105 |
106 |
Exercícios
107 |
a ) Escreva uma lista de 5 coisas que você goste de fazer. O título (h1) deverá ser "O que eu gosto de fazer". O site no navegador deverá ser da seguinte forma:
108 |
109 |
b ) Escreva uma lista com o nome de 3 planetas. O título (h1) deverá ser "Escreva o nome de 3 planetas". Os 3 parágrafos (p) devem conter a classe class="planetas" e serem estilizadas através do seletor .planetas. O site no navegador deverá ser da seguinte forma:
110 |
111 |
c ) Escreva uma lista com o nome de 3 frutas. O título (h1) deverá ser "Escreva o nome de 3 frutas". Cada elemento (h1 e p) deverá conter um id diferente. O site no navegador deverá ser da seguinte forma:
Agora veremos os conceitos iniciais da linguagem JavaScript, mas primeiramente devemos conhecer um comando importante em Html chamado input.
17 |
O elemento HTML input é uma forma de entrada de dados, é usado para criar controles interativos para formulários baseados na web para receber dados do usuário. A semântica de um input varia consideravelmente dependendo do valor de seu atributo type.
18 |
Iremos ver exemplos com input do tipo text e do tipo button, porém existem muitos outros tipos.
19 |
Tipo text (input type="text")
20 |
21 |
Tipo button (input type="button" value="Mostrar")
22 |
23 |
Na página inicial (cap 1) mostramos dois método em javascript, o alert e o prompt. Tais códigos foram escritos dentro do arquivo index.html, entre a tag script.
24 |
25 |
Porém a forma que os profissionais escrevem códigos em javascript é criando um arquivo com a extensão .js, e no final da tag body (em html) o arquivo é linkado.
26 |
27 |
Agora iremos criar um pequeno programa que mostrará o nome digitado. Através desse programa aprenderemos novos conceitos em JavaScript.
28 |
29 |
O objetivo desse programa é, ao digitar o seu nome na caixa (input type text) e clicar no botão Mostrar, o nome digitado apareça na saída "Local onde aparecerá o nome".
30 |
Tudo que está aparecendo no site foi feito dentro do arquivo index.html. O único código que será feito dentro do arquivo script.js é a função do botão mostrar.
31 |
32 |
Note que dentro dos dois input's temos o uso de id's. Também temos um id dentro do segundo parágrafo (p). Essas id's servem de referência (também chamadas de identificadores), caso precise chamá-las dentro de um arquivo script.
33 |
O botão em si não faz nada. A ele se deve inserir uma função, que em javascript se chama function. Uma função contém um conjunto de comandos que realizam uma ação. Os comandos que pertencem a uma função devem estar delimitados pelas chaves { }.
34 |
É uma boa prática de programação dar um nome para a função começando por um verbo. O uso do CAMELCASE (mostraNome ou mostrarPrimeiroNome) é também um padrão recomendado e facilita a compreensão da leitura do nome.
35 |
Para referenciar um elemento HTML identificado no documento, deve-se utilizar o método getElementById( ). Esse método permite referenciar qualquer elemento que esteja no arquivo HTML, como um input, um parágrafo, um botão, uma imagem, um título, etc.
36 |
Para que um elemento HTML seja referenciado, ele precisa conter um atributo id, como foi visto na imagem anterior, onde o input text tem o id="nome" e o input button tem o id="mostrar".
37 |
38 |
Comando na linha 2
39 |
document = é o documento HTML, que é a parte visível no site.
40 |
getElementById('nome') = Está fazendo uma referência ao elemento HTML que tem o id="nome". É um espécie de ligação.
41 |
Essa ligação/referência está sendo colocada dentro da variável inputText.
42 |
Comando na linha 3
43 |
Após a ligação ser feita, agora sim o valor que foi digitado dentro do input text é capturado (através da propriedade value) e armazenado dentro da variável nome.
44 |
Comando na linha 5
45 |
Aqui o comando não é colocado dentro de nenhuma variável. A referência (ligação) é feita com o elemento que tem o id="saida".
46 |
A propriedade innerHTML é responsável por alterar o conteúdo de elementos de texto dentro do HTML. Então nesse caso, o elemento que possuir o id="saida" terá o seu conteúdo textual alterado para o texto que estiver armazenado dentro da variável nome.
47 |
Comando na linha 8
48 |
Aqui é feito a referência/ligação com o elemento que tem o id="mostrar", que nesse caso é o botão Mostrar. Essa referência é colocada dentro da variável mostrar.
49 |
Comando na linha 9
50 |
Esse comando significa que na variável mostrar é executado um método chamado addEventListener( ).
51 |
Esse método é chamado de "ouvinte de eventos", ou seja, ele fica prestando atenção em que momento o evento é disparado. Nesse caso ele esta a ouvir o evento click.
52 |
Assim que o evento click é disparado, a função mostrarNome (criada anteriormente) é acionada.
53 |
No exemplo anterior, declaramos três variáveis. Em programas maiores, o número de variáveis vai ser maior também. É importante mantermos a organização dos nomes para uma melhor compreensão. Podemos perceber que as variáveis são utilizadas para fins diversos: texto de entrada de dados, referência a elementos e mais pra frente, referência a elementos de saída.
54 |
A partir dos próximos exemplos iremos atribuir aos id's (dentro do HTML), nomes que nos indiquem o seu uso no programa: in de input para campos de entrada de texto, bt de button para botões e out de output para os locais de saída de dados.
55 |
Ex: inNome, btMostrar e outSaída.
56 |
E dentro do arquivo javascript iremos manter essa mesma regra ao referenciar esses elementos.
57 |
Funções Matemáticas em JavaScript (Math)
58 |
Em certos momentos iremos realizar algumas operações matemáticas em javascript, e para isso utilizaremos o comando Math. Veremos agora algumas funções de Math.
59 |
Math.abs(numero) - retorna o valor absoluto de um número, se o valor for negativo, ele será convertido para positivo. Se for positivo, o valor permanece positivo.
60 |
Math.abs(-3), retorna 3
61 |
Math.ceil(numero) - arredonda o valor para cima. Se o valor possuir decimais, retorna o próximo número inteiro.
62 |
Math.ceil(4.2), retorna 5
63 |
Math.floor(numero) - arredonda o valor para baixo. Retorna a parte inteira do número.
64 |
Math.floor(7.9), retorna 7
65 |
Math.pow(base, expoente) - retorna a base elevada ao expoente.
66 |
Math.pow(3, 2), retorna 9
67 |
Math.random( ) - retorna um número aleatório entre 0 e 1, com várias casas decimais.
68 |
Math.random( ), retorna 0.65738436395
69 |
Math.round(numero) - arredonda o valor para o inteiro mais próximo. A partir de .5 na parte fracionária, o valor é arredondado pra cima. Anterior a .5, o valor é arredondado para baixo.
70 |
Math.round(2.7), retorna 3
71 |
Math.sqrt(numero) - retorna a raiz quadrada do número.
72 |
Math.sqrt(16), retorna 4
73 |
Ordem de precedência dos operadores
74 |
Nas expressões matemáticas devemos ter cuidado com a ordem de precedência dos operadores.
75 |
O resultado das expressões a seguir são diferentes:
76 |
(n1 + n2) * 3
77 |
n1 + n2 * 3
78 |
Veremos agora a ordem correta:
79 |
1º - Os parênteses redefinem a ordem das prioridades.
80 |
(n1 + n2) * 3
81 |
2º - As funções matemáticas ou funções criadas pelo usuário tem prioridades sobre os demais operadores aritméticos.
82 |
Math.sqrt(9) * 8 / 2
83 |
3º - Os operadores de multiplicação (*), divisão (/) e módulo (%), tem prioridade sobre os operadores de adição e subtração.
84 |
2 + 5 * 2
85 |
4º - Caso uma expressão contenha operadores do mesmo nível, o resultado é calculado da esquerda pra direita.
86 |
5 / 2 * 3
87 |
IMPORTANTE: Você pode modificar a ordem de execução de qualquer expressão com a inserção de parênteses.
88 |
Exercícios
89 |
a ) Elabore um programa para uma vídeo locadora, que leia o título e a duração de um filme em minutos. Exiba o título do filme e converta a duração para horas e minutos, conforme destacado na imagem.
90 |
91 |
b ) Elabore um programa para uma revenda de veículos. O programa deve ler modelo e preço do veículo. Apresentar como resposta o valor da entrada (50%) e o saldo restante em 12x.
92 |
93 |
c ) Elabore um programa para um restaurante que leia o preço por kg e o consumo (em gramas) de um cliente. Exiba o valor a ser pago, conforme a imagem abaixo.
94 |
95 |
d ) Uma farmácia está com uma promoção. Na compra de duas unidades de um mesmo medicamento, o cliente recebe como desconto os centavos do valor total. Elabore um programa que leia a descrição e o preço de um medicamento. Informe o valor do produto na promoção.
96 |
97 |
e ) Elabore um programa para uma lan house. O programa deve ler o valor de cada 15 minutos de uso de um computador e o tempo de uso por um cliente em minutos. Informe o valor a ser pago pelo cliente, sabendo que as frações extras de 15 minutos devem ser cobradas de forma integral.
98 |
99 |
f ) Um supermercado está com uma promoção. Para aumentar suas vendas no setor de higiene, cada etiqueta de produto deve exibir uma mensagem anunciando 50% de desconto (para um item) na compra de três unidades do produto. Elabore um programa que leia descrição e preço de um produto. Após, apresente as mensagens indicando a promoção.
100 |
101 |
Resolução dos Exercícios
102 |
a ) Nesse arquivo html, temos três input's com id's. No final do arquivo temos dois elementos p, que serão a saída de dados. Note que não há conteúdo dentro deles. O conteúdo só aparecerá após todos os processamentos de dados. Logo em seguida temos o elemento script, que será responsável pela ligação com o arquivo javascript.
103 |
104 |
Aqui temos o arquivo script.js. Primeiramente temos as referências (ligação) feitas com os elementos no arquivo html. Tais referências só são possíveis devido ao id em cada elemento. Cada referência é armazenada em uma variável que possui o mesmo nome que o id.
105 |
A referência é feita através do comando document.getElementById que basicamente significa "pegar um elemento (pelo ID) dentro do documento HTML".
106 |
Logo em seguida temos o uso da propriedade value para capturar o valor que foi digitado dentro das caixas. Por padrão, esses input's do tipo text retornam uma string, então em inDuracao.value temos que converter a string em número com o uso do Number( ). Em seguida, os valores capturados sao armazenados em variáveis (titulo e duracao).
107 |
Para transformar os minutos em horas, é feito uma operação onde a duracao é dividida por 60. Porém queremos pegar apenas um número inteiro (as horas), como 1, 2 ou 3. Caso o valor da duracao seja de 65 minutos, ao dividir por 60 resultará em um número com casas decimais (1.083333...). Então usamos a função matemática Math.floor, que arredonda o valor para baixo e pega somente a parte inteira do número. Em seguida o valor é armazenado dentro da variável horas.
108 |
A próxima linha é responsável por pegar os minutos restantes. Para fazer isso, usa-se o sinal de módulo (%), que tem a função de pegar somente o resto de uma divisão. Por exemplo, se a duração for de 65 minutos, ao dividir por 60, o resto será de 5. Entao esse resto será armazenado na variável minutos.
109 |
Agora com todos os valores em mãos (titulo, horas e minutos), chegou o momento de apresentá-los na saída de dados. Esses valores serão apresentados nos elementos p's, que se encontram no final do arquivo em html. O comando innerHTML é responsável por alterar o conteúdo dos elementos. Nesse caso, ele altera o conteúdo dos parágrafos que possuem o id="outTitulo" e id="outResposta".
110 |
Por fim temos o funcionamento do botão. Essa função converterDuracao( ) só irá funcionar após o botão ser clicado. Primeiramente devemos criar a ligação/referência com o inputbutton que se encontra dentro do arquivo em html. Tal referencia é feita através do id="btConverter". Em seguida temos a criaçao do "escutador de evento" que informa que, através de um click no botão a função converterDuracao é acionada.
111 |
112 |
b ) Aqui a entrada de dados será nos input's text. O processamento de dados será no input button. E a saída de dados nos três parágrafos finais (id="outVeiculo", id="outEntrada" e id="outParcela").
113 |
114 |
Primeiramente é feito a referência (ligação) com os elementos em html através do comando document.getElementById. Tais referências só são possíveis devido ao id em cada elemento. Cada referência é armazenada em uma variável que possui o mesmo nome que o id.
115 |
Em seguida o comando value é usado para capturar o conteúdo digitado. Em inPreco.value temos que converter a string em número com o uso do Number( ). Em seguida, os valores capturados sao armazenados em variáveis (veiculo e preco).
116 |
Para pegarmos o valor da entrada do veículo de 50%, dividimos o preco por 2.
117 |
Como o valor restante também é 50%, podemos pegar a entrada e dividir por 12 para pegarmos o valor das parcelas.
118 |
O comando innerHTML altera o conteudo do elemento. No caso do comando outVeiculo.innerHTML, o conteúdo ("Promoção: " + veiculo) será colocado dentro do elemento p.
119 |
Por fim temos o funcionamento do botão. Essa função mostrarPromocao( ) só irá funcionar após o botão ser clicado. Primeiramente devemos criar a ligação/referência com o input button que se encontra dentro do arquivo em html. Tal referencia é feita através do id="btVer". Em seguida temos a criaçao do "escutador de evento" que informa que, através de um click no botão a função mostrarPromocao é acionada.
120 |
121 |
c ) A entrada de dados será os input's text. O processamento de dados será no input button. E a saída de dados no h3 (id="outValor").
122 |
123 |
Para calcular o valor a ser pago, devemos pegar o preço de 1 kilo e dividir por 1000, logo em seguida multiplicar pelo consumo do cliente. O resultado é armazenado dentro da variável valor.
124 |
125 |
d ) A entrada de dados será os input's text, que estão dentro dos dois primeiros parágrafos (p). O processamento de dados será no input button. E a saída de dados nos dois h3.
126 |
127 |
O valor do desconto é calculado com a ajuda da função matemática Math.floor. O preco pode ter casas decimais, entao o Math.floor arredonda o numero pra baixo e pega o numero inteiro. Logo em seguida multiplica por 2 e armazena o valor dentro da variavel desconto.
128 |
129 |
e ) A entrada de dados será os input's text, que estão dentro dos dois primeiros parágrafos (p). O processamento de dados será no input button. E a saída de dados no h3.
Aqui neste capítulo veremos alguns conceitos de extrema importância em JavaScript.
17 |
Como usar aspas simples e duplas (' ') (" ")
18 |
A verdade é que para o JavaScript não faz diferença se você declara uma String com aspas simples ou duplas, para ele as duas maneiras são declarações válidas para uma String. A grande competição por escolher um ou outro é puramente por gosto particular de cada desenvolvedor, muitos preferem simples, porém, outros preferem duplas.
19 |
Imagine que você precise escrever a seguinte String:
20 |
➜ It's a new game
21 |
Ou:
22 |
➜ I'm a Front-End developer
23 |
Para resolver esse problema deve-se utilizar as aspas duplas:
24 |
➜ " It's a new game "
25 |
➜ " I'm a Front-End developer "
26 |
Mas, e se você precisar destacar alguma palavra com aspas duplas ?
27 |
➜ TypeScript é uma “linguagem” de programação
28 |
Para escrever essa frase com aspas duplas, devemos utilizar as aspas simples.
29 |
➜ ' TypeScript é uma "linguagem" de programação '
30 |
Template Strings `${var} blablabla`
31 |
É uma nova forma de criar strings e tornar o seu código um pouco mais legível.
32 |
Até agora usamos as aspas (simples ou duplas) e o sinal de adição (concatenação) para escrever as saidas de dados.
33 |
➜ "Eu tenho: " + anos + " anos"
34 |
Na saida de dados fica assim:
35 |
➜ Eu tenho 18 anos
36 |
Template strings são envolvidas pelo acento crase (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves. O mesmo código escrito acima, é escrito da seguinte forma:
37 |
➜ `Eu tenho: ${anos} anos`
38 |
➜ `Meu nome é ${nome}`
39 |
A variável fica dentro das chaves. Dentro das chaves também podem ter expressoes.
40 |
➜ `Um mais um é igual a ${1+1}`
41 |
Escopo de Variável
42 |
Quando você declara uma váriavel fora de qualquer função, ela é chamada de variávelglobal, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variávellocal, pois ela está disponível somente dentro dessa função.
43 |
Basicamente escopo é o limite de alcance que uma determinada variável tem. Se criar uma variável dentro de uma função, esta variável só poderá ser utilizada por esta função.
44 |
Diferença entre let, var e const
45 |
Var e Let são muito parecidos, eles sao variáveis. O var é uma variável global, ele funciona em qualquer lugar do programa. O let só funciona dentro do bloco que foi declarado.
46 |
Atualmente surgiu um recurso chamado let, que pode ser usado para a declaração de variáveis.
47 |
Let é, agora, a forma preferida de declaração de variáveis. Não é uma surpresa, já que ela é uma melhoria às declarações com var.
48 |
Um bloco é uma porção de código cercado por {}. Um bloco vive dentro dessas chaves. Tudo o que estiver cercado por chaves é um bloco.
49 |
Assim, uma variável declarada com let em um bloco estará disponível apenas dentro daquele bloco.
Não entraremos a fundo no estudo dos objetos, apenas veremos o básico para termos uma pequena noção.
54 |
Um objeto é uma coleção de dados e/ou funcionalidades relacionadas, que geralmente consistem em diversas variáveis e funções.
55 |
56 |
Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido como objetos tangíveis da vida real.
57 |
Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.
58 |
O que significa e como usar o console.log
59 |
O console é um objeto e o log é um método.
60 |
O console é efetivamente um objeto com diversos métodos associados.
61 |
O objeto console fornece acesso ao console de depuração do navegador. O funcionamento deste objeto varia de navegador para navegador mas existem determinados métodos que são vistos como padrão. Um desses métodos é o log( ).
62 |
O método log() existe essencialmente para permitir o envio de dados para o console de depuração do navegador.
63 |
Criaremos um exemplo simples para aprendermos a usar o console.log.
64 |
65 |
66 |
Ao abrirmos o arquivo html no navegador:
67 |
68 |
Clique com o botao direito do mouse e clique em inspecionar.
69 |
70 |
Será aberto a seguinte janela, clique em "console".
As estruturas condicionais estão ligadas à tomada de decisão de um algoritmo. Por exemplo, se um aluno tiver a média de notas inferior a 7, o algoritmo irá mostrar "reprovado". Se a média de notas for superior ou igual a 7, o algoritmo mostrará "aprovado".
17 |
Essas estruturas condicionais podem ser inseridas dentro da entrada de dados, do processamento de dados ou dentro da saída de dados.
18 |
Em um programa que calcula a média das notas dos alunos e exibe se o aluno foi aprovado ou reprovado, as etapas de entrada de dados e processamento de dados serão as mesmas. A estrutura condicional será utilizada apenas na saída de dados, para mostrar a mensagem "Aprovado" ou "Reprovado".
19 |
Já em um programa que calcula o peso ideal (cálculo diferente para cada sexo), as etapas de entrada de dados e saída serão as mesmas. A estrutura condicional será dentro do processamento de dados (cálculo).
20 |
Para entrarmos nesse assunto, primeiramente devemos ver dois conceitos de extrema importância, os operadores relacionais e os operadores lógicos.
21 |
Operadores Relacionais
22 |
Veremos agora alguns operadores relacionais, que quando inseridos em um programa, cada comparação deve retornar true (verdadeiro) ou false (falso).
23 |
== Igual. Retorna verdadeiro caso os dados comparados contenham o mesmo conteúdo.
24 |
!= Diferente. Retorna verdadeiro caso os dados contenham conteúdos diferentes.
25 |
> Maior. Usado para comparar números ou palavras.
26 |
< Menor. Usado para comparar números ou palavras.
27 |
>= Maior ou Igual.
28 |
<= Menor ou Igual.
29 |
Existem também os símbolos de === (estritamente igual) e !== (estritamentediferente). Eles comparam o valor e também o tipo do dado, se é número ou string.
30 |
'5' === 5, retorna falso
31 |
'5' !== 5, retorna verdadeiro
32 |
Operadores Lógicos
33 |
Há situações em que devemos analisar mais de uma condição. Por exemplo, um cliente quer um carro azul ou cinza. Ou, um cliente quer um carro inferior a R$ 15.000,00 e o ano acima de 2010.
34 |
Os principais operadores lógicos em JavaScript:
35 |
Not ( ! ). Indica negação. Inverte o resultado de uma comparação.
36 |
And ( && ). Indica conjunção. Retorna verdadeiro (true) apenas quando todas as comparações forem verdadeiras.
37 |
Or ( || ). Indica disjunção. Retorna verdadeiro se, no mínimo, uma das condições for verdadeira.
38 |
Em operadores lógicos usamos uma tabela com todas as possíveis comparações, chamada tabela verdade.
39 |
Veremos um exemplo agora de como utilizar a tabela verdade com duas variáveis. Na tabela verdade utilizamos uma letra (p ou q) para representar uma proposição.
40 |
var cor = "Azul" ➜ P
41 |
var ano = 2017 ➜ Q
42 |
A tabela a seguir é a de negação ( ! ). Ela pode ser aplicada a apenas uma proposição.
43 |
44 |
A negação é o mais simples dos operadores. Ela inverte o resultado de uma condição.
45 |
A tabela a seguir é a de conjunção ( && ). Ela reflete a ideia de simultaneidade.
46 |
47 |
Só retorna verdadeiro se todas as comparações forem verdadeiras.
48 |
Ex: 1 < 4 && 4 > 2, essa expressão retorna true, pois as duas proposições são true.
49 |
A tabela a seguir é a de disjunção ( || ). Ela reflete a ideia de que pelo menos uma das condições deve ser verdadeira.
50 |
51 |
Ex: 3 > 5 || 1 < 4, essa expressão retorna true, pois a segunda proposição é true.
52 |
If ... else
53 |
Para criarmos uma estrutura condicional, utilizamos os comandos if ... else (se ... então). Eles possuem algumas variações. É possível utilizarmos apenas o if sem o else. E também criarmos vários comandos else.
54 |
Uma condição simples sem o else:
55 |
56 | if (condição) {
57 | comandos para true;
58 | }
59 |
60 |
Condição if ... else:
61 |
62 | if (condição) {
63 | comandos para true;
64 | } else {
65 | comandos para false;
66 | }
67 |
IMPORTANTE: Quando houver apenas uma linha de comando que pertence à condição, o uso das chaves não é obrigatório.
79 |
80 | if (condição) comando;
81 |
82 |
Switch ... Case
83 |
Switch case é um outro tipo de estrutura condicional. Ele é útil quando tivermos várias alternativas a partir de uma variável.
84 |
No exemplo abaixo o programa é feito dentro do arquivo index.html. Note que o programa todo está entre a tag script.
85 |
Primeiramente temos uma entrada de dados (prompt), onde o valor digitado é convertido para número através do comando Number( ), e em seguida armazenado na variável numero. Na próxima linha temos a declaração da variável resultado, mas nenhum valor valor é atribuido.
86 |
A estrutura switch escolhe a condição a ser executada a partir da variável numero. Se o número digitado na entrada de dados (prompt) for 1, os comandos de dentro do case 1 serão executados. O break significa que a estrutura switch encerrou e o próximo comando a ser lido será o alert (saída de dados). Só entrará no default caso nenhuma das condições anteriores forem executadas.
87 |
Na saída de dados alert, temos o uso do formato template strings, que utiliza o sinal de crase (` `), o cifrão ($) e as chaves { }, para mostrar a saída de dados.
88 |
89 |
Ao abrir o programa index.html através do navegador, temos a seguinte imagem:
90 |
91 |
Ao digitar um número e clicar em OK, a saída de dados será dessa forma:
92 |
93 |
Operador Ternário
94 |
Existe ainda uma forma abreviada para criar as instruções if ... else conhecida como operador ternário.
95 |
96 |
Exercícios
97 |
a ) Elabore um programa que leia o nome e as notas de um aluno, apresente a média e uma mensagem para o aluno, caso aprovado "Parabéns Aluno! Você foi aprovado(a)", e caso reprovado "Que Pena Aluno. Você foi reprovado(a)". A mensagem de aprovação deverá ser azul e a de reprovação vermelha.
98 |
99 |
b ) Elabore um programa que calcule o peso idel de uma pessoa. Para homem o cálculo será ( 22 * altura² ), se for mulher será ( 21 * altura² ).
100 |
101 |
c ) Elabore um programa que leia a hora no Brasil e informe a hora na França. Sabendo que na França é 5 horas a mais que no Brasil.
102 |
103 |
d ) Elabore um programa que leia um número e calcule sua raiz quadrada. Caso a raiz não seja exata, informe "Não há raiz exata para ...".
104 |
105 |
e ) Elabore um programa que leia um número e informe se ele é ímpar ou par.
106 |
107 |
f ) Elabore um programa que leia a velocidade permitida em uma estrada e a velocidade de um condutor. Se a velocidade for inferior ou igual a permitida, exiba "Sem multa". Se a velocidade for de até 20% maior que a permitida, exiba "Multa leve". Se a velocidade for superior a 20% da velocidade permitida, exiba "Multa drive".
108 |
109 |
g ) Elabore um programa que simule um parquímetro, o qual leia o valor de moedas depositado. O programa deve informar o tempo de permanência do veículo no local e o troco (se existir). Se for inferior ao tempo mínimo, exiba a mensagem "Valor Insuficiente.". Considere os valores e o tempo da tabela a seguir.
110 |
111 |
112 |
h ) Elabore um programa que leia três lados e verifique se eles podem ou não formar um triângulo. Para formar, um dos lados não pode ser maior que a soma dos outros dois. Caso formem um triângulo, exiba qual o tipo: Equilátero (3 lados iguais), Isósceles (2 lados iguais) e Escaleno (3 lados diferentes).
113 |
114 |
i ) Elabore um programa que leia dois números e verifique quem é o maior.
115 |
116 |
j ) Elabore um programa que leia dois números e calcule a operação escolhida.
117 |
118 |
Resolução dos Exercícios
119 |
a )
120 |
121 |
122 |
b )
123 |
124 |
Para pegarmos a opção que foi clicada nos input's radio, utilizamos o comando checked. A variável masculino irá guardar true ou false, da mesma forma que a variável feminino. Na estrutura if...else, se masculino for true, o comando peso = 22 * Math.pow(altura, 2) será executado. A função matemática Math.pow significa exponenciação (altura elevado a 2).
125 |
126 |
c )
127 |
128 |
A variável horaFranca recebe a hora digitada mais 5. Mas, e se a hora digitada for 21 ? Para isso temos a estrutura condicional seguinte. Caso o valor da variável horaFranca seja 26, esse valor será subtraido por 24.
129 |
130 |
d )
131 |
132 |
A variável raiz contém a função matemática Math.sqrt(), que calcula a raiz quadrada de um número. Nesse caso, está sendo calculado a raiz da variável numero.
133 |
No início da estrutura condicional, temos uma condição, se raiz for igual a Math.floor(raiz). Se resultar em true, o primeiro comando entre chaves { } será executado.
134 |
O comando Math.floor(raiz), significa que se a raiz for um número com casas decimais após a vírgula, desse número será usado apenas o número inteiro.
135 |
136 |
e )
137 |
138 |
139 |
f )
140 |
141 |
Como o valor de 20% é citado duas vezes no enunciado da questão, é criado a variável vintePorcento. Entre parênteses a variável velocidadePermitida é multiplicada por 20%. Logo depois, é somada com ela mesma.
142 |
143 |
g )
144 |
145 |
O primeiro if é para evitar que valores menores que 1 sejam digitados. Se o valor for menor que 1, o comando alert é executado com a mensagem Valor Insuficiente. inValor.focus() significa que o cursor ficará piscando na caixa inValor.
146 |
let troco, tempo é outra forma de declarar variáveis. É o mesmo que declarar primeiro a variável troco e depois a variável tempo.
As estruturas de repetição são úteis quando precisamos repetir N vezes a execução de um bloco de comandos até que uma condição seja atendida. Elas são chamadas de laços de repetição ou loops.
17 |
Um bom exemplo do seu uso é quando queremos mostrar uma tabuada, que nada mais é que uma lista. Observe que a linha se repete 10x.
18 |
19 |
Para construir as estruturas de repetição, utilizaremos os três principais comandos: for, while e o do...white.
20 |
For
21 |
A sintaxe do comando for é composta por três instruções:
22 |
➜ valor inicial da variável de controle
23 |
➜ condição que determina se a repetição vai continuar ou não
24 |
➜ incremento/decremento da variável de controle
25 |
26 |
As instruções são separadas por ponto e vírgula. Entre as chaves { } devem ser inseridos os comandos que serão repetidos. O incremento i++ é a mesma coisa que i = i + 1.
27 |
A repetição é controlada por uma variável que, no exemplo acima, inicia em 1.
28 |
IMPORTANTE: A estrutura termina quando a condição resulta em false (falso).
29 |
No exemplo seguinte veremos a sequência de execução das instruções:
30 |
31 |
1º ➜ let i = 1
32 |
2º ➜ i <= 3 (se i for menor ou igual a 3, a estrutura continua)
33 |
3º ➜ Comando que será Repetido
34 |
4º ➜ i++ (aqui o i é somado com 1, que resulta em 2)
35 |
5º ➜ i <= 3 (se i for menor ou igual a 3, a estrutura continua. 2 é menor que 3.)
36 |
6º ➜ Comando que será Repetido
37 |
7º ➜ i++ (i é somado com 1, que resulta em 3)
38 |
8º ➜ i <= 3 (aqui o i é igual a 3 e a estrutura continua)
39 |
9º ➜ Comando que será Repetido
40 |
10º ➜ i++ (i é somado com 1, que resulta em 4)
41 |
11º ➜ i <= 3 (aqui o i é 4, maior que 3, então a estrutura encerra, pois a condição é falsa)
42 |
Note que o incremento/decremento é executado por último, após o "Comando que será Repetido".
43 |
Exemplo:
44 |
Nesse exemplo, o programa deve ler um número e apresentar a tabuada desse número. Ao abrir o arquivo html com o navegador, temos a seguinte imagem.
45 |
46 |
No arquivo html abaixo temos uma nova tag, a pre. A tag pre é a tag utilizada para representar texto pré-formatado. Um texto dentro desse elemento é exibido em uma fonte diferente da fonte original do arquivo. Espaços em branco são mantidos no texto da mesma forma em que este foi digitado.
47 |
48 |
49 |
50 |
Dentro da função mostrarTabuada( ), temos primeiramente a referência com os elementos HTML. Logo depois, o valor digitado dentro do inNumero é transformado em número (Number) e armazenado dentro da variável numero.
51 |
Em seguida temos a criação da variável saida com o valor vazio. Essa variável será responsável por armazenar todo o conteúdo da tabuada (4 X 1 = 4, 4 X 2 = 8, ...).
52 |
Agora temos a estrutura for. A instrução let i = 1 significa que a repetição começará no valor 1. A instrução i <= 10 é a condição, se i for menor ou igual a 10, o comando dentro das chaves irá ser executado. Com o resultado da condição igual a true, o comando entre as chaves é executado. O sinal de += após a variável saida, significa que a variável saida receberá ela mesma mais (+) a template string seguinte.
O incremento (i++) é executado por último, após o comando entre as chaves { }.
55 |
Perceba que a variável de controle é o i, que inicialmente tinha o valor de 1. Na ordem, a estrutura segue essa sequência:
56 |
1º ➜ variável i é iniciada com o valor 1.
57 |
2º ➜ é verificado na condição se o i é menor ou igual a 10.
58 |
3º ➜ se for true, o comando entre as chaves é executado. Onde tem o i, será o valor 1. E esse comando todo será armazenado dentro da variável saida.
59 |
4º ➜ em seguida, o i é incrementado (i++), o seu valor que era de 1, será somado com mais 1, que agora terá o valor 2.
60 |
5º ➜ agora o valor de i é 2, e voltamos a instrução de condição (i <= 10) e a verificação é feita, se i é menor ou igual a 10.
61 |
6º ➜ se for true, o comando entre chaves é executado e o resultado é armazenado novamente dentro da variável saida.
62 |
7º ➜ em seguida, o i é incrementado (i++), o seu valor que era de 2, será somado com mais 1, que agora terá o valor 3.
63 |
Esses passos serão realizados até a condição (i <= 10) resultar em false.
64 |
No comando outSaida.innerHTML = saida, o conteúdo que está dentro da variável saida será inserido dentro do elemento pre que possui o id="outSaida". Essa inserção é graças ao comando innerHTML.
65 |
O innerHTML altera o conteúdo de um elemento.
66 |
Exemplo:
67 |
Nesse exemplo faremos um programa que leia um número e apresente uma sequência decrescente até o número 1.
68 |
69 |
70 |
A variável saida é onde ficará armazenado todos os números da sequência. Antes de entrar na estrutura de repetição (for), é armazenado na variável saida a string "Decrescendo de ${numero} a 1: ${numero}", que será mostrada (por exemplo) da seguinte forma "Decrescendo de 12 a 1: 12".
71 |
Dentro da estrutura for será armazenado (dentro da variável saida) somente o restante dos números da sequência que decrescerá, pois na declaração da variável saida (antes do for) já foi armazenado a string "Decrescendo de ${numero} a 1: ${numero}".
72 |
Dentro da estrutura for, primeiramente temos a declaração da variável de controle. A variável i recebe numero - 1, pois o número digitado já foi escrito anteriormente dentro da variável saida. Então, se o número digitado for 12 (por exemplo), a variável de controle será 11.
73 |
Logo em seguida temos a condição, se i for maior ou igual a 1. Se resultar em true, o comando entre as chaves { } será executado. O sinal de += significa que a variável saida recebe ela mesma mais (+) a template string.
74 |
saida = saida + `, ${i}`
75 |
Na primeira vez em que o comando entre as chaves { } é executado, temos a variável i com o valor de 11 (por exemplo). Então a variável saida receberá a seguinte string:
76 |
`Decrescendo de 12 a 1: 12, 11`
77 |
Após isso, o i é decrementado (i = i - 1). A cada mudança da variável de controle (i), a condição é verificada, se for true o comando dentro das chaves { } é executado e logo em seguida ocorre o decremento. Esse loop acontece até a condição (i >= 1) retornar false.
78 |
79 |
While - Repetição com teste no início
80 |
Um laço de repetição também pode ser criado com o comando while, que realiza o teste condicional logo no inicio, diferente do for. A tradução da estrutura while é "enquanto a condição for verdadeira, execute".
81 |
82 | while (condição) {
83 | comandos
84 | }
85 |
86 |
Exemplo:
87 |
Para realizarmos os exemplos iremos colocar o programa dentro da tag script e salvaremos o arquivo no index.html. Iremos abrir o arquivo index.html com o navegador. Para visualizarmos a saída (console.log) iremos abrir o console do navegador clicando com o botão direito do mouse e clicando em "Inspecionar".
88 |
89 |
90 |
No arquivo index.html teremos o seguinte programa:
91 |
Note que a variável de controle (let i = 5) é declarada fora da estrutura while. Em seguida a variável saida é declarada com o valor vazio.
92 |
93 |
IMPORTANTE: Como o teste é realizado no início, é possível que os comandos dentro das chaves { } não sejam executados.
94 |
Do ... While - Repetição com teste no final
95 |
Na estrutura do ... while o teste condicional é realizado no final.
96 |
97 | do {
98 | comandos
99 | } while (condição)
100 |
101 |
Exemplo:
102 |
Nota-se que a variável inicio é mostrada logo no começo da estrutura dentro do comando do e em seguida é incrementada (inicio++). Em seguida, é verificado a condição (inicio < voltas), se for true a estrutura volta para o começo do comando do.
103 |
104 |
105 |
IMPORTANTE: No do ... while, fica garantido que os comandos dentro das chaves { } serão realizados no mínimo uma vez.
106 |
Break e Continue - Interrupções nos laços
107 |
Em JavaScript temos dois comandos que são utilizados nas estruturas de repetição. O break e o continue. O break sai do laço de repetição e o continue retorna ao início do laço.
108 |
109 |
Os comandos break e continue podem ser usados nas três estruturas de repetição: for, while e do ... while. Caso o comando continue seja executado em um laço for, o incremento ou decremento ocorre normalmente.
110 |
Exemplo:
111 |
No exemplo abaixo, temos um while em que a sua condição sempre vai ser true. O laço só irá finalizar quando o comando break for executado.
112 |
Ao entrar na estrutura if pela primeira vez, o i tem valor de 1. Logo, é verificado a condição se i é menor que 5, se resultar em true, o i é incrementado (i = i + 1). Quando o comando continue é executado, o laço while volta para o início.
113 |
O laço de repetição while só irá finalizar quando o i for 5, pois entrará no comando else if e o comando break será executado. Logo em seguida, o comando console.log(i) é executado.
114 |
115 |
116 |
Contadores e Acumuladores
117 |
Características:
118 |
➜ A variável contadora ou acumuladora deve receber uma atribuição inicial, geralmente zero.
119 |
➜ A variável contadora ou acumuladora deve receber ela mesma mais algum valor.
120 |
Diferença:
121 |
➜ O contador recebe ele mesmo mais 1.
122 |
➜ O acumulador recebe ele mesmo mais uma variável.
123 |
Exemplo:
124 |
O programa faz a leitura de contas que devem ser pagas por um usuário. Na saída, as contas são exibidas e, logo após, o número de contas (contador) e a soma dos valores (acumulador) são destacados.
125 |
126 |
127 |
128 |
No próximo exemplo, o programa receberá um número e informará se ele é primo ou não. O número primo é aquele que possui dois divisores, 1 e ele mesmo.
129 |
130 |
131 |
132 |
133 |
Exercícios
134 |
a ) Elabore um programa que leia o nome de uma fruta e um número. O número será a quantidade de vezes que a fruta deve ser repetida. Os nomes devem ser separados por um asterisco (*).
135 |
136 |
137 |
138 |
b ) Elabore um programa que leia o número inicial de chinchilas e anos, e informe a previsão de cada ano, sabendo que a cada ano o número de chinchilas triplica. O número inicial de chinchilas deve ser no mínimo 2 (casal).
139 |
140 |
141 |
Na variável resposta (abaixo), iniciamos com a string acumuladora (`1º Ano: ${chinchilas} Chinchilas\n`). Devido isso, no loop for, a variável de controle se inicia em 2 e a repetição da estrutura for acontece até o valor digitado na variável anos. A cada repetição, o valor de chinchilas é multiplicado por 3 e armazenado na variável chinchilas.
142 |
Logo em seguida, temos o comando resposta += `${i}º Ano: ${chinchilas} Chinchilas\n`, que a cada repetição acumula strings dessa forma (por exemplo):
143 |
2º Ano: 24 Chinchilas
144 |
3º Ano: 72 Chinchilas
145 |
4º Ano: 216 Chinchilas
146 |
Todas essas strings são armazenadas na variável acumuladora resposta.
147 |
148 |
c ) Elabore um programa que leia um número e verifique se ele é ou não um número perfeito. Número perfeito é aquele que é igual a soma dos seus divisores inteiros (exceto o próprio número). O programa deve exibir os divisores do número e a soma deles.
149 |
150 |
151 |
Antes do loop for, temos uma variável acumuladora (divisores) e uma variável contadora (soma). As duas variáveis já são iniciadas com valores, logo a variável de controle dentro do for começa em 2.
152 |
A cada repetição, uma estrutura if (condição) é executada. Se a divisão de numero por i tiver o resto (%) igual a 0, os comandos entre as chaves { } serão executados.
153 |
154 |
d ) Elabore um programa que leia dois números e realize a sua contagem, crescente ou decrescente. Números negativos são permitidos.
A partir desse capítulo alguns exemplo serão mostrados (saída de dados) no terminal do editor VS Code. Ao invés de utilizarmos o método alert( ) para vermos a saída de dados no navegador, poderemos usar o comando console.log( ). Veremos alguns exemplos a seguir.
17 |
Saída com alert( )
18 |
Para usarmos o alert( ) devemos escrever o código javascript dentro de um arquivo .html ou "linkar" o arquivo javascript no final do body do HTML.
19 |
Note que, para arquivo de extensão .html entender que estamos escrevendo javascript, devemos escrever nosso código dentro da tag script.
20 |
21 |
Ao abrir o arquivo usando o navegador teremos a seguinte situação:
22 |
23 |
A outra forma é "linkando" o arquivo javascript no final do body do HTML:
24 |
25 |
Ao abrir o arquivo através do navegador teremos a seguinte situação:
26 |
27 |
Saída de dados no Terminal do VS Code usando o comando console.log( )
28 |
Para rodarmos javascript no terminal do vs code, primeiramente devemos instalar um programa chamado "Node".
Com o node já instalado, podemos abrir o Terminal do VS Code com o comando Ctrl + ' (Control mais Aspas Simples) ou ir no menu superior clicar em "Ver" e logo depois clicar em "Terminal".
34 |
35 |
Teremos a seguinte situação:
36 |
37 |
Para executarmos o arquivo script.js, digitaremos no terminal o comando "node nome_do_arquivo.js" e apertamos o Enter.
38 |
39 |
Agora estamos prontos para iniciar os estudos de Arrays.
40 |
Arrays
41 |
Vetores ou Arrays são estruturas que permitem armazenar uma lista de dados na memória principal do computador.
42 |
Representação visual do array de nome produtos.
43 |
44 |
O índice numérico (que começa em 0) identifica cada elemento da lista.
45 |
Para referenciar um item/elemento do vetor, devemos indicar seu nome, seguido por um número (índice) entre colchetes.
46 |
produtos[0] ➜ retorna o elemento Arroz.
47 |
Podemos alterar o elemento/item da lista fazendo uma nova atribuição a um elemento do vetor:
48 |
produtos[2] = "Leite" ➜ significa que no índice 2 onde era Pimenta, agora será Leite.
49 |
IMPORTANTE: Na linguagem JavaScript, não é necessário indicar o número total de elementos do vetor na sua declaração.
50 |
Para declarar um vetor, devemos utilizar uma das seguintes formas:
51 |
var produtos = [ ]
52 |
var produtos = new Array( )
53 |
Também é possível declarar um vetor com algum conteúdo inicial:
54 |
var produtos = ["Arroz", "Feijão", "Iogurte"]
55 |
Diferença entre as variáveis e os vetores
56 |
A variável armazena apenas um valor por vez, quando uma nova atribuição a essa variável é realizada, o seu valor anterior é perdido.
57 |
O vetor/array permite armazenar um conjunto de dados e acessar todos os seus elementos através do índice.
58 |
Inclusão e Exclusão de elementos/itens do array.
59 |
push( ) ➜ adiciona um elemento ao final do vetor
60 |
unshift( ) ➜ adiciona um elemento ao inicio do vetor e desloca os elementos
61 |
pop( ) ➜ remove o último elemento do vetor
62 |
shift( ) ➜ remove o primeiro elemento do vetor e desloca os elementos
63 |
Exemplo:
64 |
var cidades = ["Pelotas"] ➜ declaração do array cidades com um elemento Pelotas
65 |
cidades[0] ➜ retorna o elemento Pelotas
66 |
cidades.push("São Lourenço") ➜ adiciona o elemento São Lourenço ao final do array
67 |
cidades[0] ➜ retorna o elemento Pelotas
68 |
cidades[1] ➜ retorna o elemento São Lourenço
69 |
cidades.unshift("Porto Alegre") ➜ adiciona o elemento Porto Alegre ao início do array
70 |
cidades[0] ➜ retorna o elemento Porto Alegre
71 |
cidades[1] ➜ retorna o elemento Pelotas
72 |
cidades[2] ➜ retorna o elemento São Lourenço
73 |
var retirada = cidades.pop( ) ➜ remove o último elemento do vetor e o armazena na variável retirada
74 |
cidades[0] ➜ retorna o elemento Porto Alegre
75 |
cidades[1] ➜ retorna o elemento Pelotas
76 |
retirada = cidades.shift( ) ➜ remove o primeiro elemento do array e o armazena na variável retirada
77 |
cidades[0] ➜ retorna o elemento Pelotas
78 |
IMPORTANTE: As operações de exclusão de elementos são atribuídas à variável retirada. Essa variável recebe o elemento removido do array.
79 |
Tamanho do vetor
80 |
Na manipulação de vetores temos uma propriedade muito importante chamada length. Essa propriedade retorna o número de elementos do vetor (tamanho do vetor). Ela é usada quando queremos percorrer a lista, realizar exclusões ou exibir o número total de elementos/itens do vetor. Para percorrer e exibir o número de elementos de um vetor, podemos utilzar o comando for.
81 |
Exemplo:
82 |
83 |
No comando for temos a variável de controle (i) iniciando com 0. Na condição temos i menor que cidades.length. O tamanho do vetor é igual a 3, pois tem 3 elementos/itens. Então na primeira passagem pela condição, temos 0 < 3. Com a condição resultando em true, a variável acumulador irá armazenar o primeiro elemento do vetor, pois em cidade[0] temos o elemento "Pelotas". Em seguida o i é incrementado e passa de 0 para 1, e novamente entra na parte da condição. Segue esse loop até a condição resultar em false.
84 |
Em seguida temos saída através do método alert().
85 |
86 |
toString( ) e join( )
87 |
Outra forma de exibir o conteúdo do vetor é pelo uso dos métodos toString( ) e join( ). Eles convertem o conteúdo do vetor em uma string.
88 |
No método toString( ) uma vírgula é inserida entre os elementos.
89 |
90 |
91 |
No método join( ) podemos indicar qual caractere vai separar os itens. Referenciar o nome do vetor seguido pelo método join( ) sem o caractere de separação gera uma saída idêntica à toString( ).
92 |
93 |
94 |
Localizar Conteúdo
95 |
Como alguns vetores são grandes, temos alguns métodos que nos auxiliam no controle de seu conteúdo. Iremos ver dois métodos que verificam a existência ou não de um conteúdo do vetor.
96 |
No indexOf( ), a busca ocorre a partir do início do vetor. Já no lastIndexOf( ) a busca é do final até o seu início. Caso o conteúdo exista no vetor, o número do índice é retornado. Caso o conteúdo pesquisado não exista no vetor, o valor -1 é devolvido pelo método.
97 |
Exemplo:
98 |
var idades = [10, 17, 14, 19, 10, 11]
99 |
alert(idades.indexOf(17)) ➜ retorna 1
100 |
alert(idades.lastIndexOf(10)) ➜ retorna 4 (o índice do último 10)
101 |
alert(idades.indexOf(9)) ➜ retorna -1
102 |
Vetores de Objetos
103 |
Um objeto é uma coleção de dados e funcionalidades (que geralmente consistem em diversas variáveis e funções). Tais dados e funcionalidades também são chamadas de propriedades e métodos quando estão dentro de objetos.
104 |
Exemplo de um objeto:
105 |
106 |
Como usar um objeto ?
107 |
Caso você precise usar algum atributo/propriedade do objeto, basta digitar o nome do objeto seguido de ponto (.) e o nome do atributo ou do método.
108 |
Ex: pessoa.nome retornará a string "Joca".
109 |
Um vetor pode conter uma lista de nomes ou números. Também é possível definir um vetor que contenha uma lista de objetos com alguns atributos. Um vetor de objetos é declarado da mesma forma que um vetor simples. Na inserção de itens no vetor devem-se indicar os atributos que o compõem.
110 |
Exemplo de um vetor de objeto:
111 |
112 |
Definir um vetor/array de objetos nos permite realizar operações sobre esse vetor.
113 |
Exemplo:
114 |
115 |
No exemplo acimo o vetor é declarado, logo em seguida é inserido dois veículos através do comando push. Note que os objetos sempre ficam dentro de chaves { }. O comando for foi usado para percorrer os elementos do vetor e através do comando console.log foi apresentado o conteúdo.
116 |
Pesquisar e Filtrar Dados
117 |
Após possuírmos um conjunto de dados em uma lista, podemos realizar algumas operações sobre as listas, como a pesquisa ou o filtro de dados.
118 |
Exemplo de filtro de dados: obtenção do nome e da nota dos alunos aprovados.
119 |
Nos programas que realizam essas operações um cuidado especial é necessário: o de informar quando a pesquisa não encontrou os dados. Imagine que você está em um site de clips/músicas e existe um campo para pesquisar pelo título da música. Você digita uma palavra-chave e fica aguardando a lista das músicas/clips. Caso o site não localize, é necessário retornar essa informação.
120 |
Observe o código a seguir:
121 |
122 |
Como fazer esse script apresentar uma mensagem indicando que não há idades maiores que 18 na lista ?
123 |
A solução para esse cenário é utilizar uma variável de controle (flag ou sinalizador). Essa variável recebe um valor antes do for, caso a condição do if seja verdadeira, a flag muda de valor. Após o for, é verificado se a flag mantém o valor inicial.
124 |
125 |
IMPORTANTE: Também poderíamos atribuir 0 (false) e 1 (true) para a variável flag.
126 |
Classificar os Itens do Vetor
127 |
Javascript dispõe do método sort( ) para classificar os itens de um vetor em ordem alfabética crescente. O método reverse( ) inverte a ordem dos elementos de um Array.
128 |
IMPORTANTE: O reverse( ) não ordena de forma alfabética decrescente, ele inverte a ordem dos elementos de um Array, colocando o último elemento em primeiro, o penúltimo em segundo e assim sucessivamente.
129 |
130 |
131 |
Caso seja necessário manter a lista na ordem original, é possível criar uma cópia da lista/vetor original através do método slice( ). Sem parâmetros, o slice( ) obtém uma cópia com todos os elementos do vetor original.
132 |
133 |
Um detalhe importante sobre as ordenações de listas é que os dados dos vetores/arrays são classificados como strings, mesmo que seu conteúdo seja formado por números. Quando são números, a comparação é realizada da esquerda pra direita, caractere por caractere. Primeiramente é comparado o primeiro caractere, depois o segundo e assim por diante.
134 |
135 |
Para os números serem organizados em ordem crescente deve-se passar uma função (callback) como parâmetro em sort( ).
136 |
Essa função compara cada elemento do vetor. Os dois parâmetro a e b são substituidos por dois elementos de dentro do vetor e são comparados. É realizado três comparações, se a é maior que b, se a é menor que b ou se a é igual a b. O resultado do método sort( ) com a função(como parâmentro) é um Array ordenado em ordem crescente.
137 |
138 |
Método every( )
139 |
O método every( ) testa se todos os elementos do array passam pelo teste implementado pela função fornecida.
140 |
A partir do ES5, o tipo Array do JavaScript fornece um método chamado every( ) que testa todos os elementos do array.
141 |
O exemplo a seguir usa o every() para verificar se cada elemento do array numbers é maior que zero:
142 |
143 |
O exemplo a seguir testa se todos os elementos do array são números pares.
144 |
145 |
Por outro lado, o exemplo a seguir testa se todos os elementos do array são números ímpares.
146 |
147 |
No exemplo abaixo, o metodo every() verifica se cada item dentro do vetor numeros1 é igual a cada item dentro do vetor numeros2.
148 |
149 |
Exercícios
150 |
a ) Faça um programa que leia um vetor de 5 números inteiros e mostre-os.
151 |
152 |
153 |
Primeiramente temos o vetor numeros, onde serão inseridos os números digitados. Em seguida temos todas as referências que farão a ligação com os elementos Html através dos id's. O querySelector é parecido com o getElementById, porém no querySelector devemos informar se o que pegaremos (dentro do HTML) será um id ou uma class. Se for um id usamos o hash ( # ) e se for uma class usamos o ponto ( . ).
154 |
Em seguida temos a função adicionarNumeros. No início da função, capturamos através do comando value os valores que foram digitados dentro dos input's no Html e os convertemos em números com o comando Number. Cada valor é inserido em uma variável.
155 |
Todos os valores são inseridos dentro do vetor numeros através do comando push. O push tem a função de inserir um elemento no final do vetor. Quando são inseridos diversos valores de uma só vez, a ordem fica da forma em que foram colocados no push.
156 |
Dentro do Html temos um h3 que tem uma tag span com o id="outSaida". Na tag span é onde ficará localizado o conteúdo com os elementos do array. Esse conteúdo é inserido através do comando innerHTML. O método join() tem a função de exibir o conteúdo do vetor. No método join() podemos indicar qual caractere vai separar os itens.
157 |
O botão Adicionar que se encontra dentro do Html possui um id="btAdicionar". O método addEventListener() executa uma função de acordo com algum evento. Nesse caso ele irá executar a função adicionarNumeros caso o evento de click ocorra no botão Adicionar.
158 |
159 |
b ) Faça um programa que leia um vetor de 5 números reais e mostre-os na ordem inversa.
160 |
161 |
162 |
Primeiramente temos o vetor numeros, onde serão inseridos os números digitados. Em seguida temos todas as referências que farão a ligação com os elementos Html através dos id's. O querySelector é parecido com o getElementById, porém no querySelector devemos informar se o que pegaremos (dentro do HTML) será um id ou uma class. Se for um id usamos o hash ( # ) e se for uma class usamos o ponto ( . ).
163 |
Em seguida temos a função adicionarNumero. No início da função, capturamos através do comando value os valores que foram digitados dentro dos input's no Html e os convertemos em números com o comando Number. Cada valor é inserido em uma variável.
164 |
Todos os valores são inseridos dentro do vetor numeros através do comando push. O push tem a função de inserir um elemento no final do vetor. Quando são inseridos diversos valores de uma só vez, a ordem fica da forma em que foram colocados no push.
165 |
Em seguida temos o método reverse() que irá inverter a ordem dos elementos do array. O último elemento será o primeiro, o penúltimo será o segundo e assim sucessivamente.
166 |
Dentro do Html temos um h3 que tem uma tag span com o id="outSaida". Na tag span é onde ficará localizado o conteúdo com os elementos do array. Esse conteúdo é inserido através do comando innerHTML. O método join() tem a função de exibir o conteúdo do vetor. No método join() podemos indicar qual caractere vai separar os itens.
167 |
O botão Adicionar que se encontra dentro do Html possui um id="btAdicionar". O método addEventListener() executa uma função de acordo com algum evento. Nesse caso ele irá executar a função adicionarNumero caso o evento de click ocorra no botão Adicionar.
168 |
169 |
c ) Faça um programa que leia 4 notas, mostre as notas e a média na tela.
170 |
171 |
172 |
Primeiramente temos o vetor notas, onde serão inseridos os números digitados. Em seguida temos todas as referências que farão a ligação com os elementos Html através dos id's. O querySelector é parecido com o getElementById, porém no querySelector devemos informar se o que pegaremos (dentro do HTML) será um id ou uma class. Se for um id usamos o hash ( # ) e se for uma class usamos o ponto ( . ).
173 |
Em seguida temos a função calcularMedia. No início da função, capturamos através do comando value os valores que foram digitados dentro dos input's no Html e os convertemos em números com o comando Number. Cada valor é inserido em uma variável.
174 |
Todos os valores são inseridos dentro do vetor notas através do comando push. O push tem a função de inserir um elemento no final do vetor. Quando são inseridos diversos valores de uma só vez, a ordem fica da forma em que foram colocados no push.
175 |
Em seguida temos a criação da variável soma, que será uma variável acumuladora.
176 |
Depois temos uma estrutura de repetição for, com o objetivo de percorrer o vetor. A variável acumuladora soma recebe em cada volta do loop o elemento de cada índice do vetor e os soma. No final temos as 4 notas somadas e armazenadas na variável soma.
177 |
Após o for, temos o cálculo da média. Soma dividido por 4. O resultado do cálculo é armazenado na variável soma.
178 |
Dentro do elemento Html que recebeu o id="outNotas" serão exibidas (através do innerHTML) todas as notas do vetor com a ajuda com método join(). O mesmo acontecerá com o elemento Html que possui o id="outMedia", nesse caso ele exibirá a média seguida de duas casas decimais.
179 |
O botão Calcular Media que se encontra dentro do Html possui um id="btCalcular". O método addEventListener() executa uma função de acordo com algum evento. Nesse caso ele irá executar a função calcularMedia caso o evento de click ocorra no botão Calcular Media.
180 |
181 |
d ) Faça um programa que leia 5 números inteiros e armazene-os num vetor. Armazene os números pares no vetor PAR e os números IMPARES no vetor impar. Imprima os três vetores.
182 |
183 |
184 |
Primeiramente temos a criação de 3 arrays, numeros, pares e impares. Em seguida temos as referências aos elementos Html com o uso do querySelector. Logo após temos a função calcularNumeros. No início da função, os valores digitados dentro dos input's são capturados através do comando value e convertidos em números com o uso do comando Number, em seguida são armazenados em variáveis.
185 |
Através do método push, armazenamos as variáveis no array numeros. A estrutura de repetição for irá percorrer todos os elementos do array numeros. Dentro do loop, temos um if else, se o elemento do array for par, ele será inserido no vetor pares, se o elemento do array for ímpar, ele será inserido no vetor impares.
186 |
Dentro do elemento Html que possui o id="outNumeros", será exibido todos os elementos do array numeros, o mesmo acontecerá com os outros elementos Html, um exibirá o array pares, o outro exibirá o array impares.
187 |
O botão Calcular que se encontra dentro do Html possui um id="btCalcular". O método addEventListener() executa uma função de acordo com algum evento. Nesse caso ele irá executar a função calcularNumeros caso o evento de click ocorra no botão Calcular.
188 |
189 |
e ) Faça um programa que peça o nome do aluno e suas 3 notas. Calcule e armazene num vetor a média de cada aluno. Em seguida, imprima o nome, a média (maior ou igual a 7) e se foi "Aprovado" ou "Reprovado".
190 |
191 |
192 |
193 |
f ) Faça um programa que leia um vetor de 5 números inteiros, mostre a soma, a multiplicação e os números.
194 |
195 |
196 |
197 |
g ) Faça um programa que insira números no vetor, calcule e mostre a soma dos quadrados dos elementos do vetor.
198 |
199 |
200 |
201 |
h ) Escreva um programa de atendimento para uma clínica odontológica. Ao adicionar um paciente, o mesmo irá para o final do vetor e será mostrado na lista. Ao adicionar um paciente como urgência, o mesmo irá para o início do vetor e será o primeiro da lista. Ao clicar no botão atender, o primeiro paciente será inserido no campo "Em Atendimento" e será retirado da lista.
202 |
203 |
204 |
205 |
206 |
207 |
i ) Escreva um programa que leia o modelo e o preço de um carro, e armazene em um vetor. O programa deverá filtrar a lista de carros por preço, onde o cliente informará o valor máximo que possui.
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
j ) Escreva um programa que ao inserir números no vetor, informe se os mesmos estão em ordem crescente ou não. O programa deverá impedir a inserção de números repetidos.
216 |
217 |
218 |
219 |
220 |
l ) Escreva um programa que leia um candidato, sua quantidade de acertos e os insira em um vetor. Ao clicar no botão Aprovados 2ª Etapa, o programa deverá receber a quantidade de acertos necessários para a aprovação dos candidatos.
Essa documentação foi criada com o intuito de explicar a linguagem JavaScript da maneira mais simples possível e sem termos técnicos. Cada exercício será explicado passo a passo.
Para iniciarmos o estudo da linguagem JavaScript, primeiramente iremos conhecer alguns conceitos importantes, como Lógica de Programação, Algoritmos, Entrada de Dados, Processamento de Dados, Saída de Dados, Editores de Códigos, Variáveis, Constantes, Comentários, Tipos de Dados, Operadores, Conversões de Dados e também aprenderemos um pouco sobre a origem da linguagem JavaScript.
44 |
Lógica de Programação e Algoritmos
45 |
Lógica de programação é a organização de uma sequência de instruções voltadas à resolução de um problema. Ela é importante porque é quem nos dá as ferramentas para executar o processo de criação de um algoritmo. Em programação, algoritmos são um conjunto de instruções que um software ou aplicação deve seguir para executar uma tarefa, resolver um problema ou chegar a um objetivo distinto.
46 |
Algoritmos são sequências de passos que seguimos com a intenção de atingir um objetivo, pode ser desde atravessar uma rua, fazer um bolo ou definir qual critério usar para aprovar ou reprovar um aluno, por exemplo. Pense em um algoritmo como uma receita de bolo. Uma receita de bolo que nada mais é do que uma sequência lógica de etapas que, quando realizadas da maneira correta, resultam em uma deliciosa sobremesa.
47 |
Visualize a seguinte situação em que você precise fazer um bolo:
48 |
➜ Selecionar os ingredientes da receita
49 |
➜ Selecionar tigela
50 |
➜ Colocar farinha, de acordo com a medida
51 |
➜ Selecionar ovos
52 |
➜ Colocar manteiga e açúcar a gosto
53 |
➜ Colocar leite
54 |
➜ Misturar todos os ingredientes na tigela
55 |
➜ Despejar a massa na forma
56 |
➜ Levar ao forno
57 |
➜ Aguardar 40 minutos
58 |
➜ Retirar do forno
59 |
➜ Servir o bolo
60 |
Essa lógica é aplicada a qualquer coisa que fazemos diariamente e muitas das vezes não nos damos conta.
61 |
Veja esse exemplo de um algoritmo de cálculo da média, em que precisa-se analisar as notas de 3 bimestres para a disciplina de matemática e verificar se o aluno foi aprovado ou reprovado para uma média maior ou igual a 7:
62 |
➜ Obter a nota do 1º bimestre
63 |
➜ Obter a nota do 2º bimestre
64 |
➜ Obter a nota do 3º bimestre
65 |
➜ Realizar o cálculo da média para cada aluno (maior ou igual a 7 para aprovação)
66 |
➜ Informar se o aluno foi “aprovado ou reprovado”
67 |
➜ Informar a média obtida pelo aluno
68 |
Exemplo de um algoritmo para sair com o carro:
69 |
➜ Abrir a porta do carro
70 |
➜ Entrar no carro
71 |
➜ Ligar o carro
72 |
➜ Abrir o portão da garagem
73 |
➜ Engatar a marcha ré
74 |
➜ Sair com o carro da garagem
75 |
➜ Fechar o portão
76 |
➜ Engatar a primeira marcha
77 |
➜ Dirigir ao destino
78 |
Em linhas gerais, lógica de programação é todo conjunto de regras e conceitos que precisamos aplicar para criar códigos que serão interpretados e executados por um computador. Para conseguirmos instruir o computador a fazer alguma coisa, precisamos de uma linguagem de programação, que é um meio estruturado para passar instruções para a máquina. Estudar algoritmos e lógica de programação é o passo inicial para quem deseja entrar no mundo de desenvolvimento de software e começar a criar suas primeiras aplicações.
79 |
Origem da linguagem JavaScript
80 |
JavaScript foi criada pela Netscape Communications Corporation junto com a Sun Microsystems. Sua primeira versão foi lançada em 1995. Em 1996 a Netscape decidiu entregar o Javascript para a ECMA (que é uma associação dedicada à padronização de sistemas de informação). Em 1977, foi lançada a primeira edição da linguagem gerenciada por essa associação.
81 |
Javascript possui um importante papel no processo de desenvolvimento de páginas para internet, junto com HTML e CSS. Javascript é utilizado para definir o comportamento dos elementos da página. Os códigos escritos, também chamados de scripts, são interpretados diretamente pelos navegadores web.
82 |
O JavaScript não deve ser confundido com a linguagem de programação Java. Apesar de "Java" e "JavaScript" serem marcas registradas da Oracle nos EUA e em outros países, essas duas linguagens de programação são diferentes em sintaxe, semântica e casos de uso.
83 |
Editores de Códigos
84 |
Sabemos que programar não é tão simples quanto pensam por aí, mas existem ferramentas que podem facilitar e otimizar o dia a dia dos desenvolvedores, dentre as quais uma das mais importantes são os editores de código. Os editores de códigos são ferramentas que auxiliam na construção de projetos e são melhores que editores de texto tradicionais. As principais diferenças entre eles e os editores de texto tradicionais são as funcionalidades adicionais para gerenciar e editar código-fonte. Existem vários editores de código disponíveis no mercado atualmente e iremos listar alguns dos mais populares.
Um dos mais conhecidos do mercado, este editor foi lançado em 2015 pela Microsoft e se trata de um editor de código destinado ao desenvolvimento de aplicações em diversos contextos. O VSCode é uma ferramenta leve e multiplataforma e está disponível para Windows, Mac OS e Linux. Este editor de código atende a uma quantidade enorme de tecnologias, além de oferecer suporte para mais de 30 linguagens de programação, como JavaScript, C#, C++, PHP, Java, HTML, R, CSS, SQL, Markdown, TypeScript, LESS, SASS, Node.js e Python, bem como para outros formatos de arquivos comuns. Para isso, o VSCode utiliza o conceito de extensões, as quais potencializam muito as capacidades desse IDE. O VSCode é gratuito, open source e tem seu código disponibilizado no GitHub, o que permite que você contribua com seu desenvolvimento.
O Codespace é um editor de código online colaborativo, baseado em navegador da Microsoft e Github. Este editor de código tem suporte para repositórios Git, extensões, além de contar com uma interface de linha de comando integrada para que seja possível editar, executar e depurar seus aplicativos de qualquer dispositivo. Isso possibilita que você trabalhe em qualquer lugar, além de tornar a colaboração com outros desenvolvedores mais fácil. Apesar de a idealizadora Microsoft planejar oferecer preços acessíveis conforme o uso de ambientes de nuvem, a funcionalidade de edição de código sempre será gratuita.
O Atom também é um editor de código open source e possui versões para várias plataformas, como Windows, Mac e Linux. Entre os diversos recursos que este software possui está o “autocomplete”, assim como a maioria dos editores, o que é extremamente útil no desenvolvimento de um projeto. Você pode ver por aí que o Atom pode ser considerado um editor de código “hackeável”, isso porque nele você pode mudar qualquer coisa do editor, já que foi desenvolvido em JavaScript, CSS e Node.js, o que o torna uma ferramenta bastante customizável.
Este editor é perfeito para iniciantes, embora não muito recomendado para os que desejam softwares mais robustos e profissionais. A interface do Notepad++ é bastante intuitiva e simples de usar, o que facilita seu uso e o dia a dia. Apesar de não ser um editor robusto, nele você encontra funções mais avançadas, o que pode ser atrativo para alguns programadores.
93 |
Entrada, Processamento e Saída de Dados
94 |
Em lógica de programação, o roteiro para resolver a maioria dos programas é:
95 |
a) Leia os dados de entrada
96 |
b) Realize o processamento dos dados
97 |
c) Apresente a saída dos dados
98 |
Em programas maiores essas etapas se misturam.
99 |
A etapa da entrada de dados consiste em pedir do usuário alguma informação, como por exemplo, digitar seu nome ou data de nascimento. Após essa etapa, geralmente ocorre a etapa de processamento desses dados, como calcular se você é maior de idade. E por fim, o programa apresenta a saída desse processamento, através da exibição das informações.
100 |
Para realizar essas etapas, as linguagens de programação utilizam comandos. Há vários comandos para realizar a entrada de dados. Na etapa de processamento, geralmente se trabalha com variáveis para realizar cálculos. E na etapa de saída são utilizados alguns comandos que mostram mensagens para o usuário.
101 |
Variáveis e Constantes
102 |
Uma variável é um espaço na memória do computador destinado a um dado que é alterado durante a execução do algoritmo. Você pode imaginar que as variáveis são como “caixas” destinadas a guardar algo.
103 |
104 |
105 |
São exemplos de variáveis manipuladas em um programa: a descrição, a quantidade e o preço de um produto, ou então, o nome, o salário e a altura de uma pessoa. As variáveis devem possuir um nome e seguir algumas regras de nomenclatura.
➜ Utilizar palavras reservadas da linguagem: function, var, new, for, return.
112 |
Variáveis com letras maiúsculas são diferentes de variáveis com letras minúsculas. Existe um padrão chamado CAMELCASE, que é usado em palavras compostas. Trata-se de, no início da segunda palavra, usar uma letra maiúscula. Exemplo: valorTotal, primeiraNota, dataVenda.
113 |
Para fazer com que uma variável receba um dado, utiliza-se o conceito de atribuição, que é feito através do sinal de igual "=". É possível declarar uma variável e atribuir-lhe diretamente um valor.
114 |
115 |
Como citado acima, o dado fica guardando dentro da variável como se fosse em uma caixa.
116 |
Constantes: diferente das variáveis, as contantes não podem ser modificadas. Elas são usadas em situações em que alguns dados nunca sofrerão alterações, como por exemplo o valor de PI.
117 |
118 |
Comentários
119 |
Praticamente todas as linguagens de programação disponibilizam esta funcionalidade. Um comentário nada mais é que uma informação digitada dentro do seu código fonte que não altera nada no código. Dessa forma, os comentários ficam visíveis apenas para desenvolvedores. Fazer um comentário permite que o desenvolvedor possa deixar registradas algumas informações importantes. Este é um recurso muito útil, principalmente quando se trabalha em equipes de desenvolvimento, onde outras pessoas precisarão entender e utilizar o código fonte.
120 |
Comentários em HTML
121 |
122 |
Comentários em CSS
123 |
124 |
Comentários em JAVASCRIPT
125 |
126 |
Exemplo:
127 |
128 |
Tipos de Dados
129 |
As variáveis em um programa podem ser de diversos tipos. Em JavaScript, os tipos principais de dados são strings (textos), números e valores booleanos (true ou false). Cada tipo de variável possui operações e comportamentos específicos.
130 |
131 |
IMPORTANTE: Em JavaScript não é necessário definir o tipo da variável na hora de declarar. O tipo é definido no momento da atribuição dos valores. A atribuição de um conteúdo entre aspas (aspas simples ou duplas) cria uma variável do tipo String. Para variáveis numéricas, não devem ser utilizadas as aspas. As booleanas podem conter os valores true ou false.
132 |
Operadores
133 |
Descreveremos a seguir alguns dos principais tipos de operadores.
134 |
➜ Operadores de atribuição
135 |
➜ Operadores de comparação
136 |
➜ Operadores aritméticos
137 |
➜ Operadores lógicos
138 |
➜ Operadores de string
139 |
Operador de atribuição: um operador de atribuição atribui um valor à variável à esquerda. O operador de atribuição básico é o sinal de igual (=).
140 |
var idade = 18, significa que o valor 18 foi atribuido à variável idade.
141 |
Atribuição de adição: x += 1, é o mesmo que x = x + 1.
142 |
Atribuição de subtração: x -= 1, é o mesmo que x = x - 1.
143 |
Operador de comparação: é quando queremos comparar dois ou mais valores para obtermos a resposta de verdadeiro ou falso. Os operadores de comparações possuem diversos sinais. Alguns deles são: Igual(==), Diferente(!=), Maior que(>), Menor que(<), Maior ou Igual(>=), Menor ou Igual(<=).
144 |
(18 == 18), a resposta dessa comparação é igual a true.
145 |
(5 != 7), a resposta dessa comparação é igual a true.
146 |
(5 > 7), a resposta dessa comparação é igual a false.
147 |
(5 < 7), a resposta dessa comparação é igual a true.
148 |
(8 >= 7), a resposta dessa comparação é igual a true.
149 |
150 |
Operador aritmético: os operadores aritméticos padrão são os de soma (+), subtração (-), multiplicação (*), divisão (/), módulo (%), exponenciação (**), incremento (++) e decremento(--).
151 |
5 + 3, retorna 8.
152 |
4 - 2, retorna 2.
153 |
6 * 2, retorna 12.
154 |
8 / 4, retorna 2.
155 |
7 % 2, retorna 1 pois o resto da divisão entre 7 e 2 é igual a 1.
156 |
2 ** 3, retorna 8. É o mesmo que 2 * 2 * 2.
157 |
++2, retorna 3. É o mesmo que 2 + 1.
158 |
--2, retorna 1. É o mesmo que 2 - 1.
159 |
Operador lógico: o javascript fornece 3 operadores lógicos.
160 |
NÃO (NOT) - !
161 |
OU (OR) - ||
162 |
E (AND) - &&
163 |
Os operadores lógicos são importantes no JavaScript porque permitem comparar variáveis e fazer algo com base no resultado dessa comparação. Por exemplo, se o resultado da comparação for verdadeiro, você executa um bloco de código, se for falso, você executa outro bloco de código.
164 |
No operador E (AND - &&) - só vai resultar true quando os dois elementos comparados forem true.
165 |
true && true, retorna true
166 |
true && false, retorna false
167 |
false && true, retorna false
168 |
false && (3 == 4), retorna false
169 |
No operador OU (OR - ||) - só vai resultar false quando os dois elementos comparados forem false.
170 |
true || true, retorna true
171 |
true || false, retorna true
172 |
false || true, retorna true
173 |
false || (3 == 4), retorna false
174 |
No operador NÃO (NOT - !) - retorna o inverso, se for true retorna false e se for false retorna true.
175 |
!true, retorna false
176 |
!false, retorna true
177 |
Operador de string: o operador de concatenação (+) concatena dois valores string, retornando outra string que é a união dos dois operandos.
178 |
Ex: ("minha " + "string"), exibe a string "minha string".
179 |
Conversões de Tipos
180 |
Em JavaScript podemos realizar algumas operações envolvendo tipos diferentes, como números e strings.
181 |
"20" * 2 ➜ multiplicação entre uma string e um número, resulta no número 40
182 |
"20" / 2 ➜ divisão entre uma string e um número, resulta no número 10
183 |
"20" - 2 ➜ subtração entre uma string e um número, resulta no número 18
184 |
"20" + 2 ➜ porém a adição entre uma string e um número, resulta no número 202 (concatenação)
185 |
Para resolver esse problema, precisamos converter o texto (string) em número. Isso pode ser feito pelos métodos Number(), parseInt() e parseDouble().
186 |
var a = "20" ➜ aqui a variável "a" é declarada com uma string de valor "20"
187 |
Number(a) ➜ aqui o método Number() é usado para converter o valor de string para número, adicionando a variável "a" dentro do método.
188 |
Saída de Dados Com Alert
189 |
Agora iremos colocar a mão na massa e realizar nosso primeiro programa. Usaremos o editor Visual Studio Code, mas você pode instalar qualquer um dos editores de códigos que citamos mais acima.
190 |
Primeiramente iremos criar uma pasta que armazenará os arquivos necessários. Será criado no Desktop, porém pode ser locado em qualquer lugar, como nos Documentos por exemplo.
191 |
192 |
Ao abrir o editor Visual Studio Code, clice em "Arquivo" e depois em "Abrir Pasta". Selecione a pasta criada no Desktop.
193 |
194 |
Após a pasta ser aberta, clique "Novo Arquivo" e escreva "index.html".
195 |
196 |
Index é o nome padrão para arquivos em HTML e o html no final é a extensão.
197 |
198 |
Alert é um método de saída de dados, que mostra no navegador o que foi escrito entre as aspas. Certifique-se de ter digitado os comandos da mesma forma como no exemplo e não esqueça de salvar. JavaScript é case sensitive, ou seja, diferencia letras maiúsculas de minúsculas.
199 |
200 |
Abra a pasta que você criou para armazenar o projeto e clique no arquivo index.html. Você também pode clicar com o botão direito do mouse no arquivo, selecionar "abrir com" e escolher o navegador que você quiser.
201 |
202 |
Ao executar o programa, a mensagem que você escreveu dentro das aspas é exibida em uma caixa no centro da tela. Se a caixa de alerta não foi exibida, verifique cuidadosamente se os comandos digitados estão corretos.
203 |
204 |
Entrada de Dados Com Prompt
205 |
O método prompt() é uma das formas que o programa recebe dados do usuário. Ele exibe uma caixa com um texto e um espaço para digitação. Nesse próximo exemplo iremos usar o prompt (entrada de dados) e o alert (saída de dados).
206 |
Na linha 2, o promp é armazenado dentro da variável nome. Na linha 3, temos uma string "Meu nome é: " concatenado a variável nome, através do sinal de adição (+).
207 |
208 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
209 |
210 |
Após digitar o nome e clicar no botão OK, a segunda caixa irá abrir informando o nome digitado anteriormente, conforme foi escrito no comando alert (saída de dados).
211 |
212 |
Outros comandos importantes
213 |
➜ Number()
214 |
Por padrão, o método prompt (entrada de dados) retorna uma string, não importando se o valor digitado dentro foi um número ou uma string. Sempre vai retornar uma string. Então para transformar o valor digitado em número de fato, devemos usar alguns métodos de conversão. Nos nossos exemplos sempre usaremos o Number() para converter strings em números.
215 |
➜ toFixed()
216 |
O método toFixed() acrescenta casas decimais após um ponto (.). O número dentro do método toFixed indica o número de casas decimais que aparecerá. Ex: Caso o método toFixed(2) seja aplicado ao número 33, o seu resultado será 33.00.
217 |
var valor = 33
218 |
valor.toFixed(2), o resultado é igual a 33.00
219 |
➜ \n (quebra de linha)
220 |
O comando \n deve estar dentro da string. Esse comando serve para quebrar a linha. Tudo que vier depois do \n será escrito na linha abaixo.
221 |
Exercícios
222 |
Agora iremos realizar alguns exercícios envolvendo os temas estudados até agora. Para uma melhor fixação refaça os exercícios mais de uma vez, e se possível sem olhar os resultados. Aprender programação é similar a treinar um esporte, quanto mais você exercitar mais fácil se torna.
223 |
a ) Elabore um programa que leia um número, calcule o seu dobro e mostre o resultado na saída.
224 |
b ) Elabore um programa que leia dois números, calcule a soma desses números e mostre o resultado na saída.
225 |
c ) Elabore um programa que leia o valor de um jantar, calcule a taxa do garçom (10%), calcule o valor total a ser pago e mostre o resultado na saída.
226 |
d ) Elabore um programa que leia a duração de uma viagem em dias e horas. Calcule a duração total da viagem em horas e mostre o resultado na saída.
227 |
e ) Elabore um programa que leia um número. Calcule os seus vizinhos (número anterior e posterior) e mostre o resultado na saída.
228 |
f ) Elabore um programa para uma pizzaria, o qual leia o valor total de uma conta e quantos clientes irão pagar. Calcule o valor a ser pago por cada cliente e mostre o resultado na saída.
229 |
Resolução dos Exercícios
230 |
a ) Na linha 2 o método prompt é colocado dentro da variável numero. Na linha 4 a variável dobro recebe uma operação de multiplicação (numero * 2). Na linha 6 o método alert (saída de dados) mostra a string ("O dobro é: ") concatenada (+) com a variável dobro.
231 |
232 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
233 |
234 |
A segunda caixa será a saída de dados, conforme escrito no comando (método) alert.
235 |
236 |
b ) Por padrão, o método prompt (entrada de dados) retorna uma string, não importando se o valor digitado dentro foi um número ou uma string. Sempre vai retornar uma string. Então para transformar o valor digitado em número de fato, devemos usar alguns método de conversão. Nesse caso usaremo o método Number().
237 |
Na linha 2 e 3, através do método Number(), convertemos o valor digitado para número. Na linha 5, a variável soma recebe os dois números e realiza uma operação de adição. Na linha 7, o método alert (saída de dados) mostra a string ("A soma é: ") concatenada com a variável soma.
238 |
239 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
240 |
241 |
Aqui temos outra entrada de dados.
242 |
243 |
E aqui a saída de dados, conforme escrito no comando (método) alert.
244 |
245 |
c ) Na linha 2, temos a entrada de dados (promp) e o valor recebido sendo convertido em um número através do método Number(). Na linha 4, a variável garcom está recebendo uma operação de adição (valorJantar * 0.10). Por que 0.10 ? Por que esse valor significa 10% do garcom (10 / 100 = 0.10). Na linha 6, temos a variável total que recebe uma operação de adição (valorJantar + garcom). Na linha 8, é apresentada a saída de dados através do método alert.
246 |
Primeiro temos o método toFixed(2), que acrescenta duas casas decimais após um ponto (.). Caso o método seja aplicado ao número 33, o seu resultado será 33.00. O número dentro do método toFixed indica o número de casas decimais que aparecerá. O segundo comando é o \n que está dentro da string. Esse comando serve para quebrar a linha. Tudo que vier depois do \n será escrito na linha abaixo.
247 |
248 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
249 |
250 |
Aqui temos a saída de dados, conforme escrito no comando (método) alert. Notem que a quebra de linha aconteceu devido o comando \n.
251 |
252 |
d ) Nas linhas 2 e 3, temos duas entradas de dados através do método prompt() e seus valores são convertidos para número através do método Number(). Na linha 5, a variável total recebe uma expressão, onde primeiro é resolvido o que está entre parênteses. Na linha 7, é apresentada a saída de dados através do método alert().
253 |
254 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
255 |
256 |
Aqui temos outra entrada de dados.
257 |
258 |
Aqui temos a saída de dados, conforme escrito no comando (método) alert.
259 |
260 |
e ) Na linha 2, temos a entrada de dados prompt() que é convertida em número através do Number(). Na linha 4 e 5, temos duas variáveis que recebem operações. Na linha 7, temos a saída de dados alert(). Os valores dentro do alert foram quebrados com o "enter" para caber na tela, isso não altera a saída de dados no navegador.
261 |
262 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
263 |
264 |
Aqui temos a saída de dados, conforme escrito no comando (método) alert. As linhas foram quebradas usando o comando \n.
265 |
266 |
f ) Na linha 2 e 4, temos uma entrada de dados prompt() onde o valor recebido é convertido em número através do método Number(). Na linha 6, temos a variável valorPorCliente recebendo uma operação de divisão. Na linha 8, temos a saída de dados alert(), onde novamente o método toFixed(2) é usado para acrescentar 2 casas decimais após um número. Temos também o comando \n para quebrar a linha.
267 |
268 |
Ao abrir o programa no navegador, a primeira caixa apresentada será a de entrada de dados (prompt).
269 |
270 |
Aqui temos novamente uma entrada de dados.
271 |
272 |
Aqui temos a saída de dados, conforme escrito no comando (método) alert. As linhas foram quebradas usando o comando \n.
13 | 
