JavaScript - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/exe/...design_tii:javascript.pdf · ECMAScript e Java •Java e JavaScript são linguagens de programação distintas.

JavaScript

Design web e arquitetura da informação

Curso técnico de informática para internet

Introdução

• JavaScript é uma linguagem de programação criada em 1995 para adicionar interatividade às páginas web.

• Atualmente JavaScript é utilizada com diversas finalidades, inclusive programação no lado servidor. Neste curso iremos focar no lado do navegador.

2

ECMAScript e Java

• Java e JavaScript são linguagens de programação distintas.

• Java é uma linguagem de programação e plataforma de desenvolvimento de propósito geral pertencente à Oracle.

• ECMAScript é uma linguagem de programação baseada em scripts padronizada pela ECMA Internacional. JavaScript é aderente à especificação ECMA.

3

Características

• Suporta programação orientada a objetos (sem classes).

• Tipagem dinâmica (o tipo das variáveis não precisa ser declarado e este pode mudar).

• Possui suporte à programação funcional.

• Interpretada.

• Sintaxe similar à C/C++/C#/Java.

4

Codificação

• Pode ser realizada no console do navegador (geralmente para testes) ou como conteúdo da tag script.

"Casa";

"Casa".length;

10+2;

5*3;

5

Variáveis

• Podem ser globais ou locais (usa a instrução var). Dica: sempre use var.

• O tipo é determinado pelo valor atribuído.

nome = "Paulo";

var idade = 17;

var ok = true;

console.log(ok);

6

Tipos primitivos

• number: valores numéricos inteiros ou de ponto flutuante.var x = 10;var y = 5.3;typeof y;

• string: sequência de caracteres. Podem ser utilizadas aspas simples ou duplas.var nome = "Ana";var cidade = 'Tangará';

• boolean: tipo lógico (true ou false).var ok = false;

7

Tipos primitivos

• undefined: representa um valor indefinido. Variáveis não inicializadas armazenam undefined.

var z;

console.log(z); //undefined

8

Operadores aritméticos

• Idênticos a C/C++/C#:

9

+ Soma -= x -= 3 x = x – 3

- Subtração *= x *=3 x = x * 3

* Multiplicação /= x /= 3 x = x / 3

/ Divisão %= x %= 3 x = x % 3

% Módulo ++ x++ x = x + 1

+= x +=3 x = x + 3 -- x-- x = x - 1

Operadores lógicos

• Idênticos a C/C++/C#:

10

E (AND) &&

Ou (OR) ||

Negação (NOT) !

Operadores relacionais

Maior que >

Maior ou igual que >=

Menor que <

Menor ou igual que <=

Igualdade =====

Diferença !=!==

11


• Os operadores === e !== realizam a comparação sem realizar conversão.

1 === 1 true

1 === '1' false

1 !== 1 false

1 !== '1' true

12


• Os operadores == e != realizam conversão de tipo antes da comparação.

1 == 1 true

1 == '1' true

1 != 1 false

1 != '1' false

13

Estruturas condicionais

• if/else

• switch

14

Estruturas de repetição

• Como em C# (mas sem foreach):

– for

– while

– do/while

15

Exercícios

1.1) Escreva um script para gerar os sete primeiros múltiplos de 3.

1.2) Escreva um programa para gerar os vinte primeiros termos da sequência de Fibonacci.

16

Funções

• Funções são como métodos. No entanto, funções não são associadas a um objeto.

• Sintaxe para definição de funções:function nome_da_função(argumento1, argumento2, ...){//código da função

}

• Exemplo:function olaMundo(nome){console.log('Olá ' + nome);

}

17

Funções

• Funções podem ser invocadas:

– Através do console;

– Por código JavaScript;

– Por eventos;

18

Exemplo

function dobro(x){

return x * 2;

}

function imprimir(){

var v = dobro(5);

console.log(v);

}

19

Arrays

• Sintaxe para definição:– Array vazio:

var a = [];

– Array com elementos: var b = [1, 3, 5];var c = ['Manga', 'Banana', 'Goiaba'];var d = [2, 'Manga', true, 9.6];

• Em JS, arrays:– São heterogêneos;– São dinâmicos;– Usam zero como índice do primeiro elemento;

20

Arrays

• Manipulando elementos:var a = ['a', 'c'];

console.log( a[0] ); //leitura

a[1] = 'b'; //substituição

a[2] = 'c'; //adição

a[5] = 'd'; //adição (posições intermediárias

//recebem undefined)

21

Arrays

• Propriedades e métodos mais utilizados:– length→ quantidade de elementos do array.

– valueOf() e toString() → retorna os elementos do arraycomo uma string. Usa vírgula como separador.

– join(sep)→ retorna os elementos do array como uma string. Usa sep como separador.

– pop()→ retorna e remove o último elemento do array.

– push(arg)→ insere arg como o último elemento do array.

• Mais métodos em http://www.w3schools.com/jsref/jsref_obj_array.asp

22

Exercícios

2.1) Escreva uma função que imprima no console os n primeiros termos da série Fibonacci, sendo que n é um argumento da função.

2.2) Escreva uma função que retorna um arraycontendo os vinte primeiros múltiplos de 4.

23

Eventos

• Eventos são um recurso extremamente utilizado em JS.

• Eventos são acontecimentos detectados pelo navegador. Exemplos: clique de mouse, carregamento de página, fechamento de janela.

• O gerador de um evento pode ser o usuário ou o próprio navegador.

• A importância dos eventos está na capacidade de executar uma função JS assim que um evento ocorrer.

24

Eventos

• Exemplo 1<!DOCTYPE html><html><head></head><body>

<button onclick="console.log('Clique')">OK

</button></body></html>

25

Eventos

• Exemplo 2:<head>

<script>function clicar(){

console.log('Clique');}

</script></head><body>

<button onclick="clicar()">OK</button></body>

26

Eventos

• Há diversos tipos de eventos. Cada tipo de evento pode ser capturado por determinado conjunto de elementos HTML. Por exemplo, o evento onclick é suportado pelo elemento button mas não é suportado por head.

• Alguns eventos:– onclick: ocorre ao clique do mouse.– ommouseover: ocorre quando ponteiro do mouse entra na área

do elemento.– onkeypress: ocorre pelo pressionamento de tecla.– onload: ocorre quando o elemento termina de ser carregado.

• Uma lista de eventos está disponível em: http://www.w3schools.com/jsref/dom_obj_event.asp

27

Objetos BOM

• BOM = Browser Object Model.• São objetos relativos ao navegador disponíveis em JS.

Com eles podemos manipular janelas, abrir objetos pop-up de interação com o usuário entre outras funcionalidades.

• Objetos disponíveis:– window: representa uma janela, ou aba, de browser.– navigator: armazena informações do navegador.– screen: armazena informações da tela do dispositivo

utilizado pelo usuário.– history: representa o histórico de navegação do browser.– location: refere-se à URL da janela do navegador.

28

Objetos BOM

• Algumas propriedades e métodos de window:– name: retorna ou altera o nome da janela.– screen: retorna o objeto screen.– screenX: retorna a coordenada horizontal da janela

em relação à tela.– screenY: retorna a coordenada vertical da janela em

relação à tela.– close(): fecha a janela.– open(URL, name, specs, replace): abre uma nova

janela.– moveTo(x,y): move a janela para uma nova posição.

29

Objetos BOM

• Objetos para interação com o usuário:– window.alert(msg): exibe uma caixa de diálogo com uma

mensagem.– window.confirm(msg): exibe uma caixa de diálogo de

confirmação. Contém um botão de confirmação e um botão de cancelamento. Retorna true ou false de acordo com o botão clicado pelo usuário.

– window.prompt(msg, texto_padrao): exibe uma caixa de diálogo contendo campo de texto, botão de confirmação e botão de cancelamento. Retorna o texto informado pelo usuário caso ele confirme e null caso ele cancele.

• Obs: estes três objetos podem ser chamados diretamente sem o prefixo window.

30

Objetos BOM

• Exemplo<head>

<script>function popup(){

var msg = 'Você está usando ' + navigator.userAgent;

alert(msg);}

</script></head><body>

<button onclick="popup()">OK</button></body>

31

Exercícios

3.1) Escreva um script que registra a quantidade de cliques sobre um botão e imprime esta informação no console. Dica: use uma variável global.3.2) Escreva um script que exibe um objeto alertassim que a página terminar de ser carregada. Dica: use o evento onload do elemento body.3.3) Escreva uma página contendo um botão que, quando pressionado, exibe um objeto confirm. Caso o usuário confirme, deve ser aberta uma nova janela (pop-up). Caso negue, deve escrever uma mensagem no console.

32

DOM

• É um mecanismo que organiza os elementos de uma página HTML como objetos que se associam de forma hierárquica.– Também define uma hierarquia de interfaces (tipos)

que definem as operações presentes nos objetos.

• Com DOM, os elementos HTML podem ser tratados como objetos JavaScript e vários de seus atributos podem ser manipulados como propriedades.

• DOM é uma especificação do W3C.

33

Nós e árvores DOM

• Cada elemento em uma página HTML é representado por um nó DOM, e todos os nós em um documento compõem a árvore DOMda página.

• Os nós se associam através de relacionamentos do tipo pai-e-filho. Um nó possui um único pai (com exceção do nó raiz) e pode possuir muitos nós filhos.

34

Nós e árvores DOM

35

#document

html

head

title

body

h1

p

Minha Página (#text)

Meu título (#text)

Meu texto. (#text)

(#element)

(#element)

(#element)

(#element)

(#element)

(#element)

Tipos de nós

• Cada nó DOM possui um tipo, o qual determina o conjunto de operações e propriedades disponíveis.

• Os tipos são organizados em uma hierarquia de herança. Isto significa que um subtipo herda as operações dos seus tipos ancestrais.

36

Tipos de nós

37

Node

• Tipo mais genérico que representa um único nó da árvore DOM.

• Alguns métodos e propriedades: appendChild,attributes, childNodes, firstChild,hasAttributes, hasChildNodes, insertBefore,lastChild, nodeName, nodeType, parentNode,removeChild, replaceChild.

38

Document

• Representa o documento como um todo.

• É o tipo do nó raiz da árvore, tendo como filho o elemento HTML.

• É acessado pela variável document.

• Alguns métodos e propriedades: createAttribute, createElement, createTextNode, documentElement, getElementById, getElementsByTagName.

39

Element

• Representa um elemento (tag) HTML.

• Alguns métodos e propriedades: getAttribute, getAttributeNode, hasAttribute, removeAttribute, setAttribute, setAttributeNode, tagName.

40

Attr

• Representa um atributo de um elemento HTML.

• Nós Attr não constam como nós filhos do elemento ao qual pertencem. Também não possuem nós filhos ou irmãos.

• Alguns métodos e propriedades: name, ownerElement, value.

41

NodeList

• Representa uma coleção de nós. Os itens podem ser acessados através de índices como em um array (começando em zero).

– NodeList não é um Array de JavaScript.

• Métodos e propriedades: item, length.

42

HTML DOM

• É uma extensão do DOM básico (core) voltada para a manipulação de documentos HTML.

• Define vários tipos de nós, geralmente herdeiros de algum tipo do DOM básico: HTMLDocument, HTMLElement, HTMLBodyElement, HTMLFormElement, HTMLCollection, HTMLTableElement, ...

43

Documentação

• Para obter informações sobre os tipos DOM com suas propriedades e métodos:

– https://www.w3schools.com/jsref/prop_node_nodetype.asp

– https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference

44

Propriedade innerHTML

• A forma mais fácil de alterar o HTML é através da propriedade innerHTML, a qual pode ser utilizada para substituir ou acrescentar código HTML através de strings.

45

Propriedade innerHTML

• Substituição de código:

– Antes:

<body><p>Lorem ipsum</p></body>

– Código JS:

document.body.innerHTML='<p>Dolor sitamet</p>'

– Depois:

<body><p>Dolor sir amet</p></body>

46

Propriedade innerHTML• Adição de código:

– Antes:<body>

<ul id='lista'><li>Banana</li>

</ul></body>– Código JS:document.getElementById('lista').innerHTML+='<li>Manga

</li>'– Depois:<body>

<ul id='lista'><li>Banana</li><li>Manga</li>

</ul></body>

47

Exercícios

4.1) Dada a página exercicio_DOM_01.html, elabore código JS para que, assim que um botão for clicado, uma imagem do respectivo instrumento seja exibida no elemento com id igual a p2.

4.2) Dada a página exercicio_DOM_02.html, escreva uma função JS que insere o texto SEM IMAGEM nas célula vazias da tabela.

48

Manipulando atributos

• Para manipular atributos de um elemento HTML podemos utilizar uma das seguintes sintaxes:

– Leitura:

• elemento.atributo

• elemento.getAttribute(nome_atributo)

– Modificação

• elemento.atributo=valor

• elemento.setAttribute(nome_atributo, valor)

49

Manipulando atributos

<head><style>.icone{ height: 50px; }#img_big{ width: 300px; }</style><script>function lupa(sender){document.getElementById('img_big').src=sender.src;}</script></head><body><img class="icone" onmouseover="lupa(this)" src="violao.jpg"<img class="icone" onmouseover="lupa(this)" src="piano.png"><img class="icone" onmouseover="lupa(this)" src="saxofone.png"><br><img id="img_big"></body>

50

Alterando as propriedades CSS

• Para alterar as propriedades CSS dos elementos podemos utilizar a propriedade style através da sintaxe:

– elemento.style.propriedade=valor

51

Alterando as propriedades CSS

<head><style>h1{ font-family: Arial; }

</style><script>function mudar_cor(nova_cor){document.getElementById('h1').style.color=nova_cor;

}</script>

</head><body><h1 id="h1">Lorem ipsum</h1><button onclick="mudar_cor('black')">Preto</button><button onclick="mudar_cor('red')">Vermelho</button>

</body>

52

Exercícios

5.1) Utilize o objeto screen para obter o tamanho da tela do usuário. Depois, utilize essas informações para colocar uma imagem no meio da página.5.2) Escreva uma página HTML contendo uma imagem e quatro botões. Configure a imagem com layout absoluto e faça com que o clique de cada botão movimente a imagem em uma das seguintes direções: para cima, para baixo, esquerda e direita.5.3) Escreva uma página HTML e duas folhas de estilos, sendo que uma deve conter os estilos de alto contraste. A página deve conter um botão que, ao clique, troca a folha de estilo utilizada pela página.

53

Campos de formulário

• JS pode ser utilizado para manipular campos de formulário, bem como para capturar eventos relativos ao formulário ou a seus campos.

• Uma forma fácil de acessar um campo é atribuir-lhe um nome (atributo name) e usar este nome para acessá-lo diretamente através do elemento formulário.formulario.nome_do_campo

54


• Campos do tipo text e password:

– Usar a propriedade value para manipular o valor do campo.

55


56

<head><script>function calcular(){var form = document.getElementById('formulario’);var a = form.a.value;var b = form.b.value;var c = parseFloat(a) + parseFloat(b);form.c.value = c;}</script></head><body><form id="formulario"><input type="text" name="a">+<input type="text" name="b">=<input type="text" name="c" disabled><br><input type="button" onclick="calcular()" value="Calcular"></form></body>


• Campos do tipo checkbox:

– Usar a propriedade checked para acessar o valor do campo (tipo Boolean).

57


<head><script>function calcular(form){var q = parseFloat(form.q.value);var valor = q * 3.50;if(form.cobertura.checked)valor += 1.00;

form.v.value = valor;}</script>

</head><body><form id="formulario">Bolas de sorvete <input type="text" name="q"><br><input type="checkbox" name="cobertura">Com cobertura<br><input type="button" onclick="calcular(this.form)" value="Calcular"><br>Valor (R$): <input type="text" name="v" disabled>

</form></body>

58


• Campos do tipo radio:

– São tratados como um array no qual cada opção é um elemento. A propriedade checked indica a opção selecionada e value o valor da mesma.

59


<head><script>function exibir(form){for(var i = 0; i < 2; i++){if(form.instrumento[i].checked){document.getElementById('imagem').src = form[i].value;break;

}}

}</script>

</head><body><form id="formulario"><input type="radio" name="instrumento" value="violao.jpg">Violão<br><input type="radio" name="instrumento" value="piano.png">Piano<br><input type="button" onclick="exibir(this.form)" value="Exibir">

</form><p><img id="imagem"></p>

</body>

60


• Campos select:

– A propriedade options é um array com as opções disponíveis. A propriedade selectedIndex indica a opção escolhida.

– As seguintes propriedades estão disponíveis para os objetos de opção: label, selected, text e value.

61


<head><script>function exibir(form){var i = form.instrumento.selectedIndex;var arquivo = form.instrumento.options[i].value;document.getElementById('imagem').src = arquivo;

}</script>

</head><body><form id="formulario"><select name="instrumento"><option value="violao.jpg">Violão</option><option value="piano.png">Piano</option>

</select><br><input type="button" onclick="exibir(this.form)" value="Exibir">

</form><p><img id="imagem"></p>

</body>

62


• Eventos relacionados a formulários e seus campos:– onfocus: quando um campo recebe foco.

– onblur: quando um campo perde foco.

– onchange: quando um novo item de um campo selecté selecionado, ou quando um campo de texto perde o foco e seu conteúdo foi alterado.

– onselect: quando o conteúdo de um campo de texto é selecionado.

– onsubmit: quando um formulário é submetido ao servidor.

63

Exercícios

6.1) Escreva uma página com um formulário para cadastro de usuário contendo os campos e-mail, senha e confirmação de senha. Escreva uma função JS para verificar se os campos foram todos preenchidos e se as senhas informadas são idênticas.

6.2) Elabore uma página com a funcionalidade de calculadora. As operações disponíveis devem ser adição, subtração, multiplicação, divisão, potenciação e radiciação.

64

Eventos – parte II

• Event handler: função executada assim que um evento é gerado.

• Sempre que uma event handler é executada, é criado um objeto event contendo informações a respeito do evento tais como o tipo do evento e o elemento gerador do evento.

• O objeto event é utilizado como argumento da eventhandler, a qual pode utilizá-lo durante o seu processamento (versões do Internet Explorer anteriores a 9 devem acessar event através do objeto window).

• Propriedades mais comuns de event:– type: nome do evento (string).– target: elemento gerador do evento (HTMLElement). Para IE < 9,

usar srcElement.

65


<body><script>function printEvent(event){event = event || window.event;console.log(event.type);

}</script><p><button onclick="printEvent(event)">OK</button>

</p><p style="border: solid black 1px"onmouseover="printEvent(event)"onmouseout="printEvent(event)">Lorem ipsum

</p></body>

66


<body><script>function printEvent(event){event = event || window.event;console.log(event.type);

}</script><p><button onclick="printEvent(event)">OK</button>

</p><p style="border: solid black 1px"onmouseover="printEvent(event)"onmouseout="printEvent(event)">Lorem ipsum

</p></body>

67

Para manter a compatibilidade do código entre navegadores.


• A natureza do evento determina o tipo do objeto event. Por exemplo, KeyboardEventpara pressionamento de teclas e MouseEventpara movimentação do mouse. O tipo do evento determina as propriedades disponíveis no objeto event.

• Tipos de eventos disponíveis: https://developer.mozilla.org/en-US/docs/Web/Events

68


• MouseEvent: tipo relacionado a eventos de mouse tais como onmousedown e onclick.

– clientX: coordenada X do ponteiro do mouse em relação à janela do navegador.

– clientY: coordenada Y do ponteiro do mouse em relação à janela do navegador.

– button: número do botão pressionado no mouse.

69


<script>

function exec(event){

var str = 'X: ' + event.clientX + ', Y: ' + event.clientY;

document.getElementById('my_p').innerHTML=str;

}

</script>

<p id="my_p" style="height: 500px;" onclick="exec(event)">

</p>

70


• Para determinados tipos de eventos, é possível cancelar a sua execução. Por exemplo, quando um formulário é submetido, a event handlerpoder impedir a submissão caso os campos não tenham sua validação aprovada.

• A forma de cancelamento depende da maneira como o evento foi registrado. O próximo exemplo mostra uma forma universal de realizar cancelamentos.

71


function exec(event){

var myForm = document.getElementById('my_form');

if(myForm.texto.value !== 'A'){

if (event.preventDefault)

event.preventDefault();

if (event.returnValue)

event.returnValue = false; //IE

return false;

}

}

<body>

<form action="http://www.google.com" id="my_form" onsubmit="exec()">

<input type="text" name="texto">

<input type="submit" value="OK">

</form>

</body>

72

Exercícios

7.1) Utilize posicionamento absoluto de CSS e o evento onmousemovepara que uma frase de texto siga o ponteiro do mouse enquanto o usuário o move sobre a página web. Desative esse recurso se o usuário der um duplo clique (Deitel et al, 2003).7.2) Escreva uma página contendo uma imagem que é movida assim que uma das quatro teclas direcionais é pressionada. As quatro teclas devem utilizar a mesma função como event handler. Utilize o objeto event para descobrir a tecla pressionada.7.3) Escreva uma página contendo dois campos de texto e um botão que, ao ser acionado, realiza a soma dos valores contidos nos campos. Utilize eventos para impedir que o usuário digite nos campos valores que não sejam inteiros. Dica: faça uma pesquisa sobre o evento oninput.

73

Eventos – parte III

• A definição de event handlers pode ser feita de duas formas básicas: através de propriedades e através de métodos.

• A definição através de propriedades pode ser feita de duas formas: pelos atributos das tagsHTML (como visto até o momento) e no próprio código dos scripts.

74


• Definindo event handler na tag:

<head><script>var n = 0;function contar(){var btn = document.getElementById('btn');n++;btn.innerHTML = 'Cliques: ' + n;}</script></head><body><button id="btn" onclick="contar()">Cliques: 0</button></body>

75


• Definindo event handler na tag:

<head><script>var n = 0;function contar(){var btn = document.getElementById('btn');n++;btn.innerHTML = 'Cliques: ' + n;}</script></head><body><button id="btn" onclick="contar()">Cliques: 0</button></body>

76


• Definindo event handler no script:

<body><button id="btn">Cliques: 0</button><script>var n = 0;document.getElementById('btn').onclick = contar;function contar(){var btn = document.getElementById('btn');n++;btn.innerHTML = 'Cliques: ' + n;

}</script>

</body>

77




}</script>

</body>

78

Note que neste caso o script deve ser declarado após o

elemento button para que este já exista quando o script for

executado.




}</script>

</body>

79

Também repare que a função contar é utilizada como um objeto, por isso não há os parênteses.

Caso utilizássemos contar(), a função seria executada e o retorno da função é que seria

atribuído à propriedade onclick.


• A definição de event handlers através de métodos somente é realizada nos scripts.

• A vantagem em relação ao uso de propriedades, é que com métodos é possível definir mais de uma event handler para um mesmo evento.

• Para tal, basta utilizar event handler como argumento do método addEventListener, ou o método attachEvent para o IE < 9.

80


<body><button id="btn">Cliques: 0</button><script>var n = 0;var btn = document.getElementById('btn');btn.addEventListener('click', contar);function contar(){var btn = document.getElementById('btn');n++;btn.innerHTML = 'Cliques: ' + n;

}</script>

</body>

81


<body><button id="btn">Cliques: 0</button><script>var n = 0;var btn = document.getElementById('btn');btn.addEventListener('click', contar);function contar(){var btn = document.getElementById('btn');n++;btn.innerHTML = 'Cliques: ' + n;

}</script>

</body>

82

Note que deve ser omitido o prefixo on no tipo do evento.


• Ao definir event handlers no código JS, o objeto event é automaticamente informado como primeiro argumento da função.

83


<body><button id="btn">Cliques: 0</button><script>var n = 0;var btn = document.getElementById('btn'); btn.addEventListener('click', contar);function contar(event){n++;event.target.innerHTML = 'Cliques: ' + n;}

</script></body>

84

Scripts em arquivos externos

• Assim como folhas de estilos, scripts JS podem ser escritos em arquivos diferentes da página web.

• Scripts externos são inseridos através da tagscript em conjunto com o atributo src.

• Normalmente arquivos com código JavaScriptsão salvos com a exentensão .js.

85

Scripts em arquivos externos

• script.js:

var n = 0;var btn = document.getElementById('btn');btn.addEventListener('click', contar);function contar(event){n++;event.target.innerHTML = 'Cliques: ' + n; }

• Página web:

<body><button id="btn">Cliques: 0</button><script src="script.js"></script></body>

86

Exercícios

8.1) Modifique algumas soluções dos exercícios anteriores, que são baseados em eventos, para utilizar a atribuição de event handlers por código JavaScript.

87

Referências

• W3Schools.com. JavaScript Tutorial. Disponível em <http://www.w3schools.com/js/default.asp>. Acesso em janeiro de 2015.

• BALDUINO, Plínio. Dominando JavaScript com jQuery. São Paulo: Casa do Código, 2015.

• W3Schools.com. XML DOM Tutorial. Disponível em <http://www.w3schools.com/dom/default.asp>

• Mozilla Developer Network. DOM Reference. Disponível em <https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference>.

88

Referências

• JavaWorld. Using JavaScript and Forms. Disponível em <http://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and-forms.html>.

• Home & Learn. Javascript and HTML Forms. Disponível em <http://www.homeandlearn.co.uk/JS/javascript_and_forms.html>.

• DEITEL, H. M., DEITEL, P. J. e NIETO, T. R.. Internet e World Wide Web - como programar. Porto Alegre: Bookman, 2003.

• FLANAGAN, David. JavaScript: The Definitive Guide. Sebastopol: O’Reilly, 2011.

89

Informações bibliográficas

• Autor: Alexandre Gomes de Lima

• Data de atualização: outubro de 2018

• Licença de uso: Creative Commons BY-SA (Atribuição-CompartilhaIgual)

90

JavaScript - diatinf.ifrn.edu.brdiatinf.ifrn.edu.br/prof/lib/exe/...design_tii:javascript.pdf · ECMAScript e Java •Java e JavaScript são linguagens de programação distintas.

Documents