How do we make a Javascript sandbox

You can make a Javascript sandbox by creating an index.html file in a directory with another file with a .js extension with a text editor. Here’s the HTML content:

<html>
<head>
<script src="DEBUGhelpers.js"></script>
</head>
<body>
<h1>Hello World of Javascript</h1>
<p>Here is some text.</p>
<div>And a div!</div>
<ul>
   <li>A list item.</li>
   <li>Another list item.</li>
</ul>
</body>
</html>

Here’s a little Javascript function which will put red outlines around your HTML elements. BTW it’s best practice to separate Javascript and HTML like this.

function DEBUGborders(){
   console.log("Borders on");
   var Element = document.createElement('style');
   document.head.appendChild(Element);
   var Sheet = Element.sheet;
   Sheet.insertRule("*{outline: 1px red solid;}", 0);
}

Open the index.html page in your browser and type in “DEBUGborders()” at the console and you should see something like this:

Concepts

How do we make a Javascript sandbox

Related pages