T03_LM3: Javascript (2013-2014)

727 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
727
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
39
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

T03_LM3: Javascript (2013-2014)

  1. 1. JavaScript Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 03, 18-09-2013
  2. 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. 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. 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. 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. 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. 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. 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. 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)
  10. 10. Browser - DOM - JavaScript
  11. 11. DOM http://en.wikipedia.org/wiki/File:JKDOM.SVG http://www.w3.org/TR/DOM-Level-3-Core/introduction.html
  12. 12. DOM
  13. 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. 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
  15. 15. Inspect!
  16. 16. Consola
  17. 17. “The DOM is a mess” http://ejohn.org/blog/the-dom-is-a-mess/
  18. 18. Solução?
  19. 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. 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. 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

×