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!

Top comments (0)