JavaScript para iniciantes: o que é, origens, para que serve e “Hello World”

Sabe quando você é criança e aprende a falar as primeiras palavras, aí seus pais, avós, tios e tias comemoram como se aquilo fosse um ato incrível de genialidade.

Então, na TI, em 90% dos casos, essas primeiras palavras são: “HTML, CSS e JavaScript”.

Nesse post você irá dar os seus primeiros passos com o JavaScript: descobrir o que é JavaScript, sua origem, funcionalidades e já escrever o seu primeiro código com a linguagem de programação.

O que é JavaScript?

Vamos começar pelo que JavaScript não é:

[easy-tweet tweet=”JavaScript não é Java!” template=”light” user=”BecodeTT” hashtags=”JavaScript, JS”]

O JavaScript (JS) é uma linguagem de programação utilizada principalmente em páginas web. Com o JS, você pode mostrar mensagens e outras informações interessantes, fazer verificações ou mudar dinamicamente a apresentação visual das páginas, conforme o comportamento que você deseja que sua página (ou aplicação) possua. Tudo através do navegador do usuário. É possível fazer isso, até mesmo sem conexão com a internet.

IMPORTANTE: o JavaScript mudou muito com o passar dos anos. Hoje, trata-se de uma tecnologia que pode ser utilizada tanto no cliente-side de uma aplicação, quanto no server-side.

Origem do JS

Diferente do que muitos pensam, JavaScript não é baseado na linguagem Java, a única relação direta entre as duas é uma possível jogada de marketing da empresa Netscape que na época de sua criação tinha acabado de habilitar a linguagem Java em seu revolucionário navegador.

A linguagem foi criada em 1995 por um funcionário da Netscape chamado Brendan Eich, na época ela se chamava LiveScript e depois passou a ser conhecida definitivamente como JavaScript, ela é baseada na linguagem de programação ECMAScript padronizada pela Ecma International.

Por que devo usar o JavaScript?

 Por que usar JavaScript | JavaScript para iniciantes: o que é, origens, para que serve e "Hello World"

Atualmente, o JavaScript é a linguagem web mais popular do mundo, o fato é que todos os sites modernos e a grande maioria das aplicações web possuem recursos em JavaScript. Uma galeria de imagem, interação com a rolagem da página, animações parallax, validações e manipulação de elementos HTML e CSS. Hoje em dia, até banco de dados NoSQL podem ser baseados em JavaScript.

Estamos falando de uma linguagem essencial para qualquer programador e que ao mesmo tempo é simples de aprender. Trata-se de uma linguagem baseada em eventos. E, ainda, você conta com diversos frameworks (AngularJS, node.js, Ember.js, ReactJS) e bibliotecas específicas para a linguagem, como o jQuery, que apoiam o seu desenvolvimento com a linguagem.

Obs: O fato de existir diversos frameworks auxiliares pode ser um problema também, pois fica muito difícil manter um foco em apenas uma ferramenta.

Mas então, voltando ao porquê de usar o JS, cito mais dois fatores extremamente relevantes:

  • A possibilidade de criar aplicações web ricas e até sistemas completos;
  • A relevância do mercado de trabalho para o profissional que domina essa tecnologia

Dê uma pesquisada a mais nesses dois itens, vale a pena!

Um ótimo exemplo de uso do JavaScript

Para um site trazer uma experiência de usuário agradável, ele deve atender a diversos pontos importantes, como a entrega do conteúdo de forma objetiva e atraente e, claro, a responsividade, pois a grande massa de usuários utiliza dispositivos móveis.  E este é o ponto que eu gostaria de chegar.

O JS pode poupar uma terrível dor de cabeça quando o assunto é responsividade, por ser uma linguagem compatível com todos os browsers da atualidade, seu script pode validar a resolução do dispositivo utilizado pelo seu usuário. Trazendo os elementos certos, para os usuários corretos. Evitando possíveis experiências negativas por incompatibilidade móvel.

Outras aplicações do JavaScript

Você pode usar o JavaScript para uma série de funções:

  • Validação de formulários: assim, o seu usuário não passa pela frustação de ter que recarregar a página inteira simplesmente porque digitou um campo errado;
  • Esconder ou apresentar informações da página, conforme o comportamento de seu usuário;
  • Janelas de aviso ou de confirmação;
  • Sistemas de autocomplete, algo parecido com quando você digita na busca do Google e ele completa com as palavras possíveis ou já salvas pelo seu navegador;
  • Sistemas ou aplicações web que mostram informações que mudam constantemente, conforme eventos internos ou externos ao site/aplicação.
  • Interações com elementos HTML, para que estes mudem dinamicamente.
  • Interação com regras CSS, da mesma forma que com o HTML.

Enfim, basicamente, o JavaScript é o responsável por dar vida a sua página ou aplicação web.

Crie agora o seu primeiro código JS

Vamos iniciar com um exemplo bem simples, onde você irá apresentar uma janela com o clássico “Hello World JavaScript”

Para isso, vamos precisar de um documento base HTML. Crie o documento e  salve da seguinte forma: ExemploJS1.html.

Sempre que desejarmos adicionar um script em uma página html é necessário declará-lo. Para isso, usamos a tag script da seguinte forma:

Entre as tags <script>, adicionamos o médoto window.alert(”), para abrir uma janela quando o navegador for carregado. Entre os parenteses, devemos adicionar o texto que vamos exibir.

Hello World JavaScript

Este é o código completo:

Não esqueça do ponto e vírgula ao final do método!

Exemplo 2: Trocando o texto com um clique

Outro recurso bastante utilizado é a troca de elementos através da interação do usuário, vamos fazer este exemplo juntos.

Iniciamos com a marcação básica de um documento html padrão.

Salvamos este documento como exemploJS2.html. Neste exemplo você vai precisar de alguns conhecimentos básicos de HTML. O objetivo é trocar o texto quando o usuário realizar uma ação na página.

Então a primeira coisa que precisamos fazer é identificar o texto que aparece na tela, vamos adicionar um paragrafo ao código html, assim:

Analisando o código, veja que adicionamos um id para o paragrafo. Como dito anteriormente, o JavaScript é baseado em eventos ou métodos. Estes métodos precisam ser devidamente identificados, esta identificação em HTML é feita por meio de classes ou ids.

Neste exemplo, usamos um id com nome de “change”

Agora vamos criar a interação com o usuário através de um botão <button>, que irá adicionar o evento onclick (ao clicar). Nesse caso, não precisamos inserir a tag <script>, pois o JavaScript irá funcionar através do elemento HTML <button>. Aliás, é possível repetir essa técnica para qualquer elemento html.

IMPORTANTE: Com tempo e experiência, você irá entender melhor sobre quando usar códigos JavaScript através da tag <script> e quando utilizar pela tag html. Para a grande maioria dos casos, é considerado uma boa prática, utilizar a tag <script>.

O sua tag <button> deve ficar assim:

Métodos, classes e id

Código JavaScript | JavaScript para iniciantes: o que é, origens, para que serve e "Hello World"

Lembra que falei que o JS é baseado em métodos e estes são identificados por classes ou Id.

Pois bem, o JavaScript possui métodos prontos ou peseudocódigos. Em nosso exemplo, iremos usar o document.getElementById(”) que manipula o objeto com o id identificado na página, este método combinado com outro pseudocódigo chamado innerHTML, realiza a troca do texto.

Resumindo, a nossa linha de código deverá ficar assim:

Adicione esta linha de código ao seu html, abaixo da tag <p> e pronto! Salve o documento e a página com o novo exemplo está pronta para ser testada. Basta carregá-la com o seu browser de preferência e clicar no botão! O seu código deverá ficar similar a este:

Este exemplo pode ser feito com imagens e outros elementos HTML também. Portanto, faça mais testes, pratique! E caso você queira aprender ainda mais sobre JavaScript e, claro, a tríplice completa (HTML e CSS), dê uma olhada em nosso curso completo para iniciantes na área! Até a próxima.

 

Curso online de HTML5, CSS3 e JavaScript da Becode! O seu primeiro passo para se tornar um front-end developer!

Nemora Dornelles

Escrito por Nemora Dornelles

Colecionadora de certificações Microsoft, Linux e ComptIA. Formada em Desenvolvimento de Sistemas para Web. Fã declarada do falecido MIRC e do atual BitCoin! É instrutora de desenvolvimento e infraestrutura de TI há mais de 10 anos, onde já contribuiu para a formação de milhares de profissionais da área!

5 Comentários

Leave a Reply
  1. poxu nunca pensei que depois dos 60 iria me apaixonar de novo,kkk estou totalmente aprender mais muito boa sua aula como diz os jovem mandou bem

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

O perfil completo de um DBA - Administrador de Banco de Dados!

O perfil completo de um DBA – Administrador de Banco de Dados!

10 frases que os programadores não aguentam mais ouvir!

10 frases que os programadores não aguentam mais ouvir!