Java Script

Notas de aula – Introdução à Tecnologia Web – Segundo semestre
O que é JavaScript?
JavaScript é uma linguagem de programação usada para aumentar a interatividade de páginas

Web. Um script JavaScript é um programa incluído em uma página HTML através da tag
<SCRIPT>. A tag <SCRIPT> é encontrada com maior freqüência dentro da seção <HEAD> embora
possa ser utilizada em qualquer local da página.
O que JavaScript é capaz de Fazer?
• Criar uma interface ativa com o usuário.

• Validar dados (formulários)
• Etc.
• Controlar o navegador (abrir janela, fechar janela, personalizar barra de rolagem,
etc)
• Validar dados (formulários)
• Etc.
JavaScript NÃO É Java!
Java é uma linguagem de programação completa, desenvolvida pela Sun Microsystems.

JavaScript é uma linguagem de programação restrita, criada pela Netscape.
Diferenças entre Java e JavaScript:

• Java acessa banco de dados, JavaScript não.
• Java acessa disco, JavaScript não.
• Java foi desenvolvida pela Sun, JavaScript pela Netscape.
• Java é uma linguagem compilada, JavaScript interpretada.
Semelhanças entre Java e JavaScript:

• Sintaxe.
• Orientação a objetos.
• As duas permitem criar aplicações Web.
Pergunta: Se JavaScript não é a mesma coisa que Java, porque possuem nomes semelhantes?
Resposta: Quando a Netscape adicionou capacidades básicas de script ao seu navegador da
Web, ela chamou aquela linguagem de LiveScript. Na mesma época, a linguagem Java estava
sendo considerada pela mídia como "o próximo grande feita da informática". Quando a Netscape
revisou o Navigator para executar applets Java no Navigator 2, ela renomeou o LiveScript para
JavaScript,esperando obter um pouco do brilho do Java.
Características JavaScript:
• Interpretada pelo Navegador (depende da tecnologia do lado do cliente).

• Case-sensitive (diferencia maiúsculo de minúsculo).
• Palavras reservadas não podem ser usadas como nome de variáveis e funções.
• Herdou a sintaxe do Java.
Outras linguagens script:
PHP, JScript, VBScript, etc.
A tag <script>
<script language="JavaScript" type="text/JavaScript">

Esta é a tag de abertura de script. Ela informa ao navegador que este deve esperar JavaScript em
vez de HTML.
O atributo language identifica ao navegador qual linguagem de script está sendo usada, e o
atributo type define o tipo MINE, informando ao navegador que o script é texto sem formatação
organizado como JavaScript.
</script>
Encerra o JavaScript e informa que o navegador deve começar a esperar HTML novamente.
Escrevendo em um documento HTML com JavaScript
<html>
<head>
document.write("Escrevendo com JavaScript");
</script>
</head>
<body>
</body>
</html>
Orientação a Objetos:
JavaScript é uma linguagem baseada em orientação a objetos.
Objeto: no mundo real, um objeto é alguma coisa que exite como por exemplo uma cadeira, uma
bolsa, etc. Para o JavaScript, existem os objetos com que ele lida em navegadores Web, como
janelas, formulários, elementos do formulário, dentre outros.
Propriedades: os objetos possuem propriedades. As propriedades podem modificar os objetos, e

a mesma propriedade pode se aplicar a objetos completamente diferentes. Nome, tamanho, cor
são propriedades que podem ser encontradas na maioria dos objetos JavaScript.
Métodos: os métodos são as ações que os objetos podem realizar. Imprimir, abrir uma janela,
fechar uma janela, são exemplos de ações (métodos) que um objeto JavaScript pode realizar.
Eventos: os são ações que o usuário executa enquanto visita a página. Exemplo: entrar na página,
sair da página, clicar, passar o mouse, etc.
Valores e Variáveis:
Um fragmento de informação é um valor e as variáveis são os elementos que contêm essas

valores. Existem tipos diferentes de valores e em JavaScript esses tipos são classificados em:
Number: qualquer valor numérico.

String: caracteres entre aspas.
Boolean: tipo lógico (true/false).
Null: vazio.
Object: qualquer valor associado ao objeto.
Function: valor retornado por uma função.
Operadores JavaScript
Os operadores são símbolos usados para trabalhar com variáveis.
Operadores Aritméticos:
+ soma (números) ou concatena (string)

- subtração
* multiplicação
/ divisão
% MOD (resto da divisão inteira)
-variavel inverte o sinal da variavel
variavel++, ++variavel soma um a variavel
variavel--, --variavel subtrai um da variavel
Exemplo:
y=x++ é o mesmo que:

y=x; x=-x+1
y=++x é o mesmo que:

x = x+1; y=x
Operadores de Atribuição:
x=y define x com o valor de y

x+=y o mesmo que x=x+y
x-=y o mesmo que x=x-y
x*=y o mesmo que x=x*y
x/=y o mesmo que x=x/y
x%=y o mesmo que x=x%y
Operadores de Comparação (lógicos)
== igual
!= diferente
> maior
>= maior ou igual
< menos
<= menor ou igual
&& e
|| ou
! não
Ocultando script em navegadores antigos
Navegadores mais antigos, não reconhecem JavaScript. Embora os navegadores devessem

ignorar tudo que está entre tags e eles não reconhecem, nem sempre isso acontece, e algumas
vezes, todos os comandos scripts podem ser listados na tela do usuário em forma de texto. Uma
forma de resolver esse problema é dizer ao navegador que os comandos scripts são comentários
HTML, então, caso o navegador não reconheça a tag script irá interpretar os comandos scripts
como comentário HTML.
<html>
<head>

</script>
</head>
<body>
</body>
</html>
Definindo uma versão mínima do JavaScript
O atributo language da tag script permite especificar a versão mínima do JavaScript de que o
navegador necessita para executar o script.
<html>
<head>
<script language="JavaScript1.3" type="text/JavaScript">

</script>
</head>
<body>
</body>
</html>
Definindo um conteúdo alternativo para navegadores que estão com a execução de script
bloqueado.
<html>
<head>

</script>
<noscript>
ERRO: Seu Navegador não suporta JavaScript.
Para solucionar este problema siga as instruçõe abaixo:

1. Verifique a permissão de execução de script no seu navegador no menu Ferramentas,
Opções da Internet, Segurança.
2. Verifique a versão do seu navegador e atualize se for necessário.
3. Entre em contato com seu técnico de informática.
</noscript>
</head>
<body>
</body>
</html>
Inserindo comentário JavaScript

<html>
<head>

</script>
</head>
<body>
</body>
</html>
Métodos alert, confirm e prompt
<html>
<head>

</script>
<noscript>
ERRO: Seu Navegador não suporta JavaScript.
</noscript>
</head>
<body>
</body>
</html>
Caracteres especiais
\n quebra de linha
\t tabulação
\' aspas simples
\" aspas duplas
\\ barra invertida


</script>
Condicionais
São decisões (sim ou não) que o código JavaScript deve tomar quando são executadas. Em cada
uma destas condições podemos criar um bloco de comandos que será executado apenas se o
resultado da condição for verdadeiro e outro para ser executado apenas quando o resultado for
falso.
if(condição){
bloco de comandos para condição verdadeira
}
else{
bloco de comandos para condição falsa
}


</script>
OBS: isNaN significa is Not a Number e retorna verdadeiro se o valor não for numérico e falso caso
contrário.
switch(atributo){
case valor1:
bloco de comandos
break;
case valor2:
bloco de comandos
break;
default:
bloco de comandos
}

</script>
Loops
Laços lógicos servem para executar mais de uma vez um trecho de código. É importante sempre
criar uma forma para o programa sair do laço; caso contrário, é criado um loop infinito que trava o
navegador.
while(condição){
bloco de comandos
}


</script>


</script>
do{
bloco de comandos
} while(condição);


</script>
for(atributo inicial; condição; incremento){

bloco de comandos
}


</script>
Exercício: Escreva um script que leia um número, calcule seu fatorial e exiba na tela.
Resposta:

</script>
Eventos
Eventos são ações identificáveis em um sistema (no caso do JavaScript no navegador)
Os eventos Javascript, associados as funções, aos métodos e aos formulários, abrem uma grande
porta para uma verdadeira interatividade nas páginas.
OnLoad: Ocorre quando a página é carregada pelo browser.

OnUnload: Ocorre quando o usuário said a página.
OnChange: Ocorre quando o valor de um campo é modificado.
OnBlur: Ocorre quando o elemento perde o foco.
OnFocus: Ocorre quando o elemento recebe o foco.
OnClick: Ocorre quando o elemento é clicado.
OnMouseover: Ocorre quando o cursor do mouse passa sobre o elemento.
OnSelect: Ocorre quando o elemento é selecionado.
OnSubmit: Ocorre quando o formulário é submetido.
Exemplo 1:
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="alert('Bem Vindo!');" onUnload="alert('Adeus!');">
Conteúdo da Página
</BODY>
</HTML>
Exemplo 2:
<FORM>
<INPUT TYPE=text onFocus="alert('Isto é um onFocus!')">
</FORM>
Exemplo 3:
<FORM>
<INPUT TYPE="button" VALUE="Clicar" onClick="alert('Acaba de clicar no botão')">
</FORM>
Objeto Date:
Com a função Date() obtemos a data e a hora correntes do computador do usuário no formato:
Dia da Semana, Nome do mês, Dia do mês, Hora:minuto:segundo.
Exemplo: Mon Sep 15 18:27:55 2008
Para se obter os dados separadamente, existem os seguintes métodos:
getDate(): dia do mês (1 a 31)

getDay(): dia da semana (0 a 6)
getMonth(): mês do ano (0 a 11)
getYear(): ano (2008)
getHours(): hora (0 a 31)
getMinutes(): minutos (0 a 31)
getSeconds(): segundos (0 a 59)
Exemplo:


</script>
Funções:
O que é uma função?

Na hora de fazer um programa levemente grande existem determinados processos que se podem
conceber de forma independente, e que são mais simples de resolver que o problema inteiro.
Ademais, estes costumam ser realizados repetidas vezes ao longo da execução do programa.
Estes processos podem se agrupar em uma função, definida para que não tenhamos que repetir
uma vez ou outra esse código em nossos scripts, e sim, simplesmente chamamos a função, e ela
se encarrega de fazer tudo o que deve.
Como se escreve uma função?

function NomeFuncao(){
instruções da função
}
Como chamar a uma função?

NomeFuncao()
O que são Parâmetros?
Os parâmetros se usam para mandar valores à função, com os quais ela trabalhará para realizar
as ações. São os valores de entrada que recebem uma função. Por exemplo, uma função que
realizasse uma soma de dois números teria como parâmetros a esses dois números.
<script>
function BoasVindas(nome){
document.write("Olá " + nome)
}
var x = window.prompt("Entre com seu nome","");
BoasVindas(x);
</script>
Múltiplos parâmetros:
Uma função pode receber tantos parâmetros quanto quisermos e para expressá-lo colocam-se os
parâmetros separados por vírgulas dentro dos parênteses. Vejamos a sintaxe para que a função de
antes receba dois parâmetros, primeiro, o nome a quem saudar e segundo, a cor do texto.
<script>
function BoasVindas(nome,cor){
document.write("<FONT color=" + cor + ">");
document.write("Olá " + nome);
document.write("</FONT>");
}
var x = window.prompt("Entre com seu nome","");
var y = window.prompt("Entre com o código hexadecimal para a cor","#");
BoasVindas(x,y);
</script>
Parâmetros passam-se por valor

Para seguir a linha do uso de parâmetros em nossos programas Javascript, temos que indicar que
os parâmetros das funções se passam por valor. Isto quer dizer que mesmo que modifiquemos um
parâmetro em uma função a variável original que havíamos passado não mudará seu valor. Pode-
se ver facilmente com um exemplo.
<script>
function passoPorValor(meuParametro){
meuParametro = 32;
document.write("o valor da variavel na função e: "+ meuParametro);
}
var minhaVariavel = 5;
passoPorValor(minhaVariavel);
document.write ("o valor da variavel e: " + minhaVariavel);
</script>
Valores de retorno
As funções também podem retornar valores, de modo que ao executar a função poderá se realizar
ações e dar um valor como saída. Vejamos um exemplo de função que calcula a média de dois
números. A função receberá os dois números e retornará o valor da média.
<script>
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
var minhaMedia;
var x = window.prompt("Entre com o primeiro valor","");
x = parseFloat(x);
var y = window.prompt("Entre com o segundo valor","");
y = parseFloat(y);
minhaMedia = media(x,y);
document.write(minhaMedia);
</script>
Múltiplos Retornos
Em uma mesma função podemos colocar mais de um return. Logicamente só vamos poder
retornar uma coisa, mas dependendo do que tenha acontecido na função poderá ser de um tipo ou
de outro, com uns dados ou outros. Vejamos um exemplo de uma função que retorna zero se o
parâmetro passado for par e retorna o valor do parâmetro de este for ímpar.
<script>
function multiploReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
var resposta
var x = window.prompt("Entre com um número","");
x = parseFloat(x);
resposta = multiploReturn(x);
document.write(resposta);
</script>
Chamando funções com eventos:

<html>
<head>
<script>
function exemplo(){
alert("Você clicou no botão");
}
</script>
</head>
<body>
<input type="button" onclick="exemplo()">
<body>
</html>
Escopo das variáveis:
As variáveis declaradas dentro da função são variáveis locais, ou seja, seu valor só vale para
dentro da função. As variáveis criadas fora da função são variáveis globais e podem ser acessadas
em qualquer parte do script.
Arrays:
Nas linguagens de programação existem estruturas de dados especiais que nos servem para
salvar informações mais complexas do que simples variáveis. Uma estrutura típica em todas as
linguagens é o Array, que é como uma variável onde podemos introduzir vários valores, ao invés
de somente um como ocorre com as variáveis normais.
Os arrays nos permitem salvar várias variáveis e acessá-las de maneira independente, é como ter
uma variável com distintos compartimentos onde podemos introduzir dados distintos. Para isso
utilizamos um índice que nos permite especificar o compartimento ou posição ao qual estamos nos
referindo.
Os arrays foram introduzidos em versões Javascript 1.1 ou superiores, ou seja, somente podemos
utilizá-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array
utilizando sintaxe de programação orientada a objetos.
Criação de Arrays
O primeiro passo para utilizar um array é criá-lo. Para isso utilizamos um objeto Javascript já
implementado no navegador:
Array sem nenhum conteúdo: var NomeDoArray = new Array()

Array com 10 posições: var NomeDoArray = new Array(10)
Inserindo valores em Arrays
NomeDoArray[0] = 290
NomeDoArray[1] = 97
NomeDoArray[2] = 127
Lendo valores em Arrays
var x = meuArray[0]
Tipos de dados nos arrays
Nos campos dos arrays podemos salvar dados de qualquer tipo, inclusive salvar tipos distintos em
um mesmo Array.
meuArray[0] = "Fulano de Tal"

meuArray[1] = 1275
meuArray[2] = true
Longitude dos Arrays

Todos os arrays em javascript, além de armazenar o valor de cada uma de suas posições também
armazenam o número de posições que têm. Para isso, utilizam uma propriedade do objeto array, a
propriedade length.
document.write(“Tamanho do Array: ” + meuArray.length)
Exemplo1:
<script>
var meuArray = new Array(2)
meuArray[0] = "Colômbia"
meuArray[1] = "Estados Unidos"
meuArray[5] = "Brasil"
for (i=0;i<meuArray.length;i++){
document.write("Posição " + i + " do array: " + meuArray[i] + "<br>")
}
</script>
Para o exemplo acima as posições 2, 3 e 4 serão null ou undefined, dependendo do navegador.
Arrays multidimensionais
Um array multidimensional é como um contêiner que guardará mais valores para cada posição, ou
seja, como se os elementos do array fossem por sua vez outros arrays.
Criando arrays multidimensionais
Em Javascript não existe um autêntico objeto array-multidimensinal. Para utilizar estas estruturas
poderemos definir arrays onde, em cada uma de suas posições haverá outro array.
Lendo arrays multidimensionais

var x = NomeArray[0][0]
Exemplo2:
<script>
var nome = new Array(3)
nome[0] = "Fulano"
nome[1] = "Ciclano"
nome[2] = "Beltrano"
var telefone = new Array(3)

telefone[0] = "3333-3333"
telefone[1] = "4444-4444"
telefone[2] = "5555-5555"
var cadastro = new Array(2)

cadastro[0] = nome
cadastro[1] = telefone
for (i=0;i<cadastro.length;i++){
for (j=0;j<cadastro[i].length;j++){
document.write(cadastro[i][j])
}
}
</script>
Iniciação de arrays
Também podemos iniciar os valores de um array ao mesmo tempo que o declaramos:
var diasSemana = new Array(“Dom”, "Seg","Ter","Qua,","Qui","Sex","Sáb")
O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da semana

correspondente.
Também podemos criar arrays multidimensionais já com valores iniciais:
var cadastro = new Array(

new Array ("Fulano","Ciclano","Beltrano"),
new Array("3333-3333","4444-4444","5555-5555")
)
Funções Intrínsecas JavaScript:
As funções intrínsecas são funções já incluídas na própria linguagem JavaScript.
eval(): retorna o conteúdo da string.

parseInt(): transforma string em inteiro.
parseFloat(): transforma string em número com ponto flutuante.
Exemplo:
<script>
x=eval("(10+10)*2");
alert(x);
y="10.5";
z="10.5";
alert(y+z);
y=parseInt(y);
z=parseInt(z);
alert(y+z);
y="10.5";
z="10.5";
y=parseFloat(y);
z=parseFloat(z);
alert(y+z);
</script>
Funções Matemáticas:
Math.abs(num): retorna o valor absoluto de um número.

Math.ceil(num): retorna o próximo inteiro maior que o número.
Math.floor(num): retorna o próximo inteiro menor que o número.
Math.round(num): retorna o valor inteiro, arredondado do número.
Math.pow(base,expoente): retorna o cálculo do exponencial.
Math.max(num1,num2,...): retorna o maior valor
Math.min(num1,num2,...): retorna o menor valor
Math.sqrt(num): retorna a raiz quadrada do número
Math.sin(num): retorna o seno de do número.
Math.asin(num): retorna o arco seno de um número
Math.cos(num): retorna o cosseno de um número.
Math.acos(num): retorna o arco cosseno de um número.
Math.tan(num): retorna a tangente de um número.
Math.atan(num): retorna o arco tangente de um número.
Math.pi: retorna o valor de PI (3.14159)
Math.log(num): retorna o lagaritmo de um número.
Math.E: retorna a base dos logaritmos naturais (2.718)
Exemplo:
<script>
x=10.6;
y=Math.round(x);
alert(y); // retorna 11
</script>
Manipulando Strings:
string.length: retorna o tamanho da string.

string.charAt(posicao): retorna o caracter da posição especificada.
string.indexOf(“string”): retorna o numero da posição onde começa a primeira ocorrência da
string.
string.lastindexOf(“string”): retorna o numero da posição onde começa a ultima ocorrência da
string.
string.substring(x,y): retorna o conteúdo da string que corresponde ao intervalo: x a y-1.
string.toUpperCase(): transforma o conteúdo da string em maiúsculo.
string.toLowerCase(): transforma o conteúdo da string em minúsculo.
escape(“string”): retorna o valor ASCII da string precedido de %.
unescape(“string”): retorna um caracter a partir de um valor ASCII precedido de %
Exemplo:
<script>
x="Uniban";
y=x.substring(2,4);
alert(y); // retorna ib
</script>
Move Condicional
receptor = ((condição)?verdadeiro:falso);
Exemplo:
<script>
sexo = prompt("Digite o sexo (M/F)","");
nomesexo=((sexo=="M")?"Masculino":"Feminino");
alert(nomesexo);
</script>
Objetos JavaScript:
Window: É o objeto que ocupa o topo do esquema hierárquico em JavaScript.
Propriedades:
defaultStatus - Determina o conteúdo padrão da barra de status do browser.

Ex: window.defaultStatus="Qualquer coisa";
status - Define uma mensagem que irá aparecer no rodapé do browser, em substituição por
exemplo, a URL de um link, quando estivermos com o mouse sobre o link.
Ex: window.status="Qualquer texto";
<html>
<head>
<script>
window.defaultStatus="Qualquer coisa";
</script>
</head>
<body>
<a href="#" onmousemove="window.status='Qualquer texto' "> link </a>
</body>
</html>
Métodos:
alert, prompt, confirm

close - Termina a sessão atual do browser.
Ex: window.close()
open - Abre uma nova sessão do browser.
Ex: window.open("URL", "Nome" , ["características"])
URL - endereço selecionado inicialmente quando da abertura da nova janela.

Nome - nome da nova janela, definido pelo programador.
Características - série de opções de configuração da nova janela, se especificados devem
estar na mesma string, separados por vírulas e sem conter espaços.
toolbar=0 ou 1 - barra de ferramentas
location=0 ou 1 - barra de endereços
status=0 ou 1 - barra de status
menubar=0 ou 1 - barra de menu
scrollbars=0 ou 1 - barra de rolagem
resizable=0 ou 1 - redimensionar
width=valor inteiro positivo - largura
height=valor inteiro positivo - altura
Ex:
window.open("arquivo.htm","blank","toolbar=1,location=1,status=1,menubar=1,scrollbars=1,w
idth=320,height=240")
Location: Este objeto contém informações sobre a URL da página atual.
Forma geral:
location.propriedade
location.metodo()
Propriedades:
host - Armazena uma string com o formato "hostname:port" da página HTML atual.
Ex: alert('Demostração da propriedade host: '+location.host)
hostname - Armazena uma string, com o IP da página HTML atual.

Ex: alert('Demostração da propriedade hostname: '+location.hostname)
href - String identica a mostrada na barra "location" do browser.

Ex: alert('A URL desta página é: '+ location.href)
History: Este objeto armazena todas as URLs das páginas HTML por onde o usuário passou
durante a sessão atual do browser. É uma cópia das informações armazenadas na opção Go da
barra de menu do Navigator.
Forma geral:
history.propriedade
history.método
Propriedades:
lenght - Informa a quantidade de páginas visitadas.

Ex: history.lenght
Métodos:
back - Retorna à página anterior, de acordo com a relação de páginas do objeto history.
Equivale a clicar o botão back do browser.
Ex: history.back()
forward - Passa para a próxima página, de acordo com a relação de páginas do objeto
history. Equivale a clicar o botão forward do browser.
Ex: history.forward()
go - Permite que qualquer URL que esteja presente na relação de páginas visitadas do
objeto history, seja carregada.
Ex: history.go(parâmetro)
Existem duas possibilidades para "parâmetro":

1 - parâmetro é um número: Ao definir um número, este deve ser inteiro. Se for positivo, a
página alvo está "parâmetro"páginas à frente. Ao passo que se for negativo, a página alvo
está "parâmetro" páginas para traz.
2 - parâmetro é uma string: Neste caso, o alvo é a URL que mais se assemelhe ao valor da
string definida por "parâmetro".
Document: Este objeto armazena todas as características da página HTML, como por exemplo:
cor das letras, cor de fundo, figura que aparecerá como papel de parede, etc
Sempre que incluimos alguma declaração no <BODY> do documento, estamos alterando
(sem perceber) o objeto Document.
Forma geral:
<BODY [BACKGROUND="Imagem"]
[BGCOLOR="#CorDeFundo"]
[FGCOLOR="#CorDoTexto"]
[LINK="#CorDosLinks"]
[ALINK="#CorDoLinkAtivado"]
[VLINK="#CorDoLinkVisitado"]
[onLoad="função"]
[onUnLoad="funcao"]>
Propriedades:
bgColor - Determina a cor de fundo da página HTML.

Ex: document.bgColor="#000000"
fgColor - Determina a cor das letras em uma página HTML. Esta propridade não altera o
que já está impresso na página HTML.
Ex: document.fgColor="#0000FF"
alinkColor - Determina a cor do link enquanto o botão do o mouse estiver pressionado sobre
o link.
Ex: document.alinkColor="#FFFFFF"
linkColor - Determina a cor dos links que ainda não foram visitados pelo usuário.
Ex: document.linkColor = "#00FF00"
vlinkColor - Determina a cor que o link aparecerá após ser visitado.

Ex: document.vlinkColor = "#80FF80"
Exemplo:
<html>
<head>
<script>
document.bgColor="#000000";
document.fgColor="#FF0000";
</script>
</head>
<body>
<a href="#" onmousemove="window.status='Qualquer texto' "> link </a><br>
texto
</body>
</html>
Métodos:
write - Imprime informações na página HTML.

Ex: document.write("Qualquer coisa" [,variável] [,..., expressão])
writeln - Imprime informações na página HTML e passa para a próxima linha. Em meus
testes, esse método não apresentou diferença com relação ao método write.
Ex: document.writeln("Qualquer coisa" [,variável] [,..., expressão])
Eventos:
onLoad, onUnload
Outros Objetos: frames, forms, links, anchor, text fields, textarea, checkbox, password,
radio, select, button, reset e submit.
Formulários:
Focando um objeto:
document.form.campo.focus();
Capturando o valor de um objeto:
document.form.campo.value;
Enviando valor para um objeto:
document.form.campo=valor;
Validação de campo em branco:
if(document.form.campo.value==””){
alert(“Preencha o campo!”);
}
Validação de campos numéricos
if(document.form.campo.value==””){
alert(“Preencha o campo!”);
}
Validação de e-mail:
email=document.frm.email.value;
if(email!=""){
aux=false;
for(i=0; i<email.length; i++){
if(email.charAt(i)=="@"){
aux=true;
}
}
}
if((email=="") || (aux==false)){
alert("Verifique o campo e-mail!")
}
Validação radio e checkbox:
x = document.frm.campo;
aux=false;
for(i=0; i<x.length; i++){
if(x[i].checked){
aux=true;
}
}
if(aux==false){
alert("Selecione uma opção!")
}
Desabilitar/habilitar campos:
document.form.campo.disabled=true/false;
Exibir/ocultar campos em determinada linha da tabela dependendo da opção marcada

em outro campo do formulário:
Na tabela:
<tr style="display:none" id="fav">
Na função chamada ao se clicar em um botão, radio, etc...
document.all.fav.style.display = '';
Bloquear ações específicas do teclado e mouse:
Na tag Body:
<body onkeydown="KeyDown();">
Na tag SCRIPT:
function KeyDown(){
var ctrl = window.event.ctrlKey;
var code = window.event.keyCode;
//CTRL+P (print)
if (ctrl && code==80) {
alert("CTRL + P bloqueado.");
window.event.returnValue = false;
}
//CTRL+C (copy)
else if (ctrl && code==67){
alert("CTRL + C bloqueado.");
}
//CTRL+A (select all)
else if (ctrl && code==65) {
alert("CTRL + A bloqueado.");
}
//CTRL+S (select all)
alert("CTRL + S bloqueado.");
}
//CTRL+N (New page)
alert("CTRL + N bloqueado.");
}
}

Java Script

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Java Script

Загружено:

Авторское право:

Доступные форматы

Notas de aula – Introdução à Tecnologia Web – Segundo semestre

JavaScript é uma linguagem de programação usada para aumentar a interatividade de páginas

O que JavaScript é capaz de Fazer?

• Criar uma interface ativa com o usuário.

JavaScript NÃO É Java!

Java é uma linguagem de programação completa, desenvolvida pela Sun Microsystems.

Diferenças entre Java e JavaScript:

Semelhanças entre Java e JavaScript:

• Interpretada pelo Navegador (depende da tecnologia do lado do cliente).

PHP, JScript, VBScript, etc.

<script language="JavaScript" type="text/JavaScript">

Escrevendo em um documento HTML com JavaScript

JavaScript é uma linguagem baseada em orientação a objetos.

Propriedades: os objetos possuem propriedades. As propriedades podem modificar os objetos, e

Um fragmento de informação é um valor e as variáveis são os elementos que contêm essas

Number: qualquer valor numérico.

Os operadores são símbolos usados para trabalhar com variáveis.

+ soma (números) ou concatena (string)

y=x++ é o mesmo que:

y=++x é o mesmo que:

x=y define x com o valor de y

Operadores de Comparação (lógicos)

Ocultando script em navegadores antigos

Navegadores mais antigos, não reconhecem JavaScript. Embora os navegadores devessem

Definindo uma versão mínima do JavaScript

Para solucionar este problema siga as instruçõe abaixo:

Inserindo comentário JavaScript

Métodos alert, confirm e prompt

<script language="JavaScript" type="text/JavaScript">

<script language="JavaScript" type="text/JavaScript">

<script language="JavaScript" type="text/JavaScript">

<script language="JavaScript" type="text/JavaScript">

<script language="JavaScript" type="text/JavaScript">

for(atributo inicial; condição; incremento){

<script language="JavaScript" type="text/JavaScript">

Eventos são ações identificáveis em um sistema (no caso do JavaScript no navegador)

OnLoad: Ocorre quando a página é carregada pelo browser.

Dia da Semana, Nome do mês, Dia do mês, Hora:minuto:segundo.

Exemplo: Mon Sep 15 18:27:55 2008

Para se obter os dados separadamente, existem os seguintes métodos:

getDate(): dia do mês (1 a 31)

<script language="JavaScript" type="text/JavaScript">

O que é uma função?

Como se escreve uma função?

Como chamar a uma função?

Parâmetros passam-se por valor

Chamando funções com eventos:

Escopo das variáveis:

Array sem nenhum conteúdo: var NomeDoArray = new Array()

Inserindo valores em Arrays

Lendo valores em Arrays

Tipos de dados nos arrays

meuArray[0] = "Fulano de Tal"

Longitude dos Arrays

document.write(“Tamanho do Array: ” + meuArray.length)

Para o exemplo acima as posições 2, 3 e 4 serão null ou undefined, dependendo do navegador.

Criando arrays multidimensionais

Lendo arrays multidimensionais

var telefone = new Array(3)

var cadastro = new Array(2)

Também podemos iniciar os valores de um array ao mesmo tempo que o declaramos:

var diasSemana = new Array(“Dom”, "Seg","Ter","Qua,","Qui","Sex","Sáb")

O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da semana

var cadastro = new Array(