Categoria: Todos os artigos

O JavaScript é uma linguagem essencial para o desenvolvimento web moderno, porém, quando o projeto cresce, surgem desafios relacionados à escalabilidade e manutenibilidade do código. Foi nesse contexto que o TypeScript surgiu como uma poderosa ferramenta complementar.

Neste artigo, você vai entender o que é TypeScript, porque ele foi criado, quais são seus principais recursos e verá um exemplo prático de como utilizá-lo na construção de um contador de cliques. Se você já conhece JavaScript, prepare-se para dar um passo adiante na robustez do seu código!

1 – O que é TypeScript?

TypeScript é um superset do JavaScript. Um “superset” (ou superconjunto) é uma linguagem de programação que estende as funcionalidades de uma linguagem base, adicionando novas características sem alterar a funcionalidade original da linguagem base.

Na prática, isso significa que todo código JavaScript válido também é código TypeScript válido. Sendo um superset, o TypeScript adiciona algumas funcionalidades extras ao JavaScript que veremos a seguir:

• Tipagem Estática Opcional: Permite definir explicitamente os tipos de dados (como string, number, boolean, etc.) para variáveis, parâmetros de funções, retornos de funções e objetos. Essa tipagem é opcional, o que significa que você pode escolher quando e onde usá-la.
• Interfaces: Permitem definir contratos para a estrutura de objetos, especificando quais propriedades e métodos um objeto deve ter.
• Classes: Embora o JavaScript tenha classes desde o ECMAScript 2015, o TypeScript oferece um suporte mais robusto e familiar para quem vem de linguagens orientadas a objetos.
• Enums (Enumerações): Permitem definir um conjunto de constantes nomeadas, tornando o código mais legível e manutenível.
• Namespaces: Fornecem uma maneira de organizar o código e evitar conflitos de nomes em aplicações grandes.
• Generics: Permitem escrever código reutilizável que pode trabalhar com diferentes tipos sem perder a segurança de tipo.
• Ferramentas de Desenvolvimento: O TypeScript vem com um compilador (tsc) que verifica o código em busca de erros de tipo e o transpila para JavaScript. Ele também oferece um Language Service que melhora a experiência de desenvolvimento em editores de código com recursos como autocompletar, navegação de código e refatoração.

Em resumo, o TypeScript visa tornar o desenvolvimento JavaScript mais robusto, escalável e fácil de manter, especialmente para projetos grandes e complexos, através da adição de recursos como a tipagem estática e outros mais avançados.

2 – Como o TypeScript surgiu?

O TypeScript foi criado e é mantido pela Microsoft. Seu surgimento está diretamente ligado aos desafios enfrentados no desenvolvimento de aplicações JavaScript de grande escala.

No início dos anos 2010, o JavaScript estava se tornando cada vez mais popular para o desenvolvimento de aplicações web complexas. No entanto, sua natureza dinâmica e sem tipagem de dados, apresentava alguns problemas significativos:

• Dificuldade em detectar erros precocemente: Erros de tipo só eram descobertos em tempo de execução, o que poderia levar a bugs inesperados em produção.
• Manutenção complexa: Em projetos grandes, a falta de tipagem tornava difícil entender a estrutura do código e realizar refatorações com segurança.
• Escalabilidade limitada: A ausência de ferramentas robustas para organização e modularização dificultava o desenvolvimento de aplicações muito grandes.
• Experiência de desenvolvimento menos produtiva: A falta de informações de tipo dificultava o uso de recursos avançados de IDEs, como autocompletar e verificação de erros em tempo real.

Diante desses desafios, a Microsoft identificou a necessidade de criar uma linguagem que pudesse aproveitar a flexibilidade e o vasto ecossistema do JavaScript, ao mesmo tempo em que adicionava recursos para melhorar a produtividade e a qualidade do código em projetos maiores.

Anders Hejlsberg, um renomado engenheiro de software da Microsoft, liderou o desenvolvimento do TypeScript. O objetivo não era criar uma linguagem do zero, mas sim adicionar tipagem estática ao JavaScript, para uso imediato, especialmente, pelos times de desenvolvimento do TFS e Office.

A primeira versão pública do TypeScript foi lançada em outubro de 2012. Desde então, a linguagem vem ganhado uma enorme popularidade na comunidade de desenvolvimento web, sendo adotada em projetos de todos os tamanhos, desde pequenas bibliotecas até grandes aplicações empresariais. Sua compatibilidade com o JavaScript, a adoção de tipagem estática e outros recursos avançados foram fatores-chave para o seu sucesso.

3 – Exemplo prático com TypeScript

Assim como fiz no artigo sobre O que é JavaScript?, vamos ver um exemplo prático com TypeScript para reforçar nosso entendimento sobre o assunto.

O TypeScript é utilizado em conjunto com o HTML e o CSS para construção de páginas e aplicações web. Cada linguagem possui uma função específica:

– HTML: linguagem de marcação responsável pela estrutura das páginas e aplicações, definindo cabeçalhos, títulos, parágrafos e outros elementos.

– CSS: linguagem de folha de estilos responsável pela personalização do layout da página, definindo cores, fontes, posição dos elementos, entre outros atributos.

– TypeScript: linguagem de programação responsável pela interação da página, definindo ações ao clicar em botões, digitar textos em campos de input, entre outros.

Para nosso exemplo, iremos criar um contador de cliques igual do artigo O que é JavaScript? Vamos utilizar HTML, CSS e TypeScript no lugar de JavaScript neste exemplo.

Sugestão do autor: para um melhor entendimento das diferenças entre o JavaScript e o TypeScript, recomendo que você analise atenciosamente os códigos dos dois artigos. Lembre-se que se trata do mesmo exemplo, um contador de cliques, mudando apenas a linguagem utilizada em sua construção.

3.1 – Criando os arquivos e configurando o ambiente

Para nosso contador de cliques, vamos criar três arquivos: index.html, styles.css e counter.ts. Observe a estrutura abaixo:

Além de criar os arquivos acima, certifique-se de que você tem o TypeScript instalado em seu sistema operacional. Caso você ainda não tiver o TypeScript instalado, acesse esse link e siga as orientações.

Lembre-se que todo código TypeScript precisa ser transpilado para JavaScript. Por isso, antes de instalar o TypeScript, certifique-se que você possui em sua máquina, o Node JS e um gerenciador de dependências como o npm ou yarn. Se precisar de ajuda para instalar o Node e o gerenciador de dependências, consulte esse link aqui.

3.2 – Criando os códigos

Após criar os arquivos acima e instalar o Node, um gerenciador de dependências e o TypeScript, vamos criar os códigos, começando pelo arquivo index.html:

<!DOCTYPE html>

<html lang="pt-BR">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <script defer type="text/javascript" src="./scripts/counter.js"></script>
        <title>Contador com TypeScript</title>
    </head>

    <body>
        <div class="container">
            <div class="titulo">
                <h1>Contador: <span id="counter">0</span></h1>
            </div>
            <div class="botoes">
                <button id="increment">+</button>
                <button id="decrement">-</button>
            </div>
        </div>
    </body>
</html>

Em nosso código HTML, definimos no <body> um contador e dois botões: um para somar cliques e outro para subtrair os cliques. Além disso, no <head> passamos alguns metadados da página, definindo um título e referenciando dois arquivos: styles.css, onde estão os estilos da página e counter.ts, onde está a lógica de funcionamento do contador.

Agora, vamos criar o código de styles.css:

.container {
    display: flex;
    justify-content: center;
    height: 95vh;
    flex-direction: column;

}

.titulo, .botoes {
    width: 99vw;
    text-align: center;
    color: #222;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
}

#counter {
    display: inline-block;
    min-width: 60px;
    font-size: 2.2rem;
    text-align: left;
}

button {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: #0068de;
    color: white;
    margin-right: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #0277fd;
    transform: scale(1.1);
}

button:active {
    transform: scale(0.9);
}

Repare que no código CSS acima, definimos a posição, tamanho e estilos de cada elemento da página. A aplicação do CSS leva ao resultado abaixo, com o contador centralizado na tela e os botões estilizados com visual simples e agradável:

Agora vamos criar o código de counter.ts, para configurar as ações do contador de cliques:

// Seleciona os elementos do HTML com verificação de null
const counter = document.getElementById("counter") as HTMLElement | null;
const incrementBtn = document.getElementById("increment") as HTMLButtonElement | null;
const decrementBtn = document.getElementById("decrement") as HTMLButtonElement | null;

// Variável que armazena o valor do contador
let count: number = 0;

// Função para atualizar o contador na tela
function updateCounter(): void {
  if (counter) {
    counter.textContent = count.toString();
  }
}

// Função que soma cliques ao contador 
incrementBtn?.addEventListener("click", () => {
  count++;
  updateCounter();
});

// Função que subtrai cliques no contador 
decrementBtn?.addEventListener("click", () => {
  count--;
  updateCounter();
});

O código TypeScript possui a lógica de acréscimo e subtração de valores no contador. Vamos analisar o código:

– Seleciona os elementos do documento HTML usando document.getElementById(), especificando o tipo de elemento HTML onde será o valor será capturado.

– Define uma variável count, do tipo number, para armazenar o valor do contador.

– Cria uma função updateCounter() para atualizar o valor do contador na tela.

– Adiciona duas funções de callback addEventListener() aos botões para detectar cliques e atualizar o contador.

3.3 – Executando o projeto

Agora vamos executar nosso projeto. Antes de fazer isso, precisamos observar um detalhe muito importante do TypeScript. Talvez você tenha observado em nosso documento HTML que estamos fazendo referência para um arquivo JavaScript, chamado counter.js em nosso head e não para o arquivo counter.ts

<script defer type="text/javascript" src="./scripts/counter.js"></script>

Isso acontece porque os navegadores web não executam código TypeScript. Antes de executar nosso projeto precisamos transpilar nosso código para JavaScript, gerando o arquivo counter.js. Para transpilar o código, vamos acessar a pasta scripts via terminal utilizando:

cd scripts

Em seguida, vamos executar o seguinte comando:

tsc counter.ts

Pronto, ao executar o comando acima, será gerado um arquivo chamado counter.js, que pode ser executado em qualquer navegador web.

Agora vamos abrir o arquivo index.html e obteremos o seguinte resultado:

Veja que, a linguagem TypeScript utilizada com HTML e CSS, permite criar aplicações e páginas web funcionais de forma simples e eficiente. O TypeScript representa uma nova ferramenta de desenvolvimento web que possui grande potencial de agregar novas funcionalidades e recursos aprimorados. Não deixe de estudar e explorar essa nova linguagem.

Conclusão

O TypeScript surge como uma evolução natural para quem já domina o JavaScript e busca mais segurança, organização e produtividade no desenvolvimento de aplicações web. Seu sistema de tipagem estática, junto com recursos como interfaces, enums e generics, proporciona uma experiência muito mais robusta, especialmente em projetos de grande porte.

O exemplo do contador de cliques mostrou como é simples integrar TypeScript com HTML e CSS para criar interfaces interativas e modernas. Ao dominar essa linguagem, você se prepara para encarar desafios mais complexos com mais confiança e controle sobre o seu código.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.

Na base de toda tomada de decisão em programação está a lógica — e, dentro dela, os operadores lógicos desempenham um papel fundamental. Esses operadores são essenciais para construir condições que permitem que o software “pense” e aja de acordo com diferentes situações.

Seja no desenvolvimento de sistemas, aplicativos ou páginas web, entender como funcionam os operadores lógicos é o primeiro passo para dominar a lógica condicional e estruturar códigos mais eficientes e inteligentes.

Neste artigo, vamos explorar o que são operadores lógicos, seus principais tipos e como podem ser aplicados na prática utilizando JavaScript. Vamos lá?

1 – O que são operadores lógicos?

Em programação, operadores lógicos são símbolos ou palavras-chave utilizados em expressões booleanas (ou expressões lógicas) para comparar valores. Essas expressões retornam sempre um valor booleano, ou seja, verdadeiro (true) ou falso (false). Esse tipo de dado, conhecido como booleano ou lógico, é o mais simples entre os tipos primitivos — e está presente em praticamente todas as linguagens de programação.

O conceito de lógica booleana, apesar de parecer algo puramente da área de programação, está presente em diversas áreas da tecnologia. Por exemplo, na eletrônica, aprendemos sobre portas lógicas, como AND, OR e NOT, que funcionam com os mesmos princípios dos operadores lógicos em programação. Em ambos os casos, lidamos com decisões baseadas em dois estados possíveis: ligado/desligado, 1/0, aceso/apagado, sim/não ou simplesmente verdadeiro/falso. Compreender essa lógica permite transitar com mais facilidade entre diferentes áreas tecnológicas.

Os operadores lógicos são recursos fundamentais para criar lógica condicional em nossos softwares. Utilizar esses operadores nos permite gerar diferentes fluxos de execução de códigos, dependendo de certas condições serem verdadeiras ou falsas. Isso torna nossos sistemas mais inteligentes, adaptáveis e capazes de tomar decisões de forma automática.

A seguir, vamos ver os principais operadores lógicos e como cada um deles funciona.

2 – Os principais operadores lógicos

Operador AND (E): retorna verdadeiro apenas se ambas as condições forem verdadeiras. Se uma delas for falsa, o resultado será falso.

Operador OR (OU): retorna verdadeiro se pelo menos uma das condições for verdadeira. Só retorna falso quando ambas forem falsas.

Operador NOT (NÃO): inverte o valor lógico. Se for verdadeiro, torna-se falso; se for falso, torna-se verdadeiro.

Além dos operadores mais comuns (AND, OR, NOT), também existem outros operadores lógicos que combinam ou estendem essas operações básicas:

Operador NAND (NÃO-E): é o oposto do operador AND, ele retorna falso somente se ambas as condições forem verdadeiras. É equivalente a aplicar NOT após um AND.

Operador NOR (NÃO-OU): é o oposto do operador OR, ele retorna falso se pelo menos uma das condições for verdadeira. É equivalente a aplicar NOT após um OR.

Operador XOR (OU-EXCLUSIVO): retorna verdadeiro se apenas uma das condições for verdadeira.

Operador XNOR (NÃO-OU-EXCLUSIVO): retorna verdadeiro se as duas condições forem iguais.

Essas variações são especialmente comuns em áreas como eletrônica e sistemas embarcados, mas também podem aparecer em linguagens de programação que oferecem suporte a operações bit a bit ou manipulação mais avançada de lógica.

3 – Operadores lógicos em JavaScript

Em JavaScript, você pode utilizar os seguintes operadores lógicos:

• && (AND)
• || (OR)
• ! (NOT):

Vamos exemplificar cada um deles usando códigos JavaScript:

– Operador && (AND lógico): vamos começar pelo operador AND. Vale relembrar que ele retorna true somente se ambas as expressões conectadas por ele forem true. Caso contrário, retorna false.

let idade = 25;
let possuiCarteira = true;

if (idade >= 18 && possuiCarteira) {
  console.log("Pode dirigir."); // Esta linha será executada porque ambas as condições são verdadeiras.
} else {
  console.log("Não pode dirigir.");
}

No exemplo acima, a mensagem “Pode dirigir.” só é exibida porque tanto a condição idade >= 18 quanto a condição possuiCarteira são verdadeiras. Se qualquer uma das condições fosse falsas, ou ambas fossem falsas, o resultado também seria falso.

– Operador || (OR lógico): agora vamos ver o operador OR. Lembre-se que ele retorna true se pelo menos uma das expressões conectadas por ele for true. Retorna false somente se ambas forem false.

let produtoTemDesconto = false;
let primeiraCompra = true;

if (produtoTemDesconto || primeiraCompra) {
  console.log("Você tem um desconto!"); // Esta linha será executada porque 'primeiraCompra' é true.
} else {
  console.log("Não há descontos disponíveis.");
}

Nesse exemplo, a mensagem “Você tem um desconto!” é exibida porque pelo menos uma das condições (nesse caso primeiraCompra é true) é verdadeira. O operador || só retornaria false se ambas as condições forem falsas.

– Operador ! (NOT lógico): para finalizar vamos ver o operador NOT. Ele é um operador unário (opera em uma única expressão), que apenas inverte o valor booleano da expressão. Se a expressão for true, ! a torna false, e se for false, ! a torna true.

let usuarioLogado = false;

if (!usuarioLogado) {
  console.log("Por favor, faça login."); // Esta linha será executada porque '!usuarioLogado' é true (a negação de false).
} else {
  console.log("Bem-vindo!");
}

No exemplo apresentado acima, usuarioLogado é false. O operador ! inverte esse valor para true, fazendo com que a mensagem “Por favor, faça login.” seja exibida.

Em resumo, os operadores lógicos (&&, ||, !) são ferramentas essenciais em JavaScript (e em muitas outras linguagens de programação) para controlar o fluxo do seu código com base em condições booleanas. Eles permitem criar lógicas mais complexas e dinâmicas em suas aplicações, sendo indispensáveis no desenvolvimento de softwares.

Conclusão

Dominar os operadores lógicos é essencial para qualquer pessoa que deseje programar com clareza e precisão. Eles são a chave para criar códigos que tomam decisões, validam condições e moldam o comportamento de sistemas.

Como vimos, tanto os operadores mais comuns — AND, OR e NOT — quanto os mais específicos — como XOR, NAND e NOR — têm aplicações que vão muito além da programação, estando presentes também em áreas como a eletrônica. Com uma boa compreensão desses conceitos, é possível escrever códigos mais limpos, eficientes e adaptáveis às mais diversas situações do mundo real.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.

No mundo do desenvolvimento web, o JavaSript é uma linguagem que se destaca pela sua versatilidade. Presente tanto no front-end quanto no back-end, essa linguagem de programação revolucionou a forma como interagimos com sites e aplicações, tornando a web dinâmica e interativa.

Criado na década de 90, o JavaScript evoluiu de um simples recurso para adicionar interatividade às páginas para uma linguagem robusta e amplamente utilizada em sistemas complexos. Seu ecossistema é vasto, abrangendo bibliotecas e frameworks que facilitam o desenvolvimento de aplicações modernas.

Neste artigo, vamos explorar o que é JavaScript, sua origem, principais características e ainda vamos ver um exemplo prático de uso. Se você quer entender por que essa linguagem é essencial para qualquer desenvolvedor web, continue a leitura!

1 – O que é JavaScript?

JavaScript é uma linguagem de programação versátil e poderosa, essencial para o desenvolvimento web moderno. Inicialmente, a linguagem foi criada para adicionar interatividade às páginas web. Porém, o JavaScript evoluiu muito ao longo dos anos e atualmente é usado tanto no front-end (executado no navegador) quanto no back-end (com tecnologias como Node.js).

1.1 – Principais características

– Linguagem Interpretada: os códigos das linguagens interpretadas são executados linha por linha, sem necessidade de compilação prévia. No JavaScript, os códigos são executados diretamente pelo navegador ou pelo motor de execução (como o V8 do Chrome por exemplo).

– Linguagem de alto nível: essas linguagens possuem uma sintaxe mais próxima da linguagem humana e menos relacionada à arquitetura do computador. A sintaxe do JavaScript está baseada em palavras da língua inglesa, sendo mais entendível para o ser humano em comparação a outra linguagens como Assembly e C, por exemplo.

– Baseada em Eventos: JavaScript é uma linguagem capaz de responder a eventos do usuário, como cliques, digitação e interações na página.

– Multiparadigma: suporta programação imperativa, orientada a objetos e funcional, permitindo flexibilidade no desenvolvimento.

– Tipagem Dinâmica: o tipo das variáveis é determinado, automaticamente em tempo de execução do código. Essa característica torna a escrita do código mais ágil e eficiente.

– Assíncrono e Não Bloqueante: usa mecanismos como callbacks, promises e async/await para lidar com operações assíncronas, como requisições HTTP e manipulação de arquivos no backend.

– Executado no Cliente e no Servidor: no front-end, manipula a árvore DOM (Document Object Model) para alterar elementos da página. No back-end, com Node.js, pode criar servidores, manipular bancos de dados e integrar APIs.

– Extensível e Modular: JavaScript é uma linguagem essencial para qualquer desenvolvedor web, sendo usada para criar desde pequenos scripts até aplicações complexas.

– Ecossistema amplo: o JavaScript possui um vasto ecossistema de bibliotecas e frameworks, como, React, Angular e Vue.js para front-end, além de Express.js e NestJS para back-end.

Resumidamente, o JavaScript é uma linguagem interpretada, de alto nível, com tipagem dinâmica amplamente utilizada no desenvolvimento web. Mas, como essa linguagem surgiu? Vamos descobrir isso no próximo tópico:

2 – Como surgiu o JavaScript?

O JavaScript surgiu em 1995, criado por Brendan Eich, um desenvolvedor da Netscape, empresa responsável pelo desenvolvimento do navegador Netscape Navigator, um dos primeiros browsers da história da internet.

Nos anos 90, a internet era estática e baseada apenas em HTML e CSS, sem muita interatividade. Para tornar os sites mais dinâmicos, a Netscape queria uma linguagem que rodasse no navegador e interagisse com o usuário sem precisar recarregar a página.

Brendan Eich desenvolveu essa linguagem em apenas 10 dias, inicialmente chamada de Mocha, depois renomeada para LiveScript e, por fim, para JavaScript, devido à popularidade da linguagem Java na época. Entretanto, as duas linguagens não têm relação direta entre si, além dos nomes parecidos.

Em 1997, a ECMA, uma instituição internacional sem fins lucrativos dedicada à padronização de sistemas de informação e comunicação, tornou-se responsável pelo JavaScript. Essa instituição padronizou a linguagem, evitando sua fragmentação, bem como estabeleceu seu nome oficial como ECMAScript (ES).

Desde então, o JavaScript passou por muitas atualizações e melhorias coordenadas pela ECMA. Sua versão atual é a ECMAScript 2024. A linguagem também figura entre as mais populares do mundo, segundo pesquisa do site StackOverflow, renomado site na área de desenvolvimento de softwares.

Vamos ver agora um exemplo prático dessa linguagem tão popular entre os desenvolvedores.

3. Exemplo prático de JavaScript

Na prática, o JavaScript é utilizado em conjunto com HTML e o CSS para construção de páginas e aplicações web. Cada uma dessas linguagens possui uma função específica:

– HTML: linguagem de marcação responsável pela estrutura das páginas e aplicações, definindo cabeçalhos, títulos, parágrafos e outros elementos.

– CSS: linguagem de folha de estilos responsável pela personalização do layout da página, definindo cores, fontes, posição dos elementos, entre outros atributos.

– JavaScript: linguagem de programação responsável por toda a interação da página, definindo ações ao clicar em um botão, ao digitar um texto em um campo de input, entre outros.

Quer conhecer mais sobre HTML e CSS? Não deixe de conferir meus artigos sobre O que é HTML? e O que é CSS?

Para nosso exemplo iremos criar um contador de cliques utilizando HTML, CSS e JavaScript. Vamos começar?

3.1 – Criando um contador de cliques

Para criar o contador de cliques, vamos precisar criar três arquivos: index.html, styles.css e counter.js

Após criar os arquivos, vamos criar os códigos, começando pelo arquivo index.html:

<!DOCTYPE html>

<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <script defer type="text/javascript" src="./js/counter.js"></script>
        <title>Contador com JavaScript</title>
    </head>
    <body>
        <div class="container">
            <div class="titulo">
                <h1>Contador: <span id="counter">0</span></h1>
            </div>
            <div class="botoes">
                <button id="increment">+</button>
                <button id="decrement">-</button>
            </div>
        </div>
    </body>
</html>

No HTML acima, estamos definindo no <body> um contador e dois botões: um para somar cliques e outro para subtrair. Além disso, no <head> estamos passando alguns metadados da página, definindo um título e referenciando dois arquivos: styles.css, onde estão os estilos da página e counter.js, onde é executada a lógica do contador.

Ok, concluída a criação de nosso HTML, vamos criar o código de styles.css:

.container {
    display: flex;
    justify-content: center;
    height: 95vh;
    flex-direction: column;

}

.titulo, .botoes {
    width: 99vw;
    text-align: center;
    color: #444;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
}

#counter {
    display: inline-block;
    min-width: 60px;
    font-size: 2.2rem;
    text-align: left;
}

button {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: #888;
    color: white;
    margin-right: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #777;
    transform: scale(1.1);
}

button:active {
    transform: scale(0.9);
}

Repare no código CSS acima, que definimos a posição, tamanho e estilos de cada elemento da página. Esse CSS nos leva ao resultado abaixo, com nosso contador centralizado na página com um aspecto visual simples e agradável:

Por fim, vamos criar o código de counter.js, para configurar as ações do contador de cliques:

// Seleciona os elementos do HTML
const counter = document.getElementById("counter");
const incrementBtn = document.getElementById("increment");
const decrementBtn = document.getElementById("decrement");

// Variável que armazena o valor do contador
let count = 0; 

// Função para atualizar o contador na tela
function updateCounter() {
  counter.textContent = count;
}

// Função que soma cliques ao contador 
incrementBtn.addEventListener("click", () => {
  count++;
  updateCounter();
});

// Função que subtrai cliques no contador 
decrementBtn.addEventListener("click", () => {
  count--;
  updateCounter();
});

O código JavaScript é responsável pela lógica de acréscimo e subtração de valores no contador. Vamos analisar esse código:

– Seleciona os elementos do documento HTML usando document.getElementById().

– Define uma variável count para armazenar o valor do contador.

– Cria uma função updateCounter() para atualizar o valor do contador na tela.

– Adiciona duas funções de callback addEventListener() aos botões para detectar cliques e atualizar o contador.

O código JavaScript nos leva a esse resultado aqui:

Observe que, ao combinarmos JavaScript com HTML e CSS, conseguimos criar aplicações e páginas web funcionais de forma simples e eficiente. Essas linguagens representam a base do desenvolvimento front-end para a web e são fundamentais para a internet como a conhecemos.

Conclusão

O JavaScript revolucionou a forma como interagimos com a web, tornando as páginas mais dinâmicas e responsivas. Desde sua criação nos anos 90 até os dias atuais, essa linguagem passou por diversas evoluções e continua sendo uma das mais populares no mundo do desenvolvimento.

Com um vasto ecossistema de frameworks e bibliotecas, ele possibilita a criação de aplicações robustas e eficientes. Dominar JavaScript é essencial para qualquer desenvolvedor web que deseja construir soluções modernas e interativas.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.

O CSS é uma linguagem essencial para o desenvolvimento web, permitindo definir a aparência e o layout das páginas HTML. Com ele, é possível personalizar cores, fontes, tamanhos, espaçamentos, posicionamentos e muitos outros aspectos visuais de um site.

Desde seu lançamento em 1996, o CSS tem sido amplamente adotado para separar a estrutura do conteúdo (HTML) da estilização, tornando o desenvolvimento mais organizado, flexível e eficiente.

Neste artigo, vamos entender como o CSS funciona, suas principais regras de sintaxe e os diferentes seletores utilizados para estilizar páginas web.

1 – O que é CSS?

O CSS (Cascading Style Sheets, que traduzido significa Folhas de Estilo em Cascatas) é uma linguagem de estilização, geralmente, utilizada em conjunto com HTML na construção de páginas web. Essa linguagem permite personalizar fontes e cores, definir espaçamentos entre textos, posicionar elementos na tela, aplicar bordas e elevações, entre outros.

O CSS foi desenvolvido em 1996 pelo W3C (World Wide Web Consortium), com o intuito de fornecer recursos de formatação visual para as páginas web, algo que o HTML não atende, pois ele foi projetado para estruturar as páginas.

Dessa forma, ao combinarmos CSS e HTML, conseguimos separar o código de personalização visual do código estrutural. Isto proporciona uma maior organização em nossos projetos e facilita sua manutenção em longo prazo. Inclusive, a utilização do CSS é vista como uma boa prática de desenvolvimento.

2 – Como funciona o CSS?

O CSS é uma ferramenta fundamental para a construção de sites com visuais modernos e responsivos. Sua estrutura de sintaxe é a seguinte:

Seletor {
Propriedade: Valor
}

Na prática, teremos um código semelhante a esse aqui:

.elementoHTML {
atributo1: valor;
atributo2: valor;
atributo3: valor;
}

Conforme podemos observar nos modelos acima, os códigos CSS são baseados em seletores de elementos e blocos de declaração delimitados por chaves.

Enquanto os seletores apontam para os elementos HTML que serão estilizados, os blocos de declaração possuem os atributos que serão modificados no elemento referenciado pelo seletor.

Dentro dos blocos, cada declaração possui um nome da propriedade CSS e um valor, separados por dois pontos. As declarações sempre terminam com um ponto-e-vírgula, independentemente de quantas declarações houver dentro do bloco.

2.1 – Exemplo prático

Para que possamos compreender com maior clareza o que é o CSS e como ele funciona, vamos ver um exemplo simples e prático.

Considere uma página index.html com o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de CSS</title>
</head>
<body>
    <h1>Bem-vindo ao CSS!</h1>
    <p>Este é um exemplo de como o CSS estiliza uma página HTML.</p>
</body>
</html>

O resultado desse documento HTML, sem nenhum tipo de estilização CSS, é esse aqui:

Observe que o HTML apresenta cada elemento na tela, sequencialmente, com uma formatação padrão. Agora, vamos atualizar o documento acima e inserir uma tag <link> no seu cabeçalho para referenciarmos o arquivo CSS que possui a estilização da página:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bem-vindo ao CSS!</h1>
    <p>Este é um exemplo de como o CSS estiliza uma página HTML.</p>
</body>
</html>

Vamos considerar esse código para o arquivo styles.css:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    color: #3498db;
}

p {
    font-size: 18px;
    color: #333;
}

Agora, o resultado é esse aqui:

Observe a diferença entre esta página que possui estilização CSS e a página anterior que não possui nenhum tipo de estilização.

No CSS, referenciamos os elementos HTML pelos seus nomes: <body>, <h1> e <p>. Nossa personalização aplicou ao <body> um fundo cinza, alterou a fonte dos textos e alinhou-lhes ao centro da página. No título da página, representado pelo elemento <h1>, aplicamos uma coloração azul, enquanto no parágrafo, representado pelo elemento <p>, definimos um tamanho de 18 pixels e aplicamos uma cor personalizada.

Até agora, referenciamos os elementos HTML pelos seus nomes. Porém, há outras formas de conectar o CSS com nossos documentos HTML, vamos conhecê-las no próximo tópico:

2.2 Seletores de elementos

Os seletores de CSS são usados para “selecionar” elementos HTML e aplicar estilos a eles. Eles permitem que você defina regras específicas para diferentes partes de um documento, tornando o design mais flexível e organizado. Existem três principais tipos de seletores. Vamos ver como eles como funcionam:

2.1 – Seletor de Tipo (Tag)

Aplica os estilos a todas as instâncias de uma determinada tag. Para usá-lo, coloca-se o nome da tag e abre-se chaves:

p {
  color: blue;
}

Isso deixará a letra de todos os parágrafos (<p>) do documento em azul.

2.2 – Seletor de Classe (.)

Aplica os estilos a todos os elementos que pertencem a uma determinada classe. Para usá-lo, coloca-se um ponto, seguido do nome da classe e abre-se chaves:

.destaque {
  font-weight: bold;
}

Todos os elementos pertencentes a class="destaque" terão texto em negrito.

2.3 – Seletor de ID (#)

Aplica os estilos a um único elemento que possui um ID específico. Para usá-lo, coloca-se uma hashtag, seguida do ID do elemento e abre-se chaves:

#cabecalho {
  background-color: gray;
}

O elemento com id="cabecalho" terá um fundo cinza.

Saber conectar o CSS com um documento HTML através da tag <link> e entender a utilização de cada seletor apresentado acima já é um excelente começo para trabalhar com essa linguagem. Porém, se você tem interesse em conhecer outros recursos do CSS e ver exemplos práticos de uso da linguagem, acesse o site da W3Schools e confira os conteúdos publicados por lá. Tenho certeza que esse material lhe ajudará em seus estudos.

Conclusão

O CSS é uma ferramenta indispensável para qualquer desenvolvedor que deseja criar páginas web modernas e visualmente atraentes. Ao entender como funcionam os seletores e as propriedades de estilização, é possível personalizar completamente um site, tornando-o mais agradável e acessível para os usuários.

Além disso, a utilização correta do CSS melhora a organização do código, facilita sua manutenção a longo prazo e torna nossos sites responsivos. Se você deseja aprofundar seus conhecimentos, existem diversos materiais disponíveis online, como a documentação da W3Schools, por exemplo, que pode ajudar a aprimorar suas habilidades na linguagem.

Pesquise e teste cada funcionalidade da linguagem e se quiser conhecer mais sobre programação, clique aqui e acesse meus artigos sobre o assunto.

Espero que este conteúdo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações fique à vontade para entrar em contato.