Instituto Federal de Educação,
Ciência e Tecnologia
Noções Básicas de
Noções Básicas de
Javascript
Javascript
Prof. Henrique Neto
Técnico em
Técnico em
Computação Gráfica
Computação Gráfica
Campus Avançado de Jaguaruana
AGENDA
Funções
Objetos em Javascript
Validação de Formulários
Funções no Javascript
Funções na programação podem ser vistas como
subprogramas ou blocos de código que realizam
alguma tarefa;
No Javascript, para se definir uma função, usa-se a
palavra reservada function;
function
<nome_função>
(
<parametros>
)
{
//Comandos
Funções no Javascript
A definição da função consiste no uso da palavra chave function,
seguida por:
–
Nome da função:
• Qualquer nome, seguindo as regras de nomeclatua de
varáveis;
–
Parâmetros:
• Variáveis que essa função pode receber
–
Declarações entre Parenteses:
• Todos os comandos ficam nesse espaço definido pelas
chaves;
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
</script>
</body>
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<script>
function
hello()
{
alert(
"Hello World!"
);
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
hello();
</script>
</body>
</html>
Para executar os comandos
dentro da função, é necessário
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
Funções são úteis quando
queremos captar algum
evento (mouse ou teclado)
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<p>
Cuidado ao passar o mouse aqui
</p>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
</script>
</body>
</html>
Queremos aqui
linkar
um evento de passar o mouse
sob o parágrafo e chamar a
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<p
onmouseover=
"hello()"
>
Cuidado ao passar o mouse aqui
</p>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
Para isso, usamos o atributo
onmouseover
na tag que
queremos captar um evento
de mouse
Passamos para esse atributo
o nome da função que
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
</head>
<body>
<p
onclick=
"hello()"
>
Cuidado ao passar o mouse aqui
</p>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
</script>
</body>
</html>
Outro tipo de evento:
onclick
Quando o mouse clicar no
pararágrafo, chama-se a
função
Veremos outros tipos de
eventos mais na frente
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
</script>
</head>
<body>
<p
onclick=
"hello()"
>
Ná prática, organizamos o
código javascript (com as
AGENDA
Funções
Objetos em Javascript
Validação de Formulários
Objetos
Elementos em um página web são tratados como objetos
em Javascript;
Alguns desse elementos/objetos são:
–
window
–
document
–
forms
Objeto: Window
Representa uma Janela aberta no navegador;
Provê atributos e método sobre a janela:
–
document, name, navigator, ...;
–
alert(), open(), resizeTo(), close(), …;
Para mais informações:
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
hello()
{
alert(
"Hello World!"
);
}
</script>
</head>
<body>
<p
onclick=
"hello()"
>
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
abrir()
{
open(
"http://www.ifce.edu.br"
);
}
</script>
</head>
<body>
<p
onclick=
"abrir()"
>
Cuidado ao passar o mouse aqui
</p>
</body>
</html>
Vamos ver o método
open()
Este método abre uma
nova Janela especificada
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
abrir()
{
open(
" "
,
"novaJanela"
,
"width=300, height=300"
);
}
</script>
</head>
<body>
<p
onclick=
"abrir()"
>
Especificando os
parâmetros desse método,
podemos criar uma janela
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
abrir()
{
open(
" "
,
"novaJanela"
,
"width=300, height=300"
);
}
</script>
</head>
<body>
<p
onclick=
"abrir()"
>
Cuidado ao passar o mouse aqui
</p>
</body>
</html>
Especificando os
parâmetros desse método,
podemos criar uma janela
especializada
“ ”
:
url da nova janela
“novaJanela”
:
nome da janela criada
“width=300, height=300”
:
propriedades da janela
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
abrir()
{
var
janela = open(
" "
,
"novaJanela"
,
"width=300, height=300"
);
janela.document.write(
“<h1> Nova Janela </h1>”
);
}
</script>
</head>
<body>
<p
onclick=
"abrir()"
>
Pode-se definir o conteúdo
dessa nova janela na
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
fechar()
{
close();
}
</script>
</head>
<body>
<p
onclick=
"fechar()"
>
Se cliclar aqui, já era!
</p>
</body>
</html>
Vamos dar uma olhada no
método close()
Este método fecha
a janela atual
Funções no Javascript
<html>
<head>
<title>
Funções
</title>
<script>
function
fechar()
{
var
resposta = confirm(
“Deseja fechar a janela?”
);
if
(resposta ==
true
)
close();
}
</script>
</head>
Podemos escolher se
queremos fechar a janela.
Praticando . . .
Faça um site para baixar algum arquivo LIVRE. Quando um usuário clicar no
link de download, uma propaganda deverá aparecer em outra Janela
Praticando . . .
Quando se clica
no campo pesquisar
Objetos
Elementos em um página web são tratados como objetos
em Javascript;
Alguns desse elementos/objetos são:
–
window
–
document
–
forms
Objeto: Document
Representa um objeto da window;
Uma página HTML é carregada como uma árvore de seus
componentes:
–
Essa árvore é chamada de DOM (Document Object Model);
Esse objeto provê métodos e atributos para usar essa árvore
(DOM):
–
write(), GetElementById(), getElementByName(), ...
Objeto: Document
Árvore DOM:
document
title
body
forms
style
backgroundColor
images
form1
. . .
formN
img1
imgN
. . .
input
select
Objeto: Document
<html>
<head>
<title>
JS
</title>
<script>
function
mostrarTitulo()
{
alert(
"O titulo da pagina eh: "
+ document.title);
}
</script>
</head>
AGENDA
Funções
Objetos em Javascript
Validação de Formulários
Validação de Formulário
JavaScript pode ser utilizado para validar campos de
formulários;
Utiliza-se para verificar se campos obrigatórios foram
preenchidos, se o tipo de dado preenchido é o esperado, …;
Isso garante de que os dados do formulário serão
Validação de Formulário
<html>
<head> <title>
Form
</title> </head>
<body>
<form
action
=
””
name=
"form1"
method=
"post"
>
Entre com o seu Nome:
</br>
<input
type=
"text"
name=
"nome"
/> </br>
Entre com a sua idade:
</br>
<input
type=
"text"
name=
"idade"
/> </br>
<input
type=
"submit"
name=
"enviarForm"
value=
"Enviar"
/>
</form>
</body>
</html>
Vamos fazer
um Formulário
Validação de Formulário
<html>
<head> <title>
Form
</title>
<script>
function
dadosForm()
{
alert(
"Tratar os dados agora!"
);
}
</script>
</head>
<body>
<form
action
=
””
name="form1"
method="post"
>
Entre com o seu Nome:
</br>
<input
type=
"text"
name="nome"
/> </br>
Entre com a sua idade:
</br>
<input
type="text"
name="idade"
/> </br>
Vamos fazer
uma função
para ver os dados
do Formulário
Validação de Formulário
<html>
<head> <title>
Form
</title>
<script>
function
dadosForm()
{
alert(
"Tratar os dados agora!"
);
}
</script>
</head>
<body>
<form
action
=
””
name="form1"
method="post"
>
Entre com o seu Nome:
</br>
<input
type=
"text"
name="nome"
/> </br>
Entre com a sua idade:
</br>
<input
type="text"
name="idade"
/> </br>
<input
onclick=
”dadosForm()”
type="submit"
name="enviarForm"
value="Enviar"
/>
</form>
</body>
</html>
Vamos
Linkar
com
a função criada
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var nome = document.forms[0].nome.value; var idade = document.forms[0].idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); }
</script> </head>
<body>
<form action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
Entre com a sua idade: </br>
Vamos coletar
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var nome = document.forms[0].nome.value; var idade = document.forms[0].idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); }
</script> </head>
<body>
<form action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
Entre com a sua idade: </br>
<input type="text" name="idade"/> </br>
<input onclick=”dadosForm()” type="submit" name="enviarForm" value="Enviar"/> </form> </body> </html>
Script para
pegar dados do
formulário
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var nome = document.form1.nome.value; var idade = document.form1.idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); }
</script> </head>
<body>
<form action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
Entre com a sua idade: </br>
Outra forma
de pegar
os dados
(Pelo
Nome
do
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var form = document.getElementById("estilo_form"); var nome = form.nome.value;
var idade = form.idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); }
</script> </head>
<body>
<form id=”estilo_form” action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
Entre com a sua idade: </br>
<input type="text" name="idade"/> </br>
<input onclick=”dadosForm()” type="submit" name="enviarForm" value="Enviar"/>
</form> </body> </html>
Mais uma outra
forma
Validação de Formulário
Para validar esse formulário, temos que pensar nas
seguintes situações:
–
1) Se o formulário tiver algum erro, os dados não
podem ser enviados para o servidor;
–
2) O usuário não digita nada nos campos e aperta
no botão enviar;
1) Se o formulário tiver algum erro, os dados não
podem ser enviados para o servidor;
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var form = document.getElementById("estilo_form"); var nome = form.nome.value;
var idade = form.idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); return true; } </script> </head> <body>
<form id=”estilo_form” action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
Entre com a sua idade: </br>
<input type="text" name="idade"/> </br>
<input onclick=”dadosForm()” type="submit" name="enviarForm" value="Enviar"/> </form>
</body> </html>
Isso indica o retorno da função.
O valor true indica que tudo
foi verificado e os dados podem
1) Se o formulário tiver algum erro, os dados não
podem ser enviados para o servidor;
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var form = document.getElementById("estilo_form"); var nome = form.nome.value;
var idade = form.idade.value;
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade); return true; } </script> </head> <body>
<form id=”estilo_form” action=”” name="form1" method="post">
Entre com o seu Nome: </br>
<input type="text" name="nome"/> </br>
No atributo
onclick
, deve-se
colocar o comando return.
Caso o valor retornado for
true
,
os dados são enviados. Se o
valor for
false
, os dados
NÃO
Validação de Formulário
Para validar esse formulário, temos que pensar nas
seguintes situações:
–
1) Se o formulário tiver algum erro, os dados não
podem ser enviados para o servidor;
–
2) O usuário não digita nada nos campos e aperta
no botão enviar;
2) O usuário não digita nada nos campos e
aperta no botão enviar;
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var form = document.getElementById("estilo_form"); var nome = form.nome.value;
var idade = form.idade.value;
/* Checar se os campos estao vazios */
if(nome == "" || idade == "") {
alert("Por favor, preecha os campos do formularios"); return false;
}
alert("O nome foi: " + nome + "\n" +
"A idade foi: " + idade);
return true;
Checa se os campos
Nome e idade foram
Praticando ...
Valide o seguinte formulário, ou seja, verifique se cada
campo foi preenchido antes de ser mandado para o
servidor.
Praticando ...
Validação de Formulário
<html
<head> <title> Form </title> <script>
function dadosForm() { . . . } </script>
</head>
<body>
<form id=”estilo_form” action=”” name="form1" method="post">
Login: </br>
<input type="text" name="login"/> </br>
Senha: </br>
<input type="password" name="senha"/> </br>
Primeiro Acesso: <br>
<input type="radio" name="resposta" value="sim"> Sim <br> <input type="radio" name="resposta" value="nao"> Nao <br><br>
<input onclick=”return dadosForm()” type="submit" name="enviarForm" value="Enviar"/>
</form> </body> </html>
Vamos colocar um
Input do
radio
e ver como coletar
o dado selecionado
Validação de Formulário
<html>
<head> <title>
Form
</title>
<script>
function
dadosForm()
{
var
form
=
document
.
getElementById
(
"estilo_form"
);
var
login
=
form
.
login
.value;
var
senha
=
form
.
senha
.value;
var
inputRadio
=
form
.
resposta
;
alert(
"O login foi: "
+ login +
"\n"
+
"A senha foi: "
+ senha
);
}
</script>
</head>
<body>
<form
id=
”estilo_form”
action
=
””
name="form1"
method="post"
>
Um input do tipo
radio
é representado por
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm()
{
var form = document.getElementById("estilo_form"); var login = form.login.value;
var senha = form.senha.value; var inputRadio = form.resposta;
var respostaRadio;
if(inputRadio[0].checked == true)
respostaRadio = inputRadio[0].value; else
if(inputRadio[1].checked == true)
respostaRadio = inputRadio[1].value;
alert("O login foi: " + login + "\n" +
"A senha foi: " + senha + "\n" + “Trabalha: ” + respostaRadio); }
</script> </head>
Um input do tipo
radio
é representado por
Validação de Formulário
<html>
<head> <title> Form </title> <script>
function dadosForm() {
var form = document.getElementById("estilo_form"); var login = form.login.value;
var senha = form.senha.value; var inputRadio = form.resposta;
/* Checar se os campos estao vazios */
if(login == "" || senha == "" ||
( inputRadio[0].checked == false && inputRadio[1].checked == false ) ) {
alert("Por favor, preecha os campos do formularios"); returnfalse;
}
var respostaRadio;
if(inputRadio[0].checked == true)
respostaRadio = inputRadio[0].value; else if(inputRadio[1].checked == true) respostaRadio = inputRadio[1].value;
Checando se os
Campos estão
preenchidos
AGENDA
Funções
Objetos em Javascript
Validação de Formulários
Eventos
JavaScript trabalha em resposta a eventos:
–
Click do mouse, interação com a página, …;
–
Podem ter eventos de mouse, teclado, formulário, …;
Pode-se vincular uma função JS a uma tag HTML:
–
Através de uma atributo da tag começando por ON;
–
Ex: onclick, onmouseover, onmousedown, onblur, …
Eventos
Podemos ver os seguintes eventos para mouse:
–
onclick
:
• O usuário clica em algum elemento HTML;
–
onmouseover
:
• O usuário passa o mouse em cima do
elemento;
–
onmouseout
:
• O usuário tira o mouse de cima do elemento;
–
onmousedown
:
Exemplo de Eventos (tag <a>)
<html>
<head>
<script>
function
clicar(){
alert(
"Voce clicou no Link"
);
}
</script>
</head>
<body>
LINK:
<a
href=
""
onclick=
"clicar()"
>
Ir para algum canto!
Exemplo de Eventos (tag <a>)
<html>
<head>
<script>
function
clicar(){
alert(
"Voce clicou no Link"
);
}
function
over()
{
document.
body
.
style
.
backgroundColor
=
"yellow"
;
}
</script>
</head>
<body>
LINK:
<a
href=""
onclick="clicar()"
onmouseover=
"over()"
>
Ir para algum canto!
</a>
</body>
</html>
Exemplo de Eventos (tag <a>)
<html>
<head>
<script>
function clicar(){
alert("Voce clicou no Link"); }
function over() {
document.body.style.backgroundColor = "yellow"; }
function out() {
document.body.style.backgroundColor = "white"; } </script> </head> <body> LINK:
Eventos
Exemplo de Eventos (tag <button>)
<html>
<head>
<script>
function
mudarColor() {
var
elem = document.getElementById(
"titulo"
);
elem.style.color = “red”;
}
</script>
</head>
<body>
<h1
id=
"titulo"
>
Algum texto aqui!
</h1>
<button
onclick=
"mudarColor()"
>
red
</button>
</body>
</html>
Exemplo de Eventos (tag <button>)
<html>
<head>
<script>
function
mudarColor(cor) {
var
elem = document.getElementById(
"titulo"
);
elem.style.color = cor;
}
</script>
</head>
<body>
Exemplo de Eventos (tag <button>)
<html>
<head>
<script>
function
mudarColor(cor) {
var
elem = document.getElementById(
"titulo"
);
elem.style.color = cor;
}
</script>
</head>
<body>
<h1
id=
"titulo"
>
Algum texto aqui!
</h1>
<button
onclick=
"mudarColor(‘red’)"
>
red
</button>
<button
onclick=
"mudarColor(‘blue’)"
>
blue
</button>
<button
onclick=
"mudarColor(‘black’)"
>
original
</button>
</body>
</html>
Praticando ...
Crie uma página com uma imagem. Quando o mouse
passar em cima da imagem, esta deverá ser troacada por
outra.
Praticando ...
Praticando ...
Crie uma página com uma imagem. Quando o mouse
passar em cima da imagem, as suas bordas devem ser
configuradas para uma cor e um tipo
Praticando ...
Praticando ...
