Core JavaScript

Intermediate JavaScript

JavaScript Reference


JavaScript Where to Put


HTML script element offer to write JavaScript between opening <script> tag and closing </script> tag. You can put JavaScript head or body section. Also you can write JavaScript external .js extension file.

Before we going ahead, let's know JavaScript where to write.

In JavaScript Introduction lesson we referred to a in-line JavaScript code. It's ok for a beginner but when the page content is largest It's hard to maintain JavaScript mixed with HTML. And page content become follow the worst coding standard.

Instead of this in-line JavaScript, We should write JavaScript into separated section or separated file. You can write JavaScript,

  1. In-line JavaScript
  2. JavaScript place on <body> tag
  3. JavaScript place on <head> tag
  4. External JavaScript
  5. Test on Console Panel (Browser Developer Tools)

As per HTML specification type attribute must be specify with valid value "text/javascript".

Syntax :

<script type="text/javascript">
    	JavaScript code write on here....
</script>


In-line JavaScript

You can write inline JavaScript statements for all HTML events.

<p id="text">Click to change Text Message....:)</p>
<button type="button" 
        onclick="document.getElementById("text").innerHTML = "Hello World!";">Change Text</button>

Run it...   »


JavaScript place on <body> tag

You can write JavaScript directly body section inside opening <script> tag or closing </script> tag.
Put JavaScript code at end of the body section is improve the page loading speed, Because HTML content loading is not blocking JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript place on body tag</title>
</head>
<body>
    <script type="text/javascript">
        document.write("Hello World!");
        document.write("<h2> Hello World! </h2>");
    </script>
</body>
</html>

Run it...   »


JavaScript place on <head> tag

JavaScript write on head section inside opening <script> tag or closing </script> tag.
Sometimes page content depend on this JavaScript code. So we need to load JavaScript code before the Body Section.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript place on head tag</title>
	<script type="text/javascript">
		function user_fun() {
			document.getElementById("text").innerHTML = "Hello World!";
		}
    </script>
</head>
<body>
	<p id="text">Click to change Text Message....:)</p>
	<button type="button" 
        	onclick="user_fun();">Change Text</button>
</body>
</html>

Run it...   »


External JavaScript

You can write JavaScript code on external file with .js extension. And linked with the main documents.

Benefit of external JavaScript file you can linked multiple document, when you edit JavaScript file effect to all linked document.

Using "src" attributes to find relative path of external .js file.

external_script.js
function user_fun() {
	document.getElementById('text').innerHTML = 'Hello World!';
}
js_external_js_file.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>External JavaScript</title>
	<script type="text/javascript" src="external_script.js"></script>
</head>
<body>
	<p id="text">Click to change Text Message....:)</p>
	<button type="button" 
        onclick="user_fun();">Change Text</button>
</body>
</html>

Run it...   »


Test on Console Panel (Browser Developer Tools)

You can test JavaScript statement on console panel and return the output. Also console.log() method to print the values on console.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS Result view on Console Panel</title>
</head>
<body>
	<script type="text/javascript">
		console.log("Hello World....!");

		var sum = 5 + 10;
		console.log("Sum of two number: " + sum);
	</script>
</body>
</html>

Run it...   »


View Result : Open Console Panel (In Browser, press F12)

JS View on Google Chrome Console

Console Panel - Google Chrome


JS View on Mozilla Firefox Console

Console Panel - Mozilla Firefox