Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript....
Transcript of Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript....
![Page 1: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/1.jpg)
Introdução à HTML Dinámico.
O linguagem JavaScript.
Conferencia 7
MSc. Yoenis Pantoja Zaldívar
![Page 2: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/2.jpg)
XHTML
– regras, etiquetas
CSS
– selectores, propriedades (modelo de
caixa, formateo visual)
O que já sabemos…
![Page 3: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/3.jpg)
¿Pode-se fazer isto com XHTML e
CSS?
Situação 1
![Page 4: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/4.jpg)
¿Pode-se fazer isto com XHTML e
CSS?
Situação 2
![Page 5: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/5.jpg)
Situação 3
¿Pode-se fazer isto com XHTML e CSS?
![Page 6: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/6.jpg)
Dynamic HTML
![Page 7: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/7.jpg)
HTML Dinámico.
Introdução à linguagem JavaScript.
– Variáveis
– Operadores
– Estruturas de control de fluxo
– Funções
Resumo
![Page 8: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/8.jpg)
Caracterizar o HTML Dinámico
mediante as principais técnicas que o
compôem.
Identificar os elementos básicos do
linguagem JavaScript através de sua
sintaxis básica.
Objetivos
![Page 9: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/9.jpg)
EGUÍLUZ, J. Introducción a
JavaScript. 2009. Disponible en:
<http://progwebisutic.wordpress.com> pp. 6-69
HERNÁN, M. Programación Web Avanzada. 2007. Cap. 3 y 4.
Microsoft. Referencia do linguagem JScript.
Bibliografía
![Page 10: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/10.jpg)
DHTML (Dynamic HTML)
Conjunto de técnicas que permiten
criar Websites interactivos
XHTML CSS
JavaScriptLinguagem Script
DOM
![Page 11: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/11.jpg)
Usados para incluir código no cliente.
Linguagems interpretados (navegador).
Não tem um control estricto de tipos de
dados.
JavaScript é o mais usado (Jscript y
VBScript).
Linguagems Script
![Page 12: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/12.jpg)
Agregar dinamismo (maior
interacção) às páginas.
Validar os dados introduzidos num
formulário.
Aceder aos objetos da página para
modificar seu conteúdo.
JavaScript - ¿Que permite?
![Page 13: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/13.jpg)
Manejado por eventos.
Independente de qualquer plataforma.
Fácil de aprender.
Diferença maiúsculas e minúsculas
(case sensitive)
Características de JavaScript
![Page 14: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/14.jpg)
Formas de utilizar JavaScript
Num
elemento
XHTML
No mesmo
documento
Desde um
arquivo
externo
O código se
escreve no
valor de um
evento.
O código se
escreve dentro
de uma etiqueta.
<script>
</script>
Arquivo com
extensão .js
que debe
incluirse no
documento.
![Page 15: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/15.jpg)
// Num elemento XHTML
<input type=“button” value=“Mostrar Mensagem”
onclick=“alert(‘As provas de Programação são
muito fácil para os estudantes que estudam
sempre’);” />
Formas de utilizar JavaScript
![Page 16: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/16.jpg)
// Incluído no mesmo documento
<script type=“text/javascript”>
function Mensaje() {
alert(‘Bem-vindo a meu website’);
}
</script>
Formas de utilizar JavaScript
<input type=“button” value=“Mostrar Mensagem”
onclick=“Mensaje();”/>
![Page 17: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/17.jpg)
// Desde um arquivo externo
<head>
<script type=“text/javascript” src=“exemplo.js”>
</script>
</head>
<body>
<input type=“button” value=“Mostrar Mensaje”
onclick=“Mensaje();”/>
</body>
Formas de utilizar JavaScript
![Page 18: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/18.jpg)
Comentarios
Variáveis
Operadores
Estruturas de control de fluxo
Funciones e propriedades
Elementos básicos de JavaScript
![Page 19: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/19.jpg)
// Isto é um comentario de linha
/* Todo este parágrafo
é um comentario. */
Comentarios
![Page 20: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/20.jpg)
var x;
var variable = 12;
variable = 12;
var a,b,c;
// Uma variável que não tem sido inicializada tem
o valor de undefined.
Declaração de variáveis
![Page 21: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/21.jpg)
Números, como 42 ou 3.14
Lógicos, como true, false
Texto (string), como “Viva Angola”
Valor nulo, null
Não definido, undefined
Valores que reconhece JavaScript
![Page 22: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/22.jpg)
Carácter Significado
\n Nova linha
\t Tabulador
\’ Aspa simple
\” Aspa doble
\\ Back slash
Caracteres especiais
![Page 23: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/23.jpg)
Descripção Símbolo Exemplo Resultado
Multiplicação * 2*2 4
Divisão / 2/2 1
Resto de uma
divisão entera% 2%2 0
Suma + 2+2 4
Resta - 2-2 0
Incremento ++ 2++ 3
Decremento -- 2-- 1
Operadores aritméticos
![Page 24: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/24.jpg)
Operador Significado
x= y x = y
x += y x = x + y
x /= y x = x / y
x %= y x = x % y
x -= y x = x – y
x *= y x = x * y
Operadores de asignação
![Page 25: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/25.jpg)
Descripção Símbolo Exemplo
Igualdade == a==b
Desigualdade != a!=b
Menor que < a<b
Maior que > a>b
Menor ou igual que <= a<=b
Maior ou igual que >= a>=b
Operadores de comparação
![Page 26: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/26.jpg)
Descripción Símbolo Exemplo
Negação ! !(a = b)
And && (a == b) && (b >= c)
Or || (a == b) || (b !> c)
Operadores lógicos
![Page 27: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/27.jpg)
Descripção Símbolo Exemplo
Criar um objeto new a = new Array()
Eliminar um objeto delete delete a
Referenciar um objeto
atual
this
Operadores trabalho com Objetos
![Page 28: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/28.jpg)
Descripção Operador Exemplo Resultado
Concatenar
dois textos+ “casa”+”bonita” “casa bonita”
Operadores especiais
![Page 29: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/29.jpg)
// Condicionais
if (erros) {
// mostrar mensagem
}
else {
// continuar
}
Estruturas de control de fluxo
switch (exp) {
case ‘um’ :
val = 1;
break;
case ‘dois’ :
val = 2;
break;
default:
val = 0;
}
![Page 30: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/30.jpg)
Trabalho com arrays
//arrays com elementos do 0 ao 19
var Lista = new Array(20);
Para aumentar a dimensão do array.
Declaração de arrays
Lista[25] = “outro texto para o array”;
![Page 31: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/31.jpg)
// ciclo for
for (var i = 0; i < longitudArreglo; i++) {
suma += arreglo[i];
}
Estruturas de control de fluxo
// ciclo for in
for (var i in arreglo) {
suma += arreglo[i];
}
![Page 32: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/32.jpg)
// ciclo while
var i = 0;
while (i <= 4) {
s += arreglo[i];
i++;
}
Estruturas de control de fluxo
// ciclo do while
var i = 0;
do {
s += arreglo[i];
i++;
} while (i <= 4)
![Page 33: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/33.jpg)
function quadrado (num) {
num *= num;
return num;
}
var a = 2;
var r = quadrado(a);
Funções de usuario
![Page 34: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/34.jpg)
Funções predefinidas
Para o trabalho com textos
umTexto + outroTexto //um operador
umTexto.length //esta é uma propriedad
umTexto.toUpperCase()
umTexto.toLowerCase()umTexto.charAt(posição)
umTexto.indexOf(texto)umTexto.substring(posiçãoInicial, posiçãoFinal)
umTexto.split(umTextoSeparador)
![Page 35: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/35.jpg)
Funções predefinidas
Para o trabalho com arrays
umArray.length //uma propriedadumArray.pop()
umArray.push(umElemento, outroElemento, ...)
umArray.join(unTextoSeparador)umArray.reverse()
![Page 36: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/36.jpg)
Funções predefinidas
Para o trabalho com números
isNaN(umValor)parseInt(umValor)
parseFloat(umValor)
umNumero.toFixed(umaCantidadeDeDecimais)
Outras
umElemento.focus()
typeof(umaVariável)
![Page 37: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/37.jpg)
alert(“A operação foi realizada com éxito”);
var res = confirm(“Deseja eliminar o valor?”) ;
if (res) { /* eliminar */ }
else { /* não fazer nada */ }
var n = prompt(“Entre um número:”);
alert(“O quadrado é “ + n*n);
Funções para mensagems
![Page 38: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/38.jpg)
Eventos
onchange
onclick
ondblclick
onfocus
onblur
onkeypress
onkeyup
onload
onsubmit
onkeydown
onmousemove
onmouseout
onmouseover
onmouseup
onmousedown
![Page 39: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/39.jpg)
Em JavaScript existe um grupo de
objetos predefinidos como são: Array,
Date, Math, Number, String, RegExp,
Boolean, Function.
Eles permiten acceder a muitas das
funções normales dos linguagems
Array.Length(), Math.abs(), Math.sin(),
String.indexOf(), String.concat(), etc.
Objetos nativos e funções
![Page 40: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/40.jpg)
// Variante 1
document.nomeformulario.elements[indice]
// Variante 2
document.forms[indice].nomecampo
// Variante 3
document.nomeformulario.nomecampo
Acesso à campos de formulário
![Page 41: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/41.jpg)
// Para um campo de texto
document.forms[0].txt_nome.value = ‘Pedro’;
// Para um checkbox
if(document.forms[0].cbx_lembrar.checked) {
// instruções
}
Acesso à propriedades de objetos
![Page 42: Introdução à HTML Dinámico. O linguagem JavaScript.Introdução à linguagem JavaScript. –Variáveis –Operadores –Estruturas de control de fluxo –Funções Resumo Caracterizar](https://reader030.fdocumentos.tips/reader030/viewer/2022040210/5e65a6b6340ac244f46daee3/html5/thumbnails/42.jpg)
Tarefa
Valide um campo de texto para introducir
uma data valida com o seguinte formato:
dd/mm/yyyy (tres valores numéricos separados por
“/”), o primeiro valor debe estar entre 01
e 31, o segundo valor debe estar entre
01 e 12 e o terceiro entre 1000 e 2016.
Exemplo: 15-08-2015