[Música] fala Mestres beleza no vídeo de hoje nós vamos continuar aqui né no nosso curso de lógica de programação e nessa aula aqui nós vamos configurar o ambiente tá então quando a gente fala de ambiente e JavaScript nós temos aí várias discussões e várias possibilidades porque o JavaScript e aqui a gente não vai entrar na história da linguagem mas eu só V recapitular como que quais em qual ordem os eventos aconteceram primeiramente nós tínhamos lá o browser né os navegadores que nos navegadores foi criado foi desenvolvido e foi usado muito nos navegadores e até hoje
é primariamente o JavaScript então o JavaScript ele foi usado a maior parte do tempo do navegador né no Browser na verdade não foi Vamos dizer que sim né a maior parte do tempo o JavaScript funcionou ali dentro do navegador então quando eu falo que ele funcionava no Browser e a gente pode imaginar como o browser sendo um programa que é instalado no computador e esse browser ele interpreta o código JavaScript e executa ali a ação devida tá então por muito tempo isso funcionou assim até o surgimento do node né o node JS que o node
JS ele é basicamente foi basicamente né A extração do interpretador do JavaScript de dentro do navegador e levou isso para fora e esse para fora onde é esse para fora é direto na máquina então ao invés de a gente ter que instalar um navegador que esse navegador vai interpretar o JavaScript agora a gente instala o node JS e o node JS ele é dedicado ele é somente para isso né então o que antes a gente precisava de ter uma estrutura inteira de um navegador Web agora não agora nós só instalamos ali o node ele si
já interpreta o JavaScript é muito mais performático é é dedicado somente para JavaScript então e aí sim né o JavaScript foi levado pro lado do servidor que agora com o node a gente consegue instalar o JavaScript num servidor que tá rodando e enfim que vai ficar eh um servidor web por exemplo que vai ficar ali o usando o JavaScript o programa que a gente criou usando JavaScript né então o que eu o que eu quero que vocês entendam é que hoje nós temos a possibilidade de usar o JavaScript tanto no navegador quanto no servidor então
para esse nosso curso eu poderia eh eu eu tenho né como opção aí de mostrar os exemplos e de criar o código né escrever o código ali digitar e botar o navegador para interpretar ou eu posso fazer o uso do node para pra gente ver ali o resultado do que a gente tá desenvolvendo Então nesse caso eu vou fazer o uso do node tá e pra gente porque vai ficar melhor a integração lá no visual Studio code que eu vou apresentar tudo isso aqui para vocês e vocês vão ter essa noção melhor tá então aqui
no meu navegador eu até pesquisei aqui né visual Studio code download e nodejs download então nós temos os links né os link de download tanto do visual Studio quanto do node visual Studio vai ser a nossa ide vai ser basicamente o o o editor de texto que nós vamos usar para criar os nossos arquivos e executar eles pra gente ver tudo tudo funcionando tá então aqui no link né de instalação do visual Studio code nós temos aqui os instaladores você vai escolher um instalador e específico aí pra sua máquina e também no nodejs aqui ó
temos aqui a opção de download e nós podemos fazer o download aí eh do Instalador ou ou dos binários E no caso binários de Mac ou Linux mas a gente consegue fazer aqui a instala a o download desses pacotes aí pra gente instalar na nossa máquina o node a gente vai baixar o LTS agora que eu estou gravando o node já tá na versão 20.10 e a gente vai instalar isso aí na nossa máquina então depois de fazer o download ele vai ele vai baixar né os instaladores no meu caso aqui como eu tô no
Windows né nós teremos aqui esses dois instaladores e Basic é dois executáveis né e basicamente a gente executa aqui e vai pelo passo a passo de instalação tá então no node nós iremos concordar com os termos né ler aqui os termos eu eu mesmo já li Você concorda com os termos clica em próximo escolhe o diretório de instalação e aqui nessas nesse Custom setup né que seria um a forma da gente cust aqui como que o node vai ser instalado e a gente também não vai mexer em nada tá então vamos mudar em next Ah
isso aqui é para instalar alguns módulos nativos que também a gente não vai querer isso então clique em next E clicando em install ele já vai instalar tá eu não vou clicar aqui porque eu já tenho o node instalado na minha máquina então eu vou cancelar a instalação e finalizar e naquele botão ali de instalar ele vai pedir as permissões do administrador você dá D permissão e ele vai fazer a instalação e o vs code também né no vs code você vai concordar e ler os termos né Eh aqui também você clica em next eh
em próximo né eh você pode ou não adicionar o Icone no seu desktop enfim mas isso aqui a gente não mexe em nada e essa parte de Edit pef é importante então não desmarquem isso tanto no no o vs code quanto no node deixa isso aqui marcado cli next aqui ele vai pedir para revisar e já para fazer a instalação Eu também já tenho instalado então eu não vou clicarem aqui em install Mas você clica aqui em Install e ele vai instalar Beleza vou sair aqui da instalação e com os dois instalados a gente já
pode começar a ver se tá tudo OK tá então a gente já pode na verdade a gente já pode iniciar no próprio vs code então eu vou executar aqui o meu vs code tá ele vai abrir aqui para mim em um diretório na verdade vamos fazer o seguinte vamos fazer ISO assim ó eu vou criar aqui um diretório pra gente trabalhar tá então eu tenho aqui o meu diretório de trilha lógica né temos aqui esse diretório aulas então que é onde eu vou preparar as aulas Então você vai ter aí também um diretório vai criar
um diretório aí onde você vai trabalhar e aqui você pode clicar com o botão direito no caso do Windows né tem como mostrar mais opções e tem aqui ó Open with code ele vai abrir com o vs code caso você não tenha você pode clicar na barra aqui de pesquisa e digitar CMD que ele vai abrir o terminal naquele diretório então aqui ó o o diretório de mestres trilha lógica e aulas né que é o diretório ou caso você não queira clicar aqui na barra superior Você pode abrir um CMD novo aqui não é o
wsl deixa eu dar o a pesquisar aqui né comand prompt no Windows que ele vai abrir um CMD novo e aqui eu tô no disco C eu usuários contas eu eu posso Navegar pro diretório que eu quero que no caso aqui é o o disco D Mestres tril lógica aulas né então aqui ó dou um d dois pontos CD Mestres né barra barra trilha Opa trilha lógica aqui é contra barra né bilha lógica contra barra aulas e ele vai navegar né para esse diretório aí e dentro do diretório a gente pode digitar o Code ponto
e ele vai abrir o viés code naquele diretório Então essas aí são as formas da gente abrir o vs code e abrir o o vs code já direto dentro de um diretório ou você pode né a outra opção seria já abrir o vs code instalou pesquisou aqui né visual Studio code ele vai abrir com nenhum diretório aberto tá no meu caso aqui ele já vai abrir nesse diretório aulas né se eu fechar e abrir de novo então que eu vou fechar visual Studio code Ele abriu aqui na minha outra tela no diretório Na verdade ele
não abriu diretório nenhum né m melhor até porque aqui ó você pode clicar em arquivo abrir e folder né Open folder para ele já abrir um diretório na sua máquina e no meu caso eu vou pegar aqui o diretório da Mestres né que seria esse diretório aulas aí que nós temos ó Então tá aqui disco D mestr trilha lógica diretório aulas selecionar a pasta e ele vai abrir esse diretório pra gente tá então o seu vs code ele vai tá um pouco diferente do meu porque tem algumas configurações que eu fiz aqui e eu já
vou abrir essas configurações aqui no meu vs code tá então o que que eu fiz aqui no meu eu criei um workspace né O que que é esse workspace no vs code é uma área de trabalho então eu meio que criei um conjunto de configurações e salvei no meu workspace para ficar eh pra gente usar só essas configurações e quais configurações São essas a gente começa pelas extensões tá então aqui na aba esquerda nós temos essa aba extensões que nós podemos instalar algumas extensões algumas criadas pelo próprio pelo próprio pessoal da Microsoft outras da comunidade
que nos ajudam muito tá então o que que eu tenho instalado aqui eu tenho github team né que é o tema do meu vs code então você pode instalar aí essa extensão e clicar em that color team né que ele vai dar aqui as opções Eu uso o github Dark e outra extensão muito importante que eu tenho aqui é o prier esse prier Então o que vocês o que eu recomendo que vocês instalem aí github team prier e esse code Runner Tá eu vou explicar o que que é cada um mas vamos começar aqui ó
pelo prer o que que é esse prer ele vai formatar o nosso código então se a gente digitar um código com espamento errado com identação errada com algumas coisas estranhas o prer vai nos ajudar e vai formatar pra gente então para evitar bagunça né Agora que você agora que você tá iniciando aí a programação o prer vai te ajudar muito e temos também o Code Runner né que como o nome já fala ele executa o código que a gente tá trabalhando então ele vai facilitar também pra gente testar o que que a gente tá desenvolvendo
Ele é bem prático pra gente gente pra gente executar as coisas e caso você não queira instalar o Code Runner eu vou também ensinar outra forma pra gente executar o nosso código tá então basicamente essas duas extensões que nós temos que instalar preder e Code Runner e E aí com os dois instalados eu vou criar um novo diretório aqui um novo diretório não um novo arquivo pra gente testar Então vou criar um New dar o botão direito Aqui ó Novo arquivo ou nós temos aqui também esse ícone de novo arquivo clicando nele a gente vai
dar um nome como isso aqui é um teste né o arquivo vai chamar test.js tá esse ponto JS no final é o tipo do arquivo né então ponto JS indica aí o a extensão de arquivo JavaScript tá então com o arquivo JS outra extensão que vocês podem ficar interessados também é o material icon team que ele Adiciona os ícones aqui no nosso Explorer então com esse arquivo criado o o único comando que nós vamos eh fazer hoje né que é o comum aí toda linguagem de de programação é printar no terminal o nosso Hello board
né então que a gente usa né o console P log Ou seja eu vou escrever no console hello world e vou salvar então hello world exclamação certo então isso aqui ele vai escrever no nosso terminal quando a gente executar esse código e como que eu posso executar esse código com a extensão code Runner instalada a gente pode clicar com o botão direito nós temos aqui ó Run code se eu clicar aqui ele já vai executar o conteúdo desse Arquivo ele adiciona também esse ícone aqui no superior direito ó Run code que eu posso clicar também
para executar esse código ou então eu posso abrir o terminal e aí você pode clicar aqui em ter teral deixa eu melhorar aqui ó aumentar aqui um pouco pode clicar aqui em terminal novo terminal ele vai abrir aqui um terminal né já integrado no vs code e aqui nesse terminal a gente pode digitar Node Node foi o que nós instalamos que é o que executa os nossos o nosso código JavaScript e aqui eu passo o nome do arquivo test.js e se eu dou um enter nós temos aqui ó hello world que foi o que nós
pedimos para ele escrever no console então tanto usando node pelo terminal quanto dando no botão direito Run code Olha lá ele executou ele mostra aqui o comando que ele executou né então foi igual o que nós fizemos ele executou node e o arquivo né no caso aqui ele começou o arquivo da raiz aqui do nosso disco mas o comando foi o mesmo ele executou o nosso hello world E se eu clicar aqui no Play ele vai fazer também a mesma coisa hello world então com o nosso com a nossa extensão runcode vai ficar bem mais
prático pra gente testar nós temos outras opções que é que é quando a gente for falar de debug que é mais paraa frente no curso não é nesse momento tá então basicamente para essa aula a gente vai parar por aqui né a gente configurou o nosso ambiente configurou o vs code não configuramos o prier né já ia esquecendo do prier o que que é o prier né ele vai igual aqui ó eu digitei um espaço a mais alguns espaços a mais aqui quando eu salvo ele já formata para mim então ele mantém meu código mais
bonito eh então o que que eu posso fazer o que que eu tenho que fazer na verdade com a extensão instalada nós clicamos aqui ó em arquivo preferências né que pra gente acessar aqui as configurações ou nós temos o atalha né que é control vírgula e abrir aqui nas configurações nós vamos pesquisar por save certo e nós temos aqui ó essa opção do editor Format on save que seria formatar o código quando a gente salvar né Então sempre que eu D aqui o control s para salvar o arquivo ele vai formatar para mim então tudo
que a gente né quando eu digito alguma coisa quando eu altero alguma linha de código ele vai ficar ali esse círculo Zinho aqui né onde perto do meu mouse nessa bolinha branca indica que o arquivo não foi salvo e aí quando eu salvo ele já vai executar uma formatação então e a gente habilita essa opção né formate on save e nós temos E aí com isso aqui feito o que que eu posso fazer eu digito eu pressiono né eu posso D clicar com o botão direito tá eu já ia mostrando um atalho aqui mas vamos
fazer no Simples né botão direito formatar documento com né Format documento wf clicando aqui nós podemos configurar um formatador padrão e Aqui Nós escolhemos o prier né então com isso aqui com o prier selecionado ele vai sempre usar a extensão que nós instalamos para formatar e salvar aí o nosso documento beleza então para essa aula é isso eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
