Javascript - Tutorial

Este documento apresenta uma introdução ao JavaScript, explicando porque é importante aprender a linguagem e apresentando exemplos básicos de como alterar o conteúdo, estilos e visibilidade de elementos HTML usando JavaScript.

Enviado por

Marcelo Siqueira

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

13 visualizações

Javascript - Tutorial

Enviado por

Marcelo Siqueira

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 17

Javascript - Tutorial

Tutorial Rápido de Javascript

Javascript - Introdução

● JavaScript é a linguagem de programação do HTML e da Web.

● JavaScript é fácil de aprender.
● Este tutorial ensinará JavaScript do básico ao avançado.
Por que aprender JavaScript?

JavaScript é uma das três linguagens que todos os desenvolvedores da Web precisam
aprender:

1. HTML para definir o conteúdo de páginas da web;

2. CSS para especificar o layout das páginas da web;
3. JavaScript para programar o comportamento de páginas da web.
Momento do Código
Exemplo para apresentar a data e a hora atuais no
Browser
<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Clique para apresentar a data e a hora.</button>

</body>
</html>
Resultado
JavaScript pode alterar o conteúdo HTML
Este exemplo usa o método "find" para encontrar um elemento HTML (com id = "demo") e altera
o conteúdo do elemento (innerHTML) para "Hello JavaScript":

<!DOCTYPE html >

<h2>O que o JavaScript pode fazer? </h2>

<p id="demo">JavaScript pode mudar o conteúdo do HTML. </p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello

JavaScript!'" >Clique Aqui! </button>

</body>
</html>
Resultado
Outro exemplo
<body>
<h2>O que o Javascript pode fazer?</h2>
<p>JavaScript pode mudar um valor de um atributo em HTML.</p>
<p>Neste caso o JavaScript alterar o valor do atributo src (source) de uma imagem.</p>
<button onclick="document.getElementById('myImage').src='imagem/pic_bulbon.gif'">
Acenda a lâmpada
</button>
<img id="myImage" src="imagem/pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='imagem/pic_bulboff.gif'">
Apague a lâmpada
</button>
</body>
Luz apagada
Luz Acesa
JavaScript pode mudar seu CSS

Alterando o estilo de um elemento HTML:

<body>
<h2>O que o JavaScript pode fazer?</h2>
<p id="demo">JavaScript pode alterar o estilo de um elemento HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
Clique Aqui!
</button>
</body>
Resultado
JavaScript pode ocultar elementos HTML

<body>
<h2>O que o JavaScript pode fazer ?</h2>
<p id="demo">JavaScript pode ocultar elementos HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
Clique aqui!
</button>
</body>
Resultado
JavaScript pode exibir elementos HTML

<body>
<h2>O que o JavaScript pode fazer?</h2>
<p>JavaScript pode mostrar elementos HTML ocultos.</p>
<p id="demo" style="display:none">E não é que apareci...!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
Clique aqui!
</button>
</body>
Resultado
Fim

Obrigado,

Maromo e Rodrigo