Curso iMasters - Web Sites com Ajax - Capítulo 1

JavaScript

Introdução ao JavaScript

Os principais browsers do mercado, Firefox, Mozilla, Opera, Netscape, Safari, Internet Explorer e outros mais, suportam a linguagem JavaScript. Ela é utilizada para a validação de formulários, ler e inserir conteúdo em uma página, criar cookies, menus dinâmicos e diversos outros recursos.

Inserindo o JavaScript em uma página HTML

Para inserirmos o JavaScript em uma página HTML, fazemos uso da tag <script> e do atributo type com o valor: text/javascript. O que resultaria no seguinte:


			<script type="text/javascript">

			//códigos JavaScript

			</script>

Ao iniciarmos a tag <script>, dizemos o tipo de script utilizado type="text/javascript" e assim o browser entenderá que no conteúdo dessa tag há comandos JavaScript para serem executados e os reconhecerão.

Para finalizar a execução dos códigos usa-se o final da tag como </script>.

Onde inserimos o JavaScript em uma página HTML

Há três formas de inserirmos o JavaScript em uma página HTML, são elas: um arquivo externo -.js, no head, no body ou utilizando os três de uma só vez.

Vamos conhecer a peculiaridade de cada uma delas.

Arquivo (script) externo

O arquivo externo é chamado desta forma:


			...

			<head>

			<script type="text/javascript" src="externo.js"></script>

			</head>

			...

Ou seja, através do atributo src da tag <script>, indicamos a localização do arquivo externo, para que assim o browser possa localizá-lo e executá-lo.

Em arquivos externos não utilizamos a tag <script>, somente os códigos.

Vamos conhecer algumas das vantagens de se trabalhar dessa forma:

Facilidade na manutenção: Uma vez que o script está localizado em apenas um arquivo, facilita a edição ou correção dos códigos.
Carregamento mais rápido da página: O arquivo externo é armazenado no cache do navegador. Assim, evita-se carregá-lo toda vez que a página for chamada.
Semântico: O arquivo externo separa a camada de comportamento (JavaScript) da camada de conteúdo (HTML).

Script no head da página

O script é inserido desta forma:


			...

			<head>

			<script type="text/javascript">

			//códigos JavaScript

			</script>

			</head>

			...

Os códigos JavaScript localizado no head da página são executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, dentre outros.

Nessa forma o script é carregando antes de alguém utilizá-lo, ou seja, antes do carregamento do conteúdo do body.

Script no body da página

O script é inserido desta forma:


			...

			<body>

			<script type="text/javascript">

			//códigos JavaScript

			</script>

			</body>

			...

Os códigos inseridos no body da página são inicialmente executados enquanto a página é carregada mas também podem ser chamados quando algum evento for provocado.

A tag <noscript>

A tag <noscript> nos permite disponibilizar um conteúdo alternativo ao disposto via script. Isso significa dizer que, se o usuário não tiver suporte ao JavaScript em seu browser, ele verá o conteúdo inserido dentro dela e, caso tenha suporte, o seu conteúdo é omitido.

Veja um exemplo:


			<script type="text/javascript">

			alert("Parabéns, você está aprendendo JavaScript.");

			</script>

			

			<noscript>

			<p>Parabéns, você está aprendendo JavaScript.</p>

			</noscript>

No exemplo acima será exibida a mensagem, "Você está aprendendo JavaScript", através do alert() - uma função do JavaScript que exibe uma mensagem através de um popup box - para quem tem suporte ao JavaScript. Caso contrário, mesma mensagem aparecerá para quem não tem suporte ao JavaScript, porém através da tag <noscript> na forma de texto.

Veja as imagens:

Exemplo de uma mensagem via alert().

Exemplo de uma mensagem via <noscript>

A tag <noscript> é muito importante quando se trata de acessibilidade, pois oferece um conteúdo alternativo para os usuários sem suporte à linguagem em questão.

Comentários em JavaScript

Os comentários na linguagem JavaScript tem função similar às demais linguagens, ou seja, de explicar o que determinado comando faz, nota de algum autor, lembretes, dentre outras.

Tudo que estiver englobado pelos comentários é ignorado pelo interpretador do JavaScript.

Há dois tipos de comentários, são eles: // e /* */. O primeiro é o comentário de uma linha somente, enquanto o segundo suporta várias.

Observe os exemplos:


			<script type="text/javascript">

			// Isto é um comentário de uma linha.

			

			/* Isto é um comentário de várias linhas, e o interpretador ignora todo esse conteúdo. O que nos permite a criação de notas e lembretes em nossos códigos. */

			</script>

Um detalhe importante que não podemos esquecer, é a utilização do comentário em HTML ao utilizar códigos JavaScript in-line (disposto no head ou body). Antes de lhe explicar a sua função, veja o exemplo:


			...

			<head>

			<script type="text/javascript">

			<!--

			//códigos JavaScript

			//-->

			</script>

			</head>

			...

Agora vamos compreender isso melhor. Os browsers que não suportam o JavaScript irão exibi-lo como se fosse parte do conteúdo da página. Para prevenir essa prática, utilizamos o comentário em HTML.

Porém, você pode se perguntar: Para que serve as duas barras (//) antes do fechamento do comentário? Bom, elas previnem que o interpretador do JavaScript as interpretem.

Alguns detalhes para finalizar

"Case sensitive"

JavaScript é "case sensitive", o que significa dizer, que o interpretador diferencia minúsculas de maiúsculas. Veja um exemplo:


			<script type="text/javascript">

			<!--

			var txtMsg = "Você foi introduzido ao JavaScript.";

			alert(txtmsg); // Isto irá causar um erro.

			//-->

			</script>

No exemplo acima, gostaríamos de exibir através do alert() a mensagem armazenada na variável txtMsg (não se preocupe, você aprenderá sobre variáveis ainda), mas como chamamos a variável por txtmsg, o JavaScript não a encontrou no código, causando um erro - txtmsg is not defined.

Moral da história, uma simples letra maiúscula ou minúscula causa toda a diferença.

Ponto e vírgula (;) no final das declarações

Em JavaScript a utilização do ; (ponto e vírgula) é quase que opcional. Digo quase, porque se você dispor de duas declarações de código na mesma linha, precisará do ; (ponto e vírgula).

Vejamos o exemplo abaixo:


			alert("Estes detalhes..."); alert("... são importantes"); 

			alert("Notou...")

			alert("A diferença?")

Eu sempre utilizo o ; (ponto e vírgula) no final de minhas declarações.

Outro detalhe: se você utilizar algum compressor de JavaScript - para reduzir o tamanho do arquivo - e os seus códigos não tiverem o ; (ponto e virgula), aparecerá erros, pois os compressores distribuem os códigos em uma única linha.