How to start coding JavaScript in 60 minutes

How to start coding JavaScript in 60 minutes

Table of Contents

Web development is moving fast, and I wouldn’t be wrong in saying that we were born in frameworks! There are 20+ JS frameworks and 80+ JavaScript libraries out there. 

With all those fancy frameworks & libraries, we may forget to focus on basics and instead jump into frameworks directly like ReactJS or Angular.

Basics are always needed, so this tutorial aims to give an introduction to JavaScript without any distractions.

What is JavaScript?

JavaScript is a powerful programming language initially invented for front-end development and nowadays in the act for the server-side and game development and Mobile application development. JavaScript enables you to have dynamic interaction with end-users. It has the ability to manipulate HTML, CSS, and data. All major web browsers have a dedicated JavaScript engine that will run the JavaScript code. 

A Simple JavaScript Program

To run a JavaScript program, you need to have a browser and a text editor. Almost all modern web browsers such as Internet Explorer [ 🙂 ], Google Chrome, Firefox, or any other browser support JavaScript, so when you run an HTML page along with some JavaScript code on a browser, the execution engine on the browser will detect the JS code within

				
					<html>
<head>
   <title>How to start coding JavaScript in 60 minutes</title>
   <script type="wphb-delay-type">
       function showName() {
           // get the name input element value
           var name = document.getElementById("nameInput").value;

           // Displaying the name value
           alert(name);
       }
   </script>
</head>
<body>
<input type="text" placeholder="Type your name..." id="nameInput">
<button type="button" onclick="showName();">Show My Name</button>
</body>
</html>

				
			

Save the HTML page with the name “MyFirstJavaScriptProgram.html.” Then, open the saved HTML file in your browser from the hard drive (double click on the file, or right-click and choose the “Open with” option).

The result will look like this:

What if we need an iteration? Let’s try to calculate the factorial of an integer by using arithmetic operators in JavaScript.

Factorial is the product of all positive integers less than or equal to the number you want to calculate.

So, if we have the integer 4, the factorial will be the product of 1, 2, 3, and 4. Below is the full function code to calculate the factorial of the number we type to the input:

				
					<html>
<head>
	<title>How to start coding JavaScript in 60 minutes</title>
	<script type="wphb-delay-type">
		function calculateFactorial(){
			var number = document.getElementById("factorialInput").value;

			let factorial = 1;

			for(let i = 1; i <= number; i++) {
				factorial *= i;
			}
            alert(factorial);
		}
    </script>
</head>
<body>
	<input type="number" placeholder="Type a number to calculate factorial..." id="factorialInput">
    <button type="button" onclick="calculateFactorial();">Show Factorial</button>
</body>
</html>
				
			

JavaScript is the power of the web for 26+ years and is the most commonly used programming language, according to the StackOverflow 2021 insights. Before filtering JavaScript codes through the shiny frameworks, I strongly suggest you learn some JavaScript features I mentioned below;

  • Light Weight
  • Dynamic Typing
  • Platform Independent
  • Prototype-based
  • Async Processing
  • Object-oriented programming support

Once you learn JavaScript’s basic features, you will understand how JavaScript frameworks are working and how they differentiate from each other. 

Mozilla’s first steps tutorial may help you to improve yourself through the basics.

Enjoyed starting coding in 60 minutes and want to challenge other languages? It’s time to give a try to my other posts then! Check out Python in 60 minutes, ReactJS in 60 minutes, or Java in 60 minutes!

Exercism.io has lots of free, gamified examples for you to improve your JavaScript skills. So keep rocking there until our next post!

2 Responses

  1. Pingback: Exceptionly
  2. Pingback: Exceptionly

Leave a Reply

Your email address will not be published. Required fields are marked *

en_USEnglish