Tutorial Básico de JavaScript



O JavaScript deveria ser mais uma simples extensão do HTML, do que uma linguagem orientada a objetos. Mas de uma forma ou de outra, ele permite bons truques para web designers. Pois utilizando apenas algumas linhas de código JavaScript, é possível transformar suas páginas na Internet se comportarem em verdadeiras aplicações multimídias, com botões que reagem quando o mouse passa por cima deles... E o melhor de tudo, é que você não precisa ser um programador para fazê-lo. Como ? Porque você vai aprender agora passo a passo.
Mas antes de iniciarmos, é importante saber que este não é um tutorial completo de JavaScript. Vamos aprender os princípios básicos, servindo como base para um estudo mais aprofundado.

Introdução

De início, saberemos o que são chamados em JavaScript de HANDLERS (operadores). Handlers, são pedaços de código HTML que funcionam a parte e executam comandos JavaScript, ou executando o que ocorre dentro de (") ou após elas, ou chamando uma função (maiores explicações a frente).
Devemos aprender, ao menos, como funciona o JavaScript. Não apenas fazer com que os truques funcionem. O que estaremos fazendo é o tratamento de imagens em "janelas" como elementos de um conjunto e então manipularemos este conjunto para produzir um efeito desejado.

Para melhor visualizar os códigos que serão mostrados a seguir, as partes em JavaScript estarão mostradas em cor VERMELHA, e todo o restante em código HTML, estará mostrada em cor BRANCA.

Aplicações com o Mouse (básico)

A aplicação essencialmente básica do JavaScript é a alternância de figuras quando o mouse é apontado para um elemento. Isto é conseguido com o uso do Handler onMouseOver e a forma mais fácil de usá-lo, é embutindo-o em uma Tag <A>. Isto não funcionará em nenhum outro lugar, mas se seu objetivo for simplesmente fazer com que as figuras mudem quando sob o mouse, mas sem funcionar como um link. Use uma uma "âncora" inexistente. <a href="#nulo">
O código mostrado a seguir representa esta condição. A Tag onMouseOver É colocada dentro da tag <A> após o atributo HREF. A Tag onMouseOver comporta-se como um atributo normal de HTML, caso o seu browser não suporte o JavaScript, ele simplesmente o ignorará. Você precisa colocar o seguinte código JavaScript dentro de (") e qualquer coisa que você queira colocar dentro de ("), você deverá usar ('). Quando o cursor move-se sobre a imagem, o Handler onMouseOver chama a rotina em JavaScript dentro das ("). Neste exemplo o JavaScript "diz" ao browser para repor a imagem número 0 (computadores começam a contar do zero) no documento com o URL específico.

<HTML>
<HEAD>
<TITLE>MouseOver 1</TITLE>
<SCRIPT LANGUAGE="javascript">
</SCRIPT>
 </HEAD>
<BODY BGCOLOR="#CCCC99" LINK="#000000" VLINK="#333333">
<P>
<P>
<CENTER>
<A HREF="mouse.html" onmouseover="document.images[0].src='mousesm.jpg'; return true;"><IMG SRC="images/cheesesm.jpg"></A>
</CENTER>
</BODY>
</HTML>



Este Tutorial foi desenvolvido por Tadeu Kelly Alencar, qualquer dúvida, entre em contato.

Hosted by www.Geocities.ws

1