JAVASCRIPT- PARTE 2

 

Objetivos:

 

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.

 

 

Criando Scripts

 

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>.

 

As Ferramentas de 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 :

• Homesite – É um editor HTML excelente que inclui suporte JavaScript.
• Microsoft FrontPage – É um editor visual de HTML da Microsoft, possui um componente chamado ScriptBuilder que permiti a criação de script simples.
• NetObjectsScriptBuilder – É um editor orientado a script que simplifica o processo e escrever scripts.
• EditPad- É um editor de texto simples que possui alguns recursos ausente no Bloco de notas.

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.

 

Principais Comandos, Eventos e Operadores utilizado no JavaScript

 

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.

 

Iniciando o Script

 

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:

• Abra o Bloco de Notas executado o seguinte comando Iniciar àProgramas àAcessórios àBloco de Notas.
• Depois de abrir o Bloco de Notas , digite os seguintes comandos , conforme mostrado na Figura 2.2 abaixo:

 

Figura 2.2-Criando Script Simples

• Salve o arquivo com extensão HTML como por exemplo meuprimeiroteste.Html ,mas antes disso aconselho a criar uma pasta aonde você poderá salvar todos os arquivos desenvolvidos no decorrer dos tutoriais, o nome da pasta fica ao seu critério, no meu caso crie uma pasta chamada Testes.
• Feche o arquivo, depois de fechado você ira executar este arquivo, dando um clique sobre ele.

 



 

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:

• Abra o arquivo do exemplo feito , clique no mouse no botão esquerdo e escolha a opção Exibir código fonte, com isso ira abrir um bloco de notas aonde você irá modifica o conteúdo existente por o que esta logo abaixo:

<script>

valor = 30

document.write ("<p>Minha primeira linha</p>")

document.write ("<p>Nesta linha aparecerá o resultado de : " + (10 * 10 + valor) + "</p>")

</script>

• Salve o arquivo e feche-o. Assim você esta de volta na pagina HTML, der um clique no botão Atualizar e observe o que irá ocorrer.

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:

• Abra o Bloco de Notas , conforme o exemplo anterior.
• Digite o seguinte comando:

< 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.

• Execute o arquivo , dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.4.

 

Figura 2.4 – Utilizando comando alert

• Clique OK, para sair da mensagem e finalizar o exemplo.

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 :

• Abra o Bloco de Notas , conforme o exemplo anterior.
• Digite o seguinte comando:

< 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.

• Execute o arquivo, dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.5.

 

Figura 2.5- Utilizando comando confirm

• Nesta mensagem você tem duas opções para escolher : Ok ou Cancelar. Se clicar em OK você obterá a seguinte mensagem:

• Clique em Ok para finalizar a mensagem.
• Caso escolha a opção Cancelar obterá a seguinte mensagem.

• Clique em Ok para finalizar a mensagem.

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:

• Abra o Bloco de Notas , conforme o exemplo anterior.
• Digite o seguinte comando:

< 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.

• Execute o arquivo , dando um clique sobre ele. Você obterá os mesmo dados mostrados na Figura 2.6.

 

Figura 2.6- Utilizando comando prompt

• Digite a expressão matemática ,clique em Ok ou Cancelar, e observe o que irá ocorrer.

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.  

 

Conclusão:

 

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.

ASP BÁSICO Cálculo de Frete Internacional com ASP e Access Sistema de Login com ASP 3.0 usando três camadas – Parte 1 Sistema de Login com ASP 3.0 usando três camadas – Parte 2 Sistema de Login com ASP 3.0 usando três camadas – Parte 3 Sistema de Login com ASP 3.0 usando três camadas – Parte 4 Sistema de Login com ASP 3.0 usando três camadas – Parte 5 Sistema de Login com ASP 3.0 usando três camadas – Parte 6 Sistema de Login com ASP 3.0 usando três camadas – Parte 7 Sistema de Login com ASP 3.0 usando três camadas – Parte 8 Sistema de Login com ASP 3.0 usando três camadas – Parte 9 Sistema de Login com ASP 3.0 usando três camadas – Parte 10 ASP 3.0 utilizando 3 camadas - Parte 1 ASP 3.0 utilizando 3 camadas - Parte 2 ASP 3.0 utilizando 3 camadas - Parte 3 COLDFUSION Criando um formulário em Flash usando o ColdFusion MX 7 FLASH - ACTIONSCRIPT Movimentar objeto – Parte 01 Movimentar objeto – Parte 02 Jogo – Acerte o Alvo Como Movimentar um Objeto utilizando Botões Exibir frases Aleatórias Ações Básicas do ActionScript Criando Botões com MovieClip no Flash Criando Links em Botões Flash Integrando Flash com Fireworks na Criação de Botões Interpolação Motion (Movimento) Interpolação Shape (Forma) Principais Eventos do Mouse (Flash/ActionScript) Criando Máscaras no Flash (Mask) Parte 1 Criando Máscaras no Flash (Mask) Parte 2 Galeria de Fotos Carregando Arquivos Externos (Flash e ActionScript) PHP BÁSICO Introdução ao PHP Lógica em PHP Trabalhando com Formulários HTML Utilizando Arquivos – Criando um Scrap Book Banco de Dados em Arquivos Texto PHP - Sistema de busca de preços - Parte 1 PHP - Sistema de busca de preços - Parte 2 PHP - Sistema de busca de preços - Parte 3 PHP - Sistema de busca de preços - Parte 4 PHP - Sistema de busca de preços - Parte Final Primeiros Scripts Guardando dados em memória Um pouco mais sobre variáveis Manipulando variáveis Estruturas de controle - Parte 1 Estruturas de controle - Parte 2 Estruturas de controle - Parte 3 Estruturas de controle - Parte 4 Estruturas de controle - Parte 5 Criação de Funções no PHP Funções – Um pouco mais Sobre Parâmetros - Parte 1 Funções – Um pouco mais Sobre Parâmetros - Parte 2 Funções – Alguns Truques Funções – Últimos Truques Arrays – Noções Básicas Arrays – Um pouco Mais Sobre Criação de Arrays

PHP COM BANCO DE DADOS Criando um Sistema Ficha Cadastral Clientes - Parte 1 Criando um Sistema Ficha Cadastral Clientes - Parte 2 Criando um Sistema Ficha Cadastral Clientes - Parte Final Controle Horarios Funcionários - Parte 1 Controle Horarios Funcionários - Parte 2 Controle Horarios Funcionários - Parte 3 Controle Horarios Funcionários - Parte 4 Controle Horarios Funcionários - Parte 5 Controle Horarios Funcionários - Parte 6 Controle Horarios Funcionários - Parte 7 Controle Horarios Funcionários - Parte 8 Controle Horarios Funcionários - Parte 9 Controle Horarios Funcionários - Parte 10 Controle Horarios Funcionários - Parte 11 Controle Horarios Funcionários - Parte 12 Controle Horarios Funcionários - Parte 13 - Conclusão Instalando o PHP no Windows XP Instalando o MySQL no Windows XP Sistema Controle Extintores -Parte 1 Sistema Controle Extintores -Parte 2 Sistema Controle Extintores -Parte 3 Sistema Controle Extintores -Parte 4 Sistema Controle Extintores -Parte 5 Sistema Controle Extintores -Parte - Conclusão PHP - Controle dos Correios - Parte 1 PHP - Controle dos Correios - Parte 2 PHP - Controle dos Correios - Parte 3 PHP - Controle dos Correios - Parte 4 PHP - Controle dos Correios - Parte 5 PHP - Controle dos Correios - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 2 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 3 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 4 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 5 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 7 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 8 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 9 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 10 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 11 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 12 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 13 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 14 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 15 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 16 JAVASCRIPT BÁSICO JavaScript Básico - Lição 1 JavaScript Básico - Lição 2 JavaScript Básico - Lição 3 JavaScript Básico - Lição 4 JavaScript Básico - Lição 5 JavaScript Básico - Lição 6 JavaScript Básico - Lição 7 JavaScript Básico - Lição 8 - Instruções If e Else JavaScript Básico - Lição 9 - Tópicos Diversos JavaScript Básico - Lição 10 - Objetos Math e Date JavaScript Básico - Lição 11 - Trabalhando com o objeto Browser JavaScript - Criando Seus Próprios Objetos JavaScript - Virtual Earth – Primeiro Passo JavaScript - Virtual Earth – Segundo Passo