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

February 24, 2014 · Postado em Introdução 

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.

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 JavaScriot? 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’);

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:

Como fazer um script em JavaScript

Sim, aquele simples código cria uma janela, mostra “Alerta JavaScript”, um ícone, um botão “Ok” e um texto que você 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?

Comments

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

  1. […] nosso tutorial de JavaScript sobre a tag <script> passado, colocamos o código do JavaScript dentro da tag script, que por sua vez […]

  2. MÁRIO SALVADOR FAILLACE CHAGAS on December 22nd, 2015 5:53 pm

    Interessante a maneira de apresentação, normalmente simples,. Vou continuar na aula 3.
    Obrigado
    15:22
    22.12.2015

Leave a Reply