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
FILTRO DE TUTORIAIS:
Esta é a segunda parte de uma série de tutoriais sobre JavaScript básico. Nesta parte do tutorial você aprenderá sobre alguns comandos utilizados pelo JavaScript , criação de scripts, como editar e executar um script utilizando o Internet Explore.
Pré-requisitos: Para acompanhar a lição você deve estudar a primeira parte desse tutorial.
Na primeira parte desse tutorial você aprendeu que o JavaScript é uma linguagem de script para documentos da Web ou seja é uma linguagem que permite injetar lógica em páginas escritas em HTML e o script é executado quando a pagina é visualizada em um navegador.
É importante saber que o Java Script utiliza parágrafos de lógica que podem estar "soltos" ou atrelados a ocorrência de eventos.
Os parágrafos soltos são executados na seqüência em que aparecem na página e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de JavaScript, da seguinte forma:
<SCRIPT>
Set de instruções
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e manutenção da página , recomenda-se que toda a lógica seja escrita no início do documento, através da criação de funções a serem invocadas. Agora se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos <SCRIPT> e </SCRIPT>.
Uma das coisas que diferencia o JavaScript de outras linguagens de programação , é que você não precisará de softwares especiais para criar scripts de JavaScript. A primeira coisa que você precisa para trabalhar com JavaScript é um editor de texto.
Neste momento você deve esta se perguntado :Só preciso de um editor de texto ? Não preciso de nenhum software especial ? A resposta é não , e isso se deve porque o JavaScript como dito na Parte 1 desse Tutorial é um linguagem interpretada, o navegador executa cada linha de script como as recebe, portanto, os scripts são simples e precisam ser armazenados em arquivos de texto simples, normalmente como parte de documentos de HTML, sendo assim, qualquer editor que pode armazenar arquivos de texto ASCII servirá para criar uma pagina na Web.
Mas agora você deve esta se perguntando : Mais qual usar? Bom, você pode escolher entre uma ampla variedades de editores de textos simples a sofisticados processadores de texto, se você ainda não tiver um editor que prefira , um editor simples e que muito provavelmente já esta incluído no seu computador funcionará muito bem.
As páginas HTML podem serem feitas utilizando-se editores de texto, como o Bloco de Notas, Write, etc. ou utilizando editores próprios para gerar HTML, tais como Microsoft FrontPage, EditPlus. Esses editores de HTML , incluem recursos especificamente para JavaScrpit como por exemplo: pintar as varias instruções de JavaScript para indicar seus propósitos ou mesmo criar scripts simples automaticamente , vantagens que os diferem dos editores simples.
Para os usuários do Windows, eis alguns editores recomendados :
Para os usuários Macintosh recomenda-se o BBEdit, BBEdit Lite e Alpha que são bons editores de HTML para criação de pagina na Web.
Bom , agora você sabe o que precisa para começar a trabalhar com JavaScript : um editor e um navegador Web para executar seu script.
Operadores Lógicos
Os principais operadores lógicos a serem utilizados em comandos condicionais são:
OPERADORES LÓGICOS | SIGNIFICADO |
= = | Igual |
!= | Diferente |
> | Maior |
>= | Maior ou Igual |
< | Menor |
<= | Menor ou Igual |
&& | E |
|| | Ou |
Os comandos condicionais serão abordados mais abaixo.
Operadores Matemáticos
Os operadores Matemáticos a serem utilizados em cálculos, referências de indexadores e manuseio de strings são :
OPERADORES MATEMÁTICOS | SIGNIFICADO |
+ | adição de valor e concatenação de strings. |
- | subtração de valores |
* | multiplicação de valores |
/ | divisão de valores |
% | obtém o resto de uma divisão |
Ao longo dos tutoriais estes operadores serão largamente utilizados, dando, assim, uma noção mais precisa do seu funcionamento.
Controles Especiais
CONTROLES ESPECIAIS | SIGNIFICADO |
\b | backspace |
\f | form feed |
\n | new line caracters |
\r | carriage return |
\t | tab characters |
// | Linha de comentário |
/*....*/ | Delimitadores para inserir um texto com mais de uma linha como comentário. |
Os delimitadores naturais para uma string são " ( aspas dupla) ou ' ( aspas simples). Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo " ou '. Como por exemplo : alert ("Cuidado com o uso de \" ou \' em uma string")
Estruturas de Controle ou Comandos Condicionais
Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execução de um programa ou seja elas possui comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira.
São eles:
Comando IF
if (condição)
{ ação para condição satisfeita }
[ else
{ ação para condição não satisfeita } ]
Exemplo :
if (Idade < 18)
{Categoria = "Menor" }
else
{Categoria = "Maior"}
Comando FOR
for ( [inicialização/criação de variável de controle ;]
[condição ;]
[incremento da variável de controle] )
{ ação }
Exemplo.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }
Comando WHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
Exemplo.
var contador = 10
while (contador > 1)
{ contador-- }
Move condicional
receptor = ( (condição) ? verdadeiro : falso)
Exemplo.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
Eventos
Os eventos são fatos que ocorrem durante a execução do sistema, a partir dos quais você pode definir ações a serem realizadas pelo programa. Logo abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que eles podem ocorrer, bem como, os objetos passíveis de sua ocorrência.
EVENTOS | OCORRÊNCIAS |
onload | Ocorre na carga do documento. Ou seja, só ocorre no BODY(corpo) do documento. |
onunload | Ocorre na descarga (saída) do documento. Também só ocorre no BODY(corpo). |
onchange | Ocorre quando o objeto perde o focus e houve mudança de conteúdo. Válido para os objetos Text, Select e Textarea. |
onblur | Ocorre quando o objeto perde o focus, independente de ter havido mudança. Válido para os objetos Text, Select e Textarea. |
onfocus | Ocorre quando o objeto recebe o focus. válido para os objetos Text, Select e Textarea. |
onclick | Ocorre quando o objeto recebe um Click do Mouse. válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. |
onmouseover | Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link. |
onselect | Ocorre quando o objeto é selecionado. Válido para os objetos Text e Textarea. |
onsubmit | Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form. |
Neste momento você deve esta se perguntado : Onde utilizar este eventos ? Por enquanto não se preocupe , pois ao longo dos tutoriais todos estes operadores, comandos , controle e eventos serão utilizados, dando assim uma noção mais precisa do seu funcionamento.
Seu script , como na maioria dos programas de JavaScript , inicia com a tag
< Script > de HTML. Como você aprendeu , utiliza-se as tag < Script> e </Script> para incluir um script dentro documento de HTML, também é importante lembrar que não se deve incluir nada exceto instruções JavaScript válidas entre as tag, pois se o navegador encontrar quaisquer tags de HTML que não faz parte do script dentro das tag , ele exibirá um mensagem de erro de JavaScript.
Para começar a criar o script , abra seu editor texto preferido e digite as tags<Script> de inicio e de fim como mostrado na Figura 2.1. No meu caso escolhi o Bloco de notas como meu editor , por se tratar por enquanto de exemplos simples.
Figura 2.1- Inserindo script
Para armazenar o script você terá que utilizar variáveis que armazena as informações a serem executadas ,por isso precisamos cria-la. A variável é criada automaticamente, pela simples associação de valores a mesma.
Por exemplo : NovaVariavel = "José"
Neste exemplo foi criada uma variável de nome NovaVariavel que passou a conter a string Jose. As variáveis podem ser Locais ou Globais.
As variáveis Locais são aquelas criadas dentro de uma função que são Locais e referenciáveis apenas dentro da função.
As variáveis Globais são aquelas criadas fora de funções que são Globais, podendo serem referenciadas em qualquer parte do documento. É muito importante que as variáveis que precisam ser referenciadas por várias funções ou em outra parte do documento, precisam ser definidas como globais, embora não seja recomendável, em uma função, pode ser definida uma variável local com o mesmo nome de uma variável global. Para isso utiliza-se o método de definição var. Como no exemplo a seguir :
Exemplo.
Variável Global : MinhaVariavel = ""
Variável Local : var MinhaVariavel = ""
Criando um Script Simples
O JavaScript permite que você escreva linhas dentro de uma página , através do método write. As linhas escritas desta forma, podem conter textos, expressões JavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto da tela onde o comando for inserido. Para você ter uma idéia como isso ocorre vamos fazer uma teste simples, para isso vamos utilizar o Bloco de Notas , seguindo os seguintes passos:
Figura 2.2-Criando Script Simples
Figura 2.3- Executando Script
Observe. Vai aparecer em sua pagina o mesmo conteúdo mostrado na Figura 2.3.
Inicialmente a idéia do exemplo acima era escrever duas linhas, porém isso não ocorreu porque o método write não insere mudança de linha, por isso provocou o aparecimento de apenas uma linha com os dois textos emendados. Então para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando não surtiu efeito, obtendo-se o mesmo resultado do método write. A solução encontrada para esta situação foi a utilização do comando de mudança de parágrafo da linguagem Html, para isso vamos que seguir os seguintes passos:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) + "</p>")
</script>
Você ira observar que o problema da mudança de linha foi resolvido , porém, gerou um outro problema que é uma linha em branco, entre cada linha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência da linha em branco, a alternativa é utilizar o comando Html <br> que apenas muda de linha. Como mostra o exemplo a seguir.
<script>
valor = 30
document.write (“<br>Minha primeira linha”)
document.write (“<br>Nesta linha aparecerá o resultado de : “ + (10 * 10 + valor) )
</script>
Mensagens
Existem três formas de comunicação com o usuário através de mensagens.
1º Forma : Apenas Observação utilizando o comando.
alert ( mensagem )
Exemplo : Este exemplo também é simples por isso vamos utilizar o Bloco de notas. Siga os seguintes passos indicados a seguir:
< Script > alert ("Certifique-se de que as informações estão corretas") </Script >
,
depois salve o arquivo com extensão html na pasta que você criou , como nome de sua escolha.
Figura 2.4 – Utilizando comando alert
2º Forma : Mensagem que retorna confirmação de OK ou CANCELAR
confirm (mensagem)
Exemplo 2: Neste exemplo vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos indicados a seguir :
< Script >
if (confirm ("Algo está errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") } </Script >
, depois salve o arquivo com extensão html na pasta que você criou , como nome de sua escolha.
Figura 2.5- Utilizando comando confirm
3º Forma : Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
Onde o Receptor é o campo que vai receber a informação digitada pelo usuário, Minha mensagem é a mensagem que vai aparecer como Label da caixa de input , Meu texto é um texto, opcional, que aparecerá na linha de digitação do usuário
Exemplo 3: Vamos utilizar o mesmo editor de texto dos exemplo anteriores. Siga os seguintes passos indicados a seguir:
< Script >
Entrada = prompt("Informe uma expressão matemática", "")
Resultado = eval(Entrada)
document.write("O resultado é = " + Resultado)
</Script >
, depois salve o arquivo com extensão html na pasta que você criou, como nome de sua escolha.
Figura 2.6- Utilizando comando prompt
Muito bem acabamos de fazer nossas primeiras pagina utilizando JavaScript. Na próxima parte deste tutorial você aprenderá como criar funções e como manipula-las.
Nesta parte do tutorial , mostrei alguns comando básicos da linguagem JavaScript e como esta se interagem com a linguagem HTML , promovendo uma maior interação entre usuário e pagina. Através de exemplos simples foi possível perceber o funcionamento de alguns comandos e eventos que podemos utilizar na construção de uma pagina. Na próxima parte desse tutorial você aprendera a criar funções que utilizam este comandos e eventos para o armazenamento de dados a serem executados.
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