Programação - Apostila Java Script, Notas de estudo de Análise de Sistemas de Engenharia

Baixe Programação - Apostila Java Script e outras Notas de estudo em PDF para Análise de Sistemas de Engenharia, somente na Docsity!

Apostila sobre

Java Script

• Java Script Básico...................................................................................................
• 1. Introdução
  • 1.1 O que é Java Script?.................................................................................
  • 1.2 Qual é a diferença entre Java e JavaScript?
  • 1.3 Um pequeno exemplo do uso de scripts
• 1. Operadores e Controles Especiais...................................................................
  • 2.1 Operadores Matemáticos..........................................................................
  • 2.2 Operadores Lógicos..................................................................................
  • 2.3 Caracteres Especiais
• 3 Comandos Condicionais
• 4 Eventos
• 5 Criando variáveis
• 6 Escrevendo no documento.............................................................................
• 7 Mensagens.....................................................................................................
• 8 Funções
  • 8.1 Funções intrínsecas
• 9 Manipulando String’s e Datas
• 10 Manipulando Arrays....................................................................................
• 11 Formulário e elementos do formulário
  • 11.1 O Objeto FORM
  • 11.2 Objetos relacionados ao texto.................................................................
  • 11.3 O Objeto de botão...................................................................................
  • 11.4 O Objeto de caixa de seleção
  • 11.5 O objeto de botão de opção....................................................................
    • a) Propriedade length
    • b) Propriedade checked
  • 11.6 O objeto SELECT....................................................................................
    • a) Propriedade selectedIndex
    • b) Propriedade text
    • c) Propriedade value
• 12 Passando dados e elementos do formulário a funções
• 13 Objetos da janela e do documento
  • 13.1 Acessando as propriedades e métodos da janela
    • a) Método back
    • b) Método close()
    • c) Método open().........................................................................................
    • d) Método print()..........................................................................................
• 14 Exercícios.........................................................................................................

"oficial" mas acho que ela torna mais compreensível a diferença entre Java e JavaScript.

1.3 Um pequeno exemplo do uso de scripts

Exemplo 1:

Crie um arquivo HTML chamado Alo.html e coloque o código abaixo:

Abra o arquivo Alo.html com o seu navegador e clique no botão “Aperte- me”, o resultado será este:

Então, o que acontece neste script?

Existe uma coisa nova no tag de . Lá você pode ver 'onclick'. Isto diz ao browser que função ele tem que chamar quando o botão é pressionado (é claro que só quando o browser suporta JavaScript). A função 'mensagem()' é declarada na página. Quando o botão é pressionado a função é executada. Tem uma coisa nova neste script - o método 'alerta'. Este método já é declarado no JavaScript - desse modo você só tem que chamá-lo. Existem muitos métodos diferentes que você pode chamar.

Exemplo 2:

Crie um arquivo HTML chamado Saudacao.html e coloque o código abaixo:

Exemplo 3:

Vamos implementar uma função de data dentro do nosso script. Assim, se você criou uma página-HTML, você pode fazer o cliente imprimir a última modificação no documento. Você não precisa, entretanto, escrever a data no documento. Você simplesmente escreve um pequeno programa de script. Quando você fizer pequenas modificações no futuro, a data se modificará automaticamente.

Crie um arquivo HTML chamado DataAntiga.html e coloque o código abaixo:

Esta é uma página-HTML simples. Últimas modificações:

2. Operadores e Controles Especiais

2.1 Operadores Matemáticos

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 % Obtém o resto de uma divisão:

Ex: 150 % 13 retornará 7. 7 % 3 retornará 1.

+= concatena /adiciona a 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 às expressões:

X = X + 1 ou X = X - 1 respectivamente.

Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

2.2 Operadores Lógicos

São operadores a serem utilizados em comandos condicionais, tais como: IF, FOR e WHILE.

Os comandos condicionais serão vistos mais à frente.

== Igual != Diferente > Maior >= Maior ou Igual

3 Comandos Condicionais

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) }

Comando WHILE

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.

Cadastro do Conselho

Abra esta página com o seu navegador e veja o resultado. Posicione o mouse sob o link e olhe para a barra de status na parte de baixo do seu browser.

A única coisa que você tem que fazer é acrescentar a propriedade onMouseOver ao seu tag de link . O 'window.status' lhe permitirá escrever coisas na barra de status do seu browser. Como se pode ver, você tem que alterar as aspas. Você não vai poder usar " todo o tempo, porque se não o JavaScript não será capaz de identificar a seqüência que você quer imprimir na barra de status. Depois da seqüência você tem que escrever ;return true.

5 Criando variáveis

A variável é criada automaticamente, pela simples associação de valores a mesma.

Exemplo:

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

Exemplo:

Variável Global J MinhaVariavel = "" Variável Local J var MinhaVariavel = ""

Podem-se utilizar os tags Html para incrementar o texto:

write("O resultado é" + resultado); ou write ("" + "O resultado é" + "" + resultado)

Exemplos:

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.

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 desejada a existência da linha em branco, a alternativa é utilizar o comando Html que apenas muda de linha.

O problema

O objeto 'document.write()' limpa todo o documento antes de imprimir algo na tela. Para solucionar este problema utilizaremos o objeto ‘ window’****. Com esse simples parâmetro adicional, 'window-janela' no objeto, ele se torna muito útil, além de não mais limpar a tela para imprimir.

Exemplo:

o documento...

8 Funções

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.

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.

8.1 Funções intrínsecas

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() - date() - Retorna a data e a hora 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) Math.sin(número) Retorna o seno de um número (anglo em radianos) Math.asin(número) Retorna o arco seno de um número (em radianos) Math.cos(número) Retorna o cosseno de um número (anglo em radianos) Math.acos(número) Retorna o arco cosseno de um número (em radianos) Math.tan(número) Retorna a tangente de um número (anglo em radianos) Math.atan(número) Retorna o arco tangente de um número (em radianos) Math.pi Retorna o valor de PI (aproximadamente 3.14159) Math.log(número) Retorna o logarítmo de um número Math.E Retorna a base dos logarítmos naturais (aproximadamente 2.718) Math.LN2 Retorna o valor do logarítmo de 2 (aproximadamente 0.693) Math.LOG2E Retorna a base do logarítmo de 2 (aproximadamente 1.442) Math.LN10 Retorna o valor do logarítmo de 10 (aproximadamente 2.302) Math.LOG10E Retorna a base do logarítmo de 10 (aproximadamente 0.434)