Apostila javaScript (3)

(Parte 1 de 3)

JavaScript – Aplicações Interativas para a Web

BELO HORIZONTE 2006

JAVA E JAVASCRIPT	9
VBSCRIPT E JAVASCRIPT	10
AS VERSÕES DO JAVASCRIPT	10
COMPATIBILIDADE ENTRE BROWSER’S	1
GUIA DE REFERÊNCIA NA INTERNET	1
ORIENTAÇÃO A OBJETOS	1
MANIPULAÇÃO DE OBJETO	13
PROPRIEDADES DE OBJETOS	14
MÉTODOS DE OBJETOS	14
EVENTOS	15
MANIPULADORES DE EVENTOS UTILIZADOS	16
VARIÁVEIS	19
NOMES DE VARIÁVEIS	19
LITERAIS	2
INTEIROS (INTEGER)	23
PONTO FLUTUANTE	23
BOOLEANOS	23
LITERAIS STRING	23
CARACTERES ESPECIAIS	24
EXPRESSÕES	24
OPERADORES	25
OPERADORES DE INCREMENTO E DECREMENTO	26
OPERADORES RELACIONAIS	28
OPERADORES RELACIONAIS	28
OPERADORES LÓGICOS	28
OPERADOR DE CONCATENAÇÃO DE STRING	29
DECLARAÇÕES	30
OPERADOR NEW	30
PALAVRA-CHAVE THIS	30

VAR	32
DESENVOLVIMENTO DE SCRIPTS	3
DESENVOLVENDO SCRIPTS COM O TAG <SCRIPT>	3
DESENVOLVENDO SCRIPTS ATRAVÉS DE UM ARQUIVO EXTERNO	34
NOTIFICAÇÃO DE ERROS	36
INSTRUÇÕES BÁSICAS	38
MÉTODO DOCUMENT.WRITE()	38
MÉTODO ALERT()	39
MÉTODO CONFIRM()	39
COMANDOS CONDICIONAIS E REPETIÇÃO	41
INSTRUÇÃO WHILE	41
INSTRUÇÃO FOR	42
INSTRUÇÃO FOR...IN	43
IF	ELSE ......................................................................................... 4
RETURN	47
SWITCH	48
INSTRUÇÃO WITH	49
OBJETO ARGUMENTS	54
UTILIZANDO EVENTOS	56
EVENTO ONBLUR	56
EVENTO ONCHANGE	57
EVENTO ONCLICK	57
EVENTO ONFOCUS	57
EVENTO ONLOAD	58
EVENTO ONUNLOAD	58
EVENTO ONMOUSEOVER	58
EVENTO ONMOUSEOUT	59
EVENTO ONMOUSEDOWN	60
EVENTO ONMOUSEUP	60

EVENTO ONKEYUP	60
EVENTO ONSELECT	61
EVENTO ONSUBMIT	61
FUNÇÕES DA LINGUAGEM JAVASCRIPT	63
FUNÇÃO EVAL	63
FUNÇÃO ISNAN	64
FUNÇÃO PARSEFLOAT	65
FUNÇÃO PARSEINT	6
FUNÇÕES PRÉ-PROGRAMADAS	68
IMPRESSÃO DA PÁGINA	68
ADICIONAR AO FAVORITOS	68
JANELA EM MOVIMENTO	69
TEXTO NA BARRA DE STATUS EM MOVIMENTO	70
TABELA DE CORES	72
TEXTO EM MOVIMENTO EM UM CAMPO DE FORMULÁRIO	73
OBJETOS PRÉ-CONSTRUÍDOS	76
OBJETO DATE	76
MÉTODOS DO OBJETO DATE	7
OBJETO STRING	78
PROPRIEDADES	78
PROPRIEDADES DO OBJETO STRING	78
MÉTODOS DO OBJETO STRING	78
MÉTODO ANCHOR	79
MÉTODO BIG	79
MÉTODO SMALL	80
MÉTODO BOLD	80
MÉTODO ITALICS	81
MÉTODO FIXED	81
MÉTODO STRIKE	82

MÉTODO SUB	83
MÉTODO SUP	83
MÉTODO charAT	84
MÉTODO INDEXOF	84
MÉTODO LASTINDEXOF	85
MÉTODO LINK	86
MÉTODO REPLACE	86
MÉTODO SUBSTRING	87
MÉTODO TOLOWERCASE	8
MÉTODO TOUPPERCASE	8
OBJETO IMAGE	89
MÉTODOS DE INTERFACE COM O USUÁRIO	92
MÉTODO ALERT	92
MÉTODO CONFIRM	93
MÉTODO PROMPT	94
OBJETO WINDOW	96
PROPRIEDADES DO OBJETO WINDOW/FRAME	96
WINDOW.STATUS E DEFAULTSTATUS	97
MÉTODO OPEN	97
MÉTODO CLOSE	98
MÉTODO SETTIMEOUT	98
MÉTODO CLEARTIMEOUT	100
TRABALHANDO COM JANELAS	101
ABRINDO PÁGINAS EM FULLSCREEN (Tela Cheia)	110
O OBJETO MATH	1
PROPRIEDADES DE CÁLCULO DO OBJETO MATH	1
MÉTODOS DO OBJETO MATH	112
ABS	112
ACOS	112

COS	114
EXP	114
FLOOR	114
LOG	115
MAX	115
POW (base,expoente)	116
RANDOM	116
ROUND	117
SIN	118
SQRT	118
TAN	118
OBJETO DATE	119
MÉTODOS GET DO OBJETO DATE	119
MÉTODO PARSE E UTC	121
MÉTODOS SET DO OBJETO DATE	122
MÉTODO TOGMTSCRING	123
MÉTODO TOLOCALESTRING	123
EXERCÍCIOS	126
OBJETO DOCUMENT	128
PROPRIEDADES DO OBJETO DOCUMENT	128
MÉTODOS DO OBJETO DOCUMENT	132
MÉTODO CLEAR	132
MÉTODO CLOSE	133
MÉTODO WRITE E WRITELN	134
EXERCÍCIOS	136
OBJETO LINK	148
PROPRIEDADES DO OBJETO LINKS	148
UTILIZANDO ARRAYS	149
ARRAY ANCHORS[]	153

MANIPULANDO FRAMES	161
HIERARQUIA FRAMESET WINDOW	163
OBJETO FORM	170
PROPRIEDADES DO OBJETO FORMS	170
MÉTODOS DO OBJETO FORM	172
ELEMENTOS DE UM FORMULÁRIO	172
OBJETO TEXT	173
MANIPULADORES DE EVENTO PARA FORMULÁRIOS	173
OBJETO PASSWORD	176
OBJETO TEXTAREA	176
OBJETO BUTTON	177
OBJETO SUBMIT	178
OBJETO RESET	179
OBJETO CHECKBOX (Caixa de Verificação)	179
MANIPULADORES DE EVENTO	181
OBJETO RADIO	182
EVITANDO O USO DA TECLA ENTER	187
OBJETO LOCATION	189
PROPRIEDADES DO OBJETO LOCATION	190
EXERCÍCIOS	192
UTILIZANDO O OBJETO HISTORY	203
PROPRIEDADE	203
MÉTODOS BACK E FORWARD	203
UTILIZANDO O OBJETO NAVIGATOR	205
UTILIZANDO O OBJETO NAVIGATOR	205
PROPRIEDADES DO OBJETO NAVIGATOR	205
ACESSANDO CÓDIGO-FONTE A PARTIR DE UM LINK	207
UTILIZANDO COOKIES	209
Criando Cookies	210

ERROS EM TEMPO DE CARREGAMENTO (Load-Time)	220
ERROS EM TEMPO DE EXECUÇÃO (Run-Time)	221
ERROS DE LÓGICA (Logic Errors)	221
ERROS COMUNS EXISTENTES	2
ANALISANDO A ORIGEM DOS ERROS	223
OUTROS ERROS COMUNS	224
RESUMO GERAL DE OBJETOS JAVASCRIPT	225
RESUMO GERAL DE MÉTODOS JAVASCRIPT	228
MÉTODOS DO OBJETO DOCUMENT	228
MÉTODOS DO OBJETO FORM	228
MÉTODOS DO OBJETO DATE	229
MÉTODOS DO OBJETO HISTORY	231
MÉTODOS DO OBJETO MATH	231
MÉTODOS DO OBJETO STRING	232
MÉTODOS DE INTERFACE COM O USUÁRIO	234

Desenvolvida pela NETSCAPE, a linguagem JavaScript foi criada para trabalhar com aplicações interativas nas páginas HTML. Esta linguagem teve sua primeira versão desenvolvida para o browser Netscape Navigator 2.0 e em seguida, atribuído também ao Internet Explorer 3.0. A princípio, chamado de LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da Sun Microsystems, empresa que há longo tempo vem se dedicando ao desenvolvimento de aplicações para a Internet, como talvez a linguagem mais poderosa da rede, o Java, uma linguagem que requer um profundo conhecimento de programação e de seu kit de desenvolvimento, bem diferente do JavaScript que não necessita de tanto. Após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes “JavaScript”.

Conhecida também como uma extensão da linguagem HTML (Linguagem de Marcação de Hipertexto), os comandos JavaScript são embutidos nas páginas HTML e interpretados pelo Browser, ou seja, o JavaScript não possui nenhum procedimento de compilação.

Mesmo sendo uma extensão da linguagem HTML, o JavaScript é uma linguagem baseada na linguagem Java. Com isto, o JavaScript suporta a maior parte das sintaxes e comandos da linguagem Java. A linguagem Java é usada na criação de objetos e os chamados Applets (aplicativos que são executados em uma página da Internet). Já a linguagem JavaScript, é usada normalmente pelos programadores que fazem uso da linguagem HTML para controlar dinamicamente o comportamento de objetos nas páginas.

À única limitação da linguagem JavaScript é que ela suporta poucos tipos de dados, e implementa apenas alguns conceitos de orientação a objetos, ao contrário da linguagem Java.

Para não ficar com uma tecnologia terceirizada, a MICROSOFT desenvolveu uma linguagem de scripts similar ao JavaScript denominada VBScript. Uma extensão da conhecida linguagem Visual Basic. A NETSCAPE por sua vez, não implementou esta linguagem em seu Browser, impedindo-o qualquer script que seja desenvolvido na linguagem VBScript de ser executado em seu Browser.

Atualmente a versão utilizada do JavaScript é a 1.5 que é suportada pelo Netscape 6.0 e Internet Explorer 5.5, que contém todos os comandos da linguagem JavaScript.

Observe pela tabela a seguir, a relação das versões existentes do JavaScript e a sua aceitação pelos navegadores mais utilizados:

Versão do JAVASCRIPT: SUPORTADA PELO: 1.0 Netscape 2.0 / Explorer 3.0 1.1 Netscape 3.0 / Explorer 4.0 1.2 Netscape 4.0 e 4.5 / Explorer 4.0 1.3 Netscape 4.6 e 4.7 / Explorer 5.0 1.4 Internet Explorer 5 1.5 Netscape 6.0 / Explorer 5.5

A linguagem JavaScript assim como a linguagem HTML é submetida à uma norma internacional, o ECMA que originou a especificação ECMA-262, que determina o padrão para a linguagem JavaScript, também conhecida como ECMAScript.

É importante que o usuário evite usar comandos JavaScript que foram inseridos nas últimas versões, a não ser que o usuário saiba anteriormente qual o browser são executados. É claro que existem maneiras que garantem que um determinado comando do JavaScript só seja executado em determinado browser, facilitando ainda mais que suas páginas sejam compatíveis com diversas versões de browsers.

Os comandos mais utilizados dentro da linguagem JavaScript são os que fazem parte da sua primeira versão, já aqueles que fazem o tratamento de objetos irão variar de acordo com sua versão.

A NETSCAPE, possui um enorme guia para o JavaScript na Internet. Para ter acesso a este guia basta acessar o seguinte endereço:

Diferente da Linguagem HTML, a linguagem JavaScript corresponde a programação orientada a objetos, isto significa que todos os elementos de uma página da Web são tratados como objetos. Estes objetos são agrupados de acordo com seu tipo ou finalidade. Dentro da linguagem JavaScript, são criados automaticamente objetos que permitem que o usuário possa criar novos objetos de acordo com sua conveniência. Ao ser carregada uma página da Web, é criado um determinado número de objetos JavaScript, com propriedades e valores próprios que são ajustados pelo conteúdo da própria página. Todos eles seguem uma hierarquia que reflete toda a estrutura de uma página HMTL. A linguagem JavaScript pode ser utilizada para a criação de scripts tanto do lado cliente como do lado servidor. Seguindo a hierarquia de objetos da linguagem JavaScript, são criados os seguintes objetos ao ser carregada uma página:

window: O objecto mais acima na hierarquia, contém propriedades que se aplicam a toda a janela. Há também um objecto desta classe para todas as "sub-janelas" de um documento com frames location: Contém as propriedades da URL actual.

history: Contém as propriedades das URLs visitadas anteriormente.

document: Contém as propriedades do documento contido na janela, tais como o seu conteúdo, título, cores, etc

A linguagem JavaScript manipula vários tipos de objetos através do uso de suas propriedades e métodos. Estes objetos são representados por uma hierarquia, fazendo com que alguns objetos se tornem propriedades de outros, observe pelo exemplo da figura a seguir esta hierarquia formada:

Hierarquia dos Objetos do JavaScript

Conforme visto no organograma apresentado, observe que existem vários objetos e muitos deles pertencem à outros, sendo chamados então de propriedades. Veja pelo exemplo do objeto FORM que possui diversas propriedades, sendo este objeto também uma propriedade do objeto DOCUMENT.

BROWSER (navegador)

Math Date Window/

Frame Navigator

String

Document Form Link Anchor

Select Button

Submit

Text

TextArea Radio Checkbox

Cada objeto existente na manipulação do JavaScript possuem propriedades (características). Exemplo, sabemos que um documento HTML possuem título e corpo, estas características do documento podemos chamar de propriedades que existem neste documento.

Estas propriedades existem de dois tipos, algumas são os objetos propriamente ditos enquanto outras não. Um exemplo disto, é o objeto form (formulário) que é uma propriedade do objeto document (documento), conforme mostrado no organograma apresentado anteriormente. Já a propriedade de título da página (title), é pertencente ao objeto document não havendo nenhuma propriedade sobre ela. Concluindo, podemos dizer que a propriedade form do objeto document é um objeto-filho e o objeto document é o objeto-pai. Em geral, as propriedades podem conter valores (string, números, entre outros tipos). A utilização de propriedades se dá acompanhada de seu objeto sendo separados por um ponto apenas. Veja abaixo a sintaxe de utilização de propriedades:

nomeObjeto.propriedade

Além das propriedades, os objetos podem conter métodos que são funções pré-definidas pela linguagem JavaScript que irão executar determinada operação. Por exemplo dentro de um documento o usuário poderá utilizar o método de escrever neste documento para exibir um texto qualquer. Os métodos estarão sempre associados à algum objeto presente no documento e cada método faz parte de um objeto específico. Não tente usar métodos em objetos que não o utilizam, isto faz com que a linguagem JavaScript cause erro na execução do script. Na maioria das vezes os métodos são usados para alterar o valor de uma propriedade ou executar uma tarefa específica. Veja a sintaxe de utilização dos métodos:

nomeObjeto.método(argumento)

Na sintaxe apresentada, nomeObjeto faz referência ao objeto a ser utilizado e o qual sofrerá uma ação do método, já método é o nome de identificação do método usado e entre parênteses (argumento) é a expressão ou valor opcional que será usada para alterar sobre o objeto.

Em linguagens orientadas a objetos é comum a manipulação de eventos que é qualquer reação ou ação que executará determinado procedimento, normalmente ocorre por ato executado pelo usuário, como clicar em um botão, selecionar algum objeto e até mesmo pressionar alguma tecla. Resumindo EVENTOS são quaisquer ações iniciadas por parte do usuário.

Sua utilização se dá como atributos da linguagem HTML, ou seja dentro dos próprios Tag’s HTML. Sua sintaxe tem a seguinte formação:

<TAG nomeEvento="Instruções JavaScript">

Onde é apresentado TAG é uma instrução da linguagem HTML.

Onde é evento é o nome do evento gerado da linguagem JavaScript.

Onde “Instruções JavaScript” serão as instruções JavaScript à serem executadas. Elas estarão sempre entre aspas.

Caso haja mais de um comando JavaScript a ser executado para o mesmo evento estes deverão estar separados por ponto e vírgula (;), conforme mostrado no exemplo a seguir:

<TAG nomeEvento="JavaScript1;JavaScript2;JavaScript3"> blur onBlur

Ocorre quando o usuário retira o foco de um objeto de formulário.

change onChange

Ocorre quando o usuário muda o valor de um objeto de formulário.

click onClick Ocorre quando o usuário clica sobre o objeto.

focus onFocus Ocorre quando o usuário focaliza o objeto.

load onLoad Ocorre quando o usuário carrega a página.

unload onUnload Ocorre quando o usuário abandona a página.

mouseOver onMouseOver

Ocorre quando o ponteiro do mouse passa sobre um link ou âncora. Válidos apenas para hiperlinks.

select onSelect

Ocorre quando o usuário seleciona um elemento de um formulário.

submit onSubmit Ocorre quando o usuário envia um formulário.

mouseDown onMouseDown Ocorre quando o botão do mouse é pressionado.

mouseMove onMouseMove

Ocorre quando o ponteiro do mouse se movimenta sobre o objeto.

mouseOut onMouseOut

Ocorre quando o ponteiro do mouse afasta de um objeto. Válidos apenas para hiperlinks.

mouseUp onMouseUp Ocorre quando o botão do mouse é solto.

keyDown onKeyDown Ocorre quando uma tecla é segurada.

keyPress onKeyPress Ocorre quando uma tecla é pressionada.

keyUp onKeyUp Ocorre quando uma tecla é solta.

Vejamos a utilização dos eventos dentro de alguns TAG’s HTML, sem a necessidade de criarmos rotinas separadas para os mesmos. Vejamos o exemplo a seguir:

<TITLE>Manipuladores de Eventos</TITLE>

<BODY onLoad="defaultStatus=('Seja Bem Vindo!!!')">

No exemplo apresentado anteriormente, foi usado o evento onLoad que ocorre quando a página é carregada. Neste evendo foi usada a instrução defaultStatus que exibe a mensagem SEJA BEM VINDO!!! na barra de status do navegador. Outro exemplo que pode ser aplicado através de um evento, é utilizar o evento onUnLoad que executará alguma ação quando o usuário sair de sua página, baseado no exemplo anterior, inclua no corpo de sua página <BODY> a seguinte linha abaixo:

<BODY onLoad="defaultStatus=('Seja Bem Vindo!!!')" onUnLoad="alert('Obrigado pela Visita')">

Neste exemplo, o evento onUnLoad, faz com que se o usuário abandonar esta página seja entrando em outra, acessando hiperlinks ou até mesmo fechando o browser, é execute a instrução alert() que tem a função de exibir uma caixa de diálogo do Windows com a mensagem definida, permitindo ao usuário, pressionar o botão de OK para encerra-la.

O JavaScript pode ser diferente em alguns aspectos de outras linguagens, mas nem por isso não deixa de ser uma linguagem de programação, com isto veja os elementos existentes dentro da linguagem.

Assim como as propriedades que armazenam dados sobre os objetos, é possível com JavaScript a utilização das variáveis que têm a finalidade de armazenar temporariamente informações como textos, valores, datas, entre outros.

O conteúdo de uma variável pode ser simplesmente atribuído ou vir de um resultado de uma ação dada de uma expressão ou função. Veja alguns exemplos.

O nome de uma variável poderá iniciar-se com uma letra ou através do caractere “underscore” seguido de letras ou números. Outra semelhança do JavaScript com outras linguagens é a diferenciação de de letras minúsculas e maiúsculas. Veja alguns nomes válidos para variáveis:

nome _senac escola

Na linguagem JavaScript existem dois tipos de variáveis que são:

Para criar variáveis locais, é necessário que o usuário utilize a palavra-chave var. Veja a declaração de uma variável local:

var nome=“ADRIANO LIMA” var soma=2002-25

As variáveis definidas fora de uma função sempre estão disponíveis para todas as funções dentro do script que estão na mesma página. Estas variáveis são referenciadas como variáveis globais. As variáveis que são definidas dentro de função, também são globais, desde que não seja utilizado a instrução var em sua declaração.

Caso o usuário declare uma variável dentro de uma função através da instrução var, esta variável passa a ser apenas local, ou seja, são utilizadas apenas para aquela função onde foi declarada.

É bom saber que, as variáveis globais ficam na memória mesmo após a execução do script, estas variáveis somente são liberadas da memória quando o documento é descarregado.

As variáveis podem ser declaradas também separadas por vírgula, da seguinte maneira:

var nome, endereco, telefone; ou var nome; var endereco; var telefone;

Outro exemplo prático de atribuição, é atribuir um mesmo valor a mais de uma variável, da seguinte maneira:

var campo1 = campo2 = campo3 = 5

No exemplo anterior, foi atribuído o número 5 nas variáveis campo1, campo2 e campo3.

Veja pelo exemplo do código abaixo como manipular variáveis através da linguagem JavaScript:

<BODY> <script> valor=30 document.write("Resultado do cálculo ",(10*2)+valor) </script>

Neste exemplo foi definida a variável valor que armazena o valor 30 em seu conteúdo, em seguida, através do objeto document foi usado o método write que escreverá no corpo da página o texto Resultado do cálculo e em seguida o resultado da expressão (10*2)+valor que resultará em 50.

Caso tenha que executar outro cálculo abaixo do primeiro, utilize o tag HTML <BR> após o cálculo, separando-o com vírgula e entre aspas. Veja o exemplo abaixo:

O resultado iria apresentar os valores dos cálculos um abaixo do outro, veja agora o mesmo exemplo colocando o resultado em negrito através do tag HTML <B>.

lembre-se que estas instruções deverão estar entre as tag’s HTML <SCRIPT> e </SCRIPT>. No caso de querer utilizar alguma instrução HTML, atribua-as entre aspas como propriedade do método conforme exemplo mostrado anteriormente.

São representações de números ou strings, estas informações são fixas, bem diferente das variáveis, não podem ser alteradas. As variáveis são criadas na execução do programa, já os literais fazem parte do código-fonte. Veja abaixo alguns exemplos de literais:

52	Número inteiro.
2.1518	Número de ponto flutuante.

“Adriano Gomes Lima” Texto.

Existem vários tipos de literais, eis os existentes:

Representam números positivos, negativos ou fracionários. Exemplo:

Este literal também chamado de notação científica é representado da seguinte maneira:

2.34e4 O número 2.34 é multiplicado por dez à quarta potência, ou 2.34*10000.

Este tipo de literal representa valores lógicos que podem ser:

TRUE ou 1 FALSE ou 0

Este literal representa qualquer cadeia de caracteres envolvida por aspas ou apóstrofo. Veja abaixo alguns exemplos: “Adriano Lima”

Mesmo sendo número, as aspas fazem com que o literal seja uma string. CARACTERES ESPECIAIS

(Parte 1 de 3)