HTMLJavaScript _

O tópico que estamos discutindo é HTML javascript . Usando JavaScript, você pode criar páginas HTML dinâmicas e interativas.

Um script adiciona interatividade ao seu site adicionando um pequeno trecho de código. O script pode exibir uma mensagem de caixa de alerta pop-up ou exibir um menu suspenso. Um script JavaScript pode ser escrito para este script.

Por exemplo, o exemplo abaixo mostra a hora e a data atuais clicando no botão:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h1>My First JavaScript Program</h1><br><br><button type="button">onclick="document.getElementById('mrexamples').innerHTML = Date()"><br>Click on the button to see the recent time and date.</button><br><br><p id="mrexamples"></p><br><br><br> <br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

A tag HTML <script>

Os scripts do lado do cliente geralmente são representados utilizando o elemento HTML <script> (JavaScript).

Os elementos <Script> contêm instruções de script ou apontam para arquivos de script externos por meio de atributos src .

HTML JavaScript é normalmente utilizado para manipulação de imagem, validação de formulário e alterações dinâmicas de conteúdo.

HTML JavaScript utiliza o método document.getElementById() para selecionar elementos HTML .

Um elemento HTML com id=”demo” é registrado com o código JavaScript “This is JavaScript.”:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h2>Use JavaScript to Change Text</h2><br><p>This example writes "Hello User!" into an HTML element with id="mrexample":</p><br><br><p id="mrexample"></p><br><br><script><br>document.getElementById("mrexample").innerHTML = "Greetings User !";<br></script> <br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uma palavra para o sábio: as próximas lições de JavaScript que planejamos permitirão que você adquira uma quantidade significativa de conhecimento adicional em JavaScript.

Uma amostra do JavaScript

JavaScript pode ser utilizado em HTML javascript para realizar o seguinte:

O conteúdo pode ser modificado por JavaScript:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h1>My First JavaScript</h1><br><br><p>JavaScript can change the content of an HTML element:</p><br><br><button type="button" onclick="myFunction()">Click Me!</button><br><br><p id="demo">This is a demonstration.</p><br><br><script><br>function myFunction() { <br> document.getElementById("demo").innerHTML = "Hello JavaScript!";<br>}<br></script><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os estilos podem ser ajustados através do JavaScript:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h1>My First JavaScript</h1><br><br><p id="demo">JavaScript can change the style of an HTML element.</p><br><br><script><br>function myFunction() {<br> document.getElementById("demo").style.fontSize = "25px"; <br> document.getElementById("demo").style.color = "red";<br> document.getElementById("demo").style.backgroundColor = "yellow"; <br>}<br></script><br><br><button type="button" onclick="myFunction()">Click Me!</button><br><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo de estilos javascript:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br> <title>JavaScript Style Example</title><br> <style><br> #myDiv {<br> background-color: yellow;<br> width: 200px;<br> height: 200px;<br> }<br> </style><br><br><br> <div id="myDiv"></div><br><br> <script><br> // select the element with ID "myDiv"<br> var myDiv = document.getElementById("myDiv");<br><br> // change the style of the element<br> myDiv.style.backgroundColor = "red";<br> myDiv.style.border = "1px solid black";<br> myDiv.style.borderRadius = "10px";<br> </script><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

JavaScript pode ser usado para modificar atributos:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h1>My First JavaScript</h1><br><p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p><br><br><script><br>function light(sw) {<br> var pic;<br> if (sw == 0) {<br> pic = "https://mrexamples.com/wp-content/uploads/2023/03/Html-javascript-off.png"<br> } else {<br> pic = "https://mrexamples.com/wp-content/uploads/2023/03/Html-javascript-on.png"<br> }<br> document.getElementById('myImage').src = pic;<br>}<br></script><br><br><img id="myImage" src="https://mrexamples.com/wp-content/uploads/2023/03/Html-javascript-off.png"><br><br><p><br><button type="button" onclick="light(1)">Turn Button On</button><br><button type="button" onclick="light(0)">Turn Button Off</button><br></p><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Tag HTML <noscript>

Em HTML, a tag <noscript> retrata um conteúdo alternativo para usuários que não mantêm scripts em seus navegadores da web ou têm scripts desabilitados em seus navegadores:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><p id="demo"></p><br><br><script><br>document.getElementById("demo").innerHTML = "Hello JavaScript!";<br></script><br><br><noscript>Sorry, your browser does not support JavaScript!</noscript><br><br><p>A browser without support for JavaScript will show the text written inside the noscript element.</p><br> <br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Eventos JavaScript para HTML

Em JavaScript, um evento é algo que é executado pelo usuário ou pelo navegador, como um clique do mouse ou um carregamento de página em HTML javascript .

Usando os atributos do manipulador de eventos do HTML e o código JavaScript, os eventos podem ser manipulados. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h2>On Click example</h2>
<p>A pop-up window will appear when you click the button</p>
<input type="button" value="Click" onclick="alert('Hello, Welcome to Mr Examples')">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O HTML pode exibir os seguintes eventos:

  • Eventos de formulário: redefinição, envio, etc.
  • Selecione eventos: área de texto, campo de texto, etc.
  • Evento de foco: desfoque, foco, etc.
  • Eventos do mouse: navegar, selecionar, mouse para cima, mouse para baixo, clicar, clicar duas vezes, etc.
Nome do evento Nome do manipulador Ocorre quando
No foco foco Toda vez que um campo de entrada é focado.
ao clicar clique Clicando em um elemento de formulário ou link
onBlur borrão A entrada no formulário torna-se desfocada em
carregando carregar Durante o carregamento de uma página por um navegador.
ao enviar enviar Um formulário é enviado por um usuário.
onSelect selecionar O campo de entrada do formulário é selecionado pelo usuário.

Tags de script HTML

Marcação Visão geral
<script> Cria um script que é executado no navegador.
<noscript> Alimenta conteúdo alternativo para usuários que não mantêm scripts do lado do cliente

Aqui está uma lista completa de todas as tags HTML .

Vantagens do HTMLJavaScript

HTML e JavaScript são linguagens de programação amplamente usadas para criar sites e aplicativos da web. Quando esses dois idiomas são combinados, eles oferecem vários benefícios, incluindo:

Experiência do usuário aprimorada: o uso de JavaScript com HTML permite que os desenvolvedores da web criem páginas da web dinâmicas, interativas e fáceis de usar que fornecem uma experiência de usuário aprimorada.

Funcionalidade aprimorada: o JavaScript permite que os desenvolvedores adicionem funcionalidade às páginas HTML, como validação de formulário, animação e elementos interativos como controles deslizantes, menus suspensos e pop-ups.

Fácil integração: HTML e JavaScript podem ser perfeitamente integrados com outras tecnologias da web, como CSS e linguagens de programação do lado do servidor, para criar um aplicativo da web robusto e abrangente.

Suporte universal: HTML e JavaScript são suportados por todos os principais navegadores da web, tornando-os uma linguagem universal para a criação de páginas e aplicativos da web.

Melhor SEO: o HTML fornece uma maneira estruturada de organizar o conteúdo em uma página da Web, e o uso de JavaScript para criar conteúdo dinâmico e interativo pode melhorar a otimização do mecanismo de pesquisa (SEO), tornando a página mais atraente e informativa para os usuários.

Maior acessibilidade: o HTML fornece recursos de acessibilidade que permitem que usuários com deficiência acessem o conteúdo da web. Ao usar JavaScript para criar conteúdo interativo e dinâmico, ele pode aprimorar ainda mais a acessibilidade.

Você pode compartilhar este artigo com seus amigos se achar informativo clicando nos links abaixo.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.