Play with JavaScript

When learning JavaScript, how do you experiment with small pieces of code?

Try out which of the following methods you have used!

Method 1: Run the program with browser

Create an index.html file to contain the code of the website.

You can open the file directly or “Go Live” with the“Live Server” extension on VSCode.

Method 1.1: Write JS content in <script></script> tag

File index.html :

Method 1.2: Write content JS file main.js

Write a file main.js and use it as the source, and use the src attribute of the script tag to pass the path to the main.js file to use.

This method is quite cumbersome when you want to quickly test a small piece of logic. However, it will be necessary if you practice DOM related, styles.

This way does not share the code online.

Method 2: Run the program with nodejs

Install nodejs on the machine (usually will be available because devs often use npm)

Run node <filename>.js command at command line to execute

This way is more convenient if you want to run a small JS program that does not involve the DOM.

A tip shared by hung.dev is that you can use the nodemon package to automatically reload when you have edits on the file. Thank you, Hung ^^

Run the command: npx nodemon example.js to both install the nodemon package and execute the code.

You will see the line “Hello nodemon” below is the code that executes after the code in your example.js file changes.

Method 3: Use the “Console” tab on Chrome browser

Using Chrome browser, open Console tab and test it directly on it.

This way will be very convenient when I want to quickly test or quickly demo the code or syntax of JS, because the browser has a built-in to use it.

Especially you can play with Web APIs like DOM, …

Method 4: Use the editor on w3schools.com

Similar to method 1, however, it can be done on w3schools.com because there is an editor available for testing above.

Although the tool is not very modern, it is very useful to quickly review the basics and try it out immediately on this site.

Method 5: Use javascript.makeup

javascript.markup is also a way to be able to play with JS and the results are pretty easy to see as well.

Method 6: Online tools for writing and sharing programs

Some online tools such as: JSBin, JSFiddle, Repl.it

These tools usually require an account to save and share programs.

JSBin

https://jsbin.com/

JSField

https://jsfiddle.net/

Replit

https://replit.com/

Playcode.io

https://playcode.io/

Here are a few ways I know and use.

How about you, how do you experiment with JS?

Share it with us in the comments below!

The original article is in my personal blog, please visit.

BeautyOnCode.