JavaScript
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 04, 22-09-2011
O que é?

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

  • interpretada ou não compilada;

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

  • não é Java;

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

  • dark age (JScript da Microsoft);

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

  • standards são definidos pelo W3C.
O que precisamos?

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

• Nas aulas práticas recomendamos a utilização do WebStorm.

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



                                                 Servidor
                     Browser
                                     http         Web
E para os programadores?

• Responsabilidade de colocar os ficheiros no Servidor Web.

  • Como?

     • FTP, SFTP, WebDav,...

     • SVN, Git,...




                                  Servidor                   Computador
       Browser
                      http         Web            ftp
                                                             programador
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.



                                     linlabmm.                   Computador
        Browser                     clients.ua.pt                programador
                        http                           ftp
                      acesso UA                     login/pass
                         VPN
Como incluir?

• 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?

• 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!
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 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 deve ser mostrada esta página?
• 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 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
Tipos de dados

• Diferentes abordagens por linguagem de programação

  • strongly typed

     • obrigatório explicitar o tipo de dados;

     • grandes restrições para operações entre diferentes tipos de dados.

  • weakly typed

     • mais fácil de utilizar mas mais suscetível a erros do programador;

     • em alguns casos... “seja o que o interpretador quiser”; :)

     • necessário perceber os fundamentos para controlar os resultados
       obtidos em algumas situações mais específicas.
Tipos de dados: tipos numéricos em C




                           Tabela retirada de http://www.lix.polytechnique.fr/~liberti/public/
                                            computing/prog/c/C/CONCEPT/data_types.html
Tipos de dados: JavaScript

• Tipos de dados mais comuns:

  • Numéricos

     • inteiros (243, -9, 0)

     • frações/floating-point (1.2321, -43243.2)

  • Texto/strings

     • “...” ou ‘...’

  • Booleanos

     • Verdadeiro (true) ou Falso (false)

LabMM3 - Aula teórica 04

  • 1.
    JavaScript Carlos Santos LabMM 3- NTC - DeCA - UA Aula 04, 22-09-2011
  • 2.
    O que é? •Linguagem de programação para a Web... • interpretada ou não compilada; • todos os browsers actuais têm interpretadores de JS; • não é Java; • começou com o Netscape Navigator 2 (LiveScript); • dark age (JScript da Microsoft); • é uma aplicação da ECMAScript para a Web; • standards são definidos pelo W3C.
  • 3.
    O que precisamos? •Editor de texto (notepad) e um browser são suficientes! • Nas aulas práticas recomendamos a utilização do WebStorm. • Mas a Web não funciona com ficheiros guardados no disco duro do nosso computador... Servidor Browser http Web
  • 4.
    E para osprogramadores? • Responsabilidade de colocar os ficheiros no Servidor Web. • Como? • FTP, SFTP, WebDav,... • SVN, Git,... Servidor Computador Browser http Web ftp programador
  • 5.
    E em LabMM3? • 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. linlabmm. Computador Browser clients.ua.pt programador http ftp acesso UA login/pass VPN
  • 6.
    Como incluir? • Inlineno 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>
  • 7.
    Como incluir? • Ficheiroexterno 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!
  • 8.
    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
  • 9.
    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 deve ser mostrada esta página? • Escrever com alert(); Exemplo retirado de “Beginning JavaScript”, pág 10
  • 10.
    Terceiro exemplo: Helloworld! <!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
  • 11.
    Tipos de dados •Diferentes abordagens por linguagem de programação • strongly typed • obrigatório explicitar o tipo de dados; • grandes restrições para operações entre diferentes tipos de dados. • weakly typed • mais fácil de utilizar mas mais suscetível a erros do programador; • em alguns casos... “seja o que o interpretador quiser”; :) • necessário perceber os fundamentos para controlar os resultados obtidos em algumas situações mais específicas.
  • 12.
    Tipos de dados:tipos numéricos em C Tabela retirada de http://www.lix.polytechnique.fr/~liberti/public/ computing/prog/c/C/CONCEPT/data_types.html
  • 13.
    Tipos de dados:JavaScript • Tipos de dados mais comuns: • Numéricos • inteiros (243, -9, 0) • frações/floating-point (1.2321, -43243.2) • Texto/strings • “...” ou ‘...’ • Booleanos • Verdadeiro (true) ou Falso (false)