Como criar um script em JavaScript – A tag < script > – Tutorial “Olá Mundo”

Agora que já sabemos O Que É e Para Que Serve o JavaScript e já nos preparamos obtendo O Necessário Para Programar em JavaScript, vamos de fato colocar a mão na massa e aprender como criar um script em um site HTML.

O passo inicial é criar o famoso "Olá, mundo" ou ("Hello world") em JS, para isso, vamos aprender sobre a tag <script>.

Como colocar o código JavaScript no HTML – A tag <script>

Uma das grandes vantagens de iniciar seus estudos em JavaScript, já tendo estudado HTML e CSS, é que não vai precisar instalar ou fazer nada de diferente ou desconhecido para começar a criar seus scripts.
Vamos iniciar a programar em JavaScript como se estivéssemos continuando nossos estudos de HTML5 e CSS.
Mas onde vamos escrever os códigos de JavaScript? No meio do código HTML? Em qualquer local? Preciso dizer ao browser que aquilo é um script? Ele detecta automaticamente? 

Afinal, onde vamos escrever os códigos de programação JavaScript? Como criar um script, e onde?
A resposta de tudo isso é: na tag <script>, que geralmente vai dentro da tag <head> (mas não é obrigatório, em breve veremos que podemos usar essa tag em qualquer trecho de um site, para aplicar o JavaScript em diversos locais), e através da propriedade type, com o valor “text/javascript”.
Assim, a estrutura de uma página em HTML5 que contém um script em JavaScript é:
<!DOCTYPE html>
<html>
 <head>
   <title>Como usar JavaScript em HTML</title>

   <script type="text/javascript">

    //Seu código JavaScript vem aqui   

   </script>
 </head>

 <body>
   Corpo do site.
  </body>

</html>

Note que que dentro das tags <script> </script> não escrevemos nada, só um comentário, pois é ali dentro que iremos colocar os códigos da linguagem JavaScript.
Bem simples, não?

Como fazer o “Olá, mundo” em JavaScript

Agora que já sabemos onde colocar os códigos, vamos criar nosso primeiro script em JavaScript, que simplesmente exibe uma mensagem em uma caixa de diálogo.
Para isso, crie um documento .html com o seguinte código, que é uma mistura de HTML com JavaScript:
<!DOCTYPE html>

<html> 
 <head>
 <title>Tutorial de JavaScript - Olá, mundo</title>
 <metaname="description"content="Como criar um script em JavaScript no HTML">
 <metacharset="utf-8">
 <script type="text/javascript">
  alert('Olá, mundo');
 </script>
</head>

 <body>
 </body>

</html>

Agora abra o site no seu navegador.
Verá que apareceu uma caixa de alerta, com um botão de ‘Ok’ e uma mensagem, e isso tudo ocorre por um simples código, uma única de linha de JavaScript: alert(‘Olá, mundo’);


Provavelmente você já viu essa janelinha de alerta antes, quando digitou uma senha errada, esqueceu de preencher algum campo do formulário ou viu alguma mensagem de erro. É a mesma janelinha, de alert.
Experimente escrever outra coisa.
Por exemplo, vamos escrever: alert(‘Como programar em JavaScript\nCurso JavaScript Progressivo!’);

(não estranhe o \n, é um símbolo que representa a quebra de linha, um enter)

Veja o resultado:
Olá mundo em JavaScript

Sim, aquele simples código cria uma janela, mostra “Alerta JavaScript”, um ícone, um botão “Ok” e um texto que você pode escolher. Tudo com uma linha de JavaScript.
Para fazer o mesmo na linguagem C, por exemplo, seria necessário dezenas de linhas de programação. Poderoso e simples esse JavaScript, não?

O que acontece nesse código é simples. Quando seu navegador se depara com o <script type="text/javascript">, ele vai saber que o quem a seguir é um código de JavaScript e chama o interpretador da linguagem, para 'rodar' as instruções de script que estão por vir, até acabar, no </script>

Nenhum comentário:

Postar um comentário