Podcast
Questions and Answers
Qual é a função principal do HTML na criação de páginas da web?
Qual é a função principal do HTML na criação de páginas da web?
Qual técnica CSS é utilizada para aplicar estilos diferentes com base em propriedades do dispositivo?
Qual técnica CSS é utilizada para aplicar estilos diferentes com base em propriedades do dispositivo?
No contexto de design responsivo, o que é um 'Fluid Layout'?
No contexto de design responsivo, o que é um 'Fluid Layout'?
Qual método JavaScript é utilizado para acessar um elemento pelo seu ID no DOM?
Qual método JavaScript é utilizado para acessar um elemento pelo seu ID no DOM?
Signup and view all the answers
Qual dos seguintes é um tipo de evento que pode ser manipulado em JavaScript?
Qual dos seguintes é um tipo de evento que pode ser manipulado em JavaScript?
Signup and view all the answers
Qual evento é ativado quando o rato passa sobre um elemento?
Qual evento é ativado quando o rato passa sobre um elemento?
Signup and view all the answers
O que acontece quando o evento onmouseout é ativado?
O que acontece quando o evento onmouseout é ativado?
Signup and view all the answers
Qual propriedade é utilizada para identificar qual objeto disparou um evento?
Qual propriedade é utilizada para identificar qual objeto disparou um evento?
Signup and view all the answers
Qual é a função do elemento com o id 'operacao' no exemplo fornecido?
Qual é a função do elemento com o id 'operacao' no exemplo fornecido?
Signup and view all the answers
O que ocorre quando o rato sai de cima de um elemento que usa o evento onmouseover?
O que ocorre quando o rato sai de cima de um elemento que usa o evento onmouseover?
Signup and view all the answers
Qual dos seguintes eventos não está relacionado com eventos de mouse?
Qual dos seguintes eventos não está relacionado com eventos de mouse?
Signup and view all the answers
Qual a finalidade principal do evento onclick em JavaScript?
Qual a finalidade principal do evento onclick em JavaScript?
Signup and view all the answers
Em qual situação a classe 'mouseOver' será adicionada a um elemento?
Em qual situação a classe 'mouseOver' será adicionada a um elemento?
Signup and view all the answers
Qual evento ocorre quando um usuário clica com o botão direito do mouse em um elemento?
Qual evento ocorre quando um usuário clica com o botão direito do mouse em um elemento?
Signup and view all the answers
Qual evento é acionado quando a tecla é liberada pelo usuário?
Qual evento é acionado quando a tecla é liberada pelo usuário?
Signup and view all the answers
Qual das seguintes descrições se refere ao evento 'onload'?
Qual das seguintes descrições se refere ao evento 'onload'?
Signup and view all the answers
Qual evento é acionado quando o usuário pressiona um botão do mouse sobre um elemento?
Qual evento é acionado quando o usuário pressiona um botão do mouse sobre um elemento?
Signup and view all the answers
O que acontece no evento 'onerror'?
O que acontece no evento 'onerror'?
Signup and view all the answers
Qual evento é acionado quando o mouse entra em um elemento?
Qual evento é acionado quando o mouse entra em um elemento?
Signup and view all the answers
Qual evento não está relacionado à manipulação do teclado?
Qual evento não está relacionado à manipulação do teclado?
Signup and view all the answers
Qual evento aciona quando o usuário navega para fora de uma página?
Qual evento aciona quando o usuário navega para fora de uma página?
Signup and view all the answers
O que a função 'calcula()' deve fazer quando associada a um evento onclick?
O que a função 'calcula()' deve fazer quando associada a um evento onclick?
Signup and view all the answers
Qual das opções descreve melhor o evento 'onmouseup'?
Qual das opções descreve melhor o evento 'onmouseup'?
Signup and view all the answers
Qual é a ação desencadeada pelo evento onclick na função calcula()?
Qual é a ação desencadeada pelo evento onclick na função calcula()?
Signup and view all the answers
O que acontece quando o utilizador clica no botão que chama a função myFunction()?
O que acontece quando o utilizador clica no botão que chama a função myFunction()?
Signup and view all the answers
Qual das opções abaixo representa uma característica importante de eventos em JavaScript?
Qual das opções abaixo representa uma característica importante de eventos em JavaScript?
Signup and view all the answers
Study Notes
Web Structure
-
HTML (HyperText Markup Language): The standard language for creating web pages.
- Uses elements/tags (e.g.,
<html>
,<head>
,<body>
,<div>
,<p>
). - Structure of a webpage is defined by the hierarchy of these elements.
- Semantic HTML tags (e.g.,
<header>
,<footer>
,<article>
,<section>
) improve accessibility and SEO.
- Uses elements/tags (e.g.,
Styling Techniques
-
CSS (Cascading Style Sheets): Styles the appearance of HTML elements.
-
Selectors: Target elements (e.g., class
.classname
, ID#idname
, type). - Box Model: Includes content, padding, border, and margin.
- Positioning: Different methods (static, relative, absolute, fixed, sticky).
- Flexbox & Grid Layouts: Modern techniques for layout arrangement.
-
Selectors: Target elements (e.g., class
Responsive Design
-
Definition: Ensures webpages render well on various devices and screen sizes.
- Media Queries: CSS technique to apply styles based on device properties (e.g., width, orientation).
- Fluid Layout: Uses percentage-based widths instead of fixed sizes.
-
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for responsive scaling. -
Responsive Images: Use of
srcset
or CSS techniques (e.g., max-width: 100%).
DOM Manipulation
-
DOM (Document Object Model): Representation of the page structure as a tree of objects.
- Access and manipulate elements using JavaScript methods (e.g.,
document.getElementById()
,document.querySelector()
). - Common actions include creating, deleting, and updating elements and attributes.
- Use of libraries like jQuery simplifies DOM manipulation.
- Access and manipulate elements using JavaScript methods (e.g.,
Event Handling
-
Events: Actions or occurrences that happen in the browser.
- Types of events: Mouse events (click, hover), keyboard events (keypress, keyup), form events (submit, change).
-
Event Listeners: Functions that execute in response to events (e.g.,
element.addEventListener('click', function)
). - Event propagation: Bubbling (up the DOM) and capturing (down the DOM).
- Prevent default behavior using
event.preventDefault()
to manage form submissions or links.
Estrutura da Web
- HTML (HyperText Markup Language): Linguagem padrão para criar páginas web.
-
Elementos/Tags (ex.:
,
,,
, ``) são usados para definir a estrutura da página. - A hierarquia dos elementos HTML define a estrutura da página.
- Tags HTML semânticas (ex.:
,
,,
) melhoram a acessibilidade e o SEO.
Técnicas de Estilo
- CSS (Cascading Style Sheets): Define o estilo visual dos elementos HTML.
-
Seletores: Selecionam elementos específicos (ex.: classe
.classname
, ID#idname
, tipo). - Modelo de Caixa: Inclui conteúdo, preenchimento, borda e margem.
- Posicionamento: Métodos diferentes (estático, relativo, absoluto, fixo, grudado).
- Flexbox & Grid Layouts: Técnicas modernas para organizar o layout.
Design Responsivo
- Definição: Garante que as páginas web sejam renderizadas adequadamente em vários dispositivos e tamanhos de tela.
- Consultas de Mídia: Técnica CSS para aplicar estilos com base nas propriedades do dispositivo (ex.: largura, orientação).
- Layout Fluido: Utiliza larguras baseadas em porcentagem, em vez de tamanhos fixos.
- Viewport: `` para dimensionamento responsivo.
-
Imagens Responsivas: Uso de
srcset
ou técnicas CSS (ex.: max-width: 100%).
Manipulação do DOM
- DOM (Document Object Model): Representação da estrutura da página como uma árvore de objetos.
-
Acesso e Manipulação de Elementos: Utilize métodos JavaScript (ex.:
document.getElementById()
,document.querySelector()
). - Ações comuns incluem criar, excluir e atualizar elementos e atributos.
- Bibliotecas como jQuery simplificam a manipulação do DOM.
Manipulação de Eventos
- Eventos: Ações ou ocorrências que acontecem no navegador.
- Tipos de eventos: Eventos do mouse (clique, passagem do mouse), eventos do teclado (pressionar tecla, soltar tecla), eventos de formulário (enviar, alterar).
-
Ouvintes de Eventos: Funções que se executam em resposta a eventos (ex.:
element.addEventListener('click', function)
). - Propagação de eventos: Borbulhamento (para cima no DOM) e captura (para baixo no DOM).
- Impedir o comportamento padrão usando
event.preventDefault()
para gerenciar envios de formulário ou links.
Eventos Javascript - onmouseover / onmouseout
- O evento onmouseover é ativado quando o ponteiro do mouse passa sobre um elemento.
- O evento onmouseout é ativado quando o ponteiro do mouse sai de um elemento.
- O evento onmouseover pode ser usado para mudar o estilo de um elemento, neste caso, a cor de fundo.
- O Javascript pode ser usado dentro do HTML, inline, mas não precisa estar dentro do marcador, pode estar em outro local do código.
Eventos Javascript - onchange
- O evento onchange é ativado quando o valor de um elemento é alterado.
- O evento onchange pode ser usado para atualizar o conteúdo de outro elemento, como mostrar o resultado de um cálculo.
- Neste exemplo, o evento onchange é usado para definir a operação a ser realizada em um cálculo.
Propriedade Javascript event.target
- A propriedade event.target retorna o objeto que acionou um evento.
- Esta propriedade é útil para manipular eventos em múltiplos objetos com o mesmo código.
- O código pode ser usado para recuperar o valor de elementos selecionados dinamicamente.
Glossário de Eventos Javascript
- Os eventos do Javascript podem ser divididos em categorias, incluindo mouse, frame / object, e keyboard.
- Eventos do Mouse: oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup.
- Eventos do Frame / Object: onabort , onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload.
- Eventos do Teclado: onkeydown, onkeypress, onkeyup.
Eventos Javascript - onclick
- O evento onclick é ativado quando um elemento da interface é clicado.
- O evento onclick pode ser usado para executar uma função, por exemplo, para realizar um cálculo ou atualizar o conteúdo de um elemento.
- O código Javascript pode ser usado como um atributo inline no HTML.
- O evento onclick pode ser usado para alterar o conteúdo de um elemento.
- O evento onclick pode ser usado para chamar uma função que altera o conteúdo de um elemento.
Mudança de Estilo Inline
- O evento onmouseover pode ser usado para alterar o estilo de um elemento, neste caso, a cor de fundo.
- O estilo pode ser alterado diretamente dentro do HTML usando atributos CSS.
- O evento onmouseover pode ser usado para adicionar um estilo diferente ao elemento, como a classe "mouseOver".
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
Description
Teste seus conhecimentos sobre a estrutura da web, incluindo HTML e CSS. Explore conceitos como elementos semânticos, seletores e design responsivo. Aprenda também sobre técnicas modernas de layout como Flexbox e Grid.