Entendendo de JavaScript (Básico) – Final. Terminamos essa parte!

Bom pessoal é isso ai, estamos chegando ao final desse TUTO, espero que tenham aproveitado todas as dicas, para quem não conhecia fica ai uma indicação, pois saber nunca é demais, e como não podia ser diferente essa ultima parte tambem é bem longa, então mais uma vez tenham paciência.

Um forte abraço a todos!

Utilizando Funções

Na terceira parte desse tutorial, você aprendeu a criar funções simples que contém uma lista de instruções que executa alguma tarefa. Nessa parte iremos aprender como utiliza-las e organiza-las dentro de um script.

Como já sabemos o navegador começa a interpretar a primeira instrução depois da tag <SCRIPT> e segue cada instrução na ordem até alcançar a tag</SCRIPT> de fechamento ou quanto encontra erro.

Embora essa abordagem parece simples , ela é apenas direta com scripts curtos e pode torna-se confuso para o navegador ler scripts enormes , então para torna-los mais fáceis e organizáveis , utilizamos as funções, cuja a definição já foi abordada na terceira parte desse tutorial.

Definindo uma função

Como definido na terceira parte desse tutorial , função nada mais é que um grupo de instruções de JavaScript que podem ser tratadas como uma unidade única. Então para utilizar uma função você deve primeiro defini-la, como mostrado no exemplo abaixo:

function AloMundo( ) { alert ( “Alo Mundo”); }

Nesse exemplo, definimos uma função que exibi uma mensagem de alerta para o usuário. Esta iniciar com a palavra chave function e o nome da função é AloMundo. As primeiras e ultimas linhas da definição de função incluem chaves ( { e } ) . Você as utiliza para incluir todas as instruções na função. O navegador utiliza as chaves para determinar onde a função inicia e termina.

Entre as chaves, essa função particular armazena uma única linha. Esta utiliza a função de alerta embutida que exibe uma mensagem de alerta. A mensagem conterá o texto “Alo Mundo”.

Agora, sobre aqueles parênteses. A função atual AloMundo faz sempre a mesma coisa ou seja todas as vezes que você a utiliza, ela exibe a mesma mensagem. Embora isso evite um pouco de digitação, ela realmente não fornece muito benefício.

Para torna sua função mais flexível, você pode adicionar parâmetros, também conhecidos como argumentos. Estes são variáveis que são recebidas pela função toda vez que ela é chamada. Por exemplo, você pode adicionar um parâmetro chamado who que diz para a função modificada.

Function AloMundo( who ) { alert ( “Alô Mundo,”+who); }

Naturalmente, para utilizar essa função você deveria inclui-la em um documento de HTML. Como foi falando nos tutoriais anteriores, o melhor lugar para definir uma função é dentro da seção <HEAD> do documento, já que as instruções na seção <HEAD> são executadas primeiro, isso assegura que a função seja definida antes de ser utilizada. No exemplo abaixo mostra a função AloMundo no cabeçalho de um documento de HTML.

<HTML>

<HEAD>

<TITLE>Definindo Funções</TITLE>

<SCRIPT>

function AloMundo(who) { alert (“Alô Mundo,”+who); }

</SCRIPT>

</HEAD>

<BODY>

No corpo da página você chama a função .

</BODY>

</HTML>

Você pode testar o exemplo acima em qualquer editor que gere HTML de sua preferencia, no meu caso o teste foi executado num editor de texto Bloco de Notas, por se tratar ainda de um exemplo simples. A Figura 5.0 mostra o que foi executado desse exemplo.

Figura 5.0- Definindo Funções

Você pode perceber através da Figura 5.0 que a função não foi executada, mais isso se deve pelo fato de não termos chamamos a função, que geralmente é chamada no corpo da pagina de um documento HTML.

Chamando a Função

Pronto! Acabamos de definimos a função e coloca-la num documento de HTML, porém vimos que ao carregamos o script em um navegador, ele não fez absolutamente nada, simplesmente porque o que fizemos no exemplo anterior foi criar uma função para que ela seja utiliza-la ,mais ainda não a utilizamos.

Para utilizar uma função, você tem que chama-la. Para chamar uma função, utiliza o nome da função como uma instrução em um script. Para isso você precisara incluir os parênteses e os valores para os parâmetros da função.

Por exemplo: AloMundo(“Seu Nome”) ;

Este exemplo diz ao interpretador do JavaScript para transferir controle à primeira instrução na função AloMundo e passa o parâmetro “Seu Nome” para a função. Esse valor será atribuído à variável dentro da função.

Nota: As funções podem ter mais de um parâmetro. Para definir uma função com múltiplos parâmetros, liste um nome variável para cada parâmetro, separado por virgulas. Para chamar a função, especifique ao valores para cada parâmetro, separado por virgulas.

No exemplo abaixo, mostra um documento completo de HTML que inclui a definição de uma função e um segundo script no corpo da pagina que realmente chama a função. Para demostrar a utilidade das funções, nós a chamaremos duas vezes para saudar duas pessoas diferentes.

<HTML>

<HEAD>

<TITLE>Definindo Funções</TITLE>

<SCRIPT>

function AloMundo(who) { alert (“Alô Mundo,”+who); }

</SCRIPT>

</HEAD>

<BODY>

<H1> Exemplo de Função </H1>

<P> Saudação</P>

<SCRIPT>

AloMundo(“Brasil”);

AloMundo(“USA”);

</SCRIPT>

</BODY>

</HTML>

Neste exemplo incluímos um segundo conjunto de tags<SCRIPT> no corpo da página. O segundo script inclui duas chamadas de função para a função AloMundo, cada uma com um nome diferente. Agora que você tem um script que realmente faz algo, que tal testa-lo. Você deverá ter o mesmo resultado da Figura 5.1 e Figura 5.2.

Figura 5.1- Exemplo de Função.

Figura 5.2- Exemplo de Função

Nota: Note que a Segunda mensagem de alerta não é exibida até você pressionar o botão OK no primeiro alerta. Isso é porque o processamento de JavaScript é parado enquanto as alertas são exibidos.

Retornando um valor

Embora a função que você acabou de criar exiba uma mensagem para o usuário, as funções também podem retornar um valor para o script que as chamou. Isso permite utilizar funções para calcular valores. Como um exemplo, você pode criar uma função que calcular a media de 4 números.

Sua função deve iniciar com a palavra-chave function , o nome da função e os parâmetros que ela aceita. Utilizaremos os nomes de variáveis como : a, b, c e d para os quatros números cuja media queremos calcular. Eis a primeira linha da função:

function Media(a,b,c,d) { instrução }.

Na instrução podemos calcular a media, somando os números e depois dividi-los pelo numero de números ou seja por 4. Assim, a próxima linha da função seria:

resultado=(a+b+c+d)/4 ;

Essa instrução cria uma variável chamada Resultado e calcula o resultado adicionando os quatros números, depois dividindo por 4, os parâmetros são necessários para dizer ao JavaScript executa a adição antes da divisão.

Para enviar esse resultado de volta ao script que chamou a função, você utiliza a palavra-chave que retorne o resultado da media.

return Resultado

Para utilizar essa função em um script, você pode utilizar uma variável com a chamada de uma função. Por exemplo, a instrução a seguir faz medias dos números 2,4,6,8 e armazena o resultado em uma variável chamada score, e para exibir o resultado usamos o evento write.

score=Media(2,4,6,8) ;

document.write(“A Media é:” +score);

O exemplo abaixo mostra um documento completo de HTML que inclui a definição da função Media.

<HTML>

<HEAD>

<TITLE>Calculando Media</TITLE>

<SCRIPT>

function Media(a,b,c,d){

Resultado=(a+b+c+d)/4;

return Resultado;

}

</SCRIPT>

</HEAD>

<BODY>

<H1> Retornando um valor </H1>

<P> Media </P>

<SCRIPT>

score=Media(2,4,6,8);

document.write(“A Media de 2,4,6,8 é :”+score);

</SCRIPT>

</BODY>

</HTML>

Pronto! Agora você pode desta o exemplo acima e obterá o mesmo resultado da Figura 5.3.

Figura 5.3-Retornando um valor.

Nota: Você também pode utilizar a chamada de função diretamente em uma expressão. Por exemplo, você pode utilizar a instrução alert para exibir o resultado da função: alert (Media(2,4,6,8)).

Objetos JavaScript

Você aprendeu que as variáveis podem armazenar um numero, uma string de texto ou um valor. O JavaScript organiza todos os elementos de uma Home Page dentro de uma hierarquia. Cada elemento é visto como um objeto. Como variáveis os objetos podem armazenar dados, inclusive armazenar dois ou mais itens ao mesmo tempo.

Os itens de dados armazenados em um objeto são chamados de propriedades do objeto. Por exemplo, você pode utilizar objetos para armazenar informações sobre as pessoas, como em catálogos de endereço. As propriedades de cada objeto da pessoa podem incluir um nome, endereço , telefone e outras informações.

O JavaScript utiliza pontos para separar os nomes de objetos e os nomes de propriedade. Por exemplo, para um objeto de uma pessoa chamada Carla, as propriedades podem incluir Carla.endereço e Carla.telefone.

Os objetos podem ter propriedades, métodos e responder a certos eventos. Por isso é muito importante entender a hierarquia dos objetos HTML. Você entenderá rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte é uma página HTML simples:

Figura 5.4- Exemplo de Objetos

Na Figura 5.4 temos um link, duas imagens, e um formulário com dois campos texto e dois botões. Do ponto de vista do JavaScript a sua janela do browser é um objeto window. Este objetowindow contém certos elementos, como a barra de status.

Como já sabemos dentro da janela, nós podemos carregar uma página HTML. Esta página é um objeto document. Desta forma o objeto document representa o documento HTML que está carregado no momento. O objeto document é muito importante, em JavaScript você sempre o usará muito.

Mas o que é mais importante é que todos os objetos HTML são propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulário.

A imagem abaixo ilustra a hierarquia criada pelo exemplo acima:

O JavaScript suporta três tipos de objetos:

Objetos embutidos ou predefinidos è São objetos construídos dentro da linguagem JavaScript, por exemplo Date e Math. Alguns outros objetos embutidos incluem Array e String .

Objeto browser è São objetos que representam vários componentes do navegador e o documento atual de HTML. Por exemplo, a função alert( ) que você utilizou anteriormente é um método de objeto window ou seja de Janela.

Objeto personalizado è São objetos que você mesmo cria. Por exemplo, você pode criar um objeto de pessoa, como visto anteriormente.

Tratando Eventos

Como mencionado nos tutoriais anteriores, nem todos os scripts estão localizados dentro das tags<SCRIPT>. Você também pode utilizar scripts como handlers de eventos. Os handlers significa tratadores de eventos e é justamente os scripts que os tratam.

Os handlers de eventos no JavaScript diz ao navegador o que fazer quando um certo evento ocorre. Os eventos de JavaScript incluem eventos tais como “Quanto o botão do mouse der um clique” e “Quando essa pagina termina de carregar”. Contudo, eles são uma parte muito útil do JavaScript.

Muitos eventos de JavaScript são causados pelo usuários, em vez de fazer as coisas em uma ordem determinada, seu script pode responder as ações do usuários. Evidentemente, isso é essencial para todas as utilizações praticas do JavaScript.

Os handlers de evento estão associados como objetos particulares do navegador e você especifica o handler de evento na tag que define o objeto. Por exemplo, links de imagem e texto têm um evento, onMouseOver, que acontece quando o ponteiro do mouse move-se sobre o objeto. Eis uma tag típica de imagem de HTML com um handler de evento:

<IM SRC=”botão.gif”onMouseOver=highlight()”>

Como pode ver, você tem que especificar o handler de evento como um atributo para a tag de HTML e incluir a instrução JavaScript para tratar o evento dentro das aspas.

Ocultando scripts de navegadores antigos

Alguns usuários ainda utilizam navegadores que não suportam JavaScript. Além disso, algumas pessoas tem suporte para JavaScript porem este esta desativado em seus navegadores, seja por preocupação com segurança ou para evitar mensagem rolando na tela.

Nota: A maioria das preocupações com segurança que as pessoas têm em relação ao JavaScript é infundada; não há realmente como danificar arquivos do usuário como JavaScript, e os scripts não tem acesso ao conteúdo dos disco rígidos por padrão. Algumas brechas de segurança foram localizados em versões anteriores do JavaScript, mas nenhuma permite dano serio.

Como os navegadores mais antigos não entendem a tag<SCRIPT>, eles não se comportarão bem quando encontrarem um script em uma pagina da Web. Na maioria dos casos, eles exibirão o script no meio da pagina e entre outros efeitos que não são esperados. Para evitar isso, você pode incluir o script dentro de tags de comentário de HTML, isso diz ao navegador para ignorar o script.

Já os navegadores atuais são suficientemente inteligentes para saber que o script não é realmente um comentário. Como abordados nos tutoriais anteriores os comentários em HTML começam como a tag<!- – e terminam com tag– >, mostrado no exemplo abaixo que oculta um script em navegadores mais antigos :

<SCRIPT>

< ! – –

document.write(“Seu browser suporta JavaScript.”)

// – – >

</SCRIPT>

Esse script incluir as tags de comentários de HTML de inicio e de fim. As duas barras (//) na ultima linha são um comentário JavaScript , isso evita que o comentário de HTML seja detectado como um erro de JavaScript.

Suportando navegadores não – JavaScript

Você pode ocultar seu script de navegadores mais antigos para eles não exibirem o próprio script. Mas você pode precisar suportar esses navegadores como por exemplo, exibir um aviso que a página exige JavaScript. A tag <NOSCRIPT> , que suporta em JavaScript 1.1 e superior, pode ser uma solução conveniente, pois essa tag diz para o navegador compatíveis com o JavaScript para ignorar tudo entre as tag<NOSCRIPT> de inicio e de fim, então você pode incluir conteúdo HTML para o navegador não-JavaScript dentro das tags.

Nota: Navegadores mais antigos que não suportam JavaScript também não suportam a tag<NOSCRIPT>.Entretando, essa técnica ainda funciona porque, de acordo com o padrão de HTML, os navegadores devem ignorar tags desconhecidas. Navegadores modernos suportam a tag<NOSCRIPT> quando suporte para JavaScript esta desativado.

O exemplo abaixo, mostra uma seção de HTML , que exibe uma mensagem para navegadores não-JavaScript.

<NOSCRIPT>

Seu browser não suporta JavaScript. Por favor use a Versão não-JavaScript desse tutorial.

</NOSCRIPT>

Este exemplo permite você suportar os dois tipos de navegadores como Explore e o Netscaper ,com exceção do Netscaper 2.0, que suporta JavaScript mais não suporta a tag <NOSCRIPT>; essa versão exibirá a mensagem <NOSCRIPT>.

Utilizando comentários

Como utilizamos comentários de HTML para ocultar seu script de navegadores. Achei importante abordar que o JavaScript também inclui seus próprios tipos de comentários. Embora esses não ocultem o JavaScript dos navegadores, eles são úteis para determinados fins: incluir comentários em seu script.

Os comentários permitem incluir documentação dentro de seu script. Isso será útil se outra pessoas tentar entender o script ou mesmo se você tentar entendê-lo muito tempo depois de te-lo criado. Para incluir comentários em um programa de JavaScript, digite um linha com duas barras, como nesse exemplo:

// isto é um comentário.

Você pode também começar um comentário no meio de uma linha, que é útil para documentar um script. Por exemplo:

score=Media(2,4,6,8);// armazena o resultado da media em score

O JavaScript também suporta comentários no estilo C que iniciam com /* e terminam com */. Esses comentários podem estender-se por mais de uma linha , como o exemplo abaixo:

/* O JavaScript incluem uma variedade de recursos, incluindo este comentário */

Nota: Como esses comentários são parte da sintaxe do JavaScript, eles somente são válidos dentro das tags <SCRIPT>.

Bom fechamos essa parte, até o próximo post.

Fonte: Internet+Conhecimentos próprios

Mc Info – Ligado nas Novidades

Esse post foi publicado em Info, Tutorial e marcado , , , , , , , , , , , , , , , , , , , , , , , . Guardar link permanente.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s