Apostila javaScript (3)

Apostila javaScript (3)

(Parte 1 de 3)

JavaScript – Aplicações Interativas para a Web

BELO HORIZONTE 2006

JAVA E JAVASCRIPT9
VBSCRIPT E JAVASCRIPT10
AS VERSÕES DO JAVASCRIPT10
COMPATIBILIDADE ENTRE BROWSER’S1
GUIA DE REFERÊNCIA NA INTERNET1
ORIENTAÇÃO A OBJETOS1
MANIPULAÇÃO DE OBJETO13
PROPRIEDADES DE OBJETOS14
MÉTODOS DE OBJETOS14
EVENTOS15
MANIPULADORES DE EVENTOS UTILIZADOS16
VARIÁVEIS19
NOMES DE VARIÁVEIS19
LITERAIS2
INTEIROS (INTEGER)23
PONTO FLUTUANTE23
BOOLEANOS23
LITERAIS STRING23
CARACTERES ESPECIAIS24
EXPRESSÕES24
OPERADORES25
OPERADORES DE INCREMENTO E DECREMENTO26
OPERADORES RELACIONAIS28
OPERADORES RELACIONAIS28
OPERADORES LÓGICOS28
OPERADOR DE CONCATENAÇÃO DE STRING29
DECLARAÇÕES30
OPERADOR NEW30
PALAVRA-CHAVE THIS30
VAR32
DESENVOLVIMENTO DE SCRIPTS3
DESENVOLVENDO SCRIPTS COM O TAG <SCRIPT>3
DESENVOLVENDO SCRIPTS ATRAVÉS DE UM ARQUIVO EXTERNO34
NOTIFICAÇÃO DE ERROS36
INSTRUÇÕES BÁSICAS38
MÉTODO DOCUMENT.WRITE()38
MÉTODO ALERT()39
MÉTODO CONFIRM()39
COMANDOS CONDICIONAIS E REPETIÇÃO41
INSTRUÇÃO WHILE41
INSTRUÇÃO FOR42
INSTRUÇÃO FOR...IN43
IFELSE ......................................................................................... 4
RETURN47
SWITCH48
INSTRUÇÃO WITH49
OBJETO ARGUMENTS54
UTILIZANDO EVENTOS56
EVENTO ONBLUR56
EVENTO ONCHANGE57
EVENTO ONCLICK57
EVENTO ONFOCUS57
EVENTO ONLOAD58
EVENTO ONUNLOAD58
EVENTO ONMOUSEOVER58
EVENTO ONMOUSEOUT59
EVENTO ONMOUSEDOWN60
EVENTO ONMOUSEUP60
EVENTO ONKEYUP60
EVENTO ONSELECT61
EVENTO ONSUBMIT61
FUNÇÕES DA LINGUAGEM JAVASCRIPT63
FUNÇÃO EVAL63
FUNÇÃO ISNAN64
FUNÇÃO PARSEFLOAT65
FUNÇÃO PARSEINT6
FUNÇÕES PRÉ-PROGRAMADAS68
IMPRESSÃO DA PÁGINA68
ADICIONAR AO FAVORITOS68
JANELA EM MOVIMENTO69
TEXTO NA BARRA DE STATUS EM MOVIMENTO70
TABELA DE CORES72
TEXTO EM MOVIMENTO EM UM CAMPO DE FORMULÁRIO73
OBJETOS PRÉ-CONSTRUÍDOS76
OBJETO DATE76
MÉTODOS DO OBJETO DATE7
OBJETO STRING78
PROPRIEDADES78
PROPRIEDADES DO OBJETO STRING78
MÉTODOS DO OBJETO STRING78
MÉTODO ANCHOR79
MÉTODO BIG79
MÉTODO SMALL80
MÉTODO BOLD80
MÉTODO ITALICS81
MÉTODO FIXED81
MÉTODO STRIKE82
MÉTODO SUB83
MÉTODO SUP83
MÉTODO charAT84
MÉTODO INDEXOF84
MÉTODO LASTINDEXOF85
MÉTODO LINK86
MÉTODO REPLACE86
MÉTODO SUBSTRING87
MÉTODO TOLOWERCASE8
MÉTODO TOUPPERCASE8
OBJETO IMAGE89
MÉTODOS DE INTERFACE COM O USUÁRIO92
MÉTODO ALERT92
MÉTODO CONFIRM93
MÉTODO PROMPT94
OBJETO WINDOW96
PROPRIEDADES DO OBJETO WINDOW/FRAME96
WINDOW.STATUS E DEFAULTSTATUS97
MÉTODO OPEN97
MÉTODO CLOSE98
MÉTODO SETTIMEOUT98
MÉTODO CLEARTIMEOUT100
TRABALHANDO COM JANELAS101
ABRINDO PÁGINAS EM FULLSCREEN (Tela Cheia)110
O OBJETO MATH1
PROPRIEDADES DE CÁLCULO DO OBJETO MATH1
MÉTODOS DO OBJETO MATH112
ABS112
ACOS112
COS114
EXP114
FLOOR114
LOG115
MAX115
POW (base,expoente)116
RANDOM116
ROUND117
SIN118
SQRT118
TAN118
OBJETO DATE119
MÉTODOS GET DO OBJETO DATE119
MÉTODO PARSE E UTC121
MÉTODOS SET DO OBJETO DATE122
MÉTODO TOGMTSCRING123
MÉTODO TOLOCALESTRING123
EXERCÍCIOS126
OBJETO DOCUMENT128
PROPRIEDADES DO OBJETO DOCUMENT128
MÉTODOS DO OBJETO DOCUMENT132
MÉTODO CLEAR132
MÉTODO CLOSE133
MÉTODO WRITE E WRITELN134
EXERCÍCIOS136
OBJETO LINK148
PROPRIEDADES DO OBJETO LINKS148
UTILIZANDO ARRAYS149
ARRAY ANCHORS[]153
MANIPULANDO FRAMES161
HIERARQUIA FRAMESET WINDOW163
OBJETO FORM170
PROPRIEDADES DO OBJETO FORMS170
MÉTODOS DO OBJETO FORM172
ELEMENTOS DE UM FORMULÁRIO172
OBJETO TEXT173
MANIPULADORES DE EVENTO PARA FORMULÁRIOS173
OBJETO PASSWORD176
OBJETO TEXTAREA176
OBJETO BUTTON177
OBJETO SUBMIT178
OBJETO RESET179
OBJETO CHECKBOX (Caixa de Verificação)179
MANIPULADORES DE EVENTO181
OBJETO RADIO182
EVITANDO O USO DA TECLA ENTER187
OBJETO LOCATION189
PROPRIEDADES DO OBJETO LOCATION190
EXERCÍCIOS192
UTILIZANDO O OBJETO HISTORY203
PROPRIEDADE203
MÉTODOS BACK E FORWARD203
UTILIZANDO O OBJETO NAVIGATOR205
UTILIZANDO O OBJETO NAVIGATOR205
PROPRIEDADES DO OBJETO NAVIGATOR205
ACESSANDO CÓDIGO-FONTE A PARTIR DE UM LINK207
UTILIZANDO COOKIES209
Criando Cookies210
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 EXISTENTES2
ANALISANDO A ORIGEM DOS ERROS223
OUTROS ERROS COMUNS224
RESUMO GERAL DE OBJETOS JAVASCRIPT225
RESUMO GERAL DE MÉTODOS JAVASCRIPT228
MÉTODOS DO OBJETO DOCUMENT228
MÉTODOS DO OBJETO FORM228
MÉTODOS DO OBJETO DATE229
MÉTODOS DO OBJETO HISTORY231
MÉTODOS DO OBJETO MATH231
MÉTODOS DO OBJETO STRING232
MÉTODOS DE INTERFACE COM O USUÁRIO234

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)

Comentários