Primeiras aulas do curso JavaScript: Programando na linguagem da web

JavaScript: Programando na linguagem da web

Introdução - Por que aprender JavaScript?

Por que aprender JavaScript?

Seja bem-vindo ao curso JavaScript: Programando na linguagem da web, eu sou o Douglas Quintanilha e serei seu instrutor no curso que te dará uma introdução a essa linguagem tão importante atualmente.

Você pode estar se perguntando: "por que se comenta tanto sobre JavaScript hoje em dia? Por que essa linguagem ganhou tanta popularidade, e por que eu, desenvolvedor, tenho que aprendê-la?"

Para iniciarmos nossa conversa sobre JavaScript, vale avisar que ela é a linguagem de programação nativa da Web. Qualquer navegador que você esteja utilizando, incluindo o Google Chrome, com certeza dá suporte ao JS, afinal ele é utilizado para dar dinamismo a nossas páginas. Por exemplo, quando clicamos na ferramenta de busca do site da Alura, o fato de que seja detectado o evento de clique no ícone da lupa e, em seguida, ocorra uma pequena animação para exibir a caixa de busca, é realizável com JS.

Talvez você tenha conhecimento maior sobre HTML e CSS e garanta que seja possível fazer o mesmo usando o transform, já que também podemos criar algumas animações apenas com CSS puro. Porém, certas ações como algumas validações específicas nos formulários, como aquelas realizadas nos campos de "nome" e "e-mail", não são possibilitadas unicamente com HTML. Esse tipo de dinamismo e interatividade que temos atualmente nos formulários e nas páginas Web vieram com o JavaScript.

Graças ao JS, aumentamos a usabilidade do usuário nas páginas web. Um exemplo é no fórum do GUJ: quando clicamos em alguma categoria no menu, ele filtrará os tópicos do fórum. Isso só é possível com JavaScript.

É uma linguagem bastante poderosa que permite que o usuário consiga interagir com a página. Isto já seria um excelente motivo para despertar seu interesse pela linguagem, mas além de ser dominante nos cenários dos navegadores, o JavaScript recentemente também se expandiu para o lado do servidor com o lançamento do Node.js, um ambiente que permite criarmos um servidor Web completo utilizando JavaScript. Desta forma, a linguagem ganhou grande popularidade e caiu no gosto dos desenvolvedores, tornando-se parte do coletivo imaginário de qualquer programador moderno.

O Javascript não "ganhou terreno" apenas no servidor, sendo possível programarmos um Arduíno com a biblioteca Johnny-Five, criarmos um aplicativo para Desktop utilizando o framework Electron, e até mesmo encontramos um banco de dados como o MongoDB, que utiliza a sintaxe do JavaScript em suas queries.

O JavaScript está presente em diversas áreas do desenvolvimento, ampliando as habilidades de desenvolvedor para os mais diversos ramos da tecnologia, e é claro, controlando e manipulando qualquer página Web!

Estudaremos sua sintaxe e veremos como a linguagem funciona, quais são suas nuances, a partir de um pequeno projeto para explorar o JavaScript em sua principal área de atuação, no Front-end, e na manipulação de páginas Web.

Introdução - Olá Mundo com JavaScript

Para iniciarmos nosso aprendizado em JavaScript, construiremos o projeto do site Aparecida Nutrição.

O primeiro passo será baixar o projeto inicial do treinamento, disponível nos exercícios. Após descompactá-lo, acesse a pasta introducao-javascript do seu computador, e depois abra o arquivo no editor de textos. Nós vamos abri-lo também no browser, para nos familiarizarmos com o site.

tabela aparecida nutrição

A nutricionista Aparecida fazia controle dos clientes com fichas cadastrais, preenchidas manualmente, nas quais eram armazenados dados como "Nome", "Peso", "Gordura Corporal" e outros. Com a criação do site, ela conseguirá armazenar as informações, a serem exibidas em uma tabela, em que novos cadastros serão adicionados dinamicamente por meio do JavaScript, e poderão ser filtrados posteriormente. Ela também não precisará mais fazer cálculos manualmente, como os de IMC e da porcentagem de gordura corporal dos clientes. Todos serão realizados utilizando-se o JavaScript. Criaremos um site que realmente facilitará o trabalho da Aparecida!

Começaremos criando a função que exibirá a mensagem "Hello World", ou "Olá Mundo" no JS.

No curso, utilizaremos o editor de textos Atom, mas existem diversos outros como o Sublime Text 3 e o Visual Studio Code. Escolha de acordo com sua preferência.

Adicionaremos a funcionalidade e o dinamismo na página de pacientes, e para isto precisaremos primeiro aprender como utilizarmos o JavaScript corretamente nas páginas. Uma primeira tentativa consiste em utilizarmos as funções dentro do corpo de nossa página.

No início do arquivo index.html, logo após a tag <body>, exibiremos um alerta com JavaScript, com a função alert:

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutrição</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    alert("Olá mundo");

    <!-- Restante do index.html -->
</body>

Ao abrirmos a página index.html no navegador, veremos o seguinte resultado:

Navegador imprimindo alert como texto

O script está sendo exibido como texto, ou seja, o navegador não fez nenhum tratamento especial para interpretar o código. Precisaremos adicionar a tag <script>, mas o JavaScript não será carregado. Iremos então adicioná-lo dentro da tag <head>:

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutrição</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script>
        alert("Olá mundo");
    </script>

</head> 

Agora, quando recarregarmos a página no navegador, nosso trecho de script será interpretado como um código, e não como um conteúdo qualquer da página.

ola mundo

O alerta com a mensagem foi exibido!

A função alert é uma das opções para se exibir mensagens com JavaScript, porém, ela não é a única. Outra função útil para isto é o console.log, considerado "mais agradável" para a exibição de uma mensagem por não envolver um pop-up. A mensagem será exibida no console do navegador.

Vamos testá-la:

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutrição</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script>
        console.log("Oi Mundo");
    </script>

</head> 

No Linux ou no Windows, acessamos o console do navegador pressionando a tecla "F12"; no MacOS basta pressionar "COMMAND + ALT + J". Ao abrirmos o console, veremos a mensagem como gostaríamos:

Imprimindo uma mensagem no console do navegador

Além disso, o console do navegador também aceita funções JavaScript. Poderemos escrever novamente console.log:

console.log("Aqui tem um recado para você");

Ou até mesmo um alerta:

alert("Olá");

funções no console

Com o alert e o console.log, damos os primeiros passos com o JavaScript, entendendo que para seu bom funcionamento, o código deve estar entre as tags <script>. Caso contrário, os navegadores não irão entendê-lo.

Introdução - Query Selector

Agora que temos o domínio das funções iniciais do JavaScript, alert() e console.log(), usadas para exibir mensagens ao usuário, vamos começar a manipular os dados do site da Aparecida. A página deixará de ser estática e ganhará mais interatividade. O índice de massa corporal (IMC) será calculado automaticamente, e conseguiremos adicionar um novo paciente sem alterarmos o HTML. Isso dará dinamismo e deixará a página mais moderna.

Para começarmos a manipular a página, se quiséssemos alterar o título "Meus pacientes" para "Meus clientes", como isso poderia ser feito com JavaScript? Precisaríamos ter acesso ao código do arquivo HTML. Tudo o que estiver contido na tag <script> será interpretado como JS e, o que está fora, como HTML. Teremos que levar as funcionalidades criadas em HTML para o mundo JS.

Primeiramente, vamos conhecer o DOM (Document Object Model), representação do HTML para o nosso JavaScript, acessível por uma palava do JavaScript chamada document.

No console do navegador, quando digitamos document e pressionamos "ENTER" em seguida, veremos tudo o que está na página HTML. O document será a ponte entre o JavaScript e o HTML, e tudo que for alterado nele será alterado na exibição para o usuário.

Vamos experimentar adicionar o document na tag <script>, lembrando que não iremos usá-lo entre "" (aspas), pois ele funcionará como uma varíavel, e as aspas são usadas quando trabalhamos com uma string, e não é uma palavra ou frase que queremos imprimir.

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutrição</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script>
        console.log("Oi Mundo");
        console.log(document);
    </script>

</head> 

Se voltarmos ao navegador e atualizarmos a página, veremos que no JavaScript teremos acesso ao document. Conseguiremos ver o seguinte código no navegador:

#document
    <!DOCTYPE html>
    <html lang="pt-br">
        <head>...</head>
        <body>...</body>
    </html>

Mas se não quisermos manipular o DOM inteiro, e sim apenas um pedaço, por exemplo, o texto dentro da tag <h1>, localizada acima do fechamento do <header>,

<header>
    <div class="container">
        <h1>Aparecida Nutrição</h1>
    </div>
</header>
<main>
    <section class="container">
        <h2>Meus paciente</h2>
        <table> 
            <thead>
//...

como faríamos para modificar apenas o texto "Aparecida Nutrição", que é um pedaço do document?

Vamos encontrar uma forma de pesquisar somente a tag <h1>. Para isto, usaremos o método querySelector(), passando como parâmetro o que queremos encontrar - neste caso, entre aspas, pois queremos o termo exato. No console, iremos digitar:

document.querySelector("h1");

Após executarmos o método, ele retornará o conteúdo da tag:

document.querySelector("h1");
    <h1>Aparecida Nutrição</h1>

Assim, será selecionado o primeiro h1 da página, justamente aquele que queremos modificar. Então podemos passar este código para o navegador e imprimir o h1 no console do navegador para verificarmos se ele realmente foi selecionado, utilizando o console.log() novamente dentro da tag <script>:

<script>
    console.log(document.querySelector("h1"));
</script>

Mas ao atualizarmos a página, o retorno será null. Por que isso acontece? Se usamos o querySelector() no console, conseguimos que o h1 seja retornado, porém, isto não ocorre no código. Qual é a diferença?

O browser, ao carregar a página HTML, vai lendo linha por linha, de cima para baixo. Quando ele chega na tag <script>, ele tenta buscar um h1 na página, porém, isto não está carregado em sua memória. A tag <h1> está abaixo do código JavaScript e ainda não foi interpretado pelo navegador, logo, ele não poderá ser selecionado.

Até agora estamos escrevendo HTML e JavaScript no mesmo arquivo, o que pode se tornar confuso conforme nosso código for crescendo. Para evitarmos isso, poderemos escrevê-los em arquivos separados.

O mesmo não ocorre quando executamos o código no console do navegador, pois a página já estará totalmente carregada, e o document estará completo.

Por conta de situações como esta, é uma boa prática colocar a tag <script> no fim do HTML, mais precisamente, como último elemento de <body> após o fechamento de <main>:

<!-- ... -->
        </section>
    </main>
<script>
    console.log(document.querySelector("h1"));
</script>
</body>

Desta vez, ao recarregarmos a página, o h1 é impresso no console do navegador, sendo selecionado corretamente.

Agora que conseguimos selecionar o h1, o que é preciso fazer para alterarmos o texto? Primeiramente, em vez de imprimir, salvaremos a parte selecionada, no caso o h1, dentro da variável titulo. Para isso, usaremos a palavra var:

<!-- ... -->
        </section>
    </main>
<script>
    var titulo = document.querySelector("h1");
    console.log(titulo);
</script>
</body>

No console, a tag <h1> continuará sendo exibida.

<h1>Aparecida Nutrição</h1>

Porém, nosso real objetivo é pegar o conteúdo textual Aparecida Nutrição.

Algumas tags, como h1, h2, p e span, possuem um conteúdo de texto. Nesses casos, o JavaScript possui uma propriedade que nos permite acessá-lo: textContent. Vamos testar e imprimir o conteúdo de texto da variável titulo, que representa o h1:

<!-- ... -->
<script>
    var titulo = document.querySelector("h1");
    console.log(titulo);
    console.log(titulo.textContent);
</script>

De volta ao navegador, veremos uma diferença no que será impresso pelos dois console.log()s:

   <h1>Aparecida Nutrição</h1>
Aparecida Nutrição

Somente o texto Aparecida Nutrição será impresso no segundo console.log(). Então conseguiremos acessar e exibir o conteúdo de texto da tag. E para alterá-lo, basta usar o textContent e passar um novo valor para o titulo, igualando-o a um novo texto:

<script>
    var titulo = document.querySelector("h1");
    console.log(titulo);
    console.log(titulo.textContent);

    titulo.textContent = "Banana";
</script>

Observe que o título da página foi trocado. Se quisermos alterá-lo novamente, por exemplo, para "Aparecida Nutricionista", basta modificar a propriedade textContent.

<script>
    var titulo = document.querySelector("h1");

    titulo.textContent = "Aparecida Nutricionista";
</script>

Assim, nós alteramos o conteúdo de texto.

Sobre o curso JavaScript: Programando na linguagem da web

O curso JavaScript: Programando na linguagem da web possui 274 minutos de vídeos, em um total de 95 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!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana