0% acharam este documento útil (0 voto)

14 visualizações24 páginas

Aplicativos 1 - 3 Bi

Aplicativos de programação

Enviado por

ddduda292

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

14 visualizações24 páginas

Aplicativos 1 - 3 Bi

Aplicativos de programação

Enviado por

ddduda292

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 24

Aplicativos 1

Introdução ao JavaScript

• O que é JavaScript: JavaScript é uma linguagem de programação de

alto nível, interpretada, baseada em objetos, que é executada no
navegador web, é usada principalmente para adicionar interatividade
às páginas web.

• Por que Usar JavaScript: Tornar as páginas web dinâmicas e

interativas. O JS suporta validação de formulários, criação de jogos,
animações e muito mais.
Introdução à programação
orientada a objetos
Introdução à programação
orientada a objetos
Introdução à programação
orientada a objetos

• Abstração (Classe): Não existe no mundo real, é um conjunto de

características. Como o conceito de um cachorro, este têm sua
descrição, origem, raça, nome, etc…

• Objeto (Instância de uma classe): Existe no mundo real, ele tem

características deﬁnidas, como: é um cachorro chamado “Lucky”, com
pelo preto e branco, da raça fox paulistinha, etc…
Orientação à objetos e
Javascript
Como Adicionar JavaScript ao
HTML
• Como utilizar internamente: O código JavaScript pode ser incluído
diretamente na página HTML dentro da tag “<script>”.

• Exemplo:
<script>
console.log("Hello world!");
</script>
Como Adicionar JavaScript ao
HTML

• Como utilizar externamente: O JavaScript também pode ser colocado

em um arquivo externo e vinculado à página HTML.

• Exemplo: <script src="script.js"></script>

Variáveis e Tipos de Dados

• Declaração de variáveis: Usamos `var`, `let` ou `const` para declarar

variáveis.
– var: Global ou local, pode ser usadas antes da declaração;
– let: Local, não podem ser usadas antes da declaração;
– const: Local, valor imutavel.
Quando usar var, let ou const?
1. Sempre declare variáveis

2. Sempre use const se o valor não precisar ser alterado

3. Sempre use const se o tipo não deve ser alterado (Arrays e Objetos)

4. Use let apenas se não puder usar const

5. Use var apenas se você DEVE oferecer suporte a navegadores antigos.

Operadores
• Aritméticos: • Lógicos:
– +: Adição; – &&: E lógico;
– -: Subtração; – ||: Ou lógico;
– *: Multiplicação; – !: Não lógico;
– /: Divisão.

• Comparação:
– ==: Igual a;
– ===: Estritamente igual a;
– !=: Diferente de;
– !==: Estritamente diferente de.
Operadores
Sendo x = 5
Funções
• Declaração de Função:
function saudacao(nome) {
return 'Olá, ' + nome + '!';
}
console.log(saudacao('Maria'));

• Funções Anônimas e Arrow Functions:

const saudacao = (nome) => {
return 'Olá, ' + nome + '!';
}
console.log(saudacao('João'));
Seleção de Elementos no DOM
• getElementById('id'): Seleciona um elemento pelo seu ID.

• getElementsByClassName('class'): Seleciona todos os elementos com

uma determinada classe (HTMLCollection).

• getElementsByTagName('tag'): Seleciona todos os elementos de uma

tag especíﬁca (HTMLCollection).

• querySelector('selector'): Seleciona o primeiro elemento que

corresponde a um seletor CSS.

• querySelectorAll('selector'): Seleciona todos os elementos que

correspondem a um seletor CSS (NodeList).
Manipulação de Atributos e
Conteúdo
• Manipulando Atributos:
– setAttribute('atributo', 'valor'): Deﬁne ou modiﬁca um atributo.
– getAttribute('atributo'): Obtém o valor de um atributo.
– removeAttribute('atributo'): Remove um atributo.

• Manipulando Conteúdo:
– innerHTML: Define ou obtém o HTML interno.
– textContent: Define ou obtém o texto interno, sem tags HTML.
– innerText: Similar a textContent, mas considera o estilo CSS (ex.:
display: none).
Manipulação de Estilos e
Classes
• Estilos Inline:
– element.style.propriedade = 'valor': Modifica um estilo CSS
inline (ex.: element.style.color = 'red';).

• Gerenciamento de Classes:
– element.classList.add('classe'): Adiciona uma classe ao
elemento.
– element.classList.remove('classe'): Remove uma classe do
elemento.
– element.classList.toggle('classe'): Alterna a presença de uma
classe.
– element.classList.contains('classe'): Veriﬁca se o elemento
possui uma classe especíﬁca.
Eventos em HTML

• Para que serve: Adiciona eventos à objetos do html.

• Exemplo:
<button onclick=”clicado(1)”>ola</button>

• Eventos Comuns: òncontextmenu`, ònmousedown`, ònmouseenter`,

`onmouseleave`, `onmousemove`.
Eventos dinâmicos em
JavaScript
• Para que serve: Adiciona eventos à objetos do html.

• Exemplo:
elemento.addEventListener('click', function() {
alert('Elemento clicado!');
});

• Eventos Comuns: `click`, `mouseover`, `mouseout`, `keydown`, `load`.

Exercício 1
• Objetivo: Criar uma calculadora funcional que permita aos usuários realizar
operações matemáticas básicas (adição, subtração, multiplicação e divisão)
utilizando JavaScript, HTML e CSS.

• Interface do Usuário (HTML + CSS)

– Display para mostrar a entrada do usuário e os resultados.
– Botões para números (0-9).
– Botões para operações (+, -, *, /).
– Botão para igual (=) para calcular o resultado.
– Botão para limpar (C) a entrada atual.

• Funcionalidade (JavaScript)
– Capturar e armazenar as entradas do usuário (números e operações).
– Atualizar o display conforme o usuário digita.
– Realizar a operação matemática quando o usuário clica em =.
– Limpar o display quando o usuário clica em C.
Navegação no DOM
• parentElement: Obtém o elemento pai.

• children: Obtém os elementos ﬁlhos diretos (HTMLCollection).

• ﬁrstElementChild / lastElementChild: Acessa o primeiro ou último

elemento ﬁlho.

• nextElementSibling / previousElementSibling: Navega entre

elementos irmãos.

• closest('selector'): Encontra o ancestral mais próximo que

corresponde a um seletor.
Criação de Elementos HTML

• Criando Novos Elementos:

– document.createElement('tag'): Cria um novo elemento HTML.

• Exemplo Prático:
– let novoParagrafo = document.createElement('p');
– novoParagrafo.textContent = 'Este é um novo parágrafo';
Inserção de Elementos no
DOM
• Métodos de Inserção:
– appendChild(novoElemento): Insere um novo elemento como o
último filho.
– insertBefore(novoElemento, elementoReferencia): Insere um
novo elemento antes de um elemento de referência.
– replaceChild(novoElemento, elementoAntigo): Substitui um
elemento filho por outro.
– removeChild(elemento): Remove um elemento filho.

• Exemplo de Inserção:
– let container = document.getElementById('container');
– container.appendChild(novoParagrafo);
Exercício 2: To-Do List
Interativa
• Objetivo: Criar uma aplicação simples de lista de tarefas (To-Do List) onde o usuário possa adicionar,
remover e marcar tarefas como concluídas. O foco é a navegação e manipulação do DOM usando
JavaScript.

• Interface do Usuário (HTML + CSS)

– Campo de Entrada: Um campo de texto para que o usuário possa digitar uma nova tarefa.
– Botão de Adicionar: Um botão que adiciona a tarefa à lista.
– Lista de Tarefas: Uma lista onde as tarefas são exibidas, cada tarefa deve ter:
• Um checkbox para marcar como concluída.
• Um texto com o nome da tarefa.
• Um botão para remover a tarefa, fazer a veriﬁcação da deleção por conﬁrm.

• Funcionalidade (JavaScript)
– Adicionar Tarefas: Quando o usuário digitar uma tarefa e clicar em "Adicionar", a tarefa deve
aparecer na lista de tarefas.
– Marcar como Concluída: Quando o usuário clicar no checkbox de uma tarefa, a tarefa deve
ser marcada como concluída (por exemplo, com um estilo diferente).
– Remover Tarefas: Quando o usuário clicar no botão de remover ao lado de uma tarefa, essa
tarefa deve ser removida da lista.
Exercício 2: To-Do List
Interativa