
![]()
![]()
JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad, Write, etc. Porém, existem editores próprios para gerar HTML, tais como HotDog e (mais recomendado) Microsoft FrontPage.
Os parágrafos de lógica do javaScript podem
estar "soltos" ou atrelados a ocorrência de eventos.
Os parágrafos soltos são executados na sequência em que aparecem na página
(documento) 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 facilidade de manutenção, 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 quando se fizer necessário (normalmente atreladas a eventos).
Se a lógica é escrita a partir de um determinado evento, não é necessário o
uso dos comandos <SCRIPT> e </SCRIPT>.
Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas)
em sua sintaxe.
Portanto, é necessário que seja obedecida a forma de escrever os comandos, de
acordo com a forma apresentada ao longo deste manual. Caso seja cometido algum
erro de sintaxe quando da escrita de um comando, o JavaScript interpretará, o
que seria um comando, como sendo o nome de uma variável.
São operadores a serem utilizados em comandos
condicionais, tais como: IF , FOR e WHILE.
Os comandos condicionais serão vistos mais a frente.
== Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
&& E
|| Ou
São operadores a serem utilizados em cálculos,
referências de indexadores e manuseio de strings.
Ao longo do manual estes operadores serão largamente utilizados, dando, assim,
uma noção mais precisa do seu potencial.
+
adição de valor e concatenação de strings
- subtração de
valores
* multiplicação de
valores
/ divisão de
valores
% obtem o resto de uma divisão:
Ex: 150 % 13
retornará 7
7
% 3 retornará 1
+= concatena /adiciona ao string/valor já
existente. Ou seja:
x +=
y é o mesmo que x = x + y
da mesma forma
podem ser utilizados: -= , *= , /= ou %=
Um contador pode ser simplificado utilizando-se : X++
ou X-- o que equivale as expressões:
X = X + 1
ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo
ou positivo para negativo.
\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 " ou ' . Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo " ou '.
Ex. alert ("Cuidado com o uso de \" ou \' em uma string")
São 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 }
]
Ex.
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 }
Ex.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }
ComandoWHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição)
{ ação }
Ex.
var contador = 10
while (contador > 1)
{
contador-- }
Move condicional
receptor = ( (condição) ? verdadeiro : falso)
Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" :
"Feminino")
OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada
para interromper a
condição principal e sair do loop. Da mesma forma, a diretiva "continue"
interrompe uma
ação (se determinada condição ocorrer) mas volta para o loop.
Diretivas/condições entre [ ] significam que são opcionais.
A variável é criada automaticamente, pela simples associação de valores a mesma.
Ex. NovaVariavel = "Jose"
Foi criada a variável de nome NovaVariavel que, passou a conter a string Jose.
As variáveis podem ser Locais ou Globais. As variáveis que são criadas dentro de uma função são Locais e referenciáveis apenas dentro da função. As variáveis criadas fora de funções são Globais, podendo serem referenciadas em qualquer parte do documento.
Desta forma, 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.
Ex. Variável Global : MinhaVariavel =
""
Variável Local : var
MinhaVariavel = ""
O JavaScript permite que o programador escreva
linhas dentro de uma página (documento),
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.
Ex:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecerá o resultado de : " + (10 * 10
+ valor))
</script>
A idéia do exemplo acima é escrever duas
linhas. Entretanto o método write não insere mudança de linha, o que
provocará o aparecimento de apenas uma linha com os dois textos emendados.
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.
Ex:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecerá o resultado de : " +
(10 * 10 + valor) + "</p>")
</script>
Isto resolve a questão da mudança de linha, porém, vai gerar 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.
Ex:
<script>
valor = 30
document.write ("<br>Minha primeira linha")
document.write ("<br>Nesta linha aparecerá o resultado de : " +
(10 * 10 + valor) )
</script>
Existem três formas de comunicação com o usuário através de mensagens.
Apenas Observação.
alert ( mensagem )
Ex.
alert ("Certifique-se de que as informações estão corretas")
Mensagem que retorna confirmação de OK ou CANCELAR
confirm (mensagem)
Ex.
if (confirm ("Algo está errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") }
Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
Onde:
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
Ex.
Entrada = prompt("Informe uma expressão matemática", "")
Resultado = eval(Entrada)
document.write("O resultado é = " + Resultado)
Uma função é um set de instruções, que só devem ser executadas quando a função for acionada.
A sintaxe geral é a seguinte:
function NomeFunção (Parâmetros)
{
Ação }
Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade, recebendo como parâmetro a sua idade.
function Idade (Anos) {
if
(Anos > 17)
{
alert ("Maior de Idade") }
else
{
alert ("menor de Idade") }
}
Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja informada a idade e, a cada informação, a função seja acionada.
<form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form> Observe-se que o parâmetro passado (quando ocorre o evento "onchange") foi o conteúdo da caixa de texto "Tempo" (propriedade "value") e que, na função, chamamos de "Anos". Ou seja, não existe co-relação entre o nome da variável passada e a variável de recepção na função. Apenas o conteúdo é passado.
São funções embutidas na própria linguagem. A sintaxe geral é a seguinte:
Result = função (informação a ser processada)
- eval = Calcula o conteúdo da string
- parseInt - Transforma string em inteiro
- parseFloat - Transforma string em número com ponto flutuante
- date() - Retorna a data e a hora (veja o capítulo manipulando datas)
ex1: Result = eval ( " (10 * 20) + 2 - 8")
ex2: Result = eval (string)
No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string, que também pode ser o conteúdo (value) de uma caixa de texto.
- Funções tipicamente Matemáticas:
Math.abs(número) - retorna o valor
absoluto do número (ponto flutuante)
Math.ceil(número) - retorna o próximo valor inteiro maior que o número
Math.floor(número) - retorna o próximo valor inteiro menor que o número
Math.round(número) - retorna o valor inteiro, arredondado, do número
Math.pow(base, expoente) - retorna o cálculo do exponencial
Math.max(número1, número2) - retorna o maior número dos dois
fornecidos
Math.min(número1, número2) - retorna o menor número dos dois
fornecidos
Math.sqrt(número) - retorna a raiz quadrada do número
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Observação:
Em todas as funções, quando apresentamos a expressão "(número)",
na verdade queremos
nos referir a um argumento que será processado pela função e que poderá ser:
um número,
uma variável ou o conteúdo de um objeto (propriedade value).
Através do operador new podem ser
criadas novas instâncias a objetos já existentes, mudando o
seu conteúdo, porém, mantendo suas propriedades.
A sintaxe geral é a seguinte:
NovoObjeto = new ObjetoExistente (parâmetros)
Ex1.
MinhaData = new Date ()
MinhaData passou a ser um objeto tipo Date,
com o mesmo conteúdo existente em Date
(data e hora atual)
Ex2:
MinhaData = new Date(1996, 05, 27)
MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.
Ex3:
Suponha a existência do seguinte objeto chamado Empresas
function Empresas (Emp, Nfunc, Prod)
{
this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }
Podemos criar novas instâncias, usando a mesma estrutura, da seguinte forma:
Elogica = new Empresas("Elogica",
"120", "Serviços")
Pitaco = new Empresas("Pitaco", "35", "Software")
Corisco = new Empresas("Corisco", "42",
"Conectividade")
Assim, a variável Elogica.Nfunc terá o seu conteúdo igual a 120
O JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays é necessário a criação de um objeto com a propriedade de criação de um array.
No exemplo abaixo, criaremos um objeto tipo array de tamanho variável e com a função de "limpar" o conteúdo das variáveis cada vez que uma nova instância seja criada a partir dele.
function CriaArray (n) {
this.length
= n
for (var i = 1 ; i <= n ; i++)
{ this[i] = "" } }
Agora podemos criar novas instâncias do objeto "CriaArray" e alimentá-los com os dados necessários.
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"
Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"
Agora poderemos obter os dados diretamente dos arrays.
DiaSemana = NomeDia[4]
Ocupação = Atividade[1]
DiaSemana passaria a conter Quinta e Ocupação conteria Programador.
Outra forma de se trabalhar com arrays é criar
novas instâncias dentro do próprio objeto do
array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode
ser feito da
seguinte forma:
function Empresas (Emp, Nfunc, Prod) {
this.Emp
= Emp
this.Nfunc
= Nfunc
this.Prod
= Prod }
TabEmp = new Empresas(3)
TabEmp[1] = new Empresas("Elogica", "120", "Serviços")
TabEmp[2] = new Empresas("Pitaco", "35", "Software")
TabEmp[3] = new Empresas("Corisco", "42",
"Conectividade")
Assim, poderemos obter a atividade da empresa número 3, cuja resposta seria Conectividade, da seguinte forma:
Atividade = TabEmp[3].Prod
Obs:
É importante lembrar que, embora os exemplos estejam com indexadores fixos, os
indexadores podem ser referências ao conteúdo de variáveis.