JavaScript Getting Started

OK! Enough text and talk, let’s get started with JavaScript coding with examples.

Preparation for JavaScript

You will need a code/text editor and browser to write code and test JavaScript. Here are some suggestions.

Editors:

Here are some popular editors to get started with JavaScript for web development.

  • Notepad++ (text-based code editor)
  • Sublime Text (text-based)
  • Visual Studio Code (WYSIWYG editor/IDE)
  • Vim (text-based for advanced users)
  • CoffeeCup (WYSIWYG editor)

Browsers:

  • Google Chrome
  • Chromium Web browser
  • Firefox
  • Microsoft Edge
  • Safari
  • Opera Browser

You can also use our “Try Online” editor which includes code editor and preview.

Embed JavaScript into HTML

JavaScript can be inserted into an HTML document inside the <script> element, using the following two methods.

  • Include a reference to embed JavaScript code on the HTML page JavaScript code external file.
  • Insert JavaScript code directly into an HTML document <head> or <body>.

Embed JavaScript code on the HTML page Internally

JavaScript code can be embedded into HTML documents in between opening <script> and closing </script> tags. The <script> element can be placed either inside <head> or <body> tags.

Here is an example of placing the <script> element between <head> and </head> tags.

Example

<html>
<head>
	<script>
		function ShowMessage(){
			alert("Hello! You have called JavaScript function in head section.");
		}
	</script>
</head>
<body>
	<p>Click the link to show message.</p>
  <p><a href="" onclick="ShowMessage();return false">Click here</a></p>
</body>
</html>

Example Output

Try Online

Here is another example of placing the <script> element between <body> and </body> tags.

Example

<html>
	<head></head>
	<body>
		<script type="text/javascript">
			document.write("Hi! JavaScript can write text to HTML document.");
		</script>
	</body>
</html>

Example Output

Try Online

Have you noticed type="text/javascript" the attribute in the above example?

This is to indicate to the HTML document that the tag block is JavaScript language. As of HTML5, this attribute is not required and is also optional in all modern browsers.

Notice:

  • Excessive use of Internal JavaScript is not encouraged.
  • It makes your project difficult to read and maintain. It has to be inserted on every page separately.
  • It can affect the performance of the HTML page and potentially a Cross-site Scripting attack on a website.

External JavaScript file

With this type, the JavaScript code is written into a separate file with the extension .js. This file is then linked to web pages where needed using the following syntax.

<script src="path/to/external/file.js" ></script>

Example in HTML

<html>
  <head>
      <script src="https://www.w3scoop.com/wp-content/uploads/w3s_try/w3s_try.js" ></script>
  </head>
  <body>
      <h1>Using External JavaScript method</h1>
      <p>External JavaScript file can be linked to HTML document in head or body tags.</p>
      <p><a href="" onclick="ShowMessage();return false">Click here</a></p>
  </body>
</html>

Example Output

Try Online
  • This method is more useful and a good approach for both performance and maintenance.
  • One external JavaScript code can be linked and used on many web pages.

Similar to Internal JavaScript this method also allows for the script tag to be placed inside <body> or <head> tags.