PROGRAMAÇÃO JAVASCRIPT

Faixas de horários das ARDs

Noite Manhã
1º tempo 18h40 - 19h40 7h40 - 8h40
2º tempo 19h50 - 20h50 8h50 - 9h50
3º tempo 21h - 22h 10h - 11h

História do JavaScript

Programação JavaScript
• História
• https://dev.to/dboatengx/history-of-javascript-how-it-all-began-92a
• https://medium.com/@sahilali/the-evolution-of-javascript-a-complete-javascript-history-timeline-c5d781346267
• https://www.linkedin.com/pulse/history-javascript-its-evolution-suleman-elahi
• https://hackernoon.com/two-decades-of-transformation-a-timeline-of-how-javascript-revolutionized-software-development
• Diferenças nas sintaxes
• https://webreference.com/javascript/basics/versions/
• Linguagem pura
• https://www.freecodecamp.org/portuguese/news/o-manual-de-javascript-para-iniciantes/
• DOM
• https://www.linkedin.com/pulse/role-javascript-modern-web-development-charles-paul-udcbc
• https://www.dynamicwebtraining.com.au/blog/javascript-dom-methods
• https://www.hongkiat.com/blog/dom-manipulation-javascript-methods/
• https://www.javascripttutorial.net/javascript-dom/
• Exercícios
• https://www.includehelp.com/code-snippets/an-introduction-to-javascript-vanilla-js.aspx
• Loop
• https://www.freecodecamp.org/news/javascript-for-loops/
• https://levelup.gitconnected.com/loops-made-super-simple-for-javascript-beginners-8b176a60b8b3

Alguns IDEs
• Online: • Android:
– https://www.typescriptlang.org/play – Spck Code Editor
– https://www.onlinegdb.com/ – QuickEdit
– https://www.programiz.com/javascri
pt/online-compiler/
• Google Chrome
– Pressione: CTRL + SHIFT + J
 Nosso primeiro código
// Mostre quantos gatos quiser!
• Vamos criar um programa var mostraGatos = function (quantidade) {

JavaScript para imprimir for (var i = 0; i < quantidade; i++) {

console.log(i + " =^.^=");
gatos =^.^= }
};
– Pule linhas pressionando mostraGatos(10); // Coloque qualquer número
SHIFT-ENTER no final de cada
linha
– ENTER faz o Chrome tentar
executar o que você escreveu

 JavaScript representa uma das  A Microsoft e outros

três linguagens principais fornecedores de browsers
usadas para desenvolver sites, implementaram suas próprias
juntamente com HTML e CSS versões de JavaScript
 No início, páginas da web não  Um problema para os
desenvolvedores - O código que
tinham capacidade de
funcionava bem em um navegador,
comportamento dinâmico e não funcionava bem em outro
interatividade
 A Netscape enviou o JavaScript
 Em 1995, Brendan Eich cria o à Associação Europeia de
JavaScript para o Netscape Fabricantes de Computadores
 JavaScript e Java são línguas (ECMA) para padronização
completamente diferentes  Foi oficialmente nomeado como
ECMAScript (ECMA-262)
 Evolução das versões ECMAScript
1. ECMAScript 1 (1997) Baseado na linguagem JavaScript, incluiu recursos como variáveis,
funções e instruções básicas de fluxo de controle
2. ECMAScript 2 (1998) Se concentrou principalmente em tornar o padrão mais consistente
3. ECMAScript 3 (1999) Introduziu recursos como expressões regulares, instruções de try-
catch e manipulação melhorada de Strings
4. ECMAScript 4 Enfrentou uma oposição significativa, e o desenvolvimento foi
(abandonado) abandonado
5. ECMAScript 5 (2009) Introduziu modo estrito, suporte a JSON e manipulação de matrizes
aprimorada
6. ECMAScript 6 (2015) Introduziu características como let e const, funções de seta
(arrows), modelo de literais e classes
7. Versões subsequentes (a Desde 2016, ECMAScript segue um padrão de lançamento de uma
partir de 2016) nova versão com refinamentos, novos recursos e melhorias
aproximadamente a cada ano

Desafio: Compatibilidade do navegador SPAs e o Virtual DOM: A Paradigm Shift (2005 - 2010)
Os primeiros desenvolvedores de JavaScript lidavam com os diversos mecanismos Em meados dos anos 2000 inaugurou a era dos aplicativos de página única (SPAs),
de renderização de diferentes navegadores, muitas vezes levando a um onde o JavaScript desempenhou um papel de protagonista. No entanto, a
comportamento inconsistente e a sessões de depuração frustrantes. manipulação constante do Modelo de Objetos Documentos (DOM) levou a gargalos
de desempenho e ineficiências.
Solução: AJAX e a Web 2.0
Para superar os problemas de compatibilidade do navegador, os desenvolvedores Desafio: Manipulação do DOM
se voltaram para linguagens de script do lado do servidor, como o PHP, em conjunto Atualizações frequentes do DOM resultaram em um desempenho lento da interface
com JavaScript e XML (AJAX - Asynchronous JavaScript and XML). Essa do usuário, dificultando a criação de experiências ricas e interativas.
combinação inovadora permitiu atualizações de conteúdo dinâmico sem a
necessidade de recargas de página inteira, oferecendo interações mais suaves do Solução: Virtual DOM e React
usuário. Use o React, um divisor de águas apresentado pelo Facebook. Ao implementar um
DOM Virtual, o React minimizou as manipulações DOM reais, melhorando o
// Example AJAX Request
desempenho e proporcionando uma experiência de usuário mais suave.
fetch('https://api.example.com/data')
.then(response => response.json()) // Example React Component
.then(data => { import React, { useState } from 'react';
// Process data
}); function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div> );
}

Fonte: https://hackernoon.com/two-decades-of-transformation-a-timeline-of-how-javascript-revolutionized-software-development
 Node.js e Backend Synergy (2010 - 2015) TypeScript e a busca de uma tipagem forte (2015 - 2020)
O domínio do JavaScript não se restringia ao front-end. Os desenvolvedores Embora a flexibilidade do JavaScript tenha empoderado o rápido desenvolvimento,
procuraram uma linguagem unificada para o desenvolvimento frontend e backend, também introduziu desafios relacionados à segurança e à capacidade de
levando à ascensão do Node.js. manutenção do tipo.

Desafio: Mergulho de Backend-Frontend Desafio: Tipo de segurança

Manter idiomas separados para o desenvolvimento frontend e back-end impediu a A digitação dinâmica do JavaScript muitas vezes leva a erros de execução,
reutilização e a colaboração de código. representando desafios em grandes bases de código.

Solução: A Revolução Node.js Solução: Embracing TypeScript

O Node.js surgiu como um ambiente de tempo de execução do lado do servidor, TypeScript, um superconjunto de JavaScript, introduziu a digitação estática,
permitindo que os desenvolvedores utilizem JavaScript para tarefas de frontend e interfaces e ferramentas avançadas. Isso capacitou os desenvolvedores a detectar
backend. Essa unificação simplificou o desenvolvimento, impulsionou a eficiência e erros durante o desenvolvimento e melhorar a qualidade do código.
promoveu equipes multifuncionais.
// Example TypeScript Interface
// Example Node.js Server interface Person {
const http = require('http'); firstName: string;
lastName: string;
const server = http.createServer((req, res) => { age: number;
res.writeHead(200, { 'Content-Type': 'text/plain' }); }
res.end('Hello, Node.js!');
}); function greet(person: Person): string {
return `Hello, ${person.firstName} ${person.lastName}!`;
server.listen(3000, () => { }
console.log('Server running at http://localhost:3000/');
});

Fonte: https://hackernoon.com/two-decades-of-transformation-a-timeline-of-how-javascript-revolutionized-software-development

Ascensão de Frameworks e Bibliotecas A Ascensão da IA e Além (Além de 2023)

A popularidade do JavaScript continuou a crescer e, com isso, a necessidade de A jornada do JavaScript continua a evoluir, com a inteligência artificial e o
melhores ferramentas para gerenciar sua complexidade. Vários frameworks e aprendizado de máquina se tornando parte integrante das aplicações modernas.
bibliotecas JavaScript, como jQuery, Angular, React e Vue, surgiram para simplificar
o desenvolvimento web. Desafio: Integração com IA
A integração dos recursos de IA perfeitamente em aplicativos colocou desafios
Essas ferramentas ofereciam componentes e abstrações pré-criados, facilitando a técnicos e de implementação.
criação de aplicativos interativos e amigáveis ao usuário.
Solução: Bibliotecas AI-Powered
As bibliotecas e APIs JavaScript baseadas em IA, como OpenAI ou Langchain, agora
Frameworks modernos e implantação sem servidor (2020 - Presente)
capacitam os desenvolvedores a incorporar modelos de aprendizado de máquina,
O moderno ecossistema JavaScript possui uma infinidade de bibliotecas poderosas, processamento de linguagem natural e visão computacional em seus projetos com
estruturas e ferramentas, impulsionando o desenvolvimento para novos patamares. relativa facilidade.

Desafio: Complexidade de implantação

Implantar aplicativos com configurações e dependências complexas era uma tarefa
assustadora.

Solução: Implantação sem servidor

Plataformas como Netlify ou Vercel surgiram, oferecendo serviços de implantação e
hospedagem automatizados. O paradigma sem servidor reduziu as preocupações
com a infraestrutura, permitindo que os desenvolvedores se concentrem na
construção de aplicativos notáveis.

Fontes: https://hackernoon.com/two-decades-of-transformation-a-timeline-of-how-javascript-revolutionized-software-development
https://medium.com/@sahilali/the-evolution-of-javascript-a-complete-javascript-history-timeline-c5d781346267
 No relatório Octoverse 2021 do GitHub,
hoje existem mais repositórios de código
JavaScript do que qualquer outro idioma,
e esse número está em ascensão.

JavaScript pode ser encontrado

praticamente em qualquer lugar na
Internet. Foi nomeada a linguagem de
programação mais amplamente utilizada
várias vezes, com mais de 64,9% dos
desenvolvedores usando-a em 2021.

Ele superou suas raízes de linguagem de

script para se tornar uma linguagem de
propósito geral robusto e eficiente. Isso
deixa claro que o JavaScript estará
conosco por muitos anos.
Fonte: https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/

Fundamentos do JavaScript

Programação JavaScript
 Introdução
• Usamos JavaScript principalmente para criar:
sites da web
aplicações web
aplicações do lado do servidor (server-side), usando Node.js

• Ele não se limita somente a isso, sendo usado também para:

 criar aplicações para dispositivos móveis usando ferramentas como o
React Native...
 criar programas para microcontroladores e para a internet das coisas...
 criar aplicações para relógios smartwatch...

"Às vezes é difícil separar o JavaScript dos recursos do ambiente em que ele é
usado"
 "Às vezes é difícil separar o JavaScript dos recursos do ambiente em que ele é
usado"
– P. ex. o comando console.log() que você encontra em muitos códigos, não é JavaScript
– Em vez disso, ele faz parte da vasta biblioteca de APIs que o navegador nos fornece

 Do mesmo modo que, no servidor, pode ser difícil separar

os recursos do JavaScript das APIs fornecidas pelo Node.js
 Determinado recurso é disponibilizado pelo React ou Vue?
 Ou é "JavaScript puro" – ou "Vanilla JavaScript", como é
comumente chamado?

Vamos começar falando sobre JavaScript, a linguagem. Sem complicar seu processo de
aprendizagem com coisas que estão fora dele, fornecidas por ecossistemas externos

5 conceitos iniciais
• espaços em branco
• maiúsculas e minúsculas
• literals
• identificadores
• comentários
 Espaços em Branco
• Em teoria, espaços e quebras de linha podem ser
acrescentados do modo que você desejar
• Na prática, você provavelmente manterá um estilo bem
definido, aderindo ao que as pessoas comumente usam
– Poderá aplicar isso usando um linter ou uma ferramenta de estilo, como
o Prettier
– Pode-se usar por exemplo, 2 caracteres de espaço para cada identação

Maiúsculas e minúsculas
• O JavaScript diferencia maiúsculas e minúsculas
– Uma variável chamada something é diferente de Something
– O mesmo vale para qualquer identificador
 Literals
5
• Definimos literal como um 'Test'
valor que está escrito no true
código-fonte ['a', 'b']
{color: 'red', shape: 'Rectangle'}
– P. ex., um número, uma string,
um booleano, ou construções
mais avançadas, como objetos
ou arrays literais

Identificadores
Test
• Identificador é uma sequência
test
de caracteres usada para TEST
identificar variáveis, funções _test
ou objetos Test1
– Pode começar com letra, cifrão $ $test
ou sublinhado _ (usado para
referências a elementos do
DOM), e pode conter dígitos
– Alguns nomes são reservados
para uso interno do JavaScript,
não podendo ser usados como
identificadores
 Comentários
// um comentário
• Uma das partes mais importantes
true //outro comentário
de qualquer programa, em
qualquer linguagem de
programação!!! /* Aqui temos
um tipo de
– Permitem anotar o código e comentário
acrescentar informações importantes
que, de outro modo, não estariam */
disponíveis para outras pessoas (ou
para nós mesmos) durante sua leitura

Ponto-e-vírgula
• Cada linha de um programa em JavaScript é terminada
opcionalmente com um ponto-e-vírgula
– O interpretador do JavaScript geralmente introduz pontos-e-vírgulas
para você
– É um fato controverso; uma sugestão é, uma vez que você escolha
colocar ou não, siga a sua preferência pessoal, p. ex., evitar pontos-e-
vírgulas
 Valores
• Uma string hello é um valor • O tipo é a espécie do valor,
• Um número (number), como sua categoria
12, também é um valor – Quando precisamos de uma
referência a um valor, nós o
atribuímos a uma variável, para
▪ hello e 12 são valores; acessarmos posteriormente por
▪ string e number são os meio do nome da variável
tipos desses valores

Variáveis
• Uma variável é um valor atribuído a um identificador, para
que você possa referenciá-lo e usá-lo posteriormente no
programa
• Isso ocorre porque o JavaScript é fracamente tipado, um
conceito que você vai ouvir falar com frequência
– Uma variável deve ser declarada antes que você possa utilizá-la
 Modos de declaração de variáveis
• Primeiro modo – const • Você não pode fazer isto:
const a = 0
– Define uma constante a um
valor, a referência não pode ser a = 1
alterada – Erro (TypeError: Assignment to
constant variable.)
– Não significa que o valor não
pode ser alterado – significa que
não pode ser reatribuído • Variáveis const devem ser
inicializadas no momento da
const a = 0 declaração
const a = 1, b = 2 const a = 0

Modos de declaração de variáveis

• Segundo modo – let • Você pode fazer isto:
let a = 0
– Você pode atribuir um novo
a = 1
valor a ela
• Você pode inicializar depois:
let a
let a = 0 a = 0
let c = 1, d = 2 • Você não pode redeclarar a mesma
variável mais de uma vez:
let a = 1
let a = 2
 Modos de declaração de variáveis
• Um conselho é sempre usar const, e usar let somente
quando você souber que precisará reatribuir um valor a essa
variável
– Quanto menos poder seu código tiver, melhor
– Se soubermos que um valor não pode ser reatribuído, é uma fonte a
menos de bugs

Modos de declaração de variáveis

• Até 2015, var era a única
maneira de se declarar uma E o var?

variável em JavaScript
• Hoje em dia, uma base de
código moderna
provavelmente só usará
const e let
– Leitura opcional:
https://flaviocopes.com/javascript-
difference-let-var/
 Tipos de variáveis
• Variáveis não são tipadas • Tipos primitivos
– Uma vez que você atribua um valor de ‒ números
algum tipo a uma variável, você pode ‒ strings
reatribuir posteriormente a variável para ‒ booleanos
receber um valor de qualquer outro tipo
‒ símbolos
sem problemas
‒ Tipos especiais: null e undefined
• Existem duas espécies principais de
tipos • Objetos
– Qualquer valor que não seja de um tipo
primitivo
– Possuem propriedades e também têm
métodos que podem agir sobre essas
propriedades

Expressões e operadores
Expressões Operadores Operadores de comparação
Primárias 2 Atribuição (=) let b = 2 Desigualdade < (menor que)
0.02 <= (menor ou igual a)
Adição (+) const tres = 1 + 2
'something' > (maior que)
1 / 2 Subtração const dois = 4 – 2 >= (maior ou igual a)
Aritméticas
i++ Divisão (/) const resultado = 20 / 5 Igualdade === (igualdade)
i * 2 !== (desigualdade)
Resto (%) const resultado = 20 % 5
String 'Uma'+'string'
Multiplicação (*) 1 * 2 Obs.: Evitar == e != p/
Lógicas a && b evitar problemas sutis
a || b Exponencial (**) 8 ** 2
!a
Regras de precedência
* / % Multiplicação / Divisão / Resto
+ - Soma / Subtração
= Atribuição
let nome = 'Alex'
let nome2 = "Smith"
const pontos=12

console.log(nome+" "+nome2,pontos)

var a = 25;
var b = 2.0;
function mostraValor(input1, input2) {
console.log("Este eh input 1: " + input1 + " este eh " + input2 +
" input2");
}

mostraValor(a, b);

Condicionais
• Condicional: Uma declaração if (se) faz o programa seguir um
ou outro caminho, dependendo do resultado de uma expressão
if (true) {
//faça algo
}
if (true) facaAlgo()
if (false) {
//faça algo (? nunca ?)
}
Emprego do if em um bloco (o espaço Opcionalmente, se tiver uma única
entre as chaves usado para agrupar uma instrução para executar após as
lista de diferentes instruções) condicionais, você poderá omitir o bloco
 Condicionais
• Você pode fornecer uma segunda parte para a instrução if:
else (caso contrário)
if (true) { if (a === true) {
//faça algo //faça algo }
} else { else if (b === true) {
//faça outra coisa //faça outra coisa
} } else {
//faça uma terceira coisa se nenhuma das
outras opções for válida
}

Inclua uma instrução que será executada if/else aninhados

se a condição if for falsa

Laços de repetição
• Com um laço de repetição, podemos automatizar e repetir um
bloco de código quantas vezes quisermos que ele seja
executado
• Podemos fazer isso de 3 maneiras:
• while
• for
• for..of
 Laços de repetição - While
1. Usando while, adicione uma condição após a palavra-chave while
2. Depois, forneça um bloco que é executado até que a condição seja
avaliada como true
const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
}

Laços de repetição - While

• Você pode interromper um laço • Se você quiser pular a iteração
while usando a palavra-chave atual, pode avançar para a
break, assim: próxima iteração usando
continue
while (true) {
if (algoForVerdadeiro) break while (true) {
} if (algoForVerdadeiro) continue

//Faça outra coisa

}
 Laços de repetição - While
• Muito parecido com while, temos o laço do..while
• Nele, a condição é avaliada depois que o bloco de código é executado.
• Isso significa que o bloco sempre é executado pelo menos uma vez
const list = ['a', 'b', 'c']
let i = 0 do {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
}
while (i < list.length)

Laços de repetição - For

• Na palavra-chave for , const list = ['a', 'b', 'c']
passamos um conjunto de 3 for (let i = 0; i < list.length; i++) {
instruções: console.log(list[i]) //value
– A inicialização console.log(i) //index
}
– A condição
– A parcela de incremento
 Laços de repetição – For..of
• for...of é relativamente recente (introduzido em 2015)
• É uma versão simplificada do laço for

const list = ['a', 'b', 'c']

for (const valor of list) {
console.log(valor) //a b c
}

Array
• Um array é uma coleção de elementos.
– Arrays em JavaScript não são um tipo próprio.
– Arrays são objetos.
• Podemos inicializar um array vazio de 2 maneiras diferentes
(por notação literal e palavra-chave, respectivamente):

const a = []
const a = Array()
 Array
• Você pode pré-preencher o • Um array pode conter
array usando esta sintaxe: qualquer valor, mesmo
valores de tipos diferentes:
const a = [1, 2, 3]
const a = Array.of(1, 2, 3)
const a = [1, 'Flavio', ['a', 'b']]

Array
• Podemos criar arrays const matriz = [
[1, 2, 3],
multidimensionais, que
[4, 5, 6],
possuem aplicações muito
[7, 8, 9]
úteis (por exemplo, uma ]
matriz):
matriz[0][0] //1
matriz[2][0] //7
 Array
• Acesse qualquer elemento do • Uma sintaxe para inicializar um
array, fazendo referência ao seu novo array com um conjunto de
índice que inicia a partir de zero: valores; primeiro inicializa um
array de 12 elementos e então
a[0] //1 preenche cada elemento com o
a[1] //2 número 0:
a[2] //3
Array(12).fill(0)

Array
• Você pode obter o número de • Definir o comprimento do array:
elementos no array, verificando sua – Se você atribui um número maior do que
propriedade length (tamanho): a capacidade atual do array, nada
acontece.
– Se você atribui um número menor, o
const a = [1, 2, 3] array é cortado naquela posição:
a.length //3
const a = [1, 2, 3]
a //[ 1, 2, 3 ]
a.length = 2
a //[ 1, 2 ]
 Array
• Adicionar um elemento ao final de um array com o método push():

a.push(4)

• Para adicionar um elemento ao início de um array utilizando unshift():

a.unshift(0)
a.unshift(-2, -1)

Array
• Para remover um item do final de um array:

a.pop()

• Para remover um item do início de um array:

a.shift()
 Array
• Unir vários arrays: • Operador spread(...):

const a = [1, 2]
const a = [1, 2]
const b = [3, 4]
const b = [3, 4]
const c = a.concat(b) //[1,2,3,4]
const c = [...a, ...b]
a //[1,2]
c //[1,2,3,4]
b //[3,4]