JavaScript. Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 03,

Tamanho: px

Começar a partir da página:

Download "JavaScript. Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 03, 18-09-2013"

Yan Carrilho Gil
8 Há anos
Visualizações:

1 JavaScript Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 03,

2 O que é? 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.

JS; não é Java; começou com o Netscape Navigator 2 (LiveScript); dark age

3 O que precisamos? 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... Browser http Servidor Web

4 E para os programadores? 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,... Browser http Servidor Web ftp Computador programador

5 E em LabMM 3? 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. Browser http acesso UA VPN labmm. clients.ua.pt ftp login/pass Computador programador

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

6 Como incluir? Inline no header ou no body <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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>

org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>exemplo</title> <script

7 Como incluir? Ficheiro externo alojado no mesmo servidor <script type= text/javascript src= MeuJavaScript.js /> Ficheiro externo alojado num outro servidor <script type= text/javascript src= JavaScriptDeOutros.js /> Vantagens: reutilização manutenção cache!

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 languageindependent convention for representing and interacting with objects in HTML, XHTML and XML documents. (

convention for representing and interacting with objects in HTML,

10 Browser - DOM - JavaScript

11 DOM

12 DOM

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

HTML devolvido pode conter JavaScript o browser interpreta o HTML e constrói o DOM no browser a página

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

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

15 Inspect!

16 Consola

17 The DOM is a mess

18 Solução?

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

bgcolor = 'RED'; </script> </body> </html> Boas práticas: indentar o

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(); Exemplo retirado de Beginning JavaScript, pág 10 E se for com console.log()?

21 Terceiro exemplo: Hello world! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" <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

Documentos relacionados

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #O que é Web Standards? São padrões de desenvolvimento web recomendados pela W3C que visam a implementação de