Baixe Linguagem Javascript - Apostilas - Informática e outras Notas de estudo em PDF para Informática, somente na Docsity!
ÍndiceÍndice
- 1.) Introdução.........................................................................................................................
- 1.1) Considerações iniciais...........................................................................................
- 1.2) Variáveis.................................................................................................................
- 1.3) Operadores............................................................................................................
- 1.3.5) Operadores lógicos.............................................................................................
- Objetos...............................................................................................................................
- 2.1) Criando Objetos.....................................................................................................
- Comandos.......................................................................................................................
- 3.1) VAR......................................................................................................................
- 3.2) with.......................................................................................................................
- 3.3) Break....................................................................................................................
- 3.4) Continue...............................................................................................................
- 3.5) Funções................................................................................................................
- 3.6) Comentários.........................................................................................................
- 3.7) Estruturas de Controle.........................................................................................
- Funções internas.............................................................................................................
- Objetos JavaScript...........................................................................................................
- 5.1) Select ..................................................................................................................
- 5.2) Button ..................................................................................................................
- 5.3) Navigator .............................................................................................................
- 5.4) Form ....................................................................................................................
- 5.5) CheckBox ............................................................................................................
- 5.6) Document ............................................................................................................
- 5.7) Date .....................................................................................................................
- 5.8) History .................................................................................................................
- 5.9) Window ................................................................................................................
- 5.10) Reset .................................................................................................................
- 5.11) Link.....................................................................................................................
- 6.) Palavras reservadas ......................................................................................................
- 7.) Tabela de cores .............................................................................................................
- Referências......................................................................................................................
1.) Introdução
JavaScript é uma linguagem para auxilio na criação de Home-Pages, as funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML, possibilitando o incremento das funcionalidades do seu documento HTML com elementos interessantes. Sendo possivel: responder facilmente a eventos iniciados pelo usuário, incluir efeitos que tornem sua página dinâmica. Logo, podemos criar sofisticadas páginas com a ajuda desta linguagem.
Apesar dos nomes bem parecidos, Java não é o mesmo que JavaScript. Estas são duas técnicas diferentes de programação na Internet. Java é uma linguagem de programação. JavaScript é uma linguagem de hiper-texto. A diferença é que você realmente pode criar programas em Java. Mas muitas vezes você precisa apenas criar um efeito bonito sem ter que se incomodar com programação. A solução então é JavaScript pois é fácil de entender e usar.
Podemos dizer que JavaScript é mais uma extensão do HTML do que uma linguagem de programação propriamente dita. O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0, mas a versão para o "Mac" parece apresentar muitos bugs.
1.1) Considerações iniciais
Em documentos HTML, a utilização da linguagem JavaScript, se dá sob a forma de funções (applets), as quais são chamadas em determinadas situações ou em resposta a determinados eventos, estas funções podem estar localizadas em qualquer parte do código HTML, a única restrição é que devem começar com a declaração , por convenção costuma-se colocar todas as funções no início do documento (estre as TAGs e , isso para garantir que o código JavaScript seja carregado antes que o usuário interaja com a Home Page), ou seja, antes do .
Exemplo:
Exemplo
Esta linha está escrita em HTML
Se o browser não suportar JavaScript e não inserirmos o comentário HTML, o que apareceria na tela seria:
Esta é uma linha escrita em HTML document.write("Aqui já é JavaScript"); Voltamos para o HTML
Note que esse artifício não esconde completamente o código JavaScript, o que ele faz é prevenir que o código seja mostrado por browsers mais antigos, porém o usuário tem acesso a todas as informações do código fonte de sua Home Page (tanto HTML, quanto JavaScript).
1.2) Variáveis
Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações formais. Existem dois tipos de abrangência para as variáveis: “Global” - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadas em qualquer parte do programa. “Local” - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função onde foram criadas e precisa ser definida com a instrução Var. Com relação à nomenclatura, as variáveis devem começar por uma letra ou pelo caractere sublinhado “ _” , o restante da definição do nome pode conter qualquer letra ou número. É importante ressaltar que a variável “Código” é diferente da variável “código” , que por sua vez é diferente de “CODIGO” , sendo assim, muito cuidado quando for definir o nome das variáveis, utilize sempre um mesmo padrão. Existem três tipos de variáveis: Numéricas , Booleanas e Strings. Como já era de se esperar, as variáveis numéricas são assim chamadas, pois armazenam números, as Booleanas valores lógicos (True/False) e as Strings, seqüência de caracteres. As strings podem ser delimitadas por aspas simples ou duplas, a única restrição é que se a delimitação começar com as aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas. Podem ser incluídos dentro de uma string alguns caracteres especiais, a saber: \t - posiciona o texto a seguir, na próxima tabulação; \n - passa para outra linha; \f - form feed; \b - back space; \r - carrige return.
O JavaScript reconhece ainda um outro tipo de contudo em variáveis, que é o NULL. Na prática isso é utilizado para a manipulação de variáveis não inicializadas sem que ocorra um erro no seu programa. Quando uma variável possui o valor NULL , significa dizer que ela possui um valor desconhecido ou nulo. A representação literal para NULL é a string 'null' sem os delimitadores. Quando referenciado por uma função ou comando de tela, será assim que NULL será representado. Observe que NULL é uma palavra reservada.
Você pode trabalhar ainda com Arrays, mas para isso será necessário algum conhecimento sobre Programação Orientada a Objetos.
1.3) Operadores
Junto com funções e variáveis, operadores são blocos de construção de expressões. Um operador é semelhante a uma função no sentido de que executa uma operação específica e retorna um valor.
1.3.1) Operadores unários e binários
Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um operando apenas são denominados operadores ulnários, e os que requerem dois operandos são chamados de operadores binários.
1.3.2) Operador de String
Operador de concatenação ( + ) Exemplo: Nome1="José" Nome2="Silva" Nome = Nome1+" da "+Nome2 // O resultado é: "José da Silva"
1.3.3) Operadores Matemáticos
Adição ( + ) Exemplo: V01= V02= V=V01+V02 // resulta em: 7 Subtração ( - ) Exemplo: V01= V02= V=V01-V02 // resulta em: 3
1.3.4) Operadores relacionais
< Menor que > Maior que = = Igual != Diferente >= Maior ou igual <= Menor ou igual
1.3.5) Operadores lógicos
&& E lógico || Ou lógico
1.3.6) Operadores de atribuição
= Atribuir += Soma ou concatenação e atribuição: x+=5 // é o mesmo que: x=x+ -= Subtração e atribuição. x-=5 // é o mesmo que: x=x- = Multiplicação e atribuição. x=5 // é o mesmo que: x=x* /= Divisão e atribuição. x/=5 // é o mesmo que: x=x/ %= Módulo e atribuição. x%=5 // é o mesmo que: x=x%
2) Objetos
Quando compramos um televisor, recebemos um manual, que por mais simples que possa ser, traz sempre algumas especificações técnicas do aparelho. Por exemplo: Polegadas da tela, voltagem de trabalho, entre outras. Essas especificações técnicas transferido para o vocabulário da OOP são as propriedades do objeto (televisor). Em JavaScript essas propriedades nada mais são do que variáveis internas do objeto.
Um objeto está sujeito a determinados métodos. Um método geralmente é uma função que gera alguma informação referente ao objeto. Por exemplo ao mudar de canal, nós estamos executando uma função do televisor, o mesmo ocorre quando aumentamos ou diminuímos o volume.
Seguindo nosso exemplo, quando a tensão da rede sai da faixa de trabalho no caso de uma queda de tensão ou uma sobrecarga, o sistema de segurança da Tv, não permite que ocorram danos no aparelho, quando muito, queima o fusível da fonte de alimentação. Em aparelhos mais modernos, quando uma emissora sai do ar, a tela fica azul, sem aquele chiado irritante. Sendo assim podemos concluir que nosso objeto está sujeito a algumas situações, estas situações podem ocorrer a qualquer momento, e são chamadas de eventos.
2.1) Criando Objetos
Trabalhar com objetos é a única forma de manipular os arrays, vejamos como: Digamos que queremos implementar uma lista de clientes, nosso objeto poderia ser definido assim:
Function CriaClientes(nome,endereco,telefone,renda) { this.nome=nome; this.endereco=endereco; this.telefone=telefone; this.renda=renda; }
A propriedade “this” especifica o objeto atual como sendo fonte dos valores passados a função. Agora, basta criar o nosso objeto: Maria = New CriaClientes('Maria Aparecida','Rua Guilhotina dos Patos, S/N','332-1148',1300) Para acessar as propriedades do objeto Maria, basta usar a seguinte sintaxe: Maria.nome - retorna 'Maria Aparecida' Maria.endereco - retorna 'Rua Guilhotina dos Patos, S/N' Maria.telefone - retorna '332-1148'
3) Comandos
Além das estruturas de controle, o JavaScript oferece alguns poucos comandos: Break Continue Var With Function Return Comment
3.1) VAR
Em JavaScript, nem sempre é necessário definir uma variável antes de utilizá-la, é o que ocorre com variáveis globais, porém, é importante ressaltar que a utilização da instrução “var” , a nível de documentação é muito bem-vinda. Já nas definições de variáveis locais, é obrigatório a utilização da instrução var.
Você pode armazenar um valor na própria linha de definição da variável, se não o fizer, para o JavaScript, esta variável possui um valor desconhecido ou nulo.
Não é obrigatória a utilização de uma instrução “var” para cada variável declarada, na medida do possível, você pode declarar várias variáveis em uma só instrução var.
Var NomeDaVariável [ = ];
Var Contador = 0; Var Inic="",Tolls=0,Name="TWR"; Var Teste; // Neste caso, Teste possui valor null
3.2) with
Quando você precisa manipular várias propriedades de um mesmo objeto, provavelmente prefere não ser obrigado a repetir todas as vezes a digitação do nome do objeto. A instrução “with” , permite fazer isso eliminando a necessidade de digitar o nome do objeto todas as vezes.
Forma geral: with () { ... Instruções } Por exemplo vamos supor que será necessário executar uma série de operações matemáticas:
with (Math) { a=PI; b=Abs(x); c=E; }
3.3) Break
Pode ser executado somente dentro de loops “for” ... ou “while” ... e tem por objetivo o cancelamento da execução do loop sem que haja verificação na condição de saída do loop, passando a execução a linha imediatamente posterior ao término do loop.
Forma geral: Break
Exemplo: Neste exemplo, quando a variável x atinge o valor 5 o loop é cancelado, e é impresso o número 5 na tela. For (var x=1 ; x < 10 ; x++) { If (x = = 5) { Break } }
...
...
! "$#&%' (#)*)+ ,.-(/ 01- 2 $43 )5,76 84,95/$:);5;6 6 , #$/<)5,=>. ?/$ @BA0/$ C"$#7 " # !#.6 ,DE$ 8$F,-;G 8,.) 8H
3.6) Comentários
Comentários podem ser formulados de varias maneiras, dependendo do efeito que você precisa. Para comentários longos de várias linhas, ou blocos de comentários, use: _/_* O barra-asterisco inicia um bloco de comentário que pode conter quantas linhas você precisar todo o texto após o barra asterisco é ignorado, até que asterisco-barra seja encontrado, terminando assim o bloco de comentário _/_*
Para comentários de uma linha, use barra dupla ( // ) para introduzir o comentário. Todo o texto seguindo este simbolo até o próximo carrige-return será considerado um comentário e ignorado para fins de processamento. Exemplo: // este texto será tratado como comentário
Os códigos JavaScript podem ser colocados em campos de comentário de modo que browsers antigos não mostrem o próprio código JavaScript, como vemos a seguir:
// end hiding contents -->
...
...
3.7) Estruturas de Controle
Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execução de um programa. Estas estruturas permitem executar o código baseado em condições lógicas ou um número determinado de vezes.
For... For...In If...Else... While...
3.7.1) For...
Repete uma seção do código um determinado número de vezes. Consiste de uma declaração que define as condições da estrutura e marca seu início. Esta declaração é seguida por uma ou mais declarações executáveis, que representam o corpo da estrutura. Estabelece um contador inicializando uma variável com um valor numérico. O contador é manipulado através da __ especificada no comando toda a vez que o loop alcança seu fim, permanecendo nesse loop até que a __ seja satisfeita ou a instrução Break seja executada.
Forma geral: For ( ; ; ) { Corpo da Estrutura }
No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois a variável contador é inicializada com o valor 1 e o bloco de instruções será executado enquanto contador for menor que 11. A cada execução do bloco de instruções contador é incrementado. For (var contador = 1; contador < 11; contador++) { document.write(Contador); }
VariavelDeRetorno= (anos>=16)? 'Já pode votar!' : 'Ainda é muito cedo para votar...'
3.7.5) While
Outro tipo de loop é aquele baseado numa condição ao invés de no número de repetições. Por exemplo, suponha que você necessita que um determinado processo seja repetido até que um determinado teste dê um resultado verdadeiro ou seja executada a instrução Break.
Forma geral: while () { Corpo da Estrutura }
No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois a variável Contador é inicializada com o valor 1 e o bloco de instruções será executado enquanto Contador for menor que 11. A cada execução do bloco de instruções Contador é incrementado. Var Contador=1; While ( Contador < 11 ) { document.write(Contador++) ;}
4) Funções internas
A linguagem JavaScript além dos recursos descritos anteriormente, ainda possui algumas funçòes internas, que não estão ligadas diretamente a nenhum objeto, porém isso não impede que essas funções recebam objetos como parâmetros. A seguir estas funções serão vistas detalhadamente:
alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK. Ex: alert('Esta é uma janela de alerta!')
confirm - Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e Cancel. Retorna um valor verdadeiro se o usuário escolher OK. Ex: retorno=confirm('Deseja prosseguir?')
escape - Obtém o código ASCII de um caracter que não seja alfa-numérico. Ex: document.write(escape("@"))
eval - Avalia uma expressão numérica, retornando um resultado também numérico. Ex: document.write(eval(1098765432))
parseFloat - Converte uma string que representa um número, para um número com ponto flutuante. Caso a string não possa ser avaliada, a função retorna 0. Ex: document.write(parseFloat("-32.465e12")
parseInt - Converte uma string , que representa um número em uma base predefinida para base 10. Caso a string possua um caracter que não possa ser convertido, a operação para, retornando o valor antes do erro. Ex: paseInt("string",base) parseInt("FF",15) // retorna 256 parseInt("3A",10) // retorna 3 parseInt("10",2) // retorna 2
5) Objetos JavaScript
JavaScript organiza todos os elementos de uma Home Page dentro de uma hierarquia. Cada elemento é visto como um objeto. Os objetos podem ter propriedades, métodos e responder a certos eventos. Por isso é muito importante entender a hierarquia dos objetos HTML. Você entenderá rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte é uma página HTML simples:
No exemplo acima, nós temos, um link , duas imagens, e um formulário com dois campos texto e dois botões. Do ponto de vista do JavaScript a janela do browser é um objeto window , que contém certos elementos, como a barra de status.
Dentro da janela, nós podemos carregar uma página HTML. Esta página é um objeto document. Desta forma o objeto document representa o documento HTML (que está carregado no momento). O objeto document é muito importante, em JavaScript você sempre o usará muito. As propriedades e métodos do objeto document serão vistas detalhadamente, mais adiante.
Mas o que é mais importante é que todos os objetos HTML são propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulário.
Nós podemos obter informações de diversos objetos e então manipulá-los. Para isso nós devemos saber como acessar os diferentes objetos. Você primeiro verifica o nome do objeto no diagrama de hierarquia. Se você então precisar saber como referenciar a primeira imagem na página HTML , basta seguir o caminho hierárquico. Você deve percorrer o diagrama de cima para baixo, o primeiro objeto é chamado document , a primeira imagem é representada por Imagem[0]. Desta forma nós podemos acessar este objeto em JavaScript, da seguinte forma: document.Imagem[0].
Se você quiser saber o que o usuário digitou dentro do primeiro elemento do formulário, você primeiro precisa pensar em como acessar esse objeto. Novamente nós seguiremos o diagrama de hierarquia, de cima para baixo. Siga o caminho que leva até Elem[0]. Todos os nomes de objeto por onde você passou tem que constar na referência ao primeiro elemento do formulário. Desta forma você pode acessar o primeiro elemento texto assim: document.Form[0].Elem[0]
Mas como obteremos agora, o texto digitado? Este elemento texto possui uma propriedade chamada value - não se preocupe agora, com propriedades, métodos ou eventos, eles serão vistos detalhadamente mais adiante - esta propriedade armazena o conteúdo do objeto, ou seja, o texto digitado. A seguinte linha de código obtém o texto digitado:
nome = document.forms[0].elements[0].value;
A string é armazenada na variável name. Nós podemos agora trabalhar com esta variável. Por exemplo, nós podemos criar uma janela popup com alert("Oi "+name);. Se a entrada for "Anderson" o comando alert("Oi "+name) abrirá uma janela popup com o texto "Oi Anderson".
Se você estiver trabalhando com páginas muito grandes pode ficar um pouco confuso referenciar objetos diretamente pelo endereçamento do diagrama de hierarquia, você pode ter referências do tipo: document.forms[3].elements[15] ou document.forms[2].elevent[21]. Para evitar esse problema você pode dar nomes diferentes aos objetos, vejamos o seguinte fragmento de um documento HTML :
Nome: ... Dessa forma, em vez de usarmos, por exemplo: document.forms[0].elements[0].value; Podemos usar:
document.clientes.empresa.value;
