Introdução ao JavaScript

Índice

Esta página contém alguns exemplos do que o JavaScript pode fazer.

JavaScript pode alterar o conteúdo HTML

Um dos muitos métodos JavaScript HTML é getElementById().

O exemplo abaixo "encontra" um elemento HTML (com id="demo"), e altera o conteúdo do elemento (innerHTML) para "Hello JavaScript":

Exemplo

document.getElementById("demo").innerHTML = "Hello JavaScript";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript aceita aspas duplas e simples:

Exemplo

document.getElementById('demo').innerHTML = 'Hello JavaScript';

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript pode alterar valores de atributos HTML

Neste exemplo, o JavaScript altera o valor do atributo src (fonte) de uma tag <img>:

A lâmpada

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

JavaScript pode alterar estilos HTML (CSS)

Alterar o estilo de um elemento HTML é uma variante de alterar um elemento HTML atributo:

Exemplo

document.getElementById("demo").style.fontSize = "35px";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

JavaScript pode ocultar elementos HTML

Ocultar elementos HTML pode ser feito alterando o estilo display:

Exemplo

document.getElementById("demo").style.display = "none";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

JavaScript pode mostrar elementos HTML

A exibição de elementos HTML ocultos também pode ser feita alterando o estilo display:

Exemplo

document.getElementById("demo").style.display = "block";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

Você sabia?

JavaScript e Java são linguagens completamente diferentes, tanto em conceito e design.

JavaScript foi inventado por Brendan Eich em 1995 e se tornou um padrão ECMA em 1997.

ECMA-262 é o nome oficial do padrão. ECMAScript é o nome oficial da linguagem.