introdução à html dinámico. o linguagem javascript.introdução à linguagem javascript....
TRANSCRIPT
Introdução à HTML Dinámico.
O linguagem JavaScript.
Conferencia 7
MSc. Yoenis Pantoja Zaldívar
XHTML
– regras, etiquetas
CSS
– selectores, propriedades (modelo de
caixa, formateo visual)
O que já sabemos…
¿Pode-se fazer isto com XHTML e
CSS?
Situação 1
¿Pode-se fazer isto com XHTML e
CSS?
Situação 2
Situação 3
¿Pode-se fazer isto com XHTML e CSS?
Dynamic HTML
HTML Dinámico.
Introdução à linguagem JavaScript.
– Variáveis
– Operadores
– Estruturas de control de fluxo
– Funções
Resumo
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
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
DHTML (Dynamic HTML)
Conjunto de técnicas que permiten
criar Websites interactivos
XHTML CSS
JavaScriptLinguagem Script
DOM
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
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?
Manejado por eventos.
Independente de qualquer plataforma.
Fácil de aprender.
Diferença maiúsculas e minúsculas
(case sensitive)
Características de JavaScript
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.
// 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
// 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();”/>
// 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
Comentarios
Variáveis
Operadores
Estruturas de control de fluxo
Funciones e propriedades
Elementos básicos de JavaScript
// Isto é um comentario de linha
/* Todo este parágrafo
é um comentario. */
Comentarios
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
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
Carácter Significado
\n Nova linha
\t Tabulador
\’ Aspa simple
\” Aspa doble
\\ Back slash
Caracteres especiais
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
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
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
Descripción Símbolo Exemplo
Negação ! !(a = b)
And && (a == b) && (b >= c)
Or || (a == b) || (b !> c)
Operadores lógicos
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
Descripção Operador Exemplo Resultado
Concatenar
dois textos+ “casa”+”bonita” “casa bonita”
Operadores especiais
// 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;
}
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”;
// 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];
}
// 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)
function quadrado (num) {
num *= num;
return num;
}
var a = 2;
var r = quadrado(a);
Funções de usuario
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)
Funções predefinidas
Para o trabalho com arrays
umArray.length //uma propriedadumArray.pop()
umArray.push(umElemento, outroElemento, ...)
umArray.join(unTextoSeparador)umArray.reverse()
Funções predefinidas
Para o trabalho com números
isNaN(umValor)parseInt(umValor)
parseFloat(umValor)
umNumero.toFixed(umaCantidadeDeDecimais)
Outras
umElemento.focus()
typeof(umaVariável)
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
Eventos
onchange
onclick
ondblclick
onfocus
onblur
onkeypress
onkeyup
onload
onsubmit
onkeydown
onmousemove
onmouseout
onmouseover
onmouseup
onmousedown
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
// Variante 1
document.nomeformulario.elements[indice]
// Variante 2
document.forms[indice].nomecampo
// Variante 3
document.nomeformulario.nomecampo
Acesso à campos de formulário
// 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
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