Introdução à HTML Dinámico. O linguagem JavaScript.

Introdução à HTML Dinámico. O linguagem JavaScript. Conferencia 7 MSc. Yoenis Pantoja Zaldívar

O que já sabemos XHTML regras, etiquetas CSS selectores, propriedades (modelo de caixa, formateo visual)

Situação 1 Pode-se fazer isto com XHTML e CSS?

Dynamic HTML

Resumo HTML Dinámico. Introdução à linguagem JavaScript. Variáveis Operadores Estruturas de control de fluxo Funções

Objetivos 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.

Bibliografía 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.

DHTML (Dynamic HTML) Conjunto de técnicas que permiten criar Websites interactivos XHTML CSS DOM JavaScript Linguagem Script

Linguagems Script 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).

JavaScript - Que permite? 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.

Características de JavaScript Manejado por eventos. Independente de qualquer plataforma. Fácil de aprender. Diferença maiúsculas e minúsculas (case sensitive)

Formas de utilizar JavaScript Num elemento XHTML O código se escreve no valor de um evento. No mesmo documento O código se escreve dentro de uma etiqueta. <script> </script> Desde um arquivo externo Arquivo com extensão.js que debe incluirse no documento.

Formas de utilizar JavaScript // 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> <input type= button value= Mostrar Mensagem onclick= Mensaje(); />

Formas de utilizar JavaScript // Desde um arquivo externo <head> <script type= text/javascript src= exemplo.js > </script> </head> <body> <input type= button value= Mostrar Mensaje onclick= Mensaje(); /> </body>

Elementos básicos de JavaScript Comentarios Variáveis Operadores Estruturas de control de fluxo Funciones e propriedades

Comentarios // Isto é um comentario de linha /* Todo este parágrafo é um comentario. */

Declaração de variáveis 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.

Valores que reconhece JavaScript Números, como 42 ou 3.14 Lógicos, como true, false Texto (string), como Viva Angola Valor nulo, null Não definido, undefined

Caracteres especiais Carácter Significado \n Nova linha \t Tabulador \ Aspa simple \ Aspa doble \\ Back slash

Operadores aritméticos 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 de asignação 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 comparaçã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 lógicos Descripción Símbolo Exemplo Negação!!(a = b) And && (a == b) && (b >= c) Or (a == b) (b!> c)

Operadores trabalho com Objetos Descripção Símbolo Exemplo Criar um objeto new a = new Array() Eliminar um objeto delete delete a Referenciar um objeto atual this

Operadores especiais Descripção Operador Exemplo Resultado Concatenar + casa + bonita casa bonita dois textos

Estruturas de control de fluxo // Condicionais if (erros) { // mostrar mensagem } else { // continuar } switch (exp) { case um : val = 1; break; case dois : val = 2; break; default: val = 0; }

Trabalho com arrays Declaração de arrays //arrays com elementos do 0 ao 19 var Lista = new Array(20); Para aumentar a dimensão do array. Lista[25] = outro texto para o array ;

Estruturas de control de fluxo // ciclo for for (var i = 0; i < longitudarreglo; i++) { suma += arreglo[i]; } // ciclo for in for (var i in arreglo) { suma += arreglo[i]; }

Estruturas de control de fluxo // ciclo while var i = 0; while (i <= 4) { s += arreglo[i]; i++; } // ciclo do while var i = 0; do { s += arreglo[i]; i++; } while (i <= 4)

Funções de usuario function quadrado (num) { num *= num; return num; } var a = 2; var r = quadrado(a);

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 propriedad umarray.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) umelemento.focus() typeof(umavariável) Outras

Funções para mensagems 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);

Eventos onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onsubmit onmousedown onmousemove onmouseout onmouseover onmouseup

Objetos nativos e funções 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.

Acesso à campos de formulário // Variante 1 document.nomeformulario.elements[indice] // Variante 2 document.forms[indice].nomecampo // Variante 3 document.nomeformulario.nomecampo

Acesso à propriedades de objetos // Para um campo de texto document.forms[0].txt_nome.value = Pedro ; // Para um checkbox if(document.forms[0].cbx_lembrar.checked) { // instruções }

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