Você pode dizer pelo título deste artigo que estou aprendendo JavaScript novamente do zero e vou subir para reagir e node.js. Você pode estar se perguntando o porquê. Bem, escrevi um artigo para uma organização recentemente, e isso faz parte do feedback que recebi: “… o repositório é um pouco melhorado com a última atualização, mas ainda não é a melhor qualidade de código”. Segura dizer que me senti horrível. Mas foi uma revisão construtiva, no entanto. Isso me fez olhar dentro, e descobri que perdi contato com muitas das minhas habilidades de codificação.
Estou em uma jornada para me refrescar com o básico e estou levando você junto comigo! Você pode pensar nisso como um tutorial para iniciantes, mas também foi projetado para pessoas com conhecimento pré-existente. Não fica muito profundo e basicamente dá trechos com pequenas explicações para quem procura uma atualização rápida.
Este artigo faz parte de uma série que estou começando.
Neste tutorial, vamos:
- Entenda o que é JavaScript e por que é poderoso
- Escreva e teste nosso primeiro código JS usando o console do navegador
- Explore tipos de dados como números e strings
- Aprenda sobre variáveis, expressões e declarações
- Mergulhe no modelo de objeto de documento (DOM)
- Use lógica e funções para construir um carrinho de compras simples
Vamos começar.
O que é JavaScript?
JavaScript (JS) é uma linguagem de programação usada para tornar os sites dinâmicos. É bom se lembrar do básico às vezes para que você não abuse ou subutilize o potencial do JavaScript. Enquanto o HTML fornece estrutura e CSS adiciona estilo, JavaScript torna as coisas interativas -como menus suspensos, pop-ups, calculadoras, jogos e feedback em tempo real.
Para este tutorial, estamos usando Google Chrome e o Console devtools – Não é necessário software extra.
Seu primeiro código JavaScript (não é necessária configuração)
Como abrir o JavaScript Browser Console:
- Faça o download/instale qualquer navegador da sua escolha ou você pode usar o navegador padrão no seu PC.
- Clique com o botão direito do mouse em qualquer página da web
- Clique Inspecionar No menu suspenso que aparece
- Selecione o Console guia
Na guia Console, digite:
alert('Hello there!');
Este comando exibe um alerta de navegador. JS acabou de executar sua instrução.
Agora tente:
console.log('Logging to the console');
Isso registra uma mensagem no console, uma ferramenta muito importante para depuração.
Números e operações em JavaScript
O JS lida com todas as operações matemáticas básicas:
2 + 2 // 4 addition
10 - 3 // 7 subtraction
10 * 3 // 30 multiplication
10 / 2 // 5 divison
15 % 2 // 3 modulus
10^3 // 1000 exponential
Javascript Order of Operations
JS segue Pemdas regras:
1 + 1 * 3 // 4
(1 + 1) * 3 // 6
Cuidado com erros decimais em JavaScript (matemática de ponto flutuante)
0.1 + 0.2 // 0.30000000000000004
Devido à forma como os computadores lidam com números decimais, pequenas imprecisões podem ocorrer.
Nesse caso, ao calcular dinheiro, use centavos (uma moeda menor).
(2095 + 799) / 100 // 28.94 (represent $20.95 + $7.99)
Snippet de método de matemática javascript.Round
Usar Math.round() Para totais precisos:
Math.round(2.7) // 3
Math.round(2.3) // 2
Você pode arredondar impostos ou totais como este:
Math.round((2095 + 799) * 0.1) / 100 // $2.89 tax rounded
Variáveis em JavaScript: armazenando valores
Usar variáveis para armazenar e reutilizar dados.
name = Dumebi's tutorial
console.log(name)
Deixe e const em JavaScript
let quantity = 3;
quantity = quantity + 1; // 4
const taxRate = 0.1;
// taxRate = 0.2; ❌ Error — const can’t be reassigned
O que o último comentário está dizendo é que, uma vez que um nome variável se baseia em constseu valor ou conteúdo não pode ser alterado posteriormente no código.
Usar const por padrão; mudar para let se você precisar para reatribuir.
Convenções de nomeação de JavaScript
- Use CamelCase:
itemPricenãoitem_price - Comece com letras (não números ou símbolos)
Strings: Trabalhando com texto em JavaScript
UM corda é apenas texto envolto em citações:
'hello'
"world"
`template`
Concatenação em JavaScript
starterText = "The price is "
price = "$15"
endText = starterText + price
console.log(endText)
// The price is $15
Literais de modelo em JavaScript
Usamos backsticks, o sinal do dólar e os aparelhos encaracolados `${}`Para literais de modelo:
num1 = 5
num2 = 6
add = num1 + num2
addt = "Total number is:" + `${add}`
console.log(addt)
// Total number is:11
Os literais de modelos são usados para concatenar dois tipos de dados em JavaScript. Na manipulação de DOM, também pode ser usado para adicionar JavaScript a uma expressão DOM
Expressões vs. declarações em JavaScript
Um expressão é um pedaço de código que produz um valor:
3 + 4
UM declaração executa uma ação:
let total = 3 + 4;
Booleanos e operadores de comparação em JavaScript
Booleanos também são true ou false. Útil na tomada de decisão:
true
false
5 > 3 // true
5 === 5 // true
'5' === 5 // false (strict equality)
A última declaração é falsa porque o estrito operador de igualdade em JavaScript === é verdadeiro quando os valores são exatamente os mesmos em valor e tipo. ‘5’, embora uma figura seja do tipo string Porque está entre citações. O 5 no lado esquerdo, no entanto, é uma figura do tipo inteiro.
Use booleanos em condições com if blocos:
const age = 16;
if (age >= 18) {
console.log('Adult');
} else {
console.log('Minor');
}
Falaremos sobre condições mais aprofundadas no próximo artigo.
Funções em JavaScript: blocos de código reutilizáveis
As funções ajudam a evitar se repetir:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Chris'));
Você pode passar dados (argumentos) para eles e retornar um resultado.
function greet(name = 'Chris') {
return `Hello, ${name}!`;
}
console.log(greet());
Apresentando o DOM (modelo de objeto de documento) em JavaScript
O DOM é uma árvore viva de todos os elementos em uma página da web. Com a manipulação de DOM em JavaScript, você pode:
- Acesse elementos HTML
- Mudar seu conteúdo
- Reaja às ações do usuário
Exemplo: mude um título
Html:
JavaScript:
document.getElementById('main-heading').textContent = 'Updated with JS!';
Crie elementos em tempo real
const newElement = document.createElement('p');
newElement.textContent = 'I was added with JavaScript';
document.body.appendChild(newElement);
Eventos DOM em JavaScript: Ouça as ações do usuário
document.getElementById('clickMe').addEventListener('click', function() {
alert('Button was clicked!');
});
Lembre -se de que, para que isso funcione, o arquivo JavaScript que contém o código deve ter sido adicionado ao arquivo html por meio de um script tag no head elemento.
const item1 = 2095; // in cents
const item2 = 799;
let total = item1 + item2;
let shipping = total <= 1000 ? 499 : 0;
const tax = Math.round(total * 0.1);
const finalAmount = total + shipping + tax;
console.log(`Final Total: $${finalAmount / 100}`);
Vamos conectá -lo ao DOM:
function calculateCart() {
const item1 = 2095;
const item2 = 799;
const shipping = (item1 + item2 <= 1000) ? 499 : 0;
const tax = Math.round((item1 + item2) * 0.1);
const final = item1 + item2 + shipping + tax;
document.getElementById('result').textContent = `Total: $${final / 100}`;
}
Agora, quando você clica no botão, ele calcula e mostra o total.
Todo o código deste artigo foi escrito no console do navegador. Neste primeiro artigo, abordamos:
- Escrevendo JS no console do navegador
- Números, cordas, variáveis, expressões e declarações
- Booleanos, comparações e lógica condicional
- Funções para reutilizar o código
- Manipulação DOM: Alteração de elementos, cliques de manuseio
Até construímos um sistema de carrinho simples usando JavaScript e o conectamos à página da web. Nada mal para o primeiro dia! Estou empolgado com o que está por vir. Felizmente, posso fazer disso um esforço semanal.
Obrigado por aprender comigo. Vamos continuar!
Encontre -me LinkedIn.
