Getting user input and processing the input in JavaScript
The idea is to use HTML form fields to input data into a JavaScript program and then output the data on screen.
Your name is : ____.
Your City is : ____.
I found this useful and easily understandable code (displayed below) on a web search at https://www.easyprogramming.net/javascript.php go down the list to tutorial 18.
<p>
<label for="name">Name: </label><input id="name" type="text"><br>
<label for="name">City: </label><input id="city" type="text"><br>
<button id="submit">Submit</button><br><br>
Your name is : <span id="outputname">______</span>.<br>Your City is : <span id="outputcity">______ </span>.
</p>
<script>
var submit=document.getElementById("submit");
submit.onclick=function(){
var name=document.getElementById("name").value;
var city=document.getElementById("city").value;
document.getElementById("outputname").innerText=name;
document.getElementById("outputcity").innerText=city;
}
</script>
For the following experiment I am using the ideas from the easyprogramming.net tutorial above. This is an attempt to use an input field and some JavaScript calculations. This example is about Newtonian mechanics for circular orbits around a massive object in space. In this particular case a calculation to derive the speed of an object in a circular orbit around our sun, by entering the distance R into the input field.
Note: Sun – Earth distance is 149,600,000 km
Press the button to calculate the orbital speed and the time for one orbit:
The calculated value is: _____ kilometers per second
The amount of time to complete one orbit is: _____ days or _____ years.
In this section I will try to explain the physics of Newtonian circular orbital mechanics. It is really simple high school math. The problem I had was that WordPress does not have native math text editing. Formulas look absolutely atrocious and are basically unreadable in a format such as: Gravitational Force = Gravitational Constant * Solar Mass * Mass in orbit / Distance squared. or Outward Centrifugal Force = Mass in orbit * Velocity squared / Distance.
Luckily there is a WordPress plugin for Math Functions called KaTex. This open source math typesetting engine is free and easy to use. Here is the link to the WordPress write-up https://wordpress.org/plugins/katex/ It is licensed under the MIT License and can be freely used for commercial and private use. https://github.com/KaTeX/KaTeX/blob/main/LICENSE . Note: there are no warranties whatsoever.
Back in the late 1500’s early 1600’s there was a lot of speculation going on with regard to planetary motion. First Nicolaus Copernicus and then Johannes Kepler made detailed observations about the heliocentric nature of our planetary system. In 1608 the telescope was invented. Soon after its discovery, Galileo pointed his newly purchased telescope at the planet Jupiter. What he saw was 4 points of light that moved around the planet in a predictable way. The realization quickly set in that these were moons orbiting Jupiter, very much like our moon orbits the earth. The different rates at which the points of light moved around Jupiter set in motion the idea that there must be an attractive force between objects in space that varies with the distance between objects. Galileo and others at the time realized that the countervailing centrifugal force of the orbiting object causes them to describe a circular path around the heavier object and that there was a relationship between distance and orbital speed. In the late 1600’s Isaac Newton developed his laws of motion and universal gravitation. It described the “clockwork” universe with amazing accuracy. It is these simple mathematical relationships we will use for our calculations.
The law of universal gravitation is as follows: The Gravitational Force (F) = The Gravitational Constant (G) * The First Mass (M1) * The Second Mass (M2) / The Distance between the masses (R) Squared. As is evident this is not an easily digestible formula format. Math notation is much easier to understand. Luckily the WordPress plugin “KaTex” does a great job rendering formulas.
The full formula string for the KaTex formula block below is: — \begin {aligned}F =\cfrac{( G * M1 * M2)}{R^2 }\\end{aligned} — In this formula the string — \cfrac{formula 1}{formula 2} — creates the long dividing line between the upper and lower formulas. The — \begin {aligned} …. \end{aligned} — are the standard preambles for a KaTex block. For a list of HTML codes used in KaTex go to: — https://katex.org/docs/supported.html — Anyway below is Newtons Law of Universal Gravitation or expressed in a simpler way: The formula for the attractive force between two objects in space.
\begin {aligned}F =\cfrac{ G * M1 * M2}{R^2 }\\\end{aligned}
Newton’s law of motion is Force (F) = Mass (M) * Accelleration (A). For a circular motion the centrifugal force (F) = Mass (M) * Velocity (V) squared / the radius of the circle circumscribed by Mass (M). The KaTex string for this forumal is: — \begin {aligned}F =\cfrac{ M {\scriptstyle 2} * V^2}{R}\\\end {aligned} — Note: the {\scriptstyle 2} is to reduce the character 2 in size.
\begin {aligned}F =\cfrac{ M {\scriptstyle 2} * V^2}{R}\\\end {aligned}
A planet circling the sun has two forces acting on it. In order to stay in orbit the inward pointing attracting force between the sun and the planet has to equal the outward acting centrifugal force. This produces an equality from which we can extract the velocity through some simple high school algebra.
\begin {aligned}\cfrac{ G * M1 * M2}{R^2 }\ =\cfrac{ M {\scriptstyle 2} * V^2}{R}\\\end {aligned}
\begin {aligned}V^2 = \cfrac{G*M1}{R}\\\end{aligned}
\begin {aligned}V = \sqrt{\cfrac{G*M1}{R}}\\\end{aligned}
To calculate the time it takes for an object to complete a full circle around the sun is also simple. The circumference C of a circle is :
\begin {aligned}C = 2*\pi*R\end{aligned}
We know the velocity that comes out of the JavaScript calculation is in m/sec so the time to complete the circle is C/V seconds. With 60*60*24 = 86,400 seconds in a day. The formula expressed in days:
\begin {aligned}Days =\cfrac{ 2*\pi*R}{86400*V}\end{aligned}
Below the JavaScript code for the solar system orbital calculations.
<style>
#outputspeed, #outputtime, #outputyears {color:blue;}
</style>
<p>
For the following experiment I am using the ideas from the easyprogramming.net tutorial above. This is an attempt to use an input field and some JavaScript calculations. This example is about Newtonian mechanics for circular orbits around a massive object in space. In this particular case a calculation to derive the speed of an object in a circular orbit around our sun, by entering the distance R into the input field.<br><br>
<label for="distance">Distance from sun: </label><input id="distance" type="number"> Note: Sun - Earth distance is 149,600,000 km<br>
Press the button to calculate the orbital speed and the time for one orbit: <button id="getit">Calculate</button><br><br>
The calculated value is: <span id="outputspeed">_____</span> kilometers per second<br><br>
The amount of time to complete one orbit is: <span id="outputtime">_____</span> days or <span id="outputyears">_____</span> years.
</p>
<script>
var getit=document.getElementById("getit");
getit.onclick=function()
{
var distance=document.getElementById("distance").value;
var circumference = 2 * 3.14159 * distance;
var velocity = Math.sqrt(6.6743 * 1.989 * 100000000000000000000 / distance)/100000;
var timeit = circumference / velocity;
var days = timeit / 86400;
var years = days / 365.2;
document.getElementById("outputspeed").innerText=velocity.toFixed(2);
document.getElementById("outputtime").innerText=days.toFixed(2);
document.getElementById("outputyears").innerText=years.toFixed(2);
}
</script>