Primeiras aulas do curso JavaScript: desenvolvedor poliglota

JavaScript: desenvolvedor poliglota

Emulando recursos de outras linguagens - Introdução

Bem-vindos eu sou Flávio Almeida e vamos direto ao ponto, a ideia Central deste poço é demonstrar que para conhecer outras linguagens e frameworks podem ampliar sua capacidade técnica na linguagem Java Script.

Ao longo do curso tomo como inspiração linguagem como Python, TypeScript, Premium Office de persistência do mundo Java como Hibernate ou até mesmo Active Record do Rails.

Vamos implementar com escopo reduzido esses recursos e frameworks para que você coloque em prática Java Script e também aprenda novos conceitos, para que saia transformado daqui, procurei organizar os capítulos com nível de dificuldade gradativo mas garantindo que conceitos complexos sejam acessíveis.

Temos uma sugestão de pré-requisitos que vale a pena você dar uma olhada antes de continuar para que tenha um desempenho extraordinário neste curso, por fim verifique a estrutura necessária e como baixar o projeto deste curso no primeiro exercício deste Capítulo, até mais.

Emulando recursos de outras linguagens - Acessando o projeto e subindo o servidor

Vamos lá pessoal, eu já tenho o NodeJS instalado, o Visual Studio Code, baixei o projeto, descompactei na minha área de trabalho e agora a primeira coisa que quiser fazer é abrir a parte do projeto dentro do Visual Studio Code, eu vou vir em “Open” - se você usa o Windows existe a opção “Open folder” é essa opção que você vai utilizar.

Vou para minha área de trabalho, tem um projeto Alura-já, vou dar dois cliques na pasta e abrir, no lado esquerdo consigo ver a pasta do projeto, cada capítulo do 1 ao cinco, são os capítulos do Curso e vamos subir um pequeno servidor para que tenhamos e vai começar pelo Capítulo 1.

Aa esse endereço HTML está dentro do Capítulo 1. Então como é que sobe o servidor? Dentro do Visual Studio Code pode abrir por fora se quiser usar o seu editor de texto favorito - vai abrir view terminal.

Isso significa que ele abriu o seu terminal padrão do sistema operacional, dentro da pasta “Alura_ja”, e precisa executar o comando fechamento – vou aumentar a fonte.

Precisa executar o comando npm install. Esse comando vai baixar as dependências do pequeno servidor de novo que nós temos e para subir vai escrever node server.

Subindo o servidor tem a URL http://localhost:3000, vamos abrir a URL no navegador, vai no navegador, abro minha URL e vai ser exibido um atalho, índice para cada arquivo de cada capítulo isso significa se clicar em Capítulo 1 eu vou abrir o endereço HTML do capítulo 1.

No caso o arquivo que nós vamos trabalhar, apenas um shortcut. Toda vez que você abriu seu projeto para você poder ir rapidamente para o projeto capítulo que está trabalhando.

Temos tudo em seu devido lugar, vamos começar de algo simples, mas que faz uma grande diferença para maneira que organizaremos o código do nosso curso, vamos organizar código em módulos, mais especificamente módulo nativo do actionscript suportados pela maioria dos navegadores modernos; nada de webpack com Babel ou qualquer outro tipo de trans compilação. Vamos ver.

Emulando recursos de outras linguagens - Módulos Nativos do JavaScript

Então vamos lá pessoal, dentro da pasta do capítulo 1 abrir o arquivo index HTML, podemos ver que é apenas um esqueleto de html que nos permitirá importar os scripts que utilizaremos ao longo deste Capítulo.

Vamos adotar a convenção de que o arquivo principal da nossa aplicação, ou seja o script principal da aplicação será sempre app.js e dentro da pasta capítulo 1 - eu vou clicar aqui com o botão direito “New Folder” vou criar app e vou criar arquivo dentro chamado app.js que vai ser o principal.

Todos os capítulos vão seguir a mesma convenção, só que precisa importar este arquivo para poder programar, eu vou importar o script src, script src=”app/app.js” não tem mistério nenhum, vou salvar e vou voltar lá no Jardim de Infância para saber se o script foi carregado.

Vou colocar alert('Calopsita') para saber se realmente quando eu recarregar a página esse script está sendo carregado. Então vou voltar lá no navegador, vou dar um refresh na página e foi carregado.

Apesar de funcionar, vocês devem lembrar que vamos trabalhar com módulos nativos do actionscripts então para poder trabalhar o modo nativo do Street vai considerar como se fosse o primeiro como primeiro módulo principal da aplicação, aquele que vai ser carregado primeiro e que mais tarde nós veremos que carregará todos os outros módulos que for preciso.

Vamos parar de chamar webjs , vamos chamá-lo de módulo, ele vai gostar disso, para tratar como módulo a importação é um pouco diferente continua botando o src para apontar para onde está o script, mas vamos dizer que o script é o type=”module”.

Isso é importante porque se você não quer contar episódios quando você carregar esse Script, o navegador não vai considerar como módulo, eu vou salvar, voltar no navegador. Vou recarregar e tudo continua funcionando.

Eu não vou ficar usando um alert para saber se o script foi carregado ou não, vou voltar lá no meu App JS, vou apagar, vou voltar para navegador, vou abrir com f12 no Windows ou “control + Shift + C” no Mac Command - vou abrir o terminal do Chrome, o próprio terminal do console.

Vou direto na aba “network”, vou pegar esse console do Chrome vou colocar ele sempre à direita para dividir uma tela comigo, vou chegar na aba “network” vou dar um refresh da página.

Vou apertar F5, apertando F5 vê que o index HTML foi carregado, inclusive o app.js. Então é uma forma mais profissional de saber se o script foi carregado ou não. Vamos voltar.

Em concursos anteriores eu ensinei quais são as vantagens de se organizar um código em módulos, porém vamos realizar uma pequena revisão focando nos principais aspectos. Se você já domina o conceito de módulo, sinta-se livre para pular o próximo vídeo.

Sobre o curso JavaScript: desenvolvedor poliglota

O curso JavaScript: desenvolvedor poliglota possui 209 minutos de vídeos, em um total de 79 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas