JavaScript em HTML


JavaScript torna as páginas HTML mais dinâmicas e interativas.

 

Comece testando esse script

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 


 

A tag <script> HTML

A <script>tag HTML é usada para definir um script do lado do cliente (JavaScript).

O <script>elemento contém instruções de script ou aponta para um arquivo de script externo por meio do srcatributo

Os usos comuns para JavaScript são manipulação de imagem, validação de formulário e alterações dinâmicas de conteúdo.

Para selecionar um elemento HTML, o JavaScript costuma usar o document.getElementById()método.

Este exemplo de JavaScript escreve “Olá JavaScript!” em um elemento HTML com id = “demo”:

Aqui estão alguns exemplos do que o JavaScript pode fazer:

 

Exemplo
JavaScript pode alterar o conteúdo:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>


Cor de fundo

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

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

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>


 

Olha esse exemplo de acender uma lâmpada.

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>
<p>Acenda a luz com javascript</p>

<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/javascript-em-html-1.png"
  } else {
    pic = "https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/javascript-em-html.png"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/07/javascript-em-html-1.png" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>


 

A tag HTML <noscript>

A <noscript>tag HTML define um conteúdo alternativo a ser exibido para usuários que desativaram scripts no navegador ou que não oferecem suporte a scripts:

Exemplo

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Não suporta script</noscript>

 

 

 

Categoria: curso html | Tags: , , , , , , , | Postado por joemaster em 01/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *