搜索概念 II

初级组

问题：什么是 CSS Grid？答：CSS Grid 是一种布局系统，允许您在网络上创建二维布局。它将页面分成行和列，使得元素定位变得更容易。例如：

.grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

问题：“DOMContentLoaded”事件是什么？答案：当初始 HTML 文档已完全加载并解析时，将触发 DOMContentLoaded 事件，而无需等待样式表、图像和子框架完成加载。一旦 DOM 准备好了，它对于运行脚本很有用：

document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

问题：CSS 中的“z-index”属性是什么？答：z-index 属性控制元素的堆叠顺序。具有较高 z-index 的元素显示在具有较低 z-index 的元素前面。例如：

.box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

问题：JavaScript 中的“this”是什么？答：JavaScript 中的 This 指的是当前执行上下文。 this 的值会根据函数的调用方式而改变。例如：

const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

问题：什么是 CSS 选择器？答：CSS 选择器是用于选择要设置样式的元素的模式。选择器有多种类型，例如类选择器、ID 选择器和类型选择器。例如：

.className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

问题：JavaScript 中的“localStorage”是什么？答：localStorage 是一种 API，它允许您将数据持久地存储在用户的浏览器中。存储在 localStorage 中的数据不会过期，即使您关闭浏览器后数据仍会保留。例如：

localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

问题：什么是“事件冒泡”？答：事件冒泡是一种事件传播机制，其中事件从最内层元素开始并传播到外部元素。例如，如果被点击时，点击事件将首先在按钮上触发，然后在。问题：什么是“回调函数”？答：“回调函数”是作为参数传递给另一个函数的函数，可以在稍后调用。例如：问：什么是“响应式设计”？答：响应式设计是一种网页设计方法，旨在创建适应不同屏幕尺寸和设备的页面。这通常是使用 CSS 中的媒体查询来实现的。例如：问题：什么是“fetch API”？答：fetch API 是在 JavaScript 中发出 HTTP 请求的现代接口。它返回一个解决请求响应的Promise。例如：fetch("https://api.example.com/data") .then(response => response.json()) .then(data => console.log(data)); 完整级别问：什么是“CORS”？答：CORS（跨域资源共享）是一种安全机制，允许从提供该页面的域以外的域请求网页上的受限资源。这对于保护用户数据非常重要。问题：React 中的“虚拟 DOM”是什么？答：“虚拟 DOM”是真实 DOM 的轻量级表示。 React 使用虚拟 DOM 来优化 DOM 更新，通过将虚拟 DOM 与真实 DOM 进行比较并仅应用必要的更改，从而更有效地进行更改。问题：React 中的“props”是什么？答：“Props”是 React 中组件之间传递数据的机制。它们允许您将数据从父组件传递到子组件。例如： function Greeting(props) { return 你好，{props.name}！ ; } // “你好，约翰！” 问题：React 中的“状态”是什么？答：“状态”是一个代表应用程序中可以改变的部分的对象。用于存储影响组件渲染的数据。例如： class Counter 扩展了 React.Component { 构造函数（props）{ super（props）；这个.state = { 计数: 0 }; } 增量 = () => { this.setState({ count：this.state.count + 1 }); };渲染（）{返回（ {此.州.计数} 增量 ); } } 问题：什么是“React Router”？答：React Router 是一个允许在 React 应用程序中的不同组件之间导航的库，从而更容易创建单页应用程序（SPA）。它允许您根据 URL 定义路线并呈现组件。问题：React 中的“hooks”是什么？答：Hooks 是允许您在功能组件中使用状态和其他 React 功能的函数。 useState 和 useEffect 是钩子的例子。例如：从“react”导入 React，{ useState，useEffect }；函数示例（） { const [count, setCount] = useState（0）； useEffect(() => { document.title = `您点击了${count} 次`; });返回（您点击了 {count} 次 setCount(count + 1)}>单击此处 ); } 问题：什么是“Webpack”？答：Webpack 是 JavaScript 应用程序的模块捆绑器。它允许您将 JavaScript、CSS 和其他资源捆绑到单个文件或多个针对生产进行优化的文件中。问题：什么是“Babel”？答：Babel 是一个转译器，它允许您编写现代 JavaScript 代码（ES6+）并将其转换为与旧版浏览器兼容的版本。它经常和 Webpack 结合使用。问题：什么是“SASS”？答：SASS（Syntactically Awesome Style Sheets）是一个 CSS 预处理器，允许您使用变量、嵌套和函数，使 CSS 更加动态且更易于维护。例如：$primary-color: blue; .按钮 { 背景颜色： $primary-color; &:hover { 背景颜色：变暗（$primary-color， 10%）； } } 问题：什么是“AJAX”？答：AJAX（异步 JavaScript 和 XML）是一种允许您向服务器发出异步请求而无需重新加载页面的技术。这通常用于动态更新网页的各个部分。高级问：什么是“微服务架构”？答：微服务架构是一种架构风格，将应用程序构建为一组相互通信的小型、独立服务。这使得不同的团队可以更有效地处理应用程序的不同部分。问：什么是“SSR”（服务端渲染）？答：SSR 是一种在服务器上而不是客户端上完成 Web 应用程序渲染的技术。由于内容发送到客户端时已经进行了渲染，因此可以提高性能和 SEO。问题：什么是“CSR”（客户端渲染）？答：CSR 是一种在客户端完成 Web 应用程序渲染的技术，通常使用 JavaScript。这可以提供更具互动性的用户体验，但如果实施不当，可能会对 SEO 产生负面影响。问：什么是“Redux Saga”？答：Redux Saga 是一个库，它可以轻松管理 Redux 应用程序中的副作用。它使用生成器以更易读、更有条理的方式处理异步操作，如 API 调用。问题：React 中的“Context API”是什么？答：Context API 是一种通过组件树传递数据的方式，无需在每个级别手动传递 props。这对于共享主题或用户信息等全局数据非常有用。问：什么是“TypeScript”？答：TypeScript 是 JavaScript 的超集，它为您的代码添加了静态类型。它允许您定义变量、函数和对象的类型，有助于避免运行时错误。问题：什么是“渐进式 Web 应用程序”（PWA）？答：PWAs 是提供类似原生应用体验的 Web 应用，包括离线支持、推送通知和主屏幕安装。它们是使用标准的网络技术构建的。问：什么是“GraphQL”？答：GraphQL 是一种 API 查询语言，允许客户端准确请求他们需要的数据。这与 REST API 形成对比，客户端可能会收到超出其需要的数据。问题：什么是“网页无障碍”？答：网络可访问性是指使残障人士可以使用网络应用程序的实践。这包括使用语义标签、ARIA 属性以及确保内容可通过键盘导航。问：什么是“Service Worker”？答案：Service Worker 是浏览器在后台运行的脚本，独立于网页，可实现缓存、推送通知和后台同步等功能。它对于构建 PWAs 至关重要。参考书目此处提供的信息摘录并改编自多个可靠来源，其中包括： Glassdoor——一个人们分享面试经历和常见问题的网站。玻璃门 MDN Web Docs - 有关 HTML、CSS 和 JavaScript 的综合文档。 MDN 网络文档 JavaScript.info——JavaScript 的现代指南，涵盖从基础到高级主题的所有内容。 JavaScript 信息 React 文档 - 官方 React 文档，提供有关该库的详细信息。 React 文档 CSS-Tricks——一个提供有关 CSS 和前端开发的技巧和教程的网站。 CSS 技巧这些资源在 Web 开发社区中得到广泛认可，是深化前端知识的绝佳资源。

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. Por exemplo:

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

   fetchData(data => console.log(data)); // "Dados recebidos"

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. Por exemplo:

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

Pergunta: O que é o "fetch API"? Resposta: A fetch API é uma interface moderna para fazer requisições HTTP em JavaScript. Ela retorna uma Promise que resolve a resposta da requisição. Por exemplo: fetch("https://api.example.com/data") .then(response => response.json()) .then(data => console.log(data));

Nível Pleno

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

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.

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. Por exemplo: function Greeting(props) { return

Hello, {props.name}!

; } // "Hello, John!"

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. Por exemplo: class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return (

{this.state.count}

); } }

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.

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. Por exemplo: import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Você clicou ${count} vezes`; }); return (

Você clicou {count} vezes

); }

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.

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.

Pergunta: O que é o "SASS"? Resposta: 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: $primary-color: blue; .button { background-color: $primary-color; &:hover { background-color: darken($primary-color, 10%); } }

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

Nível Sênior

Pergunta: O que é a "arquitetura de microserviços"? Resposta: 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.

Pergunta: O que é o "SSR" (Server-Side Rendering)? Resposta: 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.

Pergunta: O que é o "CSR" (Client-Side Rendering)? Resposta: 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.

Pergunta: O que é o "Redux Saga"? Resposta: 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.

Pergunta: O que é o "Context API" em React? Resposta: 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.

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

Pergunta: O que é o "Progressive Web App" (PWA)? Resposta: 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.

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

Pergunta: O que é o "Web Accessibility" (Acessibilidade Web)? Resposta: 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.

Pergunta: O que é o "Service Worker"? Resposta: 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.

Bibliografia

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

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

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

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

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

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

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

CLIS.CC

搜索概念 II

初级组

Nível Pleno

Hello, {props.name}!

Nível Sênior

Bibliografia