aula javascript

Profª Taliane Lima

O que é o JavaScript? O JavaScript é uma linguagem de

programação criada em 1995 por Brendan Eich, da Netscape Navegator v2.0.

JavaScript é uma linguagem de programação utilizada para criar pequenos programas para realizar ações em uma página web.

A Web é construída por três camadas:

Conteúdo Formatação Comportamento

O JavaScript não está relacionado ao java

O JavaScript é enviado ao cliente como parte do código HTML

É utilizado para criar efeitos especiais.

Estrutura básica de um script:

<SCRIPT LANGUAGE=“JavaScript”> Instruções</SCRIPT>

Exibição de Informações

document.write(“mensagem”);

Exemplo 01<html><head><script language="JavaScript"> document.write("Bem vindo a linguagem

JavaScript")</script></head><body></body></html>

Caixas de Diálogo

alert()promt()confirm()

Usando o alert()

Sua função é mostrar apenas uma mensagem, com um botão de confirmação para que este seja fechado.

<html><head><script language="JavaScript"> alert("Bem vindo a linguagem JavaScript")</script></head><body></body></html>

Usando prompt()

A caixa de diálogo prompt nos solicita uma entrada.

A função permite um string como parâmetro

<html><head><script language="JavaScript"> var nome=window.prompt("Por favor informe

seu nome:",""); document.write("Bem vindo(a),"+nome);</script></head><body></body></html>

Usando o confirm() A caixa de diálogo de confirmação é

chamada com a função confirm() que terá também dois botões:

o OKo CANCELAR

Usando o confirm() A confirmação também retornará um

valor:o TRUEo FALSE

Isso a torna ideal para ser usada como estrutura seletiva if.

<html><head><script language="JavaScript"> escolha= confirm("Clique em um botão"); if(escolha) {alert("Você clicou no botão OK " +"valor:

"+escolha);} {alert("Você clicou no botão CANCELAR

"+"valor: "+escolha);}</script></head><body></body></html>

Conversão de Variáveis Diferentemente das maiorias das

linguagens, o JavaScript define as variáveis dinamicamente.

Ao atribuir uma variável, ele escolhe o tipo conforme o valor passado para a variável, não sendo necessário especificá-lo.

Conversão de Variáveis O JavaScript entende que o que é

digitado é um string.

Para trabalhar com número é necessário fazer a devida conversão

Conversão de Variáveis

eval()parseint()parsefloat()

Exem

plo

usan

do o

ev

al()<html><head><script language="JavaScript">var n1,n2, n3,soma,num1,num2;n1=eval(window.prompt(“Por favor informe o primeiro número”,””));n2= eval(window.prompt(“Por favor informe o segundo número”,””)); soma=n1+n2;document.write(“A soma é:”+soma)</script></head><body></body></html>

Exem

plo

usan

do o

pa

rseI

nt<html><head><script language="JavaScript">var n1,n2, n3,soma,num1,num2;N1=window.prompt(“Por favor informe o primeiro número”,””);n2= window.prompt(“Por favor informe o segundo número”,””); num1=parseInt(n1);num2=parseInt(n2);soma=n1+n2;document.window(“A soma é:”+soma)</script>

Exem

plo

usan

do o

pa

rseF

loat

()<html><head><script language="JavaScript">var n1,n2, n3,soma,num1,num2;N1=window.prompt(“Por favor informe o primeiro número”,””);n2= window.prompt(“Por favor informe o segundo número”,””); num1=parseFloat(n1);num2=parseFloat(n2);soma=n1+n2;document.window(“A soma é:”+soma)</script>

Console do navegador Alguns navegadores dão suporte a entrada

de comandos pelo console. Por exemplo, no Google Chrome o console pode ser acessado por meio do atalho Control + Shift + J

Experimente executar um alert no console e veja o resultado:

alert("interagindo com o console!");

Sintaxe básicaOperações matemáticas

> 12 + 13 25

> 14 * 3 42

> 10 - 4 6

> 25 / 5 5

> 23 % 2 1

Sintaxe básicaOperações matemáticas

var contador = 0; undefined

> contador++ 0

> contador 1

> contador++ 1

> contador 2

var contador = 5; undefined

> contador++ 5

> contador 6

> contador++ 6

> contador 7

Tipos

O JavaScript dá suporte aos tipos String (letras e palavras), Number (números inteiros, decimais), Boolean (verdadeiro ou falso) entre

outros. var texto = "Uma String deve ser

envolvida em aspas simples ou duplas."; var numero = 2012; var verdade = true;

Quando utilizamos o JavaScript para interagir com os elementos da página é muito comum obtermos coleções.

Para fazer alguma coisa com cada elemento de uma coleção é necessário efetuar uma iteração. A mais comum é utilizando o for:

var pessoas = ["João", "José", "Maria", "Sebastião", "Antônio"];

for (var i = 0; i < pessoas.length; i++) { alert(pessoas[i]); }

Essa sintaxe utilizando os colchetes em pessoas[i] é uma maneira de selecionarmos um elemento de um Array, no caso o valor de i é um número para cada um dos elementos da coleção.

Para explorar o comportamento do Array você pode realizar alguns testes com essa seleção:

var pessoas = ["João", "José", "Maria", "Sebastião", "Antônio"];

alert(pessoas[0]); alert(pessoas[1]); alert(pessoas[4]);

Estruturas Condicionais e de Repetição

If(condição verdadeira){Uma ou várias instruções;}

Estruturas Condicionais e de Repetição

If(condição verdadeira){ instrução 1;}ElseInstrução 2}

Exem

plo

<html><head><script language="JavaScript">var resposta=confirm(“você gosta de maça”);If(resposta==true){ document.write(“<p>Eu também gosto!<\/p>”);}elsedocument.write(“<p>Não gosta???<\/p>”);} < /script> </head> <body </body> </html>

FUNÇÕES

As funções podem ser definidas como um conjunto de instruções, agrupadas para executar uma determinada tarefa.

Dentro de uma função pode existir uma chamada a outra função. Para as funções podem ser passadas informações, as quais são chamadas de parâmetros.

As funções podem ou não retornar alguma informação, o que é feito com o comando Return.

A definição de uma função é feita da seguinte forma:

Function NomeDaFunção([ parametro1, parametro2, ..., parametroN ])

{...[Return(ValorDeRetorno)]}

<html><head><script language="LiveScript">Function hello(){alert("Alô mundo!!!");}</script></head><body>...<script>hello();</script>...</body></html>

Funç

ões c

om R

etor

no<html><head><script type="text/javascript">function myFunction(){return("Hello world!");}</script></head><body><script type="text/javascript">document.write(myFunction())</script></body></html>

onClick=”[funcao]”

Por exemplo:

onClick=”alert(‘Exemplo de click’);”.

<HTML><HEAD><TITLE>Exemplo de checkbox</TITLE><SCRIPT>function clicou(campo){if (campo.checked)alert("O campo esta selecionado");elsealert("Campo desmarcado !");}</SCRIPT></HEAD><BODY BGCOLOR=beige><H1>Selecionando uma checkbox</H1><FORM><INPUT TYPE=checkbox onclick="clicou(this)"> Marque esta opcao !<BR></FORM></BODY></HTML>

Operadores LógicosOperadores : E e OU

If( condição 1)&&(condição 2)If( condição 1)||(condição 2)

&& Retorna verdadeiro se as duas condições forem verdadeiras e falso se uma das duas condições forem diferentes

|| Retorna verdadeiro se as pelo menos uma das condições forem verdadeiras e falso se nenhuma das condições verdadeiras

! Retorna verdadeiro se a opração for falsa e vice- versa

<html><head><title>Modelo com

mensagem</title><SCRIPT language=“JavaScript”>day=new Date()// Função que captura a

datahr=day.getHours()// Função que extrai a

horaIf((hr>=1)&&(hr<12)){Document.write(“Bom dia”);

If((hr>=12)&&(hr<=18)){document.write(“boa tarde”);}If((hr>18)&&(hr<=24)){document.write(“boa Noite”);}</SCRIPT></head></HTML

EventosExistem diversos eventos que podem ser utilizados para que a interação do usuário coma página seja o ponto de disparo de funções que alteram os elementos da própria página:• onclick: clica com o mouse• ondblclick: clica duas vezes com o mouse• onmousemove: mexe o mouse• onmousedown: aperta o botão do mouse

• onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag’n’drop)

• onkeypress: ao pressionar e soltar uma tecla

• onkeydown: ao pressionar uma tecla.• onkeyup: ao soltar uma tecla. Mesmo

acima.• onblur: quando um elemento perde foco

• onfocus: quando um elemento ganha foco

• onchange: quando um input, select ou textarea tem seu valor alterado

• onload: quando a página é carregada • onunload: quando a página é fechada •onsubmit: disparado antes de submeter

o formulário. Útil para realizar validações

Funções Temporais Em JavaScript, podemos criar um timer para

executar um trecho de código após um certo tempo, ou ainda executar algo de tempos em tempos.

A função setTimeout permite que agendemos alguma função para execução no futuro e recebe o nome da função a ser executada e o número de milissegundos a esperar:

// executa a minhaFuncao daqui um segundo setTimeout(minhaFuncao, 1000);

Se for um código recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas executa a função indefinidamente de tempos em tempos:

// executa a minhaFuncao de um em um segundosetInterval(minhaFuncao, 1000);

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.

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.

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].

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".

<form NAME="clientes"> Nome: <input TYPE="text"

NAME="empresa" value=" ">

document.forms[0].elements[0].value;

document.clientes.empresa.value;

aula javascript

Education