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


The HTML <script> Tag

Client-side scripts are often represented utilising the HTML <script> element (JavaScript).

<Script> elements either contain script statements or point to external script files through src attributes.

HTML JavaScript is typically utilized for image manipulation, form validation, and dynamic content changes.

HTML JavaScript utilizes the document.getElementById() method to select HTML elements.

An HTML element with id=”demo” is registered with the JavaScript code “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

A word to the wise: The forthcoming JavaScript lessons we have planned will allow you to acquire a significant amount of additional knowledge on JavaScript.

A Taste of JavaScript

JavaScript can be utilized in HTML javascript to accomplish the following:

Content can be modified by 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

Styles can be adjusted through 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

Another example of javascript styles:

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 can be used to modify attributes:

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

HTML <noscript> Tag

In HTML, the <noscript> tag portrays alternate content for users that do not keep scripts in their web browser or have disabled scripts in their web browsers:

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

JavaScript Events for HTML

In JavaScript, an event is something that is performed by the user or the browser, such as a mouse click or a page load in HTML javascript .

Using HTML’s event handler attributes and JavaScript code, events can be handled. See example below:

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

HTML can display the following events:

  • Form events: resetting, submitting, etc.
  • Select events: text area, text field, etc.
  • Focus event: blur, focus, etc.
  • Mouse events: navigate, select, mouse up, mouse down, click, double click, etc.
Event Event Name Handler Name Occurs when
onFocus focus Every time an input field is focused.
onClick click Clicking on a form element or link
onBlur blur Input on the form becomes unfocused in
onLoad load During the loading of a page by a browser.
onSubmit submit A form is submitted by a user.
onSelect select Form input field is selected by the user.

HTML Script Tags

Tag Overview
<script> Creates a script that runs on the browser’s.
<noscript> Feeds alternate content for users who don’t keep client-side scripting

Here is a complete list of all HTML tags.

Advantages of HTML JavaScript

HTML and JavaScript are widely used programming languages for creating websites and web applications. When these two languages are combined, they offer several benefits, including:

Enhanced user experience : Using JavaScript with HTML allows web developers to create dynamic, interactive, and user-friendly web pages that provide an enhanced user experience.

Improved functionality : JavaScript enables developers to add functionality to HTML pages, such as form validation, animation, and interactive elements like sliders, dropdown menus, and pop-ups.

Easy integration : HTML and JavaScript can be seamlessly integrated with other web technologies, such as CSS and server-side programming languages, to create a robust and comprehensive web application.

Universal support : Both HTML and JavaScript are supported by all major web browsers, making them a universal language for creating web pages and applications.

Better SEO : HTML provides a structured way to organize content on a web page, and using JavaScript to create dynamic and interactive content can improve search engine optimization (SEO) by making the page more engaging and informative to users.

Increased accessibility : HTML provides accessibility features that enable users with disabilities to access web content. By using JavaScript to create interactive and dynamic content, it can further enhance accessibility.

You can share this article with your friends if you found it informative by clicking on the links below.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
ícone