tecnologias para internet - 2016.2 - aula 5
TRANSCRIPT
Tecnologias para Internet
Prof.º Thyago MaiaGestão da TI
Objetivos
Aula 5: Javascript
• Introduzir a Linguagem Javascript• Apresentar alguns conceitos básicos da
linguagem• Fazer com que o aluno desenvolva seus
primeiros scripts
2
Javascript
Javascript
É uma linguagem de programação script;
Permite que códigos de programação possam ser inseridos em páginas HTML;
Pode ser executada por todos os navegadores (browsers) modernos;
Linguagem de programação simples e leve;4
Como inserir Javascript no HTML
Como inserir Javascript no HTML
Temos 3 formas: Delimitando o código a partir dos conjuntos de
tags HTML <script></script> em um documento HTML; Normalmente logo após a tag <body>;
Relacionando um arquivo externo a partir do atributo src na tag de abertura do conjunto <script></script>; Normalmente entre as tags <head></head>;
Implementando o script em um atributo de tag;6
Como inserir Javascript no HTML
Exemplo – Importação de Script:
7
<html>
<head><script type=“text/javascript”
src=“meu_script.js”></head>
<body>
<!-- ... -->
Como inserir Javascript no HTML
Exemplo – Embarcando Javascript no HTML:
8
<html>
<body><script>
// Código-fonte Javascript</script>
</body>
</html>
Forma Geral de um Javascript
Forma geral de um Javascript Normalmente um script delimita blocos de
instruções a partir de funções (functions):
10
<html><body>
<script>function exemplo1() {
// Código-fonte da função}function exemplo2() {
// Código-fonte da função}
</script><!-- ... -->
Sintaxe Básica
Sintaxe Básica
Declaração de variáveis será acompanhada da palavra reservada var;
Instruções, Operadores, Estruturas condicionais e de repetição terão sintaxe muito similares às utilizadas em C e Java;
Javascript faz uso de nós DOM para ter acesso às informações de documentos HTML;
12
Sintaxe Básica
DOM (Document Object Model) Para o DOM, tudo no HTML é um nó (objeto):
O documento HTML; Elementos HTML; Atributos HTML; Texto delimitado por tags HTML; Etc...;
Para manipular dinamicamente hipertexto, utilizamos tais objetos;
13
Sintaxe Básica Para executar funções Javascript
dinamicamente, utilizamos atributos HTML que representam eventos. Exemplos: Clicar em um botão: onclick; Alterar o foco de um campo: onchange; Concluir o carregamento de página: onload; Efetuar uma submissão de formulário: onsubmit;
Tais atributos terão como valores uma chamada de função Javascript;
14
Exemplos de Uso
Exibição de Janelas de Diálogo
Exemplo
17
<!– Exemplo --><html>
<body>
<script> function confirmacao() {
confirm("Parabéns!"); }
</script>
<button type="button" onclick="confirmacao()">Exibir</button>
</body>
</html>
Exemplo
18
<!– Exemplo --><html>
<body onload="confirmacao()">
<script> function confirmacao() {
confirm("Página carregada com sucesso!"); }
</script>
Sport Campeão de 87
</body>
</html>
Exemplo
19
<!– Exemplo --><html>
<body>
<script> function confirmacao() {
confirm("Submissão realizada"); }
</script>
<form onsubmit="confirmacao()"><input type=“submit” value=“Submeter”>
</form>
</body>
</html>
Exibição de Janelas de Entrada
Exemplo
21
<!– Exemplo --><html>
<body>
<script> function programa() {
var nome = prompt(“Qual o seu nome?”);confirm(“Seja bem vindo, “ + nome);
} </script>
<button type="button" onclick=“programa()">Iniciar</button>
</body>
</html>
Obtendo dados de campos de formulário
Exemplo
23
<!– Exemplo --><html>
<body>
<script> function checa_time() { var t = document.getElementById("time").value; if (t == 'Sport') alert("Parabéns!"); else alert("Erro!"); } </script>
Time: <input type="text" id="time” onchange="checa_time()" />
</body>
</html>
Alterar formatação de um elemento HTML
Exemplo
25
<!– Exemplo -->
<html>
<body>
<script> function aumenta() {
document.getElementById("palavra").style.fontSize = "60px";
} </script>
<div id="palavra">Ola, mundo!!!</div> <button type="button" onclick="aumenta()">Aumenta</button>
</body>
</html>
Exemplo
26
<!– Exemplo -->
<html>
<body>
<script> function azul() {
document.getElementById("palavra").style.color = “blue";
} </script>
<div id="palavra">Ola, mundo!!!</div> <button type="button" onclick=“azul()">Muda Cor</button>
</body>
</html>
Exemplo
27
<!– Exemplo -->
<html>
<body>
<script> function vermelho() {
document.getElementById("palavra").style.backgroundColor = “red";
} </script>
<div id="palavra">Ola, mundo!!!</div> <button type="button" onclick=“vermelho()">Muda Cor</button>
</body>
</html>
Mudar o conteúdo de um elemento HTML
Exemplo
29
<!– Exemplo -->
<html>
<body>
<script> function muda() {
document.getElementById("palavra").innerHTML = "LIGADO";
} </script>
<div id="palavra">DESLIGADO<div> <button type="button" onclick="muda()">Ligar</button>
</body>
</html>
Exemplo 6
30
<!– Exemplo -->
<html>
<body>
<script> function muda() {
document.getElementById("texto2").value = "Surpresa!";
} </script>
<input id="texto1" type="text" onchange="muda()" /><br/> <input id="texto2" type="text" />
</body>
</html>