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

Tamanho: px

Começar a partir da página:

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

Vitorino Garrido Vilaverde
7 Há anos
Visualizações:

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

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

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

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

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

6 Dynamic HTML

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

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

9 Bibliografía EGUÍLUZ, J. Introducción a JavaScript Disponible en: < pp HERNÁN, M. Programación Web Avanzada Cap. 3 y 4. Microsoft. Referencia do linguagem JScript.

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

11 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).

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

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

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

15 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 ); />

16 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(); />

17 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>

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

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

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

21 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

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

23 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 Resta Incremento Decremento

24 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

25 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

26 Operadores lógicos Descripción Símbolo Exemplo Negação!!(a = b) And && (a == b) && (b >= c) Or (a == b) (b!> c)

27 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

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

29 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; }

30 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 ;

31 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]; }

32 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)

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

34 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)

35 Funções predefinidas Para o trabalho com arrays umarray.length //uma propriedad umarray.pop() umarray.push(umelemento, outroelemento,...) umarray.join(untextoseparador) umarray.reverse()

36 Funções predefinidas Para o trabalho com números isnan(umvalor) parseint(umvalor) parsefloat(umvalor) umnumero.tofixed(umacantidadededecimais) umelemento.focus() typeof(umavariável) Outras

37 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);

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

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

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

41 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 }

42 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 Exemplo:

Documentos relacionados

Introdução a Javascript

Introdução a Javascript André Tavares da Silva [email protected] Introdução Javascript Javascript é uma linguagem que permite injetar lógica em páginas escritas em HTML Podem estar "soltos" ou atrelados