Você está na página 1de 19

Programação para a Web

JavaScript

Cleo Zanella Billa

14 de Abril de 2011

Slide – 1 / 19
Primeiro Exemplo

Introdução a
JavaScript
■ Exemplo JavaScript: Clique Aqui
Trabalho
<html>
Referências e
Material Extra <head>
<script type=”text/javascript”>
function displayDate() {
document.getElementById(”demo”).innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id=”demo”>This is a paragraph.</p>
<button type=”button” onclick=”displayDate()”>Display Date
</button>
</body>
</html>

Slide – 2 / 19
A Linguagem JavaScript

Introdução a
JavaScript ■ É a linguagem de script mais comum na web.
Trabalho
Referências e
■ A maioria dos browser suporta (IE, Firefox, Safari, Chrome,
Material Extra Konqueror, Opera, ...)
■ Foi projetada para dar interatividade a páginas HTML.
■ Roda no lado do cliente (browser).
■ É uma linguagem de script.
■ É uma linguagem interpretada.
■ Normalmente é incorporada diretamente ao HTML.

Slide – 3 / 19
Java x JavaScript

Introdução a
JavaScript
■ Java e JavaScript são a mesma linguagem?
Trabalho
Referências e
◆ NÃO.
Material Extra
■ Java e JavaScript são duas linguagens totalmente diferentes.
■ Java é uma linguagem poderosa e muito mais complexa (da
mesma categoria de C/C++).

Slide – 4 / 19
Potencial do JavaScript

Introdução a
JavaScript
■ O que pode ser feito em JavaScript:
Trabalho
Referências e
◆ Oferece uma linguagem de programação a HTML.
Material Extra
◆ Permite geração de textos dinâmicos em HTML.
◆ Pode reagir a eventos.
◆ Pode ler/escrever elementos HTML.
◆ Pode validar dados.
◆ Pode ser usado para criar cookies.

Slide – 5 / 19
Exemplos de Uso/Código

Introdução a
JavaScript
■ Usos mais populares do JavaScript:
Trabalho
Referências e
◆ Trocar a imagem quando o mouse passa sobre um link.
Material Extra Clique Aqui
◆ Abrir uma nova janela do browser. Clique Aqui
◆ Escrever conteúdo dinâmico. Clique Aqui
◆ Verificação de formulários. Clique Aqui
◆ Passar informação de uma página para outra.
Clique Aqui
◆ Uso de cookies. Clique Aqui

Slide – 6 / 19
Exemplos de Uso/Código

Introdução a ■ Mais alguns exemplos de uso de JavaScript:


JavaScript

Trabalho ◆ Popup Menus Clique Aqui


Referências e
Material Extra ◆ Tooltips Clique Aqui
◆ Movimentação de objetos:
■ Neve: Clique Aqui
■ Estrelas: Clique Aqui
■ Relógio Analógico: Clique Aqui
◆ Mouse Trail:
■ Animação: Clique Aqui
■ Várias Opções Clique Aqui
◆ Jogos:
■ Paciência: Clique Aqui
■ Vários Jogos: Clique Aqui

Slide – 7 / 19
JavaScript no HTML

Introdução a
JavaScript
■ Para inserir um script no código HTML usa-se a tag
Trabalho < script >.
Referências e
Material Extra ■ Deve-se também utilizar a tag type para definir o tipo de
script. No caso do JavaScript usa-se <script
type="text/javascript">

Slide – 8 / 19
Exemplo de JavaScript

Introdução a
JavaScript
■ Escrevendo no HTML
Trabalho
<html>
Referências e
Material Extra <body>

<h1>My First Web Page</h1>

<script type=”text/javascript”>
document.write(”<p>” + Date() + ”</p>”);
</script>

</body>
</html>

■ Teste: Clique Aqui


■ obs.: Evite usar document.write() na prática, porque ele sobrescreve todo o código HTML.

Slide – 9 / 19
Outro Exemplo de JavaScript

Introdução a
JavaScript
■ Escrevendo no HTML
Trabalho
<body>
Referências e
Material Extra <h1>My First Web Page</h1>
<p id=”demo”></p>

<script type=”text/javascript”>
document.getElementById(”demo”).innerHTML=Date();
</script>

</body>

■ Teste: Clique Aqui

Slide – 10 / 19
Alguns Browsers Não Suportam JavaScript

Introdução a
JavaScript
■ Se o browser não suporta JavaScript ele irá mostrar o
Trabalho comando como um texto comum. Clique Aqui
Referências e
Material Extra ■ Para evitar essa situação é comum comentar o código
JavaScript.
<body>
<script type=”text/javascript”>
<!−−
document.getElementById(”demo”).innerHTML=Date();
//−−>
</script>
</body>

■ Outra solução é usar a tag < noscript >.

Slide – 11 / 19
JavaScript no HTML

Introdução a
JavaScript
■ Um script pode ser colocado em qualquer ponto de um
Trabalho código HTML. Tanto no < head > quanto no < body >.
Referências e
Material Extra ■ Entretanto para deixar o documento mais estruturado
segue-se os seguinte padrões:
◆ A maioria dos scripts fica no < head > para deixar
separado do conteúdo.
◆ Se o script deve ser executado em um determinado
momento do carregamento da página, colaca-se no
< body >. Caso o script seja pequeno pode-se colocar
ele por inteiro, senão o melhor é criar uma função e seu
respectivo código no < head >.
◆ Se o seu script é usado em mais de uma página, ou tem
várias linhas de código, coloca-se em um arquivo
separado.

Slide – 12 / 19
JavaScript no < body >

Introdução a
JavaScript
■ Usando um script dentro da tag < body >.
Trabalho
<html>
Referências e
Material Extra <body>
<h1>My First Web Page</h1>

<p id=”demo”></p>

<script type=”text/javascript”>
document.getElementById(”demo”).innerHTML=Date();
</script>

</body>
</html>

■ Note que o script é colocado depois da tag com identificador


demo.
■ Teste: Clique Aqui
Slide – 13 / 19
JavaScript no < head >

Introdução a
JavaScript
■ Um script é executado quando uma página HTML é
Trabalho carregada.
Referências e
Material Extra ■ As vezes esse não é o objetivo. Portanto, podemos associar
um script a eventos.
■ Nesses casos é comum usar funções declaradas na tag
< head >.
■ Veremos mais detalhes no decorrer do curso.

Slide – 14 / 19
JavaScript no < head >

Introdução a
JavaScript
■ Exemplo:
Trabalho
<html>
Referências e
Material Extra
<head>
<script type=”text/javascript”>
function displayDate() {
document.getElementById(”demo”).innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id=”demo”></p>

<button type=”button” onclick=”displayDate()”>Display Date</button>

</body>
</html>

■ Teste: Clique Aqui

Slide – 15 / 19
JavaScript em um Arquivo Externo

Introdução a
JavaScript
■ Um script pode ser colocado em um arquivo externo.
Trabalho
■ Arquivos JavaScript normalmente tem extensão .js.
Referências e
Material Extra
■ Para linkar com um arquivo externo use o atributo src na tag
< script >.
<html>
<head>
<script type=”text/javascript” src=”exemplo.js”></script>
</head>
<body>
</body>
</html>

■ Teste: Clique Aqui

Slide – 16 / 19
Mais Caracterı́sticas JavaScript

Introdução a
JavaScript
■ JavaScript é uma sequência de comandos executados pelo
Trabalho browser.
Referências e
Material Extra ■ JavaScript é Case Sensitive
■ Ponto-Vı́rgulas (;) são opcionais (de acordo com a definição
da linguagem). Porém é extremamente recomendado o seu
uso.
■ Bloco são definidos por { e }.
■ Comentários de uma linha são definidos por //
■ Comentários de várias linhas são definidos por /* (inı́cio) e
*/ (fim).

Slide – 17 / 19
Trabalho 02 - HTML, CSS e JavaScript

Introdução a ■ Duplas
JavaScript

Trabalho ■ Formato: HTML com CSS


Referências e
Material Extra ■ Entrega: Enviar o link do site até o dia 27/04/2011 as 23:55 pelo
moodle.
■ Enunciado: Faça um guia de referência sobre a sintaxe da linguagem
JavaScript. Seu guia deve incluir:

◆ Variáveis, Operadores (de atribuição, matemáticos e de


comparação), Seleção (if, else e switch), Repetição (for, while,
break e for..in) e declaração de funções.
◆ Arrays
◆ Pop Boxes
◆ POO - Declaração de classes, atributos e métodos. Tratamento de
exceções (try...catch e throw).

Slide – 18 / 19
Referências e Material Extra

Introdução a
JavaScript
■ Tutoriais:
Trabalho
Referências e
◆ JavaScript da w3schools:
Material Extra http://www.w3schools.com/js/default.asp
◆ JavaScript da How to Create :
http://www.howtocreate.co.uk/tutorials/javascript/

Slide – 19 / 19

Você também pode gostar