What Can JavaScript Do?

In this post I will show some example of what can JavaScript do? in an html page.

JavaScript is the most popular and easy language in the world. Some language are interpreted and some are compiled. JavaScript is an interpreted language. it is one of three languages that web developers must know in web development to dynamic the page content.

HTML
CSS
JavaScript

Some advantage of JavaScript:

Less server interaction: because it’s run on client pc.
Immediate feedback: because of client side scripting language, you don’t have to wait for page reload. Which mean less load on server.
Use in offline: its run on web users computers — even when they are offline!
Javascript can run when the user needed or if the user needed and without load the full page.

JavaScript can change HTML content dynamically

Copy the code below in a text editor and save the file in a .html format and see the output.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>JavaScript</title>
</head>
<body>
	<p id = "osd">Hear is some HTML text</p>
	<script type="text/javascript">
		function dynamic()	{
			var text = "JavaScript can change the HTML content dynamically";
			document.getElementById('osd').innerHTML = text;
		}
	</script>
	<input type="button" onclick= "dynamic()" value="Click to change"/>
</body>
</html>

Change background color by JavaScript

Copy the code below in a text editor and save the file in a .html format and see the output.

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<input type="button" onClick="document.bgColor='green'" value="Green" />
	<input type="button" onClick="document.bgColor='red'" value="red" />
	<input type="button" onClick="document.bgColor='blue'" value="blue" />
</body>
</html>

Change HTML style by JavaScript

Copy the code below in a text editor and save the file in a .html format and see the output.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>JavaScript</title>
</head>
<body>
	<p id = "osd">Hear is some HTML text</p>
	<script type="text/javascript">
		function dynamic()	{
			var text = "JavaScript can change the HTML style dynamically";
			document.getElementById('osd').innerHTML = text;
			var x = document.getElementById("osd");
				x.style.fontSize = "25px";           
				x.style.color = "red"; 
		}
	</script>
	<input type="button" onclick= "dynamic()" value="Click to change"/>
</body>
</html>