<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Henrique Vital</title>
    <description>The latest articles on DEV Community by Henrique Vital (@java2890).</description>
    <link>https://dev.to/java2890</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2508298%2Fe9fa2a9e-1833-4971-b003-c220165b1720.png</url>
      <title>DEV Community: Henrique Vital</title>
      <link>https://dev.to/java2890</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/java2890"/>
    <language>en</language>
    <item>
      <title>Web scraping com selenium</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Thu, 23 Jan 2025 10:09:01 +0000</pubDate>
      <link>https://dev.to/java2890/web-scraping-com-selenium-3b0l</link>
      <guid>https://dev.to/java2890/web-scraping-com-selenium-3b0l</guid>
      <description>&lt;p&gt;Aqui está o texto reescrito com correções de português e pontuação, com os títulos destacados e a organização solicitada:&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Importância da Comparação entre Reajustes de Preços e Índices de Inflação no Setor Mobiliário&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;É importante ter uma visão clara e comparativa de como os reajustes de preços internos estão alinhados com os índices de inflação do mercado, em especial no setor mobiliário. A seguir, explicarei melhor essa questão.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Reajustes de Preços Internos&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Os reajustes de preços internos são os aumentos ou ajustes nos preços dos produtos e serviços oferecidos pela empresa. Eles podem ser feitos para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Acompanhar os custos de produção,&lt;/li&gt;
&lt;li&gt;Melhorar margens de lucro,&lt;/li&gt;
&lt;li&gt;Refletir estratégias de mercado.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Índices de Inflação do Mercado&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Os índices de inflação do mercado são medidas que refletem o aumento geral dos preços em uma economia ao longo do tempo. Exemplos incluem o IPCA (Índice Nacional de Preços ao Consumidor Amplo) no Brasil. Esses índices indicam:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;O custo de vida,&lt;/li&gt;
&lt;li&gt;A capacidade de compra do consumidor.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Objetivo da Comparação&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A ideia é comparar os reajustes de preços praticados pela empresa com a inflação para garantir o equilíbrio entre dois pontos:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Competitividade&lt;/strong&gt;: Se os preços internos aumentarem muito acima da inflação, a empresa pode perder clientes para concorrentes que oferecem valores mais acessíveis.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sustentabilidade Financeira&lt;/strong&gt;: Se os reajustes forem muito abaixo da inflação, a empresa pode ter dificuldades para cobrir custos crescentes e manter a lucratividade.&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Importância no Setor Mobiliário&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;No setor mobiliário, essa análise é especialmente importante porque os produtos geralmente têm valores elevados e dependem da confiança e do poder de compra dos consumidores. A comparação entre reajustes e inflação permite que a empresa ajuste suas estratégias para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Equilibrar custos,&lt;/li&gt;
&lt;li&gt;Manter margens saudáveis,&lt;/li&gt;
&lt;li&gt;Não perder mercado.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>python</category>
    </item>
    <item>
      <title>Perguntas de entrevista DEV</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Fri, 27 Dec 2024 23:37:19 +0000</pubDate>
      <link>https://dev.to/java2890/perguntas-de-entrevista-dev-267n</link>
      <guid>https://dev.to/java2890/perguntas-de-entrevista-dev-267n</guid>
      <description>&lt;p&gt;Aqui está uma lista das perguntas de programação, com as respostas explicativas e exemplos adicionais para cada uma:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Qual é o propósito das transações em SQL?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Garantir a integridade dos dados armazenados no banco de dados.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
As transações em SQL asseguram que as operações realizadas no banco de dados sejam consistentes e seguras. Elas seguem os princípios ACID (Atomicidade, Consistência, Isolamento e Durabilidade), garantindo que ou todas as operações de uma transação sejam realizadas ou nenhuma delas. Caso ocorra uma falha, a transação pode ser revertida, mantendo a integridade dos dados.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Imagine uma transação que envolve a transferência de dinheiro entre duas contas bancárias. Se a transferência falhar no meio do processo, a transação deve ser revertida para garantir que o dinheiro não seja perdido.&lt;/p&gt;


&lt;h3&gt;
  
  
  2. &lt;strong&gt;Qual é a principal razão para utilizar tipagem no desenvolvimento de software (por exemplo, em TypeScript)?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Facilidade na detecção de erros e bugs.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
A tipagem estática, como no caso do TypeScript, ajuda a identificar erros de tipo durante o desenvolvimento, antes mesmo de o código ser executado. Isso pode reduzir significativamente a quantidade de bugs relacionados a tipos de dados incorretos, facilitando a manutenção e melhorando a qualidade do código.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Em TypeScript, ao declarar uma variável como &lt;code&gt;let idade: number = "25";&lt;/code&gt;, o compilador gerará um erro, porque estamos atribuindo uma string a uma variável do tipo número.&lt;/p&gt;


&lt;h3&gt;
  
  
  3. &lt;strong&gt;Qual é o benefício de usar um ORM (Object-Relational Mapper) em uma aplicação?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Para simplificar o processo de mapeamento de objetos para tabelas de banco de dados.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Os ORMs permitem que você trabalhe com objetos no código e os mapeie automaticamente para as tabelas do banco de dados, sem precisar escrever SQL diretamente. Isso facilita a interação com o banco de dados, aumentando a produtividade e evitando erros comuns de SQL.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Com um ORM como Sequelize (para Node.js), ao criar um objeto &lt;code&gt;User&lt;/code&gt;, você pode salvar e recuperar esse objeto automaticamente no banco de dados sem escrever consultas SQL manualmente.&lt;/p&gt;


&lt;h3&gt;
  
  
  4. &lt;strong&gt;Qual é a principal diferença entre &lt;code&gt;null&lt;/code&gt; e &lt;code&gt;undefined&lt;/code&gt; em JavaScript?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;"Null" é atribuído explicitamente para indicar a ausência de qualquer valor de objeto, enquanto "undefined" é o valor padrão para variáveis não inicializadas.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;null&lt;/code&gt;&lt;/strong&gt; é um valor atribuído explicitamente para indicar a ausência de valor ou objeto.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;undefined&lt;/code&gt;&lt;/strong&gt; é o valor padrão para variáveis que são declaradas mas não inicializadas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// null é atribuído explicitamente&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;         &lt;span class="c1"&gt;// b é undefined porque não foi inicializado&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// null&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  5. &lt;strong&gt;Como o Flexbox pode ser usado para centralizar horizontalmente um elemento dentro de seu contêiner pai?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Aplicar a propriedade "display: flex" ao contêiner pai e usar a propriedade "justify-content: center".&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
O Flexbox facilita o alinhamento de elementos. Para centralizar um elemento horizontalmente, você deve configurar o contêiner pai com &lt;code&gt;display: flex&lt;/code&gt; e usar &lt;code&gt;justify-content: center&lt;/code&gt; para alinhar os itens horizontalmente no centro.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.item&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"container"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"item"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Item centralizado&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  6. &lt;strong&gt;Como otimizar o pseudocódigo para verificar se um número N é primo?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Utilizar a raiz quadrada de N como limite superior do loop.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Em vez de verificar todos os números até (N-1), você pode verificar até a raiz quadrada de (N). Isso reduz significativamente a quantidade de verificações, pois, se (N) tem um divisor maior que sua raiz quadrada, o outro divisor já terá sido encontrado antes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isPrime&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;N&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;N&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sqrt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;N&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;N&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isPrime&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;29&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;  &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  7. &lt;strong&gt;Qual é a finalidade das transações em SQL?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Garantir a integridade dos dados armazenados no banco de dados.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
As transações em SQL são usadas para garantir que as operações no banco de dados sejam concluídas corretamente ou, caso contrário, revertidas. Isso garante que o banco de dados permaneça consistente, mesmo em caso de falha.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Em uma transação de venda, se o pagamento falhar após a atualização do estoque, a transação pode ser revertida para garantir que o estoque não seja atualizado sem que o pagamento tenha sido realizado.&lt;/p&gt;


&lt;h3&gt;
  
  
  8. &lt;strong&gt;Qual comando em Git desfaz um merge realizado de forma errada?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;git merge --abort&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Se você executar um merge e perceber que trouxe as mudanças da branch errada, pode usar o comando &lt;code&gt;git merge --abort&lt;/code&gt; para cancelar o merge e voltar ao estado anterior, sem que as mudanças sejam aplicadas.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git merge feature-branch
&lt;span class="c"&gt;# Se perceber que o merge foi feito na branch errada&lt;/span&gt;
git merge &lt;span class="nt"&gt;--abort&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  9. &lt;strong&gt;Qual é o principal benefício de utilizar um ORM (Object-Relational Mapper)?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Resposta:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Para simplificar o processo de mapeamento de objetos para tabelas de banco de dados.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explicação:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
O ORM permite que você trabalhe com objetos em seu código, e o ORM cuida de mapear esses objetos para o banco de dados de forma automática, sem precisar escrever SQL diretamente.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Usando o ORM Sequelize, ao criar um novo usuário, ele automaticamente salva os dados no banco de dados sem você escrever SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sequelize&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;define&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;User&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Sequelize&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;STRING&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Sequelize&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;STRING&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;john@example.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Esses exemplos e explicações devem ajudar a entender melhor os conceitos abordados nas questões de programação.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Front End Conceitos Junior</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Thu, 12 Dec 2024 22:32:47 +0000</pubDate>
      <link>https://dev.to/java2890/front-end-conceitos-junior-3gl3</link>
      <guid>https://dev.to/java2890/front-end-conceitos-junior-3gl3</guid>
      <description>&lt;h3&gt;
  
  
  Nível Júnior
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o DOM?
&lt;strong&gt;Resposta:&lt;/strong&gt; O DOM (Document Object Model) é uma interface de programação que representa a estrutura de um documento HTML ou XML. Ele permite que scripts e programas acessem e atualizem o conteúdo, a estrutura e o estilo do documento. O DOM é uma representação em árvore do documento, onde cada nó é um objeto que representa uma parte do documento.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;   &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"myDiv"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
       &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Olá, Mundo!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myDiv&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;myDiv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myDiv&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Olá, Mundo!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o modelo de caixa (box model) em CSS?
&lt;strong&gt;Resposta:&lt;/strong&gt; O modelo de caixa é um conceito que descreve como os elementos HTML são representados como caixas retangulares. Cada caixa tem margens, bordas, preenchimento e conteúdo. O modelo de caixa é fundamental para entender como o layout de uma página é construído.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="nc"&gt;.box&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* Espaço fora da borda */&lt;/span&gt;
       &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="no"&gt;black&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* Borda */&lt;/span&gt;
       &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* Espaço dentro da borda */&lt;/span&gt;
       &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* Largura do conteúdo */&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é uma função anônima?
&lt;strong&gt;Resposta:&lt;/strong&gt; Uma função anônima é uma função que não possui um nome. Ela é frequentemente usada como um argumento para outras funções ou como uma função de callback. Funções anônimas são úteis quando você não precisa reutilizar a função em outro lugar.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Executado após 1 segundo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são seletores CSS?
&lt;strong&gt;Resposta:&lt;/strong&gt; Seletores CSS são padrões usados para selecionar os elementos que você deseja estilizar. Existem vários tipos de seletores, como seletores de classe, ID e tipo. Eles permitem que você aplique estilos específicos a elementos HTML.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="nc"&gt;.className&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c"&gt;/* Seleciona todos os elementos com a classe "className" */&lt;/span&gt;
       &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="nf"&gt;#idName&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c"&gt;/* Seleciona o elemento com o ID "idName" */&lt;/span&gt;
       &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "localStorage" em JavaScript?
&lt;strong&gt;Resposta:&lt;/strong&gt; &lt;code&gt;localStorage&lt;/code&gt; é uma API que permite armazenar dados no navegador do usuário de forma persistente. Os dados armazenados no &lt;code&gt;localStorage&lt;/code&gt; não expiram e permanecem mesmo após o fechamento do navegador. É útil para armazenar informações que você deseja manter entre sessões.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;value&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "value"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o evento "DOMContentLoaded"?
&lt;strong&gt;Resposta:&lt;/strong&gt; O evento &lt;code&gt;DOMContentLoaded&lt;/code&gt; é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar. É útil para executar scripts assim que o DOM estiver pronto.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DOMContentLoaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DOM completamente carregado e analisado&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "this" em JavaScript?
&lt;strong&gt;Resposta:&lt;/strong&gt; O &lt;code&gt;this&lt;/code&gt; em JavaScript refere-se ao contexto de execução atual. O valor de &lt;code&gt;this&lt;/code&gt; pode mudar dependendo de como uma função é chamada. Em métodos de objetos, &lt;code&gt;this&lt;/code&gt; refere-se ao objeto que está chamando o método.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;};&lt;/span&gt;
   &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "event bubbling"?
&lt;strong&gt;Resposta:&lt;/strong&gt; O "event bubbling" é um mecanismo de propagação de eventos em que um evento começa no elemento mais interno e se propaga para os elementos externos. Isso significa que, se um evento ocorrer em um elemento filho, ele também será capturado pelos elementos pai.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;   &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"parent"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
       &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"child"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Clique em mim&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;

   &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
       &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;parent&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Div pai clicada&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;});&lt;/span&gt;

       &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Botão filho clicado&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;});&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ao clicar no botão, a saída será:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   Botão filho clicado
   Div pai clicada
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é uma "callback function"?
&lt;strong&gt;Resposta:&lt;/strong&gt; Uma "callback function" é uma função passada como argumento para outra função, que pode ser chamada em um momento posterior. Isso é comum em operações assíncronas, como requisições de rede.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="c1"&gt;// Simulação de operação assíncrona&lt;/span&gt;
       &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nf"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Dados recebidos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// "Dados recebidos"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "responsive design"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "responsive design" é uma abordagem de design web que visa criar páginas que se adaptam a diferentes tamanhos de tela e dispositivos. Isso é frequentemente alcançado usando media queries em CSS.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;600px&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;lightblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Nível Pleno
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o Flexbox e como ele funciona?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Flexbox é um modelo de layout em CSS que permite distribuir espaço entre itens em um contêiner, mesmo quando seu tamanho é desconhecido. Ele facilita o alinhamento e a distribuição de espaço.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;space-between&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* Espaço entre os itens */&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são Promises em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Promises são objetos que representam a eventual conclusão (ou falha) de uma operação assíncrona. Elas permitem que você escreva código assíncrono de forma mais legível.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myPromise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Simulação de operação assíncrona&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Operação concluída!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;myPromise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// "Operação concluída!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o conceito de "hoisting" em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Hoisting é um comportamento do JavaScript onde as declarações de variáveis e funções são movidas para o topo do seu contexto de execução durante a fase de compilação. Isso significa que você pode usar variáveis e funções antes de declará-las.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "virtual DOM" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "virtual DOM" é uma representação leve do DOM real. O React usa o virtual DOM para otimizar a atualização do DOM, permitindo que ele faça alterações de forma mais eficiente, comparando o virtual DOM com o DOM real e aplicando apenas as mudanças necessárias.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;world&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="nx"&gt;ReactDOM&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são "props" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; "Props" (propriedades) são um mecanismo de passagem de dados entre componentes em React. Elas permitem que você passe dados de um componente pai para um componente filho.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Greeting&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Greeting&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "state" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "state" é um objeto que representa a parte da aplicação que pode mudar. Ele é usado para armazenar dados que afetam a renderização do componente.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Counter&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Increment&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "React Router"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O React Router é uma biblioteca que permite a navegação entre diferentes componentes em uma aplicação React, facilitando a criação de aplicações de página única (SPA). Ele permite definir rotas e renderizar componentes com base na URL.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;BrowserRouter&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;Router&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Route&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Switch&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-router-dom&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Router&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Switch&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Route&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/about&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;component&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;About&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Route&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;component&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;Home&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Switch&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Router&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são "hooks" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. O &lt;code&gt;useState&lt;/code&gt; e o &lt;code&gt;useEffect&lt;/code&gt; são exemplos de hooks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Example&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`Você clicou &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; vezes`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Você&lt;/span&gt; &lt;span class="nx"&gt;clicou&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;vezes&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Clique&lt;/span&gt; &lt;span class="nx"&gt;aqui&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Webpack"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Webpack é um empacotador de módulos para aplicações JavaScript. Ele permite que você agrupe arquivos JavaScript, CSS e outros recursos em um único arquivo ou em vários arquivos otimizados para produção.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// webpack.config.js&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;entry&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./src/index.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;bundle.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;__dirname&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/dist&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Babel"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Babel é um transpilador que permite que você escreva código JavaScript moderno (ES6+) e o converta em uma versão compatível com navegadores mais antigos. Ele é frequentemente usado em conjunto com o Webpack.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// .babelrc&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;presets&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@babel/preset-env&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@babel/preset-react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Bibliografia
&lt;/h3&gt;

&lt;p&gt;As informações apresentadas foram extraídas e adaptadas de várias fontes confiáveis, incluindo:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Glassdoor&lt;/strong&gt; - Um site onde pessoas compartilham suas experiências de entrevistas e perguntas comuns.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.glassdoor.com" rel="noopener noreferrer"&gt;Glassdoor&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;MDN Web Docs&lt;/strong&gt; - Documentação abrangente sobre HTML, CSS e JavaScript.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/" rel="noopener noreferrer"&gt;MDN Web Docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;JavaScript.info&lt;/strong&gt; - Um guia moderno para JavaScript, cobrindo desde os fundamentos até tópicos avançados.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://javascript.info/" rel="noopener noreferrer"&gt;JavaScript.info&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;React Documentation&lt;/strong&gt; - A documentação oficial do React, que fornece informações detalhadas sobre a biblioteca.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer"&gt;React Documentation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;CSS-Tricks&lt;/strong&gt; - Um site com dicas e tutoriais sobre CSS e desenvolvimento front-end.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://css-tricks.com/" rel="noopener noreferrer"&gt;CSS-Tricks&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Essas fontes são amplamente reconhecidas na comunidade de desenvolvimento web e são ótimos recursos para aprofundar o conhecimento em front-end. Se precisar de mais informações ou exemplos, sinta-se à vontade para perguntar!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Front end Conceitos II</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Thu, 12 Dec 2024 22:27:35 +0000</pubDate>
      <link>https://dev.to/java2890/front-end-conceitos-ii-33ec</link>
      <guid>https://dev.to/java2890/front-end-conceitos-ii-33ec</guid>
      <description>&lt;h3&gt;
  
  
  Nível Júnior
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o CSS Grid?
&lt;strong&gt;Resposta:&lt;/strong&gt; CSS Grid é um sistema de layout que permite criar layouts bidimensionais na web. Ele divide a página em linhas e colunas, facilitando o posicionamento de elementos. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="nc"&gt;.grid-container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="py"&gt;grid-template-columns&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="py"&gt;grid-gap&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o evento "DOMContentLoaded"?
&lt;strong&gt;Resposta:&lt;/strong&gt; O evento &lt;code&gt;DOMContentLoaded&lt;/code&gt; é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar. É útil para executar scripts assim que o DOM estiver pronto:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DOMContentLoaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;DOM completamente carregado e analisado&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é a propriedade "z-index" em CSS?
&lt;strong&gt;Resposta:&lt;/strong&gt; A propriedade &lt;code&gt;z-index&lt;/code&gt; controla a ordem de empilhamento dos elementos. Elementos com um &lt;code&gt;z-index&lt;/code&gt; maior são exibidos na frente de elementos com um &lt;code&gt;z-index&lt;/code&gt; menor. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="nc"&gt;.box1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;relative&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="nl"&gt;z-index&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="nc"&gt;.box2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;relative&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="nl"&gt;z-index&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c"&gt;/* box2 será exibido na frente de box1 */&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "this" em JavaScript?
&lt;strong&gt;Resposta:&lt;/strong&gt; O &lt;code&gt;this&lt;/code&gt; em JavaScript refere-se ao contexto de execução atual. O valor de &lt;code&gt;this&lt;/code&gt; pode mudar dependendo de como uma função é chamada. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="na"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;};&lt;/span&gt;
   &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são seletores CSS?
&lt;strong&gt;Resposta:&lt;/strong&gt; Seletores CSS são padrões usados para selecionar os elementos que você deseja estilizar. Existem vários tipos de seletores, como seletores de classe, ID e tipo. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="nc"&gt;.className&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c"&gt;/* Seleciona todos os elementos com a classe "className" */&lt;/span&gt;
       &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="nf"&gt;#idName&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c"&gt;/* Seleciona o elemento com o ID "idName" */&lt;/span&gt;
       &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "localStorage" em JavaScript?
&lt;strong&gt;Resposta:&lt;/strong&gt; &lt;code&gt;localStorage&lt;/code&gt; é uma API que permite armazenar dados no navegador do usuário de forma persistente. Os dados armazenados no &lt;code&gt;localStorage&lt;/code&gt; não expiram e permanecem mesmo após o fechamento do navegador. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;value&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "value"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "event bubbling"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "event bubbling" é um mecanismo de propagação de eventos em que um evento começa no elemento mais interno e se propaga para os elementos externos. Por exemplo, se um botão dentro de um &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; for clicado, o evento de clique será disparado primeiro no botão e, em seguida, no &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é uma "callback function"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Uma "callback function" é uma função passada como argumento para outra função, que pode ser chamada em um momento posterior. Por exemplo:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="c1"&gt;// Simulação de operação assíncrona&lt;/span&gt;
       &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nf"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Dados recebidos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// "Dados recebidos"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "responsive design"?
&lt;strong&gt;Resposta:&lt;/strong&gt; O "responsive design" é uma abordagem de design web que visa criar páginas que se adaptam a diferentes tamanhos de tela e dispositivos. Isso é frequentemente alcançado usando media queries em CSS. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;   &lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;600px&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;lightblue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "fetch API"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; A &lt;code&gt;fetch API&lt;/code&gt; é uma interface moderna para fazer requisições HTTP em JavaScript. Ela retorna uma Promise que resolve a resposta da requisição. Por exemplo:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://api.example.com/data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Nível Pleno
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "CORS"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança que permite que recursos restritos em uma página da web sejam solicitados de um domínio diferente daquele que serviu a página. Isso é importante para proteger os dados do usuário.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "virtual DOM" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "virtual DOM" é uma representação leve do DOM real. O React usa o virtual DOM para otimizar a atualização do DOM, permitindo que ele faça alterações de forma mais eficiente, comparando o virtual DOM com o DOM real e aplicando apenas as mudanças necessárias.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são "props" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; "Props" (propriedades) são um mecanismo de passagem de dados entre componentes em React. Elas permitem que você passe dados de um componente pai para um componente filho. Por exemplo:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Greeting&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Greeting&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "state" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O "state" é um objeto que representa a parte da aplicação que pode mudar. Ele é usado para armazenar dados que afetam a renderização do componente. Por exemplo:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Counter&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Increment&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "React Router"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O React Router é uma biblioteca que permite a navegação entre diferentes componentes em uma aplicação React, facilitando a criação de aplicações de página única (SPA). Ele permite definir rotas e renderizar componentes com base na URL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são "hooks" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. O &lt;code&gt;useState&lt;/code&gt; e o &lt;code&gt;useEffect&lt;/code&gt; são exemplos de hooks. Por exemplo:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Example&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`Você clicou &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; vezes`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Você&lt;/span&gt; &lt;span class="nx"&gt;clicou&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;vezes&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Clique&lt;/span&gt; &lt;span class="nx"&gt;aqui&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Webpack"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Webpack é um empacotador de módulos para aplicações JavaScript. Ele permite que você agrupe arquivos JavaScript, CSS e outros recursos em um único arquivo ou em vários arquivos otimizados para produção.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Babel"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Babel é um transpilador que permite que você escreva código JavaScript moderno (ES6+) e o converta em uma versão compatível com navegadores mais antigos. Ele é frequentemente usado em conjunto com o Webpack.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "SASS"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; SASS (Syntactically Awesome Style Sheets) é um pré-processador CSS que permite usar variáveis, aninhamento e funções, tornando o CSS mais dinâmico e fácil de manter. Por exemplo:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight scss"&gt;&lt;code&gt;&lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nc"&gt;.button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;darken&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="m"&gt;10%&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "AJAX"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; AJAX (Asynchronous JavaScript and XML) é uma técnica que permite que você faça requisições assíncronas ao servidor sem recarregar a página. Isso é frequentemente usado para atualizar partes de uma página da web dinamicamente.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Nível Sênior
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é a "arquitetura de microserviços"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; A arquitetura de microserviços é um estilo de arquitetura que estrutura uma aplicação como um conjunto de serviços pequenos e independentes, que se comunicam entre si. Isso permite que equipes diferentes trabalhem em diferentes partes da aplicação de forma mais eficiente.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "SSR" (Server-Side Rendering)?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; SSR é uma técnica onde a renderização de uma aplicação web é feita no servidor, em vez de no cliente. Isso pode melhorar o desempenho e a SEO, pois o conteúdo é enviado ao cliente já renderizado.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "CSR" (Client-Side Rendering)?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; CSR é uma técnica onde a renderização de uma aplicação web é feita no cliente, geralmente usando JavaScript. Isso permite uma experiência de usuário mais interativa, mas pode ter um impacto negativo na SEO se não for implementado corretamente.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Redux Saga"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Redux Saga é uma biblioteca que facilita o gerenciamento de efeitos colaterais em aplicações Redux. Ele usa geradores para lidar com operações assíncronas, como chamadas de API, de forma mais legível e organizada.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Context API" em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; A Context API é uma maneira de passar dados através da árvore de componentes sem precisar passar props manualmente em cada nível. Isso é útil para compartilhar dados globais, como temas ou informações do usuário.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "TypeScript"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; TypeScript é um superconjunto do JavaScript que adiciona tipagem estática ao código. Ele permite que você defina tipos para variáveis, funções e objetos, ajudando a evitar erros em tempo de execução.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Progressive Web App" (PWA)?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; PWAs são aplicações web que oferecem uma experiência semelhante a aplicativos nativos, incluindo suporte offline, notificações push e instalação na tela inicial. Elas são construídas usando tecnologias web padrão.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "GraphQL"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; GraphQL é uma linguagem de consulta para APIs que permite que os clientes solicitem exatamente os dados de que precisam. Isso contrasta com as APIs REST, onde os clientes podem receber mais dados do que o necessário.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Web Accessibility" (Acessibilidade Web)?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Acessibilidade web refere-se à prática de tornar as aplicações web utilizáveis por pessoas com deficiências. Isso inclui o uso de tags semânticas, atributos ARIA e garantir que o conteúdo seja navegável por teclado.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o "Service Worker"?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Um Service Worker é um script que o navegador executa em segundo plano, separado de uma página da web, permitindo funcionalidades como cache, notificações push e sincronização em segundo plano. Ele é fundamental para a construção de PWAs.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Bibliografia
&lt;/h3&gt;

&lt;p&gt;As informações apresentadas foram extraídas e adaptadas de várias fontes confiáveis, incluindo:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Glassdoor&lt;/strong&gt; - Um site onde pessoas compartilham suas experiências de entrevistas e perguntas comuns.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.glassdoor.com" rel="noopener noreferrer"&gt;Glassdoor&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;MDN Web Docs&lt;/strong&gt; - Documentação abrangente sobre HTML, CSS e JavaScript.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/" rel="noopener noreferrer"&gt;MDN Web Docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;JavaScript.info&lt;/strong&gt; - Um guia moderno para JavaScript, cobrindo desde os fundamentos até tópicos avançados.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://javascript.info/" rel="noopener noreferrer"&gt;JavaScript.info&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;React Documentation&lt;/strong&gt; - A documentação oficial do React, que fornece informações detalhadas sobre a biblioteca.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer"&gt;React Documentation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;CSS-Tricks&lt;/strong&gt; - Um site com dicas e tutoriais sobre CSS e desenvolvimento front-end.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://css-tricks.com/" rel="noopener noreferrer"&gt;CSS-Tricks&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Essas fontes são amplamente reconhecidas na comunidade de desenvolvimento web e são ótimos recursos para aprofundar o conhecimento em front-end. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Front End Conceitos</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Thu, 12 Dec 2024 22:18:56 +0000</pubDate>
      <link>https://dev.to/java2890/front-end-conceitos-8g5</link>
      <guid>https://dev.to/java2890/front-end-conceitos-8g5</guid>
      <description>&lt;h3&gt;
  
  
  1. Padrões de Design
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são padrões de design em desenvolvimento front-end?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Padrões de design são soluções reutilizáveis para problemas comuns que surgem durante o desenvolvimento de software. Eles ajudam a criar uma base sólida e consistente para a construção de aplicações. Por exemplo, o padrão "Singleton" garante que uma classe tenha apenas uma instância e fornece um ponto de acesso global a ela. Em aplicações front-end, padrões como "Módulo" e "Observer" são frequentemente utilizados para organizar o código e gerenciar eventos.&lt;/p&gt;


&lt;h3&gt;
  
  
  2. Diferença entre JavaScript, JSX e HTML
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Qual é a diferença entre JavaScript, JSX e HTML?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;JavaScript&lt;/strong&gt; é uma linguagem de programação que permite adicionar interatividade às páginas web. Por exemplo, você pode usar JavaScript para validar formulários ou criar animações.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;JSX&lt;/strong&gt; é uma extensão de sintaxe para JavaScript, usada principalmente com React. Ele permite que você escreva HTML dentro do JavaScript. Por exemplo:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;world&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;HTML&lt;/strong&gt; (HyperText Markup Language) é a linguagem de marcação que estrutura o conteúdo da web. Por exemplo:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;  &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello, world!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Client Side vs Server Side Components
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são componentes client-side e server-side?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Componentes client-side&lt;/strong&gt; são renderizados no navegador do usuário. Eles podem ser interativos e respondem a eventos do usuário sem a necessidade de recarregar a página. Por exemplo, um botão que exibe um modal quando clicado.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Componentes server-side&lt;/strong&gt; são renderizados no servidor e enviados ao cliente como HTML. Isso pode melhorar o desempenho e a SEO, pois o conteúdo é carregado mais rapidamente. Um exemplo é uma página de blog que é gerada no servidor e enviada ao navegador.&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;
  
  
  4. Hosting
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é hosting em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Hosting é um comportamento do JavaScript onde as declarações de variáveis e funções são movidas para o topo do seu contexto de execução durante a fase de compilação. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Neste exemplo, a declaração &lt;code&gt;var x&lt;/code&gt; é "hospedada" no topo, mas a atribuição &lt;code&gt;x = 5&lt;/code&gt; não é.&lt;/p&gt;




&lt;h3&gt;
  
  
  5. Immediately Invoked Function Expression (IIFE)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é uma IIFE?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Uma IIFE (Immediately Invoked Function Expression) é uma função que é definida e executada imediatamente. Isso ajuda a criar um escopo local e evitar a poluição do escopo global. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, world!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;})();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, world!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;message&lt;/code&gt; não está acessível fora da IIFE.&lt;/p&gt;




&lt;h3&gt;
  
  
  6. High Order Functions
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são funções de alta ordem?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Funções de alta ordem são funções que podem receber outras funções como argumentos ou retornar funções como resultado. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greetJohn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;greetJohn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Neste exemplo, &lt;code&gt;greet&lt;/code&gt; retorna uma nova função que usa o nome passado.&lt;/p&gt;




&lt;h3&gt;
  
  
  7. High Order Components
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são High Order Components (HOCs) em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; HOCs são funções que recebem um componente e retornam um novo componente, permitindo reutilização de lógica e comportamento. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;withLogging&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;WrappedComponent&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rendering&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;WrappedComponent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;WrappedComponent&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;    &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;EnhancedComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;withLogging&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;MyComponent&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;withLogging&lt;/code&gt; é um HOC que registra quando &lt;code&gt;MyComponent&lt;/code&gt; é renderizado.&lt;/p&gt;




&lt;h3&gt;
  
  
  8. Micro Frontends
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são micro frontends?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Micro frontends são uma abordagem arquitetural que divide uma aplicação front-end em partes menores e independentes, permitindo que equipes diferentes trabalhem em diferentes partes da aplicação. Por exemplo, uma aplicação de e-commerce pode ter um micro frontend para o carrinho de compras, outro para a lista de produtos e outro para o checkout, cada um desenvolvido e implantado separadamente.&lt;/p&gt;


&lt;h3&gt;
  
  
  9. Redux
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é Redux e como ele funciona?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Redux é uma biblioteca para gerenciamento de estado em aplicações JavaScript. Ele utiliza um único store para manter o estado da aplicação e permite ações para modificar esse estado. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;reducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;INCREMENT&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
        &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;reducer&lt;/code&gt; define como o estado deve mudar em resposta a ações.&lt;/p&gt;




&lt;h3&gt;
  
  
  10. useEffect
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é o hook useEffect e como ele funciona?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O useEffect é um hook do React que permite realizar efeitos colaterais em componentes funcionais, como chamadas de API ou manipulação de DOM. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt; &lt;span class="c1"&gt;// Executa apenas uma vez após a montagem do componente&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Neste exemplo, &lt;code&gt;fetchData&lt;/code&gt; é chamado uma vez quando o componente é montado.&lt;/p&gt;




&lt;h3&gt;
  
  
  11. CSS e Pré-processadores
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são pré-processadores CSS e como eles funcionam?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Pré-processadores CSS, como SASS e LESS, permitem escrever CSS de forma mais dinâmica e organizada, utilizando variáveis, aninhamento e funções. Por exemplo, em SASS:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight scss"&gt;&lt;code&gt;&lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nc"&gt;.button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;darken&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$primary-color&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="m"&gt;10%&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;$primary-color&lt;/code&gt; é uma variável que pode ser reutilizada.&lt;/p&gt;




&lt;h3&gt;
  
  
  12. Custom Hooks
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são Custom Hooks em React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Custom Hooks são funções que permitem reutilizar lógica de estado e efeitos em componentes funcionais. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;useCounter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialValue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialValue&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;useCounter&lt;/code&gt; é um Custom Hook que encapsula a lógica de contagem.&lt;/p&gt;




&lt;h3&gt;
  
  
  13. Semântica e Acessibilidade
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como garantir semântica e acessibilidade em um site?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Utilizando tags HTML semânticas (como &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt;) e atributos ARIA para melhorar a acessibilidade. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;article&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Title&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is an article.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/article&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, o uso de &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; ajuda a definir a estrutura do conteúdo.&lt;/p&gt;




&lt;h3&gt;
  
  
  14. SEO
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é SEO e como aplicá-lo em um projeto?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; SEO (Search Engine Optimization) é o processo de otimizar um site para melhorar sua visibilidade nos motores de busca. Isso inclui o uso de palavras-chave relevantes, meta tags e conteúdo de qualidade. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"description"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"This is a description of the page."&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, a meta tag &lt;code&gt;description&lt;/code&gt; ajuda os motores de busca a entender o conteúdo da página.&lt;/p&gt;




&lt;h3&gt;
  
  
  15. Sincronicidade no JavaScript
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como funciona a sincronicidade no JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; JavaScript é uma linguagem de programação assíncrona que utiliza um modelo de execução baseado em eventos. Isso permite que operações assíncronas sejam realizadas sem bloquear a execução do código. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Start&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Timeout&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;End&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Saída: Start, End, Timeout&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;setTimeout&lt;/code&gt; é assíncrono e não bloqueia a execução.&lt;/p&gt;




&lt;h3&gt;
  
  
  16. Composição vs Herança
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Qual é a diferença entre composição e herança em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Composição é a prática de construir objetos a partir de outros objetos, enquanto herança é um mecanismo que permite que um objeto herde propriedades e métodos de outro. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Composição&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;drive&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Driving&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sportsCar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;car&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nf"&gt;turbo&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Turbo mode&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Herança&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;speak&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Animal speaks&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;bark&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Woof&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;sportsCar&lt;/code&gt; usa composição, enquanto &lt;code&gt;Dog&lt;/code&gt; usa herança.&lt;/p&gt;




&lt;h3&gt;
  
  
  17. Call, Apply, Bind
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que são os métodos call, apply e bind em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Esses métodos são usados para definir o contexto de execução de uma função. &lt;code&gt;call&lt;/code&gt; e &lt;code&gt;apply&lt;/code&gt; invocam a função imediatamente, enquanto &lt;code&gt;bind&lt;/code&gt; retorna uma nova função com o contexto definido. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;
&lt;span class="nx"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;apply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greetJohn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;greetJohn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello, John"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;call&lt;/code&gt; e &lt;code&gt;apply&lt;/code&gt; executam a função imediatamente, enquanto &lt;code&gt;bind&lt;/code&gt; cria uma nova função.&lt;/p&gt;




&lt;h3&gt;
  
  
  18. Prototype Chain
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é a cadeia de protótipos em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; A cadeia de protótipos é um mecanismo que permite que objetos herdem propriedades e métodos de outros objetos. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;animal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;speak&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Animal speaks&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;animal&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bark&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Woof&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;speak&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Animal speaks"&lt;/span&gt;
&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;bark&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Woof"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;dog&lt;/code&gt; herda o método &lt;code&gt;speak&lt;/code&gt; de &lt;code&gt;animal&lt;/code&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  19. Modules
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como funcionam os módulos em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Módulos permitem dividir o código em arquivos separados, facilitando a organização e reutilização. O ECMAScript introduziu a sintaxe &lt;code&gt;import&lt;/code&gt; e &lt;code&gt;export&lt;/code&gt; para trabalhar com módulos. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// module.js&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// main.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./module.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// "Hello"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, &lt;code&gt;greet&lt;/code&gt; é exportado de &lt;code&gt;module.js&lt;/code&gt; e importado em &lt;code&gt;main.js&lt;/code&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  20. Error Handling
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como fazer tratamento de erros em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; O tratamento de erros em JavaScript pode ser feito utilizando &lt;code&gt;try&lt;/code&gt;, &lt;code&gt;catch&lt;/code&gt; e &lt;code&gt;finally&lt;/code&gt;, permitindo capturar e lidar com exceções de forma controlada. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Something went wrong&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Something went wrong"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;finally&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Cleanup code here&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, o bloco &lt;code&gt;finally&lt;/code&gt; é executado independentemente de um erro ter ocorrido.&lt;/p&gt;




&lt;h3&gt;
  
  
  21. Type Coercion
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; O que é type coercion em JavaScript?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Type coercion é o processo automático de conversão de um tipo de dado em outro durante a avaliação de uma expressão. Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "55" (string)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0 (number)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui, a string "5" é convertida em número na segunda operação, mas não na primeira.&lt;/p&gt;




&lt;h3&gt;
  
  
  22. Git
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como resolver conflitos no Git?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Conflitos no Git ocorrem quando duas alterações diferentes são feitas na mesma linha de um arquivo. Para resolver, é necessário editar o arquivo manualmente, escolher as alterações desejadas e, em seguida, fazer um commit. Por exemplo:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Após um &lt;code&gt;git merge&lt;/code&gt;, você pode ver um conflito em um arquivo.&lt;/li&gt;
&lt;li&gt;Edite o arquivo para resolver o conflito.&lt;/li&gt;
&lt;li&gt;Adicione o arquivo resolvido com &lt;code&gt;git add&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Finalize o merge com &lt;code&gt;git commit&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  23. Frameworks
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Quais frameworks você usa para trabalhar com React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Os frameworks mais comuns para trabalhar com React incluem Create React App (CRA), Next.js e Gatsby. Cada um tem suas características:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Create React App (CRA)&lt;/strong&gt;: Ferramenta para configurar rapidamente um novo projeto React.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Next.js&lt;/strong&gt;: Framework para aplicações React que permite renderização do lado do servidor e geração de sites estáticos.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gatsby&lt;/strong&gt;: Framework para criar sites estáticos com React, focado em desempenho e SEO.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  24. Preparação para Entrevistas
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Como se preparar para entrevistas de emprego em desenvolvimento front-end?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; A preparação envolve revisar conceitos fundamentais, praticar perguntas comuns de entrevistas e estar atualizado sobre as tecnologias e frameworks relevantes. Algumas dicas incluem:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Praticar algoritmos e estruturas de dados.&lt;/li&gt;
&lt;li&gt;Revisar conceitos de JavaScript, CSS e HTML.&lt;/li&gt;
&lt;li&gt;Fazer mock interviews com amigos ou plataformas online.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  25. Recursos e Materiais de Estudo
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Pergunta:&lt;/strong&gt; Quais são os melhores recursos para estudar JavaScript e React?&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Resposta:&lt;/strong&gt; Existem muitos recursos online, incluindo cursos, tutoriais e documentação oficial. Algumas sugestões incluem:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Documentação do React&lt;/strong&gt;: A documentação oficial é um ótimo ponto de partida.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;freeCodeCamp&lt;/strong&gt;: Oferece cursos gratuitos sobre JavaScript e desenvolvimento web.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Codecademy&lt;/strong&gt;: Oferece cursos interativos sobre várias tecnologias, incluindo JavaScript e React.&lt;/li&gt;
&lt;/ul&gt;




</description>
      <category>frontend</category>
    </item>
    <item>
      <title>Sql Resumo</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Mon, 02 Dec 2024 23:48:35 +0000</pubDate>
      <link>https://dev.to/java2890/sql-resumo-1oll</link>
      <guid>https://dev.to/java2890/sql-resumo-1oll</guid>
      <description>&lt;p&gt;Aqui está um guia detalhado com explicações e exemplos para cada módulo e tópico do índice de SQL. Para facilitar, os exemplos são simples e práticos, mas podem ser ajustados conforme necessário.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Módulo 1.0 | Fundamentos de SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Introdução ao SQL&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; SQL (Structured Query Language) é usado para gerenciar e consultar bancos de dados.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;-- Retorna todos os dados da tabela employees.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. SQL ou Excel?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; SQL é mais eficiente que Excel para grandes volumes de dados e manipulações complexas.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
No Excel: Filtro de dados manual.&lt;br&gt;&lt;br&gt;
No SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;sales&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;amount&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;-- Filtra vendas acima de 1000.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Por que SQL?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; SQL é amplamente usado por sua velocidade e capacidade de lidar com dados grandes.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Data World e Primeira Query&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Data World é uma plataforma para executar queries SQL.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'IT'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;5. Estrutura de Query&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Toda query SQL segue a estrutura: &lt;code&gt;SELECT&lt;/code&gt;, &lt;code&gt;FROM&lt;/code&gt;, &lt;code&gt;WHERE&lt;/code&gt;, &lt;code&gt;ORDER BY&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;salary&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt; &lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;6. Tipos de Dados&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; SQL suporta tipos como &lt;code&gt;INT&lt;/code&gt;, &lt;code&gt;VARCHAR&lt;/code&gt;, &lt;code&gt;DATE&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;products&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="nb"&gt;INT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="nb"&gt;VARCHAR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;price&lt;/span&gt; &lt;span class="nb"&gt;DECIMAL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;Módulo 2.0 | Condições e Filtros em SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Where Condition&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Filtro de dados baseado em condições.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Order By&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Ordena os dados por uma ou mais colunas.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;salary&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;salary&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Operadores Lógicos (AND, OR, NOT)&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Combina ou exclui condições.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'HR'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;Módulo 3.0 | Delimitadores e Operadores em SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Comentários em SQL&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Anotam o código sem afetar a execução.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Este é um comentário.&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Between e IN&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Filtros para intervalos (&lt;code&gt;BETWEEN&lt;/code&gt;) ou listas específicas (&lt;code&gt;IN&lt;/code&gt;).&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt; &lt;span class="k"&gt;BETWEEN&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="mi"&gt;35&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'IT'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'HR'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Uso do LIKE&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Busca padrões específicos em strings.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'A%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;-- Nomes começando com A.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4. Strings e Operadores Avançados&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Manipula texto e realiza cálculos.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;CONCAT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;first_name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;' '&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;last_name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;full_name&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;Módulo 4.0 | Operações Avançadas em SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Union&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Combina resultados de múltiplas queries.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'IT'&lt;/span&gt;
&lt;span class="k"&gt;UNION&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;salary&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Joins e Múltiplas Tabelas&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Relaciona tabelas usando colunas comuns.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;department_name&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;
&lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;departments&lt;/span&gt; &lt;span class="n"&gt;d&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;department_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;d&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Agregações (Aggregation)&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Realiza cálculos como soma, média, contagem.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;salary&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;average_salary&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;department&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4. Subselect&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Explicação:&lt;/strong&gt; Query dentro de outra query.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Exemplo:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;employees&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;department_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;departments&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;department_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'IT'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






</description>
      <category>sql</category>
    </item>
    <item>
      <title>SQL Exercicios.</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Mon, 02 Dec 2024 23:01:38 +0000</pubDate>
      <link>https://dev.to/java2890/sql-exercicios-5724</link>
      <guid>https://dev.to/java2890/sql-exercicios-5724</guid>
      <description>&lt;p&gt;Aqui estão exercícios SQL com título, tabela, problema, dica e resolução.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;1. Recuperar dados simples de uma tabela&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome      | cidade       | estado | idade |&lt;br&gt;&lt;br&gt;
|------------|-----------|--------------|--------|-------|&lt;br&gt;&lt;br&gt;
| 1          | Ana       | São Paulo    | SP     | 25    |&lt;br&gt;&lt;br&gt;
| 2          | João      | Rio de Janeiro | RJ  | 30    |&lt;br&gt;&lt;br&gt;
| 3          | Maria     | Belo Horizonte | MG | 35    |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste todos os clientes que moram no estado de São Paulo (SP).&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a cláusula &lt;code&gt;WHERE&lt;/code&gt; para filtrar os dados com base no estado.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;estado&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'SP'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;2. Ordenar dados por preço&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto  | preco  | categoria     |&lt;br&gt;&lt;br&gt;
|------------|---------------|--------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular       | 1500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook      | 3500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira     | 2500.0 | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste todos os produtos ordenados pelo preço em ordem crescente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a cláusula &lt;code&gt;ORDER BY&lt;/code&gt; para ordenar os dados.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="k"&gt;ASC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;3. Contar o número de registros&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Quantas vendas foram realizadas no total?&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função de agregação &lt;code&gt;COUNT(*)&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_vendas&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;4. Soma de valores por cliente&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Qual foi o valor total das vendas por cliente?&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;SUM(valor)&lt;/code&gt; e &lt;code&gt;GROUP BY&lt;/code&gt; para agrupar os dados.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_gasto&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;5. Filtrar por data&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste todas as vendas realizadas após o dia 1º de novembro de 2024.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a cláusula &lt;code&gt;WHERE&lt;/code&gt; com comparação de datas.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;data_venda&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'2024-11-01'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;6. Encontrar produtos com preço maior que a média&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto  | preco  | categoria     |&lt;br&gt;&lt;br&gt;
|------------|---------------|--------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular       | 1500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook      | 3500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira     | 2500.0 | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os produtos cujo preço seja maior que a média de todos os produtos.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use uma subconsulta para calcular a média dos preços.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;preco&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;7. Agrupar e filtrar com HAVING&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os clientes que realizaram mais de uma venda.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;GROUP BY&lt;/code&gt; para agrupar e &lt;code&gt;HAVING&lt;/code&gt; para filtrar após o agrupamento.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_vendas&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;
&lt;span class="k"&gt;HAVING&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;8. Subconsulta em uma cláusula WHERE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto  | preco  | categoria     |&lt;br&gt;&lt;br&gt;
|------------|---------------|--------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular       | 1500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook      | 3500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira     | 2500.0 | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os produtos cuja categoria seja "Eletrônicos" e cujo preço seja superior ao preço médio dos produtos dessa categoria.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use uma subconsulta dentro da cláusula &lt;code&gt;WHERE&lt;/code&gt; para calcular a média dos preços.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Eletrônicos'&lt;/span&gt;
&lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;preco&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Eletrônicos'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;9. Função de janela: soma acumulada&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Adicione uma coluna que mostre a soma acumulada das vendas, ordenada pela data da venda.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função de janela &lt;code&gt;SUM()&lt;/code&gt; com &lt;code&gt;OVER()&lt;/code&gt; para somar acumuladamente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;venda_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
       &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;OVER&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;data_venda&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;soma_acumulada&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;10. Join entre tabelas: Clientes e Vendas&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabelas: &lt;code&gt;clientes&lt;/code&gt; e &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome      | cidade       | estado | idade |&lt;br&gt;&lt;br&gt;
|------------|-----------|--------------|--------|-------|&lt;br&gt;&lt;br&gt;
| 1          | Ana       | São Paulo    | SP     | 25    |&lt;br&gt;&lt;br&gt;
| 2          | João      | Rio de Janeiro | RJ  | 30    |&lt;br&gt;&lt;br&gt;
| 3          | Maria     | Belo Horizonte | MG | 35    |  &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;venda_id&lt;/th&gt;
&lt;th&gt;cliente_id&lt;/th&gt;
&lt;th&gt;valor&lt;/th&gt;
&lt;th&gt;data_venda&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;100.0&lt;/td&gt;
&lt;td&gt;2024-11-01&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;200.0&lt;/td&gt;
&lt;td&gt;2024-11-02&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;300.0&lt;/td&gt;
&lt;td&gt;2024-11-03&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Exiba o nome do cliente e o valor total gasto por ele.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;JOIN&lt;/code&gt; para combinar as tabelas &lt;code&gt;clientes&lt;/code&gt; e &lt;code&gt;vendas&lt;/code&gt; e depois some os valores de cada cliente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;v&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_gasto&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;
&lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt; &lt;span class="n"&gt;v&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;v&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cliente_id&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nome&lt;/span&gt;

&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Claro! Aqui estão mais 10 exercícios no mesmo formato que você pediu.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;11. Recuperar dados de várias tabelas com JOIN&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabelas: &lt;code&gt;clientes&lt;/code&gt; e &lt;code&gt;pedidos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade      | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|-------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo   | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro | RJ  |&lt;br&gt;&lt;br&gt;
| 3          | Maria    | Belo Horizonte | MG  |  &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;pedido_id&lt;/th&gt;
&lt;th&gt;cliente_id&lt;/th&gt;
&lt;th&gt;valor&lt;/th&gt;
&lt;th&gt;data_pedido&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;150.0&lt;/td&gt;
&lt;td&gt;2024-11-01&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;200.0&lt;/td&gt;
&lt;td&gt;2024-11-02&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;300.0&lt;/td&gt;
&lt;td&gt;2024-11-03&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Exiba o nome do cliente e os detalhes dos pedidos feitos por ele.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;JOIN&lt;/code&gt; para unir as tabelas &lt;code&gt;clientes&lt;/code&gt; e &lt;code&gt;pedidos&lt;/code&gt; com base na coluna &lt;code&gt;cliente_id&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;pedido_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data_pedido&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;
&lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;pedidos&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;12. Filtrar dados com IN&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | categoria   | preco  |&lt;br&gt;&lt;br&gt;
|------------|--------------|-------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | Eletrônicos | 1500.0 |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | Eletrônicos | 3500.0 |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | Eletrodomésticos | 2500.0 |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os produtos que pertencem às categorias "Eletrônicos" ou "Eletrodomésticos".&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a cláusula &lt;code&gt;IN&lt;/code&gt; para especificar múltiplos valores possíveis para a coluna &lt;code&gt;categoria&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'Eletrônicos'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'Eletrodomésticos'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;13. Encontrar o maior valor de uma coluna&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 500.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Encontre a maior venda registrada.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função de agregação &lt;code&gt;MAX()&lt;/code&gt; para encontrar o maior valor.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;MAX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;maior_venda&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;14. Ordenar dados por múltiplas colunas&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | idade | cidade       |&lt;br&gt;&lt;br&gt;
|------------|----------|-------|--------------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | 25    | São Paulo    |&lt;br&gt;&lt;br&gt;
| 2          | João     | 30    | Rio de Janeiro |&lt;br&gt;&lt;br&gt;
| 3          | Maria    | 28    | Belo Horizonte |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os clientes ordenados primeiro pela idade em ordem crescente e depois pelo nome em ordem alfabética.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;ORDER BY&lt;/code&gt; com múltiplas colunas.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt; &lt;span class="k"&gt;ASC&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt; &lt;span class="k"&gt;ASC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;15. Atualizar valores em uma tabela&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | preco  | categoria     |&lt;br&gt;&lt;br&gt;
|------------|--------------|--------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | 1500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | 3500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | 2500.0 | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Aumente o preço de todos os produtos da categoria "Eletrônicos" em 10%.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a instrução &lt;code&gt;UPDATE&lt;/code&gt; com uma cláusula &lt;code&gt;SET&lt;/code&gt; para modificar valores.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;UPDATE&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;SET&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Eletrônicos'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;16. Remover registros de uma tabela&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro | RJ  |&lt;br&gt;&lt;br&gt;
| 3          | Maria    | Belo Horizonte | MG  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Exclua todos os clientes que moram no estado de Minas Gerais (MG).&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a instrução &lt;code&gt;DELETE&lt;/code&gt; com uma cláusula &lt;code&gt;WHERE&lt;/code&gt; para remover registros específicos.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;estado&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'MG'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;17. Subconsulta em uma cláusula SELECT&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | preco  | categoria     |&lt;br&gt;&lt;br&gt;
|------------|--------------|--------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | 1500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | 3500.0 | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | 2500.0 | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste todos os produtos, incluindo o preço médio dos produtos da mesma categoria.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use uma subconsulta na cláusula &lt;code&gt;SELECT&lt;/code&gt; para calcular a média dos preços por categoria.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;preco&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt; &lt;span class="n"&gt;p2&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;p2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;categoria&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;p1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;categoria&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;media_categoria&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt; &lt;span class="n"&gt;p1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;18. Utilizar CASE para criar colunas condicionais&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 300.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Crie uma coluna adicional que indique se o valor da venda é maior que 150.0, com "Alta" ou "Baixa" venda.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função &lt;code&gt;CASE&lt;/code&gt; para criar uma condição.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;venda_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;data_venda&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="k"&gt;CASE&lt;/span&gt; 
           &lt;span class="k"&gt;WHEN&lt;/span&gt; &lt;span class="n"&gt;valor&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;150&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="k"&gt;THEN&lt;/span&gt; &lt;span class="s1"&gt;'Alta'&lt;/span&gt;
           &lt;span class="k"&gt;ELSE&lt;/span&gt; &lt;span class="s1"&gt;'Baixa'&lt;/span&gt;
       &lt;span class="k"&gt;END&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;tipo_venda&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;19. Encontrar registros duplicados&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro | RJ  |&lt;br&gt;&lt;br&gt;
| 3          | Ana      | São Paulo    | SP     |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Encontre clientes que possuem o mesmo nome e cidade.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;GROUP BY&lt;/code&gt; e &lt;code&gt;HAVING&lt;/code&gt; para identificar duplicados.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;qtd&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt;
&lt;span class="k"&gt;HAVING&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;20. Consultar dados com LIKE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | categoria     |&lt;br&gt;&lt;br&gt;
|------------|--------------|---------------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | Eletrônicos   |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | Eletrodomésticos |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste todos os produtos cujo nome começa com "Cel".&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a cláusula &lt;code&gt;LIKE&lt;/code&gt; com o operador &lt;code&gt;%&lt;/code&gt; para buscar padrões.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'Cel%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Aqui estão mais 10 exercícios SQL no formato solicitado:&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;21. Agrupar dados com COUNT&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;pedidos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| pedido_id | cliente_id | valor  | data_pedido  |&lt;br&gt;&lt;br&gt;
|-----------|------------|--------|--------------|&lt;br&gt;&lt;br&gt;
| 1         | 1          | 100.0  | 2024-11-01   |&lt;br&gt;&lt;br&gt;
| 2         | 2          | 200.0  | 2024-11-02   |&lt;br&gt;&lt;br&gt;
| 3         | 1          | 150.0  | 2024-11-03   |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Conte quantos pedidos cada cliente fez.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função &lt;code&gt;COUNT()&lt;/code&gt; para contar o número de pedidos por cliente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_pedidos&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;pedidos&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;22. Limitar o número de resultados&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | preco  |&lt;br&gt;&lt;br&gt;
|------------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | 1500.0 |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | 3500.0 |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | 2500.0 |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste apenas os 2 produtos mais caros.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;LIMIT&lt;/code&gt; para restringir o número de resultados retornados.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;
&lt;span class="k"&gt;LIMIT&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;23. Excluir dados com base em outra tabela&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro | RJ  |  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;pedidos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| pedido_id  | cliente_id | valor  |&lt;br&gt;&lt;br&gt;
|------------|------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | 1          | 100.0  |&lt;br&gt;&lt;br&gt;
| 2          | 2          | 200.0  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Excluir todos os clientes que não realizaram pedidos.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use uma subconsulta para encontrar os clientes sem pedidos e depois exclua-os.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="k"&gt;NOT&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;pedidos&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;24. Encontrar valores nulos&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | NULL         | RJ     |&lt;br&gt;&lt;br&gt;
| 3          | Maria    | Belo Horizonte | MG  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os clientes cujas cidades estão nulas.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;IS NULL&lt;/code&gt; para encontrar valores nulos em uma coluna.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt; &lt;span class="k"&gt;IS&lt;/span&gt; &lt;span class="k"&gt;NULL&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;25. Calcular soma com GROUP BY&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  | data_venda  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|-------------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  | 2024-11-01  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  | 2024-11-02  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 150.0  | 2024-11-03  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Calcule o total de vendas por cliente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função &lt;code&gt;SUM()&lt;/code&gt; para somar os valores das vendas e agrupar por cliente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_vendas&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;26. Subconsulta no WHERE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       | estado |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    | SP     |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro | RJ  |  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;pedidos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| pedido_id  | cliente_id | valor  |&lt;br&gt;&lt;br&gt;
|------------|------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | 1          | 100.0  |&lt;br&gt;&lt;br&gt;
| 2          | 2          | 200.0  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os clientes que fizeram um pedido com valor superior a 150.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use uma subconsulta para filtrar os clientes que possuem pedidos de valor maior que 150.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cidade&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;cliente_id&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;pedidos&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;valor&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;150&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;27. Alterar nome de coluna&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | preco  |&lt;br&gt;&lt;br&gt;
|------------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | 1500.0 |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | 3500.0 |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Renomeie a coluna &lt;code&gt;preco&lt;/code&gt; para &lt;code&gt;valor_produto&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;ALTER TABLE&lt;/code&gt; para renomear uma coluna.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;RENAME&lt;/span&gt; &lt;span class="k"&gt;COLUMN&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="k"&gt;TO&lt;/span&gt; &lt;span class="n"&gt;valor_produto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;28. Dividir dados com SUBSTRING&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;clientes&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| cliente_id | nome     | cidade       |&lt;br&gt;&lt;br&gt;
|------------|----------|--------------|&lt;br&gt;&lt;br&gt;
| 1          | Ana      | São Paulo    |&lt;br&gt;&lt;br&gt;
| 2          | João     | Rio de Janeiro |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Exiba os primeiros 3 caracteres do nome de cada cliente.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função &lt;code&gt;SUBSTRING()&lt;/code&gt; para extrair parte de uma string.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;SUBSTRING&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;primeiros_3_caracteres&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;clientes&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;29. Calcular a média de uma coluna&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;vendas&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| venda_id | cliente_id | valor  |&lt;br&gt;&lt;br&gt;
|----------|------------|--------|&lt;br&gt;&lt;br&gt;
| 1        | 1          | 100.0  |&lt;br&gt;&lt;br&gt;
| 2        | 2          | 200.0  |&lt;br&gt;&lt;br&gt;
| 3        | 1          | 150.0  |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Calcule o valor médio das vendas.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use a função &lt;code&gt;AVG()&lt;/code&gt; para calcular a média de uma coluna numérica.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;media_vendas&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;vendas&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;30. Consultar dados com BETWEEN&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Tabela: &lt;code&gt;produtos&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
| produto_id | nome_produto | preco  |&lt;br&gt;&lt;br&gt;
|------------|--------------|--------|&lt;br&gt;&lt;br&gt;
| 1          | Celular      | 1500.0 |&lt;br&gt;&lt;br&gt;
| 2          | Notebook     | 3500.0 |&lt;br&gt;&lt;br&gt;
| 3          | Geladeira    | 2500.0 |  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Problema&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Liste os produtos que têm preço entre 1500 e 3000.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dica&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Use &lt;code&gt;BETWEEN&lt;/code&gt; para filtrar dados dentro de um intervalo.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Resolução&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_produto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;produtos&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;preco&lt;/span&gt; &lt;span class="k"&gt;BETWEEN&lt;/span&gt; &lt;span class="mi"&gt;1500&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






</description>
      <category>sql</category>
      <category>exercicios</category>
    </item>
    <item>
      <title>BigQuery SQL</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Mon, 02 Dec 2024 22:40:01 +0000</pubDate>
      <link>https://dev.to/java2890/bigquery-sql-55</link>
      <guid>https://dev.to/java2890/bigquery-sql-55</guid>
      <description>&lt;p&gt;Aqui está uma coleção de consultas avançadas em SQL, incluindo técnicas poderosas como funções de janela, manipulação de strings, consultas recursivas, otimização e exemplos específicos de BigQuery. Esses exemplos são úteis para resolver problemas complexos em projetos reais. &lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;1. Funções de janela (Window Functions)&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As funções de janela são ótimas para calcular agregações em subconjuntos de dados sem perder os detalhes linha a linha.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Classificar filmes por avaliação (rating) dentro de cada ano de lançamento&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;release_year&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;ROW_NUMBER&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="n"&gt;OVER&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;PARTITION&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;release_year&lt;/span&gt; &lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;rating&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;rank&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;netflix&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Exemplo: Calcular a média acumulada de avaliações&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;release_year&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;OVER&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;PARTITION&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;release_year&lt;/span&gt; &lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;release_year&lt;/span&gt; &lt;span class="k"&gt;ROWS&lt;/span&gt; &lt;span class="k"&gt;BETWEEN&lt;/span&gt; &lt;span class="n"&gt;UNBOUNDED&lt;/span&gt; &lt;span class="k"&gt;PRECEDING&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="k"&gt;CURRENT&lt;/span&gt; &lt;span class="k"&gt;ROW&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;media_acumulada&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;netflix&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;ROW_NUMBER()&lt;/code&gt;&lt;/strong&gt;: Atribui uma numeração a cada linha dentro de uma partição (nesse caso, por ano de lançamento).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;AVG()&lt;/code&gt; com &lt;code&gt;OVER&lt;/code&gt;&lt;/strong&gt;: Calcula uma média acumulada considerando as linhas anteriores dentro da mesma partição.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;2. Manipulação de Strings&lt;/strong&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Dividir nomes dos filmes e extrair a primeira palavra&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;SPLIT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;' '&lt;/span&gt;&lt;span class="p"&gt;)[&lt;/span&gt;&lt;span class="k"&gt;OFFSET&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;primeira_palavra&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;netflix&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Exemplo: Buscar títulos que começam com "The"&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;title&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;netflix&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;title&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'The%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Exemplo: Substituir espaços por traços&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;REPLACE&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;' '&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'-'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;titulo_formatado&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;netflix&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;SPLIT()&lt;/code&gt;&lt;/strong&gt;: Divide strings com base em um delimitador, útil para extração de partes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;LIKE&lt;/code&gt;&lt;/strong&gt;: Permite buscas com padrões.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;REPLACE()&lt;/code&gt;&lt;/strong&gt;: Substitui partes específicas de uma string.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;3. Consultas Recursivas&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Consultas recursivas ajudam a resolver problemas hierárquicos, como árvores ou cadeias.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Montar uma hierarquia fictícia de categorias de filmes&lt;/span&gt;
&lt;span class="k"&gt;WITH&lt;/span&gt; &lt;span class="k"&gt;RECURSIVE&lt;/span&gt; &lt;span class="n"&gt;categorias&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;SELECT&lt;/span&gt; 
        &lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;nome_categoria&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;id_categoria_pai&lt;/span&gt;
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;categorias_filmes&lt;/span&gt;
    &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;id_categoria_pai&lt;/span&gt; &lt;span class="k"&gt;IS&lt;/span&gt; &lt;span class="k"&gt;NULL&lt;/span&gt; &lt;span class="c1"&gt;-- Começa pela raiz&lt;/span&gt;

    &lt;span class="k"&gt;UNION&lt;/span&gt; &lt;span class="k"&gt;ALL&lt;/span&gt;

    &lt;span class="k"&gt;SELECT&lt;/span&gt; 
        &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nome_categoria&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id_categoria_pai&lt;/span&gt;
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;categorias_filmes&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;
    &lt;span class="k"&gt;INNER&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;categorias&lt;/span&gt; &lt;span class="n"&gt;cat&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="k"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id_categoria_pai&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;categorias&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;WITH RECURSIVE&lt;/code&gt;&lt;/strong&gt;: Define uma consulta que se auto-referência para explorar estruturas hierárquicas.&lt;/li&gt;
&lt;li&gt;A consulta base (&lt;code&gt;WHERE id_categoria_pai IS NULL&lt;/code&gt;) identifica a raiz, e o &lt;code&gt;UNION ALL&lt;/code&gt; permite que as subcategorias sejam adicionadas.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;4. Otimização com Indexes e Subconsultas CTE&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Usar índices e dividir consultas em etapas pode melhorar a eficiência.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Calcular a receita total por gênero usando uma CTE&lt;/span&gt;
&lt;span class="k"&gt;WITH&lt;/span&gt; &lt;span class="n"&gt;receita_por_genero&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;SELECT&lt;/span&gt; 
        &lt;span class="n"&gt;genero&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;receita&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_receita&lt;/span&gt;
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;filmes&lt;/span&gt;
    &lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;genero&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; 
    &lt;span class="n"&gt;genero&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;total_receita&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;receita_por_genero&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;total_receita&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1000000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;WITH&lt;/code&gt;&lt;/strong&gt;: Cria uma consulta temporária reutilizável (CTE) para tornar o código mais limpo e eficiente.&lt;/li&gt;
&lt;li&gt;Filtragem em &lt;code&gt;total_receita &amp;gt; 1000000&lt;/code&gt; ocorre somente após o agrupamento.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;5. Consultas BigQuery Avançadas&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;BigQuery usa SQL padrão, mas com recursos específicos para grandes volumes de dados e análises avançadas.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo 1: Análise de logs com ARRAYs e STRUCTs
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Dataset fictício: Análise de cliques em anúncios&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;ARRAY_AGG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;STRUCT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ad_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;click_time&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;cliques&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`projeto.dataset.logs_cliques`&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;ARRAY_AGG&lt;/code&gt;&lt;/strong&gt;: Agrupa os registros em um array, mantendo múltiplos cliques por usuário.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;STRUCT&lt;/code&gt;&lt;/strong&gt;: Permite armazenar colunas associadas dentro do array.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Exemplo 2: Análise de Tabelas Particionadas
&lt;/h3&gt;

&lt;p&gt;BigQuery funciona bem com tabelas particionadas, o que melhora o desempenho em consultas específicas.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Consultar apenas partições recentes (últimos 7 dias)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_cliques&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`projeto.dataset.logs_cliques`&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;_PARTITIONTIME&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="n"&gt;TIMESTAMP_SUB&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;CURRENT_TIMESTAMP&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="n"&gt;INTERVAL&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt; &lt;span class="k"&gt;DAY&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;_PARTITIONTIME&lt;/code&gt;&lt;/strong&gt;: Coluna especial usada em tabelas particionadas para identificar partições.&lt;/li&gt;
&lt;li&gt;Limitar as partições reduz o custo da consulta.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Exemplo 3: Funções Analíticas com Geolocalização
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Identificar o país mais frequente de acesso para cada usuário&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;APPROX_TOP_COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;country&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;pais_mais_frequente&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`projeto.dataset.logs_acessos`&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;APPROX_TOP_COUNT&lt;/code&gt;&lt;/strong&gt;: Função otimizada para identificar valores mais frequentes em grandes conjuntos de dados.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Exemplo 4: Exploração de JSON em BigQuery
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Extrair dados estruturados de uma coluna JSON&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;JSON_VALUE&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'$.user.id'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;JSON_VALUE&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'$.user.name'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;user_name&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`projeto.dataset.logs_api`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;JSON_VALUE&lt;/code&gt;&lt;/strong&gt;: Extrai valores de uma string JSON com base em um caminho especificado.&lt;/li&gt;
&lt;li&gt;Ideal para logs de APIs ou dados semiestruturados.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;6. Consultas de Data e Tempo&lt;/strong&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Exemplo: Agrupar por dia da semana&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="k"&gt;EXTRACT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;DAYOFWEEK&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;data_acesso&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;dia_semana&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_acessos&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;acessos&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;dia_semana&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;total_acessos&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Exemplo: Encontrar a diferença em dias entre duas datas&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;DATE_DIFF&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;data_fim&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;data_inicio&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;DAY&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;dias_diferenca&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;acessos&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Exemplo: Criar intervalos de tempo customizados&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;TIMESTAMP_TRUNC&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;data_acesso&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;HOUR&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;hora&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;acessos_por_hora&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;acessos&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;hora&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;hora&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explicação:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Funções de data/tempo como &lt;code&gt;EXTRACT&lt;/code&gt;, &lt;code&gt;DATE_DIFF&lt;/code&gt; e &lt;code&gt;TIMESTAMP_TRUNC&lt;/code&gt; ajudam a analisar tendências temporais e criar relatórios.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;😊&lt;/p&gt;

</description>
      <category>bigquery</category>
      <category>sql</category>
    </item>
    <item>
      <title>SQL Query basicos.</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Mon, 02 Dec 2024 22:36:25 +0000</pubDate>
      <link>https://dev.to/java2890/sql-query-basicos-1ehj</link>
      <guid>https://dev.to/java2890/sql-query-basicos-1ehj</guid>
      <description>&lt;p&gt;Aqui está a lista de 12 exemplos SQL, com explicações mais detalhadas diretamente no código como comentários. &lt;/p&gt;




&lt;h3&gt;
  
  
  1. &lt;strong&gt;Selecionar dados básicos&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Seleciona todas as colunas e registros da tabela&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Seleciona apenas as colunas "coluna1" e "coluna2" de todos os registros&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;SELECT *&lt;/code&gt; traz todas as colunas, mas pode ser ineficiente em tabelas grandes.&lt;/li&gt;
&lt;li&gt;Especificar colunas é uma boa prática para reduzir o tamanho da consulta e torná-la mais legível.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  2. &lt;strong&gt;Filtrar registros com &lt;code&gt;WHERE&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Filtra registros onde a "coluna" tem o valor exato 'valor'&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'valor'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Usa operadores lógicos para combinar condições&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna1&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Ativo'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Verifica se o valor está em uma lista específica&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'valor1'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'valor2'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'valor3'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;-- Filtra registros dentro de um intervalo de valores&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="k"&gt;BETWEEN&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="k"&gt;AND&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Busca padrões usando LIKE&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="k"&gt;LIKE&lt;/span&gt; &lt;span class="s1"&gt;'%palavra%'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;-- "%palavra%" significa que pode ter algo antes ou depois de "palavra"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;WHERE&lt;/code&gt; restringe os resultados da consulta.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;LIKE&lt;/code&gt; é útil para buscas parciais, como encontrar palavras em um texto.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  3. &lt;strong&gt;Ordenar resultados com &lt;code&gt;ORDER BY&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Ordena os registros pela "coluna1" de forma ascendente (padrão)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Ordena pela "coluna1" de forma descendente&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna1&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;ORDER BY&lt;/code&gt; organiza os resultados, útil para relatórios ou quando a ordem importa.&lt;/li&gt;
&lt;li&gt;Combine com &lt;code&gt;LIMIT&lt;/code&gt; para exibir os primeiros registros organizados.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  4. &lt;strong&gt;Limitar resultados com &lt;code&gt;LIMIT&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Retorna no máximo 10 registros&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;LIMIT&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Limitar os resultados é especialmente útil para visualizar apenas uma parte dos dados durante a análise.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  5. &lt;strong&gt;Usar funções de agregação&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Conta o número total de registros na tabela&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Calcula soma, média, menor e maior valor de uma coluna&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;soma&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
       &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;media&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
       &lt;span class="k"&gt;MIN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;minimo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
       &lt;span class="k"&gt;MAX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;maximo&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Agrupa por uma coluna e conta os registros em cada grupo&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Funções como &lt;code&gt;COUNT&lt;/code&gt;, &lt;code&gt;SUM&lt;/code&gt;, &lt;code&gt;AVG&lt;/code&gt;, &lt;code&gt;MIN&lt;/code&gt; e &lt;code&gt;MAX&lt;/code&gt; resumem os dados.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;GROUP BY&lt;/code&gt; para aplicar funções de agregação em grupos específicos.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  6. &lt;strong&gt;Trabalhar com &lt;code&gt;JOINs&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- INNER JOIN: retorna registros que têm correspondência em ambas as tabelas&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna2&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela1&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;
&lt;span class="k"&gt;INNER&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;tabela2&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- LEFT JOIN: retorna tudo da tabela1 e as correspondências da tabela2 (se existirem)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna2&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela1&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;
&lt;span class="k"&gt;LEFT&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;tabela2&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- RIGHT JOIN: retorna tudo da tabela2 e as correspondências da tabela1 (se existirem)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna2&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela1&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;
&lt;span class="k"&gt;RIGHT&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;tabela2&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- FULL JOIN: retorna tudo de ambas as tabelas, com ou sem correspondências&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna2&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela1&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;
&lt;span class="k"&gt;FULL&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;tabela2&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chave&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;JOINs&lt;/code&gt; conectam dados de diferentes tabelas.&lt;/li&gt;
&lt;li&gt;Escolha o tipo de &lt;code&gt;JOIN&lt;/code&gt; com base em quais dados você precisa incluir.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  7. &lt;strong&gt;Trabalhar com subconsultas&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Subconsulta no WHERE para buscar valores específicos de outra tabela&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="k"&gt;IN&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; 
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;outra_tabela&lt;/span&gt; 
    &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;condicao&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;-- Subconsulta em FROM para criar uma tabela temporária&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;sub&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; 
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt; 
    &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;condicao&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;sub&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;sub&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Subconsultas tornam as consultas mais flexíveis e poderosas, mas podem ser mais lentas.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  8. &lt;strong&gt;Criar colunas calculadas&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Adiciona uma coluna calculada multiplicando "coluna2" por 2&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;calculo&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Cria categorias com base em condições usando CASE&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="k"&gt;CASE&lt;/span&gt; 
           &lt;span class="k"&gt;WHEN&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="k"&gt;THEN&lt;/span&gt; &lt;span class="s1"&gt;'Alto'&lt;/span&gt;
           &lt;span class="k"&gt;ELSE&lt;/span&gt; &lt;span class="s1"&gt;'Baixo'&lt;/span&gt;
       &lt;span class="k"&gt;END&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;categoria&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Colunas calculadas permitem manipular dados diretamente na consulta.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  9. &lt;strong&gt;Excluir duplicatas com &lt;code&gt;DISTINCT&lt;/code&gt;&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Seleciona apenas valores únicos de uma coluna&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;DISTINCT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;DISTINCT&lt;/code&gt; é usado para eliminar duplicatas e exibir apenas valores únicos.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  10. &lt;strong&gt;Atualizar e excluir dados&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Atualiza o valor de uma coluna para registros que atendem a uma condição&lt;/span&gt;
&lt;span class="k"&gt;UPDATE&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;SET&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'novo_valor'&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'condicao'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Remove registros que atendem a uma condição&lt;/span&gt;
&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'condicao'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cuidado&lt;/strong&gt;: Sempre use &lt;code&gt;WHERE&lt;/code&gt; para evitar alterar ou excluir toda a tabela.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  11. &lt;strong&gt;Criar e manipular tabelas&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Cria uma nova tabela com colunas e tipos de dados definidos&lt;/span&gt;
&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;nova_tabela&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;coluna1&lt;/span&gt; &lt;span class="nb"&gt;INT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;coluna2&lt;/span&gt; &lt;span class="nb"&gt;VARCHAR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="n"&gt;coluna3&lt;/span&gt; &lt;span class="nb"&gt;DATE&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;-- Insere um registro na tabela&lt;/span&gt;
&lt;span class="k"&gt;INSERT&lt;/span&gt; &lt;span class="k"&gt;INTO&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;coluna2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;VALUES&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'valor'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;-- Adiciona uma nova coluna a uma tabela existente&lt;/span&gt;
&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;ADD&lt;/span&gt; &lt;span class="n"&gt;nova_coluna&lt;/span&gt; &lt;span class="nb"&gt;INT&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Remove a tabela inteira&lt;/span&gt;
&lt;span class="k"&gt;DROP&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Manipular tabelas é fundamental para criar e organizar seus bancos de dados.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  12. &lt;strong&gt;Consultas avançadas&lt;/strong&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Funções de janela para calcular somas em grupos&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;coluna2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;OVER&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;PARTITION&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;soma&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Filtra registros após o agrupamento usando HAVING&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;
&lt;span class="k"&gt;HAVING&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- Usar CTE (Common Table Expression) para simplificar consultas&lt;/span&gt;
&lt;span class="k"&gt;WITH&lt;/span&gt; &lt;span class="n"&gt;cte&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
    &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabela&lt;/span&gt;
    &lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; 
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;cte&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Explicação:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Funções de janela permitem cálculos avançados sem perder o detalhe dos dados.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;HAVING&lt;/code&gt; é usado para filtrar dados agregados.&lt;/li&gt;
&lt;li&gt;CTEs melhoram a legibilidade e organizam consultas complexas.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Esses exemplos são uma base sólida para aprender SQL e aplicar em cenários reais. &lt;/p&gt;

</description>
      <category>sql</category>
      <category>database</category>
    </item>
    <item>
      <title>Growth Hacking</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Sun, 01 Dec 2024 22:57:25 +0000</pubDate>
      <link>https://dev.to/java2890/growth-hacking-4jbj</link>
      <guid>https://dev.to/java2890/growth-hacking-4jbj</guid>
      <description>&lt;p&gt;&lt;strong&gt;Growth Hacking&lt;/strong&gt; é uma abordagem criativa, experimental e orientada por dados para alcançar crescimento rápido e sustentável, especialmente em startups ou empresas com recursos limitados. O conceito foi introduzido por &lt;strong&gt;Sean Ellis&lt;/strong&gt; em 2010 e é amplamente usado em marketing, tecnologia e negócios. Vamos explorar detalhadamente o que é, como funciona e como aplicar.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;O que é Growth Hacking?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Growth hacking combina marketing, experimentação, análise de dados e criatividade para encontrar maneiras inovadoras de aumentar rapidamente o número de usuários, receita ou engajamento em um produto ou serviço. Ao invés de seguir métodos tradicionais de marketing, growth hackers buscam soluções rápidas, eficientes e escaláveis.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Características principais:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Foco no crescimento:&lt;/strong&gt; O objetivo principal é escalar rapidamente.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Uso de experimentos:&lt;/strong&gt; Testes rápidos para identificar o que funciona.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Decisões baseadas em dados:&lt;/strong&gt; Cada estratégia é validada por métricas e resultados.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cruzamento de disciplinas:&lt;/strong&gt; Combina marketing, engenharia, psicologia e design.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Orçamento limitado:&lt;/strong&gt; Ideal para empresas que precisam crescer sem gastar muito.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Como funciona o Growth Hacking?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;O processo de growth hacking geralmente segue estas etapas:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Identificar o objetivo:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Exemplo: aumentar a base de usuários, melhorar o engajamento ou aumentar a receita.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Conhecer o funil de crescimento (Pirate Metrics - AARRR):&lt;/strong&gt;&lt;br&gt;
Criado por Dave McClure, ajuda a mapear onde focar esforços de crescimento.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Aquisition (Aquisição):&lt;/strong&gt; Como atrair novos usuários?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Activation (Ativação):&lt;/strong&gt; Como garantir que os usuários tenham uma boa primeira experiência?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Retention (Retenção):&lt;/strong&gt; Como manter os usuários engajados?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Revenue (Receita):&lt;/strong&gt; Como ganhar dinheiro com eles?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Referral (Indicação):&lt;/strong&gt; Como fazer com que os usuários tragam novos clientes?&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Gerar ideias (Brainstorming):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Listar estratégias e hipóteses que possam atingir o objetivo.&lt;/li&gt;
&lt;li&gt;Exemplo: "E se oferecermos um desconto para usuários que indicarem amigos?"&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Executar experimentos:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Realizar testes rápidos para validar ou refutar hipóteses.&lt;/li&gt;
&lt;li&gt;Usar a metodologia &lt;strong&gt;MVP (Minimum Viable Product)&lt;/strong&gt; para implementar o mínimo necessário para testar a ideia.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Analisar resultados:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Medir os resultados usando KPIs (Key Performance Indicators).&lt;/li&gt;
&lt;li&gt;Exemplo: Taxa de conversão, CAC (Custo de Aquisição de Cliente), LTV (Lifetime Value).&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Escalar o que funciona:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Replicar e investir nas estratégias que mostraram melhores resultados.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Exemplos de Growth Hacking na prática&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Dropbox: Indicação com benefícios duplos&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Estratégia: Oferecer armazenamento extra gratuito para usuários que indicarem amigos e para os amigos indicados.&lt;/li&gt;
&lt;li&gt;Resultado: Crescimento exponencial da base de usuários.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Airbnb: Integração com Craigslist&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Estratégia: Criar uma integração que permitia aos usuários postar seus anúncios no Craigslist automaticamente.&lt;/li&gt;
&lt;li&gt;Resultado: Exposição massiva e aquisição de novos usuários.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Hotmail: Marketing viral&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Estratégia: Adicionar uma linha no rodapé dos e-mails enviados pelos usuários: &lt;em&gt;"P.S. I love you. Get your free email at Hotmail."&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Resultado: Explosão de novos cadastros.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Spotify: Exclusividade e integração com redes sociais&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Estratégia: Lançamento apenas por convite no início, criando desejo de acesso exclusivo, e integração com o Facebook.&lt;/li&gt;
&lt;li&gt;Resultado: Aumento rápido na base de usuários.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Ferramentas usadas por Growth Hackers&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Análise de dados:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google Analytics, Mixpanel, Amplitude.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Automação de marketing:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HubSpot, ActiveCampaign, Mailchimp.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Testes A/B:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Optimizely, Google Optimize.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;SEO e conteúdo:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;SEMrush, Ahrefs, BuzzSumo.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Engajamento e retenção:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Intercom, Customer.io.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Habilidades necessárias para Growth Hacking&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Pensamento analítico:&lt;/strong&gt; Saber interpretar dados e identificar padrões.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Criatividade:&lt;/strong&gt; Desenvolver ideias inovadoras e fora da caixa.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Conhecimento técnico:&lt;/strong&gt; Entender ferramentas digitais, programação básica e integrações.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mentalidade de teste:&lt;/strong&gt; Estar confortável com falhas e aprendizado contínuo.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Colaboração:&lt;/strong&gt; Trabalhar em conjunto com equipes de marketing, desenvolvimento e produto.&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Vantagens e desafios do Growth Hacking&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Vantagens:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Crescimento rápido com baixo custo.&lt;/li&gt;
&lt;li&gt;Abordagem experimental que minimiza riscos.&lt;/li&gt;
&lt;li&gt;Flexibilidade para se adaptar rapidamente ao mercado.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Desafios:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Necessidade de conhecimentos multidisciplinares.&lt;/li&gt;
&lt;li&gt;Risco de falha em muitos experimentos antes de encontrar o que funciona.&lt;/li&gt;
&lt;li&gt;Requer cultura organizacional aberta à inovação.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Como começar com Growth Hacking?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Defina um objetivo claro de crescimento.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Escolha métricas-chave para medir sucesso.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Monte uma equipe multidisciplinar (marketing, produto, dados).&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Realize experimentos pequenos e rápidos.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Escale o que funciona e aprenda com o que não deu certo.&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Growth hacking não é apenas sobre táticas, mas sobre criar uma &lt;strong&gt;mentalidade de crescimento contínuo&lt;/strong&gt;. Com a combinação certa de dados, criatividade e execução, você pode atingir resultados impressionantes.&lt;/p&gt;

</description>
      <category>growthhacking</category>
    </item>
    <item>
      <title>BigQuery Legacy SQL vs Standard SQL</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Sun, 01 Dec 2024 22:20:48 +0000</pubDate>
      <link>https://dev.to/java2890/bigquery-legacy-sql-vs-standard-sql-5040</link>
      <guid>https://dev.to/java2890/bigquery-legacy-sql-vs-standard-sql-5040</guid>
      <description>&lt;p&gt;No &lt;strong&gt;Google BigQuery&lt;/strong&gt;, existem dois dialetos de SQL disponíveis para consulta de dados: &lt;strong&gt;Legacy SQL&lt;/strong&gt; e &lt;strong&gt;Standard SQL&lt;/strong&gt;. Cada um possui características distintas, com diferenças em funcionalidade, sintaxe e compatibilidade. Abaixo, explico detalhadamente:&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;1. Legacy SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Descrição:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Legacy SQL é o dialeto SQL original do BigQuery, herdado das primeiras versões da ferramenta. Embora ainda seja suportado, o Google recomenda o uso do &lt;strong&gt;Standard SQL&lt;/strong&gt; para novos projetos.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Características principais:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Sintaxe específica do BigQuery:&lt;/strong&gt;
Legacy SQL usa convenções de sintaxe que não seguem totalmente os padrões ANSI SQL.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Alias implícitos:&lt;/strong&gt;
Algumas funções e expressões geram automaticamente aliases para colunas, o que pode causar confusão em consultas mais complexas.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Suporte para tabelas não especificadas:&lt;/strong&gt;
Permite referências diretas a tabelas sem a necessidade de prefixá-las com um projeto ou dataset.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Suporte limitado a subconsultas:&lt;/strong&gt;
Legacy SQL tem limitações ao trabalhar com subconsultas e unificações mais avançadas.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Configuração:&lt;/strong&gt;
Consultas em Legacy SQL devem ser ativadas explicitamente em ferramentas que suportam ambos os dialetos.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Exemplo de consulta:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;TOP&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;most_common_names&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;project_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;dataset_id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;table_name&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;2. Standard SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Descrição:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Standard SQL é baseado no padrão ANSI SQL e foi introduzido para aumentar a compatibilidade e funcionalidade das consultas. É o dialeto recomendado e habilitado por padrão no BigQuery.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Características principais:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Conformidade com ANSI SQL:&lt;/strong&gt;
Usa uma sintaxe mais universal, permitindo que desenvolvedores de SQL padrão se adaptem facilmente.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Referência explícita de tabelas:&lt;/strong&gt;
As tabelas devem ser especificadas com o formato &lt;code&gt;project_id.dataset_id.table_name&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Funções mais robustas:&lt;/strong&gt;
Oferece suporte para &lt;strong&gt;funções de janela (window functions)&lt;/strong&gt;, &lt;strong&gt;joins complexos&lt;/strong&gt;, &lt;strong&gt;subconsultas correlacionadas&lt;/strong&gt;, &lt;strong&gt;arrays&lt;/strong&gt;, &lt;strong&gt;JSON&lt;/strong&gt; e muito mais.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Aliases explícitos:&lt;/strong&gt;
Requer que todas as colunas e expressões tenham aliases definidos, evitando ambiguidades.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Recomendações do Google:&lt;/strong&gt;
É o dialeto preferido para novas implementações devido à sua flexibilidade e compatibilidade.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Exemplo de consulta:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;occurrences&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`project_id.dataset_id.table_name`&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;occurrences&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;
&lt;span class="k"&gt;LIMIT&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;strong&gt;Principais Diferenças:&lt;/strong&gt;
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;strong&gt;Aspecto&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Legacy SQL&lt;/strong&gt;&lt;/th&gt;
&lt;th&gt;&lt;strong&gt;Standard SQL&lt;/strong&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Conformidade com ANSI SQL&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Não&lt;/td&gt;
&lt;td&gt;Sim&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Ativação padrão&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Desativado&lt;/td&gt;
&lt;td&gt;Ativado&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Referência a tabelas&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[project_id:dataset_id.table_name]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;`project_id.dataset_id.table_name`&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Funções avançadas&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Suporte limitado&lt;/td&gt;
&lt;td&gt;Suporte completo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Subconsultas&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Restrito&lt;/td&gt;
&lt;td&gt;Totalmente compatível&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Aliases&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Implícitos&lt;/td&gt;
&lt;td&gt;Requeridos explicitamente&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Quando usar cada um?&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Legacy SQL:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Útil apenas em sistemas legados ou consultas já existentes que seriam trabalhosas para converter.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Standard SQL:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
É recomendado para qualquer novo projeto ou consulta. Ele é mais poderoso, legível, compatível com padrões industriais e recebe atualizações contínuas.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Se você estiver começando, foque no &lt;strong&gt;Standard SQL&lt;/strong&gt;, pois ele é o futuro do BigQuery.&lt;/p&gt;

</description>
      <category>bigquery</category>
    </item>
    <item>
      <title>BigQuery</title>
      <dc:creator>Henrique Vital</dc:creator>
      <pubDate>Sun, 01 Dec 2024 22:17:16 +0000</pubDate>
      <link>https://dev.to/java2890/bigquery-5foe</link>
      <guid>https://dev.to/java2890/bigquery-5foe</guid>
      <description>&lt;p&gt;&lt;strong&gt;BigQuery&lt;/strong&gt; é um serviço de análise de dados altamente escalável e rápido fornecido pela Google Cloud. Ele é projetado para processar grandes volumes de dados em tempo real, facilitando a análise de dados estruturados e não estruturados. BigQuery usa SQL como sua linguagem principal para consultas, mas também oferece integrações com outras ferramentas de análise de dados, como Python, R, e interfaces de BI.&lt;/p&gt;

&lt;p&gt;Aqui está um guia passo a passo para começar com o &lt;strong&gt;BigQuery&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Configuração Inicial do BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Antes de começar a usar o BigQuery, você precisa configurar um projeto no Google Cloud e ativar a API BigQuery. Aqui estão os passos para configurar:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Crie uma conta no Google Cloud&lt;/strong&gt; (se você ainda não tiver uma).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Crie um novo projeto&lt;/strong&gt; no console do Google Cloud.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ative a API BigQuery&lt;/strong&gt; no console do Google Cloud.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Crie um bucket do Cloud Storage&lt;/strong&gt; (opcional, para armazenar dados antes de carregá-los no BigQuery).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Instale o Google Cloud SDK&lt;/strong&gt; (se for usar BigQuery via linha de comando ou Python).&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Estrutura Básica do BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;O BigQuery organiza os dados em três níveis:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Projetos&lt;/strong&gt;: O nível mais alto, geralmente vinculado à sua conta do Google Cloud.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Datasets&lt;/strong&gt;: Dentro de um projeto, você pode ter vários datasets, que funcionam como "pastas" para organizar tabelas e visualizações.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tabelas&lt;/strong&gt;: Dados armazenados no BigQuery, que podem ser acessados, modificados ou consultados.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Consultas no BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Você pode escrever consultas SQL para acessar, manipular e analisar dados. O BigQuery usa uma variação do SQL chamada &lt;strong&gt;Standard SQL&lt;/strong&gt; (em vez de SQL clássico).&lt;/p&gt;

&lt;h4&gt;
  
  
  Exemplo 1: Seleção Simples
&lt;/h4&gt;

&lt;p&gt;Para recuperar dados de uma tabela:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;SELECT&lt;/strong&gt;: Especifica as colunas que você deseja selecionar.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;FROM&lt;/strong&gt;: Especifica a tabela de onde os dados serão retirados.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WHERE&lt;/strong&gt;: Filtra os dados com base em uma condição.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Exemplo 2: Contar Registros
&lt;/h4&gt;

&lt;p&gt;Para contar o número de registros em uma tabela:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total_registros&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Exemplo 3: Agrupar Dados
&lt;/h4&gt;

&lt;p&gt;Para agrupar dados e aplicar funções agregadas, como contar ou somar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;total&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GROUP BY&lt;/strong&gt;: Agrupa os dados com base na coluna &lt;code&gt;idade&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;COUNT(*)&lt;/strong&gt;: Conta o número de registros para cada grupo.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ORDER BY&lt;/strong&gt;: Ordena os resultados pelo total em ordem decrescente.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Importando Dados para o BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Você pode importar dados para o BigQuery de várias fontes, como arquivos CSV, JSON, Google Sheets, ou até mesmo de outros serviços da Google Cloud, como o Cloud Storage.&lt;/p&gt;

&lt;h4&gt;
  
  
  Exemplo de como carregar dados a partir de um arquivo CSV:
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Acesse o BigQuery no Google Cloud Console&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;No painel de navegação à esquerda, clique em &lt;strong&gt;BigQuery&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Clique em &lt;strong&gt;Criar Dataset&lt;/strong&gt; (caso ainda não tenha um).&lt;/li&gt;
&lt;li&gt;Após criar um dataset, clique nele e depois clique em &lt;strong&gt;Criar Tabela&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Escolha &lt;strong&gt;Carregar&lt;/strong&gt; para carregar dados do seu arquivo CSV ou de uma fonte do Google Cloud (como o Cloud Storage).&lt;/li&gt;
&lt;li&gt;Configure o esquema da tabela (as colunas e tipos de dados).&lt;/li&gt;
&lt;li&gt;Clique em &lt;strong&gt;Criar Tabela&lt;/strong&gt; para carregar os dados.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Alternativamente, você pode usar comandos SQL para importar dados diretamente:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;OR&lt;/span&gt; &lt;span class="k"&gt;REPLACE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.nova_tabela`&lt;/span&gt;
&lt;span class="k"&gt;AS&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela_existente`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. &lt;strong&gt;Funções Avançadas e Subconsultas&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Você pode usar várias funções avançadas em BigQuery, como &lt;strong&gt;janelas&lt;/strong&gt;, &lt;strong&gt;funções de agregação&lt;/strong&gt; e &lt;strong&gt;subconsultas&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Exemplo 1: Função de Janela
&lt;/h4&gt;

&lt;p&gt;A função de janela permite realizar cálculos como somas acumuladas ou rankings.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="k"&gt;SUM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;OVER&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;soma_acumulada&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essa consulta calcula a soma acumulada das idades dos alunos, ordenada pela idade.&lt;/p&gt;

&lt;h4&gt;
  
  
  Exemplo 2: Subconsulta
&lt;/h4&gt;

&lt;p&gt;Uma subconsulta pode ser usada dentro de uma consulta maior.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;idade&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="k"&gt;AVG&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essa consulta retorna os alunos com idade superior à média de idade de todos os alunos.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. &lt;strong&gt;Exportando Dados do BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Depois de analisar seus dados, você pode exportá-los de volta para o Google Cloud Storage ou para outro formato.&lt;/p&gt;

&lt;h4&gt;
  
  
  Exemplo de exportação:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="n"&gt;EXPORT&lt;/span&gt; &lt;span class="k"&gt;DATA&lt;/span&gt; &lt;span class="k"&gt;OPTIONS&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="n"&gt;uri&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'gs://meu_bucket/resultado/*.csv'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="n"&gt;format&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'CSV'&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="nv"&gt;`meu_projeto.meu_dataset.minha_tabela`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso exporta os dados da tabela para arquivos CSV armazenados no Google Cloud Storage.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. &lt;strong&gt;Segurança e Controle de Acesso&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;O BigQuery oferece controle de acesso refinado usando &lt;strong&gt;IAM (Identity and Access Management)&lt;/strong&gt;. Você pode configurar permissões para permitir ou negar o acesso a projetos, datasets e tabelas.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;IAM Roles&lt;/strong&gt;: O BigQuery oferece vários papéis, como &lt;code&gt;roles/bigquery.dataViewer&lt;/code&gt;, &lt;code&gt;roles/bigquery.dataEditor&lt;/code&gt;, e &lt;code&gt;roles/bigquery.admin&lt;/code&gt;, que você pode atribuir a usuários ou grupos.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  8. &lt;strong&gt;BigQuery com Python&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Você pode interagir com o BigQuery usando a biblioteca &lt;code&gt;google-cloud-bigquery&lt;/code&gt; em Python. Aqui está um exemplo básico:&lt;/p&gt;

&lt;h4&gt;
  
  
  Instalando a biblioteca:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pip &lt;span class="nb"&gt;install &lt;/span&gt;google-cloud-bigquery
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Exemplo de código em Python:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;google.cloud&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;bigquery&lt;/span&gt;

&lt;span class="c1"&gt;# Criando um cliente BigQuery
&lt;/span&gt;&lt;span class="n"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;bigquery&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="c1"&gt;# Definindo uma consulta SQL
&lt;/span&gt;&lt;span class="n"&gt;query&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    SELECT nome, idade
    FROM `meu_projeto.meu_dataset.minha_tabela`
    WHERE idade &amp;gt; 18
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="c1"&gt;# Executando a consulta
&lt;/span&gt;&lt;span class="n"&gt;query_job&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;query&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Aguardando o término da consulta e exibindo os resultados
&lt;/span&gt;&lt;span class="n"&gt;results&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;query_job&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;result&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;row&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;results&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;row&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;nome&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;row&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;idade&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  9. &lt;strong&gt;Boas Práticas no BigQuery&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Evite usar SELECT * em consultas complexas&lt;/strong&gt;: Selecione apenas as colunas que você realmente precisa para melhorar o desempenho.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use partições e clustering&lt;/strong&gt;: Organize suas tabelas para que as consultas possam ser executadas de maneira mais eficiente.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monitore os custos&lt;/strong&gt;: O BigQuery cobra com base na quantidade de dados processados, então é importante escrever consultas eficientes e evitar varreduras desnecessárias de grandes volumes de dados.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Conclusão
&lt;/h3&gt;

&lt;p&gt;BigQuery é uma ferramenta poderosa para análise de grandes volumes de dados. Com o uso do SQL, você pode fazer consultas complexas, agregações, exportações e muito mais. À medida que você aprende mais sobre BigQuery, explore recursos como &lt;strong&gt;particionamento de tabelas&lt;/strong&gt;, &lt;strong&gt;tabelas temporárias&lt;/strong&gt;, e &lt;strong&gt;visualizações&lt;/strong&gt;, além de ferramentas como &lt;strong&gt;BigQuery ML&lt;/strong&gt; para análise preditiva.&lt;/p&gt;

&lt;p&gt;Se você tiver dúvidas específicas ou precisar de mais detalhes sobre algum aspecto, posso fornecer mais exemplos ou explicações!&lt;/p&gt;

</description>
      <category>bigquery</category>
      <category>analytics</category>
    </item>
  </channel>
</rss>
