Escolar Documentos
Profissional Documentos
Cultura Documentos
JavaScript
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
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>
<script type=”text/javascript”>
document.write(”<p>” + Date() + ”</p>”);
</script>
</body>
</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>
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>
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>
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>
</body>
</html>
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>
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
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