Javascript Write to Screen Code


JavaScript Write to Screen Code Examples


July 28, 2016

Here are some examples of Java-script write to screen code. There are several different ways to 'write to screen' with JavaScript. Here are some of the most commonly used methods.


Pop-Up Alerts

<script>
window.alert('So You Want to Learn JavaScript This is a Pop-up Window ! ');
</script>

The script Above caused the pop-up window you saw when the page opened. Basically you told the window to alert, and print a message in the parameter () after window.alert.

It is used to pass messages and errors to the viewer.It also can print numbers and variables. For example it may be used to print an image location. Below is an example of code that was used to print the current location of a ' floating image '.



Text to Document

<script>
document.write(' Now a short "Welcome to Jack's Java Tutorials" ');
</script>

Using document.write see the text below:



The text area within the parentheses will not acknowledge the normal HTML line breaks <br /> It writes one large paragraph. Notice the " . That allowed me to use a " in the parameter area.

If used in conjunction with a button it will open a new document ( tab ) with the text inside. Again it will appear to be one large paragraph in the page.

Creating Pop Up Windows with Buttons

A pop-up window, often refereed to as an 'Alert Window', may also be opened with a click button. Notice it sad at the top " This Page Says: ".

<button onclick="document.write(' This is called an Alert Window ')">POP UP </button>


Writing Directing to Specific HTML locations

<script>
document.getElementById("demo").innerHTML = 'This prints within an ' id ' . in this case a p (paragraph) '
</script>
<p id="demo"<>/p > .
<script>
document.getElementById("demo").innerHTML = 'This prints within an ' id ' . in this case a p (paragraph) '
</script>


Same Task Different code

As you will find, there are many ways of accomplishing various coding tasks. This is an alert caused by a function, not just a keyclick. If a pop-up is wanted without pressing a key, use a function. For purpose of demonstration, there is a 'click' involved. This function heyDude, could have also been triggered problematically by a timer, error or another programs function

<button onclick="heyDude()">heyDude</button>
<script>
function heyDude() {
alert("This is my heyDude function and how you get a line feed if you need one.");
} </script>


More Print to screen Stuff

<p> id="moreStuff"></p>
<button onclick="doThis()">Print Second Paragraph on this Page</button>
<script>
note: paragraphNumber is just a name I used, call it what you want. getElementsByTagName I used a ' p ' for paragraph
note: the number in brackets is the number / order of the paragraphs starting with the first being 0.
var paragraphNumber = document.getElementsByTagName("p");
function doThis() {
// body...
document.getElementById("moreStuff").innerHTML =
"The innerHTML ( contents ) of the third paragraph is: " +
paragraphNumber[2].innerHTML;
} </script>

The script you just saw made this button and the script to perform the result of your press/click. This is included in this gaming tutorial for several reasons. One being game instructions. See if you can figure how to make the second button.



Comparing Two Numbers Plus or Minus a Value

if (Math.abs(firstNumber - secondNumber) < || = 15) { )
//if they are within 15
}

Getting Window Dimensions

At times I need to get window dimensions. to print them on the screen helps me understand the movement better for my algorithms. It is important to make responsive screens. that means wide screen as well as 3:4 and mobile devices. This is how to print that information to screen. It is usually used within the program.

<p id="dimensionWH"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var wh = document.getElementById("dimensionWH");
wh.innerHTML = "The Browsers Window: " + w + ", height: " + h + ".";
</script>


Below is the result:
If you resize your browser window and reload the page you will see it change.


Generating Random Numbers

Random numbers are an important part of any game. They can provide numbers to control timers, movement, size, visibility, angles, any information that is not static must be generated 'random'. Without random numbers the ability of games would be would be very limited. Here I will show a few ways to generate random numbers. That will lead us into PIDs, variators, steppers and floats.

Display a Random Snail Speed in Miles Per Month.


Auto-Generated Random Numbers

The small black number was randomly generated when you loaded the page. Any reload will provide a new random number. The random numbers generated are between 0 and 1. The 0 is inclusive the 1 is not.

To get a random number from 0 to 100, you multiply 100 by the random number generated by the computer. The number generated will probably contain a decimal as illustrated in RED. The red number also was randomly generated when you loaded the page.


Random Whole Number Example

The big big 'gray' has nothing to do with the random number stuff. Thought you might be bored of the plain ol' numbers. So I beefed up the looks. A bit of CSS make-up. This random number is from 1 to . Huh ! . Magically match the range of lottery numbers. You win a million bucks email me.



Break the Boredom Make Something Move

This set designed to start with a button click, HOWEVER, it is 'duck soup easy' ( that means very easy ) to make it start to move when the page is loaded. Just use:


window.onload = function start { slidit(); }

slidit() being the function I would auto-start.


// if the three lines below are enabled the function slideit() will start automatically // no startbutton is required.
SomeText