Baixe Javascript - e outras Notas de estudo em PDF para Informática, somente na Docsity!
Javascript
Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga de processamento é o navegador)e é utilizada para criar pequenos programas que realizam ações em páginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem do lado cliente mais utilizada.Com Javascript podemos criar páginas mais "inteligentes", inserindo efeitos especiais e recursos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de um formulário está correto, dentre outras interatividades com o usuário.
Centro de Difusão de Tecnologia e Conhecimento
EliphasS
2010
Sumário
Lição 1 - Introdução e História
Nesta lição será feita uma breve introdução ao Javascript e mostradas algumas diferenças básicas entre Java e Javascript.
História do Javascript
No começo da Internet foram criados vários serviços para realizar muitos tipos de comunicações, como correio eletrônico, chats, buscas, etc. Mas era demandada uma linguagem que permitisse apresentar informações junto à formatação de estilos que funcionasse como um sistema de página com links. Em curto prazo, o HTML foi a linguagem que atendeu à essa necessidade. Porém, logo se percebeu que ele havia se tornado obsoleto para definir as novas funcionalidades, não era suficiente para fazer tudo o que era possível nas páginas web.
Entre as primeiras tecnologias que surgiram a partir daí podemos destacar o Java. Surgiu, basicamente, através do uso de Applets, que são pequenos programas que se incorporam às páginas web e que realizam as ações relacionadas aos programas de fins gerais. Após compatibilizar seus navegadores com a mais nova criação, os applets, a Netscape passou a desenvolver uma linguagem que fosse mais simples de utilizar que o Java. Passou a desenvolver então o o "primeiro Javascript" que levou o nome de LiveScript. Porém, foi um nome que não perdurou por muito tempo já que, antes do lançamento de sua primeira versão, uma parceria com a Sun Microsystems permitiu o desenvolvimento conjunto dessa tecnologia que passou a ser conhecida como "Javascript".
O que é Javascript?
Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga de processamento é o navegador) e é utilizada para criar pequenos programas que realizam ações em páginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem do lado cliente mais utilizada.
Com Javascript podemos criar páginas mais "inteligentes", inserindo efeitos especiais e recursos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de um formulário está correto, dentre outras interatividades com o usuário. Como já foi dito, o responsável por interpretar e conseqüentemente executar essas instruções Javascript é o browser, que é, portanto, o maior (para não dizer o único) com que esta linguagem conta.
Algumas linguagens de programação para web são muito complexas, mas as linguagens de script são geralmente simples por possuírem sintaxes fáceis de entender, além de permitirem a combinação de script com HTML para deixar as páginas Web interativas. Outra facilidade do Javascript é que ela é uma linguagem interpretada e não compilada. O que acontece é que navegador executa cada linha de script como as recebe. Por este motivo é importante saber que a sintaxe Javascript é case sensitive^1 , sendo necessária atenção na escrita dos comandos. Caso contrário o Javascript interpretará, por exemplo, o que seria um comando como sendo o nome de uma variável. Coisas como essas são o que diferem Javascript de outras linguagens de
(^1) Sensível ao tipo de letras, que diferencia maiúsculas de minúsculas.
programação em que os códigos devem ser compilados ou traduzidos em código de máquina antes de serem executados.
Diferenças Básicas entre Java e Javascript
Uma das maiores confusões que acontecem quando se fala em Javascript é a inevitável comparação com a linguagem de programação "Java". É importante frisar, contudo, que Javascript não tem relação com a linguagem Java.. Estas são duas técnicas diferentes de programação e, portanto, não guardam entre si mais relação que a sintaxe e poucas coisas mais. Java é uma linguagem de programação. Javascript é basicamente uma linguagem de hipertexto. É útil, pois muitas vezes precisa-se, por exemplo, utilizar algum recurso que torne a página mais dinâmica e mais bonita, sem ter de se incomodar com a programação. É útil também porque é bastante simples e foi projetada para fazer as coisas com rapidez.
Listo aqui algumas diferenças entre Javascript e Java:
- A programação Java requer um kit de desenvolvimento e um compilador. Entretanto, Javascript não é uma linguagem que necessite que seus programas se compilem. Estes são interpretados pelo navegador quando ele lê a página;
- Java é uma linguagem de programação fortemente “tipada”, ou seja, ao declarar uma variável é necessária a indicação de seu tipo e, então, não é permitida a mudança de seu tipo automaticamente. Por sua vez, Javascript não tem esta característica, e pode- se alocar em uma variável a informação que se deseja, independentemente de seu tipo. Ademais, pode-se mudar o tipo de informação de uma variável quando for necessário;
- Java é muito mais potente que Javascript, pois Java é uma linguagem de propósito geral, com a qual se pode fazer aplicações para variadas funções. Javascript, entretanto, permite somente a escrita de programas que sejam posteriormente executados em páginas web;
- Mini-aplicativos Java são compilados em arquivos de classe para serem utilizados em uma página da web. JavaScript, porém, utiliza comandos simples de texto, que podem ser incluídos no próprio documento de HTML;
- Mini-aplicativos Java geralmente são exibidos em uma caixa dentro do documento de Web. Já scripts de JavaScript podem afetar qualquer parte do próprio documento da Web.
Apesar de diferentes e úteis para diferentes coisas, as duas linguagens podem até ser utilizadas em conjunto para combinar suas vantagens.
Javascript é uma linguagem que roda no lado cliente,
utilizada para criar pequenos programas que realizam
ações em páginas web. É bastante simples e foi
projetada para fazer as coisas com rapidez.
Lição 2 - Sintaxe e Variáveis
Nesta lição iniciaremos o aprendizado, vendo primeiramente a sintaxe e após isso as variáveis em Javascript.
Necessário para programar em Javascript
Para programar em Javascript necessitamos basicamente o mesmo que para programar páginas web com HTML. Um editor de textos e um navegador compatível com Javascript. Porém, apesar de um editor de texto simples ser suficiente para começar, talvez seja muito útil contar com outros programas que nos oferecem melhores prestações na hora de escrever as linhas de código. Estes editores avançados têm algumas vantagens, como colorir os códigos de nossos scripts, nos permitem trabalhar com vários documentos simultaneamente, têm ajudas, etc. Fica a critério de cada um a utilização de seu editor.
Iniciando
Em primeiro lugar devemos ter em mente que o código Javascript deve ser inserido dentro do código HTML. Isto, na prática, faz que se misturem na página as duas linguagens de programação. Para isso, é necessário o uso de delimitadores do código de script, que no caso é:
__
Em uma mesma página podemos introduzir vários scripts, cada um que poderia se introduzir dentro das etiquetas
Case Sensitive
Como já foi dito, Javascript é uma linguagem case sensitive , ou seja, devem-se respeitar as maiúsculas e as minúsculas. Se nos equivocarmos ao utilizá-las o navegador responderá com uma mensagem de erro de sintaxe. Por convenção, os nomes se escrevem em minúsculas, salvo que se utilize um nome com mais de uma palavra, pois nesse caso se escreverão com maiúsculas as iniciais das palavras seguintes à primeira.
OBS.: Podemos utilizar maiúsculas nas iniciais das primeiras palavras em alguns casos como os nomes das classes, apesar de que já veremos mais adiante quais são estes casos.
Separação de Instruções
As duas maneiras que existem de separar instruções em Javascript são a separação por ponto- e-vírgula, no caso em que as duas instruções se encontram na mesma linha, e a separação por quebra-de-linha, onde não precisamos usar o ponto-e-vírgula se separarmos as instruções em mais de uma linha.
Contudo é interessante que nos acostumemos a utilizar sempre o ponto-e-vírgula para separar as sentenças já que a maioria das linguagens hoje em dia tem essa regra como obrigatória. Dessa maneira estaremos habituados a realizar uma sintaxe parecida com a da maioria da das programações avançadas.
Variáveis
Uma variável é um espaço em memória onde se armazena um dado, um espaço onde podemos salvar qualquer tipo de informação que necessitemos para realizar as ações de nossos programas. 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.
Exemplo:
__
Local
Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função onde foram criadas e precisam ser definidas com a instrução Var.
Exemplo:
alert ("Cuidado com o uso de " ou ' em uma string").
Lição 3 - Strings e Mensagens
Nesta lição falaremos sobre as strings e as mensagens, além de algumas maneiras de armazenar dados do usuário em variáveis.
As Strings
Podemos incluir dentro de uma string alguns caracteres especiais, a saber:
CONTROLES ESPECIAIS SIGNIFICADO \b Retroceder espaço \f Avance página \n Passa para a próxima linha \r Return \t Posiciona o texto na próxima tabulação // Linha de comentário /* ... */ Bloco de comentário Tabela 1 Caracteres especiais de Strings
Exemplo de uso:
document.write("isto é uma\n frase");
que retorna:
isto é uma frase
Concatenação
Para concatenar duas strings em javascript simplesmente usamos o operador (+).
Exemplo:
Frase1= "Isso é um teste!"; Frase2= "É um teste mesmo"; Valor= Frase1+Frase2; document.write(Valor);
o que retorna:
Isso é um teste!É um teste mesmo
Métodos de String de Equivalência
Outros métodos String:
MÉTODO FUNÇÃO anchor() Cria uma âncora na página HTML, que se refere à stringObject. Equivale à tag stringObject. big() Mostra stringObject com tamanho grande. Equivale à tag __. blink() Mostra stringObject piscando na tela. Equivale à tag __. bold() Mostra stringObject em negrito. Equivale à tag . fixed() Mostra stringObject com fonte de tamanho fixo. Equivale a tag __. fontcolor(“#RGB”) Determina a cor que stringObject será mostrada. Equivale à tag __. fontsize(x) Mostra stringObject no tamanho definido por x. Equivale à tag ****. italics() Mostra stringObject no formato itálico. Equivale à tag . link(destino) Cria um link, onde stringObject é o texto que aparece em destaque e destino é o endereço a ser acessado. Equivale à tag stringObject. small() Mostra stringObject em fonte pequena. Equivale à tag . strike() Mostra stringObject com um traço no meio. Equivale à tag . sub() Mostra stringObject no formato subscript. Equivale à tag . sup() Mostra stringObject no formato sobrescrito. Equivale à tag . Tabela 3 Métodos de String de Equivalência
Alguns exemplos de uso dos métodos:
__
O JavaScript reconhece ainda um outro tipo de conteúdo 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, o null não é igual a nada, nem mesmo ao próprio null. A representação literal para NULL é a string null. Quando referenciado por uma função ou comando de tela, será assim que NULL será representado.
Pode-se perceber, dadas as informações acima, que null é uma palavra reservada do JavaScript.
Conversão entre os tipos de dados.
Em algumas situações, podemos terminar com uma string contendo um número e precisar convertê-la em uma variável numérica regular. O JavaScript possui funções específicas para isso:
parseInt(): converte uma string em um número inteiro;
parseFloat() : converte uma string em um número de ponto flutuante.
Exemplo:
varstring= “30 bebidas” numvar= parseInt(varstring);
No caso do exemplo anterior o valor armazenado em varnum será 30 , pois a parte não numérica é desconsiderada na passagem para numérico. Se um número válido não for localizado, a expressão retorna a string NaN ( Not A Number ).
Mensagens
Existem três maneiras de comunicação com o usuário no Javascript. Eis aqui cada uma e sua explicação:
Alert
O alert é usado para imprimir informação ao usuário por meio de uma caixa de alerta no browser.
Exemplo:
__
Confirm
O confirm é uma mensagem que retorna caixa de diálogo com confirmação de OK ou Cancelar. Retorna um booleano. No caso, é verdadeiro se o usuário clicar em OK.
Exempo:
_ Vemos abaixo como ficaria isto no código completo:
_
Mensagem rolando na tela
Mensagem rolando na tela Preste atenção à linha de status rolando na página!
_
OBS.: O Script acima só é exibido corretamente no navegador Internet Explorer.
Armazenando dados do usuário em variáveis
Em certas ocasiões é necessário o armazenamento dos dados inseridos pelo usuário para uso na própria página. Para isso, utilizaremos a função 'prompt'. Ela é semelhante à função 'alert' mas é usada para dados de entrada do usuário. Por exemplo:
titulo=prompt("digite o título da pagina"); nome=prompt("digite seu nome:");
A partir disso podemos utilizar o conteúdo das variáveis para personalizar o documento HTML.
document.write(“”+ titulo+””); document.write(“ Criada por“+nome+””);
Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. O exemplo abaixo mostra o documento final de HTML. Após isso, e só carregar o documento em um browser e ver o resultado.
_
construcao de pagina
_document.write(“”+ titulo+””); document.write(“ Criada por ”+nome+“”);
Página em construção.
_
Neste caso, a string Frase mantém o 'isto é um vetor'. O método split na segunda instrução divide a string nome em cada espaço, resultado em quatro strings. Estas são armazenadas em um array de strings chamado Vetor. Depois que as instruções de exemplo executam, os elementos de partes contêm o seguinte :
vetor[0]="isto"; vetor[1]="é"; vetor[2]="um"; vetor[3]="vetor";
O Javascript também inclui um método de array, join, que desempenha a função oposta. Esta instrução remonta o array Vetor em uma string:
JuntaVetor=Vetor.join(“ “);
O valor nos parenteses especifica um caractere para separar as partes do array. Nesse caso, um espaço é utilizado, resultando na string final 'isto é um vetor'. Se você não especificar um caractere de separação, as vírgulas são utilizadas por padrão.
Mais sobre vetores
No caso do Javascript podemos colocar num vetor tipos de dados diferentes para cada posição:
vetor[0]="ola"; vetor[1]=15; vetor[2]=false; vetor[3]=0.547;
Para outros propósitos, podemos trabalhar com vetores de uma maneira diferente. Podemos primeiramente criar uma função com vários parâmetros desta maneira:
function Registro(nome,endereco,telefone){ this.nome=nome; this.endereco=endereco; this.telefone=telefone; }
OBS.: O this especifica o objeto atual como sendo fonte dos valores passados à função. Além disso, para acessar a uma propriedade de um objeto há que utilizar o operador ponto.
A partir daí somente criamos o objeto:
Ana = new Registro('Ana Luiza','Rua tal','3333-3333');
E o referenciamos assim:
Ana.nome; //retorna 'Ana Luiza' Ana.enderec;o // retorna 'Rua tal' Ana.telefone; //retorna '3333-3333'
Ou:
Ana[0], Ana[1], Ana[2];
Outra maneira, portanto, de trabalhar com os vetores é criá-los e referenciar suas posições usando o atributo length , que retorna o número de campos do array:
_function Vetor(x){ this.length=x; for (var i=0 ; i
