Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 4 – Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade de Computação

Programação para InternetCurso de Gestão da Informação

Prof. Dr. Daniel A. FurtadoMódulo 4 – Introdução ao JavaScript

Universidade Federal de UberlândiaFaculdade de Computação

Programação para Internet - Prof. Dr. Daniel A. Furtado 2

JavaScript é uma linguagem de script orientada a objetos utilizada para desenvolvimento de aplicações Web;

A linguagem foi introduzida pela Netscape em 1995;

Os scripts em JavaScript são executados no lado do cliente, ou seja, no browser do usuário;

Linguagem JavaScript


Em geral, o JavaScript deve ser utilizado em situações que exigem dinamismo e respostas imediatas do usuário, como, por exemplo:

Inserir e manipular elementos multimídia, como ocultar ou redimensionar imagens;

Criar páginas dinâmicas com base em escolhas do usuário, datas ou outros dados;

Pré-validar formulários, sugerindo correções em campos, etc;

Entretanto, questões relacionadas à segurança da aplicação, como validação efetiva dos formulários, validação de usuários, etc, devem ser implementadas em linguagem no lado do servidor, como PHP, ASP, etc.

Linguagem JavaScript


Na página HTML, o código em JavaScript pode ser inserido em qualquer lugar, desde que esteja dentro do elemento <html></html>

Pode-se utilizar a tag <script>

<script type="text/javascript">

// código

</script>

Mas também é possível a inserção em arquivo separado com a extensão .js.

JavaScript é case sensitive;

Declarações em JavaScript devem terminar com o ponto-e-vírgula;

Código JavaScript e HTML


window.alert(“mensagem”); ou alert(“mensagem”);

Função que exibe uma caixa de diálogo contendo uma mensagem;

window é um objeto; alert é um método;

Exemplo 1 – Hello World!

1. <html>2. <head>3. <title>Exemplo javascript 01</title>4. <meta charset="UTF-8">

5. <script language="Javascript">6. alert("Olá, mundo!");7. </script>

8. </head>9. <body>10. JavaScript: Exemplo 111. </body>12. </html>


Escrevendo no documento com o método write;

Exemplo 2 – função write

1. <html>2. <body>

3. <h1>Outro exemplo simples</h1>

4. <script type="text/javascript">

5. document.write("Este texto foi gerado utilizando JavaScript"); 6. 7. </script>

8. </body>9. </html>


Comentários em JavaScript são inseridos exatamente como em C, C++ ou Java:

Utiliza-se // para um comentário de linha;

Comentários em bloco são da forma /* comentário */

JavaScript – Comentários

1. ...

2. <script>

3. /* Este eh um comentario de4. multiplas linhas em JavaScript */

5. alert('Olá, mundo!!');6. 7. // Este é um comentário de linha8. <!–- Este também é um comentário de linha aceito em JavaScript

9. </script>10. ...


Variáveis podem ser declaradas com ou sem a palavra var;

Porém, o seu tipo é determinado automaticamente;

JavaScript – Variáveis

1. <html>2. <body>

3. <h1>Outro exemplo simples</h1>


5. var a = 1; b = 2; c = 3;6. var delta = b*b - 4*a*c;7. document.write('O valor do discriminante eh: ' + delta);

8. var str = 'Programação para Internet'; // str é uma string9. var A = true; // A é uma variável booleana10. 11. </script>

12. </body>13. </html>


Alguns atributos HTML também podem incluir código JavaScript

Código JavaScript em Atributos de Eventos

1. <html>2. <head><title>Teste JavaScript</title></head>3. <body>

4. <button onClick="alert('Olá, amigo!')"> Clique aqui! </button>

5. </body>6. </html>


Operadores de Atribuição

Operador Significado

= Atribuição var x = 0;// atribui o valor 0 a x

+= Atribuição com soma var x += y; // equivalente a: x = x + y

-= Atribuição com subtração var x += y; // equivalente a: x = x - y

*= Atribuição com multiplicação var x *= y; // equivalente a: x = x * y

/= Atribuição com divisão var x /= y; // equivalente a: x = x / y

%= Atribuição com módulo var x %= y; // equivalente a: x = x % y


Operadores Aritméticos


+ Adição

- Subtração

* Multiplicação

/ Divisão

% Resto da divisão inteira (módulo)

++ Incremento

-- Decremento


Operadores Relacionais e Lógicos


== Comparação por igualdade

!= Diferente

> Maior que

>= Maior ou igual a

< Menor que

<= Menor ou igual a

&& “E” lógico

|| “Ou” lógico

! Negação lógica


Declaração if simples

Declaração if-else

Estrutura Condicional if-else

if (expressão) {// operações a serem executadas// caso 'expressao' seja verdadeira

}

if (expressão) {// operações a serem executadas caso 'expressao' seja verdadeira

}else {

// operações a serem executadas caso 'expressao' seja falsa}


Declarações if-else aninhadas

Estrutura Condicional if-else

if (expressao1) { // ops. a serem executadas caso 'expressao1' seja verdadeira}else if (expressao2) { // ops. a serem executadas caso 'expressao2' seja verdadeira}else if (expressao3) { // ops. a serem executadas caso 'expressao3' seja verdadeira}else { // ops. a serem executadas caso nenhuma expressão seja verdadeira}


Permite comparar uma expressão com diversas condições possíveis:

Estrutura Condicional switch-case

switch (expressao) {case condicao1:

// bloco de operaçõesbreak;

case condicao1:// bloco de operaçõesbreak;

...

case condicaon:// bloco de operaçõesbreak;

default:// bloco de operações

}


Exemplo:

Estrutura Condicional switch-case

switch (new Date().getDay()) {case 0:

day = "Sunday";break;

case 1:day = "Monday";break;

case 2:day = "Tuesday";break;

case 3:day = "Wednesday";break;

case 4:day = "Thursday";break;

case 5:day = "Friday";break;

case 6:day = "Saturday";break;

}

Repete um bloco de declarações enquanto uma expressão for verdadeira;

“operação”

Estrutura de Repetição while

while (expressao) {// operações a serem executadas// enquanto 'expressao' for// verdadeira

}

Semelhante à estrutura while, porém a condição é verificada após a execução do bloco de operações;

“operação”

Estrutura de Repetição do-while

do {

// Operações a serem executadas// enquanto 'expressao' for// verdadeira;// Este bloco de operações é sempre// executado pelo menos uma vez

} while (expressao)

A estrutura for compreende três partes principais: initialization: declaração executada uma única vez, antes do laço ter início;

test condition: condição que é verificada antes da execução do bloco de operações; se for verdadeira, o bloco é executado; se for falsa, o laço encerra.

iteration statement: executada após a execução do bloco de operações

Exemplo:

Estrutura de Repetição forfor (initialization; test condition; iteration statement) {

// operações a serem executadas caso // 'test condition' seja verdadeira

}

var soma = 0;for (var i=0; i<10; i++) { soma += i;}alert('A soma dos números de 0 a 10 é: ' + soma);


Sintaxe:

Exemplo:

Definindo Funções

function nomeFuncao(args) {

// operações da função

}

...function max(a, b) { if (a > b) return a; else return b;}...alert('O maior numero entre 5 e 8 eh: ' + max(5,8));


Caso um argumento deixe de ser fornecido na chamada da função, o parâmetro correspondente receberá o valor undefined;

Exemplo:

OBS: O esquecimento de um argumento poderá causar erros inesperados.

Definindo Funções – Argumentos Opcionais

1. function potencia(base, expoente) {2. if (expoente == undefined)3. expoente = 2;4.5. var resultado = 1;6. for (var i = 0; i < expoente; i++)7. resultado *= base;8. return resultado;9. }

10. console.log(potencia(2,5)); // a saída será 3211. console.log(potencia(3)); // a saída será 9


A função confirm apresenta uma caixa de diálogo solicitando uma confirmação do usuário, geralmente com os botões “Ok” e “Cancelar”;

Devolve verdadeiro quando o botão “Ok” é pressionado; ou falso caso seja o botão “Cancelar”;

Caixa de Diálogo de Confirmação - confirm

1. ...

2. if (confirm('Deseja ir para o site da UFU?'))3. window.location = "http://www.ufu.br";

4. ...


A função prompt apresenta uma caixa de diálogo com um campo para preenchimento;

Retorna a string correspondente ou null caso o usuário clique no botão “Cancelar”;

Caixa de Diálogo de Entrada - prompt

1. ...

2. var nome = prompt('Informe o seu nome:');3. if (nome != null)4. alert('Bem vindo, ' + nome);5. ...

JavaScript – Exemplo 31. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>Cabeçalhos</title>6. <script type="text/javascript">

7. function fatorial(n) {8. var total = 1;9. for (var i = 1; i <= n; i++) {

10. total = total * i;11. }12. 13. return total;14. }15.16. function calculaFatorial() {17. var num = prompt("Informe um numero inteiro positivo: ");18. var numInt = parseInt(num); // converte a string em inteiro19. var fat = fatorial(numInt);20. document.write('O fatorial eh: ' + fat);21. }

22. </script>23. </head>

24. <body>25. <input type="button" onclick="calculaFatorial()" value="Clique para

calcular">26. </body>27. </html>

24

A depuração do código JavaScript pode ser realizada nos principais navegadores;

No caso do Google Chrome, siga os passos a seguir:

Pressione a tecla F12;

Escolha a aba sources e selecione o arquivo contendo o script;

Clique na linha de código que deseja interromper a execução;

Recarregue a página (F5);

Tecle F10 para executar o script passo a passou ou F8 para continuar a execução até o próximo breakpoint;

Acompanhe o valor das variáveis no painel lateral.

Depurando o Código JavaScript

Depurando o Código JavaScript


O código JavaScript pode ser inserido em arquivo separado e referenciado no arquivo HTML;

Executando Código JavaScript Externo

1. <!DOCTYPE html>2. <html>3. <head><title>Cabeçalhos</title>4. <script type="text/javascript" src="script.js"></script></head>5. <body>6. <input type="button" onclick="calculaFatorial()" value="Clique para

calcular">7. </body>8. </html>

1. /* arquivo script.js */2. function fatorial(n) {3. var total = 1;4. for (var i = 1; i <= n; i++) {5. total = total * i;6. } 7. return total;8. }9.10. function calculaFatorial() {11. var num = prompt("Informe um numero inteiro positivo: ");12. var numInt = parseInt(num); // converte a string em inteiro13. var fat = fatorial(numInt);14. document.write('O fatorial eh: ' + fat);15. }


Em JavaScript, vetores (arrays) podem ser definidos colocando-se os elementos entre colchetes, separados por vírgula;

O primeiro elemento do array possui índice 0;

Os vetores são tratados como objetos; por exemplo, o número de elementos pode ser resgatado por meio da propriedade length;

Exemplo:

Vetores


2. var vetorDeNumeros = [4,1,6,3,8,1];3. var soma = 0;4. for (var i=0; i < vetorDeNumeros.length ; i++)5. soma = soma + vetorDeNumeros[i];6.7. alert('A soma dos elementos do vetor eh: ' + soma);8. 9. </script>


É possível ter vetores com elementos de tipos diferentes;

Vetores


2. var vet = [5,'a',3,'java',2];3. 4. console.log(vet[1]); // a saída será o caracter 'a'5. console.log(vet[2]) // a saída será o número 36.7. </script>


Em JavaScript, os vetores também podem ser utilizados como uma estrutura de dados pilha:

O método push insere um novo elemento no final (‘topo’) do vetor;

O método pop remove e retorna o último elemento do vetor;

Vetores


2. var vet = [];3.4. vet.push("Programacao");5. vet.push("para");6. vet.push("Internet");7. console.log(vet); // A saída será: ["Programacao", "para",

"Internet"]8.9. var ultimo = vet.pop();10. console.log(ultimo); // A saída será: 'Internet'11. console.log(vet); // A saída será: ["Programacao", "para"]12. 13. </script>


Document Object Model (DOM)

DOM: Document Object Model

É um modelo utilizado pelos navegadores no qual os elementos de uma página Web são representados como uma hierarquia de objetos;


<!DOCTYPE html><html><head><title>Minha página Web</title></head><body>

<h1>Minha página Web</h1><p>Primeiro parágrafo da página</p><p>Segundo parágrafo com um<a href="http://www.ufu.br">link</a>.</p></body></html>

Programação para Internet - Prof. Dr. Daniel A. Furtado32



A hierarquia de objetos de um documento também pode ser visualizada como uma árvore contendo nós internos e nós-folha;

No caso do exemplo anterior, temos:



Assim, tudo no documento HTML corresponde a um nó: O documento propriamente dito é um nó (do tipo document); Todos os elementos HTML, como <p>, <a>, etc., são nós

(do tipo element); Todos os atributos HTML são nós (do tipo attribute) Os textos dentro dos elementos HTML são nós (do tipo text) E até mesmo os comentários são nós (do tipo comment)



A estrutura de objetos do documento pode ser acessada por meio do objeto document, que é o nó raiz da hierarquia;

Um elemento específico no documento pode ser resgatado por meio do método getElementById de document;

O texto que compõe o elemento pode ser obtido pela propriedade innerHTML do elemento;

getElementById – Exemplo 11. <html>2. <head><title>Teste JavaScript</title></head>3. <body>4. Exemplo JavaScript-DOM5. <p>Base: <input type="text" id="base" size="10"></p>6. <p>Expoente: <input type="text" id="expoente" size="10"></p>7. <p><button onClick="calcularPotencia()">Calcular!</button>8. <p id="pResultado">O resultado aparecera neste paragrafo!</p>

9. <script type="text/javascript">10. function calcularPotencia() {11.12. var inputBase = document.getElementById('base');13. var inputExpo = document.getElementById('expoente');14.15. var base = parseInt(inputBase.value);16. var expo = parseInt(inputExpo.value);17.18. var res = 1;19. for (var i=0; i < expo; i++) {20. res = res * base;21. }22. document.getElementById('pResultado').innerHTML = res; 23. }24. </script>25. </body>26. </html>



getElementById – Exemplo 2

1. <!DOCTYPE html>2. <html>3. <body>4. 5. <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>6. <button onclick="myFunction()">Change link</button>7. 8. <script>9. function myFunction() {10. document.getElementById("myAnchor").innerHTML = "W3Schools";11. document.getElementById("myAnchor").href =

"http://www.w3schools.com";12. document.getElementById("myAnchor").target = "_blank";13. }14. </script>

15. </body>16. </html>

Ref.: www.w3schools.com/


Atributos CSS também podem ser explorados com JavaScript

Atenção para atributos com hífen

Alterando Estilos CSS

1. <!DOCTYPE html>2. <html>3. <head><title>CSS e JavaScript</title></head>4. <body>5. <div id="divTexto" onClick="colorir()">Clique neste texto para

mudar seu estilo!</div>6.7. <script type='text/javascript'>8. function colorir() {9. var elementoDiv = document.getElementById("divTexto");10. elementoDiv.style.backgroundColor = '#AA0000';11. elementoDiv.style.color='white';12. elementoDiv.style.textAlign='center';13. }14. </script>15.16. </body>17. </html>

Validação de Formulários1. <!DOCTYPE html>2. <html>3. <head><title>Validando Formulários com JavaScript</title>4. <script type="text/javascript">

5. function validaForm() {6. var usuario = document.forms["form1"]["usuario"].value;7. if (usuario == null || usuario == "") {8. alert("O campo usuario deve ser preenchido");9. usuario.focus();10. return false;11. }12. var senha = document.forms["form1"]["senha"].value;13. if (senha == null || senha == "") {14. alert("O campo senha deve ser preenchido");15. return false;16. }17.18. return true;19. }20. </script>21. </head>22. <body>

23. <form name="form1" action="login.php" onSubmit="return validaForm()" method="post">

24. Usuário: <br> <input type="text" name="usuario"> <br>25. Senha: <br> <input type="password" name="senha"> <br><br>26. <input type="submit" value="Enviar">27. </form></body></html>


Validação de Formulários

1. <!DOCTYPE html>2. <html>3. <head><title>Validando Formulários com JavaScript</title>4.5. <form name="form1" action="login.php" method="post">

6. Usuário: <br> <input type="text" name="usuario" required> <br>7. Senha: <br> <input type="password" name="senha" required> <br>8.9. <input type="submit" value="Enviar">

10. </form>11. </body>12. </html>


Atributo required


www.eloquentjavascript.net

www.w3schools.com/js/

Referências

http://www.w3.org/Style/Examples/011/firstcss

Documents

Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 4 – Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade de Computação