DEV Community: Genesis

Introdução ao DOM

Genesis — Tue, 25 Oct 2022 13:27:25 +0000

O que é o DOM? (DOCUMENT OBJECT MODEL)

É uma representação estruturada do html que permite que o javascript acesse e manipule os elementos.

Quando um arquivo html é carregado no browser(navegador)
uma arvore de elementos é gerada:

Perceba que a imagem lembra uma árvore genealógica, por isso a um conceito de elementos "pais" e elementos "filhos".

O DOM não é javascript!
O DOM é uma API, que significa que é uma interface que fornece recursos(métodos e propriedades) para ser manipulada pelo javascript.
Exemplo de um método do DOM:

document.querySelector(".user-panel");

Para finalizar segue um link de um repositório do projeto que eu coloquei em pratica conceitos do DOM:
Guess my Number repositório

O que são Higher Order Functions?

Genesis — Mon, 30 May 2022 14:16:20 +0000

Higher order functions(funções de ordem superior) são funções que aceitam outra função como paramêtro(callback) ou retornam uma função.

Callback

Funções callback são as funções passadas como paramêtro.

Um método de arrays chamado forEach() aceita callbacks:

const numbers = [5, 25, 50]
function sumArray() {
    // declarando variável acumuladora
    let sum = 0
    numbers.forEach(element => {
        // função callback
        // element é cada elemento do array numbers
        sum+=element
        // que vai ser somado e guardado na variável sum
    });
    console.log(`\nTotal: ${sum}\n`)
}

Outra higher order funtcion importante é o setInterval()

setInterval(sumArray, 3000)

A cada 3 seg o setInterval ira executar o callback sumArray

Retornando uma função como valor

Exemplo 1:

function higherOrderFunction() {
    console.log("Hello!");
    return function (y){
        console.log("Good bye!");
    }
}

Se chamamos a função normalmente:

higherOrderFunction();
// vai imprimir apenas "Hello!"

Podemos armazenar em uma variavel para guardar o retorno da função

const higherOrder = higherOrderFunction();
console.log(higherOrder());
// Hello!
// Good bye!

Exemplo 2:

function higherOrderFunction(x) {
    return (y) => y + x;
    // retornando uma função arrow que faz a soma com os argumentos
}

Aqui o primeiro paramêtro pertence a higherOrderFunction e o segundo é da função que está sendo retornada:

higherOrderFunction(1)(2);
// 3

const higherOrder = higherOrderFunction(1)(2);

Isso é tudo, até a proxima!

Entendendo let, const e escopo em javascript

Genesis — Wed, 25 May 2022 11:25:03 +0000

O que são variáveis?

Variáveis são espaços para guardar valores e utiliza-los em um futuro processamento.
No javascript utiliza-se palavras chaves(keywords) para declarar variáveis:

Declarando uma variável com let

Para declarar uma variável utiliza a keyword let seguindo do nome da variável:

let x; 
console.log(x); //undefined

Uma variável let declarada sem nenhum valor atribuido pelo programador, retorna com valor de undefined.

Declarando uma variável com const

Variáveis utilizando const DEVEM ser declaradas com um valor inicial.
Apenas declarar, sem atribuir o valor gera o erro:

const y;   // SyntaxError: Missing initializer in const declaration

Entendendo o escopo de let e const

O que é escopo?

É o local onde a variável pode ser acessada ou está disponível.

Escopo com let

let a = "oi";

{
  let a = "hi!";

}

Aqui temos uma variável a declarada dentro de um bloco(escopo do bloco) e outra variável a fora do bloco (escopo global)
Temos dois escopos(áreas) diferentes.

Se eu tentar redeclarar a variável no mesmo escopo, gera um erro:

let a = "Oi";
let a = "Hi!"; // SyntaxError: Identifier 'a' has already been declared
console.log(a);

Mas se eu declarar com o mesmo nome e em escopos diferentes:

let a = "Oi";
{
  let a = "Hi!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: Hi!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: Oi

Atualizando o valor de let:

let a = "Oi";
a = "hahaha!";
{
  let a = "Hi!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: Hi!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: hahaha!

Mesmo atualizando o valor de a no escopo global, não interferiu na outra variavel a que foi declarada dentro do bloco.

Atualizando o valor de let no escopo de bloco:

let a = "Oi";

{
  a = "hahaha!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: hahaha!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: Oi

Escopo com const

const tem a mesma regra de redeclaração, porem seu valor não pode ser atualizado

const a = "Oi"
{
  const a = "HI"
  console.log(`Valor dentro do bloco: ${a} `) 
}

function exibir() {
  const a = "Estou dentro da função!"
  console.log(a)
}

exibir()
console.log(`Valor fora do bloco: ${a}`) 
// Valor dentro do bloco: HI 
// Estou dentro da função!
// Valor fora do bloco: Oi

const a = "Oi"
{
  a = "HI"
  console.log(`Valor dentro do bloco: ${a} `) 
}
console.log(`Valor fora do bloco: ${a}`) 
// TypeError: Assignment to constant variable.

const a = "Oi"
function exibir() {
  a = "Estou dentro da função!"
  console.log(a)
}

exibir()
console.log(`Valor fora do bloco: ${a}`) 
// TypeError: Assignment to constant variable.

Resumindo

let:
NÃO PODE ser redeclarada no MESMO escopo
PODE ter seu valor atualizado

const:
NÃO PODE ser redeclarada no MESMO escopo
NÃO PODE ter seu valor atualizado

Introdução ao Node.js - Parte 2

Genesis — Tue, 26 Apr 2022 13:56:22 +0000

Você deve já ter lido sobre event loop, que o Node.js é assíncrono, orientado a eventos etc.

Modo Síncrono

No modo síncrono, deve se esperar o termino de execuação de uma linha para seguir para a proxima.

const fs = require("fs")

const input = fs.readFileSync("input.txt", "utf-8")
console.log(input)

O modo síncrono também é conhecido como "blocking code".
Ou seja, cada linha espera o resultado da linha anterior para pode seguir o fluxo.

Perceba que o resultado na tela saiu na ordem esperada.

Modo Assíncrono

Essa operação de IO demora um pouco para finalizar, então como é assíncrono, ele vai rodar e vai passar reto enquanto os dados não estiverem prontos e não pararem nela como no sync.js. Quando ele bater na linha ReadFile ele vai passar todas as camadas do SO pedindo para fazer esse IO e, internamente, vai gerenciar avisando quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.

No modo assíncrono, não espera o termino de execução de uma linha para ir para proxíma

const fs = require("fs")

fs.readFile("input.txt", "utf-8", (err, data) => {
  console.log(data)
})
console.log("Non-blocking Code")
console.log("Lendo o arquivo...")

Ele lê o arquivo em background e vai seguir o fluxo, enquanto os dados do background não estiverem prontos.
Quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.

Perceba que as duas linhas do console.log() foram lidas primeiro do que o arquivo.txt que continha a mensagem hello world!

O que é thread?

Imagine que a thread é uma caixa com uma sequência de instruções.
O node usa apenas UMA thread para executar os codigos, ou seja, toda as requisições usam a mesma thread.

O que é Event Loop?

O event-loop é o responsável por escutar e emitir eventos no sistema.
No Node se trabalha com eventos de I/O(Input/Output).

Eventos de I/O(Input/Output) podem ser: ler e escrever arquivos locais ou fazer uma requisição http para uma API.

O event-loop vai pegar os eventos e executar os callbacks, mas sem bloquear o fluxo.

Fico por aqui, até breve!

Introdução ao Node.js - Parte 1

Genesis — Tue, 19 Apr 2022 20:15:04 +0000

O que é o Node.js ? Uma linguagem?

Os navegadores são um ambiente de execução que aceita html, css e javascript nativamente.

O node.js não é uma linguagem, e sim um ambiente de execução onde você pode utilizar a linguagem javascript fora do navegador(browser).

O ambiente de execução seria o local que inclui tudo que é necessario para rodar codigo javascript nele: v8 engine, modulos do node etc.

O que NPM?

É o gerenciador de pacotes que vem disponivel com o node.js
Ele serve para ajudar no gerenciamento e configurações de modulos, instalar, atualizar ou remover dependencias.

O que são Módulos?

São um conjunto de códigos/scripts que são organizados em um ou mais arquivos
Com a vantagem de não poluir o escopo global e de ser reaproveitaveis.

Existem 3 categorias de módulos

Módulos Internos - Módulos que desenvolvemos

const soma = require("./soma.js");
const subtracao = require("./subtracao.js");

console.log(soma(1, 2));
console.log(subtracao(10, 2));

Na primeira e segunda linha é chamado um método require que é responsivel por importar módulos passando o caminho(path) onde está o arquivo.
No arquivo soma.js, está assim:

const soma = (a, b) => a + b;
module.exports = soma;

module.exports permite que eu deixe a função soma disponivel para outro arquivo.

Core Modules - Módulos que vem com o node.js

const path = require("path"); // importa o módulo interno path
const extension = path.extname("main.py"); // com o path importado, temos acesso ao metodo extname()
console.log(`Qual a extensão desse arquivo? ${extension}`); // informa qual a extensão do arquivo

Módulos Externos(Third-party Modules) - Módulos que instalamos via npm

Para receber módulos de terceiros no projeto, utliza o comando:

npm init

Depois desse comando é criado um arquivo chamado package.json, mais ou menos assim:

{
  "name": "testes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Podemos instalar um módulo com o comando:

npm install <nome do modulo>

A partir dai os modulos ficam no diretório node_modules

npm install nodemon

Exemplo de módulo externo utilizado é o nodemon, que serve para reiniciar o servidor
automaticamente após alterações.

Em breve vem a parte 2

Como a internet funciona?

Genesis — Mon, 18 Oct 2021 20:43:06 +0000

Você ja se perguntou como a internet funciona?

O que é a internet?

É um imenso conjunto de redes interligadas

Imagine agora: Você provavelmente possui dispositivos na sua casa como notebook, celular, smart tv, todos conectados a um roteador. Essa é a sua rede local.

Mas se você parar para pensar existem outras redes: A minha, do mercadinho, do vizinho. Ficaria complicado nos conectarmos com cabos diretamente.

Para que sua rede local possa ter conexão com o resto do mundo, o roteador vai se conectar a um modem. Esse dispositivo transmite a informação da sua rede para a rede do provedor de Internet.
Então a mensagem da sua rede é transportada para outra rede, que vai passar por outra rede de redes até que chegue a rede de destino. A internet é o conjunto de tudo isso.

O que é um Host?

São dispositivos clientes ou servidores.
Por exemplo, um computador desktop, pode ser um servidor e um notebook/laptop o cliente.

O que é um Cliente?

É um host que faz a requisição de um serviço.

O que é um Servidor?

É um host que oferece serviços e aceita conexões.

O que é IP?

Para um dispositivo ser achado e comunicar-se com outros dispositivos é necessario ter um ip.

Exemplo de um ip ipv4: 173.192.123.32
Exemplo de um ip ipv6: 2001:0DB8:AD1F:25E2:CADE:CAFE:F0CA:84C1

Todos os seus dispostivos possui um ip e sem ele não da para conectar a internet. O website que você acessa também possui um ip. Essa série de números é como se fosse o “rg” do dispositivo.

O que é uma porta?

Portas são softwares associados a um serviço especifico.
No caso a porta 80 ou 443, indica que um software que usa http/https está rodando naquele host.

O que é DNS?

Como você ja sabe, na internet os dispostivos/hosts são identificados pelo IP.
Porém para nós meros mortais, seria dificil memorizar esses números.

Quando o host cliente acessa um recurso web utilizando o hostname:

  www.google.com

Fica a cargo dos servidores DNS traduzir as solicitações de hostnames em endereços IP, e vice-versa.

Isso é tudo pessoal, até a proxima!