JAVASCRIPT. Desenvolvimento Web I

Tamanho: px

Começar a partir da página:

Download "JAVASCRIPT. Desenvolvimento Web I"

Isabel Gama
6 Há anos
Visualizações:

1 JAVASCRIPT Desenvolvimento Web I

2 JavaScript HTML Conteúdo - ( Markup language) CSS Apresentação (Style Sheet language) JavaScript (Programming language) Uso de JavaScript : Validação de formulários, galerias de fotos, janelas de avisos, banners rotativos, janelas de publicidade, menus popup. Otimizar o desempenho de um site: a melhor maneira de fazer isso é reduzindo a comunicação com o servidor. A JavaScript ajuda nesse sentido validando os comandos do usuário pelo cliente. Ele apenas envia pedidos para o servidor depois de rodar as verificações iniciais de validação. Como resultado, o uso de recursos e a quantidade de pedidos para o servidor diminuem significantemente.

3 Onde escrever código Javascript? <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> <title>título da Página (Estrutura básica de uma página com HTML 5)</title> <link href="css/seu-stylesheet.css" rel="stylesheet"/> <script > </script> </head> <body>... </body> </html>

4 Exemplo na página <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>time right now is: </title> <script> var time = new Date(); alert(time.gethours() + ":" + time.getminutes() + ":" + time.getseconds()); </script> </head> <body> </body> </html>

5 JavaScript em arquivo externo Às vezes, inserir JavaScript no HTML de forma direta pode não parecer o melhor jeito de ligar uma linguagem à outra. Isso porque porque alguns scripts JS precisam ser usados em múltiplas páginas e, por isso, é melhor manter o código JavaScript em arquivos separados. Uma forma mais aceitável de inserir JavaScript no HTML é pela importação externa de um arquivo. Esses arquivos podem ser referenciados de dentro de documentos HTML, assim como referenciamos documentos CSS. Alguns dos benefícios de adicionar um código JS em arquivos separados são: Quando o código HTML e o código JavaScript são separados, o princípio de design da separação de interesses é cumprido e torna tudo muito mais sustentável e reutilizável. A leitura e a manutenção do código ficam muito mais fáceis de se fazer. Arquivos JavaScript em cache melhoram o desempenho geral de um site ao diminuir o tempo que as páginas carregam.

6 JavaScript em arquivo externo Podemos referenciar um arquivo JavaScript dentro do HTML dessa forma abaixo: <script src= meuscript.js > </script>

7 Operadores

8 Variáveis Javascript Para criar variáveis : let nome= André ; let valor = ; let fumante = false; let permite que você declare variáveis limitando seu escopo no bloco, instrução, ou em uma expressão na qual ela é usada. Isso é inverso da keyword var, que define uma variável globalmente ou no escopo inteiro de uma função, independentemente do escopo de bloco.

9 Exemplo <!DOCTYPE html> <html> <head> <title>usando eventos no Javascript</title> <script> let a= 10; let b=20; alert(10+20); </script> </head> <body> </body> </html>

10 Usando estrutura while

11 Funções

12 Eventos Os eventos são basicamente um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. Muitas das interações do usuário que está visitando sua página com o conteúdo do seu site podem ser consideradas eventos. onfocus o elemento é focado onclick o elemento é clicado pelo usuário

13 Exemplo de eventos <!DOCTYPE html> <html> <head> <title>usando eventos no Javascript</title> <script> function myfunction() { var x=document.getelementbyid("fname"); x.value=x.value.touppercase(); } </script> </head> <body> Insira seu Nome: <input type="text" id="fname" onchange="myfunction()"> <p> Ao clicarmos fora do input text o texto escrito nele ficará todo em caixa alta.</p> </body> </html>

14 Exemplo : <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>dirigir</title> <script type="text/javascript"> function validar() { let idade = formulario.idade.value; <body> <form name="formulario"> <fieldset><legend>teste</legend> Informe sua idade: <input type="text" name="idade"> <input type="submit" onclick="validar()"> </fieldset> </form> </body> </html> if (idade == "") { alert('preencha o campo com sua idade'); formulario.idade.focus(); return false; } } </script> </head>

15 Primeiro Programa com Javascript Fazer um formulário HTML com o campo idade, com <input type= text name= idade > Verificar se o valor digitado é maior ou igual a 18. Se for, enviar a mensagem : Pode dirigir Colocar a consistência para não permitir campo em branco

16 function validar() { let idade = formulario.idade.value; Dica : if (idade >= 18) { alert('pode dirigir'); formulario.idade.focus(); return true; } }

Documentos relacionados

HTML 5 TAGS BÁSICAS E ESTRUTURAIS. Prof. Rosemary Melo

HTML 5 TAGS BÁSICAS E ESTRUTURAIS Prof. Rosemary Melo TAGS BÁSICAS DA LINGUAGEM TAG Indica que está criando uma página html TAG Área contém informação sobre a página TAG especifica