Blog
O conhecimento liberta!
A base do JavaScript
O JavaScript é uma linguagem de programação muito popular na internet, basicamente qualquer site que você use hoje em dia muito provavelmente foi feito em JS. Quer aprender o básico para começar?
Tecnologia
Programação
@nilodial
Nilo
Dial
@nilodial
O QUE É JAVASCRIPT?
JavaScript é uma linguagem de programação muito popular na internet, basicamente qualquer site que você use hoje em dia muito provavelmente foi feito em JS. Se trata de uma linguagem de programação client-side isso significa que ela é executada no lado do cliente (um navegador do computador, por exemplo), mas não para por ai, o JS ficou tão poderoso com o passar do tempo que acabou indo para o lado do servidor também, atualmente é uma linguagem web muito poderosa, possibilitando construir um front-end e um back-end inteiro apenas usando ela.
Para chegar no resultado final que nos vemos nos sites que utilizamos no dia a dia o JS é complementado com outras ferramentas, as principais são o HTML, ferramenta responsável pelo conteúdo de uma página e CSS, ferramenta responsável pela estilização de uma página. Basicamente é com o HTML que inserimos conteúdo nas páginas, texto, imagens e etc, e para deixar tudo isso organizado e bonito, utilizamos o CSS, por fim, para dar vida a tudo isso o JS entra em ação.
OS PRIMEIROS PASSOS
Para começar a estudar você vai precisar de algumas ferramentas, no caso do JS não são muitas, basicamente três, o Google Chrome, você precisa de um navegador. Um editor de código, recomendo o VSCode, da Microsoft e o Node.js, o Node é uma ferramenta que possibilita que você utilize o JS fora de um navegador, no lado do servidor por exemplo, só para aprender o JS ele não é necessário, já que você pode digitar os seus primeiros comandos direto no console do navegador, porém, como vamos usar um editor de código externo para editar nossos códigos (VSCode), precisamos rodar o JS dentro dele, é ai que o Node entra em ação nesse caso.
Se você sabe o que é o Github, já tem um conhecimento sobre essa ferramenta, eu recomendo que você crie um repositório na plataforma e use o CodeSpaces, o CodeSpaces é um ambiente de desenvolvimento do GitHub na nuvem, que monta um ambiente de desenvolvimento completo para você usar no seu repositório, nesse caso tudo fica online e você não precisa baixar nem instalar nada, o Node já vem instalado automaticamente nesse ambiente, é só usar!
COMENTÁRIOS
Os comentários servem para você comentar seu código, mas se você simplesmente escrever um texto no meio do seu código, ele vai se misturar e dar erro, é para isso que serve os símbolos // e o /* */.
Com o // você pode escrever um comentário em uma linha, já com o / * */ você pode escrever em mais de uma linha.
//Comentário de exemplo
/* Comentário de exemplo usando duas linhas */
Dessa forma você consegue deixar comentários pelo seu código sem que ele quebre.
<!— Comentários dentro do HTML —>
/* Comentários dentro do CSS */
Também é possível deixar comentários no seu HTML e CSS como nos exemplos a cima.
VARIÁVEIS
As variáveis basicamente são informações que você deixa armazenada, para conseguir solicitar depois, exemplo, se você montar uma variável: Var vaga = carro, significa que quando você solicitar a vaga(identificador) ela vai retornar a informação armazenada que no casso é “carro”.
CONVERSÃO DE TIPOS:
STRING -> NÚMERO
Para converter uma string para um number precisamos fazer uma conversão. Podemos usar numa variável o método Number(), dessa forma o JS vai identificar automaticamente se é um número inteiro ou real, porém também conseguimos definir isso manualmente, com NumberInt(), para números inteiros e NumberFloat(), para números reais.
CONVERSÃO DE TIPOS:
NÚMERO -> STRING
Para converter um number para uma string é muito semelhante, podemos usar numa variável o método String() ou .toString().
FORMATANDO STRING
Existem formas de formatar uma string, muitas vezes utilizamos o valor de uma variável dentro de uma string, e nesses casos podemos formatar a string para o resultado final ser apresentado na tela na forma que a gente definir, como por exemplo:
var j = "JavaScript"
"Estou aprendendo j" | Não faz interpolação, resultado: Estou aprendendo j "Estou aprendendo " + j | Usa concatenação, resultado: Estou aprendendo JavaScript Estou aprendendo ${j} | Usa template string, resultado: Estou aprendendo JavaScrip
.length | Quantos caracteres a string tem .toUpperCase() | Deixa tudo em Maiúsculo .toLowerCase() | Deixa tudo em Minúsculo
.toFixed(2) | Arredondar valor, exemplo 10.5, ficaria 10.50 .toFixed(2).replace('.', ',') | Além de arredondar o número, troca o ponto por vírgula, exemplo 10,50 .toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'}) | Para formatar em valor de moeda.
OPERADORES
Os operadores aritméticos são:
+ | Somar
- | Subtrair
* | Multiplicar
/ | Dividir
% | Resto da divisão
** | Ao quadrado
Ordem de precedência – Aritméticos
()
**
* // %
- +
Operadores relacionais
> | Maior
< | Menor
= | Maior ou igual
<= | Menor ou igual
== | Igual
!= | Diferente
=== | Idêntico
Operadores Lógicos
! | Negação
&& | Conjunção “e…”
|| | Disjunção “ou…”
Ordem de precedência – Geral
- Aritméticos
- Relacionais
- Lógicos
DOM
O DOM (Document Object Model) é basicamente a estrutura que roda no navegador para a construção e edição de elementos dentro de um site, é ele que editamos para construir nosso site do jeito que desejamos.
É possível selecionar arquivos com os seletores:
Marca – getElementsByTagName()
ID – getElementById()
Nome – getElementsByName()
Classe – getElementsByClassName()
Seletor – querySelector() - querySelectorAll()
CONDIÇÕES
Condição basicamente é quando você abre uma “bifurcação” no código, invés dele seguir de uma forma linear, com a condição abrimos opções de “caminhos” que o código pode seguir, exemplo, se o usuário digitar o número de telefone corretamente siga o fluxo, se ele digitar um número invalido aparece uma janela de erro falando para ele tentar novamente com um número valido. Nesse exemplo criamos uma condição com dois caminhos possíveis.
Vale lembrar que também é possível criar condições simples, onde só abre uma ramificação no código. Você também pode fazer uma condição “alinhada”, basicamente nela colocamos mais de duas condições, na prática, você vai colocar outro if dentro do else, você pode fazer isso quantas vezes precisar, formando assim a sua condição alinhada. Também existe a condição múltipla, que conseguimos fazer usando a expressão switch, o switch usa valores fixos, ele pega o resultado da expressão e procura o valor da mesma dentro dos switches, se não achar um valor verdadeiro ela roda um comando definido como padrão, que podemos configurar.
if | se..
else | se não…
ESTRUTURA DE CONTROLE
Vale lembrar que programar é sair do ponto A e chegar no ponto B, uma ação de cada fez, para ir de um ponto para o outro usamos as estruturas de controle, a mais simples de todas é a sequência, onde vamos do ponto A até o B executando varias ações sequencialmente. Mas nem todo código vai rodar de forma linear, como já vimos nas “condições“, e agora entramos nas repetições.
REPETIÇÕES
Repetição começa com um teste, parecido com a condição, porém ela retorna valores verdadeiro e falso, e invés de continuar o código como acontece nas condições, a repetição faz um looping e retorna para o início, exemplo, o teste retornou true(verdadeiro) então a repetição é executada novamente e repete enquanto o resultado for true, a repetição só vai parar quando retornar false(falso), quando isso acontecer a looping é finalizado e o fluxo segue.
Para rodar a repetição podemos usar o while() que faz o teste lógico e depois executa o bloco. Podemos usar também o do{}while(), nesse caso ele executa o código e depois faz o teste lógico, para descobrir se o valor é verdadeiro ou falso.
E também usamos bastante o for(){} que é uma estrutura de repetição com uma variável de controle, basicamente funciona da mesma forma que o while.
VARIÁVEIS COMPOSTAS
Com as variáveis compostas conseguimos armazenar mais de uma informação dentro da mesma variável, diferente da variável simples, para organizar isso usamos: var x = [0, 1, 2...], resumindo, variável composta é uma variável com mais de um elemento e cada elemento tem um valor e sua chave de identificação. Cada elemento adicionado na variável é adicionado no index da variável, que nada mais é que um “espaço” dentro do [ ], cada elemento dentro do index é numerado, a contagem sempre começa do 0, por exemplo:
var num = [12, 7, 9];
A identificação de cada elemento dentro dos colchetes seria 0, 1 e 2.
É o mesmo que 0 = 12; 1 = 7; 2 = 9;
FUNÇÕES
Funções basicamente são ações dentro do seu código que são executadas sempre que são solicitadas ou com a decorrência de algum evento que acione a função. A função pode receber parâmetros e retornar um resultado.
OBJETOS
O objeto é parecido com a variável composta, mas usamos chaves { }, diferente dos array que o index é sempre numerado, começando do 0, no objeto podemos dar um nome para cada “espaço” do index, exemplo:
var pessoa = {nome: "Lucas", idade: 20, sexo "M"}
Veja o projeto no GitHub junto com os exercícios.
Recomendações
