Introdução ao Javascript OBSERVAÇÃO

Em 1994, a empresa NETSCAPE foi fundada ECMA SCRIPT é a versão da linguagem de

e oferecia um navegador chamado programação Javascript padronizada.
NETSCAPE Navigator, e em 1995 a empresa
criava a linguagem de programação Mooka,
por Brandon Eich, e por conta da
Referência para estudo
popularidade da linguagem JAVA, a equipe
de desenvolvimento do “Mooka” viu uma Livro: Javascript – O guia definitivo, por
oportunidade de fazer com que a linguagem David Flanagan.
deles tivesse o hype da linguagem JAVA, e
então o “Mooka” mudou para “Javascript”. Livro: Javasvcript – O guia do programador,
por Mauricio Samy Silva.
Em 1997, a NETSCAPE procurou uma
empresa para que pudessem padronizar a Guia de referência – Mozilla
linguagem Javascript, essa empresa foi a Guia de referência – ECMA
ECMA (Associação Europeia dos Fabricantes
de Computadores). Isso aconteceu porquê a
Microsoft estava copiando os arquivos do
Javascript e criando uma linguagem própria, Comentários em Javascript
a NETSCAPE viu que isso iria causar sérios Comentários dentro do Javascript servem
problemas e então buscaram padronizar a para explicar alguma parte do código e isso
linguagem Javascript. pode ajudar outros desenvolvedores a
Em 2002, a guerra entre NETSCAPE e entender o que você quer realizar com o seu
Microsft foi encerrada, porém a empresa código. Comentários não são executados.
NETSCAPE faliu, por conta que o Windows “Quem comenta bem o seu código, mantêm
começou a vender seus sistemas ele bem documentado”
operacionais com navegador incluso padrão
(internet explorer), fazendo com que a Comentários dentro do Javascript:
NETSCAPE perdesse muito o mercado vindo
// - Usamos duas barras oblíqua para
a falência. Neste mesmo ano, uma equipe
comentar uma linha de código (apenas uma
de desenvolvedores da NETSCAPE
linha será comentada) // Isso será
desenvolveram outro navegador, que hoje
comentado
se chama Firefox.
/**/ - Usamos a barra obliqua junto de
Em 2008, a Google entrava também no
asterisco para comentar múltiplas linhas de
mercado de navegadores, lançando o
código (será comentado tudo que estiver
Google Chrome que continha um motor
entre os asteriscos, podendo comentar
interno de Javascript chamado v8, com
múltiplas linhas). /*Isso será comentado*/
código aberto (fazendo muito sucesso, e em
pouco tempo se tornou um dos 3
navegadores mais usados no mundo).
Depuração
Em 2010, uma galera pega o código do v8 do
Chrome, fazem mudanças e desenvolve o Depurar é você ver como o seu programa
Node.js, fazendo com que o Javascript está rodando/executando para caso
rodasse também fora dos navegadores. necessário, realizar correções.
 Variáveis
Podemos armazenar informações na
memória do computador através das
variáveis.
Para armazenar informações, temos 3
palavras reservadas dentro do Javascript:
Var, Let e Const.
Escrevemos a palavra reservada seguida do
nome que queremos adicionar a esta
variável, e então usamos o sinal de
atribuição “=” seguido do valor que vamos
adicionar a esta variável, ficando assim:
Palavra reservada + nome + atribuição +
valor
Let nomeDaVariavel = valorDaVariavel
IMPORTANTE: Existem regras para nomear
uma variável, e ela não pode começar com
número, não pode conter espaços, precisa
fazer sentido, letras maiúsculas e
minúsculas fazem a diferença.
OBSERVAÇÃO
O sinal de atribuição “=” é lido como
“recebe” e não “igual”.
O Javascript é dinâmico
O Javascript é uma linguagem muito
dinâmica, por isso, ao declarar um valor a
uma variável automaticamente ele
determina qual é o tipo de dado que o valor
tem, por exemplo: caso você digite um
número como valor de uma variável o
próprio Javascript determinará que ele é do
tipo “Number”, se você declarar um valor
entre aspas duplas ou simples (“ “ ou ‘ ‘) ele
determinará que o tipo de dado é uma
String e caso você declare como “true” ou
“false” o tipo de dado será um boolean. E
esses tipos de dados são os dados
primitivos. Number, String e Boolean.
Tipo primitivo de dado
“Number”
O tipo de dado “number” é um valor
numérico, ou seja, uma variável que tem
valor atribuído com um número. Exemplo:
Let numero = 10
Esse tipo de dado é um “Number”
Tipo primitivo de dado
“String”
O tipo de dado “string” é uma cadeia de
caracteres, ou seja, pode ser um texto, uma
frase ou até mesmo um número, tudo isso
dentro de aspas simples, aspas duplas e até
mesmo dentro do símbolo de crase.
Exemplo:
Let aspasSimples = ‘Texto aqui’
Let aspasDuplas = “Texto aqui”
Let crase = `Texto aqui`
IMPORTANTE: Ao usar o símbolo da crase
para uma String, lembre-se que estará
utilizando o template literals, uma
funcionalidade do Javascript onde podemos
concatenar elementos dentro da crase sem
a necessidade de utilizar o “+” (símbolo de
concatenação dentro do javascript),
fazendo com que o código fique bem mais
limpo. Exemplo:
Com crase:
Let texto = `O usuário ${variável do nome
aqui} foi aceito`
Com aspas duplas ou simples:
Let texto = “o usuário” + variável do nome
aqui + “foi aceito”
A vantagem de utilizar a crase para
concatenar é para deixar o código muito
mais limpo e mais visível, utilizando ${}.
 Tipo primitivo de dado Dica símbolo de adição “+”
Boolean O símbolo de adição (+) também é usado
para concatenar elementos, ou seja, ele
O tipo booleano de dado têm somente dois
tem duas funções, para que ele seja usado
valores, ou ele é “true” ou “false”. Exemplo:
para somar, os dois tipos de dados precisam
Let aprovado = true ser “Numbers”, caso tenha um “Number” e
uma “String”, acontecerá a concatenação.
Let aprovado = false

Converter para “Number”

OBSERVAÇÃO: Number
Caso precisaremos converter uma string ou
O Javascript não diferencia valores
um valor para number, será necessário
numéricos inteiros de reais, cabe a nós
utilizar o comando Number(“Aqui fica onde
distinguir qual será o tipo do valor atribuído.
a variável será armazenada)

Tipos de dados Converter para Real/Inteiro

Number (dentro de number existe
Podemos definir se um número será real ou
infinity/NaN)
inteiro, para isso:
String
Usamos para real: parseFloat
Boolean
Usamos para inteiro: parseInt
Null (é tratado como um objeto dentro do
Caso se optarmos para que o Javascript
javascript)
decida sozinho através do dado recebido,
Undefined (quando não for definido) usamos apenas o comando “Number.”

Object (dentro de object existe a Array ou

vetor)
Converter para String
Function
Podemos converter um dado para string
utilizando:

Comando typeOf String(nomeDaVariavel)

Com esse comando, podemos descobrir nomeDaVariavel.toString

qual é o tipo do dado que estamos lidando.

Let nome = “Alisson”

Alguns comandos para
Typeof nome
Strings
“string”
variavel.length
Vimos que o typeof de nome é uma string.
variavel.toUpperCase()

variável.toLowerCase()
 Operadores Aritméticos
Javascript
Adição +
Subtração -
Multiplicação *
Divisão real /
Divisão inteira (módulo) %
Potência **
O símbolo “%” se chama também “resto da
divisão inteira”, ou seja, sempre que tiver a
necessidade de colocar virgula na divisão, a
conta para.
O símbolo “**” significa potencia, ou seja, a
expressão 5 ** 2, é a mesma coisa que 5 x 5
(5 ao quadrado).
Dica sobre sintaxe
Às vezes, não vamos receber uma
mensagem de erro quando estivermos
desenvolvendo um programa, mas mesmo
assim o resultado final seja diferente do
esperado, neste caso, pode ser que haja um
erro de sintaxe, ou seja, a forma na qual
escrevemos o programa possa estar errada
(erro de sintaxe).
Ordem de precedência dos
operadores aritméticos
Parenteses () - assim como na matemática,
os parênteses sempre vão ser os primeiros
a serem resolvidos nas operações.
Potência ** - as potências tem prioridade
na ordem de resolução dos operadores.
Divisão, multiplicação e módulo / * % - têm
a mesma precedência (caso apareçam junto
numa expressão, serão executados em
sequência da esquerda para direita).
Adição e subtração + - - são os últimos a
serem resolvidos, caso apareçam os dois na
mesma expressão, será executado quem
aparecer primeiro da esquerda para direita.
Dica sobre operadores
aritméticos
Podemos reduzir as linhas de códigos
quando queremos utilizar algum operador
operando com ele mesmo e ainda fazendo
ele receber o resultado final da operação.
Para isso usamos:
Let numero = 10
numero += 10
o valor da variável numero agora é 20
Isso é a mesma coisa que numero = numero
+ 10
Pode ser usado para todos os operadores
aritméticos.
Operadores de
incremento/decremento
Quando queremos somar + 1 em um
número, podemos utilizar os operadores de
incremento ou caso queremos ao contrário
utilizamos o de decremento. Basta
acrescentarmos o ++ ou – antes ou depois
da variável que queremos adicionar ou
remover um valor, exemplo:
Let numero = 10
numero++
Agora o valor de numero é 11
numero- -
Agora o valor de numero é 10
Dica: se o incremento/decremento estiver a
esquerda da variável, mostrará o resultado
no mesmo instante, caso esteja pela direita,
mostrara sempre depois. numero++ ou
++numero
Operadores relacionais
Maior que >
Menor que <
Maior ou igual >=
Menor ou igual <=
Igual ==
Estritamente igual ===
Diferente (não é igual) !=
Esses operadores, sempre resultará em um
boolean, ou seja, o resultado sempre será
“true” ou “false”.
IMPORTANTE: o sinal de igualdade em
Javascript é digitado com dois “==” símbolos
de igualdades e significa que “o valor é
igual”. Quando o sinal for estritamente
igual, isso é, três símbolos “===”, significa
que “o valor e o tipo de dado são iguais”.
Mas caso o sinal “=” for apenas um, ele será
um sinal de atribuição e será lido como
“recebe”.
Não existe uma ordem de prioridade
quando falamos de operadores relacionais.
O primeiro que aparecer será executado.
Operadores lógicos
Não = ! (negação)
E = && (conjunção)
Ou = || (disjunção)
Observação Operadores
Lógicos
Dentro dos operadores lógicos, também
existe uma ordem de precedência:
1° será executado a negação (!)
2° será executado a conjunção (&&)
3° será executado a disjunção (||)
Ordem de precedência de
todos os operadores
1° serão executados todos os aritméticos.
2° serão executados todos os relacionais
3° serão executados todos os lógicos
Operadores ternários
São chamados de ternários porquê existem
3 blocos, são eles:
1° bloco – executa o teste
2° bloco – caso verdadeiro
3° bloco – caso falso
Exemplo:
Let velocidade = 90
Velocidade > 110 ? “Acima” : “Abaixo”
DOM = Document Object
Model
Basicamente, o DOM são um conjunto de
modelos de objetos de documentos que
dão acesso aos componentes internos do
site (o DOM não funciona dentro do
Node.js, ele somente funciona quando
criamos Javascript dentro do navegador).
 Árvore DOM
A árvore DOM começa a dar raiz dentro do
objeto “window”, e tudo que criaremos
dentro de Javascript, estará dentro deste
objeto “window”.