JavaScript
por Pietro Barcarollo Schiavinato
Vinicius Gimenes Jabes
22 anos
4º ano Ciência da Computação – FCT-UNESP
Estagiário full-stack – Prudenco
Fã de JavaScript
Eu
18 anos
2º ano Ciência da Computação – FCT-UNESP
Eu
JavaScript
Criado na década de 90
Brendan Eich – Netscape
Mocha -> LiveScript -> JavaScript -> ...
ECMAScri
ptEvoluir com padrões e normativas
Mantido pelo comitê técnico 39 (TC39)
Composto por especialistas de grandes empresas
(Microsoft, Mozilla, Google)
Nodejs
Reactjs
React Native
Características da linguagem
• Linguagem Interpretada
• C-like
• Programação dirigida por
eventos
• Independente de
plataforma
• Tipagem Fraca e Dinâmica
Linguagem Interpretada
Comandos executados um a um diretamente por um interpretador
Interpretador: Navegador do usuário
Cada Navegador pode interpretar de uma maneira diferente o
mesmo código.
Independente de Plataforma
Comandos interpretados pelo navegador
Problemas de compatibilidade são referentes aos diferentes
navegadores, não ao sistema operacional do usuário
C-like
Linguagem com a sintaxe baseada em C
for(int i = 0; i < MAX; i++) – C
for(let i = 0; i < MAX; i++) – JavaScript
for(int i = 0; i < MAX; i++) – Java
for($i = 0; $i < MAX; $i++) – PHP
for i := 0 to MAX do – Pascal
Programação dirigida a eventos
Rotinas especializada em monitorar eventos
Listeners
“Usuário clicou” “Usuário moveu o mouse em tal lugar”
Fluxo determinado por eventos disparados
Eventos comuns
onclick: O elemento foi clicado;
onmouseover: O mouse está em cima do elemento;
onmouseout: O mouse estava em cima do elemento e saiu;
onkeydown: Uma tecla foi pressionada no elemento;
onload: O navegador terminou de carregar a página;
onchange: Um elemento foi alterado;
Tipagem fraca e dinâmica
Podemos alterar o tipo da variável durante a execução
var x;
x = 10;
x = “foo”;
é permitido, e por causa da tipagem fraca, operações como:
“1” + 1 // 11
1 + true // 2
Console do Navegador
Nosso melhor amigo
- Mensagens na tela
- Arrays em tabela
- Agrupamento de mensagens
- Métricas
- Template Strings
- Depuração
Mensagens na tela
• Warn
• Error
• Info
• Log
 console.warn(“foo”);
 console.error(“foo”);
 console.info(“foo”);
 console.log(“foo”);
Arrays em tabela
 console.table(array);
Agrupamento de mensagens
 console.group(“Pietro”);
 console.log(“Oi”);
 console.groupEnd(“Pietro”);
Métricas
 console.time(“Jabinho”);
 console.timeEnd(“Jabinho”);
Template Strings
 const nome = “Alfredo”
 const sobrenome = “da Silva”
 const nomeCompleto = `${nome} ${sobrenome}`
 Hands-on
Sintaxe Básica
Variáveis
A tipagem em JS é atribuída dinamicamente, então basta declarar a
variável:
var x;
const x;
let x;
*A diferença entre as três declarações serão mostradas na sessão
sobre escopo.
Conversão
Converte valores de um tipo para outro de forma livre;
Se uma função espera uma String e você passa um Número, ele faz a
conversão automaticamente;
Podemos forçar a conversão:
parseInt(“10”)
parseInt(10.2)
parseFloat(“10.2”)
parseFloat(“10,2)
parseInt(“123abc”)
DOM (Document Object Model)
Funções e Eventos do DOM
Funções
FunçõesTemporais
Funções temporais
setTimeout
setInterval
clearTimeout
clearInterval
Callbacks
Callback
“Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum
tipo de rotina ou ação.”
Function escreveNome(nome){
alert(“O nome é: ” + nome);
}
Function pedeNome(callback){
var nome = prompt(“Qual o nome?”);
callback(nome);
}
pedeNome(escreveNome);
Bloco de Repetição
Bloco de repetição
For (var, condição, operação)
For(var in array) //indice
For(var of array) //valor
While
Do While
Break
Continue
Strings
String
Length
indexOf
lastIndexOf
Substring
Substr
Slice
Replace
toUpperCase
toLowerCase
Trim
charAt
Split
Arrays
Arrays
Array.toString
Array.Join
Array.Pop
Array.Push
Array.Shift
Array.Unshift
Delete array[posição]
Splice
Concat
Slice
Array.Find
Array.FindIndex
Array.map
Escopo

Java script