JAVASCRIPT HTML
JavaScript no html deixa págima dinâmica e interativa.
JAVASCRIPT DATA E HORA
<!DOCTYPE html>
<html>
<body>
<h1>Meu javaScriptt</h1>
<button type="button"
onclick="document.getElementById('data').innerHTML =
Date()">
Clique para data e hora.</button>
<p id="data"></p>
</body>
</html>
A TAG HTML <SCRIPT>
<SCRIPT> é
usado para definir um script ao lado do cliente.
Para selecionar um elemento do html usa-se método
document.getElementById()
<!DOCTYPE html>
<html>
<body>
<h2>Use Java Script para texto</h2>
<p> No id="nome" será exibido Meu JavaScript
</p>
<p id="nome"> </p>
<script>
document.getElementById("nome").innerHTML =
"Meu JavaScript!";
</script>
</body>
</html>
JAVASCRIPT PODE ALTERAR O CONTEÚDO
<!DOCTYPE html>
<html>
<body>
<h1>Meu Java
Script</h1>
<p>JavaScript sendo
usado no elemento html.</p>
<button
type="button" onclick="myFunction()">Clique
aqui</button>
<p
id="nome"> Ao clicar vai executar uma ação</p>
<script>
function myFunction() {
document.getElementById("nome").innerHTML = "Meu
JavaScript!";
}
</script>
</body>
</html>
APLICANDO STYLE JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<h1>Aplicando style
javascript</h1>
<p
id="nome">JavaScript usando style no elemento html</p>
<script>
function myFunction() {
document.getElementById("nome").style.fontSize
= "22px";
document.getElementById("nome").style.color = "red";
document.getElementById("nome").style.backgroundColor =
"black";
}
</script>
<button
type="button" onclick="myFunction()">clique aqui</button>
</body>
</html>
NOME ID DO <P> É IGUAL JAVASCRIPT
( NO ID
NOME PARA SER QUALQUER NOME.
<p id="nome">JavaScript
usando style no elemento html</p>
{
document.getElementById("nome")
JAVASCRIPT PODE
ALTERAR ATRIBUTOS
<!DOCTYPE html>
<html>
<body>
<h1>Meu Java
Script</h1>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "minhaimagem.gif"
} else {
pic = "minhaimagem.gif"
}
document.getElementById('imagem').src = pic;
}
</script>
<img
id="imagem" src="minhaimagem.gif" width="100"
height="180">
<p>
<button
type="button" onclick="light(1)">clique para
acender</button>
<button
type="button" onclick="light(0)">Clique para
apagar</button>
</p>
</body>
</html>
A TAG HTML <NOSCRIPT>
<!DOCTYPE html>
<html>
<body>
<p id="nome"></p>
<script>
document.getElementById("nome").innerHTML =
"Meu JavaScript!";
</script>
<noscript>Sorri, navegador não suporta
javascript</noscript>
</body>
</html>