(A04 e A05) LabMM3 - JavaScript

JavaScript

Carlos SantosLabMM 3 - NTC - DeCA - UAAula 04 e 05, 26-09-2011

• Linguagem de programação para a Web...

• interpretada ou não compilada;

• todos os browsers atuais têm interpretadores de JS;

• não é Java;

• começou com o Netscape Navigator 2 (LiveScript);

• dark age (JavaScript da Netscape vs JScript da Microsoft);

• é uma aplicação da ECMAScript para a Web;

• standards são definidos pelo W3C.

O que é?

• Editor de texto (notepad) e um browser são suficientes!

• Nos computadores dos laboratórios do DeCA temos o PHPStorm

• Mas a Web não funciona com ficheiros guardados no disco duro do nosso computador...

O que precisamos?

Browser Servidor Webhttp

• Responsabilidade de colocar os ficheiros no Servidor Web.

• O que é um servidor web?

• Como é que os programadores colocam conteúdos no servidor web?

• FTP, SFTP, WebDav,...

• SVN, Git,...

E para os programadores?

Browser Servidor Web

Computador programadorhttp ftp

• Vamos construir cenários tão reais quanto possível!

• Servidor Web para publicação de todos os exercícios;

• Acesso FTP privado por grupos de 2;

• Soluções dos alunos são públicas e acessíveis na rede da UA;

• Publicação de projetos finais.

E em LabMM 3?

Browser labmm.clients.ua.pt

Computador programadorhttp

acesso UAVPN

ftplogin/pass

• Inline no header ou no body

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Exemplo</title>

<script type="application/javascript">

//Código JavaScript

</script>

</head>

<body>

//Código HTML com chamadas de JavaScript

//ou

<script type="application/javascript">

//Código JavaScript

</script>

</body>

</html>

Como incluir?

Para que serve o JavaScript?

• client-side e/ou server/side?

• porque é diferente do HTML?

• porque é diferente do PHP?

• quais as interfaces para entrada e saída de dados?

• e como funciona?

Browser - DOM - JavaScript

• Document Object Model• “The Document Object Model (DOM) is a cross-platform and language-

independent convention for representing and interacting with objects in HTML, XHTML and XML documents.”(http://en.wikipedia.org/wiki/Document_Object_Model)

Browser - DOM - JavaScript

DOM

http://en.wikipedia.org/wiki/File:JKDOM.SVG

http://www.w3.org/TR/DOM-Level-3-Core/introduction.html

Como interagem? (HTML)

• o browser efectua um pedido ao servidor por http

• o servidor devolve um ficheiro HTML estático

• o HTML devolvido pode conter JavaScript

• o browser interpreta o HTML e constrói o DOM

• no browser a página fica visível para o utilizador

• novos pedidos http são enviados para outros elementos da página

• no browser o JavaScript permite, a qualquer momento, alterar o HTML através da manipulação do DOM

Como interagem? (HTML ou tec. server side)

• o browser efectua um pedido ao servidor por http

• no servidor existem duas possibilidades:

• é devolvido directamente um ficheiro HTML estático ou...

• é processado um ficheiro com tecnologia server-side (por exemplo, PHP) que permite construir dinamicamente o HTML a devolver ao browser

• o HTML devolvido pode conter JavaScript

• o browser interpreta o HTML e constrói o DOM

• no browser a página fica visível para o utilizador

• novos pedidos http são enviados para outros elementos da página

• no browser o JavaScript permite, a qualquer momento, alterar o HTML através da manipulação do DOM

Inspect!

Consola

“The DOM is a mess”

http://ejohn.org/blog/the-dom-is-a-mess/

Solução?

• Ficheiro externo alojado no mesmo servidor

<script type=”text/javascript” src=”MeuJavaScript.js” />

• Ficheiro externo alojado num outro servidor

<script type=”text/javascript” src=”http://outro.servidor.com/JavaScriptDeOutros.js” />

• Vantagens:

• re-utilização

• manutenção

• cache!

Como incluir?

Primeiro exemplo: JavaScript

<html>

<body bgcolor="WHITE">

<p>Paragraph 1</p>

<script type="text/javascript">

document.bgColor = 'RED';

</script>

</body>

</html>

• Boas práticas:

• indentar o código;

• utilizar “;” para terminar as instruções.

Exemplo retirado de “Beginning JavaScript”, pág 9

Segundo exemplo: parsing

<html>

<body bgcolor="WHITE">

<p>Paragraph 1</p>


// Script block 1

alert("First Script Block");

</script>

<p>Paragraph 2</p>


// Script block 2

document.bgColor = "RED";

alert("Second Script Block");

</script>

<p>Paragraph 3</p>

</body>

</html>

• Como é que esta página é processada pelo browser?• Escrever com alert(); Exemplo retirado de “Beginning JavaScript”, pág 10

Terceiro exemplo: Hello world!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<body >

<p id="ResultsP"></p>


// Script block 1

document.getElementById('ResultsP').innerHTML = 'Hello World!';

</script>

</body>

</html>

• E escrever o texto no campo de um formulário?

document.getElementById("campoTexto").value = “Hello World”;

Exemplo retirado de “Beginning JavaScript”, pág 14

(A04 e A05) LabMM3 - JavaScript

Documents

Transcript of (A04 e A05) LabMM3 - JavaScript