39 minutos de leitura
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Entrega e integração contínua de aplicações Vue
Ler mais
Entendendo o Material Design
Ler mais
Entendendo a relação entre Ember, Handlebars e Glimmer
Ler maisNeste artigo, você vai entender o que é JavaScript, para que serve a linguagem de programação JavaScript, quais as principais diferenças entre JavaScript e TypeScript, o que são arrays em programação e como aprender JavaScript de forma eficiente.
Ao pesquisar sobre o mercado de programação, é muito comum encontrar o nome JavaScript. Isso acontece porque essa linguagem está presente em praticamente toda a Web e você provavelmente a utiliza diariamente ao navegar na internet, e até mesmo fora do navegador.
Neste artigo, vamos explorar o que é JavaScript, por que essa linguagem é tão relevante e utilizada atualmente e como começar a aprender.
O JavaScript (ou JS, como muitos chamam carinhosamente) é uma linguagem de programação interpretada de alto nível que, segundo a Pesquisa de Desenvolvedores do Stack Overflow de 2025, continuam continua sendo uma das linguagens mais utilizadas no mundo.
Isso se deve principalmente ao fato de que o JavaScript é a linguagem padrão que os navegadores interpretam e que, com HTML (“HiperText Markup Language” ou linguagem de Marcação de HiperTexto, utilizada nos navegadores) e CSS (“Cascading Style Sheets”, folhas de estilo em cascata, em Português) formam a base de toda a Web.
O que é JavaScript? | #HipstersPontoTube
O JavaScript se destaca por deixar as páginas Web dinâmicas, o que é sua principal função. Sabe quando você está navegando pela internet e encontra algum conteúdo que é interativo, possui alguma animação ou muda constantemente? É bem provável que o JavaScript esteja envolvido em sua execução!
Por que o JavaScript é assim? | Memes do JavaScript #01
Agora que você já sabe o que é JavaScript, vamos conhecer um pouco mais sobre sua história.
A década de 90 foi marcada por uma grande disputa no mercado dos navegadores. Nesse momento da história, a Netscape, responsável pelo Netscape Navigator, buscava se destacar na “guerra dos navegadores”.
Para isso, planejava construir algo que pudesse deixar a navegação mais dinâmica, o que para a época, seria um enorme diferencial, pois para carregar uma página simples levava muito tempo.
A década de 1990 foi marcada por uma grande disputa no mercado de navegadores. Na época, a Netscape, responsável pelo Netscape Navigator, buscava se destacar na chamada "guerra dos navegadores". Para isso, planejava tornar a navegação mais dinâmica, o que seria um grande diferencial, pois carregar uma página simples era um processo demorado.
Assim, em 1995, a Netscape contratou o desenvolvedor Brendan Eich para criar uma linguagem de script que trouxesse “vida” às páginas Web. Desse modo, foi criada uma linguagem que foi chamada de LiveScript.
Após uma parceria com a Sun Microsystems, empresa responsável pela criação da linguagem Java, o nome LiveScript foi alterado para JavaScript. Essa mudança foi uma estratégia de marketing, aproveitando a popularidade que o Java já possuía na época.
É sempre válido lembrar que Java e JavaScript são linguagens completamente diferentes, apesar do nome similar. Java é uma linguagem compilada, orientada a objetos, com tipagem estática, enquanto JavaScript é interpretada, multiparadigma, com tipagem dinâmica.
Em 1997, em associação ao ECMA (acrônimo para European Computer Manufacturers Association), foi criada uma padronização do JavaScript, chamada de ECMAScript, para garantir o crescimento da linguagem seguindo algumas normas.
Desde 2015, novas versões do ECMAScript são lançadas anualmente. A versão mais recente é ECMAScript 2025 (ES2025, 16ª edição, lançada em junho de 2025), e ECMAScript 2026 (ES2026) está em desenvolvimento, com recursos como `Math.sumPrecise`, `Iterator.concat` e `Array.fromAsync` já finalizados.
E assim surgiu o que hoje conhecemos como JavaScript.
Evolução do JavaScript – Hipsters Ponto Tech #236
spotify:7Kq4wVHcDddbVbvmQAGUAj:episode
Diante das possibilidades e cenários de uso do JavaScript, é fácil perceber seu potencial. Desde sua criação até hoje, o JavaScript passou por grande evolução e conta com uma comunidade forte e consolidada, proporcionando benefícios como:
Vale a pena participar de comunidades de tecnologia? #HipstersPontoTube
Além disso, por consequência da grande comunidade, a continuação da linguagem é incentivada, o que faz com que seja utilizada para implementação de várias ferramentas, desde aplicações de grandes empresas até jogos e bibliotecas.
Comunidades em tecnologia | Hipsters.Talks
Como vimos anteriormente, a comunidade do JavaScript é muito colaborativa, com isso, surgem as bibliotecas da linguagem.
De forma resumida, bibliotecas são conjuntos de códigos prontos que oferecem funcionalidades específicas ou solucionam problemas comuns.
O uso das bibliotecas, também chamadas de "libs", permite reutilizar códigos já existentes, economizando tempo ao evitar reescrita de funcionalidades. Assim, tarefas complexas, como manipulação de dados, criação de animações ou cálculos matemáticos, podem ser realizadas de forma mais simples e eficiente.
A linguagem JavaScript também está presente no desenvolvimento de jogos. Hoje, apenas com HTML, CSS e JavaScript já é possível criar jogos que rodam nos navegadores de internet.
Embora também existam as Game Engines feitas em JavaScript, que podem ser utilizadas para desenvolver jogos multiplataformas, isto é, jogos que podem ser jogados em diferentes dispositivos e sistemas operacionais sem a necessidade de comprar uma versão diferente para cada plataforma.
As Game Engines são programas que facilitam o processo do desenvolvimento do jogo, então, ela irá fazer as partes mais complicadas da criação, como renderizar gráficos, detectar colisões, fazer animações, além de suporte para sons, inteligência artificial, gerenciamento de arquivos, entre outras.
Além disso, diversas aplicações hoje em dia possuem pelo menos uma parte feita em JavaScript, por exemplo:
Em todas essas aplicações, o JavaScript foi utilizado em algum momento, seja no navegador ou no aplicativo. Como, por exemplo, a Netflix que implementou o JavaScript nas suas aplicações para diminuir o tempo de espera dos usuários.
Bom, agora que já entendemos onde essa linguagem surgiu e vimos onde ela está sendo aplicada, você pode estar com a dúvida se teria essa linguagem uma finalidade principal?
A principal finalidade do JavaScript é adicionar interação às páginas, tornando possível a interação entre usuários e as aplicações Web e evitando que uma página seja meramente estática ao mostrar informações.
Ao aprender JavaScript, você poderá realizar tarefas como:
O JavaScript é executado, principalmente, nos navegadores, já que nasceu para tornar a navegação dinâmica. Essa é uma característica que faz com que o JavaScript seja tão utilizado, inclusive por pessoas que estão iniciando seus estudos em programação, pela facilidade de ver seu código funcionando sem depender de grandes preparações de ambiente.
Isso acontece, pois essa é uma linguagem que atua no lado do cliente (ou client-side), portanto consegue executar suas tarefas diretamente na máquina do usuário sem precisar acessar algum servidor. Sendo assim, basta ter um navegador e já é possível desenvolver código com JavaScript.
Além disso, a relevância do JavaScript ficou ainda mais evidente em 2009, com a criação do Node.JS, um ambiente de execução que permite rodar o JavaScript no lado do servidor (server-side), ou seja, fora do navegador. Isso ampliou muito as possibilidades de uso da linguagem
Agora que você já sabe onde o JavaScript é executado, vamos explorar um pouco mais sobre suas principais características.
No ambiente de programação utilizamos variáveis, que são espaços na memória do computador que o programa em execução reserva. Usamos esse espaço reservado para guardar informações, realizar operações aritméticas, dentre várias outras aplicações.
No JavaScript, existem três formas principais de declarar variáveis:
É fundamental conhecer as diferenças entre elas para utilizar cada uma de forma adequada no seu código
Existe uma peculiaridade chamada hoisting, isso significa que quando usamos uma variável do tipo `var`, sua declaração (mas não sua inicialização) é içada (levantada) para o topo do seu escopo de função.
Com `let` e `const`, também há hoisting, mas as variáveis ficam em uma 'temporal dead zone' (TDZ) até a linha de declaração ser executada.
console.log(cor) // saída: undefined
var cor = "amarelo"No exemplo acima, utilizamos uma variável do tipo `var` chamada `cor` antes de declarar seu valor. Devido ao mecanismo de hoisting, não ocorre erro de execução, mas o valor retornado é `undefined` ("indefinido"), pois a variável ainda não foi inicializada.
Esse tipo de situação com hoisting, pode não ser o ideal quando queremos tornar nosso código mais limpo e coeso.
Caso tenha interesse em entender mais sobre esse assunto, recomendamos o artigo Hoisting no Javascript para complementar seus estudos.
Uma solução para evitar possíveis confusões é utilizar variáveis do tipo `let`, e o mesmo algoritmo terá um resultado diferente. Observe o seguinte exemplo:
console.log(cor) // saída: Uncaught ReferenceError: Cannot access 'cor' before initialization
let cor = "amarelo" Nesse caso, ao tentar usar a variável `cor` antes de declararmos o seu valor, recebemos um erro de referência nos informando que não podemos acessar a variável antes que ela seja declarada.
Com `let`, evitamos erros causados pelo hoisting, mas ainda é possível declarar uma variável e tentar usá-la antes de atribuir um valor, resultando em `undefined`.
Para esses casos, quando temos uma variável que deve ser inicializada na sua declaração e que sabemos que seu valor não irá mudar, usamos o const. Veja abaixo um exemplo:
const nome = "Maria"
console.log(nome)Agora que já conhecemos os tipos `var`, `let` e `const`, cabe a você, como dev, usá-las com sabedoria! E se quiser uma leitura mais completa sobre o assunto, recomendamos o artigo Entenda a diferença entre var, let e const no JavaScript.
É comum ouvirmos falar que o JavaScript é uma linguagem de tipagem fraca, mas você sabe o que isso significa?
No JavaScript a tipagem é dinâmica, por isso não é necessário declarar o tipo de uma variável, basta atribuir seu valor e a linguagem assume se é uma sequência de caracteres, números, indefinido ou outras. Para entender melhor esse conceito, observe o seguinte exemplo de código:
let variavelDeTexto = 'texto qualquer';
let variavelNumerica = 123;
let variavelIndefinida;
let variavelBooleana = true;
console.log(typeof variavelDeTexto) //saída: string
console.log(typeof variavelNumerica) //saída: number
console.log(typeof variavelIndefinida) //saída: undefined
console.log(typeof variavelBooleana) //saída: booleanNo código acima, temos a criação de variáveis, do tipo String, numérica, booleana e uma indefinida.
Depois disso, utilizamos uma função do próprio JavaScript, que é o typeof, que irá nos retornar o tipo da variável que foi passada como parâmetro, assim, as saídas serão: String, number, undefined e boolean. Podemos perceber que esses tipos foram reconhecidos de maneira dinâmica pelo JavaScript.
Para entender melhor como funciona essa tipagem dinâmica, indicamos o artigo Tipagem dinâmica com JavaScript.
Por um lado isso é positivo, pois facilita a vida da pessoa desenvolvedora, mas por outro, essa tipagem dinâmica costuma ser a fonte de alguns bugs bem estranhos e isso divide opiniões em relação à tipagem dinâmica.
Caso queira conhecer esses tipos de variáveis mais detalhadamente, sugerimos o Curso de JavaScript: tipos, variáveis e funções, que aborda esse e outros tópicos fundamentais para seu conhecimento em JavaScript.
Outra característica do JavaScript é que se trata de uma linguagem de alto nível. Mas o que isso significa afinal? As linguagens de programação podem ser de alto nível ou de baixo nível. Confira a seguir, mais detalhes sobre cada uma delas.
Quando estamos programando num computador, ele só entende o que chamamos de linguagem de máquina (também conhecida como código binário), que são instruções passadas para o processador, onde ele só vai ler zeros e uns, e escrever um programa dessa maneira pode não ser tão simples.
Para se ter uma ideia de como é esse sistema de código binário, recomendo a leitura do artigo Entenda o sistema de Código Binário.
As linguagens de programação foram criadas para nos comunicarmos com as máquinas de forma mais fácil para nós do que o sistema binário, ou seja, zeros e uns. Chamamos de linguagem de baixo nível aquelas que são mais próximas do sistema binário, como Assembly X86.
Um exemplo de código na linguagem Assembly:
global _start
section .data
msg: db "Ola, Mundo!", 0xa
len: equ $-msg
section .text
_start:
mov eax, 4
mov ebx, 1
mov ecx, msg
mov edx, len
int 0x80
mov al, 1
int 0x80Este código tem a simples função de mostrar na tela a mensagem “Olá, mundo”, essa linguagem é de baixo nível e talvez não seja tão simples de se entender, e além disso, possui um código extenso para realizar uma operação simples, pois tem muitos termos complexos para nós.
Então fomos agraciados pela vinda das linguagens de alto nível, e o JavaScript se encontra nessa classe, vamos ao exemplo de um código em JavaScript que faz exatamente a mesma coisa que o nosso código “Olá, mundo”, acima:
console.log(‘Olá, mundo!’) Percebeu a diferença?
Essa forma de programar se torna muito mais compreensível para nós humanos, por se aproximar mais de uma das linguagens que usamos para nos comunicar (o inglês). Portanto, podemos considerar JavaScript uma linguagem de programação de alto nível.
Qual a melhor forma de aprender JavaScript? | #HipstersPontoTube
No desenvolvimento de software, é possível atuar em diferentes áreas, como:
A principal vantagem do JavaScript é a possibilidade de uso em todas essas camadas da aplicação.
Assim temos uma padronização, visto que com tudo sendo escrito em JavaScript, a uniformidade é maior e o trabalho é mais compreensível para quem está envolvido no projeto, seja uma pessoa dev front-end, back-end ou full stack, ou demais profissionais.
Se você ainda não conhece sobre as carreiras dentro do mundo do Desenvolvimento e quais são as principais atribuições e diferenças entre os tipos de pessoas programadoras, não se preocupe, iremos falar sobre isso.
A popularidade da linguagem JavaScript se deve à sua flexibilidade, poder ser utilizada em diferentes paradigmas de programação e ser uma das linguagens mais procuradas para quem está começando a aprender programação
Imagine que você precisa esquentar o seu jantar, então passa um tempinho pensando se vale a pena colocar no forno, aquecer em uma frigideira ou microondas mas acaba optando por levar ao microondas.
Perceba que você tinha várias maneiras de chegar a um mesmo resultado, que era ter o seu jantar aquecido, e optou por aquela que era mais conveniente para a situação. Logo, o “paradigma” escolhido foi o micro-ondas.
Como qualquer tarefa que temos no dia a dia e podemos realizar de diferentes formas para chegar ao resultado desejado, na programação também é assim. Os paradigmas de programação são um “estilo” de programar, uma maneira de construir o código que será escolhida de acordo com o que se adequa melhor para resolver determinado problema.
Os paradigmas mais comuns atualmente são:
Pensando nas linguagens modernas, é possível afirmar que a maioria suporta o uso de diferentes paradigmas, o que é fundamental para que uma linguagem tenha sucesso, já que amplia as possibilidades de resolução de problemas. Em outras palavras, essas são linguagens multiparadigma.
Nesse contexto, por misturar diferentes tipos de paradigmas de programação, a linguagem JavaScript é considerada multiparadigma, o que faz com que haja uma liberdade maior para construir o código, personalizando cada parte de acordo com a necessidade para resolver problemas.
O JavaScript possui uma curva de aprendizado curta. Por não exigir preparação de ambiente complexa e contar com sintaxe simples, é possível ver resultados rapidamente e criar códigos úteis mesmo com pouco tempo de estudo.
Sendo assim, o JavaScript é uma das linguagens com um dos aprendizados mais facilitados, e isso também é presente na maioria das ferramentas que podem ser integradas a esse ecossistema, fazendo com que essa linguagem seja a queridinha de muitas pessoas desenvolvedoras iniciantes.
Será que eu faço uma faculdade de tecnologia? Com Mikaeri Ohana | #HipstersPontoTube
Todas as linguagens de programação têm suas desvantagens. Dessa forma, a linguagem de programação JavaScript não é a exceção.
Algumas desvantagens incluem a possibilidade de uso do JavaScript para executar programas maliciosos sem o conhecimento de quem está usando, além de vulnerabilidades de segurança. Problemas de desempenho também podem ocorrer em determinados dispositivos, resultando em diferenças na renderização de páginas ou aplicações.
Fatores como velocidade da internet, hospedagem, desempenho do servidor e da aplicação, além do design e otimização do site, afetam o carregamento das páginas.
Por isso, é fundamental que desenvolvedoras e desenvolvedores tenham conhecimento em estruturação de código, algoritmos, estruturas de dados, arquitetura e engenharia de software para garantir bom desempenho das aplicações.
A grande maioria dos problemas de desempenho são causados por:
A Internet é um lugar perigoso e o JavaScript não escapa à regra. É comum acontecer de aplicações Web ficarem indisponíveis devido a ataques maliciosos, e até mesmo de acontecer o vazamento de dados dos usuários dessas aplicações pelo mesmo motivo.
As vulnerabilidades, ou seja, ameaças mais comuns da linguagem são:
O mais importante é que você deve entender que uma aplicação Web não pode confiar em nenhum dado do navegador, ou seja, em nenhum dado que venha de um usuário externo. Nesse caso, todos os dados devem ser validados antes de serem exibidos ou usados na aplicação, evitando consultas e chamadas maliciosas dos arquivos.
É fundamental compreender as diferenças entre JavaScript e outras linguagens, pois a escolha depende dos requisitos de cada projeto.
A MELHOR linguagem de programação com Fabio Akita | #HipstersPontoTube
Diante disso, vamos apresentar as principais diferenças entre JavaScript e duas das linguagens de programação mais usadas no mundo: Java e Python.
O Java e o JavaScript se destacam na área da programação por serem linguagens muito utilizadas. Além disso, essas duas linguagens, devido às grafias semelhantes, levantam muitas dúvidas sobre uma possível conexão entre elas.
Aqui deve ficar muito claro que Java e JavaScript são escritas, construídas e executadas de forma diferente. Há também uma grande diferença no que cada linguagem pode fazer.
Ambas as linguagens podem ser utilizadas em diversos contextos. Java, por exemplo, é conhecida pela robustez no desenvolvimento de aplicativos desktop e sistemas back-end. Já o JavaScript se destaca pelo uso na criação de páginas Web interativas e dinâmicas.
Python e JavaScript são linguagens muito poderosas com diferentes aplicações no mundo real.
No geral, Python é muito utilizada na área de ciência de dados, pode ser utilizada no desenvolvimento Web e uma ampla gama de aplicações, incluindo principalmente estudos científicos. Já a JavaScript é usada principalmente para desenvolvimento Web (front-end e back-end) e desenvolvimento de aplicativos móveis, característica essa que a Python deixa a desejar.
Aprendemos bastante sobre a história, a comunidade e o uso de JavaScript em bibliotecas, aplicações e jogos. Que tal colocarmos a mão na massa agora e aprender na prática como utilizar essa linguagem?
Como desenvolver boas práticas de programação? Com Fabio Akita | #HipstersPontoTube
Quando estamos iniciando em uma nova linguagem, é uma tradição começarmos imprimindo na tela o famoso “Olá, mundo!”, e para darmos esse passo importante em JavaScript, é imprescindível que você prepare seu ambiente, realizando o download e instalando um editor de código como o Visual Studio Code, ou outro de sua preferência.
Caso queira conhecer outros editores de código, recomendamos o artigo Sublime, Atom ou VSCode: qual melhor editor de código?
Preparado o ambiente, vamos lá! O JavaScript funciona em conjunto com HTML (que significa “HiperText Markup Language” ou linguagem de marcação de texto, utilizada nos navegadores), dessa maneira, precisamos criar um arquivo com extensão `.html` (`index.html`, por exemplo), e dentro desse arquivo precisamos usar o corpo de uma página HTML, da seguinte maneira:
<!DOCTYPE html>
<html>
</html>Agora, perceba que o HTML é uma linguagem de marcação, ou seja, utiliza marcações (etiquetas ou tags) para informar ao navegador o que é cada coisa dentro dele. E para o código JavaScript, também temos uma tag. Vamos usar a tag`script`, dentro da tag`html`, para guardar nosso código, veja abaixo:
<!DOCTYPE html>
<html>
<script>
</script>
</html>E, claro, agora precisamos imprimir o nosso “Olá, mundo!” e, para isso, usaremos o `console.log()`, que vai imprimir na aba de console do navegador a mensagem que quisermos. O código final fica da seguinte maneira:
<!DOCTYPE html>
<html>
<script>
console.log("Olá, mundo!")
</script>
</html>Depois de concluir e salvar seu código, abra a pasta do arquivo e abra o arquivo `.html` no seu navegador, espere abrir e clique com o botão direito em qualquer área da tela, escolha a opção inspecionar. Deve abrir a seguinte aba:
Na opção "Console", você pode observar a frase “Olá, mundo!” impressa, é dessa maneira que visualizamos as impressões que vamos utilizar em nosso código JavaScript.
Em JavaScript, assim como em outras linguagens de programação, nós trabalhamos com funções, que nada mais são do que um trecho de código que pode ser invocado (chamado) em outro momento no seu algoritmo. Para criar uma função em JavaScript, é bastante simples, basta escrever da seguinte forma:
function nomeDaFuncao(){
//o que a função faz (corpo da função)
}Na prática, imagine que queremos criar uma função para somar`6 + 4`, podemos dizer que o nome da função é `soma` e no corpo da função, ou seja, aquilo que ela vai fazer, podemos usar um `console.log(6 + 4)` para escrever o resultado da soma no console. Vamos ver abaixo como o código ficaria:
<!DOCTYPE html>
<html>
<script>
function soma() {
console.log(4 + 6)
}
</script>
</html>Mas note que se você testar apenas isso, nada vai aparecer no console do seu navegador. E por quê? Como disse anteriormente, as funções precisam ser invocadas, chamadas em algum momento do seu código. Portanto, você deve chamar a função pelo seu nome `soma()`, veja abaixo:
<!DOCTYPE html>
<html>
<script>
function soma() {
console.log(4 + 6)
}
soma()
</script>
</html>E agora sim, você deve conseguir ver o resultado `10` no seu console.
Outro ponto interessante é que funções também podem receber parâmetros, argumentos (dados), que são passados para a função no momento da sua chamada. Então, agora imagine que queremos uma função que some qualquer número, podemos usar um argumento `x` e outro `y` que serão somados dentro do `console.log`, da seguinte maneira:
<!DOCTYPE html>
<html>
<script>
function soma(x, y) {
console.log(x + y)
}
</script>
</html>Assim, podemos realizar somas distintas apenas passando diferentes valores na chamada da função, veja como ficaria o código:
<!DOCTYPE html>
<html>
<script>
function soma(x, y) {
console.log(x + y)
}
soma(4, 6)
soma(3, 5)
</script>
</html>Nesse algoritmo a saída seria respectivamente `10` e `8`.
Repare que as funções que aprendemos acima podem ser chamadas dentro da própria tag script dentro do HTML, ou dentro de um arquivo JavaScript linkado ao HTML, como aprendemos anteriormente. Porém, indo um pouco além, que tal chamarmos a função quando apertamos um botão na página HTML?
Para isso, usamos a tag HTML `<button>` e o atributo `onclick` (que significa "ao clicar"), que permite associar uma função JavaScript ao evento de clique do botão. Veja abaixo como funciona:
<!DOCTYPE html>
<html>
<button onclick="soma(4, 6)">Me aperte</button>
<script>
function soma(x, y) {
console.log(x + y)
}
</script>
</html>Agora, ao clicarmos no botão, a função `soma(4, 6)` é chamada e a soma de `4 + 6` aparece no console do nosso navegador.
Além disso, caso tenha interesse em conhecer um pouco mais sobre funções, e algumas que são muito utilizadas no JavaScript, recomendamos o vídeo Funções no JavaScript que você precisa conhecer:
Functions (Funções) EXPRESSION vs DECLARATION no JavaScript | #AluraMais
Ao passo que seu algoritmo vai crescendo, com uma página HTML grande e um código JavaScript também, pode ser desfavorável deixar ambos juntos no mesmo arquivo. Dessa maneira, seria legal se pudéssemos separar ambos em arquivos diferentes, não é mesmo? E é isso que vamos aprender agora!
Utilizando o mesmo algoritmo onde imprimimos “Olá, mundo!” no nosso console, podemos colocá-lo em um novo arquivo, de extensão `.js`, vamos chamá-lo de `script.js`. Você terá então dois arquivos no seu projeto, veja a imagem abaixo:
Dentro do arquivo `script.js` teremos o seguinte conteúdo:
console.log(“Olá, mundo!”) E para referenciar o nosso novo arquivo JavaScript dentro do código HTML, podemos usar o atributo `src` (fonte ou source), dentro da tag `script`, para informar o caminho para o nosso código JavaScript. Veja abaixo:
<!DOCTYPE html>
<html>
<script src="script.js"></script>
</html>Pronto! Agora ao executar e visualizar o resultado no console do navegador, o resultado deve ser o mesmo, usando arquivos diferentes.
Caso tenha interesse em entender mais sobre essa relação entre o JavaScript e o HTML, e aplicar na prática esses conceitos, recomendamos o curso Javascript e HTML: desenvolva um jogo e pratique lógica de programação.
Para representar uma lista de elementos, utilizamos o Array no JavaScript. Ele permite armazenar, acessar e manipular múltiplos valores de forma eficiente. Veja como criar um Array:
let cores = ['amarelo', 'vermelho', 'azul', 'preto' ] O Array acima possui quatro elementos, representando uma lista de cores. Como exemplo, vamos ver as operações de incluir um novo elemento, retirar o elemento e ver o tamanho do Array:
let cores = ['amarelo', 'vermelho', 'azul', 'preto' ]
console.log(cores) //saída: ['amarelo', 'vermelho', 'azul', 'preto']
cores.push('verde')
console.log(cores) //saída: ['amarelo', 'vermelho', 'azul', 'preto', 'verde']
cores.pop()
console.log(cores) //saída: ['amarelo', 'vermelho', 'azul', 'preto']
console.log(cores.length) //saída: 4Confira o passo a passo realizado:
Se quiser aprofundar mais ainda os conhecimentos em Arrays, ver mais exemplos, aplicações e métodos do JavaScript, recomendamos o curso JavaScript: Arrays.
Outro aspecto fundamental em JavaScript são os objetos, estruturas compostas por pares de chave e valor. Diferentemente dos arrays, que são acessados por índices, os objetos permitem acessar valores por nomes de propriedade. Vamos criar um exemplo de objeto chamado `pessoa`:
let pessoa = {} Repare que nosso objeto ainda não possui nada, é um objeto vazio, ou sem atributos. Podemos então dar características para o objeto `pessoa`, como um nome, idade e seus hobbies, por exemplo. Criaremos então esses atributos, da seguinte maneira:
let pessoa = {
nome: "Maria",
idade: 22,
hobbies: ["ler", "programar"]
}Agora, no nosso objeto `pessoa`, temos um nome, uma idade e uma lista de hobbies. Bem legal, não é?
Existem diversas aplicações para objetos em JavaScript, por exemplo: representar relações do dia a dia, bancos, contas e muitas outras coisas. Caso tenha interesse em aprofundar os conhecimentos em objetos, recomendamos o curso JavaScript: objetos.
Leia também: Prototype: descubra como quase tudo no JavaScript é um Objeto
Quando falamos de páginas Web e JavaScript, não podemos deixar de falar do DOM, que significa Document Object Model. Trata-se da modelagem de todo o HTML, ou seja, ele é gerado pelo navegador para representar a sua página Web inteira.
Podemos imaginar o DOM como uma árvore genealógica, porém, de forma invertida, em que um elemento principal vai dando origem a outros elementos filhos.
E nessa árvore vamos ter todos os elementos da página que estamos representando, de forma estruturada, como podemos ver no exemplo abaixo:
O motivo de precisarmos entender o DOM, se deve ao fato de que o JavaScript irá utilizá-lo para se conectar ao HTML. Por isso, conseguimos navegar dentro da nossa página Web utilizando o JavaScript, além disso, vamos conseguir alterar elementos, mudar como os elementos estão sendo mostrados, adicionar funções, interatividade, mapas, listas e diversos conteúdos.
Caso você queira aprofundar mais o conhecimento em DOM e entender melhor seu funcionamento, recomendamos o artigo O que é o DOM? e o curso Javascript: manipulando o DOM, para completar os seus estudos.
Quando você é uma pessoa desenvolvedora, não precisa necessariamente começar um projeto do zero absoluto, para isso, nós temos os Frameworks, que são basicamente ferramentas, trechos de código e componentes por trás de alguma linguagem de programação que vão ajudar no processo de desenvolvimento do projeto.
Os frameworks auxiliam no desenvolvimento do projeto ao fornecer estruturas, métodos e componentes prontos, permitindo que você foque nas funcionalidades principais ao invés da configuração inicial.
Há diversos frameworks em JavaScript, cada um com características e aplicações específicas. Para aprofundar seus conhecimentos, confira nosso artigo sobre Framework: o que é e para que serve essa ferramenta.
Outro recurso que podemos utilizar no dia a dia são as bibliotecas, também chamadas de libs. As bibliotecas são códigos prontos, funcionalidades já criadas e recursos que podem ser reaproveitados em qualquer trecho do código. A ideia é compartilhar códigos de problemas que já foram solucionados.
Nesse momento, você pode estar se perguntando qual a diferença entre framework e biblioteca, por eles terem alguns objetivos parecidos, mas vamos passar com calma para entender a diferença entre eles.
O framework vai conter elementos de código, estruturas e métodos que vão guiar o desenvolvimento da sua aplicação, eles vão otimizar todo o processo. Além disso, o seu código deve seguir os padrões estabelecidos pelo framework. De certa forma, podemos dizer que o framework controla como sua aplicação deve ser desenvolvida.
A biblioteca disponibiliza recursos que podem ser usados durante o desenvolvimento da aplicação, sendo você responsável por escolher quando e onde utilizá-los.
Um outro detalhe é que os frameworks podem conter diversas bibliotecas dentro deles, porque como acabamos de ver, as bibliotecas são ferramentas que trazem alguma funcionalidade para nossa aplicação, e simplificam a criação de funções complexas.
Pode surgir a dúvida sobre quais ferramentas (bibliotecas e frameworks) são mais utilizadas hoje e qual tipo de aplicação elas ajudam a desenvolver. Segundo uma pesquisa do Stack Overflow para o ano de 2025, essas seriam as ferramentas mais utilizadas no quesito desenvolvimento:
Sendo Next.js e Express os frameworks mais utilizados, o React e Jquery as bibliotecas, e o Node.js o ambiente de execução Javascript.
A lista de ferramentas para o desenvolvimento web é muito extensa, por isso, nesse artigo vamos abordar sobre o Angular, o Node.js, React, React Native e jQuery, que são alguns dos frameworks, bibliotecas e ambientes de execução mais utilizados segundo a pesquisa da Stack Overflow.
O Angular é um framework TypeScript front-end de código aberto, criado pelo Google e utilizado para desenvolvimento de aplicações Web. Em abril de 2026, as versões suportadas são Angular 19 (LTS até maio de 2026), Angular 20 (LTS) e Angular 21 (em suporte ativo), sendo que Angular 22 é esperado para maio de 2026.
Ele possui um conjunto de templates, componentes, módulos e ferramentas que acabam acelerando o processo de desenvolvimento de uma aplicação.
O Angular é bem interessante quando queremos desenvolver as famosas Single Page Applications, também chamadas de SPA. As SPA's são aplicações que rodam em apenas uma página, e as informações vão sendo carregadas dinamicamente ou já estão todas carregadas.
É importante reforçar que, apesar de ser um framework JavaScript, a escrita do Angular é feita com um superconjunto JavaScript, o TypeScript, que você pode conhecer melhor no artigo JavaScript ou TypeScript?
Entenda as principais diferenças. Além disso, é comum que haja confusão entre Angular e AngularJS, pois apesar do nome similar, são frameworks diferentes. O vídeo abaixo esclarece a diferença entre ambos:
O que é Angular e AngularJS? #HipstersPontoTube
De forma resumida, a SPA não irá recarregar a página inteira ou mudar de página, apenas o conteúdo da página vai ser atualizado. Um exemplo de uma SPA é o Gmail do Google, tudo acontece na mesma página e apenas o conteúdo principal é alterado.
Single Page Applications – Hipsters Ponto Tech #16
spotify:3ENNzCCYCKJnKdCW8iGsC6:episode
Caso tenha interesse em conhecer mais ou se aprofundar no Angular, vamos deixar o link do artigo Como começar no Angular e Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD.
O Node.js é um ambiente de execução JavaScript construído sobre o motor V8 do Chrome, ou seja, é uma plataforma que permite criar e executar código JavaScript no servidor, sem a necessidade de um navegador. Em abril de 2026, as versões LTS suportadas são Node.js 20.x, 22.x e 24.x, sendo a versão 22.x a Active LTS atual.
O Node.js é uma ferramenta extremamente potente e isso se deve ao fato de possuir dentro dela o Chrome's V8 JavaScript Engine. Sendo esse o motor V8 de alto desempenho do Chrome que torna possível visualizar as páginas em JavaScript no nosso browser.
Para compreender como o Node.js faz uso desse motor, além de outras peculiaridades dessa ferramenta, recomendamos o vídeo sobre NodeJS — o que é e como funciona:
Uma característica marcante do Node.js é que ele é altamente escalável, ou seja, torna possível criar aplicações Web que trabalham muito bem com alto número de requisições. Sendo esse um dos motivos pelo qual ele é utilizado em empresas como Uber, Netflix e LinkedIn.
Outras características que tornam o Node.js uma boa escolha seria o fato de ser multiplataforma, multiparadigma, ter código aberto (open source) e possuir uma comunidade muito grande e colaborativa.
Além disso, se quiser aprofundar ainda mais o seu conhecimento sobre Node.js, recomendamos o artigo Node.JS: definição, características, vantagens e usos possíveis e o curso Node.js: criando sua primeira biblioteca.
O React ou também chamado de ReactJS é uma **biblioteca JavaScript de código aberto mantida pela Facebook, utilizada para criação de aplicações front-end. O React é considerado uma biblioteca pelo fato de ser uma coleção de funcionalidades relacionadas que podem ser chamadas pela pessoa desenvolvedora para resolver algum tipo de problema.
Ele possui diversas características que o tornam um ótima opção para desenvolvimento Web, por exemplo: a utilização de componentes é licenciado pelo MIT (“Massachusetts Institute of Technology” ou Instituto de Tecnologia de Massachusetts, em Português) e é utilizado para criação das Single Page Applications.
Além disso, é utilizado por grandes empresas como Twitter, Airbnb e Facebook. Se quiser se aventurar nesse mundo do React, recomendamos o curso React: desenvolvendo com JavaScript.
O React também pode ser utilizado junto com outra ferramenta para construir aplicativos móveis, o React Native.
O React Native é um framework para desenvolvimento de aplicativos móveis, que agiliza o processo de criação de aplicações multiplataforma, funcionando tanto em dispositivos iOS quanto Android. Tudo isso é possível utilizando JavaScript.
Algumas características marcantes do React Native que o tornam uma boa opção para desenvolvimento mobile são:
Um ponto que influencia muito nessa escolha é a vantagem de usar o mesmo código base para desenvolver iOS, Android e Web.
Caso queira aprofundar o conhecimento, entender mais como funcionam essas ferramentas e como trabalhar com elas, recomendamos o artigo React Native: o que é e tudo sobre o Framework.
E se quiser entender melhor a diferença entre essas duas ferramentas, recomendamos o vídeo Diferenças entre React e React Native:
Diferenças entre React e React Native | #AluraMais
O jQuery é uma biblioteca JavaScript criada em 2006 e ainda bastante utilizada no desenvolvimento Web por facilitar a interação e dinamicidade das páginas HTML. De forma mais direta, o jQuery torna a vida da pessoa que desenvolve em JavaScript mais simples, fazendo com que ela escreva uma instrução de forma bem mais sucinta.
Além do mais, o jQuery também é código aberto então a comunidade de devs está livre para melhorá-lo e incrementar mais funcionalidades a ele. Se interessou? Se sim, recomendamos a leitura do artigo jQuery: DOM, AJAX e Máscaras e o Curso de jQuery: domine a biblioteca mais popular do mercado parte 1 para se aprofundar mais no assunto!
Escolher em qual área atuar é um passo importante na carreira de qualquer pessoa. No setor de tecnologia, especialmente no desenvolvimento de software, existe uma alta demanda por profissionais qualificados e diversas oportunidades.
No meio dessa área de desenvolvimento de software, por que o JavaScript seria uma boa opção?
Como vimos anteriormente, dentro do mercado de trabalho atual o JavaScript é a linguagem mais utilizada no mundo, como mostra a pesquisa abaixo, feita no segundo trimestre de 2022 pelo site Stack Overflow, com cerca de 70.000 pessoas desenvolvedoras.
Caso se sinta confortável na língua inglesa e queira acessar a pesquisa completa, este é o link:
• Stack Overflow Developer Survey 2022
Além disso, temos diversos exemplos de vantagens de ser uma pessoa programadora Javascript, por exemplo:
Um dos aspectos que faz o JavaScript ser tão popular para o mercado de trabalho é justamente a sua comunidade dedicada a implementar a linguagem em diversas áreas do desenvolvimento. Com isso, vamos entender melhor cada uma dessas áreas.
Dentro da área de desenvolvimento de software, existem diversos ramos, tais como o desenvolvimento de páginas Web, que são os sites que você acessa através do navegador, e também de aplicativos para celular.
Vale lembrar que podemos usar JavaScript em outras áreas, porém essas são as mais populares. Para que você tenha um aproveitamento melhor dos conteúdos a seguir, recomendamos a leitura destes artigos:
Caso tenha interesse em podcasts, temos essa conversa incrível com profissionais de tecnologia, na qual eles falam sobre Planejamento de carreira para devs.
Planejamento de carreira de Devs – Hipsters Ponto Tech #309
spotify:65gBBFhlBEyAKieoCchpEa:episode
Além disso, pensando em sua construção de conhecimento para elaborar o seu perfil em T, a Alura preparou o TechGuide.sh, um mapeamento das principais tecnologias demandadas pelo mercado, para ajudar a guiar sua jornada de aprendizado na área em que você deseja mergulhar (front-end, back-end, data science, mobile, entre outras).
Dev em T: programação, carreira e tipos de perfil | #HipstersPontoTube
O back-end de um projeto em JavaScript, assim como em qualquer outra linguagem, é aquilo que acontece por trás da aplicação e que o usuário não vê, como, por exemplo:
A tecnologia mais utilizada no back-end que tem o JavaScript rodando por trás dos panos é o Node.js, se quiser mergulhar nesse mundo, recomendamos este episódio do Hipsters.Talks que nos conta um pouco sobre o JavaScript no back-end e também outro vídeo do Hipsters.Tech para nos contar sobre carreira.
JavaScript para back-end
O que faz uma pessoa desenvolvedora Back-End?
Guia de carreira Node.JS
Gostou do vídeo e das nossas sugestões para se aprofundar em Node.JS e nessa carreira? Baixe agora mesmo o Guia e comece seus estudos em tecnologia: Tech Guide — Node.JS
Neste ramo do desenvolvimento Web, nós lidamos com a implementação do visual da página, onde utilizamos HTML, CSS e a nossa amada JavaScript para preencher a página com conteúdo, estilizá-la e colocar interação usando essas três ferramentas em conjunto.
Juntamente com o conhecimento desse ecossistema, no mercado de trabalho temos a utilização de algumas ferramentas já citadas aqui que serão interessantes para alavancar a sua carreira, como, por exemplo: Angular, React, entre outras.
Caso queira entender melhor sobre o JavaScript no front-end, recomendamos esses conteúdos abaixo:
O que faz uma pessoa desenvolvedora Front-End?
Guia de Carreira Front-End
Gostou do vídeo e das nossas sugestões para se aprofundar em Front-end e nessa carreira? Baixe agora mesmo o Guia e comece seus estudos: Tech Guide — Front-End
Para uma pessoa desenvolvedora full stack, é essencial ter conhecimento tanto de back-end quanto front-end, esse ramo da Web é a junção dessas duas grandes áreas, então se você pretende seguir carreira aqui, é esperado que você tenha o conhecimento de ambas.
Essa área mistura dois grandes campos do desenvolvimento, porém o JavaScript facilita o processo de aprendizagem delas por fornecer suporte com uma ou mais ferramentas em cada área dessas. Recomendamos esses conteúdos abaixo para um melhor entendimento da carreira full stack. Como se tornar dev full stack?
Como se tornar dev full stack?
Qual a melhor stack JavaScript?
E por fora das páginas da Web, temos o desenvolvimento de aplicações móveis, que são os aplicativos que você usa aí no seu celular, seja ele Android ou iOS, e felizmente o JavaScript também presta suporte para essa área.
Aqui nós utilizamos o React Native, que é uma vertente do React para o desenvolvimento de aplicativos. Este é um mercado vasto, pois hoje em dia nós conseguimos fazer tudo pelo celular, seja acessar um App de um banco, comprar passagens, pedir comida e até mesmo conversar com outras pessoas por videochamadas.
Para desmistificar como é a carreira de desenvolvimento mobile, temos essa playlist incrível da Alura, que aborda as tecnologias mais utilizadas e por onde começar:
Desmistificando Mobile — Por onde eu começo? #01
Você provavelmente já utilizou algum aplicativo ou site desenvolvido com JavaScript e não sabia. Abaixo temos algumas listas separadas por áreas (front-end, back-end e mobile) e tecnologias (React, Angular, Node.js, React Native) de empresas que as utilizam atualmente em suas aplicações:
Front-end
| Empresa | Framework / Biblioteca |
| React | |
| Angular | |
| Airbnb | React |
| Dropbox | React |
Back-end
| Empresa | Framework / Biblioteca |
| Node.js | |
| eBay | Node.js |
| PayPal | Node.js |
| Netflix | Node.js |
Mobile
| Empresa | Framework / Biblioteca |
| React Native | |
| Wix | React Native |
| Microsoft | React Native |
| Discord | React Native |
| PlayStation App | React Native |
Portfólio e carreira em tecnologia
01) Como fazer um portfólio em tecnologia?
02) 5 Projetos para quem está na carreira tech
Acesse gratuitamente as primeiras aulas da Formação JavaScript para Front-end, feita pela Escola de Front-End da Alura e continue aprendendo sobre temas como:
1. JavaScript para Web: Crie páginas dinâmicas
2. JavaScript: manipulando o DOM
3. JavaScript na Web: armazenando dados no navegador
4. JavaScript: validações e reconhecimento de voz
5. JavaScript: consumindo e tratando dados de uma API
6. JavaScript: métodos de array
7. JavaScript: criando requisições
8. JavaScript: validando formulários
Como aprender melhor? Com Diogo Pires
Neste artigo conhecemos a linguagem JavaScript, sua história, algumas vantagens e características. Além de conhecer sua principal funcionalidade nos navegadores, vimos seu uso em frameworks e bibliotecas, e como são utilizadas no mercado de trabalho.
Como vimos, JavaScript oferece diversas opções de carreira em tecnologia. Se quiser se aprofundar em front-end, recomendamos a Formação JavaScript para Front-End, onde você aprenderá mais sobre criação de páginas Web e terá uma base sólida para trabalhar com os principais frameworks do mercado.
E caso tenha interesse em se aprofundar no back-end utilizando JavaScript, recomendamos a formação JavaScript para back-end, que vai te ensinar mais sobre o desenvolvimento de sistemas back-end, APIs e bibliotecas, com o Node.js.
Parabéns por ter chegado até aqui, agora é hora de mergulhar nesse conhecimento!
André Louis, Jhoisnáyra Vitória e Matheus Perez pela parceria durante a escrita deste artigo.
Avalie este artigo
