Executing and Saving JavaScript in a web browser / Node environment
As a beginner, one of my challenges in learning JavaScript is how to execute JavaScript code to know if the logic is working, I could not find a better solution and it slows down my learning pace. I checked google for the solution but the result was far from what I needed, VScode quokker extension was recommended, it doesn’t make sense to me as a beginner, I tried using console in web browser, it worked, yea I was happy not until when I refreshed the page, what! My code was gone, I was a little bit down, I thought I was not doing something right, I called a friend to ask if there is a way to go around it, but he replied“after you refresh the page the code won’t be available again”. I continued my journey in search of how to execute my code without losing them. In my quest, I discovered I could execute and save my code as a snippet in chrome browser or execute in a node environment, it looked interesting and brilliant to me, so I committed myself to learning and understanding how it is been done. This has in many ways helped my learning. I can always store my JavaScript code and do a brain refresh later.
I guess I just bored you with my learning process.
Web Browser (Chrome)
To be able to execute and save our JavaScript code in a web browser all we just need is a chrome browser.
To download chrome visit here
Open the Chrome browser, click on the three-dot on the right-hand side of the chrome app
Click on more tools and then click on developer tools
To make things faster click on F12 or Ctrl + shift + I (on windows), option + command + I (on Mac) to open the developer tool
Click on sources, if you can’t find snippet, click on the arrow-like >> button, snippet pane will be revealed.
Click on new-snippet, input the name of your snippet, in our case snippet name is demo.js
Type your JavaScript code into the empty box displayed by the browser, click Ctrl + enter, or the play icon to see the code output in the console.
Use Ctrl + S to save the file
To perform other function like renaming, removing, run and save as, right-click on the file name and the options will pop up
Note: The difference between using snippet and console is that after refreshing the browser the code and output in the console will be lost but with snippet we still have access to our code.
Node Environment
Another method that I enjoy using is displaying the code output in the terminal, in my case I use the terminal integrated into VScode, we can also use CMD. To output the code in the terminal, a runtime environment is needed (Node).
If you don’t have node installed, download it here
To check if you have node installed in your computer, open your command line (cmd) and run node –v or node — version
To see the output of your JavaScript code, open your terminal, navigate to your project directory (inside the folder housing the file).
In our case our folder is JavaScript, the file name is pangramChecker.
To know how to navigate to your folder check out this tutorial
After navigating to your folder type node [name of the file] example: node index, you don’t need to add the .js extension, it detects that it is a JavaScript file
Hit the enter key and wow your output is ready.
Note: You can also do this in your code editor terminal, in my case I use the terminal integrated with VScode.
To download VScode click here.
I hope you enjoy this tutorial if you do kindly hit the applause button and leave a comment, Thanks.
