Introduction to JavaScript

What is JavaScript?

JavaScript, often abbreviated as JS, is a programming language / scripting language used in making web pages. JavaScript is one of the core technologies, alongside HTML and CSS, used to create dynamic web applications. JS is mostly ran on the client-side (your web browser), but can now be run on the server side (Node.js) as well. The webpage you are looking at right now uses Javascript!

JavaScript was created by Brendan Eich in 1995, while working at NetScape. Although there are similarities between JavaScript and Java, the two languages are distinct and differ greatly in design. ECMAScript is the official name of the language and ECMA-262 is the official name of the standard in which all javascript engines use.

Frameworks

JavaScript frameworks are collections of JS code that have published to make it easier for developers to write code faster and cleaner. When making dynamic content for websites, applications, etc... developers often have to manipulate the page the same way over and over. To make developing simple, using a JavaScript framework cuts down on writing huge blocks of code over and over again by reusing code that someone else wrote.

Popular frameworks used today include:

Vanilla JavaScript, or plain JavaScript, is a term used for JavaScript code created without any frameworks.

How to

Writing JavaScript can be done in-line on your page, or included as a separate file. In HTML, JavaScript code must be inserted between <script> and </script> tags. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

Example #1 - Add script to the head tag within the page

Adding the javascript to the <head> tag will execute when the page is being loaded.

<!DOCTYPE html>
<html>

	<head>
	<title>Title goes here</title>
	<script>
		alert('Hello, this is an alert');
	</script>
	</head>
	
<body>
	<h1>Heading</h1>
	<p>This is a paragraph</p>
</body>

</html>

				
Example #2 - Add script to the head tag, but from external file

Adding the javascript to the <head> tag as an external file will call execute the same as before, but your code can be inside a different file. This is how frameworks are made.

<!DOCTYPE html>
<html>

	<head>
	<title>Title goes here</title>
	<script  src="myScript.js"></script>
	</head>
	
<body>
	<h1>Heading</h1>
	<p>This is a paragraph</p>
</body>

</html>

				
Example #3 - Add script, but do not execute on page load

In the previous two examples, we added an alert which gets triggered during the page load process. If you do not want your script to run right away, you can put your code into a function (more on these in later tutorials). In the next example, I will write code that will only be executed when you click on a button.

<!DOCTYPE html>
<html>

	<head>
	<title>Title goes here</title>
	<script>
		function clickMe(){
			alert('You clicked the button');
		}
	</script>
	</head>
	
<body>
	<h1>Heading</h1>
	<p>This is a paragraph</p>

	<button type="button" onclick="clickMe()">Click Me</button>
</body>

</html>

				

This has been a brief introduction into JavaScript. Look for more information in upcoming tutorials on how to script and make your own dynamic content!