JavaScript an introduction

JavaScript is the most popular and widely used programming language for web development and design. Working alongside CSS and HTML, JavaScript interacts with HTML elements CSS style and classes to change the behavior and appearance of web pages dynamically.

It is primary Client-Side Scripting which can be directly embedded into HTML documents to control the behavior of the web pages.

The most common uses of JavaScript are DOM manipulation, form validation, button actions, and other user interactions.

<!DOCTYPE html>
<html>
<body>

<script>
	function changecolor(elmid){
		document.getElementById(elmid).style.color = "blue";
		
	}
</script>	
<h1 id="header1">JavaScript can change contents and its style of an element.</h1>

<div id="changestr">Existing HTML content inside div element.</div>

<button type="button" onclick="document.getElementById('changestr').innerHTML = 'Hello World, Its JavaScript!'" > Click Here </button>
<button type="button" onclick="changecolor('header1')" > Change Header Color </button>

</body>
</html>

Example Output

Try Online

Explanation

In the above example clicking on the first button triggers a JavaScript click event, which executes the functionality to get the element div by its id changestr and change the contents inside that HTML element.

The second button calls the function “changecolor” and passes the ID of the “h1” which is header1 in this case. Using the getElementById method javascript changes the style of the element which is the color of the element in this case.