1) JavaScript é uma linguagem de programação interpretada utilizada para adicionar interatividade às páginas web.
2) O documento explica como incluir código JavaScript nas páginas web de diferentes formas e dá exemplos básicos de JavaScript.
3) São discutidos os tipos de dados em JavaScript, incluindo números, strings e booleanos.
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)