NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!
UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI
Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.
FILTRO DE TUTORIAIS:
Objetivos:
Essa é a quinta parte de uma série de tutoriais sobre JavaScript básico. Na quarta parte desses do tutorial você aprendeu 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 que o JavaScript pode ser utilizado.
Pré-requisitos: Para acompanhar a lição você deve estudar as primeiras partes desse tutorial.
Nessa tutorial você ira aprender como os programas em JavaScript funcionam e também começará aprende os detalhes da linguagem de JavaScript. Nesta parte aprenderemos como organizar os scripts utilizados funções, aprenderemos a definição de que é objeto e como o JavaScript os utiliza e como o JavaScript responde aos eventos citados nos tutoriais anteriores.
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.
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.
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.
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)).
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 objeto window 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.
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.
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.
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>.
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>.
Por hora, mostrei alguns princípios básicos de programação em JavaSript, como definir e utilizar funções, abordei os princípios básicos de objetos e handlers ou seja tratadores de eventos. Você também aprendeu como ocultar scripts de navegadores que não suportam JavaScripts e também como utilizar os comentários de JavaScript para tornar seu script mais fácil de ler e entender. Através de exemplos simples foi possível perceber o funcionamentos dos princípios abordados e que pode ser utilizado na construção de uma pagina Web. Na próxima parte desse tutorial você alguns aspectos específicos de programação em JavaScript utilizando vários recursos, que o ajudarão a aprimorar cada vez mais seu conhecimento e que o ajudarão no desenvolvimento de sua Home Pager
Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434
Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208
Todos os direitos reservados, Júlio Battisti 2001-2024 ®
LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO
DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI