DEV Community

Cover image for Front End Conceitos Junior
Henrique Vital
Henrique Vital

Posted on

Front End Conceitos Junior

Nível Júnior

  1. Pergunta: O que é o DOM? Resposta: 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.

Exemplo:

   <div id="myDiv">
       <h1>Olá, Mundo!</h1>
   </div>
Enter fullscreen mode Exit fullscreen mode
   const myDiv = document.getElementById("myDiv");
   console.log(myDiv.innerHTML); // "Olá, Mundo!"
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o modelo de caixa (box model) em CSS? Resposta: 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.

Exemplo:

   .box {
       margin: 10px; /* Espaço fora da borda */
       border: 1px solid black; /* Borda */
       padding: 20px; /* Espaço dentro da borda */
       width: 100px; /* Largura do conteúdo */
   }
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é uma função anônima? Resposta: 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.

Exemplo:

   setTimeout(function() {
       console.log("Executado após 1 segundo");
   }, 1000);
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que são seletores CSS? Resposta: 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.

Exemplo:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o "localStorage" em JavaScript? Resposta: localStorage é uma API que permite armazenar dados no navegador do usuário de forma persistente. Os dados armazenados no localStorage não expiram e permanecem mesmo após o fechamento do navegador. É útil para armazenar informações que você deseja manter entre sessões.

Exemplo:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o evento "DOMContentLoaded"? Resposta: O evento DOMContentLoaded é 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.

Exemplo:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o "this" em JavaScript? Resposta: O this em JavaScript refere-se ao contexto de execução atual. O valor de this pode mudar dependendo de como uma função é chamada. Em métodos de objetos, this refere-se ao objeto que está chamando o método.

Exemplo:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o "event bubbling"? Resposta: 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.

Exemplo:

   <div id="parent">
       <button id="child">Clique em mim</button>
   </div>

   <script>
       document.getElementById("parent").addEventListener("click", function() {
           console.log("Div pai clicada");
       });

       document.getElementById("child").addEventListener("click", function() {
           console.log("Botão filho clicado");
       });
   </script>
Enter fullscreen mode Exit fullscreen mode

Ao clicar no botão, a saída será:

   Botão filho clicado
   Div pai clicada
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é uma "callback function"? Resposta: 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.

Exemplo:

   function fetchData(callback) {
       // Simulação de operação assíncrona
       setTimeout(() => {
           callback("Dados recebidos");
       }, 1000);
   }

   fetchData(data => console.log(data)); // "Dados recebidos"
Enter fullscreen mode Exit fullscreen mode
  1. Pergunta: O que é o "responsive design"?

    Resposta: 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.

    Exemplo:

    @media (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
    

Nível Pleno

  1. Pergunta: O que é o Flexbox e como ele funciona?

    Resposta: 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.

    Exemplo:

    .container {
        display: flex;
        justify-content: space-between; /* Espaço entre os itens */
    }
    
  2. Pergunta: O que são Promises em JavaScript?

    Resposta: 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.

    Exemplo:

    const myPromise = new Promise((resolve, reject) => {
        // Simulação de operação assíncrona
        setTimeout(() => {
            resolve("Operação concluída!");
        }, 1000);
    });
    
    myPromise.then(result => console.log(result)); // "Operação concluída!"
    
  3. Pergunta: O que é o conceito de "hoisting" em JavaScript?

    Resposta: 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.

    Exemplo:

    console.log(x); // undefined
    var x = 5;
    
  4. Pergunta: O que é o "virtual DOM" em React?

    Resposta: 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.

    Exemplo:

    const element = <h1>Hello, world!</h1>;
    ReactDOM.render(element, document.getElementById('root'));
    
  5. Pergunta: O que são "props" em React?

    Resposta: "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.

    Exemplo:

    function Greeting(props) {
        return <h1>Hello, {props.name}!</h1>;
    }
    
    <Greeting name="John" /> // "Hello, John!"
    
  6. Pergunta: O que é o "state" em React?

    Resposta: 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.

    Exemplo:

    class Counter extends React.Component {
        constructor(props) {
            super(props);
            this.state = { count: 0 };
        }
    
        increment = () => {
            this.setState({ count: this.state.count + 1 });
        };
    
        render() {
            return (
                <div>
                    <p>{this.state.count}</p>
                    <button onClick={this.increment}>Increment</button>
                </div>
            );
        }
    }
    
  7. Pergunta: O que é o "React Router"?

    Resposta: 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.

    Exemplo:

    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    
    function App() {
        return (
            <Router>
                <Switch>
                    <Route path="/about" component={About} />
                    <Route path="/" component={Home} />
                </Switch>
            </Router>
        );
    }
    
  8. Pergunta: O que são "hooks" em React?

    Resposta: Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. O useState e o useEffect são exemplos de hooks.

    Exemplo:

    import React, { useState, useEffect } from 'react';
    
    function Example() {
        const [count, setCount] = useState(0);
    
        useEffect(() => {
            document.title = `Você clicou ${count} vezes`;
        });
    
        return (
            <div>
                <p>Você clicou {count} vezes</p>
                <button onClick={() => setCount(count + 1)}>Clique aqui</button>
            </div>
        );
    }
    
  9. Pergunta: O que é o "Webpack"?

    Resposta: 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.

    Exemplo:

    // webpack.config.js
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname + '/dist'
        }
    };
    
  10. Pergunta: O que é o "Babel"?

    Resposta: 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.

    Exemplo:

    // .babelrc
    {
        "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    

Bibliografia

As informações apresentadas foram extraídas e adaptadas de várias fontes confiáveis, incluindo:

  1. Glassdoor - Um site onde pessoas compartilham suas experiências de entrevistas e perguntas comuns.

  2. MDN Web Docs - Documentação abrangente sobre HTML, CSS e JavaScript.

  3. JavaScript.info - Um guia moderno para JavaScript, cobrindo desde os fundamentos até tópicos avançados.

  4. React Documentation - A documentação oficial do React, que fornece informações detalhadas sobre a biblioteca.

  5. CSS-Tricks - Um site com dicas e tutoriais sobre CSS e desenvolvimento front-end.

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!

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay