JavaScript

JavaScript é uma linguagem de programação utilizada para criar interações em um site. O ECMAscript é a padronização internacional dessa linguagem, a última versão é de 2018.
É importante frisar que JavaScript e java sao linguagens completamente diferentes. A semelhança no nome foi uma estrátégia de marketing por parte dos criadores do JS, pois o nome java estava famoso na época em que eles desenvolveram essa linguagem.

Tecnologias baseadas em JS

Framework na área de TI é um conjunto de códigos genéricos capaz de unir trechos de um projeto. Abaixo temos alguns frameworks baseados em JavaScript:

• Jquery
• Angular
• React (biblioteca do facebook)
• Vue
• Electron
• Ionic
• Cordova

variáveis e tipos primitivos

Variáveis são o termo que carrega a informação e são representadas pela sigla 'var'.
EXEMPLO:

            var n1 = 3
            var n2 = 5
            var s = n1 + n2
            alert(`Resultado ${n1} + ${n2} = ${s}`)
        

Tipos primitivos são os tipos de informação que as variáveis carregam. Principais:

• Number
• String (conjunto de caracters, número ou letas. ex: nomes, CPF)
• Boolean (true or false)
• null (torna uma variável vazia)
• undefined
• Object
• function

Funções que aprendi até agora

• window.prompt('') - cria um pop-up com campo para resposta escrita
• window.alert('') - cria um pop-up com ok e cancelar
• document.write(``) - Mostra a resposta do prompt na tela
• .toUpperCase() - deixa todas as letras da variável maiúculas.
  (ex: nome.toUpperCase() = CAROL)
• .toFixed(2) - mostra mais casas decimais após a vírgula de um número (dentro do parênteses você bota a quantidade de casas desejada)
• .tolocaleString('pt-br', {style: 'currency', currency: 'BRL'}) - essa função configura seu número com as regras monetárias brasileira.
  (ex: R$ 1.143,50)
• .tolength - conta o número de caracters
• .toLowerCase() - torna todas as letras minúsculas

Conversão de tipo

• String → number = evelopar o comando prompt com number()

          var n1 = Number(window.prompt('Digite um número: '))
          var n2 = Number(window.prompt('Digite outro número: '))
          var s = n1 + n2
          alert(`Resultado ${n1} + ${n2} = ${s}`)
              

  (Obs: É uma característica do comando prompt tratar as informações das variáveis como string.)


• Number → String = usar o comando String(variável) ou variável.toString

          var n1 = Number(window.prompt('Digite um número: '))
          var n2 = Number(window.prompt('Digite outro número: '))
          var s = n1 + n2
          alert('O resultado é ' + string(s))
          

  Obs: nesse caso é inútil mas foi só um exemplo

Operadores

Nesse curso que estou fazendo vou estudar apenas as famílias dos operadores aritiméticos, de atribuição, relacionais, lógicos e ternários.

Operador aritimético

Operadores utilizados para fazer cáculos. São operadores binários (dois operandos). Ordem de precedência:

() → ** → * % / → + -

• ** → potência
• * → multiplicação
• / → divisão
• % → resto (da divisão)
• + → adição
• - → subtração

Operador de atribuição

São operadores que guardam as informações nas variáveis.

• Atribuição simples → recebe um valor inicial (=)
• Auto-atribuição → soma um valor ao seu valor próprio valor

            var b = 2       var a = 9
            b = n + 3       a = a * 2
            b = 5           a = 18
            b = n * 2       a = a - 8
            b = 10          a = 10
        

Simplificação da auto-atribuição:

            var b = 2   var x = 3   var a = 9
            b += 3      x %= 2      a /= 2
            b =  5      x = 1       a = 4.5
            b -= 1      x *= 7      a *= 5
            6 = 4       x = 7       a = 22.5
        

Operador de incremento (e decremento)

O incremento soma 1 ao valor da variável e o decremento subtrai 1.

• Pré-incremento → ++ antes da variável

            Ex: >var x = 3
                >++x
                4
                >++X
                5
                >++X
                6
        

• Pós-incremento → ++ depois da variável

            Ex: >var y = 10
                >y++
                10
                >y
                11
No pós incremento a soma é feita depois.        
        

• Pré-decremento → -- antes da variável

             Ex:>var b = 7
                >--b
                6
                >--6
                5
            

• Pós-decremento

            Ex: >var a = 4
                >a--
                4
                >a
                3
    

Operadores relacionais

Compara as informações das variáveis com:

• > → maior que
• < → menor que
• >= → maior ou igual
• <= → menor ou igual
• == → igual
• != → diferente

Esses operadores acima comparam o valor da variável e não o tipo. Ou seja (número) 5 == '5' (string pq tem esses outros caracters) o operador considera true.

Para comparar tipos com o operador relacional, precisamos utilizar o operador relacional de identidade (igualdade restrita). Basta adicionar mais um sinal de = ao operador.

EXEMPLO:

5 === '5' false

5 !== '5' true

Operadores lógicos

• ! (negação) - operador unário

O operador mais fácil. Só é errado, false, negado o que for atrelado à 
 operador. 
Ex: Não aceitamos candidatos de outras cidades (São Paulo)
    ! são paulo = dispensado
    
    

• && ('e' lógico) - conjunção

        T && T = true 
        T && F = false
        F && T = false
        F && F = false 
Os dois operandos tem que conter a informação correta, requisitada, 
verdadeira. Ex: 
    Para essa vaga é necessário ser mulher e solteira
    mulher && solteira = contratada
    homem && solteiro  = dispensado
    mulher && casada   = dispensada
    

• || ('ou' lógico) - disjunção

        T || T = true 
        T || F = true
        F || T = true 
        F || F = false
Basta que um dos operandos seja o correto, requisitado, verdadeiro.
Ex: Para essa vaga precisamos de uma pessoa solteira.
    mulher || solteira = contratada
    homem  || solteiro = contratado
    Homem  || casado   = dispensado
    

Ordem de precedência dos operadores

Aritiméticos → Relacionais → Lógicos

1º  ()          sem ordem         !
2º  **           interna          &&
3º  * % /                         ||
4º  + -                             

Operadore ternário

Tem 3 operandos, por isso o nome.

Teste ? true : false

Avalia se a variável está dentro do exigido, certa, verdadeira.

Exemplo:

    Var nota = 9
    nota >= 7 ? 'aprovado' : 'reprovado'
    aprovado

DOM - Document Object Model

Árvore DOM é a organização hierarquica dos elementos que compõe uma página web ou projeto. A hierarquia começa no window (o navegador), o window possui todos os outros elementos.

EXEMPLO:

Métodos de acesso elementos DOM

• Por Marca - getElementByTagName: é bem genérico pois seleciona por tag, sendo assim se tem mais de uma tag iguais ele seleciona todas. Caso queira selecionar uma específica por esse método tem que específicar pela numeração entre colchetes no final da declaração, sendo 0 a primeira.
• Por nome - getElementByName: seleciona elementos com o parâmetro Name = ""
• Por Id - getElementById: tag com parãmentro Id = ""
• Por class - getElementByClassName: tag com parâmentro class = ""
• Por Seletor - querrySelector: selecionar tags com parâmetro Id e class, basta usar a formatação do css.
• Por nome - getElementByName: tag com parâmetro name = ""

Eventos DOM

Evento é tudo aquilo que pode acontecer com um elemento, os mais comuns são eventos com o mouse (ex: clicar, passar o mouse em cima, tirar o mouse). As funcões são programadas em blocos no JS e só são executadas quando o evento DOM acontece.