Front End Conceitos Junior

[Lomanu4]

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>

const myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML); // "Olá, Mundo!"

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 */
}

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);

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;
}

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"

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");
});

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"

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>

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


Botão filho clicado
Div pai clicada

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"

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!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.