SlideShare uma empresa Scribd logo
JavaScript
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 04 e 05, 26-09-2011
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.
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...



                                                 Servidor
                     Browser
                                     http         Web
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,...




                                  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.



                                       labmm.                    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>
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?
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)
Browser - DOM - JavaScript
DOM




                                              http://www.w3.org/TR/DOM-Level-3-Core/introduction.html




http://en.wikipedia.org/wiki/File:JKDOM.SVG
DOM
Como interagem? (HTML)

• o browser efectua 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

   • novos pedidos http são enviados para outros elementos da página

• no browser o JavaScript permite, a qualquer momento, alterar o HTML
  através da manipulação do DOM
Como interagem? (HTML ou tec. server side)

• o browser efectua um pedido ao servidor por http

• no servidor existem duas possibilidades:

   • é devolvido directamente 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

   • novos pedidos http são enviados para outros elementos da página

• no browser o JavaScript permite, a qualquer momento, alterar o HTML
  através da manipulação do DOM
Inspect!
Consola
“The DOM is a mess”




http://ejohn.org/blog/the-dom-is-a-mess/
Solução?
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 é que esta página é processada pelo browser?
• 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

Mais conteúdo relacionado

Mais procurados

Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
Caio Ribeiro Pereira
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
Giovanni Bassi
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
Eduardo Bohrer
 
Integração Contínua com Hudson
Integração Contínua com HudsonIntegração Contínua com Hudson
Integração Contínua com Hudson
Luis Reis
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o Nodejs
Caio Cutrim
 
Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
Jorge Ávila Miranda
 
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando PimentaIniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
michel adriano medeiros
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
Jorge Ávila Miranda
 
Apresentação
ApresentaçãoApresentação
Apresentação
Marcelo de castro
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
Guilherme Heynemann Bruzzi
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Fellyph Cintra
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
Gustavo Corrêa Alves
 
Php além do LAMP
Php além do LAMPPhp além do LAMP
Php além do LAMP
Thiago Paes
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
Laís Lima
 
Vagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizadoVagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizado
Vinícius Krolow
 
Introdução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SPIntrodução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SP
Arthur Fücher
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Emerson Macedo
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
Laís Lima
 

Mais procurados (20)

Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Integração Contínua com Hudson
Integração Contínua com HudsonIntegração Contínua com Hudson
Integração Contínua com Hudson
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o Nodejs
 
Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando PimentaIniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
 
Php além do LAMP
Php além do LAMPPhp além do LAMP
Php além do LAMP
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
Vagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizadoVagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizado
 
Introdução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SPIntrodução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SP
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 

Destaque

MENOG6 Root Signing
MENOG6 Root SigningMENOG6 Root Signing
MENOG6 Root Signing
Mehmet Akcin
 
SLC exams to begin on March 19.
SLC exams to begin on March 19.SLC exams to begin on March 19.
SLC exams to begin on March 19.
ArihantEducation
 
Cairo Day2 Part5 Driving Traffic Pub
Cairo Day2 Part5 Driving Traffic PubCairo Day2 Part5 Driving Traffic Pub
Cairo Day2 Part5 Driving Traffic Pub
Michael Leander
 
euroFOT at 10th ITS Spain congress, Madrid, May 2010
euroFOT at 10th ITS Spain congress, Madrid, May 2010euroFOT at 10th ITS Spain congress, Madrid, May 2010
euroFOT at 10th ITS Spain congress, Madrid, May 2010
euroFOT
 
Miami
MiamiMiami
Miami
MIGUELRS97
 
lesson 1_akt manaj
lesson 1_akt manajlesson 1_akt manaj
lesson 1_akt manaj
Ratri Indah
 
PacINET2008 World Summit Awards by Jan Bieringa
PacINET2008 World Summit Awards by Jan BieringaPacINET2008 World Summit Awards by Jan Bieringa
PacINET2008 World Summit Awards by Jan Bieringa
picisoc
 

Destaque (7)

MENOG6 Root Signing
MENOG6 Root SigningMENOG6 Root Signing
MENOG6 Root Signing
 
SLC exams to begin on March 19.
SLC exams to begin on March 19.SLC exams to begin on March 19.
SLC exams to begin on March 19.
 
Cairo Day2 Part5 Driving Traffic Pub
Cairo Day2 Part5 Driving Traffic PubCairo Day2 Part5 Driving Traffic Pub
Cairo Day2 Part5 Driving Traffic Pub
 
euroFOT at 10th ITS Spain congress, Madrid, May 2010
euroFOT at 10th ITS Spain congress, Madrid, May 2010euroFOT at 10th ITS Spain congress, Madrid, May 2010
euroFOT at 10th ITS Spain congress, Madrid, May 2010
 
Miami
MiamiMiami
Miami
 
lesson 1_akt manaj
lesson 1_akt manajlesson 1_akt manaj
lesson 1_akt manaj
 
PacINET2008 World Summit Awards by Jan Bieringa
PacINET2008 World Summit Awards by Jan BieringaPacINET2008 World Summit Awards by Jan Bieringa
PacINET2008 World Summit Awards by Jan Bieringa
 

Semelhante a (A04 e A05) LabMM3 - JavaScript

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
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
michellobo
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
Paulo Mattos
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
Cláudio Amaral
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
Cristiano Pires Martins
 
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
Alexandre Tarifa
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
Stefan Horochovec
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
elliando dias
 
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
Allyson Barros
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
Tiago Antônio da Silva
 
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Giovanni Bassi
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
Paulo Mattos
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Diego Cavalca
 
Workshop Performance Rails
Workshop Performance RailsWorkshop Performance Rails
Workshop Performance Rails
Vitor Pellegrino
 
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
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Felipe J. R. Vieira
 
Uma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web APIUma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web API
Comunidade NetPonto
 
Python CGI
Python CGIPython CGI

Semelhante a (A04 e A05) LabMM3 - JavaScript (20)

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?
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
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
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 
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
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
 
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Workshop Performance Rails
Workshop Performance RailsWorkshop Performance Rails
Workshop Performance Rails
 
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...
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Uma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web APIUma Introdução a ASP.NET Web API
Uma Introdução a ASP.NET Web API
 
Python CGI
Python CGIPython CGI
Python CGI
 

Mais de 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 estudantes
Carlos Santos
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEdu
Carlos 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 inicial
Carlos 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 alunos
Carlos 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 alunos
Carlos Santos
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
Carlos 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ático
Carlos 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
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
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 Environment
Carlos 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 Campus
Carlos 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 project
Carlos Santos
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
Carlos 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 DeCA
Carlos Santos
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
Carlos 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ção
Carlos Santos
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
Carlos 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
 

Mais de 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)
 

(A04 e A05) LabMM3 - JavaScript

  • 1. JavaScript Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 04 e 05, 26-09-2011
  • 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.
  • 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... Servidor Browser http 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,... 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. labmm. 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. 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?
  • 8. 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)
  • 9. Browser - DOM - JavaScript
  • 10. DOM http://www.w3.org/TR/DOM-Level-3-Core/introduction.html http://en.wikipedia.org/wiki/File:JKDOM.SVG
  • 11. DOM
  • 12. Como interagem? (HTML) • o browser efectua 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 • novos pedidos http são enviados para outros elementos da página • no browser o JavaScript permite, a qualquer momento, alterar o HTML através da manipulação do DOM
  • 13. Como interagem? (HTML ou tec. server side) • o browser efectua um pedido ao servidor por http • no servidor existem duas possibilidades: • é devolvido directamente 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 • novos pedidos http são enviados para outros elementos da página • no browser o JavaScript permite, a qualquer momento, alterar o HTML através da manipulação do DOM
  • 16. “The DOM is a mess” http://ejohn.org/blog/the-dom-is-a-mess/
  • 18. 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!
  • 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(); 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