JavaScript para iniciantes: o que é, 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?

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:

<script type="text/javascript">

</script>

</script>

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:

<!doctype html>
<html lang="pt-br">
  <head>
    <title> Exemplo Básico de JavaScript – Nº 1 </title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Parabéns, você deu o seu primeiro passo com JavaScript!</h1>
    <script type="text/javascript">
    window.alert('Hello World');
    </script>
  </body>
</html>

<!doctype html>

<head>

<title> Exemplo Básico de JavaScript – Nº 1 </title>

</head>

<body>

<h1>Parabéns, você deu o seu primeiro passo com JavaScript!</h1>

window.alert('Hello World');

</script>

</body>

</html>

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.

<!doctype html>
<html lang="pt-br">
	<head>
		<title> Exemplo Básico de JavaScript – Nº 2 </title>
		<meta charset="utf-8">
	</head>
	<body>
	</body>
</html>

<!doctype html>

<head>

<title> Exemplo Básico de JavaScript – Nº 2 </title>

</head>

<body>

</body>

</html>

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:

<!doctype html>
<html lang="pt-br">
	<head>
		<title> Exemplo Básico de JavaScript – Nº 2 </title>
		<meta charset="utf-8">
	</head>
	<body>
                <strong><p id="change">"Texto Inicial"</p></strong>
	</body>
</html>

<!doctype html>

<head>

<title> Exemplo Básico de JavaScript – Nº 2 </title>

</head>

<body>

<strong><p id="change">"Texto Inicial"</p></strong>

</body>

</html>

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:

<button onclick=>Clique aqui para interagir com a página</button>

1	<button onclick=>Clique aqui para interagir com a página</button>

Métodos, classes e id

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:

<button onclick="document.getElementById('change').innerHTML = 'Hello World JavaScript'">Clique aqui para interagir com a página</button>

1	<button onclick="document.getElementById('change').innerHTML = 'Hello World JavaScript'">Clique aqui para interagir com a página</button>

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:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Exemplo Básico de JavaScript – Nº 2 </title>
		<meta charset="utf-8">
	</head>
	<body>
		<p id="change">"Texto Inicial"</p>
		<!-- Iniciando o JS-->
		<button onclick="document.getElementById('change').innerHTML = 'Hello World JavaScript'">Clique aqui para interagir com a página</button>

	</body>
</html>

<!doctype html>

<head>

<title>Exemplo Básico de JavaScript – Nº 2 </title>

</head>

<body>

<p id="change">"Texto Inicial"</p>

<button onclick="document.getElementById('change').innerHTML = 'Hello World JavaScript'">Clique aqui para interagir com a página</button>

</body>

</html>

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.