How to Write JavaScript in Notepad++ without IDE
In this tutorial, we will learn how to write JavaScript program in Notepad++. Writing JavaScript code does not require any special tools like visual studio code, eclipse, etc.
If you are a beginner and want to go for a simple approach for writing JavaScript programs, use a simple text editor like Notepad++. It is free, open-source, and will work fine for JavaScript development.
Notepad++ is a general-purpose editor that supports highlights the syntax of JavaScript and HTML code. It is developed for text editing, especially for programming language. It is available for the Windows platform.
Notepad++ provides a lot of interesting features that are as follows:
- Syntax highlighting
- Multiple files editing with tabs
- Multi-language supports
- Macros
- Page preview
- Forces word wrap
- Line numbering
- Undo/redo
- Spell checker
- Full drag and drop support
- Templates and many more.
Besides Notepad++, we need a web browser such as Internet Explorer, Google Chrome, Mozilla Firefox, Opera, etc. to see the working of JavaScript code.
It is recommended that you should upgrade your web browser to the latest, current stable version. If Notepad++ is not installed in your computer system, then first download and install it from the below link provided.
https://notepad-plus-plus.org/downloads/
Writing First JavaScript Program with Notepad++
In this section, we will learn how to write your first JavaScript program with the help of Notepad++. In other words, we will learn to create a webpage with JavaScript in Notepad++.
There are the following steps to create a webpage with JavaScript using Notepad. They are as follows:
Step 1: In your computer system, to open Notepad++, just click on the Start button and then click on Notepad++ if the shortcut icon for Notepad++ is not on the desktop.
[adinserter block=”5″]
Now write the following code snippet in the document.
<DOCTYPE html> <html> <head> <title>How to write the first Javascript Program in Notepad++ editor</title> </head> <body> <script> document.write("This is my first Javascript Program in Notepad++"); </script> </body> </html>
Step 2: After writing the above JavaScript code, you need to save it. To save file, navigate File menu -> Save. A Save As dialog box will be opened in your computer system.
Step 3: Type file name “myFirstJavascriptProgram” and Save as type: select extension “*.html; *.htm;” option and then click on the save button as shown in the below screenshot.
When you will save the file the first time, by default, unfortunately, Notepad adds a .txt extension to the document name.
Step 4: To view the output of the above code snippet, go to the location where you saved the HTML file. I have saved “myFirstJavascriptProgram” html file on the desktop.
[adinserter block=”2″]
Now click on the created HTML file icon. The default browser will open the web page, where you will get the output of the JavaScript code.
Output of code: This is my first JavaScript Program in Notepad++
You can also view the output of code in different browser by right-clicking on HTML file icon and navigating to Open with option from the menu.
So far, in this example program, we have created a basic webpage with some embedded JavaScript code using Notepad++.
Creating External JavaScript File using Notepad
In this section, we will learn how to place JavaScript code into an external file and then connect to that code from within the HTML page.
There are the following steps to create an external file for JavaScript and embed it into an HTML web page.
Step 1: Click on File menu and then click on New option to create a new file to write JavaScript code. Now write the following JavaScript code into the file.
document.write("This is my first Javascript Program in Notepad++");
Step 2: Save the JavaScript file by choosing Save from the File menu. Enter myScript.js in the File Name text box, and select .js extension in the Save as type.
Then click on the Save button. Pick the same location to save JavaScript file where you saved the main HTML file.
Step 3: Now we need to connect JavaScript file “myScript.js” with HTML file “myFirstJavascriptProgram.html”. Open myFirstJavascriptProgram.html file in again notepad++ and just delete the JavaScript code that we wrote earlier between the opening <body> tag and closing </body> tag.
Then paste the following JavaScript code to connect “myScript.js” from “myFirstJavascriptProgram.html” file between the body tags.
<script src = "myScript.js"></script>
The complete code structure of “myFirstJavascriptProgram.html” file is now as follows:
<DOCTYPE html> <html> <head> <title>How to create external Javascript file in Notepad++ and connect to HTML web page</title> </head> <body> <script src = "myScript.js"></script> </body> </html>
Step 4: Save the “myFirstJavascriptProgram.html” file.
[adinserter block=”2″]
Step 5: View the web page in a web browser. The result, shown in the following screen, will display a simple message.
Thus, we can create an external JavaScript file and connect from within the HTML web page using notepad++ or simple notepad.
This is a very simple process to create HTML, CSS, and JavaScript using notepad++. Only you need to know how to connect among them.
If you are a beginner and learning web development first time, you must use notepad++ for basic JavaScript programs and then go for visual studio code or eclipse editor.
This tutorial has covered almost all the steps related to how to write the first JavaScript Program in Notepad++ and embed it from within the HTML web page. We hope you will have understood the basic points to create, save, and run HTML and JavaScript files. In the next, we will discuss how to write JavaScript code in Visual Studio Code Editor.
Thanks for reading!!!