Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yasminbrazasilva/exercicioslinguagensdeprogramacao
Exercícios para obtenção parcial de nota da matéria de Linguagens de Programação do 3º semestre de ADS
https://github.com/yasminbrazasilva/exercicioslinguagensdeprogramacao
css html javascript
Last synced: 23 days ago
JSON representation
Exercícios para obtenção parcial de nota da matéria de Linguagens de Programação do 3º semestre de ADS
- Host: GitHub
- URL: https://github.com/yasminbrazasilva/exercicioslinguagensdeprogramacao
- Owner: YasminBrazASilva
- Created: 2024-04-04T23:30:52.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-17T22:47:37.000Z (8 months ago)
- Last Synced: 2024-05-18T19:35:19.153Z (8 months ago)
- Topics: css, html, javascript
- Language: HTML
- Homepage:
- Size: 1.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ExerciciosLinguagensDeProgramacao
Exercícios para obtenção parcial de nota da matéria de Linguagens de Programação do 3º semestre de ADS
AC1
## AULA 01
1. Escreva um programa que declare duas variáveis numéricas e realize as quatro
operações matemáticas básicas (+, -, *, /). Imprima os resultados no console.
Resolução: [Exercicio01_01.js](Aula01/Exercicio01_01.js)
2. Faça um programa que mostre os números impares em um intervalo de 0 a 100.
Resolução: [Exercicio01_02.js](Aula01/Exercicio01_02.js)
3. Faça um programa que mostre a quantidade de caracteres para o texto “Disciplina de
Programação para web”.
Resolução: [Exercicio01_03.js](Aula01/Exercicio01_03.js)
4. Faça um programa que recebe o nome de uma variável e mostre o
<>.<<último nome>>@facens.br
Por exemplo:
A variável nome possui o conteúdo “Edson Martin Feitosa”.
Deve mostrar [email protected]
Resolução: [Exercicio01_04.js](Aula01/Exercicio01_04.js)
5. Escreva um programa que imprima os números de 1 a 10 no console usando um loop.
Os número devem ser separados com um traço, ex.: 1 – 2 – 3 - ... – 10. Observação:
após o número 10 não pode ter um traço.
Resolução: [Exercicio01_05.js](Aula01/Exercicio01_05.js)
6. Faça uma função que mostre o dobro do número passado. Caso o número seja menor
ou igual a zero deve mostrar a mensagem “Só é aceito números positivos maiores que
zero”.
Resolução: [Exercicio01_06.js](Aula01/Exercicio01_06.js)
7. Escreva uma função que receba uma string como argumento e retorne a string
invertida.
Resolução: [Exercicio01_07.js](Aula01/Exercicio01_07.js)
8. Escreva uma função que recebe uma string como argumento e retorna o número de
vogais presentes nessa string. Considere apenas vogais minúsculas (a, e, i, o, u).
Resolução: [Exercicio01_08.js](Aula01/Exercicio01_08.js)
9. Escreva uma função que recebe um endereço de e-mail como argumento e retorna
true se o e-mail for válido ou false caso contrário. Um e-mail válido deve conter um
único símbolo '@' e pelo menos um ponto '.' após o '@'.
Resolução: [Exercicio01_09.js](Aula01/Exercicio01_09.js)
10. Escreva uma função que verifique se uma determinada string é um palíndromo (ou
seja, pode ser lida da mesma forma tanto da esquerda para a direita quanto da direita
para a esquerda).
Exemplo: arara
Resolução: [Exercicio01_10.js](Aula01/Exercicio01_10.js)
---
## AULA 02
1. Crie uma classe Usuario com os atributos nome e idade. Em seguida, crie um array de
objetos Usuario e crie um novo array apenas com os nomes dos usuários em letras
maiúsculas.
Resolução: [Exercicio02_01.js](Aula02/Exercicio02_01.js)
2. Continuando com a classe Usuario, filtre os usuários com idade superior a 18 anos.
Resolução: [Exercicio02_02.js](Aula02/Exercicio02_02.js)
3. Utilizando a classe Usuario, encontre o primeiro usuário com idade entre 25 e 30 anos.
Resolução: [Exercicio02_03.js](Aula02/Exercicio02_03.js)
4. Crie um array de números e filtre apenas os números pares. Em seguida, mapeie esses
números para o dobro de seus valores.
Resolução: [Exercicio02_04.js](Aula02/Exercicio02_04.js)
5. Crie uma classe Animal com os métodos emitirSom e correr. Crie subclasses Cachorro
e Gato que herdam de Animal e implementam o método emitirSom de forma
diferente para cada classe.
Resolução: [Exercicio02_05.js](Aula02/Exercicio02_05.js)
6. Crie uma classe Livro com os atributos titulo e paginas. Crie um array de objetos Livro
e filtre os livros com mais de 300 páginas.
Resolução: [Exercicio02_06.js](Aula02/Exercicio02_06.js)
7. Crie uma classe Carro com os atributos marca e ano. Crie um array de objetos Carro e
encontre o primeiro carro da marca "Toyota" e filtre os carros fabricados após 2010.
Resolução: [Exercicio02_07.js](Aula02/Exercicio02_07.js)
8. Crie uma classe Produto com os atributos nome e preco. Crie um array de objetos
Produto e mapeie esses produtos para um novo array com os preços aumentados em
10%.
Resolução: [Exercicio02_08.js](Aula02/Exercicio02_08.js)
9. Utilizando a classe Produto, encontre o primeiro produto com preço superior a R$
100,00 e altere o nome desse produto para "Produto Caro".
Resolução: [Exercicio02_09.js](Aula02/Exercicio02_09.js)
10. Crie um array de números e filtre apenas os números divisíveis por 3. Em seguida,
mapeie esses números para o quadrado de seus valores.
Resolução: [Exercicio02_10.js](Aula02/Exercicio02_10.js)
---
## AULA 03
1. Utilizando as tags para a marcação de texto definidas no slide “4- Web02 HTML 5”, crie uma
página html com o formato abaixo:
Resolução: [Exercicio03_01.html](Aula03/Exercicio03_01.html)
2. Crie a seguinte página abaixo:
Resolução: [Exercicio03_02.html](Aula03/Exercicio03_02.html)
3. Monte o código necessário para as seguintes tabelas
Resolução: [Exercicio03_03.html](Aula03/Exercicio03_03.html)
---
## AULA 04
Uma escola infantil de cursos de extensão precisa criar uma página HTML para
listar os cursos que ela possui. Essa página deve mostrar os campos: o nome
do curso, sua descrição, turno/horário, professores e valor.
Cada curso deverá ter um link para o usuário se inscrever, esse enviará para a
tela de inscrição, passando como parâmetro na querystring o código do curso.
Para inscrever-se o usuário precisa informar os dados abaixo:
* Dados do aluno: Nome*, endereço, bairro, cidade, numero, cep,
complemento, estado, telefone, celular*, e-mail* e cor* (Branca, Preta,
Parda, Amarela, Indígena)
* Dados do Pai: Nome*, data nascimento, naturalidade, instrução,
profissão, celular*, email*, cpf* e se é ou não responsável financeiro
* Dados do Mãe: Nome*, data nascimento, naturalidade, instrução,
profissão celular*, email*, cpf* e se é ou não responsável financeiro
* Dados do curso: Nome do curso escolhido*, data de ingresso*, valor* e
forma de pagamento (qtde de parcelas)*
* Os campos em * são obrigatórios e não pode deixar salvar se não
estiver sido preenchido.
Os dados deverão ser salvos em um API (utilize o mockapi.io).
Resolução: [Exercicio04_01.html](Aula04/Exercicio04_01.html), [Exercicio04_02.html](Aula04/Exercicio04_02.html)
---
## AULA 05
Crie uma página HTML e acrescente o texto abaixo em seu body:
---
Cascading Style Sheets (CSS):
Uma Introdução
Cascading Style Sheets (CSS) é uma linguagem de estilo usada para descrever a apresentação de
um documento HTML (ou XML). Enquanto o HTML fornece a estrutura de uma página da web,
o CSS permite que você altere a aparência dessa estrutura.
Com CSS, você pode controlar coisas como cores, fontes, espaçamento, layout e muito mais. A
separação de conteúdo (HTML) e estilo (CSS) é uma prática essencial para o desenvolvimento
web moderno, pois permite uma manutenção mais fácil, reutilização de código e flexibilidade
de design.
Conceitos Fundamentais de CSS:
1. Seletor: Um seletor é usado para selecionar os elementos HTML aos quais você deseja
aplicar estilos. Pode ser um elemento HTML específico, uma classe ou um ID.
2. Propriedades: As propriedades são características individuais que você deseja alterar,
como cor, tamanho da fonte, margens, etc.
3. Valor: Cada propriedade tem um valor associado que define como essa propriedade
deve ser aplicada. Por exemplo, uma cor pode ser definida como "vermelho" ou um
tamanho de fonte como "14px".
4. Declaração: Uma declaração é composta por uma propriedade e um valor, separados
por dois pontos, e terminados por um ponto e vírgula. Por exemplo, color: blue; é uma
declaração que define a cor do texto como azul.
5. Regras CSS: As regras CSS consistem em um seletor e um conjunto de declarações.
Quando um navegador encontra uma regra CSS, ele aplica as declarações associadas aos
elementos correspondentes.
---
Faça as seguintes alterações no texto com o auxílio do CSS
1. Altere a cor do fundo para uma tonalidade de marrom claro, o tamanho do texto para
40px, cor da letra branca, alinhe o texto no centro e a fonte da letra para “Lucida Sans”
2. Ao passar o mouse sobre o título o fundo deve mudar para a cor preta.
3. O conteúdo da página deve ser mostrado com a fonte “Arial”.
4. Todos os parágrafos devem ter um recuo de 20px.
5. O título introdutório da lista ordenada que possui a escrita: “Conceitos Fundamentais
de CSS:” deve estar com seu texto em negrito e a letra deve ter o tamanho de 20x.
6. Os itens da lista devem estar com alinhamento justificado.
7. Todo o conteúdo da página precisa ter um espaçamento superior e inferior de 50px e os
lados precisam ter um espaçamento de 200px
Como exemplo, segue um print de como a página ficará:
Resolução: [Exercicio05_01.html](Aula05/Exercicio05_01.html), [Exercicio05_01.css](Aula05/Exercicio05_01.css)
---
## AULA 06
### Exercício 1
1. Crie uma estrutura HTML básica com uma
para a barra lateral e outra para o conteúdo principal.
2. Estilize a barra lateral com as seguintes propriedades:
* Largura de 20% da largura total da página.
* Altura de 100% da altura da janela de visualização.
* Cor de fundo diferente da cor de fundo do conteúdo principal.
* Conteúdo de texto dentro da barra lateral, como links de navegação.
3. Estilize o conteúdo principal com as seguintes propriedades:
* Largura de 80% da largura total da página.
* Altura de 100% da altura da janela de visualização.
* Cor de fundo diferente da cor de fundo da barra lateral.
* Alinhe o conteúdo no centro vertical e horizontalmente.
4. Use a propriedade float para fazer com que a barra lateral flutue à esquerda e o conteúdo principal flutue à direita.
5. Use a propriedade position para posicionar a barra lateral e o conteúdo principal de forma que eles ocupem toda a altura da janela de visualização, independentemente do tamanho do conteúdo.
6. Teste o layout redimensionando a janela do navegador para verificar se ele é responsivo.
Segue um exemplo:
Resolução: [Exercicio06_01.html](Aula06/Exercicio06_01.html), [Exercicio06_01.css](Aula06/Exercicio06_01.css)
### Exercício 2
Crie uma página HTML que tenha a seguinte estrutura de layout:
1. Um menu superior fixo no topo da página.
2. Um menu lateral à esquerda que ocupe uma parte da largura da página.
3. Uma área de conteúdo à direita do menu lateral.
4. Um rodapé fixo na parte inferior da página.
Use a propriedade position do CSS para posicionar os elementos da seguinte maneira:
* O menu superior deve ter position: fixed; para permanecer fixo no topo da página.
* O menu lateral deve ter position: fixed; para permanecer fixo à esquerda da página.
* A área de conteúdo deve ter margin-left para deixar espaço para o menu lateral e não ser ocultada por ele.
* O rodapé deve ter position: fixed; para permanecer fixo na parte inferior da página.
Personalize os estilos e os conteúdos dos menus e do conteúdo conforme desejar.
Segue um exemplo:
Resolução: [Exercicio06_02.html](Aula06/Exercicio06_02.html), [Exercicio06_02.css](Aula06/Exercicio06_02.css)
AC2
## AULA 07
Com o auxílio do FlexBox faça uma tela de login centralizada no centro da página,
conforme imagem abaixo:
Resolução: [Exercicio07_01.html](Aula07/Exercicio07_01.html), [Exercicio07_01.css](Aula07/Exercicio07_01.css)
---
## AULA 08
1. Crie uma página HTML com um botão e uma
. Quando o botão é clicado, a cor de
fundo da deve mudar para uma cor aleatória.
Obs.: Pode definir uma array com 5 cores que serão trocadas no click do botão. Para a escolha pode-se usar a classe
Math.randow (para escolher randomicamente) e Math.floor (arredondamento).
Resolução: [Exercicio08_01.html](Aula08/Exercicio08_01.html), [Exercicio08_01.css](Aula08/Exercicio08_01.css), [Exercicio08_01.js](Aula08/Exercicio08_01.js)
2. Crie uma página HTML com um campo de entrada de texto, um botão "Adicionar" e
uma lista de tarefas. Quando o usuário digita uma tarefa no campo de entrada e clica
no botão, a tarefa deve ser adicionada à lista.
Obs.: Para criar um novo elemento HTML utiliza-se o método createElement (Ex.: document.createElement('li');) e
para adicionar o novo elemento como filho de uma tag pode-se usar o método appendChild.
Resolução: [Exercicio08_02.html](Aula08/Exercicio08_02.html), [Exercicio08_02.js](Aula08/Exercicio08_02.js)
3. Crie uma página HTML com um botão e um contador. Quando o botão é clicado, o
contador deve ser incrementado em 1 e o valor atualizado na página.
Resolução: [Exercicio08_03.html](Aula08/Exercicio08_03.html), [Exercicio08_03.css](Aula08/Exercicio08_03.css), [Exercicio08_03.js](Aula08/Exercicio08_03.js)
4. Crie uma página HTML que possui 2 campos e 4 botões (Somar, Subtrair, Dividir e
Multiplicar), ao colocar os números e clicar em um dos botões devem realizar a
operação escolhida.
Obs.: Antes de realizar a operação deve validar se foi digitado os números e se o usuário tentar dividir um número
por zero, deve mostrar a mensagem em um alert “Impossível dividir por zero”.
Resolução: [Exercicio08_04.html](Aula08/Exercicio08_04.html), [Exercicio08_04.css](Aula08/Exercicio08_04.css), [Exercicio08_04.js](Aula08/Exercicio08_04.js)
5. Crie uma página HTML que conte o número de palavras em uma frase ou parágrafo
inserido pelo usuário. Exiba o resultado na página.
Resolução: [Exercicio08_05.html](Aula08/Exercicio08_05.html), [Exercicio08_05.css](Aula08/Exercicio08_05.css), [Exercicio08_05.js](Aula08/Exercicio08_05.js)
---
## AULA 09
Desenvolva um menu lateral com links para as atividades:
* tags html
* css fundamentos
* flexbox
* DOM
Ao clicar, mostre ao lado do menu a atividade escolhida.
Observação, a página deve abrir a atividade dinamicamente sem abrir outra página.
Resolução: [Exercicio09_01.html](Aula09/Exercicio09_01.html), [Exercicio09_01.css](Aula09/Exercicio09_01.css), [Exercicio09_01.js](Aula09/Exercicio09_01.js)
---
## AULA 10
Hoje é o seu primeiro dia como desenvolvedor frontend web e como primeiro
trabalho, precisa desenvolver uma tela de cadastro de funcionário.
A tela deve ter as seguintes informações:
* Dados Pessoais
* Nome
* Telefone
* E-mail
* CPF
* RG
* Cargo
* Nome
* Salário
* Setor
* Sigla
* Nome
* Convênio
* Nome
* Valor para o titular
* Valor para o dependente
O cargo, setor e convênio devem ser selecionados pelo usuário, onde ao selecionar
completa as demais informações. Para isso, utilize os seguintes web services:
* https://aulalp2024.free.beeceptor.com/setor
* https://aulalp2024.free.beeceptor.com/cargo
* https://aulalp2024.free.beeceptor.com/convenio
Para salvar as informações foi passado o web service:
* https://66266bc2052332d55322d1f0.mockapi.io/funcionario
Importante: O chefe requisitou que os dados de cargo, setor e convênio devem ser baixados
em paralelo no momento que a tela de cadastro é carregada com o método Promise.All.
Resolução: [Exercicio10_01.html](Aula10/Exercicio10_01.html), [Exercicio10_01.css](Aula10/Exercicio10_01.css), [Exercicio10_01.js](Aula10/Exercicio10_01.js)
---
## AULA 11
### Exercício 1
Crie uma página com o seguinte layout utilizando o sistema de grid do Bootstrap:
1. Cabeçalho da página com o título "Minha Página".
2. Seção de Destaque:
* Uma linha com duas colunas.
* Na primeira coluna, exiba uma imagem grande.
* Na segunda coluna, exiba um texto de destaque.
* Seção de Produtos:
* Uma linha com duas colunas.
* Em cada coluna, exiba uma imagem pequena de um produto e um texto relacionado ao
produto.
3. Instruções:
Use o sistema de grid do Bootstrap para criar o layout responsivo.
Utilize classes de estilo do Bootstrap, como bg-light, text-center, p-4, etc., para melhorar a
aparência do layout.
Adicione margens e espaçamentos adequados entre os elementos para garantir que o layout
fique visualmente agradável. é carregada com o método Promise.All.
Pesquise mais elementos de brekpoints e de formatação css do bootstrap para enriquecer o
seu layout
Resolução: [Exercicio11_01.html](Aula11/Exercicio11_01.html)
### Exercício 2
Desenvolver um ambiente para cursos culinários gratuitos.
Deverá ter:
* Uma tela de login
* Uma tela de home mostrando os principais cursos
* Uma tela que listará todos os cursos
Tela de login:
* Adicionando imagem de fundo:
* height: 100%;
* background-position: center;
* background-repeat: no-repeat;
* background-size: cover;
* display: flex;
* padding-top: 40px;
* padding-bottom: 40px;
* background-image: url(http://marcialocacoescdn.azureedge.net/marcialocacoes/c5598884-2e23-4e3d-833b-bb877492c57f.jpg)
Tela inicial:
Tela de cursos:
Resolução:
Tela de login: [Exercicio11_02_01.html](Aula11/Exercicio11_02_01.html), [Exercicio11_02_01.css](Aula11/Exercicio11_02_01.css)
Tela inicial: [Exercicio11_02_02.html](Aula11/Exercicio11_02_02.html), [Exercicio11_02_02.css](Aula11/Exercicio11_02_02.css)
Tela de cursos: [Exercicio11_02_03.html](Aula11/Exercicio11_02_03.html), [Exercicio11_02_03.css](Aula11/Exercicio11_02_03.css)
---
## AULA 12
* Crie uma página da web utilizando HTML e Bootstrap que inclua os seguintes
elementos:
* Uma barra de navegação (navbar) com um título "Meu Site" no centro e links
"Início", "Sobre" e "Contato" à direita.
* Um carrossel com pelo menos 3 slides, cada um contendo uma imagem e um
texto descritivo.
* Uma seção de destaque com o título "Nossos Serviços" e três ícones do
Bootstrap representando diferentes serviços oferecidos pela empresa,
acompanhados de títulos descritivos.
* Uma seção de depoimentos com o título "Depoimentos" e três depoimentos
de clientes, cada um com uma foto, nome do cliente e comentário.
* Utilize diferentes estilos de tipografia do Bootstrap para destacar os títulos, textos e
botões da página.
* Estilize a página usando classes do Bootstrap para garantir que ela seja responsiva e
tenha uma aparência agradável em diferentes tamanhos de tela.
Resolução: [Exercicio12_01.html](Aula12/Exercicio12_01.html), [Exercicio12_01.css](Aula12/Exercicio12_01.css)