Baixe Linguagem JavaScript Introdução Originalmente, JavaScript chamava-s e outras Notas de estudo em PDF para Informática, somente na Docsity!
Página 1 de 20
Linguagem JavaScript
Introdução
Originalmente, JavaScript chamava-se LiveScript. JavaScript é uma linguagem de script de programação, interpretada (não é compilada) pelos navegadores (browsers). JavaScript não descende e não tem relação com Java. JavaScript foi criada pela Netscape em 1995 e Java é um produto da Sun Microsystems. Os códigos escritos em JavaScript podem ser embutidos em código HTML e são executados no cliente. Assim, afirmamos que JavaScript é uma linguagem do tipo client-side. JavaScript é uma linguagem case-sensitiva (Case-Sensitivity). Nomes para gerenciadores de eventos como onclick, precisam ser escritos em letras minúsculas em JavaScript, ainda que possa ser escrito como OnClick em HTML, já que HTML não é case-sensitive. JavaScript é uma linguagem com tipagem dinâmica (os tipos de variáveis não precisam ser definidos no início do programa). Como JavaScript podemos criar programas orientados a objetos.
Estrutura Básica de um Programa JavaScript
Um programa JavaScript deve ser escrito dentro dos tags que geralmente são escritos entre os tags
e . Podem ser escritos também na seção de corpo (). As tags podem aparecer mais de uma vez em diferentes seções, se necessário. A propriedade type do exemplo abaixo é opcional.
Página teste ...
Você pode especificar a versão da linguagem JavaScript assim (isto é opcional):
dentro do arquivo “.js”. Além de ajudar a organizar documentos, essa prática permite o reaproveitamento de código em páginas distintas de seu site.
Existe uma outra maneira de se ter um JavaScript em uma página dentro do corpo do HTML. Observe no exemplo a seguir que não existem os tags . O código está inserido no evento onClick. Mais adiante nesta apostila, veremos um pouco mais sobre eventos.
Página teste
Página 2 de 20
Comentários
Os comentários JavaScript são como os comentários usados nas linguagens C, Java, PHP. Use // para comentar uma única linha e o par /* … */ para comentários que possuem uma linha ou mais de comprimento. Veja o exemplo:
// este é um comentário var x = 1; /* este é outro comentário */
Declaração de Variáveis
O ponto-e-vírgula, que encerra uma linha de código, em JavaScript é opcional. Porém, se você colocar mais do que uma declaração em uma única linha, os pontos-e-vírgulas são exigidos. Logo, por uma questão de clareza em seus códigos, use sempre ponto-e-vírgula. Você pode usar uma variável sem primeiro declará-la. No entanto, sugiro que você declare sempre suas variáveis como boa prática de programação. Os tipos de dados possíveis são: números, strings, booleanos e nulos. Para criar uma variável, utilize a palavra reservada var ( é possível declarar variáveis sem a instrução var, declaração essa denominadaimplícita ). Veja a seguir alguns exemplos de definição de variáveis.
var x; var numero = 5; var nome = "Sandro"; var valido = true; var cidade, estado;
Você pode declarar uma variável e inicializá-la quando a primeira ocorrência da variável estiver em uma estrutura for(esta estrutura será estudada nas próximas páginas) , por exemplo:
for (var i = 0; i < 10; i++)
Os dados booleanos podem receber apenas dois valores: true ou false. Os dados nulos são representados pela palavra-chave null. Caso uma variável esteja indefinida, ela recebe o valor null.
Nota: para declarar constantes, apenas troque var por const.
Além das variáveis escalares (que armazenam um único valor por vez), podemos criar vetores ou matrizes (estruturas de dados compostas uni ou multidimensionais). Para isso, utilizamos a palavra Array. Por exemplo, as duas linhas a seguir definem dois vetores, um vazio e outro com cinco elementos predefinidos.
var vetor_x = new Array; var vetor_y = new Array(1, 2, 3, 4, 5);
Veja outra maneira de manipularmos uma variável como se fosse um array:
var disciplinas; disciplinas[2] = "Matemática"; disciplinas[5] = "Português";
Para obter a quantidade de elementos de um array, usamos o atributo length , assim:
var vetor_numeros = new Array(1, 2, 3, 4, 5); document.write("O array possui " + vetor_numeros.length + " elementos");
Podemos ainda utilizar os atributos sort (classifica os elementos) e join (retorna todos os elementos).
var vetor_nomes = new Array("Ana", "Luiza", "Isabella"); document.write("Elementos do array: " + vetor_nomes.join() + " "); document.write("Array ordenado: " + vetor_nomes.sort());
Página 4 de 20
Operadores Lógicos
Da mesma forma que os operadores aritméticos e relacionais, os operadores lógicos também são os mesmos utilizados, por exemplo, na já estudada Linguagem C. São eles: && (operador .e.), | | (operador .ou.) e o operador de negação “!”.
Concatenação de Strings
O operador é representado pelo sinal +. Veja o exemplo a seguir:
Estrutura Condicional
A conhecida instrução “if” (se) é bastante utilizada na programação e permite avaliar expressões. Como observação, coloque as expressões lógicas sempre dentro de parênteses, como na Linguagem C. O exemplo a seguir apresenta uma estrutura condicional composta (então e senão). É bom lembrar que muita gente afirma que “else” é uma instrução ou um comando quando o correto é dizer que “else” constitui apenas de uma cláusula da instrução “if”.
O próximo exemplo ilustra uma estrutura condicional composta intercalada:
Página 5 de 20
Estrutura Switch
O switch pode ser utilizado quando da existência de vários “ifs” aninhados. Veja o exemplo:
Estrutura de Repetição While (lê-se: uáil)
Esse loop fica em execução enquanto a condição for verdadeira. O script a seguir escreve, na área de trabalho do navegador, todos os números inteiros de 1 até 100.
Existe ainda a estrutura do...while, que, embora seja semelhante ao while, avalia a expressão somente no fim do laço. O script a seguir escreve, na área de trabalho do navegador, todos os números inteiros de 1 até 100.
Estrutura de Repetição For
Para entender a estrutura for, vamos a mais um exemplo:
Página 7 de 20
O documento HTML acima mostra um botão no navegador e, assim que o usuário clicar no botão, um evento chamado “onClick” será disparado e chamará a função Mensagem que mostrará uma janela com a mensagem “Você clicou no botão” utilizando a função pré-definida “alert” do JavaScript. Uma sub-rotina em JavaScript pode retornar valores, bem como nas demais linguagens de programação.
Vamos a um novo exemplo:
Página teste
Vamos a um exemplo que ilustra a parametrização (passagem de parâmetros) por valor:
Página teste
Podemos enviar parâmetros a uma função utilizando parâmetros anônimos, os quais ficam disponíveis ao programador através do array arguments. Veja o exemplo seguinte:
Página 8 de 20
Existe ainda a forma de definir uma função em JavaScript por meio do uso de variáveis, ou seja, atribui-se uma função anônima a uma variável, que irá se comportar como uma função. A sintaxe é a seguinte:
var função = new Function(<parâmetros1..N>, código_da_função)
Exemplo:
As funções pré-definidas da Linguagem JavaScript a seguir são muito usadas.
parseInt
Transforma uma string em um número inteiro. Veja o exemplo:
var x = "23.45"; var y = parseInt(x) + 20; document.write(y);
O exemplo acima mostrará o resultado 43.45. Experimente substituir a função parseInt acima por parseFloat.
isNaN
Avalia se um determinado argumento (objeto, variável) é ou não um número. O exemplo a seguir mostrará um resultado true (verdadeiro), pois “Sandro” não é um número. Veja o exemplo:
var x = "Sandro"; var y = isNaN(x); document.write(y);
Strings
Strings podem ser envolvidas por aspas simples ou duplas. Os seguintes exemplos são válidos:
s1 = "Uni-Anhanguera, curso de 'JavaScript'"; s2 = 'Uni-Anhanguera, curso de "JavaScript"';
Você pode ainda utilizar o caractere “\” para indicar escape, assim:
s3 = 'Uni-Anhanguera, curso de "JavaScript"';
Página 10 de 20
A linguagem JavaScript acrescenta interatividade às páginas HTML permitindo escrever código orientado a eventos. Podemos, por exemplo, executar uma função JavaScript quando o usuário clicar em um botão. O trecho de código HTML a seguir ilustra a possibilidade da chamada de uma função JavaScript através do click de um objeto do tipo botão.
A tabela seguinte ilustra os gerenciadores de evento suportados pela Linguagem JavaScript.
Nome do objeto Gerenciadores de evento Area onClick, onMouseOut, onMouseOver Button onBlur, onClick, onFocus Checkbox onBlur, onClick, onFocus FileUpload onBlur, onChange, onFocus Form onReset, onSubmit Frame onLoad, onUnload Image onAbort, onError, onLoad Link onClick, onMouseOut, onMouseOver Radio onBlur, onClick, onFocus Reset onBlur, onClick, onFocus Select onBlur, onChange, onFocus Submit onBlur, onClick, onFocus Text onBlur, onChange, onFocus Textarea onBlur, onChange, onFocus Window onBlur, onError, onFocus, onLoad, onUnload
Abrindo Janelas Popup
Usamos o comando window.open, que possui a seguinte sintaxe:
window.open(endereço, nome da janela, opções);
O terceiro parâmetro (opções) define algumas configurações da janela, como altura, largura, exibição da barra de rolagem, entre outras.
Podemos usar JavaScript para manipular os elementos de uma página, como campos de formulário e camadas DIV identificadas (camadas DIV serão estudadas quando iniciarmos nossos estudos sobre a tecnologia Ajax). O programa a seguir ilustra um exemplo de manipulação de um campo do tipo texto em um formulário, onde a cada clique em um botão, o valor do campo é incrementado.
Página 11 de 20
A seguir, os métodos que podem ser invocados em um campo de texto de um formulário HTML:
Método Descrição Blur() Retira o foco da aplicação do campo de texto. Focus() Coloca o foco da aplicação do campo de texto. Select() (^) Seleciona o texto do campo.
O trecho de código JavaScript seguinte posiciona o cursor no campo numero e seleciona o texto desse campo:
function Seleciona_e_Foca() { document.formulario.numero.focus(); document.formulario.numero.select(); }
Objetos Checkbox, Botões Radio e Listas de Seleção
É possível, através da linguagem JavaScript, fazermos a verificação do estado de um elemento checkbox por meio da propriedade checked , que armazena o valor true se o elemento estiver marcado e false , caso contrário. Veja o exemplo seguinte:
Para manipular botões radio, usamos o atributo length , que contém o número de botões radio que fazem parte do grupo. Cada botão equivale a uma posição no vetor relativo a esse grupo, iniciando no índice zero. Veja o exemplo seguinte e note que o atributo onClick foi colocado no próprio botão radio, e não em um campo do tipo button , como nos exemplos anteriores.
Página 13 de 20
JavaScript Orientado a Eventos
Introdução
A linguagem JavaScript é estreitamento ligada ao modelo da orientação a eventos e, para usufruirmos desse recurso, usamos os manipuladores de eventos que são atributos especiais aplicáveis às tags HTML, permitindo a um elemento (botão, link, imagem, etc.) tratar ações (clique do mouse, pressionamento de uma tecla) que ocorram durante o carregamento e a apresentação de um documento. Os eventos são ações realizadas pelo usuário e que desencadeiam a execução de códigos escritos em JavaScript, permitindo interações com as ações do usuário.
Lista de Eventos
A seguir uma lista dos principais eventos JavaScript com código exemplo. É bom saber que cada rotina de tratamento de evento foi projetada para tags HTML específicos. Isto quer dizer que, por exemplo, os eventos onLoad e Unload são colocados no tag
ou ainda em , mas, ainda como exemplo, o evento onClick só funciona dentro de objetos de um formulário ou em links.
onBlur
Usado para executar um código quando o foco se move para fora do objeto do formulário. Os objetos que suportam esse evento são: Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea e window. Após testar o exemplo abaixo, você pode trocar o evento onBlur pelo evento onChange. O evento onChange é semelhante ao onBlur, porém, é necessário que o usuário selecione modifique o conteúdo do objeto para que o evento ocorra. No método onBlur, se o usuário mover o foco para fora do objeto sem alterar seu conteúdo, nada acontece. Os objetos que suportam o evento onChange são: FileUpload, Select, Text e TextArea.
onFocus
Usado para executar um código quando o foco se move para o objeto do formulário, ou seja, quando o objeto recebe o foco. Os objetos que suportam esse evento são: Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea e window. Experimente trocar o evento onBlur do exemplo anterior pelo evento onFocus e note que, assim que você clicar no objeto idade, a função valida_idade será acionada.
Página 14 de 20
onClick
Usado para executar um código quando o usuário clicar em um botão. Os objetos que suportam esse evento são: Button, Checkbox, Radio, Reset, Submit, document e Link. Veja o exemplo seguinte:
onLoad
Faz o navegador executar uma ação quando a página ou uma imagem é carregada. Os objetos que suportam esse evento são: Image, Layer e window. Note as instruções da função mensagem. Podemos usar as propriedades dos objetos para, por exemplo, modificar o conteúdo de um objeto e focar um objeto. No exemplo seguinte, a segunda e terceira instruções da função mensagem limpa e foca o objeto idade, respectivamente.
Página 16 de 20
Analisando tecla pressionada na página
De maneira semelhante ao exemplo anterior, que verifica qual botão do mouse foi pressionado, podemos também verificar qual tecla foi pressionada, através do gerenciador de eventos onKeyPress definido na tag body de um documento. Veja o exemplo seguinte:
var navegador = navigator.appName; if (navegador == "Netscape") location.href = "pagina_1.html"; else if (navegador == "Microsoft Internet Explorer") location.href = "pagina_2.html"; else location.href = "pagina_3.html";
Definindo um timer para a aplicação
O exemplo seguinte ilustra a execução de uma função JavaScript quando decorridos alguns segundos pré- determinados após o carregamento da página.
No exemplo acima, note a presença de duas instruções JavaScript definidas entre “;” no gerenciador de eventos onLoad, na tag body. Assim é possível definir duas tarefas para onLoad.
Cancelando a ação do timer
Para permitir ao usuário desativar o timer, defina uma variável para a função setTimeOut, assim:
Em seguida, adicione um botão ao formulário para realizar a ação de desativar o timer, assim:
A função clearTimeout não deve ser criada por você, pois a mesma já constitui um método pré-definido da linguagem JavaScript.
Manipulando o objeto DATE
Estude o código a seguir para compreender como funciona basicamente o objeto DATE da linguagem JavaScript.
hoje = new Date(); var dia_do_mes = hoje.getDate(); var dia_da_semana = hoje.getDay(); // 0 = domingo, ... var hora = hoje.getHours(); var minuto = hoje.getMinutes(); var mes = hoje.getMonth(); // 0 = janeiro var segundos = hoje.getSeconds(); var ano = hoje.getFullYear(); // ano c/ 4 digitos var ano = hoje.getYear(); // ano c/ 2 digitos hoje.setDate(20); // altera o dia do mês
Randomizando e arredondando com JavaScript
Randomizar significa gerar número aleatório via programação.
var x = Math.random(); // gera um número aleatório var y = Math.round(x); // arredonda o valor de x em y var z = Math.random() * 100; // gera número aleatório de 0 a 100 var a = Math.floor(15.8); // retorna 15 (a parte inteira) var b = Math.round(15.8); // retorna 16
Página 19 de 20
Nome do Recurso Descrição do Recurso toolbar Barra de ferramentas location (^) Barra de endereços status Barra de status menubar Barra de menus scrollbars (^) Barra de rolagem resizable Permite redimensionar width Largura da janela height Altura da janela
Propriedades da janela
O objeto window possui propriedades. Veja como obter algumas de suas propriedades. Alguns desses exemplos não funcionam em todos os navegadores por questões de compatibilidade.
var x = document.location; // coloca endereço da página atual em x
var y = document.referrer; // coloca endereço da pág que o usuário veio em y Exemplo: "Você veio da página: " + x
document.title = "Novo titulo do navegador";
var x = window.length; // nro de frames da janela (a janela atual é contada como 1 frame) var y = window.name; // nome do objeto, se estiver definido
Manipulando Formulários
Podemos definir programaticamente as propriedades de um formulário, como action, method, target, além de submeter um formulário através do evento submit.
A propriedade target do exemplo acima permite definir que a resposta do servidor seja mostrada em uma nova janela do navegador. Através da propriedade action podemos definir o URL seguido do nome de um CGI ou programa PHP, JSP, ASP, etc. para que seja executado pelo servidor assim que o formulário seja submetido via método submit.
var x = document.form_teste.length; // número de elementos do formulario
var x = document.form_teste.nome_usuario.value; if (x.length < 5) alert("Nome deve possuir pelo menos 5 caracteres");
var x = document.form_teste.elements[0].value;
O exemplo seguinte utiliza a propriedade host do objeto location. Se o usuário estiver, por exemplo, em
http://www.anhanguera.edu.br/cadastro/...
Página 20 de 20
A instrução abaixo mostrará apenas o host, ou seja,
www.anhanguera.edu.br
var y = location.host;
A instrução seguinte permite o retorno do restante (inverso de location.host)
var z =location.pathname;
Existe ainda a possibilidade de obter a porta usada pelo navegador para conexão com a Internet. Não funciona em alguns navegadores.
var x = location.port;
Para recarregar a página atual, utilize a instrução seguinte:
location.reload();
Questionário
(Envie seu questionário ao professor para sandrotc@anhanguera.edu.br a fim de obter conceitos de classe ao longo do semestre letivo. Bom trabalho!)
Existe alguma relação entre a linguagem Javascript e a linguagem Java?
Explique a estrutura básica de um programa escrito em Javascript.
Explique o funcionamento e uso da extensão de arquivo “.js” utilizada para programas Javascript.
É possível executar código Javascript fora das tags em uma página web?
Escreva uma instrução Javascript que declare uma variável para cada tipo de dado primitivo.
O caractere ponto-e-vírgula é necessário para separar as instruções em programas Javascript?
Escreva um programa em Javascript que ilustre o escopo de variáveis.
Escreva um programa Javascript que mostre na área de trabalho do navegador todos os números inteiros de X até Y, sendo estes números informados pelo usuário em uma página web. Os números devem ser escritos dentro de uma tabela de 20 colunas por N linhas. A rotina Javascript que escreve os números deve ser feita através de uma função.
Escreva uma página web que leia dois números em A e B e, através de uma função Javascript, calcule a soma desses números e mostre o resultado na página assim que o usuário clicar em um botão “Calcular”. A função deve estar em um arquivo com extensão “.js”.
Escreva uma página web que leia dois números em A e B de forma que esses números formem um intervalo, ou seja, A deve ser menor ou igual a B. Essa validação deve ser feita via Javascript. Um botão “Processa” deve executar o “action” do formulário que carregará uma outra página html que apenas mostrará a mensagem “Intervalo correto” e um link para retornar à página anterior. A validação deve ocorrer no momento em que o número em B for informado e também ao pressionar o botão “Processa”.
Explique, através de um exemplo, o uso de parâmetros anônimos em funções Javascript.
Explique as funções parseInt, parseFloat e isNaN.
Elabore uma página web com um botão “Abre janela” que, ao ser pressionado, abra uma janela do navegador, atribua o foco a esta janela e mostre o seu nome completo e um link “Fecha janela”.
