Output

USING console.log, alert(), AND innerHTML

This page "output/index.html", sits in the folder "output". with program "alert.js". alert.js uses console.log and alert() to output a message in the dev tools console and to send a popup to the user.

This alert launched as soon as the page loaded because it is not deferred and is not inside a JavaScript function.

alert.js

				
console.log('From the Console: Hello, javaScriptCartographer!');
				
alert('Hello, javaScriptCartographer!');


<head>
	<script src="alert.js"></script>
</head>

alert

alert is used to program a popup on a website. Such as: alert('Hello, javaScriptCartographer!');

console.log

console.log is used to print to the browser console. It works nearly equivalent to the Python print() method such as:
console.log('From the Console: Hello, javaScriptCartographer!');

VIEWING THE DEV TOOLS CONSOLE

To view the console open dev tools in your favorite browser with ctr + shift + I. Navigate to the console tab, and the output will be visible in the console.

OUTPUT WITH innerHTML

innerHTML is a method of inserting HTML code directly onto page. The example below will print directly to the page. I took this quote from Wall Street (the real one 1987) because innerHTML seems like cheating. You're putting HTML inside a JavaScript program and outputting it to HTML files. 

//A simple innerHtml program.
document.getElementById("insideBallBTN").addEventListener("click",youreOutside);

function youreOutside()
        {document.getElementById("ifYoureNotInside").innerHTML = // multiple line strings must be between ``
        //once innerHTML is invoked, output is written in HTML

        `<p>
            The point is, ladies and gentlemen,<:br>
            greed -for lack of a better word- is good.
        </p>
        <p>
            Wall Street, 1987
        </p>
        `;
    }


<head>
	<script src="insideBall.js" defer></script>
</head>

<div>
		<button id="insideBallBTN">insideBall.js</button>
	</div>

	<div class="innerHTMLSpace" id="ifYoureNotInside"></div>

Click the button below to see this program print directly to this webpage via innerHTML!