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

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
Faça um programa que mostre os números impares em um intervalo de 0 a 100.
Resolução: Exercicio01_02.js
Faça um programa que mostre a quantidade de caracteres para o texto “Disciplina de Programação para web”.
Resolução: Exercicio01_03.js
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
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
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
Escreva uma função que receba uma string como argumento e retorne a string invertida.
Resolução: Exercicio01_07.js
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
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
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

AULA 02

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
Continuando com a classe Usuario, filtre os usuários com idade superior a 18 anos.
Resolução: Exercicio02_02.js
Utilizando a classe Usuario, encontre o primeiro usuário com idade entre 25 e 30 anos.
Resolução: Exercicio02_03.js
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
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
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
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
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
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
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

AULA 03

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

Crie a seguinte página abaixo:

Resolução: Exercicio03_02.html

Monte o código necessário para as seguintes tabelas

Resolução: 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, 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:

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.
Propriedades: As propriedades são características individuais que você deseja alterar, como cor, tamanho da fonte, margens, etc.
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".
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.
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

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”
Ao passar o mouse sobre o título o fundo deve mudar para a cor preta.
O conteúdo da página deve ser mostrado com a fonte “Arial”.
Todos os parágrafos devem ter um recuo de 20px.
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.
Os itens da lista devem estar com alinhamento justificado.
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, Exercicio05_01.css

AULA 06

Exercício 1

Crie uma estrutura HTML básica com uma
para a barra lateral e outra
para o conteúdo principal.
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.

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.

Use a propriedade float para fazer com que a barra lateral flutue à esquerda e o conteúdo principal flutue à direita.
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.
Teste o layout redimensionando a janela do navegador para verificar se ele é responsivo.

Segue um exemplo:

Resolução: Exercicio06_01.html, Exercicio06_01.css

Exercício 2

Crie uma página HTML que tenha a seguinte estrutura de layout:

Um menu superior fixo no topo da página.
Um menu lateral à esquerda que ocupe uma parte da largura da página.
Uma área de conteúdo à direita do menu lateral.
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, 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, Exercicio07_01.css

AULA 08

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, Exercicio08_01.css, Exercicio08_01.js
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, Exercicio08_02.js
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, Exercicio08_03.css, Exercicio08_03.js
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, Exercicio08_04.css, Exercicio08_04.js
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, Exercicio08_05.css, 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, Exercicio09_01.css, 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:

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, Exercicio10_01.css, Exercicio10_01.js

AULA 11

Exercício 1

Crie uma página com o seguinte layout utilizando o sistema de grid do Bootstrap:

Cabeçalho da página com o título "Minha Página".
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.

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

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, Exercicio11_02_01.css
Tela inicial: Exercicio11_02_02.html, Exercicio11_02_02.css
Tela de cursos: Exercicio11_02_03.html, 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, Exercicio12_01.css

yasminbrazasilva / exercicioslinguagensdeprogramacao Goto Github PK