Skip to main content dev:Coelho

Programaçao De Scripts - Aula 05

Javascript

Como viamos na Programaçao de Scripts - Aula 01 , o javascript são as funcionalidades do carro, mas unido ao Node é como o motor do mesmo.

Vamos começar com essas funcionalidades “públicas”, que irá ajudar-nos a dar um dinamismo para o nosso site.

A Tag Script

Para exibirmos um comando javascript, precisamos de uma tag html para identificar um script em específico.

html code snippet start

<script>
console.log("Hello World!");
</script>

html code snippet end

Esta tag pode ser utilizada dentro do <head> ou dentro do <body>, e tudo o que estiver dentro da tag <script> ele irá processar.

No entanto, é de bom tom (e boas práticas) colocar os scripts no fim do corpo do site, no fim do body, para que seus scripts não impeçam o carregamento da estrutura do seu site.

html code snippet start

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo</title>
    </head>
    <body>
        <!--Corpo do site-->
        <script>
            /*Seus scripts*/
        </script>
    </body>
</html>

html code snippet end

Ao invés de ter o script escrito no corpo do seu site, nós podemos passar um parâmetro “source” para procurar um arquivo e carregá-lo.

<script src="caminho/do/arquivo.js"></script>

Isto também é boas práticas, pois a modularização em ter em arquivos separados torna mais fácil o carregamento do site (por conta do cache), e também para reutilização de scripts em diversas páginas. Imagine ter um mesmo escopo de código em todas as suas páginas de forma escrita. Tendo um arquivo com ela, ao referenciar o arquivo, o cache não vai precisar recarregar este código toda vez, mas apenas uma.

Básico de Javascript

Suas funções matemáticas são iguais às das maiores linguagens.

Na questão de variáveis, nós temos duas palavras registradas para criar e não são mais os tipos primitivos.

var x = 1; <- Esta variável x é de escopo global e pode ser acessada em qualquer lugar.

let x = 1; <- Esta variável x é de escopo local, e só pode ser acessada dentro de um mesmo escopo.

Basicamente nunca use var, pois o var mascara muito erro. Te dá a sensação de que tudo está bem, até não estar tudo bem.

Temos também o const que, como o nome já declara, é uma constante.

Nome de variável precisa estar coerente, e se tiver let x é um ponto inteiro a menos no trabalho

Hoisting

Conceito teoricamente simples mas que dá muito problema se for mal feito. Hoisting é um comportamento fundamental do JavaScript onde declarações de variáveis e funções são “elevadas” (hoisted) para o topo de seu escopo atual antes da execução do código. É como se o JavaScript fisicamente movesse estas declarações para o início do escopo, embora na realidade seja uma questão de como o motor JavaScript compila e executa o código.

Variáveis declaradas com var

Quando declaramos variáveis com var, a declaração é elevada para o topo do escopo, mas a inicialização permanece no local original.

javascript code snippet start

console.log(nome); // undefined (não gera erro!)
var nome = "Jr";
console.log(nome); // "Jr"

javascript code snippet end

O que realmente acontece internamente é algo como:

javascript code snippet start

var nome;           // Declaração é elevada para o topo
console.log(nome);  // undefined (a variável existe, mas ainda sem valor)
nome = "Carlos";    // A atribuição permanece no lugar original
console.log(nome);  // "Carlos"

javascript code snippet end

É por isso que o primeiro console.log mostra undefined em vez de gerar um erro - a variável já existe, apenas ainda não foi inicializada.

Variáveis declaradas com let e const

Com let e const, introduzidos no ES6, o comportamento é diferente:

javascript code snippet start

console.log(varExemplo); // undefined
console.log(letExemplo); // ReferenceError: Cannot access 'letExemplo' before initialization
console.log(constExemplo); // ReferenceError: Cannot access 'constExemplo' before initialization

var varExemplo = "var";
let letExemplo = "let";
const constExemplo = "const";

javascript code snippet end

Variáveis declaradas com let e const também são hoisted, mas diferentemente de var, elas ficam em uma “Zona Morta Temporal” (Temporal Dead Zone) até que a linha de declaração seja alcançada no código. Tentar acessá-las antes disso resulta em um erro de referência.

Por que o Hoisting Existe?

O hoisting foi originalmente projetado para permitir que programadores organizem seu código de maneira mais natural, especialmente para funções.

No entanto, para variáveis, especialmente com var, o hoisting pode levar a comportamentos inesperados e bugs difíceis de detectar.

Compreender esse comportamento é essencial para escrever código JavaScript previsível e livre de bugs. let, const e classes, o JavaScript moderno oferece maneiras de gerenciar o escopo de forma mais intuitiva, mas o entendimento do hoisting continua sendo uma parte importante do domínio da linguagem.

Operadores básicos

  • == (igual a): Compara se os valores são iguais
  • != (diferente de): Compara se os valores são diferentes
  • > (maior que): Verifica se o valor da esquerda é maior que o da direita
  • < (menor que): Verifica se o valor da esquerda é menor que o da direita
  • >= (maior ou igual a): Verifica se o valor da esquerda é maior ou igual ao da direita
  • <= (menor ou igual a): Verifica se o valor da esquerda é menor ou igual ao da direita

Por que JavaScript tem === e !==?

JavaScript tem dois tipos adicionais de operadores de igualdade:

  • === (estritamente igual a): Compara valor E tipo
  • !== (estritamente diferente de): Compara se o valor OU o tipo são diferentes

A razão para JavaScript ter esses operadores adicionais está relacionada com seu comportamento de coerção de tipos. JavaScript é uma linguagem de tipagem dinâmica e fraca, o que significa que ela tenta converter (coagir) automaticamente tipos diferentes quando necessário.

Exemplo com == (igualdade com coerção)

javascript code snippet start

5 == "5"   // true (string "5" é convertida para número 5)
0 == false // true (false é convertido para 0)
null == undefined // true (considerados equivalentes)

javascript code snippet end

Exemplo com === (igualdade estrita)

javascript code snippet start

5 === "5"   // false (tipos diferentes: número vs string)
0 === false // false (tipos diferentes: número vs booleano)
null === undefined // false (tipos diferentes)

javascript code snippet end

Recomenda-se usar === e !== por padrão, a menos que você tenha uma razão específica para não utilizar.

Tipos de Dados em JavaScript

JavaScript possui sete tipos de dados primitivos:

  1. Number: Representa números inteiros e de ponto flutuante

    javascript code snippet start

    let inteiro = 42;
let decimal = 3.14;

    javascript code snippet end

  2. String: Sequências de caracteres

    javascript code snippet start

    let texto = "Hello";
let aspasSimples = 'World';
let templateString = `Hello ${texto}`;

    javascript code snippet end

  3. Boolean: Valores lógicos verdadeiro/falso

    javascript code snippet start

    let verdadeiro = true;
let falso = false;

    javascript code snippet end

  4. Undefined: Valor atribuído automaticamente a variáveis declaradas mas não inicializadas

    javascript code snippet start

    let naoDefinido;  // valor é undefined

    javascript code snippet end

  5. Null: Representa a ausência intencional de valor

    javascript code snippet start

    let vazio = null;

    javascript code snippet end

  6. Symbol (ES6): Valor único e imutável, usado como identificador

    javascript code snippet start

    let simbolo = Symbol('descricao');

    javascript code snippet end

  7. BigInt (ES2020): Para inteiros de precisão arbitrária

    javascript code snippet start

    let numeroGrande = 9007199254740991n;

    javascript code snippet end

Além destes, JavaScript tem um tipo de dados complexo:

Object: Coleção de propriedades

javascript code snippet start

let pessoa = {nome: "Ana", idade: 30};

javascript code snippet end

Arrays, funções e datas são todos objetos em JavaScript:

javascript code snippet start

let array = [1, 2, 3];
let funcao = function() { return true; };
let data = new Date();

javascript code snippet end

JavaScript é uma linguagem de tipagem dinâmica, o que significa que as variáveis não são associadas a um tipo específico e podem mudar de tipo:

javascript code snippet start

let x = 10;      // x é um número
x = "texto";     // agora x é uma string

javascript code snippet end

Para verificar o tipo, use o operador typeof:

javascript code snippet start

typeof 42;        // "number"
typeof "hello";   // "string"
typeof true;      // "boolean"
typeof undefined; // "undefined"
typeof null;      // "object" (isso é um bug de um milhão de dólares)
typeof {};        // "object"
typeof [];        // "object" (arrays são objetos)
typeof function(){}; // "function"

javascript code snippet end

O fato de arrays serem objetos é importantíssimo para que possamos utilizar métodos desta classe como push() e pop() nativamente dentro do seu array, assim como em Java, Rust e outras linguagens.