# Tutorial de JavaScript e jQuery **Data: ** 09-01-2025 13: 48: 30 ## Sumário 1. [Curso completo de JavaScript e jQuery 2022 para iniciantes | Tutorial de jQuery para iniciantes | Simplilearn](https://www.youtube.com/watch?v=pu7pqu--efw) 2. [Curso completo de JavaScript e jQuery 2022 para iniciantes | Tutorial de jQuery para iniciantes | Simplilearn](https://www.youtube.com/watch?v=I56CV_qfa38) 3. [Curso completo de jQuery 2022 | Tutorial de jQuery para iniciantes | Tutorial de Simplilearn](https://www.youtube.com/watch?v=Rkvn_MA04fo) 4. [Como criar um site web usando jQuery | Tutorial de jQuery para iniciantes | Tutorial passo a passo](https://www.youtube.com/watch?v=IBkyF0rRqBA) 5. [Interações em jQuery | Tutorial de interações em jQuery | Tutorial de jQuery para iniciantes | Simplilearn](https://www.youtube.com/watch?v=-ewL_G8s794) --- ## Transcrições ### Curso completo de JavaScript e jQuery 2022 para iniciantes | Tutorial de jQuery para iniciantes |Simplilearn URL: [https: //www. youtube. com/watch? v=pu7pqu--efw](https://www.youtube.com/watch?v=pu7pqu--efw) Tradução automática indisponível --- ### Curso completo de JavaScript e jQuery 2022 para iniciantes | Tutorial de jQuery para iniciantes |Simplilearn URL: [https: //www. youtube. com/watch? v=I56CV_qfa38](https://www.youtube.com/watch?v=I56CV_qfa38) Idioma: en Olá ao todo mundo e bem-vindo ao canal do Simplilearn no YouTube. Hoje vamos te conduzir por um curso completo de JavaScript e jQuery. Este curso foi desenhado de forma a cobrir todos os aspectos importantes, desde os fundamentos de ambos JavaScript e jQuery até assuntos de nível avançado. Ao terminar este tutorial, você terá a capacidade de implementar JavaScript e jQuery de maneiras diferentes. Antes de começarmos o curso completo, permita que eu exemplifique alguns pontos: somos atualizados regularmente em vídeos de tecnologia. Se você é um adepto da tecnologia em busca das últimas tendências, considere se inscrever em nosso canal do YouTube e acione o botão de sino para não perder nenhum atualização do Simplilearn. Assim, sem mais demora, vamos começar. Vamos passar pela agenda deste curso completo. Começaremos este vídeo com uma introdução ao JavaScript. Seguindo aquele, vamos cobrir tópicos básicos de JavaScript, como variáveis, laços e funções, além de alguns assuntos de nível avançado como Promises em JavaScript. Vamos criar alguns projetos específicos, incluindo jogos e um site e-commerce totalmente funcional para entender JavaScript de uma maneira mais detalhada. Após o JavaScript, vamos abordar o jQuery também. Vamos cobrir tudo o que você precisará saber e entender sobre jQuery e jQuery UI. Vamos ver o que jQuery é e abordaremos tópicos como seletores em jQuery, eventos e efeitos, funções de retorno em jQuery e como o jQuery manipula o Môdelo de Documento Object (DOM). Após isso, passaremos por uma breve apresentação de jQuery UI. Em seguida, cobriremos tópicos como widgets e interações em jQuery. Também vamos ver como o jQuery é usado para personalização de temas. No final deste curso completo, vamos criar projetos de jQuery, como o desenho de um aplicativo de cálculo, uma lista de tarefas e um site web totalmente funcional usando HTML, CSS e jQuery. Começaremos este vídeo com uma introdução ao JavaScript. O JavaScript foi desenvolvido no ano de 1995 por alguém chamado Brendan Eich. Brendan estava trabalhando para communications Netscape enquanto desenvolvia o JavaScript em um ouvinte de dez dias. Houve algumas mudanças no nome do JavaScript inicialmente. Foi chamado primeiro de MOCA, que foi posteriormente alterado para LiveScript, e depois para JavaScript. O início do JavaScript não foi tão bom, pois, ao algumas vezes, muitos desenvolvedores que estavam usando Java no momento consideravam o JavaScript como uma linguagem para designers e não engenheiros. Ninguém jamais soube que esse pequeno script padrão descriptivo iria ter um futuro grandioso hoje. Mais de 90% dos sites na Internet estão funcionando com alguma forma de JavaScript. A maioria dos visitantes neste site se confunde com Java e JavaScript. Deixe-me esclarecer se possível, que todos os dois Java e JavaScript são idiomas diferentes, só possuem pouco em comum. Muitas pessoas dizem que o JavaScript recebeu o nome de Java como uma estratégia de marketing para ganhar maior aceitação e reconhecimento em 1995, pois ao Java que estava em voga quando o JavaScript foi desenvolvido, foi o nome que foi utilizado de forma a ganhar maior aceitação e reconhecimento. Continuemos a questão de o que é o JavaScript. Você já passou por um site em que as imagens deslizam automaticamente? Por exemplo, Amazon. Um site como o home page da Amazon onde podemos ver diferentes ofertas em curso é essencialmente um exemplo de JavaScript, na palavra layman JavaScript é uma linguagem de script leve usada para fazer páginas web mais interativas e mais vivas. Antes, quando o JavaScript foi desenvolvido, era apenas uma linguagem de script de servidor para executar tarefas básicas, como pode adicionar some pop-ups em sua página web ou pode tornar sua página web mais interativa, nada mais. Porém, a cenário se mudou e, com o uso do JavaScript, podemos criar aplicações também. Se falarmos de aplicações, vejamos um exemplo, vamos supor que queremos criar uma aplicação, precisaríamos aprender vários idiomas diferentes para criar essas aplicações para Android, precisaríamos aprender Java e XML, precisaríamos de Swift para iOS, mas com o uso do JavaScript, você consegue criar aplicações híbridas que funcionam em quaisquer plataformas sem qualquer problema. Éculos empresas como Amazon, Google, PayPal e o YouTube usando JavaScript hoje em dia. A evolução do JavaScript nas últimas poucas décadas tem sido incrível. Se quer criar uma página web única, todos estamos familiares com o Gmail. Suponsa que o Gmail é uma única página web que parece mais com um software do escritório do que um site web. Então o Gmail é baseado em Angular. js, um popular framework de código aberto desenvolvido pela Google e que disponibiliza gratuitamente. Agora, vamos discutir algumas das principais características do JavaScript, estas características são o motivo pelo qual você consegue ver o JavaScript como vantajoso em comparação com outros idiomas, então vamos começar com alguns destes pontos: o JavaScript não é uma lingüagem verdadeiramente programável de fato, ele é uma linguagem de script de execução, como Python, por exemplo, de modo que há alguns outros idiomas como C++ e Java que precisam de um compilador para funcionar, mas com JavaScript, você não precisa de um compilador uma vez que o script está pronto, ele interpreta-o e mostra-lhe o resultado no navegador diretamente. Também é uma linguagem leve, o JavaScript pode suportar o desenvolvimento de programação em determinado grau, pois não precisas de especificar o tipo ou o tipo de retorno de dados, o que ajudará a tornar o processo de desenvolvimento mais rápido, sendo assim conhecida como se leve. O JavaScript é linguagem de ambos o cliente e o servidor, basicamente client-side JavaScript não executa nenhum processo no servidor, ele se executa no navegador da web do usuário. Já o client-side JavaScript é executado pelo lado do servidor, geralmente por um run-time, como Java. O servidor-side JavaScript é executado pelo lado do cliente, da fita ou script de cliente, como CoffeeScript, que por sua vez é executado pelo runtime do lado do servidor que é Node. js. O JavaScript é uma linguagem de código aberto, isto é, ela pode ser ampliada ou ampliada com novas bibliotecas, ferramentas e APIs criadas pelo mundo dos desenvolvedores. A ecossistema JavaScript é muito poderoso para otimizar a carga da sua aplicação. O JavaScript faz parte dos ecosystems front-end e back-end entre outros. O JavaScript é uma linguagem orientada a eventos, o desenvolvedor pode escrever cadeias de comandos pronto para serem executados quando um evento específico ocorre. Um exemplo deste evento é quando o usuário clica no botão "Salvar", a execução acomete ao evento "onclick". A variável "InteligenciaTipo" representa o evento e quando o evento ocorre em uma instrução, ele matura, o que significa que ele é invocado. A função pode conter uma wireup, um compilador de eventos (DOM) que permite que todos os desempenhos que estão associados ao novo componente são compilados para estes eventos. # JavaScript: Uma Linguagem Poderosa e Versátil JavaScript funciona diretamente no navegador. Você escreve o código no editor, e o navegador o vai por, interpretará e finalmente executará o programa. A popularidade de JavaScript aumentou ao longo do tempo, sendo uma linguagem que pode realizar tarefas tão diversas - seja o design de um front-end de website ou acessar qualquer backend de site, JavaScript pode fazer tudo isso. Por fim, no final de 2018, mais de 95% da internet estava sendo movida por JavaScript, o que significa que quase todo site que você encontra na rede está usando JavaScript em alguma forma ou outra. Vocês sabe sobre o Stack Overflow, um site para programadores? Não se preocupe; você o vai conhecer quando você começar a partiu da programação. O Stack Overflow afirma que o JavaScript é a linguagem de programação mais popular utilizada pelos programadores. Aguardo posso rapidamente te passar pelas razões pelo qual você deveria aprender JavaScript, então vamos abordar cada uma dessas razões rapidamente: - JavaScript possui os frameworks mais poderosos - JavaScript está crescendo constantemente e é um trabalho bem pago - JavaScript é amigável para iniciantes e possui a maior comunidade - JavaScript possui um abrangente utilização ## Por quê estas razões são importantes ? Agora vamos seguir adiante e veja por que cada uma dessas razões é importante: ### JavaScript possui os frameworks mais poderosos Para executar qualquer tarefa que um usuário deseja fazer - como projetar um website de uma página única, ou acessar o backend de qualquer site, você pode utilizar diferentes frameworks de JavaScript. Por exemplo: - Se você deseja projetar um website de uma única página, como pode projetar um site como o Gmail, você pode utilizar Angular. js - Se você desejar projetar componentes de UI ou interfaces para aplicações web únicas, você tem React. js - Se você desejar desenvolver uma aplicação móvel ou desktop, suponha-se que você tem View. js de ajuda basicamente, você pode fazer qualquer coisa com uns frameworks poderosos de JavaScript. ### JavaScript está crescendo constantemente Um dos principais motivos pelo qual você deveria aprender JavaScript é que ele é uma das linguagens mais rápidas a crescer e está entre as 10 primeiras linguagens utilizadas pelos programadores. Com o aumento saturado do mercado móvel, o desenvolvimento de web mobile viu um aumento imensurável na necessidade da interatividade, o que é possível apenas com a ajuda de JavaScript. Por esta razão, o JavaScript está crescendo constantemente, e ninguém continua a dúvida de que JavaScript não vai cair em breve. ### Desenvolvedores trabalhando com JavaScript são bem pagos Em todos os lugares do mundo, qualquer que deseje ser designer ou desenvolvedor web precisa aprender JavaScript. É uma habilidade necessária para ser um bom desenvolvedor web. Vamos discutí-lo em mais detalhe na seção de empregos em JavaScript. ### JavaScript é fácil de aprender Compaarado a várias outras linguagens de programação como Java, Python e PHP, JavaScript fornece pontos de ingresso acessíveis ao mundo da programação. A coisa mais boa sobre JavaScript é que vem pré-instalado em quasi todos os navegadores web, então você não precisa configurar qualquer ambiente para iniciar o desenvolvimento em JavaScript. Isto significa que você pode começar codando logo agora. ### JavaScript possui a maior comunidade A tamanho da comunidade é importante quando se trata de linguagens de programação porque quanto maior o tamanho da comunidade, mais ajuda você provavelmente obtém. Atualmente, JavaScript tem a maior comunidade Stack Overflow. Ele ultrapassou a Java em termos de tamanho da comunidade está ainda crescendo a um ritmo rápido. ### Utilizações ampla De minha opinião, uma das principais razões pelo qual você deveria aprender JavaScript é que sabendo-o, você pode construir um todo site do seu backend até o front. Além disso, pode construir um aplicativo de total flash de móvel para o backend quando for necesário. Não precisa aprender outras linguagens de programação; o Node. js é suficiente com conhecimento básico sobre base de dados e APIs. Aí não há nada que não possa fazer com JavaScript quando trata-se do desenvolvimento de site. ## Empregos que você pode obter depois de aprender JavaScript Agora vamos discutir alguns empregos a que você pode se candidatar depois de aprender JavaScript, e vamos também discutir seus salários médios nos EUA e Índia: ### Desenvolvedor Full-stack O desenvolvedor Full-stack é um dos cargos mais altamente pagos no setor de desenvolvimento em web. Um desenvolvedor Full-stack é igualmente habilitado em desenvolvimento cliente-side bem como server-side. Um desenvolvedor Full-stack ganha cerca de 9 lakh per ano, o que é uma quantia bem razoável para uma pessoa viva em Índia, mas se você é um desenvolvedor Full-stack nos EUA, você pode ganhar até US$100, 000 per ano, que é uma enorme quantia. ### Desenvolvedor Front-End Um desenvolvedor Front-End é o responsável pelo front-end de qualquer site ou aplicação. Obviamente, um desenvolvedor Front-End ganhará menos que um desenvolvedor Full-stack, mas a quantia de dinheiro que um desenvolvedor Front-End ganhará em um ano é decente. Um desenvolvedor JavaScript trabalha no front-end e ocasionalmente no back, e cada desenvolvedor JavaScript pode ser responsável por um site completo ou apenas alguns aspectos ou páginas de diferentes sites. Eles ganham bem quando se trata de salário. Um desenvolvedor JS nos EUA ganha cerca de US$75, 000 por ano, o que quando convertido em rúpias indianas suma em torno de 55 lakh aproximadamente, que é uma enorme quantia. ### Designer UI/UX Projetar uma interface é um trabalho interessante porque requer criatividade juntamente com habilidades. Em geral também é divertido projetar interfaces para atrair usuários. Para isso, um alguém deve possuir um grande número de criatividade. A quantia de dinheiro que um Designer UI/UX ganha em Índia é cerca de 900, 000 rupeias anuais, mas pode aumentar para até 20 lakh de rúpias anuais, dependendo das habilidades e da criatividade do designer. Portanto, escolha cuidadosamente sua carreira. ## Introdução ao DOM O DOM (Document Object Model) é uma API para documentos HTML e XML que ajudam o JavaScript a entender o que forma parte dos documentos HTML. E o representa todo o conteúdo da página na forma de objetos e nós, sejam elementos ou texto ou quaisquer dados armazenados na página. O todo o conteúdo da página pode ser acessado ou manipulado pelo JavaScript. ## Conclusão O JavaScript é uma linguagem poderosa e versátil que pode ser utilizada para vários propositos no desenvolvimento em web. É uma das linguagens mais rápidas a crescer e está entre as 10 primeiras linguagens utilizadas pelos desenvolvedores. Ao aprender JavaScript, você pode construir um todo site até o front e também construir um aplicativo de total flash de móvel para o backend utilizando Node. js. JavaScript é fácil de aprender e possui a maior comunidade. Os empregos disponíveis após aprender JavaScript são o desenvolvedor Full-stack, o desenvolvedor Front-End e o Designer UI/UX, e esses cargos têm salários razoáveis nos EUA e na Índia. Por isso, é uma boa ideia aprender JavaScript e iniciar no mundo do desenvolvimento em web. # Instalação do Visual Studio Code (Visual Studio Code Portuguese) Este passo a passo de instalação do Visual Studio Code é simples. Acesse o Google e pesquise por "VS Code". Na página que abre, você pode ver o primeiro link disponível que leva para o website oficial. Clique nesse link e você será levado para o local correto. Na sua tela, você verá a opção de "Download". Aqui você pode downloadar a versão estável, ou, se preferir, você pode escolher downloadar de acordo com as especificações de seu sistema operacional (Windows, Linux ou Mac). Então, caso você queira instalar para Windows, clique lá. Isso vai te levar para outra página e, quando terminar de downloadar, basta abrir o arquivo do download no seu `Downloads` e você terá acesso à pagina de concordância de licença. Leia cuidadosamente o termo de uso e, após concordar, clique em `Próximo`. Você será então pego para selecionar a localização onde você deseja instalar o Visual Studio Code. Pode deixar o local padrão para editores, caso deseja, mas também pode escolher outro local caso queira. Após isso, clique em `Próximo`, e o Visual Studio Code será instalado automaticamente. Aguarde, pois a instalação vai demorar um pequeno tempo. Depois que a instalação estiver concluída, clique em `Terminar`. O Visual Studio Code será então abrir automaticamente. ## Usando o Visual Studio Code (Utilizando o Visual Studio Code Português) * **Explorador**: Clique no ícone do Explorador na barra de ferramentas à esquerda para navegar pelos diretórios do seu sistema. Clique em `Abrir Pasta` e selecione o diretório que deseja utilizar. * **Pesquisar**: Ao longo do texto, existe uma barra de pesquisa para facilitar a busca de palavras específicas no código. Pressione `Ctrl+F` para abrir a caixa de pesquisa e digite a palavra ou expressão desejada. * **Verção Controle**: O Visual Studio Code oferece integração com Git, em especial. Além disso, há diversas extensões disponíveis que pode instalar para criar sua experiência mais fácil e produtiva. * **Debug**: Você pode iniciar a depuração do seu código ao clicar no botão `Executar` localizado na barra de ferramentas. Pressione `F5` para o mesmo comando. * **Extensions**: Clique no botão de extensões localizado na barra de ferramentas à direita para ver as extensões disponíveis no Marketplace. Entre pelo nome da extensão que deseja e instale-a. Dependendo do que você deseja usar o Visual Studio Code para, há um conjunto de extensões disponíveis que você pode utilizar para fazer seu trabalho mais fácil e eficiente. **Observação: ** este é um texto de guia modificado para aderir ao Markdown e a sua organização. Agradecemos as contribuições. # Depurando Código com console. log e Entendendo Variáveis em JavaScript Neste tutorial, vamos aprender a depurar nossa código usando a função console. log e vamos também explorar o conceito de variáveis em JavaScript. ## Entendendo console. log A depuração do nosso código é essencial para garantir que nossa aplicação está funcionando como esperado. Por depurar, podemos verificar se a saída de nossa código é o que previvemos. Um dos meios de fazer isso é usando a função console. log. Exemplo: ```javascript let a = 5; let b = 8; console. log(a + b); // Saída: 13 ``` Aqui, estamos somando dois números, `a` e `b`. Com console. log, podemos ver o resultado dessa operação no console. ## Introdução às Variáveis As variáveis são espaços de memória dentro do computador onde armazenamos informações úteis. O nome da variável representa a localização dessa informação e pode ser usado novamente e novamente de acordo com nossas necessidades. Antes da introdução de ES6/ECMAScript, as variáveis eram declaradas usando a palavra chave `var`: ```javascript // Antes de ES6/ECMAScript var a; // Declaração a = 15; // Atribuição ``` Com a emergência de ES6/ECMAScript, duas outras maneiras de declarar variáveis foram introduzidas: `let` e `const`. ## Nomeando Variáveis Quando nomearmos variáveis, existem algumas diretrizes a manter em mente: 1. Comece o nome da variável com uma letra, um underscore ou um sinal de dólar. 2. Não use outro símbolo, exceto o underscore ou o sinal de dólar. 3. Não use um número no início. 4. Não use palavras-chave reservadas como nomes de variáveis. ## Usando `let` e `const` `let` e `const` são usados para declarar variáveis, de maneira similar a como usamos a palavra-chave `var`. No entanto, eles têm alguns diferentes: 1. `let` é inacessível fora do bloco no qual foi declarado. 2. `const` define uma referência constante para um valor, mas não o valor constante em si. Não podemos modificar o valor primitivo, mas podemos modificar as propriedades de objetos constantes. Exemplo: ```javascript let bikeName = 'hero'; // Utilizando let console. log(bikeName); // Saída: hero { const x = 5; // Utilizando const console. log(x); // Saída: 5 // A linha a seguir gera um erro: "Atribuição a uma variável constante" // x = 10; } ``` ## Palavras-chave reservadas Não podemos usar palavras-chaves reservadas como nomes de variáveis. Por exemplo, não podemos usar "class" como nome de variável porque é uma palavra reservada em JavaScript: ```javascript // ERRO: "Token inesperado 'class'" let class; ``` Porém, podemos utilizar uma classe com um C maiúsculo: ```javascript class Car; // Utilizando class ``` Ou porque JavaScript é case-sensitive. Se tentarmos criar uma variável com o mesmo nome, mas uma letra diferente, JavaScript tratará elas como variáveis diferentes: ```javascript let classeCar; let ClasseCar; // Variáveis diferentes em JavaScript. ``` ## Conclusão Neste tutorial, aprendemos a depurar o nosso código usando a função console. log e a declaração e uso de variáveis em JavaScript. Também ourselves with concepts like `let`, `const`, and reserved keywords. Em futuros vídeos, aprenderemos conceitos como laços. # Tipos Primitivos de Dados em JavaScript JavaScript possui dois tipos básicos de dados primitivos: número, cadeia de caracteres e booleano, além do `undefined` e `null`. Esses dados primitivos podem ser divididos em cinco categorias principais: número, cadeia de caracteres, booleano, `undefined` e `null`. Por outro lado, dados não-primitivos ou complexos podem ser divididos em dois partes: matrizes e objetos. Vamos fazer um estudo mais aprofundado dos dados primitivos em JavaScript para entendê-los melhor. Declararemos várias variáveis para demonstrar o funcionamento de JavaScript primitivos: * `x = 16` * `y = "oläm mundo"` * `flag = true` Poderemos discutir as características de JavaScript que eu mencionou anteriormente. JavaScript tem uma memória dinamicamente tipada, isto é, a tipagem dos tipos de dados não precisa ser explicitamente definida ao declarar a variável. Isso significa que o tipo do dado varia automaticamente conforme a sua definição. Aqui você pode ver a declaração de três variáveis: `x`, `y` e `flag`: * `x` tem um valor numérico `16` * `y` é uma cadeia de caracteres `"oläm mundo"` * `flag` é um booleano, definido como `true`. Quando comparados com o Java e C++, a não tipagem forte em JavaScript pode ser algo estranho para alguns programadores, já que geralmente declaramos os tipos dos dados com `int` e `String`. Aqui estamos fazendo o que chamamos de não-tipagem fraca. Essa linha significa que não precisamos definir o tipo do dado: > "whatever the type of value you will pass to the variable the data type will change accordingly" Nesse exemplo, `x`, `y`, e `flag` têm tipos diferentes: * `x` possui um tipo numérico `16` * `y` é uma cadeia de caracteres `"oläm mundo"` * `flag` possui um valor booleano que pode ser `true` ou `false` Existem duas maneiras diferentes de descrever a falta de valores: * A ausência de valores definidos chama-se `undefined`. Nós declararemos uma variável e não atribuímos valor, assim, o seu tipo é definido como `undefined`. Vamos definir uma variável `p` sem atribuir um valor, logo `p` será de `undefined` tipo. * A ausência de valores explicitamente atribuídos em uma variável com valor nulo. Essas variáveis possuem um valor `null`: ``` let num = null; console. log(typeof num); // Resultado: objeto ``` Por favor, leia o restante deste arquivo no nosso futuro vídeo, onde nos referiremos a tipos de operações, operações matemáticas, variáveis, etc. , para obter mais informações. # Operadores de Atribuição em Markdown Tomando como exemplo as **variáveis** `a` e `b`, vamos utilizar operadores de atribuição em JavaScript. 1. **Operador de Atribuição (=)** Já temos atribuído o valor presente em `a` (que é `13`) a `b`. Por isso, está a mostrar o valor de `b` como `13`. ``` b = a // Ambas as linhas executam a mesma tarefa: atribuir o valor de `a` a `b`. ``` Ambas as linhas executam a mesma tarefa: atribuir o valor de `a` a `b`. 2. **(`+=`) Operador de Atribuição Adição** Vamos alterar o valor de `a1` primeiro. Uma possível opção seria `9`, então como fazer isso? ``` a1 += 9 // Ambas as fórmulas executam a mesma operação: adicionar `9` ao valor atual de `a1`. ``` Ambas as fórmulas executam a mesma operação: adicionar `9` ao valor atual de `a1`. 3. **(`-=`) Operador de Atribuição Subtração** Pode usar o operador `-=` para subtrair um número de uma variável. Vamos utilizar outra variável chamada `par`, e vamos atribuir-lhe um valor inicial `51`. ``` par -= 5 // Ambas as fórmulas executam a mesma tarefa: diminuir o valor de `par` por `5`. ``` Ambas as fórmulas reduzem o valor de `par` por `5`. 4. **(`*=`) Operador de Atribuição Multiplicação** Também temos asociações de atribuição a explorar. Aqui, fornecemos exemplos para `a3`, `a4`, e `a5`. ``` a3 *= 5 // Ambas as linhas executam a mesma operação: multiplicar `a3` por `5`. a4 /= 3 // Ambas as linhas executam a mesma operação: dividir `a4` por `3`. a5 %= 2 // Ambas as linhas executam a mesma operação: calcular o resto de `a5` quando é dividido por `2`. ``` Novamente, ambas as linhas executam a mesma operação como as suas contrapartes expansadas. 5. **(`+`) Operações de Concatenação de Strings** Além da função matemática, o `+` operador também funciona como um operador de concatenação, permitindo a concatenação de duas strings. ``` str1 = 'olá' str2 = 'mundo' str3 = 'bem-vindo' result = str1 + ' ' + str2 ``` No exemplo anterior, `' '` garante que haja um espaço entre as strings concatenadas. Se omitir, as strings não terão nenhum espaço entre elas. 6. **(`+=`) Operações de Concatenação de Atribuição de Strings** Também pode utilizar o `+=` operador para concatenar strings. ``` str3 += ' a simplesmente codificar' ``` Adicionar um espaço antes da string acompanhante mais é útil. 7. **Operadores Condicionais** A seguir, vamos discutir operadores condicionais, operadores lógicos, operadores bit a bit, operadores de comparação e operadores de tipo. A associação se refere à direção nas que as expressões são avaliadas. Por exemplo, se tiver uma expressão como `a + b`, pode determinar se é avaliada de esquerda para direita ou vice-versa. Mais sobre isso em futuros vídeos. A associação determina a prioridade entre os operadores. # Documentação de Operadores em JavaScript Este documento fornece uma introdução aos diferentes tipos de operadores em JavaScript. ## Operadores Condicionais Os operadores condicionais são utilizados para avaliar expressões booleanas. Há três operadores condicionais: `and`, `or`, e `not`. ### Operador `and` O operador `and` (`&&`) verifica se duas expressões booleanas são ambas verdadeiras. Ele retorna `true` apenas se ambas as expressões forem verdadeiras, caso contrário, retorna `false`. ```javascript if (x < 10 && y > 1) { // Código para ser executado se x < 10 e y > 1 } ``` ### Operador `or` O operador `or` (`||`) verifica se uma ou ambas as expressões booleanas são verdadeiras. Ele retorna `true` se qualquer uma das expressões forem verdadeiras, caso contrário, retorna `false`. ```javascript if (x > 8 || y < 5) { // Código para ser executado se x > 8 ou y < 5 } ``` ### Operador `not` O operador `not` (`! `) nega a expressão booleana que se segue. Ele retorna `true` se a expressão for falsa, e `false` se a expressão for verdadeira. ```javascript if (! flag) { // Código para ser executado se flag for falsa } ``` ## Operadores Lógicos Os operadores lógicos são utilizados para determinar a lógica entre dois valores. ### Operadores `and`, `or`, e `not` Os operadores lógicos são utilizados de maneira similar aos operadores condicionais, mas eles podem ser aplicados a valores numéricos, strings ou outros tipos de dados. ```javascript let x = 10; let y = 5; if (x > y && x < 20) { // Código para ser executado se x for maior que y e menor que 20 } if (x > y || x < 0) { // Código para ser executado se x for maior que y ou menor que 0 } if (! x) { // Código para ser executado se x for falso (por exemplo, x = 0) } ``` ## Operadores de Comparação Os operadores de comparação são utilizados para comparar dois valores e retornar `true` se forem iguais ou `false` se forem diferentes. ### Operadores `==` e `===` Os operadores `==` e `===` são utilizados para comparar dois valores. O operador `==` verifica se os valores são iguais, independentemente do tipo de dados. O operador `===` verifica se os valores são iguais e se os tipos de dados também são iguais. ```javascript let x = 10; let y = '10'; if (x == y) { // Código para ser executado se x e y forem iguais } if (x === y) { // Código para ser executado se x e y forem iguais e se o tipo de dado também forigual } ``` ### Operadores `>`, `<`, `>=`, e `<=` Os operadores `>`, `<`, `>=`, e `<=` são utilizados para comparar o valor de um valor com o valor de outro valor. ```javascript let x = 10; let y = 5; if (x > y) { // Código para ser executado se x for maior que 5 } if (x < y) { // Código para ser executado se x for menor que 5 } if (x >= y) { // Código para ser executado se x é maior ou igual a 5 } if (x <= y) { // Código para ser executado se x é menor ou igual a 5 } ``` # Declarações de Controle no JavaScript: uma visão geral Neste tutorial, discutiremos os conceitos básicos de declarações de controle no JavaScript, que são essenciais para realizar determinadas atividades, como iteração e tomada de decisão em seu programa. Abordaremos tanto declarações condicionais quanto iterativas, além dos comandos `break` e `continue`. ## Importância das Declarações de Controle As declarações de controle desempenham um papel fundamental no programação JavaScript, pois permitem: - Realizar determinadas atividades um número especificado de vezes. - Tomar decisões com base em certas condições. ## Declarações Condicionais As declarações condicionais são usadas quando precisamos tomar decisões com base em condições, normalmente quando temos duas opções ou duas condições diferentes e queremos escolher uma delas de acordo. Existem dois tipos principais de declarações condicionais: ### Instrução If-Else A instrução `if-else` é usada quando queremos verificar uma única condição. ```javascript if (condição) { // executar código se a condição for verdadeira } else { // executar código se a condição for falsa } ``` ### Instrução Else If A instrução `else if` é usada para verificar várias condições. ```javascript if (condição1) { // executar código se a condição1 for verdadeira } else if (condição2) { // executar código se a condição1 for falsa e a condição2 for verdadeira } else { // executar código se todas as condições forem falsas } ``` ## Declarações Iterativas (Laços) As declarações iterativas permitem executar um bloco de código repetidamente, o que é essencial quando precisamos executar uma ação várias vezes em vez de escrevê-la repetidamente. No JavaScript, existem quatro tipos principais de declarações iterativas: ### Laço For O laço `for` é usado para repetições necessárias. Ele executa um bloco de código especificado repetidamente enquanto uma condição dada for verdadeira. ```javascript for (inicializar; condição; incremento ou decremento) { // código a ser executado } ``` ### Laço While O laço `while` executa um bloco de código de forma contínua enquanto uma condição especificada for verdadeira. ```javascript while (condição) { // código a ser executado } ``` ### Laço Do-While O laço `do-while` é semelhante ao laço `while`, mas executa o bloco de código pelo menos uma vez antes de verificar a condição. ```javascript do { // código a ser executado } while (condição); ``` ### Laços Estranhos (for-in e for-of) Os laços `for-in` e `for-of` são especificamente usados para percorrer arrays e objetos. ## Comandos Break e Continue Embora não sejam considerados como declarações de controle em si, os comandos `break` e `continue` são frequentemente usados em conjunto com laços para interromper seu fluxo normal. - O comando `break` é usado para sair do laço totalmente. - O comando `continue` é usado para pular a iteração atual do laço. ```javascript for (let i = 0; i < 10; i++) { if (i === 5) { break; // sair do laço } if (i === 2) { continue; // pular a itera Por seguirem: Faça um resumo das diferenças em estruturas de decision em JavaScript de um modo em português (Portugal) (conservando todas as diferenças do MarkDown, incluindo termos em inglês quando aplicável) como seguinte: # Comparações em Lógicas if-else e Switch Case nas estruturas de programa de JavaScript Nesta página, exploraremos os problemas típicos quando se decidem entre if-else e estruturas deswitch do JavaScript enquanto preservamos a descrição destes e desse tipo e desempenho. ## Prévia de Estrutura Ambas `if-else` e a lógica do `Switch-Case` podem ter suas principais diferenças resolvidas à utilização desses em questão. Preencha todas essas opções de visualização (da seguir), onde nesta página iremos apenas referir em alguns tópicos destacados ### Condições A **condição se/então/senão** é estruturas controle altamente versatil que provam uma função e fornece brinquês do código diferente na base destes resultados, e está sempre pronto a receber quantas ou tal condicionantes em sequênia como estivem estátisticos dentro do descrição possível dentro dela `elif` e `endiçação (case - corpo `corpo destes). Quanto ao funcionamento no momento de analizar as distribuições. ## Estrutura Swicht Case: Comandos semelhante o **encontrar, Swicht do casos da avaliagem de estrutura** exeque que permite validação comparada a fórmulas numérica inteira especifica. Enfatizada onde existis grande número do comparações requeridas, tão bem quente em lendo códigos grandes se encontra é muito interessada se usaremos `do case` - uma estrutura da solução onde cada código exata pode testados, encontradas, valide e e forneces dados devolução separado para `Swicht. break` funções. Para outras o casos existintes caso desejes dados for não devuelvo. Uso `Se por encontre com default corpo de destinação no fundo ou posição`. A lógica de condicional se esporádicos do tipo ou as lê facilmente pelo programa de executados. Os tópos que as usar tem dificulados em desenhar e oportunidades menos poderoso `switch, usar condição se está desejamos para lendo do códigos que fazemos, um resultado um que tem e facilidade melhor. Usá-se muito e uma luz-claro escolar-de contagem. As diferentes posibilidades ou "branco por brancas" comparações mais que poder um resultados apresentad e umas a outro quando usou e um dê o condicionantes como tiver as próprios em si contéudo como possíveis. Deu a dadas possivel utilizar dum `defacto com`, onde no qual os valor invalidos foram processados uma tarefas automáticos possível após esquecerecemos estares na presensa uma respostas dadas nos processos na criações para assegurares resumir essencialmente da uma soluciones para caso utilizado não requerindo ler condicionamento longo desacoplou codigo separações apoiadas doutros resultado possibilível resulta. Isto pode significado de descrição por tarefaria para processarem se queremos resultado especiafica ou as dados dos elementos associada. Na fórmulas do lado das expressas pode-de expressas estendeu condicionales tâmpones de ser desejous especificacinhas dá a resultações num erro é fora e mostra qual um erros podem mostras e exiba o caso e as `resultados como também pode não estar na especifiacínica do formático resultad. Esses resultades para mostral. ## Lógicas Swicht como e condicaão se está send # Funções em JavaScript e Escopo de Variáveis Este tutorial aborda a síntaxe das funções no JavaScript, o passe de parâmetros, os tipos de retorno, e o conceito de variáveis locais e globais. ## Sintaxe de Função Para criar uma função em JavaScript, use a palavra-chave `function`, seguida do nome da função, colchetes de parênteses abertos e fechados, e chaves para o corpo da função. ```markdown function nomeDaFunção() { // Corpo da função } ``` A convenção de nomeação de funções é semelhante à de variáveis em JavaScript. ## Chamada de Função Para chamar uma função, escreva seu nome com colchetes de parênteses abertos e fechados. Quando as chamadas de função são fora da definição da função, elas retornam `undefined`. ```markdown function soma() { // Corpo da função } // Chamada da função soma(); // Undefined ``` ## Parâmetros As funções podem ter parâmetros, que podem ser passados através da chamada da função. Em vez de declarar variáveis dentro da função, podemos passar valores para a função como parâmetros. ```markdown function soma(x, y) { // Corpo da função } soma(4, 3); // 7 ``` ## Tipos de Retorno As funções podem retornar valores. Para retornar um valor, use a palavra-chave `return`, seguida do valor que deseja retornar. ```markdown function soma(x, y) { const total = x + y; return total; } const resultado = soma(4, 3); // 7 ``` ## Escopo de Variáveis No JavaScript, as variáveis podem ter escopo global ou local dependendo de onde são declaradas. ### Variáveis Globais As variáveis globais são acessíveis em qualquer lugar de um programa. ```markdown let a = 5; console. log(a); // 5 ``` ### Variáveis Locais As variáveis locais são acessíveis apenas dentro de sua função enclotrada. ```markdown function minhaFunção() { let x = 10; console. log(x); // 10 } minhaFunção(); console. log(x); // Referência indefinida: x ``` # JavaScript: Sequências de Escape em Strings Nesta lição, discutiremos as sequências de escape em JavaScript. ## Impressão de uma String com Caracteres Especiais Ao trabalhar com JavaScript, pode-se encontrar situações em que precisa imprimir uma string com caracteres especiais, como aspas duplas ou quebras de linha. Para esses casos, o JavaScript fornece sequências de escape. ### Aspas Duplas (") Para imprimir aspas duplas dentro de uma string, use um único barra invertida (`) seguido por uma aspas dupla (`\"`). ```javascript let mensagem = 'It\'s all right'; console. log(mensagem); ``` ### Aspas Simples (') Para imprimir aspas simples dentro de uma string delimitada por aspas duplas, use um único barra invertida (`) seguido pela aspas simples (`\'`). ```javascript let mensagem = "It's all right"; console. log(mensagem); ``` ### Barra Invertida (\\) Para imprimir uma barra invertida dentro de uma string, use duas barras invertidas (`\\`). ```javascript let caminho = "C: \\Users\\SeuUsuário\\Documentos"; console. log(caminho); ``` ### Quebra de Linha (\n) Para criar uma nova linha dentro de uma string, use a sequência de escape de quebra de linha (`\n`). ```javascript let mensagem = "Linha 1\nLinha 2"; console. log(mensagem); ``` ### Sequências de Escape Aqui está uma lista de sequências de escape comuns em JavaScript: - `\b`: Retrocesso - `\f`: Avanço de forma - `\n`: Quebra de linha - `\r`: Retorno de carro - `\t`: Tabulação - `\v`: Tabulação vertical ## Arrays em JavaScript Arrays em JavaScript são um tipo de dados composto ou não primitivo que permite armazenar vários valores em uma única variável. ```javascript let carros = ['Honda', 'Kia', 'Ford']; console. log(carros); ``` Pode-se acessar os elementos de um array usando seu índice. Em JavaScript, os índices dos arrays começam em 0 (zero). ```javascript let carros = ['Honda', 'Kia', 'Ford']; console. log(carros[1]); // Saída: Kia ``` Pode-se percorrer um array usando um `for` loop. ```javascript let carros = ['Honda', 'Kia', 'Ford']; for (let i = 0; i < carros. length; i++) { console. log(carros[i]); } ``` No próximo tópico, aprenderemos sobre os tipos de dados em JavaScript. Acompanhe-nos! 😉 Título: JavaScript Arrays e Objects ---------------------------------- Aprenda a utilizar arrays e objects em JavaScript para gerenciar os dados de forma eficaz. ### Criando um array em JavaScript Em JavaScript, você pode criar um array usando `new Array()` e especificando os elementos a serem armazenados. ```javascript let frutas = new Array('maçã', 'banana', 'manga'); ``` Também é possível utilizar uma sintaxe mais curta: ```javascript let frutas = ['maçã', 'banana', 'manga']; ``` Acessando elementos: ```javascript console. log(frutas[0]); // 'maçã' console. log(frutas[1]); // 'banana' console. log(frutas[2]); // 'manga' ``` ### Utilizando um loop para acessar os elementos de um array É possível utilizar um `for` laço para acessar todos os elementos de um array: ```javascript for (let i = 0; i < frutas. length; i++) { console. log(frutas[i]); } ``` ### Métodos de Arrays #### Push Para adicionar um elemento a um array usando o método `push()`: ```javascript let cars = ['BMW', 'Mercedes', 'Tesla']; cars. push('Nissan'); ``` #### Pop Para remover o último elemento de um array usando o método `pop()`: ```javascript let cars = ['BMW', 'Mercedes', 'Tesla', 'Nissan']; let carRemoved = cars. pop(); console. log(carRemoved); // 'Nissan' console. log(cars); // ["BMW", "Mercedes", "Tesla"] ``` ### Criando um Object em JavaScript Em JavaScript, você pode criar um object usando a sintaxe de literal de objecto: ```javascript let car = { fabricante: 'Audi', modelo: 'Q7', preço: 50000 }; ``` É também possível armazenar funções como propriedades dentro de um object, que são conhecidas como métodos. ```javascript let car = { motor_todo_rodas: function() { return 'Este carro vem com motor a tracção integral. '; } }; console. log(car. motor_todo_rodas()); // "Este carro vem com motor a tracção integral. " ``` Para acessar as propriedades de um object, você pode utilizar dot ou colchetes de sintaxe: ```javascript console. log(car. fabricante); // 'Audi' console. log(car['fabricante']); // 'Audi' ``` ### Métodos de Objects Você pode utilizar a propriedade `length` para obter o número de propriedades em um object: ```javascript console. log(Object. keys(car). length); // 3 ``` ### Utilizando Objects para armazenar vários dados Em vez de cópiar e colar as mesmas propriedades para vários objects, você pode colocar todas as propriedades necessário para uma entidade única (por exemplo, um carro) sob um nome de um object único: ```javascript let car1 = { fabricante: 'Audi', modelo: 'Q7', preço: 50000, motor_todo_rodas: function() { return 'Este carro vem com motor a tracção integral. '; } }; let car2 = { fabricante: 'Tesla', modelo: 'Model S', preço: 70000, motor_todo_rodas: function() { return 'Este carro vem com motor a tracção integral. '; } }; ``` Agora você pode facilmente acessar e manipular as propriedades de cada objecto de carro. # Manipulação de Objetos de Carro em JavaScript Para acessar as propriedades e métodos de um objeto em JavaScript, é necessário utilizar o nome do objeto com o operador de ponto e o nome da propriedade ou método. Vamos tomar como exemplo um `objeto de carro`: ``` - Use o objeto de carro com o operador de ponto. - Acesse a propriedade: por exemplo, `car. manufacturer`. - Acesse o método: por exemplo, `car. allWheelDrive()`. Aqui está um exemplo de uso do objeto de carro com o método `allWheelDrive`: ```javascript car. allWheelDrive(); // Dentro da funcao allWheelDrive: function allWheelDrive() { // . . . } ``` É também possível chamar a função `allWheelDrive` do exterior: ```javascript car. allWheelDrive(); // Saída: Este carro possui tração 4x4 ``` ## Criação de vários Carros com a Função Construtora Em JavaScript, podemos criar vários objetos usando uma única plantilla, também conhecida como função construtora: ```javascript function Cars(manufacturer, model, price) { this. manufacturer = manufacturer; this. model = model; this. price = price; this. allWheelDrive = function() { // . . . } } // Uso: let c1 = new Cars('RD', 'Q7', 50000); let c2 = new Cars('BMW', 'X7', 40000); ``` Agora é possível acessar as propriedades e métodos dos carros `c1` e `c2`, na mesma forma como demonstrei acima. ### Uso de Tipos de Dados Primitivos como Objetos Em JavaScript, é possível converter qualquer tipo de dado a exceção de `null` e `undefined` em um objeto utilizando a palavra-chave `new`: ```javascript let str1 = new String('Olá'); // Convert string em um objeto let num1 = new Number(42); // Convert number em um objeto let arr1 = new Array(1, 2, 3); // Convert array em um objeto ``` É possível verificar se uma variável é um objeto ou um tipo de dado primitivo utilizando o operador `typeof`: ```javascript console. log(typeof str1); // Saída: 'objeto' console. log(typeof 'ola'); // Saída: 'string' ``` # Propriedades e Objetos no JavaScript Este tutorial mostrará como trabalhar com propriedades e objetos no JavaScript. Ensaremos adicionar, deletar e modificar propriedades, além de criar novos objetos utilizando diferentes métodos. ## Adicionando Propriedades a um Objeto Para adicionar uma propriedade a um objeto existente, utilize o nome do objeto seguido de um ponto e o nome da propriedade, e depois atribua um valor a ela. Por exemplo, vamos adicionar uma nova propriedade `car. cor`: ```javascript car. cor = 'preto'; ``` ## Imprimir Propriedades Para imprimir um valor de uma propriedade, use o nome do objeto seguido de um ponto e o nome da propriedade: ```javascript document. write(car. cor); ``` ## Excluindo Propriedades Para excluir uma propriedade, use o `delete` seguido do nome do objeto e da propriedade: ```javascript delete car. cor; ``` ## Alterando o Tipo de Dados da Propriedade JavaScript é uma linguagem fracamente tipada, portanto podemos alterar o tipo de dados de uma propriedade na hora. Por exemplo, para alterar o tipo de dados da propriedade `car. preço` de número para uma string, podemos atualizar seu valor da seguinte maneira: ```javascript car. preço = '70, 000'; ``` ## Verificando o Tipo de Dados da Propriedade Para verificar o tipo de dados da propriedade, use o operador `typeof`: ```javascript console. log(typeof car. preço); // saída: 'string' ``` ## Criando Objetos usando JavaScript Constructors Há três maneiras de criar objetos no JavaScript: notação de objeto literal, função de construtor e método de objetos de construção. Neste tutorial, vamos centrar-nos em funções de construtor. Uma função de construtor é uma função JavaScript que cria e inicializa novos objetos. Uma função de construtor é definida com uma letra máiucla inicial. Aqui tem um exemplo simples: ```javascript function Carro(marca, modelo) { this. marca = marca; this. modelo = modelo; } // Criar um novo objeto carro utilizando o construtor let meuCarro = new Carro('Toyota', 'Camry'); console. log(meuCarro); ``` Neste exemplo, definimos uma função de construtor `Carro` com duas propriedades `marca` e `modelo`. Em seguida, criamos um novo objeto carro chamado `meuCarro` utilizando o operador `new`. Você pode acessar as propriedades do objeto da seguinte maneira: ```javascript console. log(meuCarro. marca); // saída: 'Toyota' console. log(meuCarro. modelo); // saída: 'Camry' ``` Funções de construtor são úteis quando você quer criar múltiplas instâncias de um objeto com as mesmas propriedades. Para criar várias instâncias, basta chamar a função construtor duas vezes, e cada chamada criará um novo objeto com as propriedades especificadas: ```javascript let outroCarro = new Carro('Honda', 'Civic'); console. log(outroCarro); ``` Cada instância é um objeto separado que mantera suas próprias propriedades. Seguindo as suas orientações, formatou e corrigi o texto abaixo. Adicionei seções para melhorar a estrutura geral e fiz algumas correções menores na gramática e seguiriação. ``` Cálculos de Retângulos utilizando JavaScript -------------------------------------------- ### Usando a função Construtora Este método retorna a área do retângulo, portanto nos escreveremos uma função para ele aqui. Chamamos essa função de `Área`. A função vai simplesmente retornar o valor de `comprimento` multiplicado por `largura`. ``` function Área(comprimento, largura) { this. comprimento = comprimento; this. largura = largura; this. getÁrea = function () { return this. comprimento * this. largura; }; } ``` Agora, completamos a função construtora. O que resta é criar um objeto usando a função `Área`, passando os parâmetros adequados, e chamando o método `getÁrea` para retornar a área. Suponha que estamos criando um objeto para um retângulo chamado `r1`. Para criar esse objeto, utilizaremos a palavra-chave `new` e passemos os parâmetros desejados para a função `Área`. Aqui, passamos `5` como o comprimento e `10` como a largura. ``` let r1 = new Área(5, 10); ``` Para imprimir a área, apenas chamaremos o método `getÁrea` em `r1`: ``` console. log(r1. getÁrea()); // Retorna 50 ``` observe que podemos também imprimir o comprimento e a largura acessando-os diretamente: ``` console. log(r1. comprimento); // Retorna 5 console. log(r1. largura); // Retorna 10 ``` ### Adicionando outro objeto Suponha que agora queramos criar outro retângulo chamado `r2` com um conjunto diferente de dimensões. Podemos copiar o código existente e atualizar as dimensões seguindo: ``` let r2 = new Área(4, 10); ``` Agora podemos imprimir a área, comprimento, e largura para `r2` usando o mesmo método anterior. ### Criando Objetos Adicionais usando Prototypes Para adicionar métodos adicionais para nossos objetos, podemos definir-lhes na função construtora usando o prototype: ``` function Área(comprimento, largura) { this. comprimento = comprimento; this. largura = largura; } Área. prototype. getÁrea = function () { return this. comprimento * this. largura; }; Área. prototype. getParâmetro = function () { return this. comprimento + this. largura; }; ``` Usando este abordagem, podemos chamar o método `getParâmetro` em qualquer instância da função `Área`: ``` console. log(r1. getParâmetro()); // Retorna 15 ``` ### Prototypes em JavaScript Agora vamos falar sobre outro importante tópico – prototypes em JavaScript. Aqui, vamos impressão um aviso no console para entendimento mais fácil. ``` console. log("Bem-vindo a Simply Code"); ``` Nosso último exemplo aprendemos como criar um objeto usando a notação de objeto literal. Este capítulo vai se concentrar na criação de objetos mediante uma função construtora. Primeiro, criaremos uma função chamada `Xyz`. Essa função recebe três parâmetros (`nome`, `materia`, e `endereço`) e guarda-os como propriedades usando o `this` keyword. ``` function Xyz(nome, materia, endereço) { this. nome = nome; this. materia = materia; this. endereço = endereço; } ``` Agora podemos criar uma instância de `Xyz` e salvá-la em um objeto chamado `x1`: ``` let x1 = new Xyz("Caution", "JavaScript", "Bangalore"); ``` Finalmente, podemos imprimir o objeto chamando o `console. log` com `x1` como argumento. ### Prototypes e a propriedade `constructor` É importante destacar que quando utilizamos uma função construtora, o objeto criado também possui uma propriedade `constructor` apontando para a função usada para criá-lo. Aqui está como o objeto `x1` aparecia no console com a propriedade `constructor` exibida: ``` console. log(x1); // Displays [Object: constructor: Xyz] x1 {nome: "Caution", materia: "JavaScript", endereço: "Bangalore"} ``` # JavaScript Prototypes para Herança de Objetos Neste tutorial, vamos discutir a forma tradicional de usar prototypes para herança em JavaScript. ## Função para obter endereço Escreveremos aqui uma função que não precisará de parâmetros. Suponha que ela retorne o valor de `address`. Assim, escreveremos aqui `. address` e estaremos prontos. Salve-o agora. Se nós transpor ao `prototype` dos objeto podemos ver que temos um protótipo a mais aqui nomeado `getAddress`. ## Criando um novo objeto O que precisamos fazer agora é criar outro objeto, digamos que estamos copiando isso do `getAddress` prototype. Vamos alterar o assunto porque estamos procurando um assunto, por isso vamos alterar este valor também. Digamos que tenha aqui `simply code` e vamos alterar o nome do objeto, digamos que tenha `x2` agora. Salve o e se escrever `x2. getAddress()` pode ver que a saída é `mars` porque o valor que passámos ao criar o objeto é `mars`. Podemos acessar este valor diretamente usando o método do prototype. ## Adicionando uma propriedade a uma função de construtor Se tentarmos adicionar uma propriedade aqui, digamos se tentarmos adicionar uma propriedade a esta função existente, o que temos que escrever é `. prototype. grades`, digamos que o `grade` é `a`. Salve agora. Aqui pode ver que não haverá mudanças nos prototypes ou nas propriedades. Basta um preview para ver isso. A única coisa que podemos fazer é adicionar novas propriedades a funções de construtor ou podemos usar a propriedade de prototype aqui também. ## Propriedade de Protótipo do JavaScript O JavaScript prototype property permite-nos adicionar novas propriedades a um construtor, exatamente como adicionámos métodos a uma função de construtor anteriormente. Nós podemos adicionar propriedades também. Para isso, escreva`xyz. prototype`e em seguida escreva o nome da propriedade, digamos`grades`, e em seguida passará o valor, digamos que o `grade` é `a`. Salve isso agora e se regressar ao `prototype`, verificará que temos uma propriedade aqui chamada `grades` e o valor é `a`. Se tentar imprimir`x2. grade` no nosso console, o resultado será`a`. ## Herança em JavaScript A herança é um conceito essencial em qualquer linguagem de programação orientada a objetos. A herança se refere ao procedimento através do qual um classe ou um construtor herda as propriedades e métodos de outro construtor em termos simples. Vamos discutir classes e herança no próximo vídeo. Por enquanto, vamos nos concentrar na forma tradicional de usar prototypes para herança. ## Criando um objeto com prototype Cada vez que criamos um objeto com um método, como podemos criar um objeto com a ajuda da função de objeto literal ou podemos fazê-lo da mesma maneira com a ajuda da função de construtor, temos um prototype. Cada vez que criamos um objeto, podemos ver que ele tem um prototype. Vamos criar um protótipo, assim a sintaxe será assim: ```javascript const employee = { post: function() { return 'software developer'; }, changeName: function(name) { this. name = name; } }; ``` Salve esse programa e verifique se ele tem erros no console. Aqui criamos um protótipo chamado `employee` e possui duas funções, uma é o empregado `post` e a outra é `changeName`. ## Criando um objeto com a ajuda de `Object. create()` Agora, vamos criar uma função também. O que vamos fazer é criar um objeto aqui, digamos que criamos um objeto com a ajuda da função `Object. create()` Método. É obrigatório escrever `Object. create()` e em seguida passar o nome do protótipo, então vamos escrever `employee`, e em seguida podemos imprimir no nosso console, então vamos escrever `console. log` e `even`. Salve e verifique no console e podemos ver que não temos nada a mais além de um único protótipo. Aqui temos um único protótipo `employee` aqui, não temos método relativamente. Se abrir, temos os dois métodos de certo, `post` e `changeName`, mas se escreverem `even. name`, o valor de `name` será `undefined`. ## Alterando propriedades e Usando Métodos Se quisermos alterar o nome, digamos que vamos alterar o nome para `ram`. Se salvarmos agora, pode ver aqui que o nome é alterado para `ram` inicialmente, era `undefined`, e quando usamos o método `changeName`, podemos ver aqui que o nome está alterado para `ram`. Isso significa que os métodos que definimos dentro do protótipo estão funcionando. ## Resumo Neste tutorial, aprendemos a utilizar prototypes para herança em JavaScript. Criamos um protótipo, criamos um objeto com ele usando `Object. create()` e aprendemos como alterar as propriedades e utilizar os métodos no objeto. No próximo tutorial, discutiremos classes e herança em JavaScript com sintaxe de ES6. # Documentação do Funcionário Esta documentação detalha o processo de adicionar um método a um protótipo do funcionário usando JavaScript. Começaremos por criar um método `post` para o construtor `funcionário`, em seguida, criaremos um objeto à partir deste construtor. ## Construtor de Funcionário Criaremos um método `post` que retorna as informações do funcionário. ```javascript // Define o método post para o funcionário Funcionário. prototype. post = function() { return this. nome + ' é um criador de conteúdo'; }; ``` ## Criação de um objeto de Funcionário Agora, vamos criar um objeto de funcionário com o nome `caution`, um ID e um salário. ```javascript // Criamos um objeto de funcionário const caution = new Funcionário({ nome: 'caution', id: 3432, salário: 10000 }); // Imprima as informações do funcionário console. log(caution. nome); ``` ## Herança de Propriedades e Criação de um Objeto de Programador São criados um novo construtor, `programador`, que herdara propriedades do construtor de funcionário e adicionou uma propriedade `língua`. ```javascript // Define o construtor do programador function Programador(nome, id, salário, linguagem) { this. nome = nome; this. id = id; this. salário = salário; this. linguagem = linguagem; // Herdar propriedades do construtor de funcionário Funcionário. apply(this); } // Fazer com que o programador seja um protótipo do funcionário Programador. prototype = Object. create(Funcionário. prototype); ``` ## Criação de um Objeto de Programador Agora vamos criar um objeto de programador para um funcionário, `arun`, que é um criador de conteúdo e mestre em JavaScript. ```javascript // Criamos um objeto de programador const arun = new Programador('arun', 4321, 12000, 'JavaScript'); // Imprima as informações do programador console. log(arun. nome); console. log(arun. id); console. log(arun. salário); console. log(arun. linguagem); console. log(arun. post()); // arun é um criador de conteúdo ``` ## Herança e Métodos Por fim, incluiremos o método `post` do construtor de funcionário no protótipo do construtor de programador. ```javascript // Fazer o método post disponível no objeto de programador Programador. prototype. post = Funcionário. prototype. post; ``` Obs. : Se você encontrar erros ao executar o código devido ao protótype não sendo atribuído ao construtor Programador, você precisará adicionar a seguinte linha no construtor de programador: ```javascript // Define o construtor para o Programador Programador. prototype. constructor = Programador; ``` # Documentação: Métodos e Funções Estáticas em Classe (JavaScript) Sob o escopo de **underscore 2**, poderemos ver aqui que estamos com ambos os métodos: `org` e `dub`. Vamos tentar chamar este método primeiro. Então, o que vamos fazer é enviar para nossa console `caution. dub`. Aqui você pode ver que estamos com a saída como a data de nascimento de `caution` é 1999. Similarmente, se tentarmos chamar `function caution. org`, você pode ver aqui que estamos com a saída como "Eu sou o aviso de simplesmente código". Então, ambos os métodos estão funcionando corretamente; temos ambas as saídas aqui. A primeira diz que a data de nascimento de `koshel` é 1999, e a próxima dá o nome da organização. Avançando, vou me aventurar a discutir mais um conceito em classes - **funções estáticas em classes**. Estaremos discutindo funções estáticas em classes. Para definir um método estático, precisamos usar o **statico** palavra-chave seguida pelo nome do método. Se quisermos definir um método estático, o que precisamos fazer é usar a palavra-chave statico. A palavra-chave statico sempre é precedida pelo nome da função. Suponhamos que criemos um método aqui, suponhamos que o nome deste método seja, por exemplo, `add` e então temos o corpo deste método. O que queremos fazer é somar dois números, não é cabido? Então passaremos aqui dois parâmetros também, suponhamos que os chamemos de `a` e de `b`, então queremos retornar a soma, não é conseguido, então iremos escrever `return a + b`. Parece correto não. Fique atento: não precisamos de nada do tipo `this` para se referir ao objeto que invocou a função. Isto pode tornar o código mais fácil de ler, pois não precisamos chamar dentro de `this`. Observe que, embora a primeira linha indique que o método é um membro de `student`, nós realmente podemos chamá-lo fora da classe: ``` console. log(student. add(4, 5)); // 9 ``` Vamos agora para a definição de uma função estática, por exemplo: ```javascript class Student { static sumOfAges(array) { var total = 0; for (var i = 0; i < array. length; i++) { total += array[i]. age; } return total; } } ``` Utilização de funções estáticas para acessar a propriedade de um objeto estática: ```javascript class Student { static name; constructor(name) { this. name = name; } static getExistingStudentByName(name) { if (this[name]) { return this[name]; } return null; } } let john = new Student("John"); let jane = new Student("Jane"); Student. name = "a Class"; console. log(Student. getExistingStudentByName("John")); // John console. log(Student. getExistingStudentByName("a Class")); // Class console. log(Student. getExistingStudentByName("Jane")); // null ``` Mudando de tópico, vamos falar agora sobre **Héritage com a ajuda de classes em JavaScript**. Usamos, antes, o conceito de herança, certo? Discutei que a herança é o procedimento pelo qual uma classe herda as propriedades e métodos de outra classe. Assim, hoje em dia, estamos vai ver como podemos fazer a implantação da herança com classes em JavaScript. Embora o conceito permaneça o mesmo, criaremos outra classe aqui, e herdaremos as propriedades desta classe com mais propriedades da classe derivada. Sabemos que. . . A classe que criamos agora herdará propriedades de classe "student". Agora, vamos criar um construtor para esta classe: ```javascript class Student2 extends Student { constructor(name, language) { super(name); this. language = language; } } ``` Vamos criar uma outra classe que herde da classe "student2": ```javascript class Student3 extends Student2 { constructor(name, language, section) { super(name, language); this. section = section; } } ``` Como o construtor `Student3` chama o construtor `Student2`, dê os parâmetros `name` e `language` explicitamente passados: ```javascript let student = new Student3("John Doe", "English", "1A"); ``` Ao chamar o construtor `Student3`, este _em delivered_, todos os membros herdados da `Student` e do `Student2` também estão disponíveis: ``` > console. log(student. name) "John Doe" > console. log(student. language) "English" > console. log(student. section) "1A" ``` Nosso próximo tópico será a extensão. O objetivo da extensão é tornar métodos do objeto totalmente funcionais no objeto base sem uma modificação em código no mesmo, além disso, gerando recursões de métodos aninhados se os métodos que vamos estender tiverem a referência `this`. ```javascript let methods = [ 'toString', 'valueOf', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', 'constructor' ]; const Person = { name: 'John' }; let NamedObject = Object. create(Person); NamedObject. toString = function() { return this. name; }; console. log(NamedObject. toString()); // 'John' console. log(NamedObject. hasOwnProperty('toString')); // false console. log(NamedObject. toString. constructor === Object. getPrototypeOf(NamedObject). constructor); // true // Extendendo outro construtor class NamedObject2 extends Object { constructor(name) { super(); this. name = name; } toString() { return this. name; } } let namedObject2 = new NamedObject2('Test'); console. log(namedObject2. toString()); // 'Test' ``` **Observações cruciais sobre o uso de métodos estáticos e de objetos: ** Uma função estática é *desprotegida* de `this` e durante um _call_ será invocada com o `Object` em escopo (`window`, `global`, etc), o que pode causar mais erros de código. Isso significa que todos os erros de `this` no método são resultados do uso inconsistente de `that` ou erros maiores devido a inter-relações entre objetos. Alguns Gerentes de Projetos evitam o uso de `this` e talvez aconselhem que explorem o uso de funções estáticas porém, isso por sua vez pode criar padrões muito abstratos para projetos que requerem o uso de objetos muitas vezes. Isso é tudo por hora. Aprender sobre Javascript pode ser um pouco difícil, pois não é uma linguagem muito simples. Mas para além da dificuldade técnica que uma linguagem como o Java e a maioria dos outros podem não ter, existe a dificuldade de decorar membros destes e dividir os métodos públicos e privados. MasJS é uma linguagem mais poderosa que 10 linhas de código de Java . / Python / PHP podem atingir. O sucesso do JavaScript é grande devido a isto mesmo. # Propriedades de Estilização do JavaScript: Acesso a Elementos com o Método de Tag Name Neste tutorial, vamos aprender a alterar os estilos de diferentes elementos em um arquivo HTML usando JavaScript. Vamos me igualar no método de Tag Name para acessar múltiplos elementos com o mesmo nome. ## Mudando a Família de Fontes Comecemos por mudar a família de fontes de um determinado `div` tag. ```markdown 1. **Mudando a Família de Fontes** Certas propriedades em JavaScript, como `style`, são umas destas propriedades. Agora, vamos escrever ali (acima) nós diríamos `font-family`. Ele está a fazer o nosso trabalho da parte CSS com as propriedades presentes em JavaScript. Vamos dizer que estamos mudando a nossa fonte para `Courier New`. ```javascript document. getElementsByTagName("div")[0]. style. fontFamily = "Courier New"; ``` Grave-o e, ao clicar no botão enviar, o estilo da primeira secção `div` será mudado para `Courier New`. ## Mudando a Cor de Fontes Agora, vamos mudar a cor da fonte de outro `div` tag. ```markdown 2. **Mudando a Cor de Fontes** Vamos fazer algumas alterações no segundo `div` tag. Para isso, elegemos `x` e o número de índice será `1`. Depois, nós usaremos o `style` propriedade mais uma vez e vamos dizer que estamos escrevendo uma `font-color`. Bem, depois faremos o mesmo para o elemento presente no número três. Para isso, vamos escrever aqui `x` e o número de índice será `2`. ```javascript document. getElementsByTagName("div")[1]. style. color = "blue"; document. getElementsByTagName("div")[2]. style. fontStyle = "italic"; ``` Grave-o e, ao clicar no botão enviar, pode-se ver a cor da fonte mudar para o segundo `div` segmento, e a texto no terceiro `div` segmento aparecerá em traço de itálico. ## Mudando a Cor de Fundo Finalmente, vamos mudar a cor de fundo do último `div` tag. ```markdown 4. **Mudando a Cor de Fundo** Usaremos o número `3` para o último `div` tag. ```javascript document. getElementsByTagName("div")[3]. style. backgroundColor = "red"; ``` Grave-o e, ao clicar no botão enviar, pode-se ver a cor de fundo mudar para o último `div` segmento. ## Acessando Múltiplos Elementos com o Mesmo Nome de Tag Se tivermos centenas de elementos similares como `div` tags no nosso site e todos estarem presentes em diferentes localizações, podemos inserir outros elementos entre estes `div` tags e usar o mesmo método para alterar os estilos dos `div` tags. ```markdown Aqui, estevemos a inserir dois mais elementos entre os `div` tags. - Uma forma com dois campos de texto diferentes (nome e idade) - Um botão de enviar Agora, vamos mudar a cor de fundo de todos os `div` tags. ```javascript document. getElementsByTagName("div"). forEach(function(div) { div. style. backgroundColor = "red"; }); ``` Grave-o e, ao clicar no botão enviar, pode-se ver a cor de fundo mudar para todos os `div` segmentos. ## Unicidade da Atributo Id Também é importante lembrar que o atributo id para cada elemento deverá ser único. Embora percebessemos isso em vídeos anteriores, onde usamos o mesmo ID para dois elementos diferentes quando em acessar uma propriedade CSS de estilização usando o atributo id, se tentarmos fazer o mesmo coisa com JavaScript, receberemos um erro. ```javascript // Este código irá lançar um erro porque ainda estamos a utilizar dois elementos no HTML com o mesmo id. document. getElementById("mesmoId"); ``` Acima está o motivo pela qual não usamos o método com atributo ID em JavaScript, pois desejamos acessar vários elementos com o mesmo nome, pois, é impossível utilizar o método de ID individualmente para cada elemento presente no documento HTML. # Acessando e modificando elementos HTML com o método `getElementsByClassName` em JavaScript (Português de Portugal) JavaScript possui métodos para acessar elementos de um arquivo HTML, como o método `getElementsByClassName` que pode ser utilizado para obter uma coleção de elementos com uma determinada classe. Neste exemplo, irei mostrar como utilizar o método `getElementsByClassName` para acessar elementos HTML e aplicar alterações estilísticas em cada um deles. ## Acessando e alterando um elemento específico Para começar, vamos tomar uma variável e, em seguida, utilizaremos o método `document` para obter referências de todos os elementos de um arquivo HTML. Primeiro, defina a variável `x` como `document. getElementsByClassName('cls1')`. Aqui, `cls1` representa o nome da classe dos elementos que queremos obter referência. Depois, implementamos o método `style` para aplicar alterações de estilo nos três elementos `section`. Cada um dos `sections` tem uma classe `cls1` e estão presentes dentro de um array. Para acessar qualquer um dos elementos, pode-se escrever `x[índice]` (onde o `índice` corresponde ao índice do elemento no array), seguido pelo nome da propriedade do `style` que queremos aplicar e o novo valor desejado. Por exemplo: ```javascript // Para alterar o estilo do texto de Section 1 em itálico, escrevemos: x[0]. style. fontStyle = "italic"; // Para alterar o estilo de cor do texto de Section 2 para azul, escrevemos: x[1]. style. color = "blue"; // Para alterar o estilo de peso do texto de Section 3 para grosso, escrevemos: x[2]. style. fontWeight = "bold"; ``` Salve o código e, ao clicar no botão "Enviar" no navegador, pode verificar resultados das alterações aplicadas aos respectivos elementos. Se o elemento "located" não estiver visível, visse um pouco mais para verificar as alterações aplicadas. ## Modificando vários elementos com um loop `for` Para modificar vários elementos simultaneamente, pode-se utilizar um loop `for` de laço. Iniciei-os, vamos comentar as três declarações existentes e, em seguida, escrever o seguinte código: ```javascript for (let i = 0; i < x. length; i++) { x[i]. style. backgroundColor = "yellow"; } ``` No código acima, o loop `for itera através` da coleção `x` de elementos referenciados anteriormente e aplica a cor de fundo "amarelo" em cada um deles. Após executar o código, todos os três sections terão cor de fundo amarela. ## Conclusão O método `getElementsByClassName` em JavaScript é um método útil para acessar e modificar elementos HTML com base na sua classe de CSS. No entanto, quando você utiliza este método para modificar muitos elementos, é recomendável utilizar um loop `for` para aplicar as alterações de maneira eficiente. # Funções de retorno de chamada em JavaScript As funções de retorno de chamada são um conceito comumente utilizado no JavaScript. São funções que são passadas como argumento para outra função. Nesta guia, iremos explicar o conceito de funções de retorno de chamada e fornecer um exemplo simples para ilustrar seu uso. ## O que são funções de retorno de chamada? Uma função de retorno de chamada é uma função que é passada como argumento para outra função. De acordo com a definição, uma função de retorno de chamada é: uma função que é passada a outra função como argumento, de modo que esta possa a invocá-la a um tempo depois. Nesta definição, destacamos as palavras-chave importantes: - Com este significado, mais tarde quer dizer uma vez que o sistema estiver terminado com a primeira função (também conhecida como função primária) agora é livre para executar a função de retorno de chamada (também conhecida como função secundária). ## Compreendendo as funções de retorno de chamada Vamos criar um exemplo simples para ajudar a ilustrar o conceito de funções de retorno de chamada: 1. Primeiro, criaremos uma função chamada `pessoa` e passaremos um argumento a ela: ```javascript function pessoa(nome) { console. log(`O nome da minha amiga é ${nome}``); } ``` 2. Em seguida, criaremos outra função chamada `pessoa2` sem passar qualquer argumento: ```javascript function pessoa2() { console. log("Meu nome é Cuidado"); } ``` 3. De seguida, chamaremos as duas funções: ```javascript pessoa("Boa"); // imprime: O nome da minha amiga é Boa pessoa2(); // imprime: Meu nome é Cuidado ``` Neste ponto, temos duas funções que podem ser chamadas independentemente. Mas, o que aconteceria se quiséssemos chamar `pessoa2` após `pessoa` ser executada? É neste caso que as funções de retorno de chamada podem ser úteis. 4. Para conseguir isso, passaremos `pessoa2` como um argumento para a função `pessoa`: ```javascript function pessoa(nome, callback) { console. log(`O nome da minha amiga é ${nome}`); // chamamos a função de retorno de chamada callback(); } // passamos a função `pessoa2` como argumento para a função `pessoa` pessoa("Boa", pessoa2); ``` 5. Dessa forma, quando chamamos a função `pessoa`, ela vai imprimir o nome, e em seguida, executará a `pessoa2`. Agora `pessoa2` está agindo como uma função de retorno de chamada. ## Funções de retorno de chamada com `setTimeOut` As funções de retorno de chamada são um caso comum para utilização no `setTimeOut`. Vamos ver um exemplo modificando o exemplo anterior: 1. Primeiro, alteraremos a função `pessoa` para torná-la útil para o `setTimeOut`: ```javascript function pessoa(nome, callback, delay) { console. log(`O nome da minha amiga é ${nome}`); // utiliza setTimeOut para atrasar a execução da função de retorno de chamada setTimeout(callback, delay); } ``` 2. Em seguida, chamaremos a função `pessoa`, passando `pessoa2` como função de retorno de chamada, e especificando um atraso de 3 segundos: ```javascript pessoa("Boa", pessoa2, 3000); ``` Após 3 segundos, as duas funções `pessoa` e `pessoa2` serão executadas de forma sequencial. Neste exemplo, `pessoa2` é uma função de retorno de chamada que é passada como argumento para outra função, no caso `pessoa`. Ela será executada mais tarde, depois que a `pessoa` for concluída. ## Promessas O conceito de funções de retorno de chamada parece familiar, e pode ser comparado com o conceito de Promessas em JavaScript. Uma Promessa representa um valor que ainda não está disponível, mas será resolvido em algum momento no futuro. Nesta guia, focámos em compreender o conceito de funções de retorno de chamada no JavaScript. Em guias futuras, iremos abordar as Promessas em JavaScript e sua relação com funções de retorno de chamada e programação assíncrona. Adeus! 😊 # Entendendo Promises no JavaScript Este tutorial tem a intenção de explicar o conceito de Promises no JavaScript utilizando um exemplo. ## Dependência de Promises Neste exemplo, criaremos três funções separadas: 1. Função Tópico 2. Funções de chamada de retorno 3. Promises A função atual dependerá da função anterior. Se o usuário tiver aprendido sobre funções, poderá avançar para as funções de chamada de retorno e se o usuário tiver aprendido sobre ambas as funções e as funções de chamada de retorno, estará pronto para Promises. ### Função Tópico A primeira função `functionTopic()` retorna uma promise e a resolve. Se o usuário ainda não tiver aprendido completamente sobre funções em JavaScript, poderá utilizar a função `reject` em vez disso. ```javascript function functionTopic() { return new Promise(resolve => resolve('Aprendeu funções em JavaScript. ')); } ``` ### Funções de chamada de retorno Depois de aprender as bases de funções, o usuário pode avançar para as funções de chamada de retorno. Aqui, a função de chamada de retorno é executada após a resolução da promise de `functionTopic()`. ```javascript function callbackFunctions(result) { console. log('Aprendeu funções de chamada de retorno: ', result); // Mudando para Promises promises(); } functionTopic(). then(callbackFunctions); ``` ### Promises A função `promises()` também retorna uma promise que se resolve quando o usuário estiver terminado com funções e funções de chamada de retorno. ```javascript function promises() { return new Promise(resolve => resolve('Pronta para Promises em JavaScript. ')); } ``` Com Promises, o código fica mais limpo e mais fácil de ler, comparado ao uso de funções de chamada de retorno. Promises permitem aos desenvolvedores escrever código assíncrono de uma maneira mais organizada e manejável. ## Funções de seta As funções de seta fornecem uma sintaxe mais abreviada para definir funções, tornando o código mais fácil de ler e escrever. Aqui está como escrever os exemplos utilizando funções de seta: ```javascript // Função Tópico const functionTopic = () => 'Aprendeu funções em JavaScript. '; // Chamadas de retorno const callbackFunctions = result => { console. log('Aprendeu funções de chamada de retorno: ', result); promises(); }; // Promises const promises = () => 'Pronta para Promises em JavaScript. '; // Execução functionTopic(). then(callbackFunctions); ``` Este é uma visão geral de Promises e Funções de seta em JavaScript. Para uma compreensão mais profunda, pode explorar estas conceitos ainda mais a solo ou através de outros tutoriais e recursos online. Boa sorte! 🚀 # Funções de Tempo em JavaScript: `setTimeout` e `clearTimeout` No JavaScript, podemos utilizar duas funções importantes para controlar a execução de funções a um determinado intervalo de tempo: `setTimeout` e `clearTimeout`. ## `setTimeout` A função `setTimeout` é usada para executar uma função depois de um determinado período de tempo. O primeiro parâmetro é a função que desejamos executar e o segundo parâmetro é o intervalo de tempo em milissegundos. ```javascript function start() { alert("bem-vindo de volta"); // a mensagem que vai ser exibida no pop-up } setTimeout(start, 2000); // chamamos a função start depois de 2 segundos ``` ## `clearTimeout` A função `clearTimeout` é usada para parar a execução da função depois de uma operação `setTimeout`. O parâmetro para a função `clearTimeout` é o valor retornado pela operação `setTimeout` que desejamos cancelar. ```javascript let timerId = setTimeout(start, 5000); function stop() { clearTimeout(timerId); } // ao clicar no botão Stop, a função start será cancelada antes de ser executada ``` ## `setInterval` A função `setInterval` é usada para repetir a execução de uma função a um intervalo de tempo determinado. Ela funciona da mesma forma que a função `setTimeout`, mas a função será repetida a um intervalo de tempo específico depois de ser inicializada. ```javascript function repeat() { alert("repetindo a função"); // a mensagem que vai ser exibida no pop-up } setInterval(repeat, 2000); // a função repeat será repetida a cada 2 segundos ``` ## Async/Await (Promessas) Um recurso importante em JavaScript é a crição de promessas. Promessas podem ser utilizadas para manter a execução de uma função no método assíncrono. ### Promessas As Promessas permitem esconjuntar funções, o que simplifica a execução de várias funções uma após a outra. Uma Promessa permite tratar de forma conjunta as chamadas assíncronas, evitando o nested. ```javascript function makeOrder(orderType) { //função que retorna uma promessa if (orderType === 'café preto') { return new Promise((resolve, reject) => { resolve(`a sua encomenda está pronta: café preto`); }); } else { return new Promise((resolve, reject) => { reject('apenas servimos café preto'); }); } } function processOrder(order) { //função que sempre resolve return `informação adicional: ${order}`; } //chamada para o metodo makeOrder com o argumento café preto makeOrder('café preto'). then((order) => { console. log(order); processOrder(order); }). catch((error) => { console. log(error); }); ``` # Função Assíncrona com JavaScript's Async/Await (em Português Europeu) Este código demonstra uma função assíncrona em JavaScript usando async/await. Vamos trabalhar com as funções `makeOrder` e `processOrder` dentro dessa função. ## Função Assíncrona Básica Para tornar uma função assíncrona, adicione-a a palavra-chave `async` no começo. ``` async function funkUm() { // Seu código aqui } ``` ## Chamando Métodos Assíncronos Chame a função `makeOrder` primeiro, depois a função `processOrder`. Use a palavra-chave `await` antes de cada método para fazer o código aguarde até que as funções assíncronas completem suas execuções. ``` async function funkUm() { // Chame a função makeOrder const pedido = await makeOrder('café preto fino'); // Processar o pedido const pedidoProcessado = await processOrder(pedido); // Logar o pedido processado console. log('Pedido processado: ', pedidoProcessado); } ``` ## Gestão de Erros Use um bloqueio try-catch para tratar erros potenciais, como quando o utilizador introduz um pedido inválido (por exemplo, ou um café latte em vez de café preto). ``` async function funkUm() { try { // Chame a função makeOrder const pedido = await makeOrder('café preto fino'); // Processar o pedido const pedidoProcessado = await processOrder(pedido); // Logar o pedido processado console. log('Pedido processado: ', pedidoProcessado); } catch (erro) { // Logar erros console. log(erro); } } ``` Este exemplo fornece uma estrutura básica para o uso de async/await em JavaScript, demonstrando as principais concepções sobre chamadas de funções assíncronas e gestão de erros. Lembre-se de utilizar funções para empacotar o seu código assíncrono e manter seus dados organizados dentro das mesmas. Podes utilizar um bloqueio try-catch para tornar o código mais organizado e mais fácil de gerir erros e customizar mensagens de erro para fornecer ao utilizador um erro mais relevante. No próximo vídeo, vou cobrir bloqueios try-catch em detalhe. Em adição, pode ocorrer syntax error, error de tempo de execução e erro lógico num programa, e é essencial aprender a identificar e gestionar efetivamente os erros. Aqui está um protótipo de código que demonstra uma função que imprime uma string no console, que pode ser utilizada para aprender mais sobre gestão de erro com bloqueios try-catch: ```javascript function makeOrder(pedido) { console. log(pedido); } async function funkUm() { try { // Chame a função makeOrder makeOrder('Sua mensagem personalizada'); } catch (erro) { console. log(erro); } } funkUm(); ``` ```markdown # Manuseio personalizado de erros e expressões regulares no JavaScript Esta função, `processOrder`, não existe no programa completo. Agora o sistema vai se movimentar para o bloco `try` e executar a função `makeOrder` primeiro. A função `makeOrder` será executada sem problemas, mas ao encontrar a função `processOrder`, ela encontrará que ela não existe no programa. Nesse ponto ele moverá-se para o próximo bloco e lançará um erro para o usuário. Salve este programa e você verá as seguintes mensagens: > Aqui está o seu café preto. Dia bem. > > Desculpa, ocorreu um erro no seu programa. Esta é a maneira de mostrar um erro ao usuário com uma mensagem personalizada. Se você chamar a função `processOrder` fora do bloco `try` e `catch`, a mensagem de erro mudará e será diferente. ## Demonstração 1. Cortaremos esta função `processOrder` daí e a chamaremos fora do bloco `try` e `catch`. Agora que chamamos a função `processOrder`, sabemos que ela não existe no programa. Caso salvemos, podemos ver a seguinte mensagem de erro: ``` Uncaught ReferenceError: processOrder is not defined ``` Este é um erro de tempo de execução. 2. Caso você queira imprimir o erro no console, basta escrever: ```javascript console. log(error); ``` 3. Para imprimir apenas o erro ou o nome, basta escrever: ```javascript console. log(error. name); console. log(error. message); ``` Salve o programa e você verá uma mensagem de erro semelhante: ``` ReferenceError: processOrder is not defined ``` Estamos agora sobrando com o bloco `finally`. Como discutímos anteriormente, o bloco `finally` é independente dos dois blocos e será executado mesmo se estiver presente no programa. A sintaxe para o bloco `finally` é a seguinte: ```javascript finally { // código a ser executado } ``` 4. Remova os blocos de tratamento de erro deste programa e escriba: ```javascript finally { console. log('Este bloco será executado independentemente de tudo'); } ``` 5. Antes de encerrar, vejam-no mais uma vez o `throw` keyword em JavaScript: Com este comando, podemos lançar um erro qualquer no programa. A mensagem pode ser personalizada, e o tipo será `erro não processado`. Aqui está um exemplo de manipulação de erros com o laço de repetição básico `if`. . . `else`: Suponha que tenhamos uma condição em que temos uma variável. Comente esta parte de código: ```javascript let a = 9; if (a < 10) { // um erro deve ser lançado } else { // o sistema deverá imprimir algo } ``` 6. Agora, supomos que possuímos uma condição em que temos uma variável `a`. O valor de `a` é `9`. A condição a ser verificada é: Se `a` é menor que `10`, lançar um erro, caso contrário o sistema deverá imprimir algo. Agora, vamos avançar com o código para entender: Primeiro, declaremos uma variável `e` e atribuímos o valor de `a` a ela: ```javascript let e = 9; ``` No então, o bloco `if` deverá ter uma condição que procura a variável `a` e compara com `10`. Se for verdadeiro, lançe um erro: ```javascript if (e < 10) { throw new Error('Mensagem personalizada'); } ``` Também temos que escrever o bloco `else` aqui, e dentro do bloco `else`, escrevemos: ```javascript console. log('Erro manuseado! '); ``` Salve este programa e você pode ver que temos o valor como `9`. Nossa intenção era lançar um erro se o valor for menor que `10`: ``` Mensagem personalizada ReferenceError: e is not defined ``` Como podem ver, temos uma representação familiar deste erro, diferente do `try`. . . `catch` no JavaScript. A mensagem é personalizada e diz "Mensagem Personalizada". É assim que podemos lançar um erro no programa onde queremos! Temos discutido o patter matching e validação no JavaScript, em particular, a validação de senhas. Então sabemos que podemos usar o `if`. . . `else` para verificar se a senha do usuário combina com a nossa que já temos. Basta escrevamos: ```javascript if (password === 'someString') { // Faça as coisas desejadas } else { // Alinhe o usuário } ``` Expressões regulares são objetos utilizados para encontrar padrões de caracteres especificados em um texto, fazer pesquisas no texto ou alterar o texto. Eles estão presentes na maioria dos línguagens de programação e não são limitados ao JavaScript somente. A sintaxe pode variar um pouco entre diferentes línguagens, mas a ideia por detrás delas será sempre a mesma. O nome pode parecer um pouco confuso, mas a verdade é totalmente diferente: eles são muito fáceis de usar uma vez que entenderem os principios básicos. Expressões regulares no JavaScript: 1. Sintaxe A sintaxe para expressões regulares no JavaScript é a seguinte: Vejamos uma variável: ```javascript let regEx = /hello/; // string, ele é sensível a caixa ``` Aqui a palavra "hello" está presente na variável `regEx` e deve ser usada como padrão para pesquisar no texto. Então vamos usar um texto: ```javascript let str = 'Welcome to our YouTube channel! hello if you are new here'; ``` 2. Funções essenciais Aqui estão algumas funções essenciais que usamos com expressões regulares e suas funcionalidades: - `test(str)`: essa função procura se o parâmetro `str` combina com a expressão regular ou não e retorna `true` ou `false`. - `exec(str)`: essa função procura uma correspondência dentro do parâmetro `str` e retorna o array de correspondência, que inclui a correspondência e os índices. - `match(str)`: essa função procura uma correspondência dentro do parâmetro `str` e retorna o array de correspondência, que inclui a correspondência só ou `null` se nenhuma correspondência for encontrada. - `replace(str, substitution)`: essa função substitui todas as correspondências na expressão regular pelo parâmetro `substitution`. 3. Exemplo: Imos ilustrar estas funções com um exemplo: ```javascript const str = 'Welcome to our YouTube channel! hello if you are new here'; const regEx = /hello/; // Verifica se o parâmetro `str` combina com a expressão regular console. log(regEx. test(str)); // true // Procura a correspondência mais próxima de acordo com a expressão regular e retorna um array console. log(regEx. exec(str)); // ['hello', índices array] // Procura uma correspondência para o parâmetro `str` e retorna um array apenas com a correspondência console. log(str. match(regEx)); // ['hello', índice: 13, input: 'Welcome to our YouTube channel! hello if you are new here'] // Busca as correspondências individuais encontradas pelo bloco de código e as substitui console. log(str. replace(regEx, 'world')); ``` Aqui vamos: - Definimos uma string `str` e uma regular expression `regEx`. - Verificamos se a string combina com a expressão regular usando `test()`. - Buscamos a correspondência mais próxima de acordo com a expressão regular usando `exec()`. - Buscamos uma correspondência para a string, retornamos apenas as coincidências - Substituímos as correspondências individuais encontradas com ‘world’ (Observe que a função `exec()` pode modificar a string de entrada acompanhando as correspondências, os índices e arrays de índices se várias correspondências forem encontradas. Por outro lado, a função `match()` não modifica a string de entrada e retorna apenas a correspondência ímpar ou `null` se nenhuma correspondência for encontrada. ) Nosso desprendimento será mais aprofundado nas funções nessas seções seguintes. 4. Modificadores Podemos mudar o comportamento da expressão regular usando modificadores, como: - `i`: case-insensitive; - `g`: busca global, para encontrar todos as ocorrências ao invés de uma; - `m`: string multi-linha, trata a string como várias linhas durante a correspondência. Por exemplo: ```javascript const str = 'Welcome to our youtube channel. Hello! hello if you are new here. Learn more about javascript'; let regEx = /hello/; // Procura correspondência não-case-sensitive com a expressão regular console. log(regEx. test(str)); // true // Busca global console. log(regEx. test('g', str)); // true, true, false // Busca múlti-linha console. log(regEx. test('m', str)); // false // Adicione o `i` modificador para uma busca não-case-sensitive regEx = regEx. toString(). toLowerCase(); regEx = new RegExp(regEx, 'gi'); // Busca não-case-sensitive global console. log(regEx. test(str)); // true, true, true ``` Ao todo, discutimos várias maneiras de lidar com erros e usar regular expressions. Agora você está pronto para implementar expressões regulares, tratamento de erros, e outras ferramentas no seu projeto de JavaScript! Se tiver qualquer questionamento ou sugestão, por favor, comunique. Feliz código! ``` # Função para Verificar a Presença de uma Palavra em uma Cadeia de Caracteres Esta função retorna either `true` ou `false`, dependendo se uma palavra específica exista em uma cadeia de caracteres. Não retorna o valor de índice ou qualquer outra informação. A função apenas trata de um valor booleano (`true` ou `false`). ## Função de Teste ```javascript function test(palavra, frase) { // A função de teste procura por uma palavra específica na frase e retorna true se a palavra exisitir, false caso contrário. // Não retorna o valor de índice ou qualquer outra informação. // Sintaxe: // saida = variável. funçãoNome(cadeia); // Aqui, saida é a variável onde o resultado será armazenado. // funçãoNome é o nome da função (test no caso). // cadeia é a frase a se analisar. // Exemplo: var saida = test('olá', 'olá mundo'); // Retorna true var saida = test('oi', 'olá mundo'); // Retorna false } ``` ## Função match com Expressões Regulares A `match` função em JavaScript retorna um array de resultados (se encontrados) ou `null` (se não encontrados). A sintaxe desta função é inversa à função de teste. ```javascript function match(expressãoRegular, cadeia) { // A função match retorna um array de resultados (se encontrados) ou null (se não encontrados). // Ela recebe uma expressão regular como parâmetro e é utilizada com a cadeia. // Sintaxe: // saida = variável. funçãoNome(cadeia); // Aqui, saida é a variável onde o resultado será armazenado. // funçãoNome é o nome da função (match no caso). // cadeia é a cadeia a se analisar. // Exemplo: var saida = 'olá mundo'. match(/olá/); // Retorna um array contendo 'olá' var saida = 'olá mundo'. match(/oi/); // Retorna null } ``` Na função match, pode-se utilizar o modificador `g` para encontrar todas as ocorrências de uma palavra em uma cadeia. ```javascript function match(expressãoRegular, cadeia) { // . . . // Exemplo: var saida = 'olá mundo olá'. match(/olá/g); // Retorna um array contendo 'olá', 'olá' } ``` ## Função replace A `replace` função substitui uma palavra ou padrão especificado numa cadeia. Pode substituir apenas a primeira ocorrência de uma palavra ou todas as ocorrências se o modificador global for usado. ```javascript function replace(expressãoRegular, substituição, cadeia) { // A replace função substitui uma palavra ou padrão especificado numa cadeia. // Pode substituir apenas a primeira ocorrência de uma palavra ou todas as ocorrências se o modificador global for usado. // Sintaxe: // saida = variável. funçãoNome(cadeia, substituição); // Aqui, saida é a variável onde o resultado será armazenado. // funçãoNome é o nome da função (replace no caso). // cadeia é a cadeia a se analisar. // substituição é a palavra ou padrão a ser substituído. // Exemplo: var saida = 'olá mundo'. replace(/olá/, 'oi'); // Retorna 'oi mundo' } ``` ## Utilizando Expressões Regulares com Palavras Esquecidas Se esquecer uma palavra e só lembrar parte da mesma, pode-se ainda utilizar expressões regulares para encontrá-la. ```javascript var repudia = /. *. el. */; // Essa expressão regular irá corresponder a quaisquer palavras que contenham 'el' var str1 = 'bem-vindo à nossa cor da trilha e depois bem-vindo novamente'; // Utilizando a função de teste para verificar se a palavra existe na cadeia: var saida = test('bem-vindo', str1); // Retorna true ``` Na cadeia `str1`, a expressão regular `/. *. el. */` corresponde a quaisquer palavras que contenham 'el'. A função de teste é usada para verificar se a palavra 'bem-vindo' existe na cadeia `str1`. Como 'bem-vindo' contém 'el', a função de teste retorna `true`. # Expressões Regulares: Tipos de caracteres e intervalos Neste vídeo, discutiremos caracteres métode opcionais e tipos de caracteres e intervalos em Expressões Regulares. ## Introdução Primeiro, vamos começar por entender um dos caracteres metaidos opcionais: `? `. Simbolo de questão (`? `) representa estecharacter emmetadologico, e sua função é a seguinte: qualquer caracter antes do símbolo é tratado como opcional. Isso significa que não importa se o caracter estiver presente na string ou não. Por exemplo, considere que possuímos a string `welcome again because welcome has more characters than back and will write here welcome as well`. Se quiséssemos alterar a expressão de rejeição para tornar os caracteres opcionais, usaríamos um símbolo de questão (`? `) antes de cada caracter. Aqui tem um exemplo: ``` let regex = /w*e*l*c*o*m*e*/; ``` Agora, se remover `c` e `e` da string, a função continuará funcionando sem problemas e o output será `true`. ## Tipos de caracteres e intervalos Em JavaScript, tipos de caracteres e intervalos podem ser utilizados com expressões regulares. Um conjunto de caracteres refere-se a com binário e caracteres numéricos. A sintaxe para definir um conjunto de caracteres é usando colchetes (`[]`), e podemos escrever caracteres dentrose desses colchetes. Por exemplo, se possuímos três caracteres `a`, `b`, e `c`, podemos instruir o sistema a utilizar qualquer um dos characteres em uma expressão regular. ```javascript let regex = /[abc]/; ``` ### Exemplo Reparemos num pequeno exemplo para pesquisar uma palavra dentro de uma string. Vamos pesquisar uma palavra que contenha a letra `d`, `e`, ou `f`, mas antes de `def`, podemos ter uma letra que pode ser `a`, `b`, ou `c`. Nenhum outro caractere será levado em conta a frente de `def`, porque também convocamos um conjunto de caracteres. ```javascript let regex = /[abc]def/; let str = "adef"; let test = regex. test(str); console. log(test); // Output: true ``` Neste exemplo, possuímos a expressão regular `[abc]def`. A expressão diz que `d`, `e`, ou `f` deveriam ser obrigatórios, mas antes de `def`, podemos ter uma letra que pode ser `a`, `b`, ou `c`. Então, expectedmos a função `test` retornar `true` para a string `adef`, porque ela corresponde à nossa expressão regular definida. ## Intervalos Para incluir qualquer caracter na string entre `a` e `z`, podemos utilizar um intervalo de caracteres. A sintaxe para definir um intervalo de caracteres é escrever um sinal de subtração (`-`) entre dois caracteres. O intervalo resultante constituirá de todos os caracteres que se encontram desde o primeiro para o último. Por exemplo, se quiséssemo incluir qualquer caracter entre `a` e `z`, podemos escrever: ```javascript let regex = /[a-z]/; ``` ### Exemplo Suponha que famos excluir algumas letras específicas deste intervalo, como não deramos ao utilizador incluir `def` novamente. A sintaxe para essa tarefa também é fácil; utiliza-se o operador de negação (`^`) e escrevemos as letras que não queremos incluir. ```javascript let regex = /[^def]/; ``` Neste exemplo, não queremos incluir `def` no intervalo. Então, se escrevermos `def`, o output será `false`. ## Exemplo de validação básica Agora, vamos avançar para um exemplo de validação básica em JavaScript. Criaremos uma pequena forma enquanto seu ID do funcionário e verificaremos se o funcionário pertence à empresa ou não. ### HTML Iniciamos com o HTML. Criaremos um espaço reservado para o ID do funcionário e um botão. ```html <form> <input id="eid" placeholder="ID do funcionário" type="text"> <button onclick="employee()">Submit</button> </form> ``` ### JavaScript Na parte JavaScript, definiremos uma função `employee()` e dentro desta função, tomaremos o ID do funcionário do utilizador. Necessitamos de uma variável para isso, então dizemos que a variável é `empId`. ```javascript function employee() { let empId = document. getElementById('eid'). ``` Corrigido: ```markdown # Expressões Regulares: Tipos de caracteres e intervalos Neste vídeo, discutiremos caracteres métode opcionais e tipos de caracteres e intervalos em Expressões Regulares. ## Introdução Começamos pela entendido do caracter méta opcional: `? `. É simbolo que representa estecaracter emmetadologico, sendo a função dele a seguinte: qualquercaracter antes do símbolo é tratado como opcional. Isso significa que se o caracter for presente na stringou não nem que ele seja. Por exemplo, considere que possuímos a string `welcome again because welcome has more characters than back and will write here welcome as well`. Se quiséssemos modificar a expressão rejeitando para tornar os caracteres opcionais, usaríamos um símbolo de questão (`? `) antes de cada caractere. Aqui está um exemplo: ``` let regex = /w*e*l*c*o*m*e*/; ``` Agora, se remover `c` e `e` da string, a função continuará funcionando sem problemas e o output será `true`. ## Tipos de caracteres e intervalos Em JavaScript, tipos de caracteres e intervalos podem ser utilizados com expressões regulares. Um conjunto de caracteres refere-se a alfabetos e números. A sintaxe para definir um conjunto de caracteres é usando colchetes (`[]`), e podemos escrever caracteres dentro de esses colchetes. Por exemplo, se possuímos três caracteres `a`, `b`, e `c`, podemos instruir o sistema a utilizar qualquer um dos caracteres em uma expressão regular. ```javascript let regex = /[abc]/; ``` ### Exemplo Por exemplo, se buscamos privar umas palavras dentro uma string, vamos buscar uma palavra que contém a letra `d`, `e`, ou `f`, mas antes de `def`, um caractere pode ser `a`, `b`, ou `c`. Nenhuma outra letra será levada em conta antes de `def`, pois também convidamos um conjunto de caractere. ```javascript let regex = /[abc]def/; let str = "adef"; let test = regex. test(str); console. log(test); // Output: true ``` Neste exemplo, possuímos a expressão regular `[abc]def`. A expressão diz que o `d`, `e`, ou `f` deveriam ser compulsórios, mas antes de `def`, um caractere pode ser `a`, `b`, ou `c`. Então, nós esperamos a função `test` retornar `true` para a string `adef`, pois ela corresponde a código que definimos. ## Intervalos Para incluir qualquer caractere na string entre `a` e `z`, podemos usar um intervalo de caractere. A sintaxe para definir um intervalo de caractere é escrever um símbolo de barra (`-`) entre dois caracteres. O intervalo resultante conterá todos os caracteres que se encontram entre o primeiro e o último. Por exemplo, se quiséssemos incluir qualquer caractere entre `a` e `z`, podemos escrever: ```javascript let regex = /[a-z]/; ``` ### Exemplo Por exemplo, se queremos excluir algumas letras específicas do intervalo, como não queremos o utindizero incluir `def`, a sintaxe também é fácil; utilizamos o operador de negação (`^`) e escrevemos as letras que não quisermos incluir. ```javascript let regex = /[^def]/; ``` Neste exemplo, não queremos incluir `def` no intervalo. Então, se escrevermos `def`, o output será `false`. ## Exemplo de validação básica Agora, vamos para um exemplo de validação básica em JavaScript. Criaremos uma forma enquanto o ID do funcionário e verificaremos se o funcionário pertence à empresa ou não. ### HTML Iniciamos com o HTML. Criaremos um espaço reservado para o ID do funcionário e um botão para o enviar. ```html <form> <input id="eid" placeholder="ID do funcionário" type="text"> <button onclick="employee()">Submit</button> </form> ``` ### JavaScript Na parte JavaScript, definiremos uma função `employee()` e dentro dessa função, tomaremos o ID do funcionário do usuário. Precisamos de uma variável para isso, então dizemos que a variável é `empId`. ```javascript function employee() { let empId = document. getElementById('eid'). ``` # Utilizando Validação com Expressões Regulares no JavaScript Este tutorial demonstrará como utilizar validação com expressões regulares no JavaScript. No vídeo anterior, cobertos foram conjuntos de caracteres e intervalos, e vimos como validar a entrada do usuário com o auxílio de conjuntos de caracteres e intervalos, em conjunto com expressões regulares. Neste vídeo, vamos olhar para classes de caracteres curtas presentes em expressões regulares e sua utilidade em JavaScript. ## Classes de Caracteres Uma classe de caracteres pode ser utilizada para simplificar expressões regulares fazendo com que sejam menos confusas e volumosas. A sintaxe é simples: escreva um caracter único com um backslash, e pronto para usar. Por exemplo, se vai para um arquivo JavaScript e escrever `\d`, isso significa que você adicionou uma classe de caracteres em uma expressão regular. Este backslash `\d` é uma classe de caracteres usado para encontrar um dígito dentro de uma string. ### Encontrar um dígito dentro de uma string Vamos tomar uma string e tentar encontrar uma expressão regular dentro dessa string. ```javascript let regex = /\d/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `\d` para encontrar um dígito dentro da string `str1`. Usamos a função `exec()` para encontrar a expressão regular dentro da string e depois impressão do resultado no console. ### Encontrar um padrão mais um número antes do padrão Suponha que queremos encontrar um padrão, digamos "3-1", mais um número presente antes de esse padrão na string. ```javascript let regex = /3-1/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `3-1` para encontrar o padrão "3-1" na string `str1`. Usamos a função `exec()` para encontrar a expressão regular na string e depois impressão do resultado no console. ### Encontrar todos os números antes do padrão Se quisermos encontrar todos os números antes de um padrão, precisamos adicionar um operador de soma em uma expressão regular. ```javascript let regex = /\d+/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `\d+` para encontrar todos os números antes do padrão na string `str1`. Usamos a função `exec()` para encontrar a expressão regular na string e depois impressão do resultado no console. ### Encontrar um caracter não-dígito antes de um padrão Se queremos encontrar um caracter não-dígito antes de um padrão, usamos a classe de caracteres inversa de `\d`. Ela retorna verdadeiro para tudo o que não seja um dígito. ```javascript let regex = /\D/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `\D` para encontrar um caracter não-dígito antes do padrão na string `str1`. Usamos a função `exec()` para encontrar a expressão regular na string e depois impressão do resultado no console. ### Caracter de palavra O caracter de palavra `\w` é utilizado em lugar de qualquer caracter que possa ser uma letra, um número ou um sinal de sublinhado. É utilizado quando não estamos certo do caractere presente antes do padrão. ```javascript let regex = /\w/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `\w` para encontrar qualquer caracter que possa ser uma letra, um número ou um sinal de sublinhado antes do padrão na string `str1`. Usamos a função `exec()` para encontrar a expressão regular na string e depois impressão do resultado no console. ### Caracter não-palavra O caracter não-palavra `\W` é o oposto do caractere de palavra `\w`. Ela retorna verdadeiro para qualquer caracter que não seja qualquer caractere (alfabético, numérico ou sinal de sublinhado). É utilizado quando queremos encontrar apenas caracteres específicos. ```javascript let regex = /\W/; let str1 = "numero do telefone dos usuários é 9876543210"; let output = regex. exec(str1); console. log(output); ``` No exemplo acima, definimos uma expressão regular `\W` para encontrar qualquer caracter específico antes de um padrão na string `str1`. Usamos a função `exec()` para encontrar a expressão regular na string e depois impressão do resultado no console. **Usando a Classe de Caracteres de Espaço em JavaScript** Este texto demonstra o uso da classe de caracteres de espaço em JavaScript para expressões regulares. ## Verificação de Números de Telefone Aqui, escrevemos uma expressão regular para encontrar o número de índice de espaços presentes em um número de telefone dado. O espaço está presente no índice 5, então ele retornará o índice 5 para este espaço em particular. ```markdown O número de telefone do usuário será escrito como este, novamente: `+123-456-7890` Agora, para esta expressão regular, ela retornará o número de índice do espaço: - Espaço: `\\s` (Classe de caracteres de espaço) - Expressão regular: `/\\s/` Executando esta expressão na numeração dada, ela retornará: `5` ``` ### Observação sobre o Número de Índice Por favor, notem que `s5` no texto não representa um número de índice, mas em vez disso se refere ao caracter "s" no padrão buscado. ### Espaços na String Agora, tentaremos encontrar os números de índice de espaços se tentamos fazer o mesmo para vários espaços: - Espaços múltiplos: `\s\s\s\s` (Classe de caracteres de espaço repetida) - Expressão regular: `/\s\s\s\s/` Testemos-a na numeração ` +123-456-7890 ` Executando esta expressão na numeração dada, ela retornará: `19` (o número de índice do primeiro espaço na string) ## Classe de Caracteres Inversa No JavaScript, também temos a classe de caracteres inversa, que retorna verdadeiro para tudo o que não é espaços vazios. Vamos usá-la em um caso específico: ```markdown Se removermos os espaços: - Espaço: `[^\\s]` (Classe de caracteres de espaço inversa) - Expressão regular: `/[^\\s]/` Agora, se tivéssemos uma string `users` sem nenhum espaço, esta expressão retornará: `4` (o número de caracteres na string) ``` ### Algumas outras situações aqui estão alguns exemplos usando a classe de caracteres inversa para várias situações: ```markdown 1. Com letra maiúscula S: `users` (retornará verdadeiro porque o caracter 's' está presente na string) 2. Com símbolos especiais: `$%^#users` (retornará verdadeiro porque qualquer caracter que não seja espaço está presente na string) 3. Com o operador +: `muitos_espaços` (retornará falso porque nenhum caractere que não seja espaço está presente na string) ``` ## Criação de Caixas de Texto em HTML No HTML, criar caixas de texto para usuários (username e senha) é muito fácil usando o tag `input`. Aqui vamos discutir algumas propriedades adicionais que podemos utilizar: ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Classes de Caracteres em JavaScript</title> </head> <body> <form action="homepage. html" method="POST"> <label for="username">Username: </label> <input type="text" id="username" required><br> <label for="password">Password: </label> <input type="password" id="password" required><br> <label for="h">Idade: </label> <input type="number" id="h" required><br> <input type="submit" value="Enviar"> </form> </body> </html> ``` ### Validação HTML Usando o atributo `required' html pode ajudar a garantir que o usuário preencha tanto o campo de username quanto o campo de senha. ### Validação JavaScript Vamos agora validar as credenciais do usuário entradas no arquivo JavaScript: ```javascript document. querySelector('form'). addEventListener('submit', validate); function validate(event) { event. preventDefault(); let uname = document. getElementById('username'). value; let pass = document. getElementById('password'). value; let age = document. getElementById('h'). value; if (uname. trim() === '' || pass. trim() === '' || age < 13) { alert('Credenciais faltando'); return false; } } ``` A tradução foi realizada mantendo os termos em inglês técnicos e manter a estrutura Markdown. Os blocos de código não foram traduzidos para português. O seguinte foi estabelecido como o formato desejado: - Preserve todos os elementos Markdown - Mantenha a estrutura de títulos e seções - Preserve blocos de código sem traduzir - Utilize o português europeu (e não o português brasileiro) - Mantenha termos técnicos em inglês - Preserve comandos e códigos inalterados - Mantenha URLs intactas. # Validação de Formulários em JavaScript Utilize este exemplo para aprender os rudimentos de validação de formulário em JavaScript. Nesta aula, criaremos um formulário simples de inscrição que requer um nome de usuário, senha e idade para ser vigiado. Também criaremos condições que exibem alertas com entrada incorreta e verificaremos se o usuário é menor de idade. ## Mensagens de Alerta Quando as condições forem as seguintes: - O nome do usuário for "caution" - A senha for `1 2 3 4 5` - `h` deve ser igual ou superior a 13 Uma mensagem de alerta será exibida que diz "Registo bem-sucedido. " Condição Adicional: Se a entrada do usuário for incorreta, uma mensagem de alerta será exibida que diz "ID e senha incorretas. " ## Entradas Diferentes Como está utilizando JavaScript para validar o nosso formulário, criaremos diferentes entradas para testar as nossas condições. 1. Entrada de usuário correta: "caution", "1 2 3 4 5" e idade `21` (a idade deve ser igual ou superior a 13) Resultado: Alerta que diz "Registo bem-sucedido. " 2. Entrada de usuário incorreta: - Nome: qualquer nome random - Senha: qualquer senha random Resultado: Alerta que diz "ID e senha incorretas" 3. Condição Adicional: - Se a idade for inferior a 12, uma mensagem de alerta diz "Você é menor de idade. " ## Troca de HTML Para impedir o usuário de ser redirecionado para a página inicial a cada vez que submete o formulário, teremos de fazer pequenas alterações no ficheiro HTML. Adicionando a palavra-chave `return` na propriedade `onSubmit` do rótulo de formulário e rodando-o através de um `if` no nosso ficheiro JavaScript, podemos garantir que o usuário apenas vai para a página inicial se a validação do formulário for válida. Nosso ficheiro JavaScript: ``` function validate() { // Condições para validação do formulário. . . if(valido) { return true; // Redireciona o utilizador para a página inicial } else { return false; // Não redireciona o utilizador para a página inicial } } // No ficheiro HTML: <form onSubmit="return validate()"> . . . </form> ``` ## Validação de e-mail Em estado futuro, também podemos validar o e-mail digitado pelo usuário com JavaScript e expressões regulares. 1. Criar uma caixa de texto para o e-mail digitado pelo usuário: ``` <input type="email" nome="mail" placeholder="Digite aqui o teu e-mail"> ``` 2. Criar um botão de submeter: ``` <input type="submit" valor="Enviar"> ``` 3. Criar uma função JavaScript chamada `validate()` para verificar se o e-mail digitado pelo usuário corresponde ao padrão pré-definido: ``` function validate() { // Verificar a entrada de e-mail e exibir alerta. . . } ``` Nota: Usaremos expressões regulares para validar o e-mail digitado pelo usuário, o que será coberto em aulas posteriores. ADEUS! 😉 Aqui é o texto traduzido e formatado utilizando o Markdown: # Validação de Email em JavaScript Neste tutorial, vamos aprender a validar o ID de email de um usuário em JavaScript. Usamos o console por um longo tempo para imprimir o resultado de nossa programação, mas hoje vamos focar na depuração para encontrar e corrigir erros em nossa código. ## Declaração do Problema Validar um ID de email de um usuário usando expressões regulares em JavaScript. ## Criando o arquivo HTML ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validação de Email</title> </head> <body> <input type="text" id="email" placeholder="Insira o email ID"> <button id="submit">Enviar</button> <script src="scripts. js"></script> </body> </html> ``` ## Depuração com as Ferramentas do Google Chrome 1. Abra o navegador Google Chrome e aperte `F12` para abrir as Ferramentas do Desenvolvedor. 2. Você verá a guia Elementos e a guia Console. Use a guia Console para imprimir o resultado da nossa programação e encontrar erros na cópia. ## Criando o arquivo JavaScript ```javascript function validaEmail(email) { const regex = /^[a-zA-Z0-9. _%+-]+@[a-zA-Z0-9. -]+\. [a-zA-Z]{2, 6}$/; return regex. test(email); } document. getElementById('submit'). addEventListener('click', function() { const email = document. getElementById('email'). value; console. log(validaEmail(email)); }); ``` ## Testando a Validação do Email 1. Salve ambos os arquivos como "index. html" e "scripts. js" na mesma pasta. 2. Abra "index. html" em qualquer navegador da web. 3. Insira um ID de email válido e clique no botão "Enviar". Você deve ver um aviso indicando se o ID de email é válido ou não na guia Console do navegador. 4. Experimente introduzir IDs de email inválidos para validar a função de validação. ## Depurando a cópia 1. Para depurar a cópia, não esqueça de colocar um ponto de interrupção na linha que deseja analisar no arquivo JavaScript. 2. Atualize a página e ela irá parar a execução no ponto de interrupção. 3. Análise as variáveis, seus valores e a pilha de chamadas de função para encontrar o problema. # Depurando um Programa JavaScript usando Ferramentas de Desenvolvimento do Google Chrome ## Clique no botão Submit eumente a tela tornar-se cinza, teremos que utilizar o servidor de desenvolvimento ao vivo. Vamos fazer alguns passos e voltar com informações a sua disposição. Iniciamos clicando no botão de "abrir página" e, em seguida, selecionando a opção "mouse". Depois, selecionemos a opção "double click" no mouse. Aqui está o mouse e você pode escolher a opção "double click". Agora, fully zoom como mostrado abaixo. Agora digite separadamente os números 20 e 30. Agora, clique no botão "submit" novamente e você verá a parte restante da tela tornar-se cinza. Isso porque parece-se que houve evento de double click nesta região. Agora temos quatro opções à nossa disposição, você pode ver claramente abaixo nosso primeiro passo é "Resumir a execução do script". Este passo executará o script completo e nos apresentará a saída. O próximo passo é "Avançar para a próxima função chamada" e ele nos levará a próxima função a ser chamada no programa. O terceiro passo é "Passar para a próxima função" e ele realiza a mesma coisa que o passo anterior. Por último, temos "Terminar aquilo aqui", ele nos levará de volta à função inicial, a partir da qual o programa está sendo executado. O último passo é "Avançar". Clique aqui várias vezes para avançar e ver como iremos para o próximo pedaço do código do programa. Quando clicar uma vez, você verá a seguinte parte do código ser executada. Clique no botão "Avançar" novamente e você verá que iremos de passo a passo, passo a passo em direção à execução do programa. Adicione ainda um pouco mais à tela. Em seguida, você pensará em 20 e execute o programa. Quando a parte executar, imprime o resultado em torno de 50 no console. Isso é como você pode avaliar o seu programa passo a passo. Uma coisa importante a ser notada é que esse tópico também nos ajuda a encontrar erros mínimos em seu programa. Por exemplo, raramente revela erros maiores. Geralmente, os erros encontrados são os mais pequenos, o que nos permite encontrá-los de forma mais rápida. Aqui estão algumas de suas soluções de correção (Corrigindo alguns erros de pontuação e gramática, formatando e apresentando com algumas melhorias na lógica, além disso, melhorou a formatação de código): ```markdown # Depurando um Programa JavaScript usando Ferramentas de Desenvolvimento do Google Chrome ## Começando Iniciamos clicando no botão de "abrir página" e, em seguida, selecionando a opção "mouse". Depois, selecionemos a opção "double click" no mouse. Aqui está o mouse e você pode escolher a opção "double click". Agora, aumente o zoom como mostrado abaixo. Agora digite separadamente os números 20 e 30. Agora, clique no botão "submit" novamente e você verá a parte restante da tela tornar-se cinza. Isso porque parece-se que houve evento de double click nesta região. ## Passos seguidos Agora temos quatro opções à nossa disposição: 1. **Resumir a execução do script**: Este passo executará o script completo e nos apresentará a saída. 2. **Avançar para a próxima função chamada**: Ele nos levará a próxima função a ser chamada no programa. 3. **Saltar para a próxima função**: Ele realiza a mesma coisa que o passo anterior. 4. **Terminar aquilo aqui**: Ele nos levará de volta à função inicial, a partir da qual o programa está sendo executado. Ao clicar no botão "Avançar", verifique a seguinte parte do código ser executada e continue fazendo isso para avançar de origem a origem no programa. ## Analisando erros Uma coisa importante a ser notada é que esse tópico também nos ajuda a encontrar erros mínimos em seu programa. Raramente revela erros maiores. Geralmente, os erros encontrados são os mais pequenos, o que nos permite encontrá-los de forma mais rápida. ## Uma solução de amostra (Corrigindo alguns erros de pontuação e gramática, formatando e apresentando com algumas melhorias na lógica, além disso, melhorou a formatação de código): ``` Note: Faça as seguintes modificações adicionais: 1. Adicione títulos claros para cada seção. 2. Separe as ideias em parágrafos. 3. Organize as listas e enumerações. 4. Strictly mantenha a hierarquia dos títulos. # Iteradores e Geradores no JavaScript: Guia Compreensivo Neste documento, discutiremos os conceitos de iteradores e geradores no JavaScript, juntamente com suas aplicações práticas e benefícios. Compreender esses conceitos não pode ter aplicabilidade imediata prática, mas pode ser benéfico para entrevistas, pois podem ser complexos e demorados, fazendo-o se destacar. ## Iteradores N JavaScript, os iteradores são objetos que utilizam um método para retornar um objeto com duas propriedades: `valor` e `feito`. Cada vez que a função `next` é chamada, o próximo elemento do array ou mapa será impresso até que o valor de `feito` seja verdadeiro, indicando que não há mais elementos presentes nesse array ou mapa. O código de iteradores no JavaScript aparece como o seguinte: ```javascript const meuArray = { next: function() { let elements = [ 'bmw', 'audi', 'mercedes', 'honda' ]; let index = 0; return { value: elements[index++], done: index < elements. length } } }; let gen = myArray. next(); console. log(gen); // { value: 'bmw', done: false } console. log(myArray. next(). value); // 'audi' console. log(myArray. next(). value); // 'mercedes' console. log(myArray. next(). value); // 'honda' console. log(myArray. next(). done); // true ``` Embora o código de iteradores funcione bem, ele pode ser longo e pontual à erros devido à necessidade de loopar múltiplas coisas dentro de uma única função. ## Geradores Os geradores em JavaScript nos permitem definir um algoritmo iterativo escrevendo uma única função não continua, tornando o trabalho mais fácil e diminuindo a presença de erros. O sintaxe para geradores em JavaScript é assim: ```javascript function* generate() { let array = [ 'bmw', 'audi', 'mercedes', 'honda' ]; for (let i = 0; i < array. length; i++) { yield array[i]; } } let gen = generate(); console. log(gen. next(). value); // 'bmw' console. log(gen. next(). value); // 'audi' console. log(gen. next(). value); // 'mercedes' console. log(gen. next(). value); // 'honda' console. log(gen. next(). done); // true ``` Neste exemplo, criamos uma função geradora chamada `generate`. Dentro dessa função, temos um `for` loop que retorna os elementos do array um pelo um. A função `next` é chamada para obter o valor do gerador. Geradores não apenas são mais fáceis de usar, mas também mais confiáveis do que iteradores em JavaScript. Ambos podem realizar as mesmas tarefas, mas os geradores oferecem uma abordagem simpler e mais confiável. ## Objetos Ainda que a criação de objetos em JavaScript tenha sido feita há muito tempo, é ainda um conceito essencial para entendermos. Aqui temos um exemplo de criação de objeto em JavaScript: ```javascript const meuCarro = { fabricante: 'ford', nome: 'raptor', cor: 'preto' }; console. log(meuCarro); // { fabricante: 'ford', nome: 'raptor', cor: 'preto' } console. log(meuCarro. cor); // 'preto' ``` Neste exemplo, criamos um objeto chamado `meuCarro` com propriedades `fabricante`, `nome` e `cor`. Podemos acessar o objeto como um todo ou propriedades específicas conforme necessário. Como as diferenças entre objetos e mapas em JavaScript, embora ambos usam pares de chave-valor e fornecem o resultado desejado, existem pequenas diferenças entre eles. Se estiver interessado em aprender mais sobre estas diferenças, recomendo explorar mais aprimoradamente mapas em JavaScript. # Maps no JavaScript: Entendendo Chaves e Seus Tipos Os Maps no JavaScript são uma estrutura de dados poderosa que permite que você use qualquer string, número, função ou objeto como uma chave. Aqui está uma descrição de como os Maps funcionam e suas diferenças em relação aos objetos tradicionais. ## Adicionando Valores a um Map Começando com seus passos, criaremos um Map e adicionaremos valores: ```markdown const meuCarro = new Map(); // Adicionar entradas meuCarro. set('BMW', 2); meuCarro. set('od', 3); meuCarro. set('mercedes', 0); // Observe: Uma chave pode ser uma string // Acessar entradas meuCarro. get(3) // Retorna: 'mercedes' ``` ## Acessando Entradas Você pode acessar qualquer entrada usando o método `get` como mostrado abaixo: ```markdown meuCarro. get(3) // Retorna: 'mercedes' ``` Também é possível determinar o tamanho do mapa com o método `size`. ```markdown meuCarro. size // Retorna: 3 ``` ## Usando Chaves de Tipos Diferentes ```markdown // Remova as entradas meuCarro. delete('BMW'); meuCarro. delete('od'); meuCarro. delete('mercedes'); // Atribua chaves meuCarro. set('nomeCarro', 'BMW'); // String como uma chave meuCarro. set({fabricante: 'honda'}, 1); // Objeto como uma chave meuCarro. set(function car() { /* . . . */ }, 2); // Função como uma chave ``` **Importante: ** Para acessar valores com funções ou objetos como chaves, será necessário armazenar-los em variáveis primeiro. ```javascript let obj = {fabricante: 'honda'}; let funcao = function car() { /* . . . */ }; meuCarro. get(obj) // Retorna: undefined // Use variáveis para acessar valores let valor = meuCarro. get(obj); // Defina as variáveis primeiro antes de usar como chaves console. log(valor); // Retorna: honda ``` ## Trabalhando com Arrays É possível usar arrays como pares chave-valor nos maps ao passar um array para o construtor do map: ```markdown // Define um array de pares de chave-valor let meuArr = [ ['BMW', 2], ['od', 3], ['honda', 1] ]; let mapa = new Map(meuArr); // Use o mapa console. log(mapa. get(2)); // Retorna: 'od' ``` ## Iterando através de um Map ```markdown // Com um laço for-of for (let [chave, valor] of meuCarro) { console. log(`${chave}: ${valor}`); } ``` ## Clonando Maps Para clonar um map, você pode espalhar os valores em um novo mapa: ```javascript const mapaClonado = new Map([. . . meuCarro]); ``` ## Sets no JavaScript Os sets são semelhantes aos maps pois são objetos que armazenam valores únicos. Eles permitem que você armazene uma coleção não ordenada de valores, sem duplicados. ```markdown const meuSet = new Set([1, 2, 3]); ``` Adicionando valores a um set: ```markdown meuSet. add(4); // Retorna: Set {1, 2, 3, 4} meuSet. add(2); // Retorna: Set {1, 2, 3, 4} ``` Verificando se um valor existe em um set: ```markdown meuSet. has(4); // Retorna: true meuSet. has(5); // Retorna: false ``` Removendo valores de um set: ```markdown meuSet. delete(2); // Retorna: true meuSet. delete(6); // Retorna: false ``` Convertendo um set em um array: ```markdown Array. from(meuSet); // [1, 3, 4] ``` # JavaScript Sets (Português de Portugal) ## Introdução Nesta explicação, discutiremos sobre JavaScript Sets, suas propriedades e métodos. ## Criação de um Set Para criar um Set, podemos utilizar o objeto Set. Vejamos um exemplo de como criarmos um Set chamado `mySet2` e imprimimos cada item no console: ```javascript let mySet2 = new Set(); // um Set vazio mySet2. add(1); mySet2. add(2); mySet2. add(3); mySet2. add(4); mySet2. add(45); mySet2. add(5); mySet2. add(6); console. log(mySet2); ``` ## Iteração pelos Elementos Podemos usar o laço `for-of` em JavaScript para iterar por todos os elementos presentes dentro do Set: ```javascript for (let item of mySet2) { console. log(item); } ``` ## Exclusão de uma Entrada Para excluir uma entrada específica do Set, podemos utilizar o método `delete`. Para excluir o 45 de `mySet2`, podemos utilizar: ```javascript mySet2. delete(45); console. log(mySet2); ``` ## Limpeza do Set Para limpar o Set, podemos utilizar o método `clear`: ```javascript mySet2. clear(); console. log(mySet2); ``` ## Utilização de um Array no laço `for-of` Se estivermos a usar um array no laço `for-of`, podemos substituir `mySet2` por `myArr`: ```javascript let myArr = [1, 2, 3, 4, 45, 5, 6]; for (let item of myArr) { console. log(item); } ``` ## Exemplo de Jogo Nesta parte da explicação, criaremos um jogo semelhante ao "Flappy Bird". ### Estrutura HTML Primeiro, criemos a estrutura HTML: ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Flappy Bird</title> <link rel="stylesheet" href="flappy-bird. css"> </head> <body> <div id="game"> <div id="block"></div> <div id="hole"></div> <div id="bird"></div> </div> <script src="flappy-bird. js"></script> </body> </html> ``` ### Estilos CSS Em seguida, estilizemos nosso jogo: ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { background-image: linear-gradient(to right, #abcdef, #ffd2df); min-height: 800px; } #game { height: 500px; width: 400px; border: 1px solid black; background-image: url('bg2. jpg'); background-size: cover; overflow: hidden; } #block { width: 50px; height: 500px; background-color: blue; position: relative; left: 400px; animation: block 2s linear infinite; } @keyframes block { 0% { left: 400px; } 100% { left: -50px; } } ``` ### Lógica JavaScript Por fim, escrevemos o script JavaScript para tornar o jogo funcional: ```javascript const block = document. getElementById('block'); const hole = document. getElementById('hole'); const bird = document. getElementById('bird'); let gap = Math. random() * 150; // cálculo do espaço entre o buraco window. addEventListener('keydown', (event) => { if (event. key === 'Space') { jump(); } }); function jump() { let position = parseInt(window. getComputedStyle(bird). getPropertyValue('bottom')); if (position > 0) { bird. style. bottom = `${position - 30}px`; } } setInterval(() => { let blockTop = parseInt(window. getComputedStyle(block). getPropertyValue('top')); let birdTop = parseInt(window. getComputedStyle(bird). getPropertyValue('bottom')); if (birdTop + 50 > blockTop + gap) { bird. style. animation = "none"; block. style. animation = "none"; alert("Game Over"); } }, 10); ``` # Curso de jQuery Integral 2022 | Tutorial jQuery para Iniciantes | Tutorial jQuery | Simplilearn ## Acesso à Outra Div com IDs Avancemos para um arquivo CSS e acedemos a esse elemento específico com um ID. Aqui, escrevemos `#` e, dentro deste, escrevemos `buraco` e definemos suas propriedades como a `altura` (será 100% menos 150px), `largura` (igual ao bloco, 50px), e `background-color` (amarelo, mas isso pode ser alterado de acordo com os propósitos práticos). A posição será `relative`, `left` será 400 pixels, e `top` será `-500px`. ```markdown #buraco { height: calc(100% - 150px); width: 50px; background-color: yellow; position: relative; left: 400px; top: -500px; } ``` Agora, criaremos uma animação para este buraco. A animação terá uma duração de 2 segundos, uma facilitação linear e uma repetição infinita. ```markdown #buraco { animation: animação 2s linear infinite; } @animações { animação { de { top: -500px; } para { top: -150px; } } } ``` Após salvar essas alterações, abra um navegador e deverá ver o buraco corretamente posicionado sobre o bloco. ### Problemas com o Buraco Se o buraco não está corretamente sobre o bloco ou se estiverem ambos em localizações diferentes, você pode tentar atualizar o código ou a página inicial. Se persistir, será corrigido uma vez que passarmos ao módulo de JavaScript. ## Adicionando a Avena No arquivo HTML, adicionaremos uma imagem da avena. Dentro do arquivo HTML, abaixo do id `#board`, escrevemos `img`, definimos seu atributo `src` para `'avena. png'`, e ao atributo `alt` um texto descritivo. ```markdown <img src="avena. png" alt="Imagem da Avena"> ``` Para tornar a imagem visível, teremos que trabalhar na estilização do arquivo CSS. Acessaremos esta imagem através de seu ID (`#board`) e colocaremos sua posição como `fixed`, `top` como `100px`, e `altura` e largura como `50px`. Faça o mesmo para o tag `img`. ```markdown #board img { position: fixed; top: 100px; height: 50px; width: 50px; } ``` Após salvar essas alterações, abra um navegador e deverá ver a imagem da avena na jogatinha. ## Avançando para JavaScript Agora que já temos o setup básico de HTML e CSS, vamos usar JavaScript para manipular os elementos e adicionar funcionalidades. 1. Acesse cada elemento no arquivo JavaScript usando `document. getElementById()`. 2. Criaremos um ouvinte de eventos para que o buraco seja movido para lugares aleatórios dentro do bloco em cada iteração da animação. 3. Implemente a cenário do jogo perdido e as mecânicas de pontuação no módulo de JavaScript. Este tutorial assume que você tem uma compreensão básica de HTML, CSS e JavaScript. Para informação mais detalhada, considere os tutoriais jQuery de Simplilearn. Título Principal: Introdução e Implementação da Biblioteca jQuery em HTML =============================================================================== Técnicas de Programação: HTML, CSS, jQuery Conteúdo -------- Este documento apresenta uma introdução e exemplo de implementação da biblioteca jQuery em um arquivo HTML. O conteúdo aborda a história e principal funcionamento da biblioteca jQuery, o processo de download e inclusão da biblioteca, e um exemplo de uso simples de um método da biblioteca jQuery. Introdução ---------- * A origem da biblioteca jQuery e seu desenvolvedor John Resig * A função da biblioteca jQuery em simplificar a interação com documentos HTML * Explicação da API simples e tiny da biblioteca queÉ utilizada em navegadores atuais * Making of da biblioteca jQuery como resposta a problemas de scripts complexos e navegadores com cross-browser Download e Inclusão da Biblioteca jQuery ------------------------------------------ * A importância de incluir a biblioteca jQuery em um arquivo HTML * A escolha de duas formas para incluir a biblioteca jQuery: utilizando um CDN ou baixando-a diretamente * Instalação da biblioteca jQuery, abrindo o website oficial e escolhendo a versão Bitcoin 3. 6. 0 para baixar * Rompimento do arquivo jQuery em componentes: mapa, comprimido, comprimido desenvolvimento e build fino * Inclusão da biblioteca jQuery em um arquivo HTML Exemplo de Uso: Ocultação de um elemento com o método `fadeToggle()` ------------------------------------------------------------------- * A criação de um arquivo HTML exemplo com `img` e `button` * A definição de uma função para simplemente invocar o método `fadeToggle()` da biblioteca jQuery (funciona de forma semelhante ao método `fadeIn` e `fadeOut` do JavaScript nativo) * Funcionamento do método `fadeToggle()`: a alteração do estilo para somar ou subtrair a propriedade "display" tendo como valor "none" ou "block" de forma dinâmica * Experimentação: visualização de como o método `fadeToggle()` funciona entre os botões e img seguindo as instruções para aplicar o método para alternar a visualização inicial ou não de um elemento destacado Conclusão ---------- * Explicação das opções de como incluir a biblioteca jQuery em um arquivo HTML (usando CDN ou download local) * Remarks sobre a facilidade com a qual o jQuery permite a manipulação de elementos HTML e sua interferência de navegadores com cross-browser * Encourágem a utilização do jQuery nos projetos para simplificar tarefas e acelerar o desenvolvimento de aplicações web Como continuar: --------------- * Instruções sobre a próxima demonstração onde são discutidos mais métodos da biblioteca jQuery * O aviso para que as suas perguntas e problemas sejam postados e resolvidos pelo canal canal oferecendo apoio # Documentação Técnica em Markdown Este documento descreve como aplicar alterações de estilos a elementos HTML usando a API do jQuery em conjunto com o linguagem de estilos em folha fornecida em um arquivo `. css`. ## Divs Neste documento, vamos fazer algumas mudanças de estilo nas tags `div` para que elas sejam diferentes uma da outra. O arquivo CSS já foi adicionado na página, com o link como `stylesheet` e o caminho para o arquivo `style. css`. Antes de começarmos, vamos salvar este programa e conferir seu resultado. Aqui estão nosso conjunto de parágrafos, com números 1, 2, 3 e 4: ``` # Parágrafos Parágrafo 1 ============ Parágrafo 2 ------------ Parágrafo 3 ------------ Parágrafo 4 ----------- ``` Todos estes parágrafos estão contidos em duas tags `div` diferentes, mas não podemos ver essas tags `div` nosso, pois estão sendo usadas aqui. Vamos aplicar algumas mudanças de estilo para que eles sejam distinguíveis. O botão "click me" não funciona ainda. Agora vamos transferir para o arquivo `style. css` e começar a aplicar estilos nas nossas tags `div`. ``` # div1 { margin: auto; text-align: center; border: 3px solid black; font-size: 50px; background-color: cornflowerblue; height: 300px; width: 300px; position: relative; } ``` Nesta primeira tag `div`, tentaremos alinhar o texto ao centro, adicionar um limite de 3 pixels preto e pontos para o borda, definir o tamanho da fonte em 50 pixels e o fundo em cor deou level azul, definir a altura e largura em 300 pixels e posicioná apê vez apropriada (relative). Aqui, também implementamos a função `jquery` para mudanças em tempo de renderização da página. ``` # div2 { margin-top: 10px; background-color: yellow; } ``` Agora em nossa segunda tag `div`, vamos aplicar novamente o estilo groups para deixá-la visíveis e distinguiche uma casas diferente da primeira. Aqui, somente adicionamos um margin top de 10 pixels e alteramos a cor de fundo em amarelo. Aqui, podemos ver nossas duas tags `div` distinguíveis. Clique [aqui](URL_a_sua_página) para ver a página com as alterações de estilo. Podemos aplicar mudanças em tempo de renderização, usando a biblioteca jQuery, nos nossos elementos HTML. Primeiro, criaremos uma função com a seguinte assinatura: ```javascript function myFunction() { $("div1, div2"). css("background", "orange"); } ``` Agora podemos usar a função `myFunction()` para mudar a cor de fundo de todas as nossas tags `div`. Note que estou usando o `combinador `, que foi introduzido na especificação CSS 3, para selecionar múltiplos elementos. O código JavaScript completo pode ser visto como: ```javascript function myFunction() { $("div1, div2"). css("background", "orange"); } ``` O código JavaScript pode ser mantido em um arquivo separado ou inserido diretamente na página HTML, entre os scripts. Por exemplo, ajude-se do seguinte: ```html <! DOCTYPE html> <html lang="en"> <head> # Usando múltiplos atributos ao mesmo tempo com jQuery Usamos múltiplos atributos ao mesmo tempo em jQuery para facilitar a nossa vida ao trabalhar com elementos HTML. Por exemplo, podemos utilizar o nome do elemento e o nome da classe ao mesmo tempo. ```markdown Vamos te mostrar um exemplo aqui. Nós escrevemos aqui um comentário: ```html <! -- Este é um pequeno trecho de código comentado --> ``` Em seguida, no próximo linha, escrevemos `$`. ```markdown Suponhamos que nós estivéssemos escrevendo aqui: ```html <! -- Aqui estamos a nomear o elemento #primeiro-container, ou seja, o primeiro container tem um id. --> ``` Em seguida, nós escrevemos `li`, por isso temos um `<li>` como o nome do elemento. ```markdown Depois, nós escravamos `css` para alterar a cor de fundo e definir a cor de fundo como roxa, por exemplo. ``` Assim, você pode verificar que pode utilizar jQuery para alterar mais de um atributo ao mesmo tempo. ## Adicionamos parágrafos a divs extras Selecionamos o nosso documento HTML e copiamos este trecho de código que estava aqui para o nosso arquivo HTML depois do `h1`. Agora, vamos mudar os parágrafos: - O primeiro parágrafo fora de `id="primeiro-div"` vai dizer: "Este é o primeiro parágrafo fora de divs". - Vamos fazer o mesmo para o segundo parágrafo, que ficará nesta linha: "Este é o segundo parágrafo fora de divs". ```markdown Agora, vamos remover o segundo container: ```html <! -- Aqui estamos removendo o container com a ID "segundo-container". --> ``` Agora, vamos remover a estilização do segundo container. ## Alterando parágrafos específicos presentes em divisõs específicas Você pode alterar os parágrafos específicos de um determinado container com jQuery, podendo até mudar os parágrafos presentes em vários containers diferentes. ### Selecionando um elemento específico Para selecionar um elemento específico, podemos utilizar o seguinte código: ````html <script> $(document). ready(function() { $(document). find("div > p: first"). fadeToggle(); }); </script> ```` Este código vai mudar a opacidade do primeiro parágrafo do nosso primeiro container, tornando-o invisível. Se você quiser a opacidade retornar, basta clicar novamente. Podemos fazer o mesmo com um elemento específico presente no segundo container. Por exemplo, vamos fazer o seguinte: ````html <script> $(document). ready(function() { $(document). find("div: nth-child(2) > p: first"). fadeToggle(); }); </script> ```` Neste caso, ao verificar no console do navegador, poderia verá uma mensagem de erro com o texto "unsupported pseudo". O `second` não é suportado como uma psuedoclasse. Para resolver este problema, utilizamos o `first` em vez de `second`, porque contamos com os índices a partir do zero. Então, `first` se refere ao índice `0`, e não ao índice `1`. ### Alterando parágrafos específicos com base em Odd e Even Também podemos alterar os parágrafos com base nos índices. Por exemplo, podemos esconder os parágrafos de índices ímpares. ```markdown Para isso, escrevemos: ```html <! -- Todos os list items de índices ímpares vão ser escondidos. --> ``` A alternativa para esconder os parágrafos de ímpares seria utilizarmos: ```markdown <! -- List items de índices pares vão ser escondidos. --> ``` ### JavaScript e jQuery: uma introdução aos eventos Encontrei este grande curso de JavaScript e jQuery e pedi ao professor que lhes explicasse uns detalhes sobre os eventos. Vamos conhecê-los agora: Comecemos com um exemplo simples de um botão, e então inicializaremos o mesmo recurso com jQuery. #### JavaScript Primeiro, vamos adicionar uma imagem e um botão para lá no seu navegador. ````html <! -- Não vao funcionar deste modo --> ```` Agora, vamos adicionar um evento `onclick` ao botão. ```markdown ````html <! -- essa sintaxe é utilizada no javascript --> ```` Depois, vamos liberar o event `onclick` ao chamar uma função: `funct1`. ```markdown Agora, vamos modificar a imagem. #### JavaScript: Defina a funct1 ````html <! -- Centranos no arquivo JavaScript --> ```` Aqui definimos a função `funct1`. ``` # JavaScript e jQuery: Eventos ## Introdução Este tutorial irá abordar vários eventos em JavaScript e jQuery. Para tornar o JavaScript compatível com um HTML documento completamente carregado, utilizaremos a função `ready`. ### A Função Ready - Uma função JavaScript que é executada quando o documento HTML é totalmente carregado. - Aqui, guaremos as nossas tarefas jQuery até que o documento esteja pronto. - Utilize o `ready` evento em JavaScript; é considerada uma boa prática por desenvolvedores em todo o mundo. ```javascript $(document). ready(function() { // Seu código aqui }); ``` ### Evento Duplo Clique - Para criar um evento de duplo clique em jQuery, substitua o evento `click` pelo `dblclick`. - Defina a função a ser executada em um evento de duplo clique. ```javascript $(document). ready(function() { $("#suaButtonId"). dblclick(function() { // Seu código aqui }); }); ``` ### Eventos Mouse Enter e Mouse Leave - Para criar um evento Mouse Enter, utilize `mouseenter`. - Para criar um evento Mouse Leave, utilize `mouseleave`. ```javascript $(document). ready(function() { $("#suaImageId"). mouseenter(function() { // Seu código para aumentar a imagem }); $("#suaImageId"). mouseleave(function() { // Seu código para retornar a imagem ao tamanho original }); }); ``` ### Efeitos esconder e mostrar - Para esconder um elemento, utilize o método `hide()` em jQuery. - Para mostrar um elemento, utilize o método `show()` em jQuery. ```javascript $(document). ready(function() { $("#suaImageId"). hide(); // Para esconder uma imagem $("#suaButtonId"). click(function() { $("#suaImageId"). show(); // Para mostrar uma imagem }); }); ``` ### Efeito Hover Para um efeito que combina `mouseenter` e `mouseleave`, utilize a função `hover()` em jQuery. ```javascript $(document). ready(function() { $("#suaImageId"). hover( function() { // Seu código para aumentar a imagem no mouseenter }, function() { // Seu código para retornar a imagem ao tamanho original no mouseleave } ); }); ``` Nota: A função `hover()` recebe dois argumentos: uma função a ser executada no `mouseenter` e outra no `mouseleave`. # Documentação Técnica: Gerenciamento de Botões Toggle em jQuery ## Introdução Neste artigo, exploraremos o uso de botões toggle em jQuery para controlar a visibilidade de elementos em uma página web. Utilizaremos funções para `height`, `show`, `hide` e `fadeToggle`, bem como um único botão toggle para executar as funções `height` e `show/hide` utilizando apenas um botão. ## Botão Toggle Obtemos um botão toggle com ID `#btn3` e aplicamos a função `click` para criar uma função anônima. Dentro da função, acessamos a imagem com o ID `#img1` e injetamos a função `toggle`. Alteramos o tempo da ação para 3 segundos: ``` $('#btn3'). click(function() { $('#img1'). toggle(3000); }); ``` ## hide, show e fadeToggle Usaremos os mesmos métodos de controle de visibilidade `hide` e `show`, porém com o efeito de transição `fadeToggle`. Os botões terão _ids_ `btn4`, `btn5` e `btn6`. ``` // Fade In $('#btn4'). click(function() { $('#img1'). fadeIn(2000); }); // Fade Out $('#btn5'). click(function() { $('#img1'). fadeOut(2000); }); // Fade Toggle $('#btn6'). click(function() { $('#img1'). fadeToggle(2000); }); ``` ## Slide Toggle Adicionamos mais três botões - `btn7`, `btn8` e `btn9` - para ilustrar o efeito de slide expandir e retrair a imagem: ``` // Slide Up $('#btn7'). click(function() { $('#img1'). slideUp(2000); }); // Slide Down $('#btn8'). click(function() { $('#img1'). slideDown(2000); }); // Slide Toggle $('#btn9'). click(function() { $('#img1'). slideToggle(2000); }); ``` ## Stop Adicionamos um botão de parada ao nosso código: ``` $('#btn10'). click(function() { $('#img1'). stop(); }); ``` ## Animate Por último, utilizaremos o efeito de animação [animate()](https://api.jquery.com/animate/) para movimentar uma imagem ou outro objeto em uma página web. ``` let img = $('#img1'); let btn = $('#btn'); btn. click(function() { img. animate({ left: '500px' }, 4000); }; ``` # Animear Botão e jQuery ## Evento de Clique no Botão de Animação Vamos utilizar o evento de clique para o botão de animação. Agora, avancemos para a parte do jQuery. Nesta parte do jQuery, removemos esse pedaço de código e vamos tentar acessar o botão de animação usando o ID do botão. Bem, para isso, escreveremos `$` seguido por `''button id''` (btn) e depois `. click()`. Vamos utilizar o evento de clique aqui. Em seguida, utilizaremos o efeito `animate()`. Nosso ID da imagem é `img`, então escrevemos `$ . animate(img)` e deixaremos isso para agora. O efeito `animate()` neste lugar tem três parâmetros diferentes: 1. propriedades css (alterações de estilo que estamos criando na imagem) 2. timestamp (dijamos que estamos utilizando 2000 neste lugar, representando milissegundos) 3. callback (abordado em vídeos subsequentes, por enquanto, utilizaremos apenas os dois primeiros parâmetros) Vamos prosseguir e escrever as propriedades CSS na chave acrescida: 1. `left: 150px` – esta propriedade moverá a imagem 150 pixels para fora do lado esquerdo do contêiner. Salve este programa e observe as alterações nesta página web. Clique em botão de animação para ver a imagem se deslocar para o canto superior direito, pois o efeito leva 2 segundos para terminar (porque utilizamos um timestamp de 2000 milissegundos). Vamos reduzir um pouco o tamanho do navegador Chrome e recarregar a página novamente. Agora, clique em botão de animação e observe que a imagem se desloca; o efeito está funcionando corretamente. ## Fazendo mais Alterações no Estilo da Imagem Para fazer mais alterações no estilo da imagem, clique novamente no botão de animação e vamos adicionar mais propriedades CSS ao efeito de animação escrevendo estas propriedades separadas apenas com vírgulas. Por exemplo: 1. `opacity: opacity: 1` – modificaremos a opacidade da imagem para 1. 2. altura e largura: `height: 400px, width: 400px` – alteraremos a altura e largura da imagem para 400 pixels cada. Salve este programa, volte aos navegadores. Clique em botão de animação para ver as alterações. A dimensão da imagem aumentará gradualmente em 2 segundos, porém nota-se que este método `animate()` não tem uma função de toggle, portanto não podemos recuperar as alterações somente clicando no botão novamente. Escreva o comando `slow` ou `fast` em vez de `2000`: ``` $('. animate'). on('click', function() { $('#img'). animate({ left: '150px', opacity: '1', height: '400px', width: '400px' }, 2000, function() { // código da função de retorno aqui }); }); ``` Salve o programa, clique novamente no botão de animação e observe o efeito funcionando com as alterações novas. Para utilizar o comando `slow`, altere `2000` para `'slow'` no código acima. Esta é tudo o que temos de discutir sobre o efeito de animação. A sua tarefa é criar outro botão para reverter as alterações e fazer com que a imagem retorne ao seu formato original. Boa sorte, e faça saber se você confronta qualquer problema! 🚀🚀🚀🌟🌟🌟🚀🚀🚀 # Modelo de Objeto de Documento (DOM) em jQuery Experimente agora. Você vai ver que ao clicar no botão animate, estamos usando quatro efeitos diferentes funcionando em conjunto: deslizar para cima, deslizar para baixo, desvanecer e aparecer, todos funcionando no tempo. Antes de avançarmos na manipulação do DOM em jQuery, vamos lembrar a definição do DOM. ## Modelo de Objeto de Documento (DOM) O DOM representa Document Object Model e define o documento HTML em uma forma hierárquica para que possa ser compreendido por JavaScript ou jQuery, permitindo que outras funções funcionem sobre ele. Ele representa o todo documento em forma de objetos e nós -- seja elementos ou tags ou qualquer uma das coisas no documento armazenadas no Document Object Model. O conteúdo da página pode ser acessado ou manipulado usando JavaScript ou jQuery. Você pode monitorar o vídeo de manipulação do DOM e encontrá-lo na playlist. Agora que temos conhecimento suficiente sobre o Modelo de Objeto de Documento, vamos começar a escrever o código HTML e depois vamos tentar acessar esse documento HTML com a ajuda do jQuery. ## Código HTML ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Manipulação do DOM em jQuery</title> <! -- Adicione seus estilos aqui --> <style> /* Adicione seus estilos aqui */ </style> </head> <body> <! -- Adicione seu HTML aqui --> <! -- Adicione seu JavaScript aqui --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script. js"></script> </body> </html> ``` Agora, vamos implementar o exemplo prático usando essa estrutura. Aqui é o exemplo que vamos criar: um pequeno caixote com algum texto dentro e fora dele. Primeiro, vamos escrever o código HTML dentro da tag `body`: ```html <div class="container"> <h2>Clique no botão presente abaixo</h2> <span id="span-um"></span> <div class="conteudo-caixote div-um" style="background-color: aqua; "> <p class="p1" id="texto-do-caixote">Este é o box 1</p> <button id="btn-um">Clique aqui</button> </div> </div> ``` Agora, temos nossa estrutura HTML básica pronta. Vamos estilizar estes elementos para um design mais limpo: ```html <head> <! -- Adicione seus estilos aqui --> <style> . container { largura: 80%; margem: auto; } . div-um { altura: 250px; largura: 250px; fronteira: 5px sólido preto; margem: 50px; fonte-tamanho: xx-large; fonte-peso: mais em negrito; } . p1 { alinhamento: centralizado; margem: 100px; } </style> </head> ``` Agora, você pode ver como nosso código renderiza no navegador: [Exemplo de caixote](arquivo: ///C: /usuarios/Youusername/desktop/example-box. html) Em seguida, vamos passar à parte do jQuery. Primeiro, vamos acessar o texto do caixote e tentar exibí-lo na tela usando o jQuery: ```javascript $(document). ready(function() { // Acesso ao texto do caixote e exibi-lo na tela $("#btn-um"). click(function() { var textoDoCaixote = $(". conteudo-caixote"). find(". p1"). html(); $("#span-um"). text(textoDoCaixote); }); }); ``` Agora, salve seu `script. js` arquivo, abra o `example-box. html` no navegador e clique no botão "Clique aqui". Você deverá ver "Este é o box 1" exibido dentro da tag <span id="span-um">: [Exemplo de caixote com JavaScript](arquivo: ///C: /usuarios/Youusername/desktop/example-box. html) No código acima, usamos tanto o método `html` quanto o método `text` para mostrar a diferença. Quando usamos o `html` método, ele mostrou o conteúdo HTML do elemento com tags, enquanto quando usamos o método `text`, ele exibiu apenas o texto dentro do elemento correspondente. Por último, deixemos de lado a discussão sobre o Método de Atríbutos, que nos ajuda a obter o valor de um atributo ou alterar o valor de um atributo. Usando este método, podemos obter o ID do texto de parágrafo: ```javascript $(document). ready(function() { $("#btn-um"). click(function() { alert($(". p1"). attr("id")); // Este vai exibir 'texto-do-caixote' }); }); ``` Agora, vamos alterar o id do parágrafo ao clicar no botão: ```html <div id="id-novo-container"> <button id="btn-alterar-id">Alterar ID</button> </div> ``` ```javascript $(document). ready(function() { $("#btn-alterar-id"). click(function() { $("#texto-do-caixote"). attr("id", "texto-novo-id"); }); }); ``` Salve as alterações requisitadas, e você pode observar o comportamento no navegador quando clicar no botão "Alterar ID". Agora você tem uma compreensão básica de como acessar e manipular elementos HTML usando o jQuery e o Model de Objeto de Documento (DOM). SENTA-SE LIVRE PARA EXPLORAR MAIS E EXECUTAR MAIS EXEMPLOS PARA APROFUNDAR SUAS HABILIDADES! # Valor em RGB e mudança de cor de fondo do CSS em HTML Este documento explica como alterar o valor em RGB e a cor de fundo de um elemento HTML usando JavaScript (jQuery) e CSS. ## Valor RGB da Cor Aquamarine organize o valor como **um, dois, sete, dois, cinco, cinco, dois, um, dois**. Este é o valor RGB da cor **aquamarine**. ``` Mude este valor também. ``` ## Mudando a Cor de Fundo ao Clicar no Botão Podemos mudar a cor de fundo ao **clique no botão**. ### Acessando o Botão ```javascript $(document). ready(function() { $('#btn1'). on('click', function() { //Acessa a divisão $('. div1'). css('background-color', 'verde'); }); }); ``` Neste exemplo, acessamos o botão com o id `btn1` e criamos um evento de click. Dentro da função, acessamos a div com a classe `. div1` e definimos a propriedade CSS `background-color` para `verde`. ### Salvar e Visualizar as alterações Grave esta peça de código e você verá que a cor muda para verde ao clicar no botão. Se criar mais um clique no botão, é possível verificar que o valor RGB também mudará para **0, 128, 0**, que é o valor RGB da cor verde. ## Estilização de elementos HTML usando o método CSS É possível realizar determinados ajustes de estilo nos elementos HTML usando este método. Por exemplo, é possível alterar o estilo de fonte, a cor de fonte ou qualquer propriedade CSS usando este método CSS. ### O Método Append O método append é usado para adicionar algo dentro do elemento específico. Por exemplo, se você quiser adicionar algo dentro de um caixão após o parágrafo 1, você pode usar o método append. ### Adicionando conteúdo ```javascript $(document). ready(function() { $('#btn1'). on('click', function() { $('. div1'). append('<p>Parágrafo 2. </p>'); }); }); ``` Neste exemplo, acessamos o botão com o id `btn1` e criamos um evento de click. Dentro da função, acessamos o div com a classe `. div1` e usamos o método append para adicionar uma nova linha **dentro** do caixão. ### Adicionando imagens Também é possível adicionar imagens usando o método append: ```javascript $(document). ready(function() { $('#btn1'). on('click', function() { $('. div1'). append('<img src="imagens/j1. png" alt="Imagem 1" height="100" width="100">'); }); }); ``` Neste exemplo, adicionamos uma imagem no caixão após cliquear no botão. Isso funciona pois utilizamos aspas duplas para criar o HTML passando como parâmetro para o método append. ### O Método Prepend O Método prepend é usado para adicionar algo ao **princípio** do caixão. A maneira de se utilizar o método prepend é semelhante à do método append. ### Adicionando conteúdo ```javascript $(document). ready(function() { $('#btn2'). on('click', function() { $('. div1'). prepend('<p>Parágrafo 2 usando o método pré-pend. </p>'); }); }); ``` Neste exemplo, acessamos o botão com o id `btn2` e criamos um evento de click. Dentro da função, acessamos o div com a classe `. div1` e o método prepend para adicionar uma nova linha **antes** do conteúdo existente dentro do caixão. ### Adicionando imagens Também é possível adicionar imagens usando o método prepend: ```javascript $(document). ready(function() { $('#btn2'). on('click', function() { $('. div1'). prepend('<img src="imagens/j1. png" alt="Imagem 1" height="100" width="100">'); }); }); ``` Neste exemplo, adicionamos uma imagem no caixão antes do conteúdo existente após clicar no botão. Isso funciona pois utilizamos aspas duplas para criar o HTML passando como parâmetro para o método prepend. ### Os métodos After e Before Os métodos After e Before permitem adicionar conteúdo **fora** dos elementos com os quais estão associados. ### Adicionando conteúdo ```javascript $(document). ready(function() { $('#btn3'). on('click', function() { $('. div1'). after('<p>Parágrafo novo usando o método After. </p>'); }); $('#btn4'). on('click', function() { $('. div1'). before('<p>Parágrafo novo usando o método Before. </p>'); }); }); ``` Neste exemplo, adicionamos dois botões para os métodos After e Before. Quando clicar em qualquer um dos botões, será adicionada uma nova linha ao HTML, mas esta será localizada **fora** do caixão. ## Os métodos Remove e Empty O método remove é usado para **remover completamente** um elemento do documento HTML, enquanto o método empty é usado para **remover o conteúdo** de um elemento e manter a estrutura HTML presente. ### Removendo o conteúdo ```javascript $(document). ready(function() { $('#btn5'). on('click', function() { $('. div1'). remove(); }); }); ``` Neste exemplo, adicionamos um botão para o método remove. Quando clicar neste botão, será removido o todo caixão da HTML. ### Limpando o conteúdo ```javascript $(document). ready(function() { $('#btn6'). on('click', function() { $('. div1'). empty(); }); }); ``` Neste exemplo, adicionamos um botão para o método empty. Quando clicar nest este botão, será removido conteúdo interno do caixão mas a estrutura HTML continuará presente. # Diferença entre Métodos Remove e Vazio em jQuery UI Este documento explica a diferença entre os métodos `remove` e `empty` em jQuery UI, uma biblioteca popular de JavaScript aberta construída sobre a biblioteca jQuery. ## Visão geral Vamos atravessar o website oficial do jQuery UI para entender melhor sobre suas funcionalidades e recursos. 1. Abrir o navegador Chrome 2. Escreva `jquery ui` na barra de endereço e pressione enter 3. Clique no primeiro link para visitar o website oficial do jQuery UI No website do jQuery UI, você encontrará várias opções para escolher, incluindo o download do jQuery, navegar suas funcionalidades, entre outras coisas. ## Recursos principais do jQuery UI * O jQuery UI é um conjunto curado de interações de interface do usuário, efeitos, widgets e temas construídos sobre a biblioteca jQuery JavaScript * Se você está construindo uma aplicação web altamente interativa ou apenas precisar adicionar uma caixa de seleção de data em um controle de formulário, o jQuery UI é a melhor opção * Contém várias interfaces, efeitos widgets e mais, o que o torna bastante útil e essencial para a criação de páginas web interativas ### Widgets e interfaces pré-definidos Todos esses efeitos widgets e interfaces são pré-definidos no jQuery UI. Todeos a fazer é usá-los com a sintaxe correta, e teremos tudo pronto. 1. Clique em qualquer um dos widgets pré-definidos (por exemplo: draggable, droppable) para ver suas funcionalidades ## Exemplo: Utilizando o Widget Draggable 1. Clique no widget draggable 2. Você verá aparecer uma caixa que pode ser arrastada pela tela 3. O código-fonte desta caixa está disponível, e precisamos escrever esta código para fazer uma caixa disponível para arrastar pela tela em nosso próprio projeto Por isso usamos o jQuery UI, ou o jQuery UI nos permite realizar essas tarefas com mais facilidade do que usando JavaScript ou jQuery em separado. ## Mais sobre jQuery UI 1. Clique na seção "Sobre" no website 2. Saiba mais sobre os objetivos e visões por trás da criação do jQuery UI 3. Note que o jQuery UI é uma biblioteca aberta e transparente, o que significa que todos os membros da comunidade, seja eles desenvolvedores, designers, especialistas ou gerentes, estão livres para se conectar com o time do jQuery UI ### Baixar o jQuery UI 1. Descer para a secção de Baixar 2. Clique na versão estável (por exemplo: jquery 1. 8) para baixar a biblioteca Lembre-se de colocar os arquivos descarregados do jQuery UI na mesma pasta onde você está salvando seus programas jQuery. ## Conclusão Neste documento, vivenciaramos a diferença entre os métodos `remove` e `empty` em jQuery UI e fornecemos um exemplo de utilização do widget draggable, um dos widgets pré-definidos no jQuery UI. Ao entender e dominar as funcionalidades do jQuery UI, poderá criar páginas web interativas e amigáveis ao usuário mais eficientemente. # Introdução ao Widget de Calendário e Widget de Ferramentas do jQuery UI ## Adição do Widget de Calendário Para adicionar o Widget de Calendário no jQuery UI, primeiro vamos iniciar com uma página HTML simples com um campo de texto onde será adicionado o Calendário: ```html <! DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="quiz"> <label for="data">Selecione uma data: </label> <input type="text" id="data"> </div> <script> $( function() { $( "#data" ). datepicker(); } ); </script> </body> </html> ``` Após adicionar o código acima, ajuste algumas das configurações do Calendário de acordo com as suas necessidades. ## Adição do Widget de Ferramentas Para adicionar o Widget de Ferramentas no jQuery UI, primeiro vamos iniciar com uma página HTML simples com um campo de texto onde será adicionado o Widget de Ferramentas: ```html <! DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="quiz"> <p> <label for="nome">Nome: </label> <input type="text" id="nome" title="Digite seu nome aqui. "> </p> </div> <script> $( function() { $( "#nome" ). tooltip(); } ); </script> </body> </html> ``` Após adicionar o código acima, você pode ajustar o comportamento do Widget de Ferramentas de acordo com as suas necessidades. # Customização do Widget Ferramenta Ferramenta no jQuery UI O Widget Ferramenta Ferramenta é uma funcionalidade do jQuery UI que adiciona dicas dinâmicas a elementos HTML. Neste guia, vamos discutir como personalizar o widget de Ferramenta Ferramenta. ## Ferramenta Ferramenta pulsando Para criar uma Ferramenta Ferramenta pulsando, siga estes passos: 1. Defina as propriedades `altura` e `efeto` com os parâmetros desejados, como `explode` e `duração` (2000ms neste exemplo). Remova a propriedade `delay` porque não queremos qualquer atraso no animação da Ferramenta Ferramenta. ```markdown // Define as propriedades da Ferramenta Ferramenta $( "#input-box" ). tooltip({ altura: 'Seu Valor de Altura', efeito: 'explode', duração: 2000, delay: { show: 0, hide: 0 } }); ``` 2. Coloque o cursor do rato sobre o campo de entrada para ver o efeito pulsando. Remova o cursor do rato, e a Ferramenta Ferramenta explodirá. ## Ferramenta Ferramenta sem Atributo Title Em vez de usar o atributo `title`, você pode usar a propriedade `content` para definir o conteúdo da Ferramenta Ferramenta. ```markdown // Define o conteúdo da Ferramenta Ferramenta $( "#input-box" ). tooltip({ content: function() { return $( this ). attr( "title" ); } }); // Remova o atributo title do HTML <input type="text" id="input-box" /> ``` ## Widget Tocador O Widget Tocador é usado para descrições ou blocos de conteúdo expandíveis e recoláveis que se parecem com abas. Nesta parte do guia apresenta-se o uso básico do widget de Tocador. 1. Crie seções com cabeçalhos e descrições. ```html <! -- Estrutura HTML --> <div id="accordion"> <h2>HTML</h2> <div> <p>HTML significa Hyper Text Markup Language e é usado para estruturar uma página da web. </p> </div> <! -- Adicione mais seções aqui --> </div> ``` 2. Use jQuery UI para inicializar o widget de Tocador. ```javascript // Inicialize o widget de Tocador $( function() { $( "#accordion" ). accordion(); }); ``` A seguir encontra-se o texto traduzido com a formatação Markdown: # Caixa de diálogo em jQuery Este capítulo discute a caixa de diálogo em jQuery e suas propriedades básicas. ## Resumo da Caixa de Diálogo Esta caixa de diálogo está situada aqui. Ela tem um encabeçamento etiquetado `Diálogo Básico`. Dentro, temos conteúdo. À medida que passamos o cursor sobre o encabeçamento, o cursor muda, e podemos arrastar este widget pela tela. Podes resizer o widget com a ajuda de um rato e o tamanho muda conforme isso. ! [Caixa de Diálogo](imagem_url) ### Utilizando a Caixa de Diálogo no Nosso Programa Para utilizar este widget no nosso programa, vamos primeiro criar um elemento `div` e adicionar algum conteúdo dentro. ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Caixa de Diálogo</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <div id="dialog" title="Caixa de Diálogo Personalizável"> Este é um caixa de diálogo personalizável. </div> <script> $( function() { $( "#dialog" ). dialog(); }); </script> </body> </html> ``` Neste exemplo, criamos um `div` com o identificador `dialog`, e adicionámos conteúdo e um título. Incluímos jQuery e jQuery UI no cabeçalho da nossa página HTML. Agora salve o código, e pode vêr o texto `Este é um caixa de diálogo personalizável` exibido na caixa de diálogo na janela do navegador. ### Personalizações de Caixa de Diálogo #### Adicionando Atributos ou Propriedades de Título Há duas maneiras de adicionar um título: 1. Utilizando o atributo `title`: No HTML, escrevemos: ```html <title title="Título usando Atributo">Título usando Atributo</title> ``` Atualize a janela do navegador. agora, o título da caixa de diálogo é `Título usando Atributo`. 2. Utilizando a propriedade `title`: No JavaScript, escrevemos: ```javascript $(function() { $( "#dialog" ). dialog({ title: "Título usando Propriedade" }); }); ``` Agora, o título da caixa de diálogo é `Título usando Propriedade`. #### Mudando a Propriedade Draggable Para impedir o utilizador de mover a caixa de diálogo dentro do navegador: ```javascript $(function() { $( "#dialog" ). dialog({ draggable: false }); }); ``` ! [Caixa de Diálogo Não-arrastável](caixa_nao_arrastavel. png) #### Mudando a Propriedade Resizable Para impedir o utilizador de redimensionar a caixa de diálogo: ```javascript $(function() { $( "#dialog" ). dialog({ resizable: false }); }); ``` #### Utilizando a Tecla `esc` Por padrão, a pressão da tecla `esc` fecha a caixa de diálogo. Se quiseres impedir fecharla com a pressão da tecla `esc`: ```javascript $(function() { $( "#dialog" ). dialog({ closeOnEscape: false }); }); ``` #### Adicionando Caixa de Texto Por defeito, a caixa de diálogo não permite interação com outros elementos. Para fazer esta caixa de diálogo uma caixa de diálogo de modelo: ```javascript $(function() { $( "#dialog" ). dialog({ modal: true }); }); ``` Agora, não é possível interagir com quaisquer outros elementos fora da caixa de diálogo. #### Abrindo a Caixa de Diálogo por Clicar em um Botão Para abrir a caixa de diálogo com um clicar no botão, siga estes passos: 1. Cria um botão no HTML: ```html <button id="btn1" name="caixa de diálogo">Abrir Caixa de Diálogo</button> ``` 2. Define a propriedade `autoOpen` como `false` no JavaScript: ```javascript $(function() { $( "#dialog" ). dialog({ autoOpen: false }); }); ``` 3. Vincula o evento de clicar do botão para abrir a caixa de diálogo: ```javascript $( "#btn1" ). click(function() { $( "#dialog" ). dialog( "open" ); }); ``` Depois de fazer estas alterações, a caixa de diálogo só será aberta quando clicares no botão `Abrir Caixa de Diálogo`. #### Caixa de AutoComplete Um dos mais acessíveis e utilizados widgets em jQuery UI é o widget de auto-completamento, que auxilia os utilizadores a concluir o texto que estão escrevendo fornecendo sugestões. Para saber mais sobre o widget de auto-completamento e a sua síntaxe, vá para a [página do jQuery UI](https://jqueryui.com/autocomplete/). # AutoComplete Widget com Personalizações em C Sharp Neste exemplo, mostramos como criar um widget AutoComplete em C Sharp e personalizá-lo com parâmetros específicos. **Idiomas** - Aqui escreveremos: C Sharp - Temos: Pearl - Aqui escreveremos: Pearl - Aqui escreveremos: Ruby - Temos: Scala - Aqui escreveremos: Scala - Temos: Cobol - Estes são todos os idiomas - Aqui escreveremos: Basic - Mencionaremos: Fortran - Aqui escreveremos: Fortran - Temos: Lisp - Finalmente, adicionaremos: TypeScript - Aqui escreveremos: TypeScript - Estes parecem ser suficientes para agora **Tarefa do Widget AutoComplete** - Faça o widget AutoComplete saber sobre este array específico - Transmita este array como parâmetro para o widget AutoComplete - Tenha em mente que precisamos transmitir dois parâmetros neste widget - Um é a fonte do array - O outro é para as personalizações - Transmita-os dentro de chaves, use duas chaves - Separe-os com uma vírgula - O primeiro é para a fonte e o segundo é para as personalizações **Código do Widget AutoComplete** - Salve o programa e avance para o navegador - Verifique a saída - Aqui temos um campo de texto - Tente escrever algo aqui, por exemplo, `c` - Pode ver que temos os nomes de todos os idiomas que tem a letra `c` presente em seus nomes - Isso é o funcionamento básico deste widget AutoComplete - Ele sugestiona todos os nomes relacionados ao usuário e permite que ele escolha qualquer um deles - Se clicarmos em `c++` - Pode ver que temos o texto `c++` aqui - Se escrever `java` - Temos duas opções: `javascript` e `java` - Pode clicar em qualquer uma delas, e isso será o texto presente no campo de texto - Pode usar o array dentro do widget AutoComplete também - Não precisamos criar nenhuma variável ou coisa, apenas copie o array aqui - O que precisamos fazer é colá-lo aqui dentro do widget AutoComplete **Personalizações: ** - Passaremos por três tipos diferentes de personalizações - Primeira personalização: delay - Escreva dentro das chaves: `delay` - Transmita o valor como 500 aqui ``` { delay: 500 } ``` - Aqui, `delay` é 500 milissegundos - Aguarde 2000 em vez de 500 e salve o programa - Tente escrever algo aqui - Pode ver que as sugestões só aparecem após 2 segundos - Segunda personalização: minLength - Escreva dentro das chaves: `minLength` - Transmita o valor como 3 aqui ``` { minLength: 3 } ``` - Se escrever `c`, não recebemos sugestões porque o comprimento mínimo é 3 - Se escrever `ja`, ainda não recebemos sugestões porque o comprimento mínimo é 3 - Se escrever `v`, pode ver que após 2 segundos temos duas sugestões: `java` e `javascript` - Última personalização: focus - Escreva depois de uma vírgula ou para focar - Transmita isso como `true` porque é uma propriedade booleana ``` { delay: 500, focus: true } ``` - Vá para o navegador e escreva aqui algo, por # Modificação de Widgets no jQuery UI ## Visão Geral Nesta guia, vamos cobrir como modificar widgets e suas propriedades no jQuery UI. Usaremos o widget `draggable` como exemplo. ### Exemplo de Draggable Aqui está um exemplo de como modificar o widget `draggable`: 1. Primeiro, vamos começar com a estrutura HTML inicial: ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Exemplo de Draggable do jQuery UI</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="draggable-box1" class="draggable">Caixa 1</div> <div id="draggable-box2" class="draggable">Caixa 2</div> <script src="script. js"></script> </body> </html> ``` 2. Agora, vamos adicionar algumas estilizações: ```css <style> . draggable { border: 5px sólido preto; altura: 100px; largura: 100px; margin: 10px; text-align: center; } </style> ``` 3. Agora, vamos criar o arquivo JavaScript (script. js) para deixar as caixas draggáveis: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable(); }); ``` 4. Agora você pode ver que as caixas são draggáveis! Tente-as movimentar. ### Personalização O jQuery UI permite personalizações em interações, e o `draggable` é exceção. Examinemos algumas personalizações comuns para esta interação: 1. Defina um eixo: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ axis: "x" // ou axis: "y" }); }); ``` 2. Mude o cursor durante o arrasto: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ cursor: "capturing" }); }); ``` 3. Mude a opacidade do elemento durante o arrasto: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ opacity: 0. 5 }); }); ``` 4. Limite a área de arrasto: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ containment: "parent" // ou containment: "document" }); }); ``` 5. Use a propriedade grid: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ grid: [300, 300] }); }); ``` 6. Use a propriedade snap e snap tolerance: ```javascript $(function() { $("#draggable-box1, #draggable-box2"). draggable({ snap: true, snapTolerance: 100 }); }); ``` Com as diretrizes fornecidas acima, você pode agora modificar e personalizar widgets no jQuery UI facilmente! Feliz codificação! 💻✨ # Interação de ordenação A interação de ordenação permite que um grupo de elementos DOM seja ordenável. Aplicando uma clique em um elemento e arrastando-o para uma nova posição dentro da lista. Todos os outros itens vão se ajustar de acordo com este item específico. Desembocaçam todos os aspectos da interação de movimento em deslizamento por padrão. ## Sintaxe Agora, vamos avançar para o Visual Studio Code e tentar implementar este recurso no nosso próprio programa. Inicialmente, adicionaremos algumas variáveis a uma página web: ```html <div> <ul class="ordenável"> <li id="ordenavel1">Item 1</li> <li id="ordenavel2">Item 2</li> <li id="ordenavel3">Item 3</li> <li id="ordenavel4">Item 4</li> <li id="ordenavel5">Item 5</li> <li id="ordenavel6">Item 6</li> <li id="ordenavel7">Item 7</li> </ul> </div> ``` Agora, vamos os estilizar: ```css <style> . ordenável { border: 2px solid preto; altura: 20px; largura: 100px; margem: 10px; align-content: center; } </style> ``` O problema que enfrentamos foi um erro no elemento `loid`. Corrigimos isso para `li`. Agora, vamos implementar a interação de ordenação. ```javascript $(document). ready(function() { $('. ordenável'). sortable(); }); ``` Personalizando a integração de ordenação: ```javascript $(function() { $( ". ordenável" ). sortable({ opacity: 0. 5, cursor: 'mover', contenciamento: 'parent', atraso: 300, distância: 50 }); }); ``` Tarefa: Adicione Uma imagem a este programa e veja se funciona. --- ## Interação de Redimensionamento A interação de redimensionamento permite que qualquer elemento DOM seja redimensionável com a ajuda do cursor. Pode-se arrastar a borda superior ou direita de qualquer elemento DOM e descarregá-lo para uma largura e altura desejadas. Vamos passar rapidamente sobre este recurso: 1. Adicionar um elemento HTML. ```html <img id="redimensionavelImagem" src="images/j1. png" alt="javascript" /> ``` 2. Estiliza-lo: ```css <style> #redimensionavelImagem { altura: 250px; largura: 250px; border: 1px solid preto; } </style> ``` 3. Implementar a Interação de Redimensionamento: ```javascript $(function() { $( "#redimensionavelImagem" ). resizable(); }); ``` Examinando as opções disponíveis com este recurso, podemos usar animações para fazer a interação mais engajante para o usuário. ```javascript $(function() { $( "#redimensionavelImagem" ). resizable({ animate: true, contenciamento: 'parent', }); }); ``` Para limitar a área de expanção, podemos restringir a área de expanção da elemento ou do documento como um todo. Com este recurso, discutimos esta propriedade nos interações anteriores, portanto, permanecerá a mesma. ```javascript $(function() { $( "#redimensionavelImagem" ). resizable({ contenciamento: 'parent', maxHeight: 400, maxWidth: 400, minHeight: 150, minWidth: 150, }); }); ``` # Ajuste de Tamanho da Imagem com jQuery UI: Melhorando Sites Mais Interativos O jQuery UI fornece uma maneira de alterar a aparência e o sentido de uma página web por meio de personalizações pré-definidas. Abordamos essas personalizações de forma detalhada nos vídeos anteriores. Nesta sessão, vamos continuar explorando algumas outras características que o jQuery UI oferece para criar páginas web mais interativas. Vamos adicionar algumas widgets para ilustrar melhor conceitos. ## Widget Caixa de Diálogo Para criar uma caixa de diálogo personalizável, siga estes passos: 1. Use o `div` tag para criar a caixa de diálogo: ``` <div id="dialog" title="Título 1"> Esta é uma caixa de diálogo personalizável. </div> ``` 2. Aceda a caixa de diálogo no JavaScript utilizando `$('#dialog')` e aplique as seguintes propriedades: - Defina o `draggable` como `true` para arrastar a caixa de diálogo. - Defina o `resizable` como `true` para redimensionar a caixa de diálogo. - Defina o `closeOnEscape` como `true` para fechar a caixa de diálogo quando a tecla Escape for pressionada. ```javascript $(function() { $("#dialog"). dialog({ draggable: true, resizable: true, closeOnEscape: true, modal: false // Defina como verdadeiro para ter uma caixa de diálogo modal }); }); ``` ## Widget Calendário Aqui está um exemplo simples de utilização do widget de calendário: 1. Adicione um `div` tag ao HTML para armazenar o calendário: ``` <div id="data"></div> ``` 2. Aceda o calendário no JavaScript e configure as seguintes propriedades: - Defina o `showOtherMonths` como `true` para exibir meses fora do atual. - Defina os `changeMonth` e `changeYear` como `true` para navegação mais fácil. ```javascript $( function() { $( "#data" ). datepicker({ showOtherMonths: true, changeMonth: true, changeYear: true }); }); ``` ## Alterando o Tema do Widget O jQuery UI oferece uma maneira de personalizar a aparência e o sentido dos widgets utilizando ajustes temáticos. 1. Visite a [página de Tema jQuery UI](https://jqueryui.com/themeroller/) para personalizar os temas para integração mais fácil em seus projeto. 2. Clique em "Fabricar seu próprio tema" para criar um tema personalizado. Ajuste os parâmetros de acordo com suas necessidades e clique no botão "Download" quando estiver pronto. 3. Extraia o arquivo baixado e substitui a pasta existente jQuery UI de seu projeto com a pasta personalizada. # Aplicativo de Calculadora Este aplicativo será desenvolvido usando HTML, CSS, e jQuery. Aqui está uma passo a passo a estrutura e o processo de desenvolvimento do aplicativo. ## HTML Comecemos criando a estrutura do nosso aplicativo de calculadora. Temos diversas secções, incluindo botões para números, operações, e outras funcionalidades. Dentro do tag `body`, criemos um `div` elemento com uma classe chamada `calculadora`. Isso será o contêiner pai para nossa calculadora. ```html <div class="calculadora"> <p class="calculadora-name">Calculadora com jQuery</p> <! -- A interface da calculadora será adicionada aqui --> </div> ``` Agora, criemos um `div` filho elemento, que chamaremos de área _display_. Este será conteido dentro do main `div` com a classe `calculadora`. ```html <div class="area-display"> <div class="tela"></div> <! -- Os botões serão adicionados aqui --> </div> ``` Nós iremos numberar os botões de dígitos e operações e adicioná-los dentro do `div` tela. Aqui está uma amostra como um exemplo: ```html <div class="tela"> 0 1 2 3 4 5 6 7 8 9 </div> ``` ## Criação de Botões Crie mais `div` elementos para cada botão, também associados com a classe `button`. Adicione os nomes específicos do botão, como "c, " que limpará a display, ou " mais-menos " para os símbolos de mais e menos. ```html <div class="button c"></div> <div class="button mais-menos"></div> ``` Para funcionalidades mais complexas como apagar uma tecla, raiz quadrada, e outros operadores especiais, crie elementos `div` adicionais com os nomes dos botões necessários. ```html <div class="button apagar"></div> <div class="button raiz-quadrada"></div> ``` Continue adicionando todos os botões necessários, agrupá-los em linhas conforme necessário. Salve o arquivo, e você verá a estrutura do seu aplicativo de calculadora a partir de forma. ## Estilizando a Calculadora Quando a estrutura estiver completa, você poderá estilizar a calculadora com CSS. Adicione os estilos necessários às classes `body`, `. calculadora`, `. area-display`, `. tela`, e `. button`. ```css body { background-color: rgba(352, 322, 133, 1); margin-top: 150px; } . calculadora { position: relative; width: 350px; margin: 0 auto; padding: 1em; box-sizing: border-box; border-radius: 25px; display: inline-block; text-align: center; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0. 5); font-family: Oxygen, sans-serif; } . . . outros estilos . . . ``` Com essas etapas terá um documento HTML claro e estruturado para seu aplicativo de calculadora com um estilo simples para começar a trabalhar na implementação da funcionalidade com jQuery. Ajuste e melhore o código conforme necessário para criar um aplicativo de calculadora completo e funcionando fluamente. # Documentação do Aplicativo de Calculadora Este documento fornece instruções detalhadas sobre a estrutura e estilos do Aplicativo de Calculadora utilizando HTML, CSS e JavaScript. ## Área de Resultados A área de resultados é configurada inicialmente com os seguintes atributos: - O texto é alinhado à direita. - A tamanho da font é de 2m. - A altura principal é de 1. 2m com uma altura mínima de 1. 2m. - A margin-left é de 0. 5m. - A border é de cores diferentes, com um estilo solid de 1px. A código de cor utilizada é `#888`. - A cor da área de resultados é alterada para melhor visibilidade. ``` . displayArea { text-align: right; font-size: 2rem; min-height: 1. 2m; height: 1. 2m; margin-left: 0. 5m; border: 1px solid #888; // Outros estilos específicos da área de resultados } ``` ## Botões Os botões são estilizados com os seguintes atributos: - O texto é alinhado ao centro. - O display é inline-block. - Font-weight é bold. - A border é 1px solid e de uma cor elevada (branca). - A cor de fundo é branca. - Padding é de 10px e 0. - Margin é de 7px e 5px. - Border-radius é configurado em 15px. - Box-shadow é composto por um efeito escuro de preto (#a9a9a9). - A largura é 50px para cada botão. ``` . button { text-align: center; display: inline-block; font-weight: bold; border: 1px solid #fff; background-color: #fff; padding: 10px 0; margin: 7px 5px; border-radius: 15px; box-shadow: 2px 2px 1px 1px #a9a9a9; width: 50px; // Outros estilos específicos dos botões } ``` ## Funcionalidade do Calculadora (JavaScript) A funcionalidade do calculadora utiliza jQuery para manipular o DOM e executar cálculos. ```javascript $(document). ready(function() { var result, currentEntry, operation, previousEntry, updateScreen; // Inicializa variáveis result = 0; currentEntry = "0"; previousEntry = 0; operation = null; // Define updateScreen function function updateScreen(displayValue) { $(". displayArea"). html(displayValue. toString(). substr(0, 10)); } // Adiciona eventos para cliques em botões $(". button"). on("click", function() { if ($(this). html() === "C") { result = 0; currentEntry = "0"; } else if ($(this). html() === "EE") { currentEntry = "0"; } else if ($(this). html() === "Back") { currentEntry = currentEntry. substring(0, currentEntry. length - 1); } else if ($(this). html() === "Plus-Minus") { result *= -1; } else if ($(this). html() === ". ") { currentEntry += ". "; } else if (isNaN($(this). html())) { if (currentEntry === "0") { currentEntry = $(this). html(); } else { currentEntry += $(this). html(); } } else { if (currentEntry === "0") { currentEntry = $(this). html(); } else { if (operation ! == null) { // Escreva cálculos para adição, subtração, multiplicação, divisão, resto da divisão, raiz quadrada e 1 / x, e π // . . . } operation = $(this). html(); previousEntry = parseFloat(currentEntry); currentEntry = ""; } } updateScreen(currentEntry); }); }); ``` As correções e formatos foram feitas mantendo a originalidade do conteúdo. A estrutura e a organização foram melhoradas. Todas as referências de formatação (tamanho da font, padding e margens) vieram em formato Markdown (por exemplo, font-size: 2m = `font-size: 2rem; `). # Aplicativo de Calculadora Este tutorial mostrará-lhe como criar um aplicativo de calculadora utilizando HTML, CSS e jQuery. ## Função de Verificação de Número Primeiro, escrevamos o código para verificar se o valor fornecido é um número. ```javascript function isNumber(value) { // seu código aqui } ``` ## Função Operar Em seguida, escrevemos a função `operate()`, que terá três parâmetros: `a`, `b` e `operação`. Aqui está o pseudocódigo. ```javascript function operate(a, b, operation) { // seu código aqui } ``` ### Função ParseFloat Para `a` e `b`, escrevemos as funções `parseFloat()`. ```javascript function parseFloat(value) { // seu código aqui } ``` ### Calcular Agora, usaremos a função `operate()` dentro da função `calculate()` para manter a leitura. ```javascript function calculate(operation, a, b) { return operate(parseFloat(a), parseFloat(b), operation); } ``` ### Operadores Definimos os operadores como constantes. ```javascript const ADD = '+'; const SUB = '-'; const MULTIPLY = '*'; const DIVIDE = '/'; ``` ### Adicionar Funções Calculate Por fim, adicionaremos a função `calculate()` para cada uma das operações. ```javascript function add(a, b) { return calculate(ADD, a, b); } function subtract(a, b) { return calculate(SUB, a, b); } function multiply(a, b) { return calculate(MULTIPLY, a, b); } function divide(a, b) { return calculate(DIVIDE, a, b); } ``` ## Lista de Tarefas Agora, vamos criar uma lista de tarefas simples utilizando HTML, CSS e jQuery. ### Estrutura HTML #### Container Primeiro, criaremos um container para todo o bloco. ```html <div class="container"> <! -- Seu código aqui --> </div> ``` #### Cabecalho Em seguida, adicionaremos um cabeçalho para “Lista de Tarefas com jQuery”. ```html <h2>Lista de Tarefas com jQuery</h2> ``` #### Parágrafo Em seguida, criaremos um parágrafo que contém as instruções, por exemplo, "Duplique para excluir um item e arraste para reordenar. " ```html <p><b>Duplique para excluir um item</b> e arraste para reordenar <i>itens</i>. </p> ``` #### Formulário Agora, criaremos um formulário para a entrada do usuário. ```html <form name="lista de tarefas"> <! -- Caixa de texto --> <input type="text" name="item da lista" /> <! -- Botão Adicionar --> <div id="botao"> <button>Adicionar</button> </div> </form> <! -- Lista --> <ul></ul> ``` ### Estilos CSS #### Estilos do Corpo Aqui estão os estilos do corpo e do container. ```css body { background-color: #504ff4; margin-top: 150px; } . container { padding: 20px; width: 300px; margin: 0; order: 1; background-color: #f2e1dd; border-radius: 25 # Lista de Tarefas Interface com CSS e JavaScript (usando jQuery) Este projeto visa criar uma interface simples de Lista de Tarefas com estilos para listas não ordenadas, além de adicionar e remover itens, ordenar, e implementar a funcionalidade com jQuery. ## CSS (styles. css) ```css # Estilos para listas não ordenadas (ul) e itens (li) ul { padding-left: 20px; } ul li { padding: 5px; cor: rgb(5, 5, 5); peso-fonte: **negrito**; } ul. par { background-color: rgba(84, 84, 84, 0. 2); cor: branca; peso-fonte: **mais negrito**; } ul li. through { text-decoration: linha-atravessada; } li: hover { cursor: pointer; } ``` ## JavaScript (script. js) ```javascript $(document). pronto(function() { // Adicionar um novo item à lista $('#add-button'). click(function() { var tarefa = $('#task-input'). val(); if (tarefa) { $('ul'). appender('<li>' + tarefa + '</li>'); $('#task-input'). val(''); } }); // Configurar evento de clic duplo para remover um item da lista $('li'). dobleClick(function() { $(this). fadeOut(300, function() { $(this). remove(); }); }); }); // Para a gestão do evento de foco no campo de tarefa $('#task-input'). on('focus', function() { $(this). val(''); }); // Implementando lista não ordenada com sortavel usando jQuery UI $( function() { $( "ul" ). sortável(); } ); ``` ## HTML (index. html) ```html <! -- Interface de Lista de Tarefas --> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Lista de Tarefas</title> <link rel="stylesheet" href="styles. css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <div id="container"> <h1>Lista de Tarefas</h1> <input type="text" id="task-input" placeholder="Introduza a sua tarefa. . . "> <button id="add-button">Adicionar</button> <ul></ul> </div> </body> </html> ``` # Documentação para Desenvolvimento de Websites ## Preloader ```markdown <! -- COMENTÁRIO: Preloader --> <div class="preload"> <div class="load"> </div> </div> <! -- COMENTÁRIO: Fim do Preloader --> ``` ## Header ```markdown <! -- Seção do Header --> <head> <! -- Conteúdo do HTML aqui --> </head> ``` ```markdown <header class="header container"> <div class="row justify-content-between align-items-center"> <div class="brand"> <a href="index. html">Movie Menu</a> </div> <div class="nav toggle"> <! -- Código da Barra de Navegação aqui --> </div> </div> </header> ``` ```markdown <! -- COMENTÁRIO: Barra de Navegação --> <nav class="neff"> <! -- Lista não ordenada para itens de menu aqui --> </nav> ``` ## Home ```markdown <! -- Seção do Home --> <section class="home" id="home"> <div class="shape-container"> <div class="shape shape-0"></div> <! -- Código dos Formas aqui --> </div> <div class="container"> <div class="home-content"> <h4>Baixe seu filme favorito em apenas um clique</h4> <h2>Bem-vindo ao Movie Menu</h2> <! -- Código do Botão de Scroll aqui --> </div> </div> </section> <! -- COMMENT: Fim da Seção do Home --> ``` ## Sobre ```markdown <! -- Seção Sobre --> <section class="about about-section" id="about"> <div class="container"> <div class="row"> <! -- Código da Caixa de Imagem aqui --> <div class="about-content"> <! -- Título, Parágrafo e Estatísticas aqui --> </div> </div> </div> </section> <! -- COMMENT: Fim da Seção Sobre --> ``` ## Categorias (Seção de Categorias sem código fornecido, a ser implementada de acordo com a estrutura e padrões existentes) ## Melhor Avaliados (Seção de Filmes Melhor Avaliados sem código fornecido, a ser implementada de acordo com a estrutura e padrões existentes) ## Contato-nos (Seção de Contato sem código fornecido, a ser implementada de acordo com a estrutura e padrões existentes) # Seção de Categorias A seção de categorias começa aqui. ## Seção de Serviço com id `categories` ```html <section class="section-service" id="categories"> <! -- Container --> <div class="container"> <div class="row"> <div class="dev" class="section-title"> <h1>Categorias</h1> </div> </div> <! -- Tabela Começa --> <div class="row"> <div class="service-item"> <div class="service-item-inner"> <img src="img/service/service-1. png" alt="Categoria 1" class="overlay"> <h3>Ocidental</h3> </div> </div> <! -- Repita o código acima 5 mais vezes para as outras categorias (Misteriosa, Drama, Comédia, Animação, e Fantasia) --> </div> </div> </section> ``` ## Seção de Trabalhos Marcados ```html <section class="section-work" id="top"> <! -- Container --> <div class="container"> <div class="row"> <div class="dev" class="section-title"> <h1>Trabalhos Marcados</h1> </div> </div> <! -- Trabalhos Marcados Começam --> <div class="row"> <! -- Repita o seguinte código 6 vezes (para o Dr continues Strange, Capitã Maravilha, Aquaman, X-Men, Guardiões do Universo, e o cavaleiro da noite) --> <div class="work-item"> <div class="work-item-inner"> <img src="img/works/thumb/work-1. jpg" data-large="img/works/large/work-1. jpg" alt="Trabalho 1" class="overlay"> <h3>Nome do Trabalho</h3> </div> </div> </div> </div> </section> ``` ## Seção de Contato ```html <section class="section-contact" id="contact"> <! -- Container --> <div class="container"> <div class="row"> <! -- Container do Formulário de Contato --> <div class="row" class="contact-form"> <! -- Formulário --> <form class="form"> <div class="row"> <div class="input-group left"> <label>Nome</label> <input type="text" class="input control" placeholder="Seu Nome"> </div> <div class="input-group right"> <label>E-mail ou Telefone</label> <input type="text" class="input control" placeholder="Seu E-mail ou Telefone"> </div> </div> <div class="row"> <! -- Caixa de Texto para Mensagem --> <div class="input-group"> <label>Mensagem</label> <textarea class="input control" placeholder="Sua Mensagem"></textarea> </div> </div> <! -- Botao para Enviar o Formulário --> <div class="form-button"> <button type="submit">Enviar Mensagem</button> </div> </form> </div> </div> </div> </section> ``` # Contate-Nos Vai haver um botão e então teremos a classe `button` com o id `button1`. O nome do botão será "Enviar mensagem". Após este tag `div`, adicionaremos uma caixa de diálogo. O id deste `div` será `dialog`. Aqui está o conteúdo que irá estar abaixo da caixa de diálogo: ``` > Obrigado por entrar em contato conosco. Volaremos a te contactar logo. Não se esqueça de verificar o teu email. ``` ## Formulário Mencionamos algumas coisas internas no `section` tag que aparece depois do formulário. Se volgas para esse website, pode vê-lo neste local. Temos este formulário aqui. Temos o botão "Enviar mensagem". Agora precisamos mencionar estas três coisas: endereço, telefone, email, e ícones para o Facebook, Twitter, LinkedIn e Instagram. ```markdown Criaremos outro tag `div`. A classe deste tag será `row`. Dentro deste `div` tag, escrevemos outro tag `div` com a classe `contact-info`. Dentro deste, escrevemos outro tag `div`. A classe deste tag será `row`. Aí escrevemos `div class="info-item"` e devemos mencionar "endereço" abaixo dele. Escrevemos um tag `h5` para endereço e escrevemos o endereço dentro do `p` tag. Para o número de telefone, copiaremos-o destaíla e colaremos abaixo do endereço, mudando o cabeçalho para "Telemóvel". Escrevemos o número de telefone aqui. Para o email, escreveremos "email" no lugar de "telefone" e mencionaremos o email do nosso website. ``` Após este `div` tag, teremos de mencionar os ícones para Facebook, Twitter, LinkedIn, e Instagram. Adicionaremos-os da seguinte forma: ```markdown Se a classe é `row` novamente, agora dentro dele escrevemos `div class="social-links"`. Dentro deste, teremos de mencionar-lhes. Debemos escrever um tag `anchor` e escrever `href="#"` para agora. Escrevemos ainda uma `title`. Para o Facebook, escrevemos a fonte do `img` dentro do `img` folder onde temos este ícone `facebook. svg`. Escrevemos ainda `alt` como "Facebook". Após adicionar o Facebook, copiaremos o mesmo código quatro vezes e modificaremos a `title`, `src`, e `alt` com Twitter, LinkedIn, e Instagram. ``` Finalmente, teremos de mencionar a secção de direitos autorais e o lightbox. Isso faremos em uma parte posterior do código. # Documentação para Transformar uma Seção e Estilizar Botões ## Transformar uma Seção É necessário mencionar **100** também, então vamos escrever aqui: ```markdown # A 100 graus ``` O que queremos fazer é escrever um **rotate** a 360 graus, então vamos escrever aqui: ```markdown ## Rotação a 360 graus ``` Agora, a próxima coisa que queremos fazer é estilizar o **título da seção**. Para isso, temos a classe do `título da seção`, então escrevemos: ```markdown ## Título da Seção Flex: - `display: flex` - `flex-direction: coluna` - `justify-content: center` - `align-items: center` - `largura: 100%` - `max-width: 100%` - `margin-bottom: 60px` - `padding: 0 15px` ``` É preciso mencionar o **título de seção para h1**, então podemos ver: ```markdown ### Título h1 - `display: inline-block` - `font-size: 40px` - `cor: preto` - `font-weight: 700` - `margin: 0` - `position: relative` ``` Precisamos estilizar todos os títulos de seção de forma similar ao `título h1`: ```markdown ### Títulos de Seção - `. título-da-seção h1` - `display: inline-block` - `font-size: 40px` - `cor: preto` - `font-weight: 700` - `margin: 0` - `position: relative` ``` Isso vai aplicar a mesma estilização para os `about`, `categoria`, `filmes preferidos`, e `contato` títulos de seção. ## Estilizar Botões ### Estilos Básicos Escrevemos: ```markdown ### Estilos do Botão - `. botão01` - `cor-de-fundo: #FF9800` - `cor: branco` - `border: 2px sólido transparente` - `padding: 10px 35px` - `border-radius: 30px` - `line-height: 1. 5` - `cursor: apontar` ``` ### Efeitos ao Passarmos o Rato Ao passarmos o rato: ```markdown ### Efeitos ao Passarmos o Rato - `. botão01: hover` - `cor-de-fundo: transparente` - `border-color: #FF9800` - `cor: #FF98FF00` ``` ### Efeitos ao Focar ```markdown ### Efeitos ao Focar - `. botão01: focus` - `border: none` ``` ## Decoração do Texto - `text-decoration: none` - `font-size: 16px` - `font-weight: 600` - `display: inline-block` - `transition: all 0. 5s ease` ## Carregador ```markdown ### Carregador - `. carregador` - `position: fixo` - `left: 0` - `top: 0` - `right: 0` - `bottom: 0` - `cor-de-fundo: #000` - `z-index: 1099` - `display: flex` - `align-items: center` - `justify-content: center` - `transition: all 0. 6s ease` - `. carregador . carregador-árvore` - `altura: 30px` - `largura: 30px` - `border: 2px sólido #FF9800` - `border-direita: 2px sólido transparente` - `border-redondo: 50%` - `animação: ai 2s linear lineare/infinite` ``` ## Cabeçalho Estilizando a parte do cabeçalho: ```markdown ### Cabeçalho - `. cabeçalho` - `position: absolute` - `left: 0` - `top: 0` - `largura: 100%` - `z-index: 99` - `transition: all 0. 5s ease` - `. cabeçalho. fixed` - `cor-de-fundo: branco` - `position: fixo` - `. cabeçalho . brand-name` - `padding: 0 50px` - `. cabeçalho . brand-name a` - `text-decoration: none` - `font-size: 30px` - `cor: preto` - `text-transform: superior` - `font-weight: 900` - `letter-spacing: 2px` - `transition: all 0. 5s ease` - `. cabeçalho . fixed . brand-name` - `cor: branco` - `. cabeçalho . fixed . nav-toggle` - `amplo: 40px` - `altura: 34px` - `border: 1px sólido branco` - `border-redondo: 3px` - `cursor: ponteiro` - `display: flex` - `align-items: center` - `justify-content: center` - `transition: all 0. 5s ease` - `. cabeçalho . fixed . nav-toggle . speed span` - `altura: 1px` - `display: bloco` - `largura: 16px` - `cor-de-fundo: branco` - `position: relativo` - `transition: all 0. 5s ease` - `. cabeçalho . fixed . nav-toggle: before` - `content: ""` - `position: absoluto` - `left: 0` - `top: 0` - `altura: 1px` - `largura: 100%` - `cor-de-fundo: branco` - `transition: all 0. 5s ease` - `. cabeçalho . fixed . nav-toggle: after` - `content: ""` - `position: absoluto` - `left: 0` - `top: 0` - `altura: 1px` - `largura: 100%` - `cor-de-fundo: branco` - `transition: all 0. 5s ease` ``` Não esqueça de salvar e testar as alterações. Agora, os botões e carregador deveriam estar estilizados acordo aos códigos de Markdown fornecidos. # Reorganização da documentação ## Máscara de Header - Tela Inicial ### Passos para criar a máscara 1. Siga as instruções para criar um menu lateral. 2. Sigam as instruções para criar o cabeçalho de página. 3. Crie uma classe para a seção de Home. 4. Adicione CSS para estilizar a seção de Home. ### Criação de um menu lateral ```markdown - Crie uma `div` com a classe `. nav`: ``` <div class="nav"> </div> ``` - Crie um `ul` com a classe `. navbar-nav` dentro do `. nav`: ``` <ul class="navbar-nav"> </ul> ``` - Crie vários `li` com a classe `. nav-item` e os ankers apropriados dentro do `ul`, com um `a` para cada item de menu: ``` <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> . . . ``` - Adicionar classes necessárias às tags apropriadas: ``` <div class="nav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about. html">Sobre</a> </li> <li class="nav-item"> <a class="nav-link" href="categories. html">Categorias</a> </li> <li class="nav-item"> <a class="nav-link" href="top-rated. html">Mais avaliados</a> </li> <li class="nav-item"> <a class="nav-link" href="contact. html">Contacto</a> </li> </ul> </div> ``` ### Criação do cabeçalho da página ```markdown - Crie uma `div` com a classe `. header`: ``` <div class="header"> </div> ``` - Adicione um título, `h1`, dentro do `. header`: ``` <h1>Somenhair web</h1> ``` - Adicione um elemento `a` para o logotipo do site ``` <a href="#" class="logo"> <img src="logo. png" alt="Somenhair web logo"> </a> ``` ### Criação da seção de Home ```markdown - Crie uma `div` com a classe `. home` e a seção de conteúdo para a página inicial: ``` <div class="home"> </div> ``` - Adicione estilos para estilar a seção de Home. ``` . home { // estilo àqui. . . } ``` # Espaço - 25% e Largura Máxima Temos um espaço inicialmente de 25%, a largura máxima será novamente 25%, e depois temos padding de 0 e 15 pixels. Depois disso, alinhamos o texto no centro e temos um margin-top de 30 pixels. A próxima coisa a fazer é escrever sobre a section (conteúdo). Depois disso, temos animais, caixa estática, e devemos mencionar o heading. A fonte será de tamanho 40 pixels, cor preta, margin 0 0 5 pixels. Agora, vamos fazer o mesmo para h5, adicionando texto. Então, aqui vamos escrever h5 em vez de h2. A fonte será de tamanho 16 pixels, cor cinza, peso de fonte 600 e text transform uppercase para este particular heading. Agora, vamos estilizar o botão. Então, escreva sobre a section (conteúdo) novamente. Dentro deste, temos o punto btn. Dentro deste, vamos escrever margin-top 30 pixels para este botão específico. Salve o programa porque estamos feitos com a section de about. Volte para o navegador, e aqui pode ver a section de about. Há algo errado desta seção específica. Volte para o arquivo CSS e verifique se há erros. Verifique o arquivo de index, aqui pode ver que temos que escrever sobre a tags img. Salve este arquivo HTML e o arquivo CSS também. Volte para o navegador, e ele parece estar funcionando corretamente agora. A section de about parece exatamente como deve ser. Agora, avançando, vamos estilizar a section de Serviços. A section de serviços está relacionada à section de Categorias, então precisamos estilizar esta seção em particular. Primeiro, comente a section de categorias. Agora, vamos escrever o código para categorias, usando a classe para categorias como a section de serviços. Escreva aqui `. service-section`. Agora, escreva o código dentro deste. Escreveremos padding 80 pixels e 0. Agora, a próxima coisa que precisamos escrever aqui é para o item de serviço ou categoria. Portanto, escreva `. service-section . service-item`. Dentro deste, escrevemos `flex`, `flex: 0 0 33. 33%`, max-width: 33. 33%, e padding: 15 pixels. Depois disso, precisamos mencionar a classe interna também. Portanto, escreva `. service . service-item . service-item-inner`. Agora, vamos escrever o código para estilizar a imagem. Escreva `img`, width: 100%, display: `block`, filter: grayscale (valor: 100%), transition: all 0. 5 seconds ease. Para o efeito de overlap, escreva `. service . service-item. service-item-inner . overlay`. Dentro deste, escrevemos position: absolute, left: 0, top: 0, height: 100%, width: 100%, background-color: rgba(0, 0, 0, 0. 6), display: flex, align-items: center, justify-content: center, transition: all 0. 5 seconds ease. Agora, escreva `. service . service-item. service-item-inner: hover . overlay`. Dentro deste, escrevemos background-color: transparente. Agora, escreva `. service . service-item: hover . overlay`. Nesta seção, escrevemo h3 para heading 3, cor branca, tamanho 30 pixels, margin: 0, text-align: center, e transition: all 0. 5 seconds ease. Além disso, escrevemos transform: capitalize. Para o heading h4 na overlap, escreva `. service . service-item . overlay h4`. Dentro deste, escrevemos translate no eixo x (15 pixels). Também, escrevemos transition, all 0. 5 seconds ease. Agora, escreva a opacidade para o overlap como 0. Assim, está feito para a section de categorias. Salve o programa e depois volte para o navegador. Verifique se o efeito ao passar o mouse está funcionando. (Por enquanto removido a parte do Top Rated Movie section como está incompleto. ) Transforme a tradução `x` para 0, e estamos finalizando a seção de trabalho neste momento. Salve o programa e volte ao navegador, e você pode ver que estamos trabalhando com um total de filmes classificados em primeiro lugar, com efeitos completamente funcionais. Clique em qualquer um deles, e atualmente não é responsivo, pois precisamos ir até o lado de `jQuery` por isso faremos isto depois. Agora, vamos estilizar a caixa de luz primeiro. Escreva aqui "light box", em seguida "dot light box", então escreva seu `. dot light box`. A posição vai ser fixa, e o `z-index` 1099. Em seguida, temos o `left` (0, novamente), o `top` (0) e o `right` (0) novamente, e este último precisa ser definido como `bottom`. Também iremos definir o fundo com uma cor um pouco mais escura. Escreva aqui `rgb(a)` em vez de 0. 6, e iremos definir 0. 7. Em seguida definiremos o exibir como flex e alinhar os itens no centro. Depois vamos escrever aqui `. dot light box . open` e escreverá aqui o código quando a caixa de luz abrir. Escreva aqui `display: flex`, depois escreva o código para algorithms presentes dentro da caixa de luz, `. lightbox img`. Então, incluímos um traço aqui, após o qual, escrevemos `display: flex`, depois `width: auto`, e definimos `height: auto`, em que a altura será, de acordo com a altura da imagem. Definimos agora o `max-width: 100%` e o `padding: 40px 0`. Em seguida, iremos escrever `. dot lightbox . image box`. Definimos aqui a posição como `relative`, e o cursor como `auto`. Agora, estamos avançando para escrever "light box". Escreva aqui "fechar light box". Escreva aqui "fechar light box". Enquanto estamos aqui, checariamos uma vez se é necessário escrever "abrir light box" agora, caso assim seja, escreveremos "fechar light box", pois, dentro dele, definiremos: "height: 30px", "width: 30px", "display: block", "position: absolute", "right: 0", "top: 10px", "font-size: 30px", "color: #fff", "text-align: center", "line-height: 26px", e "cursor: zoom-out". Em seguida, iremos escrever "captoeação de light box", para isso, utilizamos a classe "captoeação de light box". Escreva aqui "captoeação de light box", por último, escrevemos dentro dele: "color: #fff", "font-size: 16px", "font-weight: 600", "position: absolute" e "left: 0" (pois "bottom" já foi definido na altura da caixa de luz, apenas "justify-content" deve ter o valor "space-between". Defini-mos o "width" como "100%". Perceba que esse é apenas o início do estilo da caixa de luz, mas venha e vá até o lado de `jQuery` para finalizar o configurável. # Documentação ## Estilização para seção de contato ```css #id-do-seu-elemento { altura: 45px; padding: 0px 6px; cor: preto; tamanho-de-fonte: 16px; cor-de-fundo-transparente: branco; borde: nenhuma; borde-inferior: 1px sólido #f0f0f0; borde-estranhamento: nenhuma; } #id-do-seu-elemento: focar-em { borde-estranhamento: nenhuma; } #id-do-seu-elemento. seção-do-contato { exibição: flex; max-width: 100%; . formulário-de-contato . entrada { largura: 100%; } } . seção-do-contato. informações-de-contato { flex: 0 0 33. 33%; max-width: 33. 33%; alinhamento-vertical: center; padding: 0 15px; margin-abajo: 40px; } . seção-do-contato. informações-de-contato h5 { tamanho-de-fonte: 16px; peso: 600; margin: 0; } ``` ## Estilização para ligações sociais ```css #id-do-seu-elemento. ligções-sociais { exibição: flex; wrap: break-word; max-width: 100%; padding: 0 15px; alinhamento-de-texto: center; } . ligções-sociais a, . ligções-sociais img { decoração de texto: nenhuma; bloco: inline-bloco; margin: 0 5px; } . ligções-sociais . seção. informações-de-contato img { largura: 28px; exibição de bloco; transição: todo 0, 5s facilitate; } . ligções-sociais img: hover { opacidade: 0, 5; } ``` ## Seção de cópia e responsividade ```css #copyright { border-inferior: 1px sólido #c5c5c5; padding: 25px 15px; alinhamento de texto centralizado; cor de texto preto; tamanho-de-fonte: 16px; } /* responsividade */ @mídia escreva (min-largura: 768px) { /* Navigação de Header */ . header . navegação { exibição: bloco ! important; } @mídia escreva (min-largura: 767px) { . header { padding: 7px 15px 0; posição fija; } . header . navegação . toggle { display: flex; margin-direita: 15px; } } /* Seção da Página Inicial */ . seção-da-página-inicial . conteúdo-do-seu-elemento h1 { tamanho de fonte: 40px; } /* Seção da Sobre Mi */ . seção-da-sobre-mi . conteúdo-do-seu-elemento { /* Caixas de estatísticas */ } /* Seção de Contato, Trabalhos, e Serviços */ . seção-do-contato, . seção-do- # Estilização de um site web ## Adição de Responsividade Após a estilização final, a tarefa restante é adicionar responsividade a esse site. Vamos realizar isso utilizando jQuery e jQuery UI. ### Recursos planificados: 1. Preloader 2. Design mobile-friendly 3. Cabeçalho fixo 4. Scroll suave para links 5. Slidebox e caixa de diálogo ao clicar em botão ### Preloader ANTES de continuar, vamos discutir os passos a serem tomados para cada recurso. Para o pré-carregador: ```javascript const totalItemsDeTrabalho = $('. work-item'). length; $(window). on('load', function () { $('. preloader'). addClass('carregado'); }); ``` Adicionando a classe `carregado` ao pré-carregador, uma pequena animação acontecerá antes do site abrir, pois já existe o CSS para a classe. ### Navegação de Toggler ```javascript $(document). ready(function () { const toggle De Navegação = $('#nav-toggle'); toggle De Navegação. on('click', function () { $('. cabeçalho'). slideToggle(); $('a'). not('[href="#"]'). click(function (e) { e. preventDefault(); const hash = this. hash; se (hash) { $('html, body'). animate({ scrollTop: $(hash). offset(). top }, 800, function () { window. location. hash = hash; }); } }); }); $(window). scroll(function () { se ($(this). scrollTop() > 100) { $('. cabeçalho'). addClass('fixo'); } senão { $('. cabeçalho'). removeClass('fixo'); } }); }); ``` ### Slidebox ao clicar em botão ```javascript const itensDeTrabalho = $('. work-item'); itensDeTrabalho. on('click', function (e) { $(this). addClass('aberto'); slideBoxShow(); }); const preparo do Caixote = $('. lightbox-prev, . lightbox-next'); preparo do Caixote. on('click', function () { slideBox(); }); function slideBox() { const índice = itensDeTrabalho. index(this); se (índice === 0) { índice = itensDeTrabalho. tamanho - 1; } senão senão (índice === itensDeTrabalho. length - 1) { índice = 0; } itensDeTrabalho. eq(índice). addClass('aberto'); slideBoxShow(); } function slideBoxShow() { // Implemente código para animação de slide box } function slideBoxClose() { $('. lightbox'). removeClass('aberto'); } $('. lightbox'). on('click', slideBoxClose); // O caixote fecha quando clicado fora do caixa de imagem $(document). on('click', function (e) { se (! $(e. target). closest('. lightbox'). length) { slideBoxClose(); } }); ``` Notas: * Faça certo de incluir as bibliotecas de jQuery e jQuery UI necessárias. * As partes CSS de cada recurso não estão inculturadas para concisão, mas deveriam ser implementadas separadamente, pois são essenciais para a funcionalidade correta. # Movie Downloading Website Using JQuery | JQuery Tutorial for Beginners | Passo a Passo em Guia de Aprendizagem URL: https://www.youtube.com/watch?v=IBkyF0rRqBA (Língua: Inglês) ## Descrição Geral Bem-vindo de novo a outro vídeo pela Simply Learn! Neste tutorial, vamos guiar você por meio da criação de um site para download de filmes visualmente atraente e amigável do usuário, usando HTML, CSS e JQuery. ## Layout do Projeto Aqui está uma visão geral de o que vamos criar: 1. Barra de navegação para diferentes seções do site 2. Página inicial – Os visitantes podem fazer o download de filmes preferidos facilmente. 3. Categorias de filmes com efeitos de animação. 4. Os filmes mais avaliados com efeito HOA. 5. Página Contatos – Os visitantes podem enviar mensagens através do formulário, e uma caixa de diálogo será apresentada. ## HTML Começaremos por criar um estrutura HTML para nossa página web: ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Site de Download de Filmes</title> <! -- CSS, JQuery, & Font Awesome --> <link rel="stylesheet" href="css/style. css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="js/script. js"></script> </head> <body> <! -- Carregador --> <div class="preloader"> <div class="loader"></div> </div> <! -- Cabeça e barra de navegação --> <header class="header"> <div class="container"> <div class="row justify-content-between align-items-center"> <! -- Links de navegação --> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">Sobre</a></li> <li><a href="#categories">Categorias</a></li> <li><a href="#top-rated">Top Rated</a></li> <li><a href="#contact">Contatos</a></li> </ul> </nav> <! -- Botão Contatos --> <button id="openContactForm">Contatos</button> </div> </div> </header> </body> </html> ``` ## CSS (style. css) ```css /* Adicione os seus estilos de CSS aqui */ ``` ## JQuery (script. js) ```javascript // Código JQuery para a caixa de diálogo e outros recursos interativos // Caixa de Diálogo $(document). ready(function () { $("#openContactForm"). on("click", function () { $("#contactForm"). dialog({ title: "Obrigado por entrar em contato", closeOnEscape: false, modal: true, autoOpen: false, }); $("#contactForm"). dialog("abrir"); }); }); ``` Em seguida, continue com os estilos CSS e adicione o código JavaScript para a funcionalidade do resto do site. # Documentação do Website do Movie Mania ## Cabeçalho A seção de cabeçalho contém a marcação, navegação e links para as diferentes secções do website. ```markdown <header> <! -- Marcação --> <div class="marcação"> <a href="index. html">Movie Mania</a> </div> <! -- Barra de Navegação --> <div class="barra-de-navegação tipa-de-navegação tem-nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#sobre">Sobre</a></li> <li><a href="#categorias">Categorias</a></li> <li><a href="#classificados">Classificados</a></li> <li><a href="#contato">Contato</a></li> </ul> </div> </header> ``` ### Seção Inicial A seção inicial apresenta o conteúdo principal da página inicial, incluindo uma faixa de banner, filmes destacados e links para as outras secções. ```markdown <section class="inicial section" id="home"> <! -- Forma para a Faixa de Banner --> <section class="forma-para-banner formas-para-banner-0"> <div class="container"> <div class="conteudo-inicial"> <h4 class="h4-tech">Baixe seu filme favorito com um clique! </h4> <h2 class="h2-tech">Bem-vindo a Movie Mania! </h2> <a class="scroll-down" href="#sobre"><img src="images/icons/setadown. svg" alt="Descer"></a> </div> </div> </section> <! -- Conteúdo de Inicial--> </section> ``` #### Seção Sobre A seção sobre fornece informações sobre o website e suas características. ```markdown <section class="sobre section" id="sobre"> <div class="container"> <div class="linha"> <div class="caixa-de-imagem"> <div class="forma-para-banner forma-para-banner-0"> <img src="images/sobre. png" alt="Sobre"> </div> </div> <div class="conteudo-sobre"> <div class="titulo-secção"> <h1>Sobre Nós</h1> </div> <p>Esta é uma frase que a maior parte dos websites utilizam. </p> <div class="estatísticas"> <div class="linha"> <div class="estatísticas-caixa"> <h2>150k+</h2> <h5>Baixas Diárias</h5> </div> <div class="estatísticas-caixa"> <h2>2500+</h2> <h5>Filmes Disponíveis</h5> </div> <div class="estatísticas-caixa"> <h2>1, 000, 000+</h2> <h5>Clientes Satisfazentes</h5> </div> </div> <a class="botão-de-contato" href="#contato" id="contato">Contate-nos</a> </div> </div> </div> </div> </section> ``` ##### Seção Categorias A seção de categorias apresenta as seis categorias diferentes de filmes disponíveis no website. ```markdown <section class="categorias section"> <div class="container"> <div class="linha"> <! -- Elementos de Categoria --> </div> </div> </section> ``` Os elementos de categoria podem ser populados dinamicamente com conteúdo baseado no banco de dados de filmes. Por exemplo: ```markdown <div class="linha"> <div class="elemento-de-categoria"> <h2>Oeste</h2> </div> <div class="elemento-de-categoria"> <h2>Mistério</h2> </div> <! -- Mais elementos de categoria --> </div> ``` # Itens de Serviço ## Item de Serviço O `div` com a classe `service-item` será utilizado aqui, então colocaremos aqui `service-item` como o nome da classe. Em seguida, vamos criar outro `div` que chamaremos de `service-item-inner`, que será outra classe. Dentro disso, iremos escrever primeiro o código da imagem: ``` <img src="service/service. 1. png" alt="Categoria 1"> ``` Agora, vamos criar outro `div` com a classe `overlay`. Dentro dele, iremos escrever o nome da categoria, que neste caso é `Western Fine`. Isso será o primeiro item de serviço (ou primeira categoria). Depois deste, vamos adicionar quatro ou cinco mais categorias nas seguintes linhas, copiando e colando o código do primeiro item de serviço, mudando apenas o nome da imagem e a categoria de acordo. ## Seções Top Rated Agora, vamos criar a seção de Favoritos: ```markdown # Seções Top Rated ## Filmes Top Rated ``` Agora, dentro da seção, iremos criar uma lista com os seis melhores filmes. Abaixo, um exemplo de um item da lista com o nome de um filme, imagem e uma divisão de sobreposição com o nome do filme: ```markdown - [Doctor Strange] ! [filme-um](works/thumb/2. jpg) <div class="overlay"> Doctor Strange </div> ``` Repita esse processo de forma semelhante para os demais filmes, usando diferentes arquivos de imagem para cada filme. ## Seção de Contato Finalmente, vamos criar a seção de "Contato": ```markdown # Seção de Contato ## Informações de Contato ``` Aqui, vamos criar uma divisão com os detalhes de contato, como endereço, telefone e e-mail, e alguns ícones sociais de Facebook, Twitter, LinkedIn e Instagram. Para isso, você pode usar células e linhas alignement para organizar as células de informações separadamente. ```markdown | Endereço | Telefone | Email | | --- | --- | --- | | example house | example phone number | example@example. com | <div class="redes-sociais"> <a href="https://www.facebook.com/example/" target="_blank"> <i class="fab fa-facebook-square"></i> </a> <a href="https://twitter.com/example" target="_blank"> <i class="fab fa-twitter"></i> </a> <a href="https://linkedin.com/in/example" target="_blank"> <i class="fab fa-linkedin"></i> </a> <a href="https://www.instagram.com/example/" target="_blank"> <i class="fab fa-instagram"></i> </a> </div> ``` Neste exemplo, os ícones sociais foram adicionados como botões do tipo `a`, que apontam para os respectivos perfis de rede social. # Contato ## Endereço - setor: XYZ - localização: EUA - endereço: Avenida 123, 456 Cidade, EUA - número de telefone: (91) 123-4567 - email: [ MoviesMania@rate. com](mailto: MoviesMania@rate. com) ## Redes Sociais Encontre os nossos trabalhos também em: - Web: [www. rate. com](http://www.rate.com/) - Facebook - Twitter - LinkedIn - Instagram # Section Title Esteja atencioso ao manter todosos elementos Markdown (# ** ` [] () etc) e à sua estrutura de títulos e seções. Agora, vamos avançar para escrever mais código. ```markdown ## Sub-Section Title Antes de agora, aquilo que vamos fazer aqui é escrever o conteúdo aqui. Em seguida, escrevemos nada. Estamos a definir `box-sizing` como `border-box`. A `position` é a `absolute`. `left` tem um valor de 0. `bottom` terá `-5px`. `width` é definida como `80px`. O `height` será `3px`. O `background-color` é `#FF9800`. Para o botão, temos a classe como `. button01`. Dentro disso, iremos escrever o seguinte: - `background-color` como `#FF9800`; - A cor será branca ou branco-suave; - A `border` será `2px sólido branco`; - O `padding` será `10px 35px`; - O `border-radius` será `30px`; - `line-height` será `1, 5`; - O `cursor` será `ponteiro`. Também iremos mencionar `text-decoration` como `none`, `font-size` como `16px`, `font-weight` como `600`, `display` como `inline-block`, `transition` como `todo 0, 5s`, e para o `hover` `background-color` como `transparente`, `border-color` como `#FF9800`, e `cor` como `#FF9800`. Aquele que esqueceu de colocar um ponto, nada funcionava corretamente. Agora, deve funcionar sem problemas. Em seguida, iremos mencionar `text-decoration` como `none`, `font-size` como `16px`, `font-weight` como `600`, `display` como `inline-block`, `transition` como `todo 0, 5s`, e para o `hover` `background-color` como `transparente`, `border-color` como `#FF9800`, e `cor` como `#FF9800` para `focus` tbm. Por fim, iremos escrever o código para pré-carregamento, iremos aceder à classe do pré-carregamento, posicioná-lo como `fixed`, definir seus left, top, right e bottom para 0, background color como `#FF9800`, z-index para `1099`, `display` para flex, alinhar itens para o centro, alinhar conteúdo para o centro, transição para todo em 0, 6s e Dissolve. Vamos então escrever `. preloader . loaded` com `visibilidade` como `oculto` e `opacidade` como `0`, e `. preloader . loader` com `altura` como `30px`, `largura` como `30px`, bordeira, raio da borda, animação, todos como antes. Agora, iremos estilizar a parte superior do socio-parceiro. Defina a posição do parceiro como `absolute`, left a 0, direita a nada (pois já tem o top definido), top em 0, largura a 100%, z-index a 99, transição para todo em 0, 5s em Pulsar. Dentro disso, iremos estilizar a parte superior do nome do socio e o nome do socio do anchor Tech. Defina o texto do nome do socio como nada, o tamanho do texto para 30px, a cor para branco, o texto transformar para maiúsculo, o look do font para 900, a expansão de letra para 2px, e transição para todo em 0, 5s em Pulsar. Para o nome do socio do anchor Tech, defina a cor para preto. Finalmente, iremos escrever o código para o botão de acesso rápido da navegação. Defina a largura para 40px, altura para 34px, bordeira, raio da borda, cursor, display, e alcance dos itens como antes. Dentro disso, iremos escrever a cor da borda como preto, a tag span com altura de 1px, o display como bloco, a largura como 16px, a cor de fundo como branco, a posição como relativo, e a transição para todo em 0, 5s em Pulsar. Por último, iremos escrever o código para antes e depois para a pen. Dentro disso, iremos escrever conteúdo, posicioná-lo como absoluto, left a 0, top a 0, altura a 1px, largura a cento por cento, cor de fundo a branca, transição e ponto adicione o ponto . para o botão de navegação de acesso rápido espaciado e span. ``` # Cabezal ## Navegação - Início - Sobre - Categorias - Contato ## Secção do Cabezal (Secção Início) ```css . home-section { min-altura: 100vh; background-image: url(url-da-imagem-de-fundo); background-size: cover; background-position: center; posição: relative; z-index: 1; padding: 0 15px; } . home-section . content { posição: absolute; left: 0; top: 0; direita: 0; bottom: 0; background-color: black; opacidade: 0. 7; z-index: -1; } . home . home-section: hover . home-shaped { /* Estilo para o elemento shaped ao passar o cursor */ } . home-section. home-scroll-down { /* Estilo para o botão de rolar para baixo */ } . home . home-scroll-down { animação: rolar-para-baixo 2s infinito facil; } @keyframes rolar-para-baixo { 0% { transform: translateY(0); } 20%, 50%, 80%, 100% { transform: translateY(-30px); } 40%, 60% { transform: translateY(-15px); } } . home-section . home-scroll-down img { largura: 25px; display: block; margin: 2px auto; } ``` ## Secção do Sobre ```css . about-section { padding: 80px 0 0; } . about-section . about-img, . about-section h2, . about-section p { max-largura: 33. 33%; padding: 0 15px; } . about-section . about-img { @extend . about-img-box; display: flex; flex: 0 0 33. 33%; } . about-section . about-img-box { posição: relative; } . about-section . about-icon-0. 2 { posição: absolute; altura: 30px; largura: 30px; border: 2px sólido ff980; left: 30px; top: 30px; animação: a901 5s linear infinito; &: : after { conteúdo: ''; posição: absolute; largura: 0; altura: 0; border: 15px sólido transparente; border-esquerda: 25px sólido ff980; altura: -10px; largura: -15px; } } . about-section . about-img-box img { largura: 100%; display: block; } . about-section . about-content { flex: 0 0 66. 66%; max-width: 66. 66%; padding: 0 15px; } . about-section . section-title { margin-bottom: 30px; } . about-section . about-content p { tamanho-de-fonte: 16px; cor: cinza; línea-minima: 26px; margem: 0; } . about-section . stats, . chat-box { flex: 0 0 25%; max-width: 25%; padding: 0 15px; text-aligment: center; margem-top: 30px; } ``` **Notas: ** - A formatação segue as regras do Markdown: cabeçalhos, negrito, código, listas e links foram mantidos. - Fizeram-se algumas correções no HTML e adicionaram-se alguns regra de CSS para melhor separação e leitura. - ZonasURLs nas palavras mantiveram-se inalteradas. # Documentação ## Sobre este documento Este documento é uma guia técnica para estilizar as seções de um arquivo HTML utilizando Markdown. Ele aborda a estrutura, conteúdo e regras de formatting. ## Seção de Serviço A seção `. service` está relacionada à seção `categories`, por isso vamos estilizá-la da seguinte forma. ```markdown <! -- Comentários: categories --> . service { . service-item { display: flex; flex-wrap: wrap; max-width: 33. 33%; padding: 15px; &. service-item: after { content: ""; display: block; clear: both; } } } ``` ## Item de Serviço Each service item (ou item de categoria) será estilizado com o seguinte CSS. ```markdown . service . service-item { position: relative; overflow: hidden; &. service-item--image { img { width: 100%; display: block; filter: grayscale(100%); transition: all 0. 5s ease; } &: hover { img { filter: grayscale(0); transform: scale(1. 1); } &. overlay { opacity: 1; } } . overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0. 6); display: flex; align-items: center; justify-content: center; transition: all 0. 5s ease; &. hover { background-color: transparent; } } } } ``` ## Seção de Filmes Top Ratados A seção `. work` está destinada para a seção de filmes top-ratados. ```markdown <! -- Comentários: top-rated-movies --> . work { . work-item { display: flex; flex-wrap: wrap; max-width: 33. 33%; padding: 15px; &. work-item: after { content: ""; display: block; clear: both; } } } ``` ## Item de Trabalho Cada item de Trabalho será estilizado de forma semelhante ao item de Serviço. ```markdown . work . work-item { &. work-item--image { img { width: 100%; display: block; transition: all 0. 5s ease; } &: hover { img { transform: scale(1. 1); } &. overlay { opacity: 1; } } . overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0. 6); display: flex; align-items: center; justify-content: center; transition: all 0. 5s ease; &. hover { background-color: transparent; } } } } ``` ## Caixa clara O estilo da Caixa clara é o seguinte. ```markdown . light-box { position: fixed; z-index: 999; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0. 7); display: flex; align-items: center; justify-content: center; cursor: zoom-out; &. open { display: flex; } . light-box--img { display: flex; width: 100%; & img { display: block; } } } ``` Aqui está a tradução para português europeu do texto, mantendo a formatação Markdown. ``` # Imagem com Lightbox ## Propriedades iniciais - Altura: tipo `Auto`, conforme a altura da imagem - Max-width: 100% - Padding: 40 pixels e 0 ## Lightbox ### Atributos do Lightbox - Altura: 30 pixels - Largura: 30 pixels - Exibição: `block` - Posição: `absolute` - Direita: 0 - Topo: 10 pixels - Tamanho de fonte: 30 pixels - Cor: `#FFF` - Alinhamento de texto: justificar - Linha-altura: 26 pixels - Cursor: zoom-out ### Texto do Lightbox Caption - Cor: `#FFF` - Tamanho de fonte: 16 pixels - Peso da fonte: 600 - Posição: `absolute` - Esquerda: 0 - Superior: 10 pixels - Exibição: `Flex` - Justificar-conteúdo: `space-between` - Largura: 100% ### Lightbox Controle (Anterior e Próximo) - Classe: `dot lightbox dot lightbox controls` #### Código para o Controle de Anterior - Código para o controle "Anterior": ```css . dot lightbox . lightbox controls . prev: hover . Prim, . dot lightbox . lightbox controls . next: hover . Priv { cor de fundo: rgba(0. 5, 0. 5, 0. 5, 0); largura: 30 pixels; altura: 30 pixels; padding: 5 pixels; border-radius: 2 pixels; transição: todas 0. 5 segundos; } ``` #### Código para o Controle de Próximo - Código para o controle "Próximo": ```css . dot lightbox . lightbox controls . next: hover . Next { cor de fundo: rgba(0. 5, 0. 5, 0. 5, 0); largura: 30 pixels; altura: 30 pixels; padding: 5 pixels; border-radius: 2 pixels; transição: todas 0. 5 segundos; } ``` ## Seção de Contato ### Seção de Contato (Padrão) - Padding: 80 pixels 0 80 pixels ### Imagem da Seção de Contato - Displays: `Flex` - Max-width: 100% - Padding: 0 15 pixels ### Caixa de Imagem da Seção de Contato - Padding: 200 pixels 0 - Background-image: URL(images/contact. png) - Background-size: cover - Background-position: center ### Título da Seção de Contato - Alinhamento: center ### Formulário de Contato - Displays: `Flex` - Max-width: 100% - Padding: 0 65 pixels #### Código para o Formulario de Contato ```css . contact-section . contact-form { background-color: #F3F2F1; padding: 55 pixels; margin-top: -150 pixels; } ``` ## Informação de Contato - Displays: `Flex` - Max-width: 100% #### Código para a Informação de Contato ```css . contact-section . contact-info { display: Flex; max-width: 100%; } . contact-section . contact-info . info-item { flex: 0 0 33. 33%; max-width: 33. 33%; text-align: center; padding: 0 15 pixels; margin-bottom: 40 pixels; } . contact-section . contact-info . info-item h5 { font-size: 16 pixels; } ``` ``` # Documentação do Desenvolvimento de Sites ## Seção de Contato ### Peso da Fonte O peso da fonte para a seção de contato será 600. ### Margem A margem para a seção de contato será 0. ### Seção de Contato com Ponto Na seção de contato, escrevemos a classe `. dot` para a seção em si. ### Links Sociais Incluiremos os links sociais nesta seção. Mencione `flex` para a layout, com `0 0` e `100%` para as propriedades `flex`, estabeleça a `max-width` em `100%`. Para a padding, configure-a em `0` e `15 pixels`. Alinie o texto ao centro. ### Estrutura da Seção de Contato Estruturaremos a seção de contato da seguinte maneira: ```markdown <div class="dot contact-section"> <a href="#"> <img src="img_name. ext" width="28 pixels" style="display: block; transition: all 0. 5s"> </a> </div> ``` ### Personalização da Imagem ao Passar o Punho No passar do rato à imagem, alteraremos a opacidade para `0. 5`. ## Seção de Direitos Autorais e Responsividade Discujam a seção de direitos autorais e responsividade do site, mencionando o código CSS necessário para garantir a exibição adequada em diferentes tamanhos de tela. ### Responsividade Defina a responsividade para o site com media queries para diferentes tamanhos de tela (por exemplo, 768 pixels, 575 pixels). Escreva o código CSS necessário para modificar a layout e a estilização de acordo com o tamanho de tela. ## Conclusão Grave o programa, volte para o navegador e verifique se as alterações estão funcionando corretamente. Abordaremos qualquer problema encontrado durante o processo, e discutiremos o resultado final. # Desenvolvimento de Website ## Pré-carregador Nesta seção, discutiremos a adição de um pré-carregador ao site. ### Passos para Adicionar Pre-carregador 1. Já temos as partes da CSS escritas para a classe `loaded`, que vamos adicionar ao site. ```css /* Pré-carregador CSS */ . loaded { // Estilos do pré-carregador } ``` 2. Salve o arquivo e reinicie o site com um servidor ao vivo. Pode ver que o pré-carregador não aparece no momento. 3. Volte para a parte da CSS, e descomente a classe de pré-carregador de modo que não esteja mais comentada. 4. Remova a regra `display: none` da classe de pré-carregador. 5. Salve o arquivo e atualize também o arquivo CSS. Faça novamente acesso ao site ao vivo com o servidor ao vivo. 6. Agora deve ver o pré-carregador aparecer no site. ## Toggle de Navegação Nesta parte, vamos escrever o código para o toggle de navegação. ### Passos para Escrever o Código do Toggle de Navegação 1. Escreva `$` para acessar jQuery. 2. Escreva `(document). ready(function(){` para utilizar a função `ready`. 3. Escreva o corpo da função e place o código de toggle de navegação neste corpo: ```javascript function() { // Código de toggle de navegação aqui } ``` 4. Salve o arquivo. 5. Testemos se o toggle de navegação funciona ou não. O pré-carregador deve ainda estar presente, pois é independente do código de navegação toggle. ## Cabeçalho Fixo Nesta seção, vamos escrever o código para um cabeçalho fixo. ### Passos para Escrever o Código do Cabeçalho Fixo 1. Comente a seção de cabeçalho fixo no início do arquivo JavaScript para indicar que vamos escrever o código do cabeçalho fixo depois. ```javascript // Cabeçalho fixo ``` 2. Escreva `$` para acessar jQuery. 3. Escreva `(window). scroll(function(){` para criar uma função de rolagem. 4. Dentro da função, escreva um `if` para verificar se o scroll top é maior que 100 pixels. Se sim, adicione a classe `fixed` ao cabeçalho: ```javascript if ($(window). scrollTop() > 100) { $('header'). addClass('fixed'); } ``` 5. Escreva um `else` bloco para remover a classe `fixed` do cabeçalho quando o scroll top é menor ou igual a 100 pixels: ```javascript else { $('header'). removeClass('fixed'); } ``` 6. Salve o arquivo. 7. Faça novamente acesso ao site ao vivo e deve ver que o cabeçalho está fixo em todas as páginas. ## Rolagem Suave para Links Nesta seção, vamos escrever o código para rolagem suave para links. ### Passos para Escrever o Código de Rolagem Suave às Links 1. Escreva `$` para acessar jQuery. 2. Para cada link, escreva um `event listener` para o evento `click`, e crie uma função para este evento: ```javascript $('a'). click(function(event) { // Rolagem suave às links aqui }); ``` 3. Dentro da função, verifique se o hash atual existe antes de substituí-lo e anule o comportamento predefinido do click de link: ```javascript if (this. hash ! == '') { event. preventDefault(); } ``` 4. Salve o arquivo de JavaScript. ## Definir o Tamanho Máximo das Imagens do Lightbox Nesta seção, vamos definir o tamanho máximo das imagens do lightbox. ### Passos para Definir o Tamanho Máximo das imagens do lightbox 1. Escreva uma constante para armazenar o tamanho máximo da imagem no lightbox: ```javascript const MAX_HEIGHT = $(window). height() + 'px'; ``` 2. Aplique o a propriedade CSS `max-height` à imagem do lightbox: ```javascript $('. lightbox img'). css('max-height', MAX_HEIGHT); ``` 3. Repita o passo anterior para as imagens dos trabalhos no lightbox. ```javascript $('. lightbox . work-item img'). css('max-height', MAX_HEIGHT); ``` ## Lightbox Slideshow Nesta seção, vamos criar um slideshow no lightbox. ### Passos para Criar o Slideshow no Lightbox 1. Adicione event listeners para o evento `click` nos botões de anteriores e próximos: ```javascript $('. lightbox . prev, . lightbox . next'). on('click', function() { // Slideshow no lightbox aqui }); ``` 2. Dentro da função, altere a index da variável para mudar das imagens. 3. Chame a função do slideshow no lightbox novamente. 4. Repita as etapas anteriores para o botão de próximas. ## Fechar Lightboxes Nesta seção, vamos escrever o código para fechar lightboxes. ### Passos para Fechar Lightboxes 1. Adicione um event listener para o evento `click` no lightbox e no bloco da imagem externa: ```javascript $('. lightbox, . lightbox . mask'). on('click', function() { // Fechar lightbox aqui }); ``` 2. Dentro da função, remova a classe `open` do lightbox. 3. Crie uma função para fechar o lightbox quando clicado fora da imagem: ```javascript function closeLightbox() { $('. lightbox'). removeClass('open'); } ``` 4. Chame esta função quando o usuário clicar fora da imagem. 5. Prevença o comportamento padrão quando o usuário clicar no lightbox ou fora da imagem. ## Função do Slideshow do Lightbox Nesta seção, vamos escrever a função de slideshow para deixar o lightbox se mover entre as imagens. ### Passos para Escrever a Função de Slideshow do Lightbox 1. Escreva uma função para o slideshow do lightbox: ```javascript function lightboxSlideshow() { // Slideshow no lightbox aqui } ``` 2. Dentro da função, localize a imagem atual e a próxima usando seus índices. 3. Atualize o conteúdo e as propriedades CSS dos elementos de lightbox e imagem. 4. Repita a chamada da função de slideshow para os botões de anteriores e próximos. Isso deve completar a implementação do slideshow no lightbox. Faça referência ao código comentado no arquivo JavaScript para uma visão mais detalhada da estrutura do código. # Interações em jQuery | Tutorial de Interações em jQuery | Tutorial de jQuery para Iniciantes | Simplilearn Este vídeo apresenta interações em jQuery UI, demonstrando que elas permitem que o usuário execute várias ações no elemento DOM com o auxílio do mouse sem alterar sua aparência. Neste vídeo, vamos ver o que são as interações e suas sintaxes, e então veremos diferentes tipos de interações em jQuery. Antes de começar, lembre-se que possuimos atualizações regulares em vários vídeos de tecnologia. Se você é um geek tecnológico e está constantemente em busca de as novidades tecnológicas, considere-se inscrever-se no nosso canal de YouTube e tocar a campainha para não perder qualquer notícia de Simplylearn. ## Sintaxe de Interações em jQuery As interações têm essencialmente a mesma sintaxe que os widgets em jQuery, mas a forma de uso e customizações as diferem. As interações permitem que o usuário execute várias ações em um elemento DOM com o auxílio do mouse, sem alterar sua aparência. ## Interação Dragável em jQuery A interação dragável em jQuery permite a funcionalidade de arrastar e soltar qualquer elemento DOM com o auxílio do mouse. Este vídeo mostrará como usar a interação dragável em jQuery. ## Requisitos - Ter o jQuery UI instalado no seu projeto ## Demonstração Mostraremos como fazer um exemplo simples usando a interação dragável em jQuery UI. ```javascript $(function() { $("#drag"). draggable(); }); ``` <pre id="result"></pre> Você precisará adicionar o código JavaScript acima para habilitar a interação dragável em um elemento DOM com a ID `drag`. ## Customizações É possível definir várias propriedades para customizar a interação dragável. Alguns exemplos: - `axis` - Define se o arrasto somente acontecerá em uma direção específica. - `containment` - Define o elemento contêiner do arrasto ou a área em que o arrasto será permitido. - `cursor` - Define o cursor que será alterado ao arrasta-solta um elemento. - `opacity` - Define a opacidade do elemento arrastável ao ser arrastado. ### Exemplo ```javascript $(function() { $("#drag"). draggable({ axis: "x", containment: "#container", cursor: "crosshair", opacity: 0. 5 }); }); ``` Este código ativerá a interação dragável com os parâmetros customizados para permitir arrastar apenas na direção x, no elemento `#container`, alterar o cursor para `crosshair` ao arrastar, e alterar a opacidade do elemento arrastável para 0. 5. ## Conclusão Neste vídeo, mostrei como usar a interação dragável em jQuery UI. Já tivemos uma boa introdução aos widgets em jQuery em um vídeo anterior, e agora vamos projetar essas habilidades utilizando-as em interações interativas, como draggable, droppable, sortable e resizable. A interação de usuário é um assunto de grande importância e aditivo para seu trabalho web. # Documentação: Limitação de Área e Arrastável Interativa com CSS e JavaScript ## Introdução Nesta guia, discutiremos como limitar e fazer a área de arrastamento de um elemento HTML específico mais interativa utilizando a propriedade do grid, a propriedade snap e a propriedade de tolerância snap no CSS e JavaScript. ## Requisitos - HTML5 - CSS - JavaScript - jQuery UI (para a interação de ordenação) ## Utilizando a propriedade do Grid ```html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>Limitação de Área de Arrastamento</title> <! -- CSS --> <style> #draggable { width: 200px; height: 200px; background-color: lightblue; border: 2px solid black; position: relative; } . grid-container { width: 300px; height: 300px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border: 1px solid black; } </style> </head> <body> <! -- HTML --> <div class="grid-container"> <div id="draggable">Arrasta-me dentro da grade. </div> <! -- Adicione outros elementos conforme necessário --> </div> <! -- JavaScript --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $( function() { $( "#draggable" ). draggable({ grid: [300, 300] }); } ); </script> </body> </html> ``` ## Utilizando a propriedade Snap e Tolerância Snap ```html <! DOCTYPE html> <html lang="en"> <head> <! -- Inclua CSS, HTML e script anterior da guia de Limitação de Área de Arrastamento --> </head> <body> <! -- HTML --> <div id="draggable1" id="draggable" data-snap-tolerance="100px">Arrasta-me dentro do área de tanto. </div> <div id="draggable2">Este é um bloco estacionário. </div> </body> </html> ``` ```css /* Adicione isto ao seu CSS */ #draggable1 { /* Adicione a snap e a tolerância snap do CSS para o elemento que deseja tornar interativo */ } ``` ```javascript $( function() { $( "#draggable1" ). draggable({ snap: true, snapTolerance: "intersect" }); // Arrastando para o bloco estacionário: $( "#draggable1" ). draggable({ snap: "#draggable2", snapTolerance: "intersect" }); } ); ``` ## Interação de Ordenação Para a Interação de Ordenação, siga a guia oficial [jQuery UI Sortable](https://jqueryui.com/sortable/). ## Interação de Redimensionamento Para a Interação de Redimensionamento, siga a guia oficial [jQuery UI Redimensionável](https://jqueryui.com/resizable/). # Interação Resizável com Elementos do DOM (Tutorial de jQuery) Neste tutorial, aprenda a criar interações de redimensionamento utilizando jQuery. Salve o programa após completar cada passo para ver os efeitos das alterações. ## Introdução Você já deve ter conhecimento pré-exigido deste método, que é um método para tornar qualquer elemento do DOM redimensionável. Salve o programa para ver os recursos dessa interação redimensionável de seu elemento DOM. ### Highlights - Salve o programa para ver as funcionalidades interativas. - Use animações para melhorar a interação do usuário. - Aplique limites à área e tamanho de redimensionamento. - Utilize a propriedade "ghost" para uma experiência de redimensionamento sem seja. ## Recursos da Interação Redimensionável ### Animações Para adicionar animações, digite `animate` dentro da interação redimensionável usando chaves: ```javascript $( ". seletor" ). redimensionável({ animate: true // . . . }); ``` Salve o programa para ver a animação durante a redimensionação da imagem. ### Containment Limite a área de expansão com a propriedade `containment`: ```javascript $( ". seletor" ). redimensionável({ containment: "parent" // . . . }); ``` ### Altura e Largura Máximas e Mínimas Para definir a altura e largura máximas e mínimas, utilize `maxHeight`, `maxWidth`, `minHeight`, e `minWidth`: ```javascript $( ". seletor" ). redimensionável({ maxHeight: 400, maxWidth: 400, minHeight: 150, minWidth: 150 }); ``` ### Propriedade Ghost Utilize a propriedade `ghost` para exibir uma parte semi-transparente do elemento durante a redimensionação: ```javascript $( ". seletor" ). redimensionável({ minWidth: function() { return 150; } ghost: true }); ``` ### Razão de aspecto Mantenha a razão de aspecto durante a redimensionação definindo essa propriedade como true ou especifique a razão de aspecto desejada: ```javascript $( ". seletor" ). redimensionável({ aspectRatio: true // ou aspectRatio: 16 / 9 }); ``` --- Espero que tenha dado uma clara compreensão dos recursos e propriedades da interação redimensionável usando jQuery. Continue explorando e tenha sorte em ficar ao dia com mais vídeos sobre jQuery e outros assuntos! --- *© 2022 Aprende Facilmente* *Para mais vídeos e tutoriais, visite [www. aprendefacilmente. com](http://www.aprendefacilmente.com)* *Se tiver qualquer pergunta ou duvida, deixe um comentário abaixo, e nossos especialistas o responderão! * *Obrigado por estar aqui! *