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>
<< Anterior Iframes HTML
Deixe um comentário