.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
document.addEventListener("DOMContentLoaded", function() { console.log("DOM completamente carregado e analisado"); });
.box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 2; /* box2 será exibido na frente de box1 */ }
const obj = { name: "John", greet: function() { console.log("Hello, " + this.name); } }; obj.greet(); // "Hello, John"
.className { /* Seleciona todos os elementos com a classe "className" */ color: blue; } #idName { /* Seleciona o elemento com o ID "idName" */ font-size: 20px; }
localStorage.setItem("key", "value"); const value = localStorage.getItem("key"); // "value"
Question: What is "event bubbling"?
Answer: "Event bubbling" is an event propagation mechanism in which an event starts in the innermost element and propagates to the outer elements. For example, if a button inside a
Question: What is a "callback function"?
Answer: A "callback function" is a function passed as an argument to another function, which can be called at a later time. For example:
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
document.addEventListener("DOMContentLoaded", function() { console.log("DOM completamente carregado e analisado"); });
Question: What is "fetch API"?
Answer: The fetch API is a modern interface for making HTTP requests in JavaScript. It returns a Promise that resolves the request's response. For example:
.box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 2; /* box2 será exibido na frente de box1 */ }
Question: What is "CORS"?
Answer: CORS (Cross-Origin Resource Sharing) is a security mechanism that allows restricted resources on a web page to be requested from a different domain than the one that served the page. This is important to protect user data.
Question: What is the "virtual DOM" in React?
Answer: The "virtual DOM" is a lightweight representation of the real DOM. React uses the virtual DOM to optimize updating the DOM, allowing it to make changes more efficiently by comparing the virtual DOM to the real DOM and applying only the necessary changes.
Question: What are "props" in React?
Answer: "Props" are a mechanism for passing data between components in React. They allow you to pass data from a parent component to a child component. For example:
const obj = { name: "John", greet: function() { console.log("Hello, " + this.name); } }; obj.greet(); // "Hello, John"
Question: What is "state" in React?
Answer: The "state" is an object that represents the part of the application that can change. It is used to store data that affects the rendering of the component. For example:
.className { /* Seleciona todos os elementos com a classe "className" */ color: blue; } #idName { /* Seleciona o elemento com o ID "idName" */ font-size: 20px; }
Question: What is "React Router"?
Answer: React Router is a library that allows navigation between different components in a React application, facilitating the creation of single page applications (SPA). It allows you to define routes and render components based on URL.
Question: What are "hooks" in React?
Answer: Hooks are functions that allow you to use state and other React resources in functional components. useState and useEffect are examples of hooks. For example:
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }
Question:What is "Webpack"?
Answer: Webpack is a module wrapper for JavaScript applications. It allows you to bundle JavaScript, CSS, and other resource files into a single file or multiple production-optimized files.
Question:What is "Babel"?
Answer: Babel is a transpiler that allows you to write modern JavaScript code (ES6) and convert it to a version compatible with older browsers. It is often used in conjunction with Webpack.
Question: What is "SASS"?
Answer: SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that allows you to use variables, nesting and functions, making CSS more dynamic and easier to maintain. For example:
document.addEventListener("DOMContentLoaded", function() { console.log("DOM completamente carregado e analisado"); });
Question:What is "AJAX"?
Answer: AJAX (Asynchronous JavaScript and XML) is a technique that allows you to make asynchronous requests to the server without reloading the page. This is often used to update parts of a web page dynamically.
Question: What is "microservices architecture"?
Answer: Microservices architecture is an architectural style that structures an application as a set of small, independent services that communicate with each other. This allows different teams to work on different parts of the application more efficiently.
Question: What is "SSR" (Server-Side Rendering)?
Answer: SSR is a technique where the rendering of a web application is done on the server instead of on the client. This can improve performance and SEO as the content is sent to the client already rendered.
Question: What is "CSR" (Client-Side Rendering)?
Answer: CSR is a technique where the rendering of a web application is done on the client, usually using JavaScript. This allows for a more interactive user experience, but can have a negative impact on SEO if not implemented correctly.
Question:What is "Redux Saga"?
Answer: Redux Saga is a library that facilitates the management of side effects in Redux applications. It uses generators to handle asynchronous operations like API calls in a more readable and organized way.
Question: What is the "Context API" in React?
Answer: The Context API is a way to pass data through the component tree without having to manually pass props at each level. This is useful for sharing global data such as themes or user information.
Question: What is "TypeScript"?
Answer: TypeScript is a superset of JavaScript that adds static typing to code. It allows you to define types for variables, functions and objects, helping to avoid run-time errors.
Question: What is "Progressive Web App" (PWA)?
Answer: PWAs are web applications that offer a native app-like experience, including offline support, push notifications, and home screen installation. They are built using standard web technologies.
Question: What is "GraphQL"?
Answer: GraphQL is a query language for APIs that allows clients to request exactly the data they need. This is in contrast to REST APIs, where clients may receive more data than necessary.
Question: What is "Web Accessibility"?
Answer: Web accessibility refers to the practice of making web applications usable by people with disabilities. This includes using semantic tags, ARIA attributes and ensuring content is keyboard navigable.
Question: What is the "Service Worker"?
Answer: A Service Worker is a script that the browser runs in the background, separate from a web page, enabling functionality such as caching, push notifications, and background synchronization. It is essential for building PWAs.
The information presented has been extracted and adapted from several reliable sources, including:
Glassdoor - A site where people share their interview experiences and common questions.
MDN Web Docs - Comprehensive documentation on HTML, CSS and JavaScript.
JavaScript.info - A modern guide to JavaScript, covering everything from the fundamentals to advanced topics.
React Documentation - The official React documentation, which provides detailed information about the library.
CSS-Tricks - A website with tips and tutorials about CSS and front-end development.
These sources are widely recognized in the web development community and are great resources for deepening front-end knowledge.
The above is the detailed content of Front end Concepts II. For more information, please follow other related articles on the PHP Chinese website!