Laboratório WebCurso de Licenciatura em Audiovisual e Multimédia / 2014-2015 / 4º Semestre

Nuno Palma / npalma@escs.ipl.pt

Introdução à programação javascript

ContactosNuno Palmanpalma@escs.ipl.pt

AtendimentoGabinete 1G1Quintas-feiras das 9h00 às 11h00 (segundo marcação por email).

Facebookhttps://www.facebook.com/groups/ESCS.AM.LAB.WEB

Recursos online Code Academyhttp://www.codecademy.com/

Microsoft Virtual Academyhttp://www.microsoftvirtualacademy.com

W3Schoolshttp://www.w3schools.com/

jQueryhttp://jquery.com/

JavascriptJavascriptLinguagem 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.

JavascriptVariá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.

JavascriptDeclarar 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.

JavascriptVariá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 Numbervar people = Array('Ana,Pedro,António') variável do tipo Arrayvar 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.

JavascriptFunçõesUma 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.

JavascriptFunções

Argumentos de uma funçãoOs 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" );

JavascriptFunções

Função que retorna um valor

function get_value(){//Código a executar pela funçãoreturn 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()

JavascriptObjectosObjectos 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"

Atributosperson.name = 'Jack'person.age = 27person.job = 'Developer'

Métodosperson.walk()person.speak()

JavascriptObjectos JavascriptExistem 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 actualwindow.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 alertawindow.print() - Imprime o conteúdo de uma janela

JavascriptObjectos Javascript

document – representa o documento html

Alguns atributos do objecto document

document.title - retorna o título do documentodocument.images – retorna todas as imagens do documento document.forms – retorna todos os formulários do documento

JavascriptObjectos 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");

JavascriptObjectos Javascript

element – representa um elemento html

Alguns atributos do objecto element

element.className - retorna o atributo "class" de um elementoelement.firstChild – retorna o primeiro elemento filho de um elemento element.offsetWidth – retorna a largura de um elemento

JavascriptObjectos 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>';

JavascriptEventos

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.

JavascriptEventos

ondblclick- ocorre quando o utilizador clica duas vezes num elementoonmousedown – ocorre quando o utilizador pressiona o rato sobre um elementoonmousemove – ocorre quando o utlizador mexe o rato sobre um elementoonmouseover – ocorre quando o utilizador passa com o rato sobre um elementoonmouseout – ocorre quando o utilizador deixa de estar com o rato sobre um elementoonmouseup - ocorre quando o utilizador liberta o botão do rato sobre um elemento

ExercícioNews Player

Imagens: http://www.escslab.pt/materiais/aula1.zip