Forem: Telles (@UnicornCoder)

CSSOM — Modelo de Objeto CSS

Telles (@UnicornCoder) — Thu, 14 Dec 2023 16:52:03 +0000

As Folhas de Estilo em Cascata (CSS) desempenham um papel fundamental no desenvolvimento web, controlando a apresentação e o layout das páginas da web. Enquanto muitos desenvolvedores estão familiarizados com o Modelo de Objeto de Documento (DOM) para manipular documentos HTML e XML, poucos estão familiarizados com o Modelo de Objeto CSS (CSSOM). Neste artigo, exploraremos o CSSOM em detalhes, abordando sua importância, estrutura e aplicações práticas no desenvolvimento web.

Esse artigo foi criado para abordagem do tema desse vídeo:

O que é o Modelo de Objeto CSS (CSSOM)?

O Modelo de Objeto CSS, frequentemente abreviado como CSSOM, é um componente fundamental no desenvolvimento web que lida com a representação e manipulação de estilos CSS em um documento web. Ele atua como uma ponte entre os estilos CSS definidos em suas folhas de estilo e como esses estilos são aplicados aos elementos HTML em uma página da web.

Em termos simples, o CSSOM fornece uma maneira estruturada de acessar, modificar e manipular propriedades e regras CSS aplicadas aos elementos HTML. Assim como o DOM permite que você interaja com a estrutura e o conteúdo de um documento HTML, o CSSOM permite que você trabalhe com os estilos CSS aplicados a esses elementos.

“Todo código contido nesse artigo está em JavaScript.”

A Importância do CSSOM

O CSSOM desempenha um papel crucial no desenvolvimento web por várias razões:

1. Separação de conteúdo e apresentação
Uma das diretrizes fundamentais do desenvolvimento web é a separação de conteúdo e apresentação. Isso significa que o HTML deve conter principalmente informações e estrutura, enquanto o CSS é responsável pela aparência e estilo. O CSSOM torna possível essa separação, permitindo que você altere a aparência de uma página sem afetar seu conteúdo.

Aqui estão algumas razões pelas quais isso é crucial:

Manutenção mais fácil
Ao manter o conteúdo e a apresentação separados, torna-se mais fácil fazer alterações em um aspecto sem afetar o outro. Isso é particularmente importante em projetos web de grande escala, onde várias pessoas podem estar trabalhando em diferentes partes do projeto. A manutenção se torna mais eficiente quando você pode fazer alterações nos estilos sem tocar no conteúdo.
Acessibilidade
A separação de conteúdo e apresentação também é fundamental para garantir que seu site seja acessível a todos os usuários, incluindo aqueles que usam leitores de tela. O conteúdo bem estruturado (semântica adequada) garante que a informação seja clara, enquanto os estilos cuidadosamente aplicados garantem que a apresentação seja agradável, mas não prejudique a compreensão.
Flexibilidade
Ao separar conteúdo e apresentação, você ganha flexibilidade para adaptar seu site a diferentes dispositivos e tamanhos de tela. Isso é essencial em um mundo onde os usuários acessam sites de uma variedade de dispositivos, desde smartphones até telas grandes de desktop. Usando técnicas responsivas de CSS, você pode ajustar facilmente a apresentação de acordo com as necessidades do dispositivo.
Desenvolvimento mais rápido
Separar conteúdo e apresentação também pode acelerar o desenvolvimento. Os desenvolvedores podem se concentrar em criar a estrutura semântica do documento HTML, enquanto os designers podem trabalhar nos estilos CSS sem interferir na estrutura. Isso permite que ambas as equipes trabalhem simultaneamente.
Acesso e manipulação de estilos
O CSSOM oferece uma interface programática para acessar e manipular estilos CSS. Isso é essencial para criar páginas da web dinâmicas e interativas. Você pode modificar estilos em resposta a eventos do usuário, criar temas alternativos para sua página ou até mesmo criar ferramentas de personalização de estilo.
Renderização eficiente
O navegador utiliza o CSSOM para calcular como os elementos da página devem ser exibidos. Ao otimizar o desempenho do CSSOM, você pode melhorar a velocidade de carregamento e renderização de suas páginas da web.

2. Acesso e manipulação de estilos
O CSSOM oferece uma interface programática para acessar e manipular estilos CSS. Isso é essencial para criar páginas da web dinâmicas e interativas. Você pode modificar estilos em resposta a eventos do usuário, criar temas alternativos para sua página ou até mesmo criar ferramentas de personalização de estilo.

Aqui estão algumas técnicas comuns:

- Acesso por meio do objeto style de um elemento

Cada elemento HTML possui uma propriedade style que representa os estilos aplicados diretamente a esse elemento. Você pode acessar e modificar esses estilos da seguinte forma:

const elemento = document.getElementById('meu-elemento'); 
const estilo = elemento.style;

Isso permite que você acesse e modifique propriedades de estilo específicas diretamente:

elemento.style.backgroundColor = 'azul'; elemento.style.fontSize = '16px';

- Acesso a estilos computados

Os estilos computados são os estilos finais aplicados a um elemento após a resolução de todas as regras CSS que se aplicam a ele. Você pode acessar os estilos computados por meio do window.getComputedStyle:

const elemento = document.getElementById('meu-elemento'); 
const estilosComputados = window.getComputedStyle(elemento); 

// Acessando um estilo específico 
const corDeFundo = estilosComputados.backgroundColor; 
const tamanhoDaFonte = estilosComputados.fontSize;

- Acesso a regras CSS externas

Se você deseja acessar regras CSS que não são diretamente aplicadas a um elemento específico, pode fazê-lo por meio das folhas de estilo (stylesheets) vinculadas à página. O CSSOM permite que você percorra as regras em uma folha de estilo e recupere informações sobre elas:

// Obtendo a primeira folha de estilo vinculada à página 
const folhaDeEstilo = document.styleSheets[0]; 

// Iterando pelas regras na folha de estilo 
for (const regra of folhaDeEstilo.cssRules) { 
  console.log(regra.cssText); // Exibe o texto da regra CSS 
}

Manipulação de Estilos com o CSSOM

Além do acesso aos estilos, o CSSOM também permite a manipulação dos estilos CSS. Isso é útil para criar interatividade em uma página da web. Aqui estão algumas maneiras de manipular estilos:

- Modificação direta de estilos
Você pode modificar estilos diretamente usando o objeto style de um elemento, como mencionado anteriormente:

 elemento.style.backgroundColor = 'azul'; elemento.style.fontSize = '16px';

- Adição de classes CSS
Outra técnica comum é adicionar ou remover classes CSS de elementos HTML. Isso é especialmente útil quando você deseja aplicar estilos predefinidos a elementos em resposta a eventos do usuário:

elemento.classList.add('destaque'); 
elemento.classList.remove('destaque');

- Criação e modificação de regras CSS dinamicamente
Você pode criar e modificar regras CSS dinamicamente e adicioná-las ao CSSOM usando JavaScript. Isso permite que você adicione novos estilos à página sem recarregá-la:

const novaRegra = document.styleSheets[0].insertRule('h1 { color: verde; }', 0);

- Remoção de regras CSS
Também é possível remover regras CSS existentes do CSSOM:

document.styleSheets[0].deleteRule(0);

3. Renderização eficiente

O navegador utiliza o CSSOM para calcular como os elementos da página devem ser exibidos. Ao otimizar o desempenho do CSSOM, você pode melhorar a velocidade de carregamento e renderização de suas páginas da web.

Estrutura do CSSOM

O CSSOM é uma representação em árvore dos estilos CSS aplicados a uma página da web. Ele inclui os seguintes componentes principais:

Regras CSS
As regras CSS são o cerne do CSSOM. Elas contêm informações sobre como os estilos devem ser aplicados aos elementos HTML. As regras são divididas em seletores (que indicam a quais elementos se aplicam) e declarações (que definem as propriedades e valores a serem aplicados).
Estilos Computados
Os estilos computados representam os estilos finais aplicados a um elemento HTML após a resolução de todas as regras CSS que se aplicam a ele. Isso leva em consideração herança, especificidade e outros aspectos das regras CSS.
Elementos
Os elementos representam os elementos HTML em uma página da web. Cada elemento tem uma árvore de estilos associada a ele que contém os estilos aplicados.
Nodes(Nós)
Os nós são objetos intermediários que conectam elementos a regras CSS. Eles representam a interseção entre a estrutura do DOM e a estrutura do CSSOM.

Manipulação do CSSOM

Manipular o CSSOM envolve a utilização de JavaScript para acessar e modificar estilos CSS. Aqui estão alguns exemplos de tarefas que você pode realizar com o CSSOM:

Acesso a estilos Você pode acessar os estilos aplicados a um elemento usando o objeto style do elemento DOM. Por exemplo:

const elemento = document.getElementById('meu-elemento'); 
const estilo = elemento.style;

Modificação de estilos Você pode modificar estilos diretamente no CSSOM. Por exemplo, para alterar a cor de fundo de um elemento, você pode fazer o seguinte:

elemento.style.backgroundColor = 'azul';

Criação dinâmica de regras CSS Você pode criar regras CSS dinamicamente e adicioná-las ao CSSOM usando JavaScript. Isso permite que você adicione novos estilos à página sem recarregá-la.

const novaRegra = document.styleSheets[0].insertRule('h1 { color: verde; }', 0);

Remoção de regras CSS Você também pode remover regras CSS existentes do CSSOM:

document.styleSheets[0].deleteRule(0);

Conclusão

O Modelo de Objeto CSS (CSSOM) é uma parte essencial do desenvolvimento web moderno. Ele permite a manipulação eficiente dos estilos CSS em uma página da web, possibilitando a criação de páginas dinâmicas e altamente personalizáveis. Compreender o CSSOM e suas funcionalidades é fundamental para qualquer desenvolvedor web que deseje criar experiências de usuário envolventes e visualmente atraentes na web. Portanto, aproveite ao máximo essa poderosa ferramenta em seus projetos de desenvolvimento web.

Fontes de Referência

Para aprofundar o entendimento da importância da separação de conteúdo e apresentação e suas implicações no desenvolvimento web, você pode consultar as seguintes fontes:

W3C CSS Basic Box Model: Este documento da W3C explica como os elementos HTML são formatados usando o CSS e destaca a separação de conteúdo e apresentação. W3C CSS Basic Box Model
MDN Web Docs — Separation of structure and presentation: A Mozilla Developer Network (MDN) oferece informações detalhadas sobre o princípio da separação de estrutura e apresentação, juntamente com exemplos práticos. MDN Separation of structure and presentation
“CSS Zen Garden”: O projeto CSS Zen Garden demonstra vividamente como a separação de conteúdo e apresentação permite que diferentes estilos sejam aplicados ao mesmo conteúdo HTML. CSS Zen Garden

Criação de Design Systems - Frontend

Telles (@UnicornCoder) — Fri, 17 Nov 2023 16:58:42 +0000

Um design system no contexto do frontend é uma abordagem estruturada e sistemática para projetar e desenvolver interfaces de usuário consistentes em um aplicativo ou site. Ele é composto por um conjunto de diretrizes, padrões, componentes e recursos reutilizáveis, destinados a garantir consistência visual, funcional e de interação em toda a aplicação.

O video abaixo mostra como podemos criar um DS para React usando Rollup

Origem do Design System

Embora a ideia de um design system exista há décadas, ela ganhou popularidade nos últimos anos devido à necessidade de projetos complexos de frontend que exigem escalabilidade e consistência. Grandes empresas, como Google, Airbnb e Salesforce, começaram a desenvolver suas próprias soluções internas para lidar com a complexidade e a falta de consistência em seus projetos. Essas soluções internas evoluíram para o que hoje conhecemos como design systems.

Benefícios e Problemas Resolvidos pelo Design System:

Consistência: O design system estabelece padrões de design, como cores, tipografia, espaçamento e componentes, que garantem uma aparência e comportamento consistentes em todo o aplicativo ou site. Isso ajuda a criar uma experiência de usuário unificada e reconhecível.
Eficiência: Com um design system, os desenvolvedores podem reutilizar componentes e estilos pré-definidos, o que acelera o processo de desenvolvimento e reduz a duplicação de esforços. Além disso, as equipes podem criar protótipos mais rapidamente e tomar decisões de design com base em elementos já existentes.
Colaboração: O design system facilita a colaboração entre designers, desenvolvedores e outros membros da equipe. Todos trabalham a partir das mesmas diretrizes e têm acesso aos mesmos componentes, tornando mais fácil compartilhar conhecimento e garantir que todos estejam na mesma página.
Escalabilidade: À medida que um projeto cresce, o design system ajuda a gerenciar a complexidade. Novos recursos e páginas podem ser desenvolvidos rapidamente, mantendo a consistência com o restante do aplicativo.

Empresas que Usam Design Systems:

Várias empresas renomadas adotaram design systems para melhorar sua eficiência e consistência. Alguns exemplos incluem:

Google: O Material Design é o design system do Google, usado em vários de seus produtos, como Gmail, YouTube e Google Drive.
Airbnb: O design system da Airbnb é chamado de "Design Language System" (DLS). Ele fornece diretrizes detalhadas para design e desenvolvimento e é usado em seus aplicativos e site.
Atlassian: A empresa por trás de ferramentas como Jira e Confluence possui o Atlassian Design System, que fornece recursos compartilhados e orientações para criar uma experiência consistente em seus produtos.

Impactos do Design System nas Áreas Envolvidas:

Design: O design system permite que os designers trabalhem em um contexto consistente, economizando tempo e garantindo que suas criações se alinhem com a identidade visual da marca. Além disso, o design system promove a reutilização de componentes, o que facilita a criação de novas telas e fluxos.
Desenvolvimento: O design system agiliza o desenvolvimento, fornecendo componentes prontos para uso e estilos pré-definidos, isso reduz a necessidade de escrever código do zero e ajuda os desenvolvedores a manter a consistência em todo o projeto. Além disso, as diretrizes e documentação presentes no design system facilitam o entendimento dos requisitos de design e comportamento dos componentes, acelerando o desenvolvimento.
Testes: Com um design system bem estabelecido, os testes podem ser mais eficientes e abrangentes. Como os componentes são padronizados e reutilizáveis, é possível criar testes automatizados que verifiquem sua funcionalidade em diferentes contextos, garantindo a estabilidade do sistema.
Documentação: O design system também serve como uma fonte centralizada de documentação para o projeto. Ele fornece diretrizes claras sobre o uso de componentes, padrões de design e interações, o que ajuda a equipe a entender e seguir as melhores práticas. Isso é especialmente útil para novos membros da equipe ou aqueles que precisam se atualizar sobre o projeto.
Consistência da Marca: O design system ajuda a manter a consistência visual da marca em todos os pontos de contato do usuário. Isso inclui não apenas o aplicativo ou site principal, mas também materiais de marketing, comunicações e outras interfaces relacionadas. A padronização dos elementos de design fortalece a identidade da marca e aumenta o reconhecimento e a confiança do usuário.

Como podemos criar um design system?

Criar um design system envolve um processo cuidadoso e iterativo. Aqui estão algumas etapas essenciais para a criação de um design system:

Pesquisa e Análise: Comece pesquisando e analisando os componentes e padrões existentes em seu projeto. Identifique elementos comuns e áreas de inconsistência. Considere as necessidades dos usuários, as melhores práticas de design e as diretrizes de marca.
Definição dos Princípios: Estabeleça os princípios de design que guiarão seu design system. Isso pode incluir diretrizes de estilo, princípios de interação e orientações de acessibilidade. Defina a identidade visual da marca e como ela deve ser aplicada nos componentes.
Criação dos Componentes: Comece a projetar e desenvolver os componentes do design system. Isso inclui botões, campos de formulário, menus, tipografia, ícones, entre outros. Certifique-se de que eles sejam flexíveis, reutilizáveis e modulares.
Documentação: Crie documentação detalhada para o design system. Isso pode incluir especificações técnicas, exemplos de código, diretrizes de design e interação, além de tutoriais sobre como usar os componentes. Uma documentação clara e abrangente é fundamental para garantir a adoção e a consistência do design system.
Testes e Iteração: Realize testes abrangentes dos componentes do design system. Isso inclui testes de usabilidade, testes de acessibilidade e testes de integração com diferentes plataformas e navegadores. Colete feedback dos usuários e da equipe para iterar e melhorar o design system continuamente.
Implantação e Manutenção: Implemente o design system em seus projetos e mantenha-o atualizado. Certifique-se de que os desenvolvedores estejam utilizando os componentes e seguindo as diretrizes estabelecidas. Realize auditorias periódicas para identificar e corrigir possíveis problemas ou inconsistências.

Quanto às ferramentas para obter métricas, você pode considerar o uso de ferramentas de análise de usuário, como o Google Analytics, para coletar dados sobre o comportamento dos usuários em seu aplicativo ou site. Você pode medir métricas como taxa de conversão, tempo gasto em página, taxas de rejeição, entre outros, para avaliar o desempenho do design system e identificar áreas que precisam ser aprimoradas.

Para realizar testes, você pode adotar abordagens como testes de usabilidade, em que os usuários interagem com seu design system e fornecem feedback direto. Você também pode realizar testes de acessibilidade, garantindo que seu design system atenda a padrões de acessibilidade reconhecidos.

Quanto ao trabalho em equipe, é importante envolver designers, desenvolvedores, gerentes de projeto e outras partes interessadas desde o início. Promova uma colaboração estreita e contínua, realizando reuniões regulares, compartilhando documentos e fornecendo feedback construtivo. Uma abordagem ágil, com iterações rápidas e ciclos de feedback, pode ajudar a garantir uma entrega eficiente e contínua do design system.

Podemos ter um DS para multiplos frameworks ou cada um ter que ser desenvolvido no seu ecossistema?

Quanto à compatibilidade com diferentes frameworks, é possível criar um design system que seja independente de framework, utilizando tecnologias como HTML, CSS e JavaScript puros. Isso permite que o design system seja utilizado em diferentes ecossistemas de desenvolvimento, como React, Angular, Vue.js, entre outros.

No entanto, também é possível adaptar o design system para funcionar com um framework específico. Nesse caso, é necessário criar componentes e estilos que estejam alinhados com as convenções e funcionalidades do framework em questão. Isso pode exigir a criação de versões específicas do design system para cada framework, adaptando o código e as diretrizes conforme necessário.

A escolha entre um design system independente de framework ou adaptado a um framework específico dependerá das necessidades e do contexto do projeto. Se você estiver trabalhando em um ambiente com vários frameworks e deseja ter um único sistema consistente, um design system independente de framework pode ser mais adequado. Por outro lado, se você estiver trabalhando em um projeto específico com um framework predominante, pode ser benéfico adaptar o design system para esse framework, facilitando a integração e o desenvolvimento.

Ao criar um design system para múltiplos frameworks, considere as seguintes práticas:

Separação de preocupações: Mantenha a lógica de negócios separada dos componentes de interface do usuário. Isso permite que você reutilize os mesmos componentes de interface do usuário em diferentes frameworks, adaptando apenas a camada de integração específica de cada framework.
Abstração e componentização: Crie componentes reutilizáveis e independentes de framework. Isso significa que os componentes devem ser implementados de forma que possam ser facilmente adaptados para funcionar em diferentes frameworks, seguindo as convenções de cada um.
Estruturação modular: Organize seu design system em módulos que podem ser consumidos de forma independente. Isso permite que os desenvolvedores escolham os módulos necessários para seus projetos específicos, facilitando a integração e evitando a inclusão de código desnecessário.
Documentação clara: Forneça documentação detalhada sobre como integrar e usar o design system em diferentes frameworks. Isso inclui exemplos de código, guias de integração e diretrizes específicas para cada framework suportado.
Testes de integração: Realize testes de integração para garantir que o design system funcione corretamente nos diferentes frameworks. Isso ajuda a identificar problemas de compatibilidade e a garantir que os componentes se comportem conforme o esperado em cada ambiente.
Comunicação e colaboração: Mantenha uma comunicação aberta com os desenvolvedores de cada framework para entender suas necessidades e desafios específicos. Isso ajuda a criar soluções adaptadas e a garantir a aceitação e adoção do design system por toda a equipe.

Lembre-se de que a criação de um design system para múltiplos frameworks pode exigir mais esforço e recursos em comparação com um design system independente de framework. Avalie cuidadosamente as necessidades do projeto, os recursos disponíveis e os benefícios potenciais antes de decidir sobre a abordagem adequada.

O que podemos usar para criar um Design System?

Parcel: O Parcel é um bundler de código rápido, sem configuração e baseado em zero-config. Ele pode ser usado para criar o build do design system, agrupando os arquivos de código, estilos e assets em um pacote otimizado para uso em produção.
Gulp: O Gulp é uma ferramenta de automação de tarefas em JavaScript. Ele permite criar fluxos de trabalho personalizados para tarefas como compilação de código, otimização de imagens, pré-processamento de estilos, entre outros. O Gulp pode ser usado para automatizar o processo de construção e implantação do design system.
Babel: O Babel é uma ferramenta de transpilação de código JavaScript. Ele permite escrever código usando recursos modernos do JavaScript e transformá-lo em uma versão compatível com navegadores mais antigos. O Babel é útil ao criar um design system que precisa suportar uma ampla gama de navegadores e ambientes de execução.
ESLint: O ESLint é uma ferramenta de linting de código JavaScript. Ele ajuda a identificar problemas de qualidade de código, erros e práticas inseguras. Configurar e usar o ESLint em seu projeto de design system pode ajudar a garantir um código consistente e de alta qualidade.
Stylelint: O Stylelint é uma ferramenta de linting para CSS. Ele verifica os estilos do CSS em busca de erros, problemas de formatação e práticas inadequadas. Utilizar o Stylelint pode ajudar a manter um código CSS consistente e de alta qualidade em seu design system.

Mas como eu faço building do meu DS?

Vamos explorar um pouco mais sobre as ferramentas de building (construção) que podem ser usadas no contexto de um design system:

Rollup: O Rollup é uma ferramenta de bundling (agrupamento) de módulos JavaScript. Ele é especialmente adequado para criar bibliotecas e pacotes de código reutilizáveis. O Rollup é conhecido por sua eficiência e capacidade de produzir bundles otimizados e de tamanho reduzido. Ele suporta formatos de módulo como ES modules, CommonJS e UMD (Universal Module Definition).
Webpack: O Webpack é uma poderosa ferramenta de bundling que permite criar um pipeline de build flexível e configurável. Ele é amplamente utilizado no desenvolvimento de aplicações front-end e é adequado para projetos complexos que exigem carregamento assíncrono, divisão de código, otimização de recursos e muito mais. O Webpack suporta uma ampla variedade de formatos de módulo e possui uma rica coleção de plugins e loaders para estender suas funcionalidades.
Parcel: O Parcel é um bundler de código zero-config que visa simplificar o processo de construção. Ele é fácil de configurar e é capaz de lidar automaticamente com muitas tarefas de construção comuns, como agrupamento de arquivos, transpilação, otimização de imagens e carregamento de recursos. O Parcel é uma ótima opção para projetos mais simples ou para aqueles que exigem uma configuração mínima.
Gulp: O Gulp é uma ferramenta de automação de tarefas que permite criar fluxos de trabalho personalizados para a construção do seu design system. Ele é baseado em tarefas (tasks) e pode ser usado para executar uma variedade de tarefas de compilação, otimização, limpeza e implantação. O Gulp oferece flexibilidade para criar um processo de build adaptado às necessidades específicas do seu design system.
Grunt: O Grunt é outra ferramenta popular de automação de tarefas, semelhante ao Gulp. Ele também permite criar fluxos de trabalho personalizados para construir, testar e implantar o seu design system. O Grunt possui uma grande quantidade de plugins disponíveis que facilitam a configuração e a execução de várias tarefas de construção.
npm scripts: Além das ferramentas de build dedicadas, muitas equipes optam por utilizar os scripts definidos no arquivo package.json do seu projeto como uma forma de executar tarefas de construção. O npm, por exemplo, permite que você defina scripts personalizados que podem ser executados usando o comando npm run. Esses scripts podem usar outras ferramentas de construção, como o Rollup ou o Webpack, para realizar as tarefas necessárias.

Cada uma dessas ferramentas de construção tem suas próprias vantagens e abordagens, e a escolha depende do contexto e das necessidades específicas do seu design system. É importante considerar os recursos, a configuração, a flexibilidade e a familiaridade da equipe ao escolher uma ferramenta de construção adequada para o seu projeto.

Em resumo, o uso de um design system no frontend oferece uma abordagem sistemática para alcançar consistência, eficiência e escalabilidade em projetos de interface do usuário. Ele melhora a colaboração entre as equipes, acelera o desenvolvimento, simplifica os testes e promove uma experiência do usuário coesa. Ao adotar um design system, as empresas podem obter benefícios tangíveis em termos de qualidade, produtividade e satisfação do usuário.

Switch...Case

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:56:18 +0000

Veja no Youtube:

Objetivo

Aprender a usar um switch...case
Entender o que faz cada parte do código

Bora lá...

Uma outra forma de trabalhar com condicionais é usando switch...case e aqui vamos ver o esqueleto dele e suas características básicas:

const local = "cinema";
switch (local) {
    case "cinema":
        console.log('Entrou no cinema!');
        break;
    case "quarto":
    case "sala":
        console.log('Entrou em casa!'); 
        break;
    default:
        console.log('qualquer valor diferente dos cases acima');
        break;
}

// Output: Entrou no cinema!

Temos o:

switch responsável por ouvir a variável que vamos trabalhar
case sempre irá verificar a igualdade do valor passado no switch com o que está no case
breaksempre será usado para parar a execução do case, caso não exista um breakseu switch vai mandar para o próximo case e executará os dois causando um erro
default qualquer valor diferente dos cases acima

Onde temos nosso console log podemos passar uma função ou qualquer outro validador que você precise

Note que temos dois cases juntos e isso significa que se cair em qualquer um deles a resposta será a mesma.

Conclusão

Temos uma alternativa ao if...else para trabalhar com condicionais de maneira simples também.

Funções

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:12:23 +0000

Veja no Youtube:

Objetivos

Aprender a usar uma função
Entender o objetivo de uma função
Outra forma de criar uma mesma função

Bora lá...

Quando falamos em funções no JavaScript estamos falando em criar um escopo para executar um determinado código e podemos ter funções de que retornam algum valor final e as que não retornam e nesse artigo vamos aprender um pouco sobre elas.

function calculo(numero) {
  return numero * numero;
}

calculo(argumento)

Nas nossas funções podemos ter parâmetros para serem passados pelo desenvolvedor esses parâmetros são passados dentro dos parênteses, no exemplo acima temos um único parâmetros chamado numero, mas não se preocupe porque podemos passar vários parâmetros se precisarmos e esses parâmetros são usados apenas dentro do escopo da função.

Para essa função ser executada chamamos ela como calculo(argumento) e onde é o argumento dela passamos o parametro que ela espera.

Sempre chamamos uma função usando o nome que criamos e seguido por parênteses para que o Javascript entenda que se trata de uma função.

Function com retorno / `return`

Uma função com retorno tem no final da sua execução um return e em seguida é passado o valor que var ser retornado, podendo ser qualquer tipo de dado, vamos ver e analisar um exemplo:

function calculo(numero) {
  return numero * numero;
}

calculo(2)

// Output: 4

Note que para que a função seja executada precisamos chamar ela (o que as vezes chamamos de invocar a função) usando o parênteses após seu nome para que o JavaScript entenda que é uma função e dentro do parênteses passar o valor que vamos usar dentro dela, no caso desse exemplo um number.

Mas e se eu passar um valor não esperado ou mais de um argumento para o parâmetro?

function calculo(numero) {
  return numero * numero;
}

calculo("Diego")

//Output: NaN

No exemplo de cima pedimos para que ela realize um calculo usando uma string e o resultado é NaN (Not a Number), como o return espera um numeral para realizar um calculo ela retorna NaN.

Function sem retorno / `void`

Como vimos a cima podemos ter um returnna nossa função, mas em que momento usamos sem retorno?

Bora para um caso de uso aqui:

Vamos imaginar que nossa função apenas precise enviar um dado para ser salvo em um banco de dados ou até mesmo criar um arquivo com ele, não precisamos de um returnpara isso, vamos precisar que ela simplesmente execute a tarefa e pronto, sem a necessidade de retorno algum.

Uso da Arrow function

Uma outra forma de criar funções que veio com o ES6 (ECMAScript6) é com o uso das Arrow Functions que faz com que fique mais direta nossas declarações de funções, aqui teremos um exemplo de como ela é e em seguida comentamos como ela funciona:

const calculo = (numero) => {
  return numero * numero;
}

calculo(2)

//Output: 4

No exemplo acima devemos atribuir a função para uma variável ou usar ela imediatamente temos o uso do => que nos permite identificar com facilidade uma Arrow Function e mais uma característica é que podemos ter seu retorno implícito isso significa que não precisamos necessariamente usar o return pois ele já diz que o retorno será o que vem após ela ficando dessa forma o mesmo código:

const calculo = (numero) => numero * numero

calculo(2)

//Output: 4

Conclusão

Podemos usar functions para criar escopos de códigos reaproveitáveis e isso economiza bastante tempo e linhas de código.

além de permitir que a gente utilize mais funções ou métodos dentro das mesmas

Comentários

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:12:01 +0000

Veja no Youtube:

Objetivos

Aprender comentários de linha
Aprender comentários de bloco

Bora lá

No JavaScript podemos comentar o nosso código de duas maneiras e elas são por bloco ou linha para que o JS ignore a execução delas.

Comentário de bloco

Identificado pelo /* conteudo */ cria um bloco de comentário de uma ou várias linhas.

/*
const nome = "Diego"

let ano = 2021

const admin = false

const cidade = "SP"
*/

Comentário de linha

identificado por // duas barras podemos comentar linhas individuais.

const nome = "Diego"

// let ano = 2021

const admin = false

// const cidade = "SP"

Conclusão

De maneira simples podemos comentar um trecho ou linha de código para que o JavaScript ignore na hora da execução do script.

Condicionais

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:11:48 +0000

Veja no Youtube:

Bora lá...

As condicionais é basicamente o seu funil de escolhas se vai tratar o dado de uma forma ou outra levando você para o escopo de informação que o resultado for true, vamos ver uns exemplo de condicionais com if statement que sempre onde estiver um if presente ele aguarda um resultado verdadeiro para entrar no escopo que é dentro das chaves { }

if

const a = 10
const b = 5

if (a > b) {
    console.log('É verdadeiro')
}

if...else if

const a = 10
const b = 5

if (a < b) {
    console.log('if: >> É verdadeiro')
} else if (a > b) {
    console.log('else if: >> É verdadeiro')
}

// Output: else if: >> É verdadeiro

else

const a = 10
const b = 5

if (a < b) {
    console.log('if: >> É verdadeiro')
} else if (a === b) {
    console.log('else if: >> É verdadeiro')
} else {
    console.log('else: >> É o falso')
}

//Output: else: >> É o falso

Operador ternário

Temos uma opção bem pratica para validar se temos uma informação ou não que é usando o if ternário dessa forma:

const a = 10
const b = 5

console.log(a > 8 ? "Verdadeiro" : "Falso")

O ternário verifica somente duas condições diferente do if que podemos ter alternativas com o else if e podemos usar qualquer operador lógico para validar a informação antes do ponto de interrogação.

Conclusão

O if é utilizado para retornar o valor que é verdadeiro

O else if é utilizado para uma segunda possibilidade de vir verdadeiro, podendo ser mais de uma possibilidade isso resulta em mais else if.

O else é a nossa saída de false, após passar por cada validador teremos ele esperando para falar que não deu match.

O if ternário economiza código e traz uma informação mais precisa como resultado

Loops / Laços de repetição

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:11:18 +0000

Objetivos

Entender o uso do laço de repetição
Aprender laços de repetição em variáveis, arrays e objetos

Bora lá...

Aqui vamos abordar o uso do for(), for...in e for...of

Laços de repetição são usados para manter uma iteração enquanto aquele valor que estiver sendo ouvido for verdadeiro

for()

O for é o mais usado pelos devs pela praticidade na iteração, vamos analisar cada elemento desse metódo:

for ([inicialização]; [condição]; [expressão final])
   declaração

inicialização

Geralmente usada para iniciar o contador de variáveis. podemos criar ela no próprio for usando let

ou até mesmo já ter ela declarada e utilizarmos como inicializador.

condição

Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for true, a declaração será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira.

expressão final

Geralmente usado para atualizar ou incrementar a variável do contador.

declaração

Uma declaração que é executada enquanto a condição for verdadeira. Para executar múltiplas condições dentro do loop, use uma instrução de bloco ({...}) para agrupar essas condições. Para não executar declarações dentro do loop, use uma instrução vazia (;).

for (let i = 0; i < 4; i++) {
   console.log(i);
}

/* Output:
            0
            1
            2
            3
*/

for...in

O laço for...in interage nas propriedades (chaves) de um objeto, na ordem original de inserção.

for (variavel in objeto) {...
}

variavel

Uma propriedade diferente do objeto é atribuída em cada iteração. Pode ser declarada com qualquer nome.

objeto

Objeto com as propriedades enumeradas.

let obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
    console.log("obj.", prop, " = ", obj[prop]);
}

/* Output:
        obj. a  =  1
        obj. b  =  2
        obj. c  =  3
*/

for...of

O loop for...of percorre objetos iterativos dentro de um array para trazer cada um dos objetos para erem tratados de forma individual.

for (variavel of iteravel) {
  declaração
}

variável

A cada iteração, um objeto do array é atribuido à variavel.

iteravel

Array cujos atributos serão iterados.

let iterable = [
    { name: "Larissa", admin: false },
    { name: "Diego", admin: false },
    { name: "Walace", admin: false },
];

for (const value of iterable) {
  console.log(value.name);
}

/* Output:
            Larissa
            Diego
            Walace
*/

Podemos usar em `string` também

let iterable = "Telles";

for (let value of iterable) {
    console.log(value);
}
/* Output:
        T
        e
        l
        l
        e
        s
*/

Conclusão

Podemos usar o escopo para realizar validações e tomar ações necessárias para cada um dos dados que precisamos usar, seja para valores ou até mesmo para chaves.

Operadores Lógicos/Matemáticos

Telles (@UnicornCoder) — Fri, 05 Mar 2021 16:08:00 +0000

Veja no Youtube:

Objetivos

Aprender o que são operadores lógicos e como funcionam
Aprender o que são operadores matemáticos e como funcionam
Ver um pouco deles com trechos de código clicando no 👁

Bora lá...

Operadores Lógicos

Operadores Matemáticos

Como são usados?

>

Ex.: a > b
Nome: Maior que
Resultado: Verdadeiro se a for maior que b

Comumente usado para números, então vamos para exemplos numéricos, para tipo string vamos usado o .length para pegarmos a quantidade de caracteres que temos

Usando if statement com números

const a = 10
const b = 22

if( a > b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a > b) // Output: false

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a.length > b.length){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log( a.length > b.length) // Output: false

O resultado é false, porque a não é maior que b e sim igual a ele

Usando if statement com textos e números

const a = 8
const b = "10"

if( a > b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a > b) // Output: false

A saída desse exemplo é false, aqui temos uma pegadinha do JavaScript em que usando um número dentro de uma string (ou no formato de uma) para um calculo matemático ou verificação de maior ou menor ele ignora o fato de que é uma string e aceita que é um número pois não há validação de tipagem com exceção do operador de soma que faz interpolação de dados

<

Ex.: a < b
Nome: Menor que
Resultado: Verdadeiro se a for menor que b

Comumente usado para números, então vamos para exemplos numéricos, para tipo string vamos usado o .length para pegarmos a quantidade de caracteres que temos

Usando if statement com números

const a = 10
const b = 22

if( a < b){
// Entrou aqui no Verdadeiro
}

console.log(a < b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a.length < b.length){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log( a.length < b.length) // Output: false

O resultado é false, porque a não é menor que b e sim igual a ele

Usando if statement com textos e números

const a = 8
const b = "10"

if( a < b){
// Verdadeiro
}

console.log(a < b) // Output: true

A saída desse exemplo é true, aqui temos uma pegadinha do JavaScript em que usando um número dentro de uma string (ou no formato de uma) para um calculo matemático ou verificação de maior ou menor ele ignora o fato de que é uma string e aceita que é um número pois não há validação de tipagem com exceção do operador de soma que faz interpolação de dados

===

Ex.: a === b
Nome: Idêntico
Resultado: Verdadeiro se a for idêntico a b

Usando if statement com números

const a = 22
const b = 22

if( a === b){
// Entrou aqui no Verdadeiro
}

console.log(a === b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a === b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a === b) // Output: false

O resultado é false pois ele como eu havia dito ele é case-sensitive, ou seja, maiúsculas e minúsculas fazem a diferença.

Usando if statement com textos e números

const a = 10
const b = "10"

if( a === b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a === b) // Output: false

A saída desse exemplo é false pois ele compara somente o valor atribuído e não a tipagem dos dados, sendo assim o 10 string é igual ao 10 number

==

Ex.: a == b
Nome: Igual
Resultado: Verdadeiro se a for igual a b

Usando if statement com números

const a = 22
const b = 22

if( a == b){
// Entrou aqui no Verdadeiro
}

console.log(a == b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a == b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a == b) // Output: false

O resultado é falso pois ele como eu havia dito ele é case-sensitive, ou seja, maiúsculas e minúsculas fazem a diferença.

Usando if statement com textos e números

const a = 10
const b = "10"

if( a == b){
// Verdadeiro
}

console.log(a == b) // Output: true

A saída desse exemplo é true pois ele compara somente o valor atribuído e não a tipagem dos dados

<=

Ex.: a <= b
Nome: Menor ou igual
Resultado: Verdadeiro se a for menor ou igual a b

Comumente usado para números, então vamos para exemplos numéricos, para tipo string vamos usado o .length para pegarmos a quantidade de caracteres que temos

Usando if statement com números

const a = 10
const b = 22

if( a <= b){
// Entrou aqui no Verdadeiro
}

console.log(a <= b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a.length <= b.length){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log( a.length <= b.length) // Output: true

O resultado é true, porque a não é menor que b e sim igual a ele.

Usando if statement com textos e números

const a = 8
const b = "10"

if( a <= b){
// Verdadeiro
}

console.log(a <= b) // Output: true

>=

Ex.: a >= b
Nome: Maior ou igual
Resultado: Verdadeiro se a for maior ou igual a b

Comumente usado para números, então vamos para exemplos numéricos, para tipo string vamos usado o .length para pegarmos a quantidade de caracteres que temos

Usando if statement com números

const a = 10
const b = 22

if( a >= b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a >= b) // Output: false

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a.length >= b.length){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log( a.length >= b.length) // Output: true

O resultado é true, porque a não é menor que b e sim igual a ele.

Usando if statement com textos e números

const a = 8
const b = "10"

if( a >= b){
// Verdadeiro
}

console.log(a >= b) // Output: false

&&

Ex.: a && b
Nome: E
Resultado: Verdadeiro se existir a e b

Usando if statement com números

const a = 10
const b = 22

if( a && b){
// Entrou aqui no Verdadeiro
}

console.log(a <= b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = ""

if( a && b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log( a && b) // Output: false

O resultado é false, porque existe a e b é vazio .

Usando if statement com textos e boolean

const a = 8
const b = false

if( a && b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a && b) // Output: false

A saída desse exemplo é false, porque a segunda condição é false por default e precisamos de dois true para ser true

||

Ex.: a || b
Nome: Ou
Resultado: Verdadeiro se existir a ou existir b

Usando if statement com números

const a = 10
const b = 22

if( a || b){
// Entrou aqui no Verdadeiro
}

console.log(a || b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = ""

if( a || b){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log( a || b) // Output: true

O resultado é true, porque existe a e b é vazio, mas com o ou como operador precisamos somente de um deles para ser true.

Usando if statement com textos e boolean

const a = 8
const b = false

if( a || b){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log(a || b) // Output: true

A saída desse exemplo segue a mesma lógica do de cima.

!==

Ex.: a !== b
Nome: Não Idêntico
Resultado: Verdadeiro se a não for igual a b ou eles não tiverem o mesmo tipo

Usando if statement com números

const a = 10
const b = 22

if( a !== b){
// Entrou aqui no Verdadeiro
}

console.log(a !== b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a !== b){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log(a !== b) // Output: true

O resultado é true pois ele como eu havia dito ele é case-sensitive, ou seja, maiúsculas e minúsculas fazem a diferença.

Usando if statement com textos e números

const a = 10
const b = "10"

if( a != b){
// Verdadeiro
}

console.log(a !== b) // Output: true

A saída desse exemplo é true pois ele compara somente o valor atribuído e não a tipagem dos dados, sendo assim o 10 string não é igual ao 10 number

!=

Ex.: a != b
Nome: Diferente
Resultado: Verdadeiro se a não for igual a b

Usando if statement com números

const a = 10
const b = 22

if( a != b){
// Entrou aqui no Verdadeiro
}

console.log(a != b) // Output: true

Usando if statement com textos

const a = "Telles"
const b = "telles"

if( a != b){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(a != b) // Output: false

O resultado é false pois ele como eu havia dito ele é case-sensitive, ou seja, maiúsculas e minúsculas fazem a diferença.

Usando if statement com textos e números

const a = 10
const b = "10"

if( a != b){
// Verdadeiro
}

console.log(a != b) // Output: true

A saída desse exemplo é false pois ele compara somente o valor atribuído e não a tipagem dos dados, sendo assim o 10 string é igual ao 10 number

!

Ex.: !a
Nome: Negação
Resultado: Negação, se o valor for verdadeiro vai transformar em falso e vice versa

Negação, se o valor for verdadeiro vai transformar em falso e vice versa

Usando if statement com boolean

const a = true

if(!a){
// Verdadeiro
} else {
// Entrou aqui no Falso
}

console.log(!a) // Output: false

const a = false

if(!a){
// Entrou aqui no Verdadeiro
} else {
// Falso
}

console.log(!a) // Output: true

Switch...case

Telles (@UnicornCoder) — Fri, 05 Mar 2021 15:56:58 +0000

Objetivo

Aprender a usar um switch...case
Entender o que faz cada parte do código

Bora lá...

Uma outra forma de trabalhar com condicionais é usando switch...case e aqui vamos ver o esqueleto dele e suas características básicas:

const local = "cinema";
switch (local) {
    case "cinema":
        console.log('Entrou no cinema!');
        break;
    case "quarto":
    case "sala":
        console.log('Entrou em casa!'); 
        break;
    default:
        console.log('qualquer valor diferente dos cases acima');
        break;
}

// Output: Entrou no cinema!

Temos o:

switch responsável por ouvir a variável que vamos trabalhar
case sempre irá verificar a igualdade do valor passado no switch com o que está no case
breaksempre será usado para parar a execução do case, caso não exista um breakseu switch vai mandar para o próximo case e executará os dois causando um erro
default qualquer valor diferente dos cases acima

Onde temos nosso console log podemos passar uma função ou qualquer outro validador que você precise

Note que temos dois cases juntos e isso significa que se cair em qualquer um deles a resposta será a mesma.

Conclusão

Temos uma alternativa ao if...else para trabalhar com condicionais de maneira simples também.

Tipos de dados

Telles (@UnicornCoder) — Fri, 05 Mar 2021 15:56:26 +0000

Veja no Youtube:

Objetivos

Entender o diferentes tipos de dados
Ver como eles funcionam

Bora lá...

Quando trabalhamos com variáveis temos a possibilidade de ter vários tipos e eles podem sem Texto, números, Objetos, Arrays ou Booleanos, nesse artigo vamos entender cada um deles.

O JavaScript é uma linguagem de tipagem dinâmica. Isso significa que você não necessita declarar o tipo de uma variável antes de sua atribuição. O tipo será automaticamente determinado quando o programa for processado.

string

Sempre que quisermos trabalhar com textos vamos usar a nomenclatura de strings para elas e elas podem ser identificadas facilmente pelo seu uso de aspas duplas ou simples dessa forma "Diego Telles" ou 'Diego Telles' , mas podemos usar ela para armazenar outros tipos também, mas automaticamente as aspas vão converter para string e tudo se tornará texto no final. Por exemplo:

const variavel = "Diego" // string (Texto)

const variavel = "200" // string (Texto)

const variavel = "false" // string (Texto)

Devemos nos atentar que para o JavaScript um texto escrito com letra maiúscula e um com letra minúscula porque o JavaScript é Case Sensitivity:

const variavel1 = "Diego" 

const variavel2 = "diego"

A váriavel1 é diferente da váriavel2

number

Para trabalharmos com tipos numéricos podemos passar somente o número inteiro ou decimal que também pode ser chamado de float.

const numerico = 10    // number 

const numerico = 10.25 // number

const numerico = 0.410 // number

boolean

Os booleanos são basicamente o nosso binário que é representado como 0 ou 1, mas aqui teremos eles representados como true ou false (Verdadeiro ou Falso) usaremos para validar condicionais como if...else por exemplo vamos ver um exemplo de declaração:

const admin = true

const admin = false

Ps. Veremos uso dele com if...else no artigo de if...else

Object

Objetos nada mais é que um conjunto de variáveis de mesmo tipo ou tipos diferentes armazenados em uma única variável onde ela pode ser identificada pelo uso das chaves { } e pelo uso de dois pontos : para separar o que é chave do seu valor, tudo que tiver dentro das chaves é um objeto, vamos aos exemplos:

const obj = {
    nome: "Diego Telles",
    ano: 2021,
    admin: true
}

Nesse exemplo, notamos um padrão na estrutura que basicamente é após a declaração de uma chave: valor temos uma vírgula. Como havia dito, podemos ter diferentes tipos dentro de um objeto e podemos ter também outros objetos dentro também, dessa forma:

const obj = {
    nome: "Diego Telles",
    ano: 2021,
    admin: true,
    endereco: {
        cidade: "SP",
        numero: 725,
    }
}

Atenção, evite o uso de símbolos ou até mesmo traço ou separar palavras nas chaves do seu objeto use o padrão cammelCase para declarar como nas variáveis.

Arrays

O uso do array é usado para armazenar um ou vários objetos e com ele podemos iterar (percorrer) por cada um desses objetos usando métodos (funções) do próprio JavaScript, o array pode ser identificado pelo uso de colchetes [ ] com nenhum ou vários objetos, vamos ver como ele é:

const arr = [{
        nome: "Diego Telles",
        ano: 2021,
        admin: true,
        endereço: {
            cidade: "SP",
            numero: 725,
        }
    },
    {
        nome: "Larissa Azevedo",
        ano: 2021,
        admin: true,
        endereco: {
            cidade: "SP",
            numero: 180,
        }
    }
]

Basicamente a estrutura é essa, e assim podemos percorrer por cada um desses objetos com um método map() do JavaScript.

null

Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação

undefined

Uma propriedade superior cujo valor é indefinido

Conclusão

Podemos usar diferentes tipos de dados em conjunto ou até mesmo separados e devemos nos atentar no uso das letras maiúsculas e minúsculas para comparação de textos por que o JavaScript é Case-sensitive.

Variáveis

Telles (@UnicornCoder) — Fri, 05 Mar 2021 15:55:52 +0000

Veja no Youtube:

Objetivo

Entender o que são variáveis e qual o seu propósito

Bora lá

Para que possamos trabalhar com informações precisamos de um local para armazenar elas e elas podem ser qualquer tipo de informação, quando digo isso quero dizer que pode ser Texto, Números, Objetos, Arrays, Booleanos, vamos falar mais sobre eles depois, mas por enquanto vamos entender como isso funciona.

Basicamente temos 3 formas de declarar (criar) uma variável, elas podem conter a nomenclatura de var, const ou let.

Vamos entender o que ela tem a nos oferecer.

Formas de declarar

Var

Usamos para declarar uma variável, opcionalmente, inicializando-a com um valor a qual pode ser reescrita, por exemplo:

var nome = "Diego" // Declarando a variável

console.log(nome)

var nome = "Telles" // Recriando a variável

console.log(nome)

nome = "Diego Telles" // Reatribuindo valor

console.log(nome)

// Output:
// Diego
// Telles
// Diego Telles

No exemplo acima o que eu fiz foi basicamente criar uma variável contendo o meu nome e em seguida usei a mesma variável para editar e colocar meu sobrenome.

Let

Uma variável declarada como let leva em conta, não a função onde foi criada, mas sim o bloco de código de sua origem. Isso significa que se a declararmos dentro de um if(), switch() ou for(), ela será “enxergada” apenas dentro desta parte do código, dentro deste escopo específico (Bloco de código).

function getNome() {

    let nome = 'Diego';

    if (nome === 'Diego') {
        let nome = 'Diego Telles';

        console.log('Dentro do if: ' + nome);
    }
    console.log('Fora do if: ' + nome);
}

getNome()

// Output:
// Dentro do if: Diego Telles
// Fora do if: Diego

Nesse trecho de código eu declarei duas variáveis com a mesma nomenclatura "nome" porém com uma diferença, uma delas está fora do if() e a outra está dentro.

Quando pedimos para executar nossa função ela imprime valores diferentes por estarem em escopos diferentes, blocos de código, a partir disso temos duas saídas diferentes com variáveis de mesmo nome.

Const

Atualmente o grande sucessor do uso do var em nossas aplicações, ela é usada para criar variáveis constantes que não podem ser sobrescritas.

Embora o let garanta o escopo, ainda assim, existe a possibilidade de declararmos uma variável com let e ela ser undefined. Por exemplo:

let nome;
console.log(nome)

// Output: undefined

Para evitar que esse problema de acabar declarando uma variável sem um valor atribuído aconteça usamos a const pois ela exige para que seja criada um valor para ela trazendo o seguinte erro SyntaxError: Missing initializer in const declaration.

Mas agora vamos ao cenário onde eu declarei uma const e em seguida eu quero mudar o valor dela declarando ela novamente e passando um novo valor, vamos ver o que acontece:

const nome = "Diego"

console.log(nome)

const nome = "Telles"

console.log(nome)

//Output:
// const nome = "Telles"
//     ^
// SyntaxError: Identifier 'nome' has already been declared

Feito isso ela nos retorna que nome já foi declarado e não permite que seja criado novamente, mas se quisermos reatribuir um valor para ela será que funciona?

const nome = "Diego"

console.log(nome)

nome = "Telles"

console.log(nome)

//Output:
// Diego
// TypeError: Assignment to constant variable.

Ela também não permite e o erro agora é Atribuição a variável constante **e traz somente o valor do primeiro console.log() causando um erro na hora de reatribuir e parando a execução do script

Conclusão

Podemos trabalhar com tipos diferentes de variáveis porem sempre se atente no objetivo de cada uma delas para sua aplicação e após o lançamento do let no ECMAScript6 o uso do var foi substituído por const ou let por motivos de segurança em recriação ou reatribuição de valores por engano.

Lógica de programação com JavaScript - Iniciante

Telles (@UnicornCoder) — Fri, 05 Mar 2021 15:55:12 +0000

Objetivos

Escopo
Comando que vamos ver bastante no demais artigos

Escopo

Algo que devemos nos atentar bastante é nos escopos, mas afinal o que é isso?

Bom escopo é basicamente até onde sua váriavel pode ser acessada, a grosso modo.

O escopo normalmente é identificado com o uso das chaves { } nas funções.

Mas podemos ter tipos diferentes de escopos:

Escopo global

Uma variável global é definida quando declaramos uma variável fora de qualquer função, assim ela torna acessível a qualquer parte da nossa aplicação, podendo ser lida e alterada.

Escopo local

Uma variável local é definida quando declaramos uma variável dentro de uma função, assim ela torna acessível somente dentro da função onde ela foi declarada.

Exemplos:

const varGlobal = "Eu sou uma variavel global"

function showMeTheCode() {

    let varLocal = "Eu sou uma variavel local"

    console.log(varGlobal)
    console.log(varLocal)
}

console.log(varLocal)

// Output: ReferenceError: varLocal is not defined

No exemplo acima não conseguimos acessar a variavel local pois ela só pode ter acesso dentro do escopo que ela está, no caso a função showMeTheCode(), vamos ver o que acontece se chamarmos a função apenas:

const varGlobal = "Eu sou uma variavel global"

function showMeTheCode() {

    let varLocal = "Eu sou uma variavel local"

    console.log(varGlobal)
    console.log(varLocal)
}

showMeTheCode()

/* Output: 
        Eu sou uma variavel global
        Eu sou uma variavel local
*/

Nesse caso conseguimos acessar as duas variáveis, porque a global está fora do escopo, mas pode ser usada e lida dentro de qualquer escopo.

Como ver o retorno dos valores

Podemos usar algumas ferramentas para isso, mas recomendo usar o dev tools do navegador, basta apertar Ctrl + Shift + J e abrira na aba de console, caso não abra funciona apertando F12 no seu teclado, mas ai você irá navegar para a aba console.

Para testarmos nossas saídas de código que são nossos resultados, vamos usar o comando console.log(variável)

Forem: Telles (@UnicornCoder)

CSSOM — Modelo de Objeto CSS

O que é o Modelo de Objeto CSS (CSSOM)?

A Importância do CSSOM

Manipulação de Estilos com o CSSOM

3. Renderização eficiente

Conclusão

Criação de Design Systems - Frontend

Origem do Design System

Benefícios e Problemas Resolvidos pelo Design System:

Empresas que Usam Design Systems:

Como podemos criar um design system?

Podemos ter um DS para multiplos frameworks ou cada um ter que ser desenvolvido no seu ecossistema?

O que podemos usar para criar um Design System?

Mas como eu faço building do meu DS?

Switch...Case

Veja no Youtube:

Objetivo

Bora lá...

Conclusão

Funções

Veja no Youtube:

Objetivos

Bora lá...

Function com retorno / return

Function sem retorno / void

Uso da Arrow function

Conclusão

Comentários

Veja no Youtube:

Objetivos

Bora lá

Comentário de bloco

Comentário de linha

Conclusão

Condicionais

Veja no Youtube:

Bora lá...

if

if...else if

else

Operador ternário

Conclusão

Loops / Laços de repetição

Objetivos

Bora lá...

for()

for...in

for...of

Podemos usar em string também

Conclusão

Operadores Lógicos/Matemáticos

Veja no Youtube:

Objetivos

Bora lá...

Operadores Lógicos

Operadores Matemáticos

Como são usados?

>

Usando if statement com números

Usando if statement com textos

Usando if statement com textos e números

<

Usando if statement com números

Usando if statement com textos

Usando if statement com textos e números

===

Usando if statement com números

Usando if statement com textos

Usando if statement com textos e números

==

Usando if statement com números

Usando if statement com textos

Usando if statement com textos e números

<=

Usando if statement com números

Usando if statement com textos

Usando if statement com textos e números

>=

Usando if statement com números

Function com retorno / `return`

Function sem retorno / `void`

Podemos usar em `string` também