Topalian
JavaScript
Earth
by
Christopher Andrew Topalian
All Rights Reserved
Copyright 2000-2024
Dedicated
to
God the Father
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// HowToCombineJSFiles.js
TUTORIAL:
How to Combine all .js files in all folders that
are in our js folder.
Getting things ready:
We should add two new lines at the end every
script. This way they will combine nicely with
a line break in between each script.
Step One: Open our js folder
Step Two: Type in the address bar of the js
folder, cmd, press Enter
This opens our js folder in the command
prompt
Step Three: Type the command shown below
in the command prompt and then press Enter
for /r "%CD%" %i in (*.js) do type "%i" >>
main.js
Now we have a newly created .js file named
main.js that has all of our js files included
into one file.
This makes it easy to upload our application
and easy to find out how many lines of code
our project is.
To use our main.js file, we include it in our
html file code:
<script src = 'js/main.js'></script>
Happy Scripting :-)
<!-- Dedicated to God the Father -->
<!-- All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024 -->
<!-- https://github.com/ChristopherTopalian --
>
<!--
https://github.com/ChristopherAndrewTopalia
n -->
<!-- Topalian_JavaScript_Earth.html -->
<!-- Version 001 - (2024-02-04) -->
<html>
<head>
<title> Topalian JavaScript Earth </title>
<link rel = 'stylesheet' href =
'css/style001.css'>
<script src = 'js/1utility/utility.js'></script>
<script src =
'js/2worldVariables/worldVariables.js'></scrip
t>
<script src = 'js/3data/locations.js'></script>
<script src =
'js/4audio/loadSounds.js'></script>
<script src =
'js/5make/1makeWorld.js'></script>
<script src =
'js/5make/makeLocationMarker.js'></script>
<script src =
'js/5make/makeLocationTextbox.js'></script>
<script src =
'js/menu/menuOfFunctions.js'></script>
<script src =
'js/menu/menuResolution.js'></script>
<script src =
'js/menu/menuLocations.js'></script>
<script src =
'js/scroll/scrollToLocation.js'></script>
<script src =
'js/whenLoaded/whenLoaded.js'></script>
</head>
<body onload = 'whenLoaded();'>
</body>
</html>
/* Dedicated to God the Father */
/* All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024 */
/* https://github.com/ChristopherTopalian */
/*
https://github.com/ChristopherAndrewTopalia
n */
/* style001.css */
body
{
background-color: rgb(40, 40, 40);
}
.buttonStyle001
{
margin: 5px;
border-radius: 5px;
background-color: rgb(0, 0, 0);
font-size: 15px;
color: rgb(255, 255, 255);
}
.buttonStyle001:hover
{
border-color: aqua;
cursor: pointer;
}
.buttonStyle001:active
{
border-color: magenta;
color: magenta;
}
.locationMarker
{
position: absolute;
width: 17px;
border-style: solid;
border-width: 1px;
border-radius: 3px;
background-color: rgb(0, 0, 0);
font-size: 17px;
font-weight: bold;
color: rgb(255, 255, 255);
text-align: center;
}
.locationMarker:hover
{
cursor: pointer;
}
.locationTextbox
{
position: fixed;
width: 300px;
height: 70px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
background-color: rgb(0, 0, 0);
font-size: 15px;
font-weight: bold;
color: rgb(255, 255, 255);
}
.resolutionInput
{
width: 125px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
background-color: rgb(0, 0, 0);
font-size: 15px;
font-weight: bold;
color: rgb(255, 255, 255);
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// utility.js
function ge(whichId)
{
let result =
document.getElementById(whichId);
return result;
}
function ce(whichType)
{
let result =
document.createElement(whichType);
return result;
}
function ba(whichElement)
{
let result =
document.body.append(whichElement);
return result;
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// worldVariables.js
let resolution = 1000;
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// locations.js
let locations =
[
{
name: `One World Trade Center, NY`,
latitude: 40.71368176737531,
longitude: -74.01316208888827
},
{
name: `Jersey City - Liberty State Park.
NJ`,
latitude: 40.7052479226938,
longitude: -74.05227309161013
},
{
name: `Giza Large Pyramid. Egypt`,
latitude: 29.97917381208788,
longitude: 31.13421987112202
},
{
name: `Comins Pond, Water Building.
MA`,
latitude: 42.20565104880566,
longitude: -72.19403484073605
},
{
name: `Comins Pond, Cemetery Bottom.
MA`,
latitude: 42.20639042028992,
longitude: -72.19642466876053
},
{
name: `Santa Monica Pier. CA`,
latitude: 34.007651,
longitude: -118.499777
},
{
name: `Mt. Fuji. Japan`,
latitude: 35.360965,
longitude: 138.728028
},
{
name: `Empire State Building. NY`,
latitude: 40.748123,
longitude: -73.984836
},
{
name: `York. AK`,
latitude: 65.105445,
longitude: -169.267542
}
];
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// loadSounds.js
let sounds =
[
{
name: `sfx_blip_001`,
fileName: `media/sfx/sfx_blip_001.mp3`
},
{
name: `sfx_warp_001`,
fileName: `media/sfx/sfx_warp_001.mp3`
}
];
function loadSounds(whichArray)
{
for (let x = 0; x < whichArray.length; x++)
{
// theSound
let theSound = ce('audio');
theSound.id = whichArray[x].name;
theSound.src = whichArray[x].fileName;
theSound.volume = 1.0;
theSound.style.display = 'none';
ba(theSound);
}
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// makeCanvas.js
function makeWorld()
{
let world = ce('canvas');
world.id = 'world';
ba(world);
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// makeLocationMarker.js
function makeLocationMarker()
{
let w = ge("world").style.width = resolution;
let h = ge("world").style.height =
resolution;
for (let x = 0; x < locations.length; x++)
{
let locationMarker = ce("div");
locationMarker.innerHTML = x;
locationMarker.id = x;
locationMarker.className =
"locationMarker";
locationMarker.title = locations[x].name;
ba(locationMarker);
//-//
let theX = ((w / 360) * (180 +
locations[x].longitude));
let theY = ((h / 180) * (90 -
locations[x].latitude));
//-//
locationMarker.onclick = function()
{
ge("sfx_blip_001").play();
ge("latitudeLongitude").value =
locations[x].name;
ge(x).style.backgroundColor = "rgb(0,
255, 255)";
setTimeout(function()
{
ge(x).style.backgroundColor =
"rgb(0, 0, 0)";
}, 1000);
};
ge(x).style.left = theX + "px";
ge(x).style.top = theY + "px";
}
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// makeLocationTextbox.js
function makeLocationTextbox()
{
let locationTextbox = ce('textarea');
locationTextbox.id = 'latitudeLongitude';
locationTextbox.className =
'locationTextbox';
locationTextbox.style.right = '5px';
locationTextbox.style.bottom = '5px';
ba(locationTextbox);
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// menuLocations.js
function menuLocations(whichArray)
{
let highlightColor = 'rgb(120, 120, 255)';
let normalColor = 'rgb(0, 0, 0)';
if (ge('menuLocationsDiv'))
{
ge('menuLocationsDiv').remove();
}
let menuLocationsDiv = ce('div');
menuLocationsDiv.id =
'menuLocationsDiv';
menuLocationsDiv.style.position = 'fixed';
menuLocationsDiv.style.right = 5 + 'px';
menuLocationsDiv.style.top = 20 + 'px';
menuLocationsDiv.style.width = 200 + 'px';
menuLocationsDiv.style.height = 380 + 'px';
menuLocationsDiv.style.overflowY =
'scroll';
menuLocationsDiv.style.borderStyle =
'solid';
menuLocationsDiv.style.borderWidth = 1 +
'px';
menuLocationsDiv.style.borderColor =
'rgba(255, 255, 255, 0.5)';
menuLocationsDiv.style.borderRadius = 5
+ 'px';
ba(menuLocationsDiv);
//-//
let closeButton = ce('button');
closeButton.innerHTML = 'X';
closeButton.onclick = function()
{
ge('sfx_blip_001').play();
ge('menuLocationsDiv').remove();
};
closeButton.className = 'buttonStyle001';
closeButton.style.position = 'relative';
closeButton.style.left = 0 + 'px';
closeButton.style.zIndex = 20;
menuLocationsDiv.append(closeButton);
//-//
let theTitle = ce('div');
theTitle.innerHTML = ' ' + 'Locations';
theTitle.style.color = 'rgb(255, 255, 255)';
menuLocationsDiv.append(theTitle);
//-//
for (let x = 0; x < whichArray.length; x++)
{
let theButton = ce('button');
theButton.style.display = 'flex';
theButton.style.flexDirection = 'row';
theButton.className = 'buttonStyle001';
theButton.innerHTML = x + ' ' +
whichArray[x].name;
theButton.onclick = function()
{
ge('sfx_blip_001').play();
scrollToLocation(x);
ge(x).style.backgroundColor =
highlightColor;
ge('latitudeLongitude').value =
whichArray[x].name + '\n' +
whichArray[x].latitude + '\n' +
whichArray[x].longitude;
setTimeout(function()
{
ge(x).style.backgroundColor =
normalColor;
}, 1000);
};
theButton.onmouseover = function()
{
ge('sfx_warp_001').play();
};
menuLocationsDiv.append(theButton);
}
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// menuOfFunctions.js
let theFunctions =
[
{
name: 'menuResolution(locations)',
fullName: 'menuResolution',
description: 'Resolution'
},
{
name: 'menuLocations(locations)',
fullName: 'menuLocations',
description: 'Locations'
}
];
function menuOfFunctions()
{
if (ge('menuOfFunctionsDiv'))
{
ge('menuOfFunctionsDiv').remove();
}
//-//
// menuOfFunctionsDiv
let menuOfFunctionsDiv = ce('div');
menuOfFunctionsDiv.style.position =
'fixed';
menuOfFunctionsDiv.style.left = 0 + 'px';
menuOfFunctionsDiv.style.top = 22 + 'px';
menuOfFunctionsDiv.style.zIndex = 1000;
menuOfFunctionsDiv.style.backgroundColor
= 'rgba(0, 0, 0, 0.4)';
menuOfFunctionsDiv.id =
'menuOfFunctionsDiv';
ba(menuOfFunctionsDiv);
//-//
let minimizeButton = ce('button');
minimizeButton.innerHTML = '_';
minimizeButton.className =
'buttonStyle001';
minimizeButton.style.position = 'absolute';
minimizeButton.style.left = 0 + 'px';
minimizeButton.style.top = -22 + 'px';
minimizeButton.onclick = function()
{
ge('sfx_blip_001').play();
// minimize height of the window to show
only _ and □
ge('buttonDiv').style.height = 0 + 'px';
};
menuOfFunctionsDiv.append(minimizeButton
);
//-//
let maximizeButton = ce('button');
maximizeButton.innerHTML = '□';
maximizeButton.className =
'buttonStyle001';
maximizeButton.style.position = 'absolute';
maximizeButton.style.left = 28 + 'px';
maximizeButton.style.top = -22 + 'px';
maximizeButton.onclick = function()
{
ge('sfx_blip_001').play();
ge('buttonDiv').style.height = 200 + 'px';
};
menuOfFunctionsDiv.append(maximizeButto
n);
//-//
let buttonDiv = ce('div');
buttonDiv.innerHTML = '<br>';
buttonDiv.id = 'buttonDiv';
buttonDiv.className = 'scrolling';
buttonDiv.style.float = 'left';
buttonDiv.style.overflowY = 'auto';
buttonDiv.style.resize = 'both';
buttonDiv.style.height = 200 + 'px';
buttonDiv.style.minWidth = '150px';
buttonDiv.style.marginLeft = 'auto';
buttonDiv.style.marginRight = 'auto';
menuOfFunctionsDiv.append(buttonDiv);
//-//
for (let x = 0; x < theFunctions.length; x++)
{
let theButton = ce('button');
theButton.innerHTML =
theFunctions[x].description;
theButton.style.display = 'flex';
theButton.style.flexDirection = 'row';
theButton.className = 'buttonStyle001';
theButton.title =
theFunctions[x].fullName;
theButton.onclick = function()
{
ge('sfx_blip_001').play();
eval(''+theFunctions[x].name+'' + ';');
console.log(''+theFunctions[x].name+'');
};
theButton.onmouseover = function()
{
ge('sfx_warp_001').play();
};
buttonDiv.append(theButton);
//-//
ge('buttonDiv').style.height = 0 + 'px';
}
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// menuResolution.js
function menuResolution(whichArray)
{
let resolutions =
[
1000,
10000,
100000,
1000000,
10000000
];
if (ge('menuResolutionDiv'))
{
ge('menuResolutionDiv').remove();
}
//-//
let menuResolutionDiv = ce('div');
menuResolutionDiv.id =
'menuResolutionDiv';
menuResolutionDiv.style.position = 'fixed';
menuResolutionDiv.style.left = 5 + 'px';
menuResolutionDiv.style.bottom = 5 + 'px';
menuResolutionDiv.style.height = 170 +
'px';
menuResolutionDiv.style.borderStyle =
'solid';
menuResolutionDiv.style.borderWidth = 1
+ 'px';
menuResolutionDiv.style.borderColor =
'rgba(255, 255, 255, 0.5)';
menuResolutionDiv.style.borderRadius = 5
+ 'px';
menuResolutionDiv.style.overflowY =
'scroll';
ba(menuResolutionDiv);
//-//
let closeButton = ce('button');
closeButton.innerHTML = 'X';
closeButton.className = 'buttonStyle001';
closeButton.onclick = function()
{
ge('sfx_blip_001').play();
ge('menuResolutionDiv').remove();
};
closeButton.style.position = 'relative';
closeButton.style.left = 0 + 'px';
closeButton.style.zIndex = 20;
menuResolutionDiv.append(closeButton);
//-//
let theResolutionTitle = ce('div');
theResolutionTitle.innerHTML = ' ' +
'Resolution';
theResolutionTitle.style.color = 'rgb(255,
255, 255)';
menuResolutionDiv.append(theResolutionTitl
e);
//-//
let theResolutionInput = ce('textarea');
theResolutionInput.id =
'theResolutionInput';
theResolutionInput.className =
'resolutionInput';
theResolutionInput.style.height = 30 + 'px';
theResolutionInput.title = 'Enter a
Resolution such as:\n1000\n2500\n7000\
n10000\n1000000';
theResolutionInput.onkeyup = function()
{
resolution = theResolutionInput.value;
makeLocationMarker();
}
menuResolutionDiv.append(theResolutionInp
ut);
//-//
for (let x = 0; x < resolutions.length; x++)
{
let resolutionButton = ce('button');
resolutionButton.className =
'buttonStyle001';
resolutionButton.innerHTML =
resolutions[x];
resolutionButton.onclick = function()
{
ge('sfx_blip_001').play();
resolution = resolutions[x];
makeLocationMarker();
ge('theResolutionInput').value =
resolutions[x];
};
resolutionButton.onmouseover =
function()
{
ge('sfx_warp_001').play();
};
resolutionButton.style.display = 'flex';
resolutionButton.style.display = 'row';
menuResolutionDiv.append(resolutionButton
);
}
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// scrollToLocation.js
function scrollToLocation(whichId)
{
ge(whichId).scrollIntoView(
{
block: 'center', inline: 'center'
});
}
// Dedicated to God the Father
// All Rights Reserved Christopher Andrew
Topalian Copyright 2000-2024
// https://github.com/ChristopherTopalian
//
https://github.com/ChristopherAndrewTopalia
n
// whenLoaded.js
function whenLoaded()
{
makeWorld();
makeLocationTextbox();
menuOfFunctions();
menuResolution(locations);
menuLocations(locations);
makeLocationMarker();
loadSounds(sounds);
setTimeout(function()
{
scrollToLocation('5');
}, 1000);
}
True Artificial Intelligence System
16-Gon
Tautology
MI 1111 CI
1101 1011
AND XNOR
0001 1001
LP RP
0011 0101
OR NOR
0111 1000
RC LC
1010 1100
XOR NAND
0110 1110
CNI MNI
Contra-
0100 0010
-diction
0000
For More Tutorials:
CollegeOfScripting.weebly.com
CollegeOfScripting.wordpress.com
Youtube.com/ScriptingCollege
Twitter.com/CollegeOfScript
GitHub.com/ChristopherTopalian
GitHub.com/ChristopherAndrewTopalian
Sites.google.com/view/CollegeOfScripting
Dedicated to God the Father
This book is created by the
College of Scripting Music & Science.
Always remember, that each time you write a script
with a pencil and paper, it becomes imprinted so
deeply in memory that the material and methods are
learned extremely well.
When you Type the scripts, the same is true. The
more you type and write out the scripts by keyboard
or pencil and paper, the more you will learn
programming!
Write and Type every example that you find.
Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak It, See It, Dream It.
CollegeOfScripting.weebly.com
