1) O documento discute JavaScript, incluindo sua história e como é usado na web atualmente.
2) É explicado como programadores colocam arquivos no servidor web e como JavaScript é incluído em páginas HTML através de tags <script>.
3) O modelo de objetos de documento (DOM) permite que JavaScript manipule dinamicamente páginas web após a carga inicial.
2. • 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 é?
3. • 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
4. • 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
programador
http ftp
5. • 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
programador
http
acesso UA
VPN
ftp
login/pass
6. • 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?
7. • 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:
• reutilização
• manutenção
• cache!
Como incluir?
8. 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?
9. 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)
13. Como interagem? (HTML)
• o browser efetua 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
• são enviados novos pedidos HTTP para os outros elementos da página
• no browser o JavaScript permite, a qualquer momento, alterar o HTML
através da manipulação do DOM
14. Como interagem? (HTML ou tecn. server side)
• o browser efetua um pedido ao servidor por HTTP
• no servidor existem duas possibilidades:
• é devolvido diretamente 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
• são enviados novos pedidos HTTP para os outros elementos da página
• no browser o JavaScript permite, a qualquer momento, alterar o HTML
através da manipulação do DOM
19. 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
20. Segundo exemplo: parsing
<html>
<body bgcolor="WHITE">
<p>Paragraph 1</p>
<script type="text/javascript">
// Script block 1
alert("First Script Block");
</script>
<p>Paragraph 2</p>
<script type="text/javascript">
// 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();
• E se for com console.log()?
Exemplo retirado de “Beginning JavaScript”, pág 10
21. 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 type="text/javascript">
// 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