Esta será uma leitura longa, mas deixe-me repetir.
JAVASCRIPT é difícil. da última vez que nos conhecemos, eu estava entrando no mundo do Javascript, um programador esperançoso e de olhos brilhantes entrando na selva selvagem dizendo "Quão difícil pode ser?". Quão errado eu estava? Ficou mais difícil, estou sobrevivendo (por pouco), aqui vai uma pequena história caótica sobre minha jornada.
Variáveis: início da loucura
Variáveis são contêineres que contêm valores, onde você armazena ou manipula dados. Quero dizer, por que temos três maneiras de criá-los: var, let e const? por que? rir em ES6.
var: Eles disseram que var é um canhão solto. como jogar um jogo de azar. Não chegue perto disso.
let: Ótimo para variáveis que podem mudar. Mais fácil de gerenciar.
Const: é para valores que permanecem iguais. imóvel. Ohh - const não significa que o valor não pode mudar, apenas significa que você não pode reatribuí-lo.
Nota: ECMAScript 2015 ou ES6 foi a segunda grande revisão do JavaScript.
Ooh, dissemos adeus à concatenação de strings, Olá Template Literals. Com literais de modelo Agora você pode usar crases e incorporar variáveis facilmente com ${}. A vida ficou um pouco mais fácil aqui, mas descobrir quando usar crases versus aspas? Outro alucinante.
// Good old concat const message = "Hi, " name ". You are " age " years old."; // Template literal const message = `Hi, ${name}! You are ${age} years old.`;
Funções: também conhecido como Sr. Reutilização, Sr. Manutenção...
Uma função é um conjunto de instruções que executa uma tarefa. Consiste na palavra-chave da função, nome da função, parâmetro ou não, instrução Js entre colchetes.
function greet() { console.log("Hello, fellow strugglers?!"); }
Eles pareciam simples no início: encapsular alguma lógica, chamá-la (eu digo invocá-la) e bum! Você está codificando.
Então ES6 disse "Estas são funções de seta, use-as". As funções das setas parecem simples, certo? Apenas uma maneira curta de escrever funções. Demorei um pouco para entender a sintaxe.
const greet = () => { console.log("Hello, fellow strugglers?!"); }
Loops: Dançando com o Infinito.
As muitas maneiras de sofrer. Os loops podem executar um bloco de código várias vezes. Eles são úteis se você quiser executar o mesmo código repetidamente, cada vez com um valor diferente. São muitos:
1. While Loop: continua em loop enquanto a condição for verdadeira. Mal. e não estou falando de seu primo, faça enquanto.
2. for Loop: Bom e velho for loop, meu caro. o confiável loop for. Tão familiar. Tão seguro e cheio de potencial para lançar loops infinitos quando você se esquece de incrementar uma variável.
3. forEach: que é como o primo mais legal e moderno do loop for. Não precisa de contadores, não me leva ao infinito. meu homem.
4. & 5. for..in e for..of: Um é ótimo para fazer loop em objetos, o outro é feito para iterar em arrays. Continuo misturando-os e aprendo com a dor. ainda estou aprendendo.
//for loop for (let i = 0; i console.log(num));
Arrays: a lista que continua caçando
Arrays começou de forma tão promissora. Uma lista simples de itens. Empurre as coisas para dentro, retire as coisas. Fácil, certo?
let shoppingList = ["apples", "bananas", "chocolate"]; shoppingList.push("ice cream"); console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']
Insira filter, map e find e o resto da gangue de métodos de array. Meu cérebro não é o mesmo desde então.
O método filter() cria um novo array preenchido com elementos que passam em um teste fornecido por uma função.
O método find() retorna o valor do primeiro elemento que passa no teste. Os métodos de array são tantos, preciso de documentação para cada um? Quero dizer, há comprimento, emenda, fatia, junção, pop, push, unshift, shift, map.., vamos parar por aqui.
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4]
Objetos: o primo confuso dos arrays
Depois vieram os objetos. Os objetos são como arrays, mas com chaves e valores. Eu estava tipo, “Legal, eu posso lidar com isso”. Mas então o JavaScript introduziu métodos e, de repente, os objetos começaram a fazer coisas por conta própria. E então uma série de objetos entrou na equação. Acessando propriedades, estou usando notação de ponto ou colchete. E não me fale com .isto
//Without method let shoppingCart = { apples: 3, bananas: 2, chocolate: 1 }; // with method let cart = { items: ["apple", "banana"], addItem(item) { this.items.push(item); } }; cart.addItem("chocolate"); console.log(cart.items); // ['apple', 'banana', 'chocolate']
Manipulação de DOM: onde as verdadeiras lutas começaram
Assim que me senti confiante com arrays e objetos, pensei: “É hora de manipular o DOM! Sou praticamente um desenvolvedor web agora!” Você não sabe de nada, disse Ygritte.
Isso deve ser fácil, eu disse novamente. Basta pegar um elemento e alterá-lo. Se for um ID, getElementbyId está lá para mim. Uma classe getElementsbyClassName também está lá ou queryselector e aquela com All seu irmão.
E há todo esse negócio de addEventListener. Claro, funciona, mas às vezes os eventos parecem disparar como se tivessem vontade própria.
Então tentei criar um carrinho de compras. Levei dias e muitos sinais SOS para meus eruditos colegas. Aqui estou anexarChild, removerChild, criarElements, capturar elementos, definir atributos, estilizar, chamar funções sobre funções.
Em seguida, adicionei corajosamente um banco de dados simulado; eu e a manipulação de array novamente. Estou acessando, estou empurrando, estou achando, estou cansado (levanta de novo).
Importações e Exportações: Corajosamente compartilhando a Loucura??
Em algum momento, eu havia escrito tanto JavaScript que precisei modularizar meu código. Insira importação e exportação.
Copy code // module.js export function greet() { console.log("Hello from the module!"); } // main.js import { greet } from './module.js'; greet();
Achei que dividir meu código em pedaços menores tornaria tudo mais fácil. Mal sabia eu, acabaria importando uma montanha de confusão.
Agora estou prestes a começar a Programação Orientada a Objetos (OOP), parece sofisticado, mas deixe-me aproveitar meu fim de semana antes de me perder novamente.
Obrigado por ficar até o fim. A meta ainda permanece 1% melhor todos os dias. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3