Introdução ao JavaScript

•

UNEB

0

Camila Oliveira

06/02/2015

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Linguagem de Programação III
Ana Patrícia F. Magalhães Mascarenhas
anapatriciamagalhaes@gmail.com
2014.2
JavaScript
HTML e Javascript
Bibliografia:
FLANAGAN, D. Javascript: The Definitive Guide. 4th Edition, Ed. O'Reilly & Associates, 2002. 
SMITH, D. e NEGRINO, T. Javascript para a World Wide Web, Ed. Campus, 4° Edição, 2001.
http://www.w3schools.com/JS
http://www.javascriptworld.com/
2
HTML e Javascript
Uma linguagem de programação simples.
Utilizada para criar pequenos programas encarregados de realizar ações dentro do contexto de uma página web.
Ajuda na interação com o usuário não provida pelo HTML:
elementos da página que tenham movimento, 
mudança de formatação a partir de ações do usuário;
Verificação de formulários preenchidos; etc.
De maneira geral... 
Execução de instruções como resposta às ações do usuário.
Código Javascript é executado pelo navegador (browser).
3
HTML e Javascript
Javascript ≠ Java
Código Javascript não é compilado. É interpretado pelo browser no momento de apresentação da página.
Não necessita de uma máquina virtual.
É uma ling. de propósito específico, enquanto Java é uma ling. de propósito geral.
Javascript traz algumas noções da programação OO mas não é completamente OO.
4
HTML e Javascript
Onde inserir os scripts?
Scripts são identificados pelas TAGS <SCRIPT> </SCRIPT>
O atributo LANGUAGE ou o atributo TYPE (mais recomendado) define a linguagem que será utilizada.
<SCRIPT TYPE=”text/javascript”> ... </SCRIPT>
Ou
<SCRIPT LANGUAGE=“JavaScript”> ... </SCRIPT>
Ficam definidos dentro do código HTML
5
HTML e Javascript
Podem existir vários scripts no mesmo HTML
Variáveis e funções ficam visíveis em outros scripts do documento html.
<HTML>
	<SCRIPT TYPE=“text/javascript”>
 		 var saldo=1000;
	</SCRIPT>
	...
	<SCRIPT TYPE=“text/javascript”>
		saldo = saldo+100;
	</SCRIPT>
</HTML>
6
HTML e Javascript
Scripts podem ficar no próprio documento HTML ou em um arquivo externo.
Para arquivo externo:
Facilita a manutenção
Facilita a reutilização
Usar a extensão .js
Identificar o arquivo informando o SRC
<SCRIPT SRC=“arq_scripts.js” TYPE=“text/javascript”>
</SCRIPT>
URL do script.
7
HTML e Javascript
Atenção: Javascript é sensível à caixa (case sensitive).
Imprimindo texto em páginas:
<html>
<body>
 <script type="text/javascript">
 document.write("Seja Bem-vindo!");
 document.write("<h1>Seja Bem-vindo formatado!</h1>");
 </script>
</body>
</html>
8
HTML e Javascript
Liberdade na declaração de variáveis:
<script type="text/javascript">
 var primeiroNome;
 primeiroNome="Fulano";
 document.write(primeiroNome);
 document.write("<br>");
 segundoNome="Silva";
 document.write(segundoNome);
</script>
Não dizemos qual o tipo. Não há tipagem.
Não é necessário explicitar o comando de declaração de variáveis através da palavra-chave var.
9
HTML e Javascript
Liberdade na utilização de variáveis:
<script type="text/javascript">
 var x = 10;
 document.write(x);
 document.write("<br>");
 x=“Olá!";
 document.write(x);
 document.write("<br>");
 x = true;
 document.write(x);
</script>
Podemos atribuir qualquer valor a qualquer variável. O tipo da variável não é declarado. Além disso, é mutável ao longo do script à medida que pode receber valores de diversos tipos.
10
HTML e Javascript
Operadores aritméticos, lógicos, de atribuição e de comparação:
Mesmo das linguagens Java e C.
Concatenação de strings:
Mesmo do Java – através do operador +
11
HTML e Javascript
Estruturas condicionais (mesmo do Java):
if (a < b) {
	...
}else if (k>1) {
	...
}
else{
	...
}
12
HTML e Javascript
Estruturas condicionais:
switch (expressao){
case constante_1 : algum_código_aqui;
 ...
 break;
case constante_2:	algum_código_aqui_2;
 ...
 break;
default: algum_código_aqui_3;
 ...
 break;
}
13
HTML e Javascript
Caixas Popup:
Alert Box: apenas abre um caixa de texto na tela do usuário.
alert("algum texto");
Confirm Box: abre uma caixa de texto com botões OK e Cancel. Ok retorna o valore true e Cancel retorna o valor false para o script.
confirm("algum texto");
Prompt Box: abre uma caixa de texto com um campo de entrada textual para o usuário. O texto que o usuário digitar é retornado para o script.
prompt("algum texto","valor default para o campo de entrada");
14
HTML e Javascript
Obtendo informações de data e tempo:
var dataAtual = new Date();
var hora = dataAtual.getHours();
//getMinutes() obtem os minutos
//getSeconds() obtem os segungos.
var diaSemana = dataAtual.getDay();
//pega o dia da semana de 0 a 6 (0 é o Domingo e 6 é o Sábado).
15
HTML e Javascript
Definindo funções:
function nomeDaFunção(param1, param2...)
{
//corpo...
}
//Exemplo:
function produto(a,b)
{
	x=a*b;
	return x;
}
16
HTML e Javascript
Eventos:
onFocus, onBlur and onChange
<input type="text" size="30"
name="email" onchange="checkEmail()">
OnSubmit
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
onMouseOver and onMouseOut
<a href="http://www.w3schools.com"
onmouseover="alert('An onMouseOver event');">
<img src="w3schools.gif" width="100" height="30">
</a>
17
HTML e Javascript
Eventos:
Outros eventos verificar em:
http://www.w3schools.com/jsref/jsref_events.asp
Ou em livros indicados.
18
HTML e Javascript
Acessando campos do formulário:
<script type="text/javascript">
	function displayForm()
	{
		alert(formulario.campo.value);
	}
</script>
<form action="" method="get" onSubmit="displayForm()" name="formulario">
	<input type="text" name="campo">
	<input type="submit" value="Ok">
</form>
19
HTML e Javascript
Comentários em Javascript: igual em Java
/* comentário longo com
 mais de uma linha
*/
// comentário de uma linha!!
20
HTML e Javascript
Exercícios:
Escreva um script para saudar com “bom dia”, “boa tarde” ou “boa noite” a depender da hora atual e dizer qual o dia da semana.
Crie um script para disparar uma mensagem quando um formulário for submetido. Ex: “Obrigado por preencher a enquete!”
Para o site da aula anterior crie um script para checar se os campos do formulário foram preenchidos. Indique quais campos não foram preenchidos. Pode utilizar o formulário da enquete.
Tente:http://www.w3schools.com/jS/tryit.asp?filename=tryjs_text
21
Exemplo para criticar formulario
function CriticaFormuario (){
 var retorno=true;
 var tamanho; 
tamanho = document.forms[0].elements.length;
for (i=0;i<=(tamanho-2);i++){
 if (document.forms[0].elements[i].value==""){
 window.alert(" O campo "+document.forms[0].elements[i].name+" é obrigatório");
 retorno=false;
 break;
 }
 }
return retorno;
}
22