JAVASCRIPT- PARTE 4

 

Objetivos:

 

Esta é a Quarta parte de uma série de tutoriais sobre JavaScript básico. Nesta parte do tutorial você aprendera como o JavaScript faz para aprimorar a interface com o usuário, o que o JavaScript pode fazer com imagens e animações e entre outras funções.

 

Pré-requisitos: Para acompanhar a lição você deve estudar as primeiras partes desse tutorial .

 

Introdução

 

Na terceira parte desse tutorial você aprendeu como criar funções e alguns comandos que em conjunto com as estruturas de controle melhoram o funcionamento da pagina Web, também aprendeu como utilizar e armazenar informações numa variável e também qual o melhor local para construir uma função, assim elas são carregadas antes que o usuário faça alguma coisa que possa chama-la.

 

Então antes de você aprender mais sobre os detalhes da linguagem JavaScript, talvez será mais útil ter uma idéia geral do que o JavaScript pode fazer e o que esta sendo feito com ele na Web. Nesta parte do tutorial você terá um rápido exame de alguns dos aplicativos mais úteis para o JavaScript através dos seguintes tópicos: Aprimorando uma Interface com o usuário do site com JavaScript , O que o Java pode fazer com imagens e animação, como o JavaScript trabalha com plug-ins de Navegadores e etc...

 

Aprimorando uma interface como usuário do site com o JavaScript

 

Você nunca ficou entediado diante de um site Web ? Você já visitou um site onde tudo é estático , onde só possui texto e mais texto , que cansa os olhos ? Pois é , uma das qualidades do JavaScript é a possibilidade de poder adicionar um pouco de animação a uma pagina da Web e isso inclui recursos interessantes como mensagens que rolam na tela , sendo assim uma maneira de apresentar as informações sem deixar os usuários entediados e possibilitando a ele uma maior interação com a Web.

 

Uma outra maneira de aprimorar a interface seria utilizar o JavaScript para controlar a linha de status do Navegador , a linha de status nada mais é do que aquela faixa acizentada na parte inferior da janela do navegador como mostrado na Figura 4.1.

 

Figura 4.1- Linha de status.

 

A linha de status normalmente serve para dois propósitos principais:

• Exibir as descrições de menu e itens de barra de ferramentas.
• Exibir o URL de links quando o ponteiro de mouse passar por cima dos links.

Com a utilização do JavaScript , você mesmo pode adquirir controle sobre a linha de status. Mas agora você deve esta se perguntando: como ? Bom, você deve já ter visto em algum site mensagens que rolam na tela na linha de status, embora possa parecer irritante em alguns casos, é uma das utilizações mais populares do JavaScript e você aprendera como criar um script para rolar mensagens na linhas de status e também vai aprender a tirar outros proveitos desse recurso como substituir a exibição de URL na linha de status com uma descrição do link quanto o mouse esta sobre ele.

 

Você também pode utilizar o JavaScript para criar listas de drop-down ,provavelmente você deve ter visto ou utilizado uma lista drop-dows para selecionar um titulo da pagina da lista e depois pressionar um botão para carregar aquela página , em alguns casos é carregada logo que você a selecionar . Como você pode perceber que são recursos como esses que tornam os site mais fácil de se navegar , e outro fato importante é que estes recursos normalmente são realizados com o JavaScript.

 

Pop_up e outros recursos

 

O JavaScript tem vários recursos que permite a você comunicar-se com o usuário de maneiras mais estimulantes do só com HTML. Por exemplo você pode criar pop_up de alerta , confirmação ou mensagem de aviso com o JavaScript. Agora você deve esta pensando assim : “Opa! Eu já vi isso “. É e viu mesmo , na Segunda parte desse tutorial aprendemos sobre as mensagens que podemos criar com o JavaScript e ate criamos algumas não é mesmo. Pois é, esta também é uma forma de você se interagir com o usuário alerta-o sobre erros , apresenta-o um aviso ou uma nota de isenção de responsabilidades ou solicitando-o uma informação, tornando a sua página na Web um ambiente gostoso de se navegar.

 

Imagens e animações

 

Uma coisa que torna uma pagina na Web estimulante é o uso de imagens gráficas. E você ira aprender neste tutorial como trabalhar com imagens e animações.

 

Quanto um navegador carrega uma pagina de HTML , ele exibe as imagens gráficas junto do texto , tudo fica estático ou seja a imagens não se move a não ser que você mexa no código html e mude a imagem de lugar. Com a ajuda do JavaScript , você pode tornar as imagens gráficas mais dinâmicas, que permite substitui uma imagem em uma pagina por outra imagem sem recarregar a pagina. Uma das utilizações mais comuns desse recurso do JavaScript é criar imagens que se alteram quando o mouse move-se sobre elas. Isso é normalmente utilizado para destacar uma imagem utilizada como um link quando o usuário move o ponteiro o mouse através dele.

 

Formulários Interativos

 

Um dos recursos , talvez o mais poderoso da Web , é o uso de formulários interativos , que permite ao usuário inserir informações e interagir com o site . Isso torna tudo possível , de formulários de pedidos à questionários e paginas personalizáveis.

 

Normalmente os formulários são tratados por um script de CGI ( Common Gateway Interface ) , citado na primeira parte desse tutorial. Então você deve se lembrar que esse script é executado no servidor da Web, ou seja quanto o usuário insere informações e pressiona o botão Submit , ele é enviado para o script de CGI para o processamento . O script então envia de volta um resultado na forma de outra pagina na Web.

 

Embora o CGI seja um sistema poderoso, ele tem desvantagens para algumas utilizações de formulários , a principal delas é que ao submeter os dados em comunicação com o servidor da Web pode demorar segundos ou vários minutos, sendo que normalmente o CGI é responsável pela validação do formulário ou dos dados que foram inseridos, por exemplo , quando o usuário insere somente dez dígitos em um campo de numero do CPF ou deixa em branco um preenchimento obrigatório , o script pode alerta-lo e solicitar as informações ausentes , tornando assim um processo demorado ou depois de esperar uns dez minutos o usuário recebe uma resposta indicando que precisa fornecer informações que faltam e começar de novo .E cada para nos isso é frustaste não é, com certeza desanima qualquer um e as vezes acabamos optando pela parte mais fácil que é desistindo da tarefa que estávamos executando simplesmente saindo do site ,mas com certeza você não quer isso não é ? E também deve esta se perguntando como o JavaScript trata isso ? Logo vou responder , o JavaScript fornece uma solução bastante conveniente para esse problema .Um programa de JavaScript pode ler os dados no formulário sem qualquer comunicação com o servidor e exibir uma mensagem de erro em uma caixa de alerta e o script pode ate mover o curso para o campo que contem erro , alguns casos o JavaScript pode ser utilizado para tratar o envio de formulários , enviando os resultados via email. O script também pode passar os dados para um script de CGI depois de valida-lo.

 

Nota: Você deve esta se perguntando : “Se o JavaScript pode trabalhar com formulários mais rápidos que o CGI e sem comunica-se com o servidor , então por que utilizar CGI?” A resposta é que o CGI pode fazer coisas que uma linguagem script do lado do cliente não pode fazer , como gravar dados em um arquivo no servidor ou trabalhar com um banco de dados.( Existe uma versão de JavaScript que roda no servidor é que também pode desempenhar essas funções. )

 

Detectando Navegadores

 

O HTML foi projetado para ser multiplataforma, em outras palavras sua pagina deveria ter a mesma aparência em qualquer navegador em qualquer plataforma de computador , mas isso não é o que acontece , embora os novos navegadores da Microsoft e da Netscape estejam evoluindo na direção de um padrão comum , ainda há diferenças na maneira de tratarem o código HTML.

 

Mesmo que seja possível construir um documento simples de HTML de modo que apareça da mesma forma nos dois navegadores , novos recursos como HTML dinâmico não se comportam da mesma maneira. Uma solução é ter paginas especificas do navegador e uma genérica para outros.

 

Há alguns sites que simplesmente pedem aos usuários que dêem um clique no link para a versão apropriada do seu navegador. Com JavaScript, você pode automatizar esse processo : sua pagina pode detectar o tipo e a versão do navegador do usuário e enviá-lo para a pagina personalizada apropriada ou utilizar JavaScript para personalizar a saída de uma única pagina .

 

Uma diferença importante entre navegadores da Microsoft e da Netscape é a maneira como eles tratam o JavaScript. É possível detectar a versão do navegador utilizando um script universal simples e então utilizar comandos de JavaScript separados para navegadores diferentes.

 

Plug-ins

 

Os plug-ins são suplementos de navegador que permite que tipos diferentes de conteúdo sejam utilizados dentro de uma pagina na Web. Os plug-ins mais comuns são :

• RedAudio , para suporte de áudio streaming
• QuickTime, para videoclipes embutidos
• Adobe Acrobat, para documentos precisamente formatados
• Shock Wave, para animações e aplicativos interativos

Embora você possa utiliza conteúdo plug-in para adicionar qualquer coisa em sua pagina na Web, há um problema importante : independente de alguns plug-ins padrão que são incluídos com navegadores , você não pode realmente contar com que a audiência inteira de sua pagina , tenha o plug-in instalado.

 

Isso torna os plug-ins uma questão semelhante a das versões de navegadores , ou seja , você tem que escolher um plug-in particular para suportar e esperar que os usuários o instalem ou deve criar paginas alternativas em geral uma utilizando plug-in e outras sem eles. Mas uma vez , o JavaScript pode tornar a situação um pouco mais controlável , você pode utiliza o JavaScript para detectar se o navegador tem plug-in particular instalado e modificar a pagina HTML , se o plug-in não estiver disponível , seu script pode enviar o usuário para uma pagina diferente ou mesmo envia-lo para descarregar a pagina de plug-in, com certeza você já deve ter visto isto em uma pagina na Web. Junto com a detecção de plug-in instalados , você pode utilizar o JavaScript para trabalhar com o conteúdo do plug-in. O Netscape chama esse recurso de LiveConnect. Utilizando este sistema você pode controlar um plug-in com JavaScript, por exemplo , você pode incluir um som embutidos em uma pagina e utilizar o JavaScript para reproduzir o som em momentos apropriado.

 

Nota: A especificação LiveConnect também permite que programas JavaScript se comuniquem com miniaplicativos Java e permite que miniaplicativos Java acessem variáveis e comandos JavaScript.

 

Copiando um Script

 

Agora você deve ter uma idéia das muitas coisas que pode fazer com o JavaScript. E é mais que natural que você talvez queria fazer algumas melhorias em seu site imediatamente. Embora você acabe aprendendo a criar scripts úteis e complicados apartir do zero, as vezes é conveniente ser capaz de utilizar um recurso sem completamente entendê-lo.

 

Por exemplo , suponha que você queira utilizar uma mensagem de linha de status que rola em sua pagina. Em vez de criar um programa para fazer isso apartir do zero , você pode copiar um script funcional da pagina de outra pessoa. Mas é importante fica atento , porque os scripts pertencem às pessoas que os criam , exatamente como qualquer coisa em uma pagina da Web e você pode estar violando direitos autorais se você copiar um. Se quiser utilizar um script de pagina de outra pessoa, certifique-se de pedir permissão . A um numero de sites que oferecem scripts grátis para pegar , faça uma pesquisa na Internet e veja alguns exemplos .

 

Por esta hora , você aprendeu sobre algumas utilizações mais comuns do JavaScript. Você pode implementar qualquer um desses recursos utilizando script simples ou mesmo um único comando em alguns casos. Entretanto , não fique pensando que o JavaScript pode somente fazer coisas simples, você pode criar programas complexos com o JavaScript para fazer qualquer coisa , embora haja limitações.

 

Conclusão

 

Neste tutorial tutorial , mostrei algumas capacidades e utilização do JavaScript. Mostrei que o JavaScript pode ser utilizado como janela e mensagens pop-up, imagens gráficas e formulários e como pode ser utilizado para detectar navegadores e plug-ins. Na próxima parte desse tutorial você ira aprender como os programas em JavaScript funcionam e também começará aprendendo os detalhes da linguagem de JavaScript.