How to run js in browser

How to Run JavaScript Code How and where to run JavaScript code

In order to follow along with this course, you need to know how and where you run your JavaScript code. You have several options to run your first hello world programming:

How to Run JavaScript from the Command Line

Running a JS program from the command line is handled by NodeJS. Start by installing NodeJS on local machine if necessary.

Now simply open the command line in the same directory as the index.js script you created (VS Code will do this automatically with the integrated terminal).

How to Run JavaScript from the Browser

When people think of “JavaScript”, they most often think of a web browser. You can run code in the browser by creating an HTML file that references the script. In our case, we used the defer option, which will execute the JS after the HTML file is finished loading.

Run a script from an HTML file

Now simply open this HTML file on your local machine and open the developer console (next step) to see the output.

Inspect the Browser Console

Output of the browser console in Chrome

Run JavaScript with a Framework

It is worth mentioning that frameworks like React, Angular, Svelte, etc will take care of the building & running of your app automatically and provide framework-specific tooling and steps for running code. In the real world, you are more likely to use the tooling provided by the framework to run your code, as opposed to the basic methods shown in this couse.

Run JavaScript in a Sandbox

This course uses StackBlitz to run JS code examples in an isolated sandbox in the browser. This is a great option for sharing quick demos and issue reproductions 💡.

Run JavaScript in the Console

Published on Wednesday, April 18, 2018

Technically, I’m a writer

This interactive tutorial shows you how to run JavaScript in the Chrome DevTools Console. See Get Started With Logging Messages to learn how to log messages to the Console. See Get Started With Debugging JavaScript to learn how to pause JavaScript code and step through it one line at a time.

Figure 1. The Console.

# Overview

The Console is a REPL, which stands for Read, Evaluate, Print, and Loop. It reads the JavaScript that you type into it, evaluates your code, prints out the result of your expression, and then loops back to the first step.

# Set up DevTools

This tutorial is designed so that you can open up the demo and try all the workflows yourself. When you physically follow along, you’re more likely to remember the workflows later.

Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, ChromeOS) to open the Console, right here on this very page.

Figure 2. This tutorial on the left, and DevTools on the right.

# View and change the page’s JavaScript or DOM

When building or debugging a page, it’s often useful to run statements in the Console in order to change how the page looks or runs.

Notice the text in the button below.

Type document.getElementById(‘hello’).textContent = ‘Hello, Console!’ in the Console and then press Enter to evaluate the expression. Notice how the text inside the button changes.

Figure 3. How the Console looks after evaluating the expression above.

# Run arbitrary JavaScript that’s not related to the page

Sometimes, you just want a code playground where you can test some code, or try out new JavaScript features you’re not familiar with. The Console is a perfect place for these kinds of experiments.

Type 5 + 15 in the Console. The result 20 will appear below your expression (unless your expression takes too much time to evaluate).

Press Enter to evaluate the expression. The Console prints the result of the expression below your code. Figure 4 below shows how your Console should look after evaluating this expression.

Type the following code into the Console. Try typing it out, character-by-character, rather than copy-pasting it.

See define default values for function arguments if you’re unfamiliar with the b=20 syntax.

Now, call the function that you just defined.

Figure 4. How the Console looks after evaluating the expressions above.

You will not be able to run any code in this console session until your function has returned. If that takes too long, you can use the Task Manager to cancel the time-intensive computation; however, it will also cause the current page to fail and all data you have entered will be lost.

# Next steps

See Run JavaScript to explore more features related to running JavaScript in the Console.

DevTools lets you pause a script in the middle of its execution. While you’re paused, you can use the Console to view and change the page’s window or DOM at that moment in time. This makes for a powerful debugging workflow. See Get Started With Debugging JavaScript for an interactive tutorial.

The Console also supports a set of format specifiers. See Format and style messages in the Console to explore all the method to format and style console messages.

Apart from that, the Console also has a set of convenience functions that make it easier to interact with a page. For example:

See Console Utilities API Reference to explore all the convenience functions.

Last updated: Wednesday, April 18, 2018 • Improve article

Your first look at JavaScript

Summary

Now it is time to get your hands dirty. This article provides a basic introduction to coding with JavaScript.

Introduction

In this article of the Web Standards Curriculum, we will cover the basics of JavaScript — how and where to use it, what problems to avoid, and general basics to get you started on your journey towards becoming a top-notch JavaScript developer.

What is JavaScript and how do you execute it?

JavaScript is a text-based language that does not need any conversion before being executed. Other languages like Java and C++ need to be compiled to be executable but JavaScript is executed instantly by a type of program that interprets the code called a parser (pretty much all web browsers contain a JavaScript parser).

JavaScript does not have to stay inside browsers. To run JavaScript in console environment, please check out Mozilla Rhino; to run JavaScript in server environment, please check node.js.

Including your JavaScript inside your HTML document

The most basic inclusion of JavaScript inside your HTML page would look something like this:

You could put this anywhere inside your document and it would execute, but some places are definitely better than others — see the Where to put JavaScript section for guidance on this.

As there might be several different types of script available to use on web pages in the future, it makes sense to add the name of the script you are using as a MIME type:

Note: You will find script examples on the web that have a language=»javascript» attribute. This is not part of any standard and is utterly useless; delete this where you can. This is a throwback to the bad old days, when VBScript was also in popular use on web pages. VBScript usage died however, as it only works in IE.

However, for strict XHTML documents, it is much more sensible not to embed any JavaScript but instead keep it in an external document.

Linking to an external JavaScript file

In order to link to an external JavaScript (either on the same server or anywhere on the internet) all you have to do is to add a src attribute to your script element:

Upon meeting this element in a page, browsers will then load the file myscript.js and execute it. Any content inside the script element itself will be skipped when you provide a src attribute. The following example will load the file myscript.js and execute the code in it, but will not execute the alert inside the script element at all.

Keeping your code in an external JavaScript file makes a lot of sense:

You can add as many JavaScript files as you want to a document, but there are several considerations to make before going down that route.

JavaScript and browser performance

Cutting up a lot of JavaScript into different files, each dealing with one task at a time, is a great idea to keep your functionality easy to maintain and allow for quick bug-fixing. For example, you could have several script blocks like these:

However, the development benefits of this are diminished by the effect this has on the performance of your document. This differs slightly from browser to browser but the worst-case scenario (which is sadly enough still the second most-used browser) does the following:

All of this means that the display of your web site is slowed down until all of these steps happen for all the scripts you include. This can become annoying for your visitors.

One way around this is to use a backend script to create a single file from all the files you use. That way you have the benefit of keeping maintenance easy while simultaneously cutting down on delays to your web page display. There are several scripts like this on the web — one of them is written in PHP and available from Ed Eliot.

The delay in display also defines where you want to put your JavaScript in the document.

Where to put JavaScript

Technically you can put JavaScript anywhere in your document. The decision you have to make is to weigh performance against making it easy for developers to find your scripts and ensuring that your JavaScript enhancements work immediately for your visitors.

The classic best practice for placing scripts was in the head of the document:

This has the benefit of being a predictable location of scripts — developers know where to find them. It also has the benefit of ensuring that all JavaScript has been loaded and executed before the document is displayed.

The drawbacks are that your scripts delay the display of the document and that the script does not have access to the HTML in the document. You therefore need to delay the execution of any scripts that change the HTML of the document until the document has finished loading. This can be done with an onload handler or one of the various DOMready or contentAvailable solutions out there on the web — none of which are bullet-proof and most of which rely on browser-specific hacks.

Performance specialists have started to advocate placing your JavaScript at the end of the body instead:

This benefits your JavaScript by not delaying the display of the HTML and also means that any HTML you want to alter with JavaScript is already available.

You might confuse developers who maintain your code because this practice is not common yet. Another — more problematic — drawback is that the HTML becomes available before your JavaScript is loaded. While this is exactly what you want to achieve, it also means that visitors will start interacting with your interface before you get the chance to change it. Say for example you want to validate a form with JavaScript before it is submitted to the server — the form might get submitted before the script has been loaded. If you write your script as a mere enhancement (rather than relying on it) that is not a problem though — just an annoyance.

Whatever you do, make sure that the order of your scripts is right, as browsers will load and parse them one after the other. This also brings us to another thing to consider when using JavaScript.

JavaScript security and the lack thereof

We cannot stress this enough. JavaScript is a wonderful language and can help you to build highly responsive and beautifully interactive web sites and applications, but where it falls down terribly is security. In short, there is no security model in JavaScript and you should not protect, encrypt, secure, or store anything vital or secret with it.

Every script on the page has the same rights — all of them can access each other, read out variables, access functions, and also override each other. If you have a function called init() in your first included script, and another one in your last included script, the original one will be overridden. We will come back to this problem in the best practices article of this course.

All of this would not be much of an issue if you never used other people’s scripts. However, seeing that most online advertising and statistics-tracking is done with JavaScript this will not be the case — you will use third party scripts all the time.

Scripts can also read cookies; using the prototype of a function you can override any native JavaScript function. Lastly, JavaScript can easily be turned off so you can forget about JavaScript protection being a good security measure.

Whereas packing and obfuscation are useless as security measures, they are often done on medium and large scripts before the code is put live on the web as part of the publication process. This helps to cut down on the amount of bandwidth required to serve the site to its users. Saving a few bytes here and there may not seem significant on your blog about kittens, but it can add up to massive savings when you are dealing with a site with usage figures like those of google.com.

Techniques to avoid

The biggest problem with learning JavaScript is that there is a massive amount of outdated and possibly dangerous information out there. This is especially frustrating as a lot of this information is very well presented and gives a lot of beginners a “quick win” feeling of knowing JavaScript by copying and pasting some ready-made code.

As the environment JavaScript is being applied to is very much unknown (users can have any setup) and we do not know what decisions led to code we find on the web being created in a particular way, we should not point fingers at solutions. However, the following ideas are a thing of the past and you should only use them as a very last resort if you need them to support really old, bad browsers:

What are browser developer tools?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser’s devtools.

Note: Before you run through the examples below, open the Beginner’s example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.

How to open the devtools in your browser

The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

How do you pull it up? Three ways:

The Inspector: DOM explorer and CSS editor

The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.

If you don’t see the inspector,

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you’d like, but you cannot save your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

These features are especially handy:

You’ll notice a number of clickable tabs at the top of the CSS Viewer:

Find out more

Find more out about the Inspector in different browsers:

The JavaScript debugger

The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

To get to the debugger:

Firefox: Select ➤ Web Developer ➤ Debugger or press Ctrl + Shift + S to open the JavaScript Debugger. If the tools are already displayed, click on the Debugger tab.

Chrome: Open the Developer tools and then select the Sources tab. (Opera works the same way.)

Safari: Open the Developer Tools and then select the Debugger tab.

Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

File list

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.

Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

In the image, the first section, Watch expressions, shows that the listItems variable has been added. You can expand the list to view the values in the array.

The next section, Breakpoints, lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);

The final two sections only appear when the code is running.

The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, Scopes, shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.

Find out more

Find more out about the JavaScript debugger in different browsers:

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn’t working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console. On other browser, open the developer tools and then click the Console tab.

This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

Now try entering the following incorrect versions of the code and see what you get.

You’ll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more

Find more out about the JavaScript console in different browsers:

Running Node.js in web browsers

Node.js remains a key expertise for front-end developers due to the vast ecosystem of Node-based tools and applications that are required for modern front-end web development.

For those of you who have primarily written JavaScript that executes in the browser and who would like to gain a better understanding of the server side, Node JavaScript is an excellent method to develop server-side software while also capitalizing on your JavaScript skills.

However, we can also use Node.js to assist with front-end web development. For example, popular client-side libraries such as Angular makes use of CLI or command-line interface tools to enable developers to create projects and even build and deploy them to the cloud.

Learning to build server-side apps using Node is beyond the scope of this scope; rather than that we’ll see how to take benefits of running Node modules in the clien’s browser.

In this quick tutorial, we’ll learn to use and run Node.js modules in the browser then we’ll see how it is now possible to run the full Node.js runtime inside the web browser using web containers.

Node.js vs web browsers

The JavaScript programming language is used by both the browser and node.js, although their respective Run Time Environments are distinct.

There are numerous similarities between server-side JavaScript and client-side JavaScript. In addition, there are a number of differences.

There are several significant distinctions between the two, despite the fact that they both use JavaScript as their programming language.

Using the same programming language on both the client and server offers developers a clear edge, since its’s difficult to master a new programming language from scratch.

JavaScript is a scripted and interpreted programming language that can be used on both the client and server sides to create interactive web experiences.

It is possible to execute JavaScript on both the browser and Node.js which are both built around a JavaScript engine that provides the execution environment for JS code.

By using JavaScript, you may transform a static web page into an interactive one, enhancing the user experience and providing functionality to web pages.

Node.js apps provide a huge benefit for frontend developers who often use JavaScript: the ability to script both the frontend and backend in a single language.

Making a Node.js app is a very different procedure than building a browser-based application. However, despite the fact that all the code is written in JavaScript, there are many factors that have a substantial impact on the developer’s experience.

For instance, the filesystem and server databases are accessible to Node app developers, but in browsers, these resources are restricted and sandboxed for obvious reasons of security.

On browsers, one important aspect is the DOM which refers to Document Object Model and a set of Web Platform APIs such as sessions and cookies.

In a nutshell, the DOM is a tree representation of the web page document. It contains the objects/nodes that refer to the layout elements and contents of a web page. It’s also a interface that provides the JavaScript methods that you can call to create create and remove new elements and traverse the tree to find any element on the page using CSS selectors such as IDs and classes.

On the other hand, Node.js doesn’t have the DOM and developers are unable to access the document, window, and other browser objects.

There are instances on the web browsers when you are forced to use an earlier version of JavaScript since the standard advances so quickly yet browsers are sluggish to update.

Before delivering your code to the browser, you can use Babel to convert it to ES5 compatibility, but in Node.js, you won’t need to.

Node.js supports both the CommonJS and the modern EcmaScript module systems, whereas browsers are just beginning to implement the ES Modules standard.

This implies that in Node.js, you can use both require() and import, however in the browser, you can only use import.

In addition, Node.js gives you total control over your environment, allowing you to choose the version of Node.js your application will run on as a developer.

When comparing this to a browser, the environment is determined by the version of the browser being used by end users so as a front-end developer, you must pay care when developing your app since features may not exist on specific browsers, causing your app to crash.

Node.js vs Chrome

Both Node.js and Chrome are built on top of v8, and many of the Node.js libraries can be already executed in Chrome.

The JavaScript engine that drives Google Chrome is called V8. It is the component that runs our JavaScript when surfing using Chrome.

Recently Microsoft built Edge a new and modern browser that is also built on top of V8.

Other popular browsers such as Firefox is based on SpiderMonkey and Safari on JavaScriptCore.

V8 is Google’s open source JavaScript and WebAssembly engine built on C++. It is used in a variety of apps, including Chrome and Node.js. It is compatible with Windows 7 or later, macOS 10.12 or later, and Linux systems powered by x64, IA-32, ARM, or MIPS CPUs. V8 may be utilized independently of any C++ program or as an integrated component in any C++ application.

V8 offers the JavaScript runtime environment. The browser provides the DOM and other Web Platform APIs.

JavaScript as a programming language is entirely agnostic of the browser or environment in which it is executed.

V8 was adopted to run Node.js in 2009, and as Node.js’s popularity grew, V8 became the engine that currently drives an astounding amount of server-side JavaScript code.

The Node.js ecosystem is massive, in part because to V8, which powers desktop applications via projects like Electron.

You can check which version of V8 engine is included with your Node.js installation using the following command:

Why running Node modules in the browser?

Node.js provides the world’s largest repository of open source modules, which tackle a wide range of common and unique development issues. You can quickly find a module for practically any functionality you require, allowing you to focus on addressing your specific requirements rather than reinventing the wheel and increasing your productivity.

You can use these modules if you solely work in Node.js environments, such as while developing a server-side JavaScript application. What if you need to create a client-side JavaScript application? Is it possible to run Node.js in a browser? To put it succinctly, no, at least not directly!

Can Node.js run in a browser

The Node.js runtime does not exist on the client; all you have is a browser that cannot use Node.js modules. What a colossal waste, we hear you exclaim!

However, guess what? Thanks to some creative engineers, it is now feasible to use Node.js modules in browsers, but not directly.

Being able to call Node.js modules from JavaScript running in the browser has many advantages because it allows you to use Node.js modules for client-side JavaScript applications without having to use a server with Node.js just to implement functionality that is already available as a Node.js module that is available via an npm package.

Existing ways for running Node modules inside the browser

For each solution, a source code transformation is required, either in advance (in the case of webpack and browserify) or in real time in the case of nodular. They may be appropriate for your purposes, but it’s worth noting that they are just attempts to reproduce or emulate specific behaviours inside the browser.

Introducing Browserify

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.

In order to use the modular system of Node.js to structure your JavaScript applications on the client side, you can use Browserify to require JavaScript modules from JavaScript running on the browser.

Browsers lack the Node.js platform’s require/export and module import systems; therefore, Browserify was developed to make it possible to import Node.js modules.

In order to use Browserify, you must transform your Node.js scripts into a regular javascript file that can be included in your website’s HTML script element or through any other browser mechanism.

Suppose you have written your application source code using require syntax to import a useful Node.js module. Now to be able to use your application in the browser with no error you need to use Browserify and run the following command:

Browserify resolves all dependencies, concatenates them, and bundles them into a single JavaScript file that can be included with a single script tag.

You can also use browserify to take advantage of Node.js’ modular and import system, i.e. require module.exports, to structure your client side JavaScript applications, particularly if you are familiar with this system, so you don’t have to learn another importing system for the browser, such as requirejs or commonjs.

How To use Browserify?

To install browserify, first enter your command line terminal and type the legendary npm install command as follows:

Next create your example project folder

Create a main.js JavaScript file inside ytdl

Next you should install the module you want to use or to convert to browser compatible script

Next in main.js require the module as you do normally with node.js modules:

Now let the magic begins, call browserify with the input is main.js and give it a name for the output

Now you can use your script as easily as using a script tag

Replicating Node environments in browsers

Now that, we’ve seen how to compile a run a single Node module in the browsers, another question that arises is that can we repliate a full node environment?

Many solutions exist that tried to replicate the Node.js environment inside the browser.

Can we, for example, build the webpack code in the browser rather than the server’s nodejs environment? The benefit of this is that we no longer need the server’s capabilities for compilation.

This issue may be solved in a variety of ways. For instance, codesandbox, which is described as a browser-based compilation technique, may be used to package react, vue, and other browser-based libraries. It is also clear that codeandbox provides a browser version of webpack.

Running a headless browser within Node

We’ve seen ways to run Node in web browsers but how about the inverse, can you run a web browser with Node.js? In fact, you can thanks to headless browsers and Node libraries such as Playwright for running Chrome, Firefox and Safari or Puppeteer for running headless Chrome browser and others.

Puppeteer is a Node module that exposes a high-level API for administering Chrome or Chromium through the DevTools Protocol. Puppeteer is set to run full (non-headless) Chrome or Chromium by default.

If a web browser does not have a graphical user interface, it is said to be headless. In an environment comparable to common web browsers, headless browsers automate the administration of a web page, but they use a command-line interface instead or a Node.js script. Aside from the fact that they can display and interpret HTML the same way a browser would, they are especially beneficial when it comes to testing web applications since they are able to include style components like page layout, color, font selection and the execution of JavaScript and Ajax.

The majority of tasks that may be accomplished manually in the browser can be accomplished using headless browsers and Node.js, for example:

Running Node.js in browsers with web containers

As a front-end web developers, you may not need to use Node.js to build apps since the front-end doesn’t and can’t have access ro server resources directly but often via a REST or GraphQL API.

However, nowadays modern web development frameworks and libraries such as Angular, React or Vue provides a set CLI tools that are built on top of Node.js.

This means that Node is required on the development of front-end apps even if you don’t target or develop for the server side.