Este documento apresenta uma introdução à programação JavaScript, descrevendo conceitos como variáveis, funções, objetos e eventos. Inclui exemplos de como declarar variáveis e funções, manipular objetos como document e element, e lidar com eventos como onclick. Também fornece links para recursos online de aprendizagem de JavaScript.

1. Laboratório Web
Curso de Licenciatura em Audiovisual e Multimédia / 2014-2015 / 4º Semestre
Nuno Palma / npalma@escs.ipl.pt
Introdução à programação javascript

2. Contactos
Nuno Palma
npalma@escs.ipl.pt
Atendimento
Gabinete 1G1
Quintas-feiras das 9h00 às 11h00 (segundo marcação por email).
Facebook
https://www.facebook.com/groups/ESCS.AM.LAB.WEB

3. Recursos online
Code Academy
http://www.codecademy.com/
Microsoft Virtual Academy
http://www.microsoftvirtualacademy.com
W3Schools
http://www.w3schools.com/
jQuery
http://jquery.com/

4. Javascript
Javascript
Linguagem de programação interpretada ou linguagem de script (scripting language).
Possibilita a interacção do utilizador com programas (scripts) através do browser não
tendo de ser executada num servidor.
O javascript permite-nos uma interacção mais rica com uma página web através do
modelo DOM (Document Object Model).
Este modelo possibilita-nos referir e manipular qualquer elemento de uma página web.

5. Javascript
Variáveis
Uma variável é um "espaço de armazenamento" que utilizamos para guardar informação.
Uma variável está associada a um nome, que servirá de referência ao longo de um
programa e um valor que pode ser alterado ao longo de um programa.
Uma variável pode guardar vários tipo de informação como texto ou um número.
Para criarmos uma variável é necessário declará-la no nosso programa.

6. Javascript
Declarar uma variável
var name;
var age;
Declaramos uma variável através da expressão var e atribuindos um nome à
variável. Os nomes da variáveis têm de começar com uma letra. No código
apresentado acima nenhum valor foi atribuído a qualquer uma das variáveis.
var name = 'Maria';
var age = 27;
Podemos atribuir um valor à variável logo na sua declaração. No caso acima foi atribuído
o valor "Maria" à variável name e o valor "27" à variável age.

7. Javascript
Variáveis
Os valores atribuídos a uma variável podem ser de vários tipos:
var name = 'Maria'; variável do tipo String
var age = 27; variável do tipo Number
var people = Array('Ana,Pedro,António') variável do tipo Array
var is_ok = true; valor do tipo Boolean (true/false)
Alterar o valor de uma variável
var age = 27;
age = 25;
A variável age é inicializada com o valor 27 mas posteriormente o seu valor é
alterado para 25.

8. Javascript
Funções
Uma função é um bloco de código que pode ser executado.
Declarar uma função
function ring_alarm() {
// dentro da função colocamos o código que será executado
}
Executar uma função
ring_alarm();
Quando executamos uma função o código dentro da função será executado.

9. Javascript
Funções
Argumentos de uma função
Os argumentos de uma função são os valores que são fornecidos a uma função
e que podem ser utilizados na sua execução
Declarar uma função com argumentos
function function_name(argumento1, argumento2,...){ }
Exemplo
function ring_alarm( time,song){
//Código a executar pela função
}
Executar uma função com argumentos
ring_alarm( "9:00", "Wake Up - Arcade Fire" );

10. Javascript
Funções
Função que retorna um valor
function get_value(){
//Código a executar pela função
return value;
}
Através do comando return a função, para além de executar o código dentro
dela, retorna um valor no final. Após o uso do comando return a função termina
a sua execução.
Ex: var value = get_value();
Neste exemplo a variável value irá guardar o valor retornado pela função
get_value()

11. Javascript
Objectos
Objectos são tipos de dados definidos por atributos (propriedades) e métodos
(acções).
Um atributo é um valor associado a um objecto, ou seja, uma característica.
Um método é uma acção que um objecto pode executar.
Exemplo: Objecto "person"
Atributos
person.name = 'Jack'
person.age = 27
person.job = 'Developer'
Métodos
person.walk()
person.speak()

12. Javascript
Objectos Javascript
Existem alguns objectos declarados automaticamente pelo javascript, ou seja,
existem no nosso código mesmo sem termos sido nós a declará-los.
window – representa a janela do browser
Alguns atributos do objecto window
window.location - URL actual
window.innerHeight – altura interior da janela do browser
window.innerwidth – largura interior da janela do browser
Alguns métodos do objecto window
window.alert() - apresenta uma mensagem de alerta
window.print() - Imprime o conteúdo de uma janela

13. Javascript
Objectos Javascript
document – representa o documento html
Alguns atributos do objecto document
document.title - retorna o título do documento
document.images – retorna todas as imagens do documento
document.forms – retorna todos os formulários do documento

14. Javascript
Objectos Javascript
document
document.getElementById() - procura e retorna o elemento com determinado
ID
Ex: document.getElementById("logo");
document.getElementsByTagName() - procura e retorna todos os elementos
de determinado tipo
Ex: document.getElementsByTagName('span');
document.write() - escreve no documento HTML
Ex: document.write("Hello World");

15. Javascript
Objectos Javascript
element – representa um elemento html
Alguns atributos do objecto element
element.className - retorna o atributo "class" de um elemento
element.firstChild – retorna o primeiro elemento filho de um elemento
element.offsetWidth – retorna a largura de um elemento

16. Javascript
Objectos Javascript
element
Alguns métodos do objecto element
element.style - atribui ou altera propriedades de estilo de um elemento
Ex: element.style.width = '100px';
Ex: element.style.color = '#333';
element.innerHTML - determina o conteúdo html de um elemento
Ex: element.innerHTML = '<div class="title">Título da página</div>';

17. Javascript
Eventos
onclick - ocorre quando o utilizador clica num elemento
Ex: <div onclick="do_something();">Conteúdo do div</div>
Neste exemplo, ao clicarmos no elemento div será executada a função
"do_something()" que deverá estar declarada no código javascript.

18. Javascript
Eventos
ondblclick- ocorre quando o utilizador clica duas vezes num elemento
onmousedown – ocorre quando o utilizador pressiona o rato sobre um
elemento
onmousemove – ocorre quando o utlizador mexe o rato sobre um
elemento
onmouseover – ocorre quando o utilizador passa com o rato sobre um
elemento
onmouseout – ocorre quando o utilizador deixa de estar com o rato sobre
um elemento
onmouseup - ocorre quando o utilizador liberta o botão do rato sobre um
elemento

19. Exercício
News Player
Imagens: http://www.escslab.pt/materiais/aula1.zip