Untitled Document

JavaScript
Introdução

Javascript versus Java
Programas interpretados versus programas compilados
Por que Javascript?
Para que usar Javascript?
Resumindo ...

Sintaxe:
A escrita em qualquer linguagem exige que se sigam regras e convenções
Adicionando código Javascritp em páginas HTML
Utilizar a tag SCRIPT dentro da tag HEAD

<HTML>

<HEAD>

<TITLE> Página contendo Javascript </TITLE>

(declarações Javascript)

</SCRIPT>

</HEAD>

<BODY>

(documento HTML)

</BODY>

</HTML>

Adicionar as linhas de código anexo ao evento

<HTML_TAG Attribute= “option” onEvent= “código Javascript”> Texto de exemplo para código Javascript em eventos </HTML_TAG>

<INPUT TYPE = “TEXT” NAME = “Mês” onFocus= “window.status=(‘Por favor entre com um mês de dois dígitos de 01 a 12’); return true;”>

Javascript é uma linguagem case-sensitive
Ponto-e-vírgula
Todas as declarações devem ser finalizadas com um ponto-e-vírgula (separa as declarações)

Ex: var x = 0; var y = 10;

Espaços em branco
Como HTML, ignora espaços, TABs e linha em branco que apareçam nas declarações

Ex: var x=0; é o mesmo que var x = 0;

Strings e aspas
String: seqüência de zero ou mais caracteres dentro de aspas simples ou duplas (‘simples’, “duplas”)
Aspas duplas podem ser inseridas em sentenças delimitadas por aspas simples

Ex: (‘Ele disse, “Javascript é uma linguagem interessante.” ’)
Aspas simples podem ser inseridas em sentenças delimitadas por aspas duplas

Ex:

<INPUT TYPE= “Button” VALUE = “Clique aqui”

onClick = “window.alert(‘Aguarde um momento’);”>

Barra invertida (\) e Strings:
Seguida de outro caracter, representa algo numa string que não pode ser digitado no teclado.

Ex: ‘Favor\ndigitar\na\ndata\ncorreta’

Favor

digitar

data

correta

\b backspace

\n nova linha

\t TAB

\’ aspa simples (apóstrofo)

\” aspas duplas

Chaves { }, Parênteses ( ) e Colchetes [ ]:
TODOS abertos devem ser fechados

Ex:

Winpop = window.open(‘ex1.htm’, ‘popup’, ‘scrollbars=yes’);
As chaves são usadas para delimitar declarações Javascript múltiplas

Ex:

If ( x[0] == 10 ) {

x[0] = 0;

x[1] = 0;

}
Os parênteses são usados para guardar argumentos de métodos ou funções (múltiplos argumentos são separados por vírgulas)

Ex:

If ( x[0] == 10 ) {

x[0] = 0;

x[1] = 0;

}

Comentários
Podem ser criados usando barras duplas “//”

Ex:

// Isto é um comentário
Para várias linhas, pode-se usar no início “/*” e no final “*/”

Ex:

/* Os comentários são geralmente usados pelos programadores para esclarecer a lógica do programa. Assim, quando o programador necessitar atualizar o código, ou qualquer outra pessoa, será fácil entender

*/

Nomes de Variáveis e Funções
O primeiro caracter do nome pode ser uma letra (caixa alta ou baixa), um underscore (_) ou o sinal de dólar ($)
Não se pode utilizar número como o primeiro caracter;
Os nomes não podem conter espaços;
Os nomes não podem ser palavras reservadas.

Ex:

adiciona_dois_números

x13

_qualquernome

$string_dinheiro

Palavras reservadas:

Ex: abstract, alert, arguments, Array, blur, boolean, byte, do, else, enum, escape, extends, int, isNaN, java, location, parent, print, private, prompt, status, stop, super, String, this, throw.

JavaScript é uma linguagem orientada a objetos.

Um objeto armazena uma série de informações que podem ser acessadas e utilizadas para processamento ou alteradas pelo programador.

Propriedades: um objeto possui características próprias. Podem ser vistas como variáveis que armazenam uma informação relacionada com um determinado objeto.

Ex.: document.bgcolor

Métodos: funções especiais que realizam alguma operação relacionada com o objeto. Alteram o valor de uma propriedade ou executam uma tarefa específica.

Ex.:Objeto.nome_do_método("argumento ")

document.write("<h1>Demonstração de JavaScript</h1>")

Eventos: ação que ocorre na página devido à interação do usário.

Funções: rotinas independentes que executam uma tarefa específica. Não estão associadas a um objeto, como os métodos.

Variáveis: armazenam temporariamente um conteúdo qualquer que pode ser um texto, um valor , uma data.

Ex.: nome= "Joao "

hoje=date()

total=20*4

Javascript versus Java

Java é uma linguagem fortemente tipada, compilada, desenvolvida pela Sun Microsystems.

Javascript foi desenvolvida originalmente pela Netscape, uma linguagem “leve”, interpretada, e chamada inicialmente de LiveScript. As duas linguagem não possuem nenhuma correlação (embora a sintaxe seja muito semelhante). Na verdade, TODAS as linguagens guardam uma certa semelhança entre si.

Top...

Programas interpretados versus programas compilados

As linguagens de programação interpretadas geralmente são mais simples e fáceis de programar, mas são mais lentas para executar, em geral. Todas as vezes que um programa é executado, tem-se que interpretar (verificar) linha a linha, baseado no fluxo de execução.

As linguagens de programação compiladas possuem uma sintaxe mais complexa e exigem práticas de programação mais apuradas. Ao usar uma linguagem de programação compilada, primeiro, escreve-se o código fonte, em seguida submete-o a um compilador (um programa especial) que produz um programa binário executável. Na plataforma Windows, o executável geralmente possui a extensão “.exe”. Este programa resultado do processo de compilação tende a ser dependente da plataforma (ou do sistema operacional). O grande benefício é que nenhum outro programador pode xeretar o código fonte depois de compilado. Outro fator chave é que a linguagem usada para gerar o código torna-se irrelevante uma vez que ele já foi compilado.

Java é uma linguagem compilada independente de plataforma, enquanto que Javascript é uma linguagem interpretada. O browser fornece a independência de plataforma para a linguagem Java através da Java Virtual Machine e o interpretador para Javascript. Por isso, o browser para o qual vc está escrevendo scritps é importante.

Top...

Por que Javascript?

Javascript é a única linguagem de scripts atualmente suportada pelos mais populares browsers. O Netscape Navigator só suporta Javascript, enquanto que o Internet Explorer da Microsoft suporta tanto Javascript quanto VBScript.

Além disso, Javascript pode também ser usado em servidores web (que também é conhecido como scritps do lado servidor). O tempo investido em aprender Javascript proporcionará um conhecimento que é tido como fundamental para desenvolvimento Web.

Top...

Para que usar Javascript?

JavaScript é usada como uma extensão muito útil das funcionalidades que podem ser realizadas com HTML. Por exemplo, verificar se a data inserida num formulário está correta, criar ações específicas para determinados eventos. Além do mais, ao juntar com CSS, cria-se o DHTML.

Top...

Resumindo...

Javascript é uma linguagem interpretada que pode ser adicionada a páginas HTML. O código é baixado para o browser e o código Javascript é executado quando um evento é gerado. Quando o código é executado, ele é interpretado linha a linha.

Top...

Espaços em branco
Como HTML, ignora espaços, TABs e linha em branco que apareçam nas declarações

Ex: var x=0; é o mesmo que var x = 0;

Aliás, é aconselhável que se coloque espaços em branco no meio do código para torna-lo mais legível

Métodos

Alert
Texto apresentado numa caixa com o botão OK.
window.alert (mensagem)

Nome: <INPUT TYPE="TEXT" NAME="Name"><BR>

<INPUT TYPE="Button" VALUE="Enviar dados"

onclick="window.alert('Olá ' + document.Form1.Name.value + '!');">

</FORM>

Prompt
Caixa de texto com espaço para que o usuário insira informações
Botões OK e Cancelar
window.prompt (mensagem, valor padrão)

<INPUT TYPE="Button" VALUE="Enviar dados"

onclick="window.prompt('Por favor, qual é o seu nome?','Digite aqui o seu nome');">

</FORM>

Confirm
Apresenta uma caixa de texto que espera uma resposta do usuário (Verdadeiro ou Falso)
Botões OK e Cancelar
window.confirm (mensagem)

<INPUT TYPE="Button" VALUE="Enviar dados"

onclick="window.confirm('Sua idade é superior a 21 anos?');">

</FORM>

onclick="window.confirm('Sua idade é superior a 21 anos ' + window.prompt('Por favor, digite o seu nome','Digite aqui o seu nome') + '?');">

</FORM>
Se o usuário clicar em OK é retornado um valor booleano “verdadeiro”. Caso o botão Cancelar for clicado, é retornado um valor booleano “falso”

testaIdade = window.confirm ('Sua idade é superior a 21 anos?')/p> Exemplo de Código

<HTML>

<TITLE>Confirm</TITLE>

function compute(f) {

if (confirm("Tem certeza?"))/p>

f.result.value = eval(f.expr.value)

else

alert("Pressione Ok para voltar à página")

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

Entre com uma expressão matemática (exemplo: 2+2 ou 3*5):

<BR>

Resultado:

</FORM>

</BODY>

</HTML>

Eventos
São “acontecimentos” que chamam funções

onClick()
Ocorre quando um botão, checkbox, option, submit ou reset é clicado

onSubmit()
Ocorre quando o usuário envia dados de um formulário

<FORM ACTION = "http://www.mackenzie.com.br/testaform.php" onSubmit = "return verifica();">

onMouseOver()
Ocorre quando o usuário posiciona o mouse sobre objetos (botões, links, caixas de texto ...)

<a href="http://www.mackenzie.com.br"

onMouseOver="window.status='Clique no link para acessar a home page do Mackenzie'; return true;">

Universidade Presbiteriana Mackenzie.</A>

onMouseOut()
Ocorre quando o usuário retira o ponteiro do mouse que estava posicionado sobre objetos (botões, links, caixas de texto ...)

<a href="http://www.mackenzie.com.br"

onMouseOut="window.status='Clique no link para acessar a home page do Mackenzie'; return true;">

Universidade Presbiteriana Mackenzie.</A>

onFocus()
Ocorre quando o usuário seleciona (com a tecla TAB ou com um clique) um objeto (caixa de texto, botão ...)

<INPUT TYPE="text" NAME="Mês"

onFocus="window.status=(Por favor digite o valor do mês com dois dígitos entre 01 e 12'); return true;">

onChange()
Ocorre quando o usuário abandona um objeto (caixa de texto, password ... ) sendo que o valor deste objeto foi alterado

<INPUT TYPE="text" NAME="Mês"

onChange="window.status=('O valor do Mês foi alterado!!!!'); return true;" >

onBlur()
Ocorre quando o usuário abandona um objeto (caixa de texto, password ... )

<INPUT TYPE="text" NAME="Mês"

onBlur="window.status=('Após preencher o Mês, por favor, preencha o ano!'); return true;" >

<INPUT TYPE="text" NAME="Ano">

onLoad()
Ocorre quando o browser termina de carregar uma página

<BODY onLoad="alert('Bem-vindo ao nosso site!');">

onUnload()
Ocorre quando o usuário muda o documento atual, clica nos ícones de “voltar” ou “avançar”, ou ainda, quando a janela do browser for fechada.

Exemplos de código JavaScript

Top...