Apostila

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)