### Express 'Hello World' Example Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction A basic 'Hello World' example demonstrating how to create an Express application, define a GET route for the root path, and start a server on a specific port. This snippet requires the 'express' module. ```javascript const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Olá Mundo!'); }); app.listen(port, () => { console.log(`Servidor rodando em http://localhost:${port}`); }); ``` -------------------------------- ### Create React App Project Initialization (Yarn) Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started This command initializes a new React project named 'moz-todo-react' using Yarn as the package manager. It performs the same setup as the npm version, including installing dependencies and creating the project structure. Yarn is used by default if installed. ```bash yarn create react-app moz-todo-react ``` -------------------------------- ### Create React App Project Initialization (npm) Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started This command initializes a new React project named 'moz-todo-react'. It installs necessary npm packages, sets up scripts for running the app, creates a basic file structure, and initializes a git repository if available. It's the standard way to start a React project with create-react-app using npm. ```bash npx create-react-app moz-todo-react ``` -------------------------------- ### Comando para Criar um Novo App React Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started Comando de terminal para iniciar um novo projeto React usando a ferramenta create-react-app. Esta ferramenta automatiza a configuração inicial, instalação de dependências e configuração de build. ```bash npx create-react-app my-app ``` -------------------------------- ### XMLHttpRequest.send() Example: GET Request Source: https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/send An example demonstrating how to use XMLHttpRequest.send() to send a GET request. The 'null' argument indicates no request body. ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.onload = function () { // Requisição finalizada. Faça o processamento aqui. }; xhr.send(null); // xhr.send('string'); // xhr.send(new Blob()); // xhr.send(new Int8Array()); // xhr.send(document); ``` -------------------------------- ### Window.prompt() Example: Getting User Input Source: https://developer.mozilla.org/pt-BR/docs/Web/API/Window/prompt An example demonstrating how to use window.prompt() to get text input from the user. It shows how to handle the return value, differentiating between OK, Cancel, and empty input. ```javascript let person = prompt("Please enter your name", "Harry Potter"); if (person == null || person == "") { txt = "User cancelled the prompt."; } else { txt = "Hello " + person + "! How are you today?"; } console.log(txt); ``` -------------------------------- ### Exemplo de Estrutura de Arquivos para Prática Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Styling_basics/Getting_started Fornece a estrutura básica dos arquivos `index.html` e `styles.css` para que os usuários possam praticar a aplicação de CSS. O `index.html` contém um cabeçalho e um parágrafo, enquanto `styles.css` está vazio para que os estilos possam ser adicionados. ```html Exemplo de página

Título

Um parágrafo.

``` ```css /* Seu CSS vai aqui */ ``` -------------------------------- ### Example GET Request with Early-Data Header Source: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Reference/Headers/Early-Data An example of an HTTP GET request including the `Early-Data` header. This demonstrates how an intermediary might include the header to indicate early data transport for the request. ```http GET /resource HTTP/1.0 Host: example.com Early-Data: 1 ``` -------------------------------- ### Calculate Total Page Load Time Source: https://developer.mozilla.org/pt-BR/docs/Web/API/Performance_API/Navigation_timing This JavaScript example calculates the total time taken to load a page. It accesses the `performance.timing` object to get the start of navigation and the end of the load event, then subtracts the former from the latter. This provides a comprehensive measure of the page's loading duration. ```javascript var perfData = window.performance.timing; var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart; ``` -------------------------------- ### Start React Development Server Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started This command starts the development server for a React application. It compiles the React code and serves it locally, typically at http://localhost:3000. The server also watches for file changes and automatically reloads the browser. ```bash npm start ``` -------------------------------- ### Web Manifest Install Event Support Source: https://developer.mozilla.org/pt-BR/docs/Mozilla/Firefox/Releases/49 The `install` event and the `Window.oninstall` event handler are now supported for Web Manifests. This enables developers to hook into the installation process of Progressive Web Apps (PWAs) and perform necessary setup actions. ```javascript // In your service worker or main script: window.addEventListener('install', (event) => { console.log('Application installed!'); // Perform installation tasks here }); ``` -------------------------------- ### Run the 'Hello World' Node.js Server Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment Starts the Node.js 'Hello World' web server by executing the `hellonode.js` file. After running this command in the terminal within the same directory as the `hellonode.js` file, the server will be accessible via a web browser. ```bash node hellonode.js ``` -------------------------------- ### GET /en-US/search Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview Example of an HTTP GET request made when searching the MDN website. It includes various query parameters and headers providing information about the request and the client. ```APIDOC ## GET /en-US/search ### Description This endpoint represents a search query on the MDN website. The request includes specific search terms and topics as query parameters, along with headers detailing the client's browser and connection information. ### Method GET ### Endpoint https://developer.mozilla.org/en-US/search ### Parameters #### Query Parameters - **q** (string) - Required - The search query term. - **topic** (string) - Optional - Specifies a topic to narrow down the search. #### Headers - **Host** (string) - The server name. - **Connection** (string) - Connection management information. - **Pragma** (string) - Caching directives. - **Cache-Control** (string) - Caching directives. - **Upgrade-Insecure-Requests** (string) - Indicates preference for secure connections. - **User-Agent** (string) - Information about the client's browser. - **Accept** (string) - Media types the client can handle. - **Referer** (string) - The URL of the page that linked to this resource. - **Accept-Encoding** (string) - Content encoding methods the client supports. - **Accept-Charset** (string) - Character sets the client supports. - **Accept-Language** (string) - Languages the client prefers. - **Cookie** (string) - HTTP cookies sent by the client. ### Request Example ```http GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Referer: https://developer.mozilla.org/en-US/ Accept-Encoding: gzip, deflate, sdch, br Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7 Accept-Language: en-US,en;q=0.8,es;q=0.6 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true ``` ### Response #### Success Response (200) - **Content-Type** (string) - The media type of the resource (e.g., text/html). - **Content-Length** (string) - The size of the response body in bytes. - **X-Frame-Options** (string) - Security header to control framing. #### Response Example ```http HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 41823 X-Frame-Options: DENY ... ``` ``` -------------------------------- ### Executar Código Python com Flask Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server Demonstra como executar um script Python localmente usando o framework Flask. Requer a instalação do Python/PIP e do Flask (`pip3 install flask`). O script é executado com `python3` e acessível via `localhost:5000`. ```python python3 python-example.py ``` -------------------------------- ### Standard Way to Get Property Descriptor using Object.getOwnPropertyDescriptor() Source: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ This example shows the modern, standardized way to get property descriptors, including setters, using Object.getOwnPropertyDescriptor(). This is the recommended approach over the deprecated __lookupSetter__(). ```javascript const obj = { set prop(value) { this.internalValue = value; } }; const descriptor = Object.getOwnPropertyDescriptor(obj, 'prop'); if (descriptor && descriptor.set) { console.log(descriptor.set); // Logs the setter function descriptor.set.call(obj, 100); console.log(obj.internalValue); // Output: 100 } ``` -------------------------------- ### JavaScript Example: Using getUTCFullYear() Source: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear This example demonstrates how to use the getUTCFullYear() method to get the full year from a Date object. It creates a new Date object and assigns the UTC year to a variable named 'year'. ```javascript const today = new Date(); const year = today.getUTCFullYear(); console.log(year); ``` -------------------------------- ### File Path Examples - Combined Paths Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files This example shows how to construct more complex relative file paths by combining parent directory navigation and subdirectory traversal. ```html ../subdiretorio/outro-subdiretorio/my-image.png ``` -------------------------------- ### Atualizar Shell no macOS Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/Django/development_environment Comando para recarregar o arquivo de startup do shell no macOS após fazer alterações, garantindo que as novas configurações do virtualenvwrapper sejam aplicadas. ```bash source ~/.bash_profile ``` -------------------------------- ### Get Document Base URI (JavaScript) Source: https://developer.mozilla.org/pt-BR/docs/Web/API/Node/baseURI This JavaScript example shows how to get the base URI of the entire document using `document.baseURI`. Note that this value can change over time if the document's location or tags are modified. ```javascript var docBaseURI = document.baseURI; ``` -------------------------------- ### CSS Comments Example Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Styling_basics/Getting_started Comments in CSS are used for annotations, explanations, or temporarily disabling code blocks. They start with /* and end with */. This example demonstrates using comments to mark sections and comment out specific rules. ```CSS /* This is a multi-line comment. It explains the following section. */ .header { background-color: #f0f0f0; /* Sets header background */ } /* .special { color: red; } */ .footer { color: gray; } ``` -------------------------------- ### Gerar um Novo Aplicativo Express Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment Cria um novo aplicativo Express chamado 'helloworld' com configurações padrão. O comando deve ser executado no diretório onde o projeto será desenvolvido. O NPM criará uma subpasta com a estrutura do aplicativo. ```bash express helloworld ``` -------------------------------- ### File Path Examples - Parent Directory Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files This example demonstrates how to reference a file located in a parent directory. The `../` notation indicates moving up one level in the directory structure. ```html ../my-image.png ``` -------------------------------- ### Example: Using WeakMap.prototype.get() Source: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/get This example demonstrates how to use the WeakMap.prototype.get() method to retrieve a value associated with a specific key. It shows the creation of a WeakMap, setting a key-value pair, and then retrieving the value using get(). It also illustrates the behavior when a non-existent key is used. ```javascript const wm = new WeakMap(); const objKey = {}; wm.set(objKey, 'value'); console.log(wm.get(objKey)); // Expected output: "value" console.log(wm.get({})); // Expected output: undefined ``` -------------------------------- ### Listar Pacotes Python com pip no Windows Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/Django/development_environment Comando para listar todos os pacotes Python instalados usando o gerenciador de pacotes pip. Assume que o Python e o pip foram corretamente adicionados ao PATH do sistema. ```bash pip3 list ``` -------------------------------- ### Example: Add items and get Storage count in JavaScript Source: https://developer.mozilla.org/pt-BR/docs/Web/API/Storage/length This example demonstrates adding multiple items to the `localStorage` object and then retrieving the total count of items using the `length` property. It shows a practical use case for monitoring the storage size. ```javascript localStorage.setItem('bgcolor', '#FFFFFF'); localStorage.setItem('font', 'Arial'); localStorage.setItem('image', 'logo.png'); var itemCount = localStorage.length; console.log('Number of items in localStorage:', itemCount); // Output: Number of items in localStorage: 3 ``` -------------------------------- ### File Path Examples - Same Directory Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files This example illustrates how to reference a file located in the same directory as the HTML file. Only the filename is required. ```html my-image.jpg ``` -------------------------------- ### Exemplo de Requisição HTTP GET Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview Demonstra uma requisição HTTP GET típica, como a utilizada em buscas na web. Inclui o método, URL, parâmetros de consulta, versão do protocolo e diversos cabeçalhos como Host, User-Agent, Accept e Cookie. O corpo da requisição está vazio neste exemplo. ```http GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Referer: https://developer.mozilla.org/en-US/ Accept-Encoding: gzip, deflate, sdch, br Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7 Accept-Language: en-US,en;q=0.8,es;q=0.6 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true ``` -------------------------------- ### Get Element Position and Size with getBoundingClientRect() Source: https://developer.mozilla.org/pt-BR/docs/Web/API/Element/getBoundingClientRect This example demonstrates how to use the `getBoundingClientRect()` method to get the size and position of an HTML element relative to the viewport. It retrieves the `left`, `top`, `right`, `bottom`, `width`, and `height` properties of the returned DOMRect object. ```javascript const rect = element.getBoundingClientRect(); console.log(`Left: ${rect.left}`); console.log(`Top: ${rect.top}`); console.log(`Right: ${rect.right}`); console.log(`Bottom: ${rect.bottom}`); console.log(`Width: ${rect.width}`); console.log(`Height: ${rect.height}`); ``` -------------------------------- ### Example GET Request with HTTP Headers Source: https://developer.mozilla.org/pt-BR/docs/Glossary/Request_header Demonstrates a typical HTTP GET request including various request headers like Host, User-Agent, Accept, Accept-Language, Accept-Encoding, Referer, Connection, Upgrade-Insecure-Requests, If-Modified-Since, If-None-Match, and Cache-Control. ```HTTP GET /home.html HTTP/1.1 Host: developer.mozilla.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate, br Referer: https://developer.mozilla.org/testpage.html Connection: keep-alive Upgrade-Insecure-Requests: 1 If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" Cache-Control: max-age=0 ``` -------------------------------- ### Exemplo de Lista Ordenada em HTML Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content Ilustra a criação de uma lista ordenada com os elementos

. Utilizada para sequências onde a ordem é importante, como em receitas. ```html
1. Primeiro passo
2. Segundo passo
3. Terceiro passo
``` -------------------------------- ### Executar Código PHP com Servidor Interno do PHP Source: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server Este snippet demonstra como iniciar o servidor de desenvolvimento interno do PHP para executar código PHP localmente. Certifique-se de navegar até o diretório do seu código PHP antes de executar o comando. Ele expõe seu código em `localhost:8000`. ```shell cd path/to/your/php/code php -S localhost:8000 ```