SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
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)

Weitere ähnliche Inhalte

Was ist angesagt?

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3André Luiz Forchesatto
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoPaula Grangeiro
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panosLaís Lima
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panosLaís Lima
 
Deixando de ser moleque com PHP
Deixando de ser moleque com PHPDeixando de ser moleque com PHP
Deixando de ser moleque com PHPVinícius Krolow
 
Joomla! do desktop ao datacenter
Joomla! do desktop ao datacenterJoomla! do desktop ao datacenter
Joomla! do desktop ao datacenterPaulino Michelazzo
 
Subvertendo o codigo PHP com SVN - ENSOL
Subvertendo o codigo PHP com SVN - ENSOLSubvertendo o codigo PHP com SVN - ENSOL
Subvertendo o codigo PHP com SVN - ENSOLRicardo Coelho
 
gRPC: Por que você ainda usa REST?
gRPC: Por que você ainda usa REST?gRPC: Por que você ainda usa REST?
gRPC: Por que você ainda usa REST?Yago Tomé
 
Subvertendo o código PHP com SVN
Subvertendo o código PHP com SVNSubvertendo o código PHP com SVN
Subvertendo o código PHP com SVNRicardo Coelho
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigitalJust Digital
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 

Was ist angesagt? (20)

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com Django
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
[Testes] frameworks de testes end to-end baseados em node js
[Testes] frameworks de testes end to-end baseados em node js [Testes] frameworks de testes end to-end baseados em node js
[Testes] frameworks de testes end to-end baseados em node js
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
Deixando de ser moleque com PHP
Deixando de ser moleque com PHPDeixando de ser moleque com PHP
Deixando de ser moleque com PHP
 
Joomla! do desktop ao datacenter
Joomla! do desktop ao datacenterJoomla! do desktop ao datacenter
Joomla! do desktop ao datacenter
 
Subvertendo o codigo PHP com SVN - ENSOL
Subvertendo o codigo PHP com SVN - ENSOLSubvertendo o codigo PHP com SVN - ENSOL
Subvertendo o codigo PHP com SVN - ENSOL
 
Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
gRPC: Por que você ainda usa REST?
gRPC: Por que você ainda usa REST?gRPC: Por que você ainda usa REST?
gRPC: Por que você ainda usa REST?
 
Subvertendo o código PHP com SVN
Subvertendo o código PHP com SVNSubvertendo o código PHP com SVN
Subvertendo o código PHP com SVN
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigital
 
Node.js
Node.jsNode.js
Node.js
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 

Andere mochten auch

apresentação 1º período
apresentação 1º períodoapresentação 1º período
apresentação 1º períodogrupoA
 
Global Math Game Guideline English Version
Global Math Game Guideline English VersionGlobal Math Game Guideline English Version
Global Math Game Guideline English VersionGlobal Math
 
Presentacion parque naturales de andalucia
Presentacion parque naturales de andaluciaPresentacion parque naturales de andalucia
Presentacion parque naturales de andaluciaamlozanomoreno
 

Andere mochten auch (7)

Aula03
Aula03Aula03
Aula03
 
3 d max_studio
3 d max_studio3 d max_studio
3 d max_studio
 
Anuncio para fruta plantas1
Anuncio para fruta plantas1Anuncio para fruta plantas1
Anuncio para fruta plantas1
 
Laccfacility 1
Laccfacility 1Laccfacility 1
Laccfacility 1
 
apresentação 1º período
apresentação 1º períodoapresentação 1º período
apresentação 1º período
 
Global Math Game Guideline English Version
Global Math Game Guideline English VersionGlobal Math Game Guideline English Version
Global Math Game Guideline English Version
 
Presentacion parque naturales de andalucia
Presentacion parque naturales de andaluciaPresentacion parque naturales de andalucia
Presentacion parque naturales de andalucia
 

Ähnlich wie LabMM3 - Aula teórica 04

Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1michellobo
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformanceFelipe Ribeiro
 
Integração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlIntegração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlDiego Tremper
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPelliando dias
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2PrinceGuru MS
 
Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Marcelo Dieder
 
Integração Contínua com Cruise Control e phpUnderControl
Integração Contínua com Cruise Control e phpUnderControlIntegração Contínua com Cruise Control e phpUnderControl
Integração Contínua com Cruise Control e phpUnderControlDiego Tremper
 
Integração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlIntegração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlManuel Lemos
 
Integracao Contínua com CruiseControl e phpUnderControl
Integracao Contínua com CruiseControl e phpUnderControlIntegracao Contínua com CruiseControl e phpUnderControl
Integracao Contínua com CruiseControl e phpUnderControlDiego Tremper
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorAllyson Barros
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAThiago Cifani
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarTiago Antônio da Silva
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com PolymerStefan Horochovec
 
Arquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em JavaArquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em JavaBreno Vitorino
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...Renato Groff
 

Ähnlich wie LabMM3 - Aula teórica 04 (20)

Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Integração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlIntegração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControl
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2
 
Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?Como criar infraestrutura de sites para receber milhões de usuários?
Como criar infraestrutura de sites para receber milhões de usuários?
 
Integração Contínua com Cruise Control e phpUnderControl
Integração Contínua com Cruise Control e phpUnderControlIntegração Contínua com Cruise Control e phpUnderControl
Integração Contínua com Cruise Control e phpUnderControl
 
Integração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControlIntegração Contínua com CruiseControl e phpUnderControl
Integração Contínua com CruiseControl e phpUnderControl
 
Integracao Contínua com CruiseControl e phpUnderControl
Integracao Contínua com CruiseControl e phpUnderControlIntegracao Contínua com CruiseControl e phpUnderControl
Integracao Contínua com CruiseControl e phpUnderControl
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Arquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em JavaArquitetura de aplicações Web 2.0 em Java
Arquitetura de aplicações Web 2.0 em Java
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...
5 Tecnologias que todo Desenvolvedor Web deveria conhecer - Developers-BR - O...
 

Mehr von Carlos Santos

Is AI the Spice of our future?
Is AI the Spice of our future?Is AI the Spice of our future?
Is AI the Spice of our future?Carlos Santos
 
Mentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesMentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesCarlos Santos
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEduCarlos Santos
 
Tecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialTecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialCarlos Santos
 
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosAVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosCarlos Santos
 
AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosCarlos Santos
 
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Carlos Santos
 
Tecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoTecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoCarlos Santos
 
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Carlos Santos
 
SAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentSAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentCarlos Santos
 
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusRepensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusCarlos Santos
 
A technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectA technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectCarlos Santos
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoCarlos Santos
 
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCARepensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCACarlos Santos
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidCarlos Santos
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoCarlos Santos
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)Carlos Santos
 

Mehr von Carlos Santos (20)

Is AI the Spice of our future?
Is AI the Spice of our future?Is AI the Spice of our future?
Is AI the Spice of our future?
 
Mentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesMentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantes
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEdu
 
Tecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialTecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicial
 
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosAVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
 
AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
 
Tecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoTecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho prático
 
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
SAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentSAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning Environment
 
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusRepensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
 
A technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectA technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus project
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
 
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCARepensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)
 

Kürzlich hochgeladen

Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmicolourivalcaburite
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxJustinoTeixeira1
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdfmarlene54545
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticash5kpmr7w7
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxMarcosLemes28
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfHELENO FAVACHO
 
LENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLidianePaulaValezi
 
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...DirceuNascimento5
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfTutor de matemática Ícaro
 
GÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptxGÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptxMARIADEFATIMASILVADE
 
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...andreiavys
 
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...marcelafinkler
 
Texto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptTexto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptjricardo76
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPaulaYaraDaasPedro
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxTailsonSantos1
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do séculoBiblioteca UCS
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeitotatianehilda
 
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdfPROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdfHELENO FAVACHO
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...HELENO FAVACHO
 

Kürzlich hochgeladen (20)

Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptx
 
19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf19- Pedagogia (60 mapas mentais) - Amostra.pdf
19- Pedagogia (60 mapas mentais) - Amostra.pdf
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptx
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
LENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretação
 
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 
GÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptxGÊNERO CARTAZ - o que é, para que serve.pptx
GÊNERO CARTAZ - o que é, para que serve.pptx
 
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
 
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
 
Texto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptTexto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.ppt
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do século
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
 
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdfPROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 

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 os programadores? • Responsabilidade de colocar os ficheiros no Servidor Web. • Como? • FTP, SFTP, WebDav,... • SVN, Git,... Servidor Computador Browser http Web ftp 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. linlabmm. Computador Browser clients.ua.pt programador http ftp acesso UA login/pass VPN
  • 6. 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>
  • 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=”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: 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
  • 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)