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
[Link], fazendo com que o Javascript está rodando/executando para caso
rodasse também fora dos navegadores. necessário, realizar correções.
 Variáveis Tipo primitivo de dado
Podemos armazenar informações na “Number”
memória do computador através das
O tipo de dado “number” é um valor
variáveis.
numérico, ou seja, uma variável que tem
Para armazenar informações, temos 3 valor atribuído com um número. Exemplo:
palavras reservadas dentro do Javascript:
Let numero = 10
Var, Let e Const.
Esse tipo de dado é um “Number”
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 Tipo primitivo de dado
adicionar a esta variável, ficando assim: “String”
Palavra reservada + nome + atribuição +
O tipo de dado “string” é uma cadeia de
valor
caracteres, ou seja, pode ser um texto, uma
Let nomeDaVariavel = valorDaVariavel frase ou até mesmo um número, tudo isso
dentro de aspas simples, aspas duplas e até
IMPORTANTE: Existem regras para nomear mesmo dentro do símbolo de crase.
uma variável, e ela não pode começar com Exemplo:
número, não pode conter espaços, precisa
fazer sentido, letras maiúsculas e Let aspasSimples = ‘Texto aqui’
minúsculas fazem a diferença.
Let aspasDuplas = “Texto aqui”

Let crase = `Texto aqui`

OBSERVAÇÃO IMPORTANTE: Ao usar o símbolo da crase
para uma String, lembre-se que estará
O sinal de atribuição “=” é lido como
utilizando o template literals, uma
“recebe” e não “igual”.
funcionalidade do Javascript onde podemos
concatenar elementos dentro da crase sem
a necessidade de utilizar o “+” (símbolo de
O Javascript é dinâmico concatenação dentro do javascript),
fazendo com que o código fique bem mais
O Javascript é uma linguagem muito limpo. Exemplo:
dinâmica, por isso, ao declarar um valor a
uma variável automaticamente ele Com crase:
determina qual é o tipo de dado que o valor
Let texto = `O usuário ${variável do nome
tem, por exemplo: caso você digite um
aqui} foi aceito`
número como valor de uma variável o
próprio Javascript determinará que ele é do Com aspas duplas ou simples:
tipo “Number”, se você declarar um valor
Let texto = “o usuário” + variável do nome
entre aspas duplas ou simples (“ “ ou ‘ ‘) ele
aqui + “foi aceito”
determinará que o tipo de dado é uma
String e caso você declare como “true” ou A vantagem de utilizar a crase para
“false” o tipo de dado será um boolean. E concatenar é para deixar o código muito
esses tipos de dados são os dados mais limpo e mais visível, utilizando ${}.
primitivos. Number, String e Boolean.
 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 [Link]

qual é o tipo do dado que estamos lidando.

Let nome = “Alisson”

Alguns comandos para
Typeof nome
Strings
“string”
[Link]
Vimos que o typeof de nome é uma string.
[Link]()

variá[Link]()
 Operadores Aritméticos Adição e subtração + - - são os últimos a
serem resolvidos, caso apareçam os dois na
Javascript mesma expressão, será executado quem
aparecer primeiro da esquerda para direita.
Adição +

Subtração -

Multiplicação * Dica sobre operadores

Divisão real / aritméticos
Divisão inteira (módulo) % Podemos reduzir as linhas de códigos
quando queremos utilizar algum operador
Potência ** operando com ele mesmo e ainda fazendo
O símbolo “%” se chama também “resto da ele receber o resultado final da operação.
divisão inteira”, ou seja, sempre que tiver a Para isso usamos:
necessidade de colocar virgula na divisão, a Let numero = 10
conta para.
numero += 10
O símbolo “**” significa potencia, ou seja, a
expressão 5 ** 2, é a mesma coisa que 5 x 5 o valor da variável numero agora é 20
(5 ao quadrado).
Isso é a mesma coisa que numero = numero
+ 10

Pode ser usado para todos os operadores

Dica sobre sintaxe
aritméticos.
Às vezes, não vamos receber uma
mensagem de erro quando estivermos
desenvolvendo um programa, mas mesmo Operadores de
assim o resultado final seja diferente do
esperado, neste caso, pode ser que haja um incremento/decremento
erro de sintaxe, ou seja, a forma na qual
Quando queremos somar + 1 em um
escrevemos o programa possa estar errada
número, podemos utilizar os operadores de
(erro de sintaxe).
incremento ou caso queremos ao contrário
utilizamos o de decremento. Basta
acrescentarmos o ++ ou – antes ou depois
Ordem de precedência dos da variável que queremos adicionar ou
remover um valor, exemplo:
operadores aritméticos
Let numero = 10
Parenteses () - assim como na matemática,
os parênteses sempre vão ser os primeiros numero++
a serem resolvidos nas operações.
Agora o valor de numero é 11
Potência ** - as potências tem prioridade
numero- -
na ordem de resolução dos operadores.
Agora o valor de numero é 10
Divisão, multiplicação e módulo / * % - têm
a mesma precedência (caso apareçam junto Dica: se o incremento/decremento estiver a
numa expressão, serão executados em esquerda da variável, mostrará o resultado
sequência da esquerda para direita). no mesmo instante, caso esteja pela direita,
mostrara sempre depois. numero++ ou Observação Operadores
++numero
Lógicos
Operadores relacionais
Dentro dos operadores lógicos, também
Maior que > existe uma ordem de precedência:

Menor que < 1° será executado a negação (!)

Maior ou igual >= 2° será executado a conjunção (&&)

Menor ou igual <= 3° será executado a disjunção (||)

Igual == Ordem de precedência de

Estritamente igual === todos os operadores
Diferente (não é igual) != 1° serão executados todos os aritméticos.
Esses operadores, sempre resultará em um 2° serão executados todos os relacionais
boolean, ou seja, o resultado sempre será
“true” ou “false”. 3° serão executados todos os lógicos

IMPORTANTE: o sinal de igualdade em

Javascript é digitado com dois “==” símbolos
de igualdades e significa que “o valor é Operadores ternários
igual”. Quando o sinal for estritamente São chamados de ternários porquê existem
igual, isso é, três símbolos “===”, significa 3 blocos, são eles:
que “o valor e o tipo de dado são iguais”.
Mas caso o sinal “=” for apenas um, ele será 1° bloco – executa o teste
um sinal de atribuição e será lido como
2° bloco – caso verdadeiro
“recebe”.
3° bloco – caso falso
Não existe uma ordem de prioridade
quando falamos de operadores relacionais. Exemplo:
O primeiro que aparecer será executado.
Let velocidade = 90

Velocidade > 110 ? “Acima” : “Abaixo”

Operadores lógicos
Não = ! (negação)
DOM = Document Object
E = && (conjunção) Model
Ou = || (disjunção)
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
[Link], 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”.