O Básico de JavaScript!
Conhecendo JavaScript
- JavaScript foi criada em 1995, por Brendan Eich, a pedido da empresa Netscape (um dos primeiros navegadores) com o objetivo de validar formulários HTML.
- É uma linguagem de programação usada por desenvolvedores para fazer páginas interativas da Internet.
- ECMAScript é a versão padronizada do JavaScript.
Primeiros Passos em JavaScript
- Instalar um navegador (Internet Explorer, Firefox, Google Chrome).
- Baixar e instalar o VSCode (Visual Studio Code) e o NodeJS.
- Saber que praticar e tão importante quanto assistir os vídeos.
Criando o primeiro Script
- alert('Olá, mundo!'): vai aparecer na tela mensagem de alerta "Olá, mundo!"
- window.confirm('Está gostando de JavaScript?'): vai aparecer na tela mensagem de confirmação "Está gostando de JavaScript?".
- prompt('Qual é seu nome?'): vai aparecer na tela mensagem de pergunta "Qual é seu nome?", possibilitando digitar no campo.
Tipos de Dados e Variavéis
- Boolean: verdadeiro (true) or falso (false).
- Null: variável nula.
- Undefined variável indefinida.
- Number: variável numérica. Pode ser inteira ou real.
- String: são os textos, declarados entres aspas simples ou dupla.
- Symbol: Usados internamente como chaves de propriedades de objetos.
- Object: são estruturas de dados usadas para criar o equivalente em outras liguagens a listas, arrays, dicionários, arrays associativos, dentre outros.
- Variáveis: são criadas para guardar dados(números, strings e boolean) na memória.
- var: é declarada e iniciada no escopo da função, pode ser local ou global e é permitido a redeclaração e reatribuição.
- let: é declarada no escopo da função, permite reatribuição mas não permite redeclaração.
- const: é declarada no escopo da função, não permite reatribuição e redeclaração;
- Indetificadores: são os nomes que damos para as variáveis.
- Podem começar com letra, $ ou _.
- Não podem começar com números.
- É possível usar letras ou números, acentos e símbolos.
- Nao podem conter espaços e palavras reservadas.
- Comentários: // - em única linha de código e /* - em mais de uma linha de código.
Há sete tipos de dados:
Tratamento de Dados
Conversão de Strings para Números
- Existe três maneiras de converter strings em números:
- Number.parseInt(n) - Para transformar em números inteiros.
- Number.parseFloat(n) - Para transformar em números decimais.
- Number(n) - Para transformar em números inteiros e decimais.
- Exemplos:
Conversão de Números para Strings
- Existe duas maneiras de converter números em strings:
- String(n)
- n.toString()
- Exemplos:
- Observação: por padrão o prompt já é no formato String.
Template Strings
- É uma forma de formatar as strings usando ${nome} crase``.
- Exemplos:
Formatando Números
- Usando toFixed():
- Exemplo 1:
- Exemplo 2:
- Usando toLocaleString:
- Exemplo 3:
Foi aumentado as casas decimais para 2.
Foi aumentado as casas decimais para 3 e trocou o ponto '.' por vírgula ','.
Foi transformado o número no formato em reais R$.
Operadores de JavaScript
Ordem de execução dos operadores:
Operadores Aritméticos >
Operadores Relacionais > Operadores Lógicos.
Operadores Aritméticos e Atribuição
- + : Soma
- - : Subtrair
- * : Multiplicação
- / : Divisão
- % : Resto da Divisão
- ** : Potência
- Ordem de Precedência:
- Simplificando:
- Incremento: Muito utilizado na programação.
Operadores Relacionais
- > : Maior que
- < : Menor que
- >= : Maior ou igual
- <= : Menor ou igual
- == : Igual
- != : Diferente
- === : Idêntico
- !== : Tipos diferentes
- Exemplos:
- Identidade:
Lógicos
- ! : Negação (não)
- && : Conjunção (e)
- || : Disjunção (ou)
- Ordem de execução : ! (não), && (e), || (ou).
- Exemplos:
Tenários
- É composto por ? e : na mesma expressão.
- Tem três parte, o primeiro é o bloco de teste, o segundo é o que vai acontecer quando o teste for verdadeiro e o último é o que vai acontecer quando o teste for falso.
- Exemplo - 1 :
- Exemplo - 2 :
DOM (Document Object Model)
Conhecendo o DOM
- É o modelo de objetos para documento, sendo conjunto de objetos dentro do navegador que podem ser manipulados.
- Árvore DOM começa da raiz (window) que tem os objetos (location, document, history).
- Podemos selecionar os elementos por: Tag, ID, Nome, Classe e Seletor.
- Tag: getElementsByTagName()
- ID: getElementsById()
- Name: getElementsByName()
- Classe: getElementsByClassName()
- Seletor: querySelector() e querySelectorAll()
- Elementos Parent: .parentNode ou .parentElement
- Elementos Child: .childNode ou .childElement
Pode selecionar mais de um elemento ou indicar apenas um elemento, no exemplo abaixo selecionamos a tag 'p' e indicamos com [0] qual elemento.
innerText: mostra o texto selecionado na tela.
Eventos DOM
- São modificações que podemos fazer com os elementos. Existem diversos eventos, alguns são para determinados elementos. Para saber mais sobre os eventos disponíveis acessa o link: Eventos DOM.
- Funções: é um conjunto de códigos que vão ser executadas quando o evento ocorrer. Bloco é delimitado entre as chaves {} e é nomeado como function, nomes da funções são nomes do evento que podem ter parametros.
- Exemplo 1:
Condições
- IF: Se
- ELSE: Se não
- Condições Simples: é quando a condição tem apenas o if se a condição for falsa não vai acontecer nada.
- Exemplo:
- Condições Composta: é quando a condição tem if e else.
- Exemplo:
- Condições Aninhadas: é uma condição composta com outras condições
dentro, usando o if, else e else if.
- Exemplo:
- Condição Múltipla: é utilizadas para valores fixos, tendo a possibilidade de outro valores. Usando a estrutura switch, sempre usar break no final de cade case.
- Exemplo:
Tipos de Condições
Repetições (Laços)
- WHILE: Estrutura de repetição com o teste lógico no início, sendo que enquanto a condição for verdadeira vai se repetindo até que a condição seja falsa.
- DO WHILE: Estrutura de repetição com teste lógico no final. Primeiro executa o teste lógico e vai repetindo até que a condição for falsa.
- Exemplo:
- FOR: tem três partes (início; teste; incremento). Na primeira parte vai fazer a inicialização e o teste, sendo que se o teste for verdadeiro vai executa o bloco, depois retorna e faz o incremento e executa o bloco novamente. Se for o bloco for falsa, para de repetir.
- Exemplo:
No caso do exemplo acima tanto com while e do while o resultado é o mesmo
Variáveis Composta
- São capazes de armazenar vários valores em uma mesma estrutura.
- Vetor (Array): é composto de elementos, um elemento é um par que agrupa o espaço da memória com o valor que está colocado dentro dele e o índice.
- [ ]: São utilizados colchetes para declarar os vetores.
- nomeVariavel.push()
- nomeVariavel [i] = valor
- Exemplo:
- .length: é utilizado para saber o tamanho do array.
- .sort(): é utilizado para alterar a ordem dos elementos em ordem crescente.
- Exemplo:
- .indexOf(): é utilizado para buscar valores dentro de um vetor.
- Exemplo:
Observação: o índice sempre começa com o valor 0.
Existe duas formar de acrescentar valores a um array:
Resultado:
Observação: no JavaScript length não tem () depois da palavra, é um atributo.
Resultado:
Forma mais simplificada:
Resultado:
Resultado:
Observação: quando buscar e não encontrar o valor no vetor, o JavaScript vai retorna - 1.
Funções
- São ações executadas assim que são chamadas ou em decorrência de algum evento.
- Uma função pode receber parâmetros e retorna um resultado.
- Parâmetro: é composto de elementos, um elemento é um par que agrupa o espaço da memória com o valor que está colocado dentro dele e o índice.
- [ ]: São utilizados colchetes para declarar os vetores.
- No exemplo abaixo, podemos utilizar os parâmetros predefinidos (opcionais) que recebem 0:
Exemplo:
Resultado:
Resultado:
Caso não tivemos colocado os parâmetros predefinidos o resultado seria NaN, porque um valor seria undefined.
Próximos Passos
- Fazer curso de HTML e CSS.
- Estudar functions.
- Estudar objetos.
- Estudar modularização.
- Estudar expressões regulares (RegEx).
- Estudar JSON.
- Estudar AJAX.
- Estudar NodeJS.
- Estudar outros frameworks e bibliotecas.