HTML JavaScript
A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting language is JavaScript used for websites.
Example
<!DOCTYPE html>
<html>
<body>
<h4>JavaScript Date and Time example</h4>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
JavaScript Date and Time example click on below button to show output
JavaScript Date and Time example
HTML <script> Tag
The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.
It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses document.getElementById() method to select an HTML element.
<!DOCTYPE html>
<html>
<body>
<h4>Use JavaScript to Change Text</h4>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML =
"Hello Technoapps Development";
</script>
</body>
</html>
Output is:
Use JavaScript to Change Text
Hello Technoapps Development
HTML events with JavaScript
An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events.
HTML provides event handler attributes which work with JavaScript code and can perform some action on an event.
Example is:
JavaScript click button example to show output as below
<!DOCTYPE html>
<html>
<body>
<h4>Click Event Example</h4>
<p>Click on the button and you csn see a pop-up window with a message</p>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>
Click Event Example
Click on the button and you csn see a pop-up window with a message
- Form events : reset, submit, etc.
- Select events : text field, text area, etc.
- Focus event : focus, blur, etc.
- Mouse events : select, mouseup, mousemove, mousedown, click, dblclick, etc.
Following are the list for Window event attributes:
| Event Name | Handler Name | Occurs when |
|---|---|---|
| onBlur | blur | When form input loses focus |
| onClick | click | When the user clicks on a form element or a link |
| onSubmit | submit | When user submits a form to the server. |
| onLoad | load | When page loads in a browser. |
| onFocus | focus | When user focuses on an input field. |
| onSelect | select | When user selects the form input filed. |
