Tecnologias para apresentação de dados - Java Script. Aécio Costa

Tamanho: px

Começar a partir da página:

Download "Tecnologias para apresentação de dados - Java Script. Aécio Costa"

Caio Anjos Sampaio
10 Há anos
Visualizações:

1 Tecnologias para apresentação de dados - Java Script Aécio Costa

3 Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor. Principal linguagem para programação client-side em navegadores web.

interagissem com o usuário sem a necessidade deste script passar

4 JavaScript foi criada pela Netscape em parceria com Sun Microsystems; Seu principal propósito é adicionar interatividade a uma página Web; JavaScript é uma linguagem desenvolvida para rodar no lado cliente; Seu funcionamento depende das funcionalidades hospedadas no navegador do usuário.

JavaScript é uma linguagem desenvolvida para rodar no lado cliente; Seu

5 Características Tipagem dinâmica Não existe necessidade de declarar tipos. Orientada a objetos OOP é um paradigma (estilo) de programação que usa analogia com objetos do mundo real e suas caracter í sticas para definir estruturas de dados agrupados em atributos e métodos. Interpretada Não há necessidade de passar pelo processo de compilação.

objetos do mundo real e suas caracter í sticas para definir estruturas de dados

6 O que podemos com Java Script? Controlar o comportamento do navegador em diversos aspectos: Criar janelas pop-up; Apresentar mensagens ao usuário; Alterar as dimensões do navegador; Interferir na barra de status; Retirar menus; Fechar e abrir janelas; Dentre outros.

janelas pop-up; Apresentar mensagens ao usuário; Alterar as

7 JavaScript é capaz de acessar os campos e valores digitados em um formulário HTML; Pode-se também: Validar os dados para checar inconsistências; Realizar cálculos; Fornecer dicas de preenchimento dos campos.

8 ... e o que não podemos? Acessar Banco de Dados no Servidor; Criar arquivos; Etc.

9 Java Script no HTML Para inserir par á grafos de programa ç ã o dentro do HTML é necessário identificar o início e o fim do set de JavaScript, da seguinte forma: <script> Set de instruções </script> Procedimento a ser adotado em qualquer local da página.

de JavaScript, da seguinte forma: <script> Set de instruções

10 Hello World Java Script <html> <head> <script> alert('hello World!'); </script> </head> <body> </body> </html>

11 Outra maneira de implementar funções em Java Script é utilizando recursos do HTML. Eventos de Atributos HTML

12 Listagem de alguns Eventos do HTML

13 Onclick Disparado quando o usuário clica no botão. <input onclick="alert('botão Clicado!');" type="button" value="show Dialog">

14 Criando funções function Nome da função(parametros){ //Implementação }

15 Função <script> function showclick(){ alert('você Clicou!'); } </script> <input onclick="showclick()" type="button" value="show Dialog with Function">

16 onkeyup <script> function showdialog(){ alert('você digitou!'); } </script> Digite e Mostre um Dialog <input type="text" onkeyup="showdialog()">

17 onchange <script> function changetext(){ alert('texto Mudou!'); } </script> Mudando Texto <input type="text" id="fname" onchange="changetext()">

18 onfocus <script> function changecolor(input){ input.style.background = "yellow"; } </script>  Enter your name: <input type="text" onfocus="changecolor(this)">

19 onmouseover e onmouseout <script> function changecolorover(input){ input.style.color='red'; } function changecolorout(input){ input.style.color='black'; } </script> <h1 onmouseover="changecolorover(this)" onmouseout="changecolorout(this)"> Texto irá mudar de cor! </h1>

20 date <script> function displaydate(){ document.getelementbyid("hora").innerhtml=date(); } </script> <p id="hora">click no Botão e veja a Hora!</p> <button type="button" onclick="displaydate()">display Date</button>

21 ondblclick <script> function copytext(){ document.getelementbyid("field2").value = document.getelementbyid("field1").value; } </script> Field1: <input type="text" id="field1" value="hello World!"><br> Field2: <input type="text" id="field2"> <br><br> <button ondblclick="copytext()">copy Text with double-click</button>

22 Outras Funções em JavaScript

23 confirm function showconfirmdialog(){ var response = confirm("deseja continuar?"); if (response == true){ alert('dados Salvos'); }else{ alert('cancelado'); } }

24 prompt function showprompt(){ var value = prompt("olá, digite o valor abaixo","seu nome"); alert('obrigado por participar '+ value); }

25 Open new windows function opennewwindow(){ open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menu bar=no,scrollbars=no,resizable=no'); }

26 Exercício Construa um formulário de cadastro onde exista as seguintes funções: Sempre que um campo receber o foco ele deve mudar a cor; No botão de cadastro, pergunte ao usuário se ele deseja confirmar os dados para cadastro, se sim abra um Popup (nova janela) com a mensagem dizendo que os dados foram cadastrados; Deve haver um campo nome e outro sobrenome onde o usuário não pode digitar os mesmos valores. Entrega Individual

Documentos relacionados

Primeiro contato com JavaScript

Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos