JAVASCRIPT

FOR
HUMANS
by
Christopher Topalian
All Rights Reserved
Copyright 2000 - 2021
 Dedicated
to
God the Father
Table of Contents
Make a New Folder...............................................................7
Text Editor...........................................................................8
ourFirst.html page..............................................................10
Our First JavaScript Code....................................................11
function in head.................................................................12
function in body.................................................................13
Our Function defined in the HEAD.......................................14
Our Function defined in the BODY.......................................15
Our Function is Like a Sandwich..........................................16
return, simple.....................................................................17
return, simple, with parameter............................................18
return, simple, with parameter............................................19
return, simple, with parameter............................................20
function in head and return.................................................21
What is the onload event?...................................................22
onclick event for our Button................................................23
Button with Counter............................................................24
ask and say name...............................................................26
prompt if simple.................................................................27
ask and say name, if name..................................................28
enter a number, return.......................................................29
return, absolute number.....................................................31
User Input using textarea....................................................32
How to Design Applications.................................................34
date get Day......................................................................35
save as dateGetDayName.js................................................38
get Day, uses dateGetDayName.js file..................................40
get Day, using a parameter.................................................41
save as dateGetMonthName.js............................................42
get Month, using 2 parameters............................................44
get Day, get Month, using 2 parameters..............................45
Position Divs Using Style for the Month and Day...................46
month and day using onclick event......................................48
get month, get day, styled nice...........................................50
get month, get day, styled more..........................................52
save as ourStyle.css............................................................54
saved as showInfo.js..........................................................58
get month, get day, using externals.....................................59
saved as timeGetLocalTime.js..............................................61
get Day, get Month, get Time, onclick..................................63
get Day, get Month, get Time, continually............................65
saved as dateDayMessage.js...............................................67
uses dateGetName.js, dateDayMessage.js, showInfo.js.........69
save as dateMonthMessage.js.............................................70
uses many external js files!.................................................73
Planning Bigger Projects......................................................75
save as ourSimpleFunction.js...............................................76
function ourSimpleFunction()...............................................76
uses ourSimpleFunction.js...................................................77
save as index.html..............................................................78
File Structure of ourProject..................................................79
File Structure of our js files.................................................80
File Structure of our html files.............................................81
The File Structure Advantage..............................................82
save as mathNumberSquare.js............................................83
uses mathNumberSquare.js.................................................84
The class method is useful, but...........................................85
save as mathNumberSquare1.js...........................................86
uses as mathNumberSquare1.js...........................................87
Combine all js files into one.................................................88
This new file contains all of our .js files in ONE file. This can
make deploying our website much easier!............................88
Foundational JavaScript Tutorials.........................................89
confirm with location.href....................................................90
ask and say name...............................................................91
date and time, simple.........................................................92
do while prompt, enter name..............................................93
do while prompt, enter name..............................................94
do while using and..............................................................96
do while using Not Or And...................................................97
do while location.href..........................................................99
drop down menu..............................................................100
Either or nickname............................................................102
Find this word, Cat............................................................104
if else choose...................................................................105
if else choose...................................................................106
navigator for info..............................................................107
Length of a String.............................................................108
window, new window........................................................109
window, new window, same as this...................................110
username && password....................................................111
password using not equal to..............................................112
quiz question math...........................................................113
checkboxes......................................................................114
array, sort........................................................................116
if many............................................................................117
textbox value....................................................................119
Enter Name, toLowerCase()...............................................120
combining strings..............................................................121
combining strings prompt..................................................122
while count down..............................................................123
while count up..................................................................124
quick math question..........................................................125
which teams won?............................................................126
show all records as JSON..................................................128
show Records for loop and filter........................................130
show Records for loop and filter........................................132
show Records from and too...............................................134
show record.....................................................................136
hour and minutes.............................................................138
date month message.........................................................140
hour message...................................................................143
class simple......................................................................145
class................................................................................146
class inheritance, extends..................................................148
class inheritance, extends person.......................................152
convert, f to c...................................................................155
class simple, and this........................................................157
keyboard control...............................................................158
keyboard, move text.........................................................160
saved as timeGetTime.js...................................................163
Keep Getting Time uses timeGetTime.js.............................176
save as timeMessage.js.....................................................177
time of day message, uses timeMessage.js.........................179
Make a New Folder

Our project begins with us creating

a New Folder.

ourProject folder will hold all of

our js, html and css files.

• Right Click on the Desktop and

choose New Folder

• Rename the Folder to

ourProject

We will save all of our files in this

folder.
 Text Editor

We can choose from many Text Editors

to make our JavaScripts, including
Notepad, that comes with Windows,
but Notepad is not as good as newer
alternatives.

Let's check out the excellent and free

JavaScript text editors.

VS CODE
https://code.visualstudio.com/

ATOM
https://atom.io/

BRACKETS
http://brackets.io/
Sublime
https://www.sublimetext.com/

Notepad++
https://notepad-plus-plus.org/
downloads/

VS Code is a favorite of many.

After we have downloaded and

installed our Editor, such as VS Code,
we will then make our first JavaScript
code.

We execute our JavaScript code

using an .html file.

Thus, we first learn how to make

an .html file, which is easy to do.
 ourFirst.html page

<html>

<head>
<title>Our First WebPage</title>
</head>

<body>

We write anything here

</body>

</html>

<!-- save this file as ourFirst.html -->

<!-- save it in ourProject folder -->

 Our First JavaScript Code

<html>

<head>
<title>Message Box</title>
</head>

<body>

<script>
alert("Hi everyone");
</script>

</body>
Hi everyone
</html>
OK

<!-- save as messageBox.html -->

function in head
<html>
<head>
<title> write function in head</title>
<script>
function showText()
{
document.write("Hi Everyone");
}
</script>
</head>

<body>

<script>
showText();
</script>

</body>
</html>
function in body

<html>
<head>
<title> write function in body </title>
</head>

<body>

<script>

document.write("Hi Everyone");

</script>

</body>

</html>
Our Function defined in the HEAD

<html>
<head>
<title>Message Box</title>

<script>

function ourMessage()
{
alert("Hi everyone");
}

</script> Hi everyone

</head> OK

<body onload = "ourMessage();">

</body>
</html>
Our Function defined in the BODY

<html>
<head>
<title>Message Box</title>
</head>

<body onload = "ourMessage();">

<script>

function ourMessage()
{
alert("Hi everyone");
}

</script>
Hi everyone

</body>
OK
</html>
Our Function is Like a Sandwich

function ourMessage()
{
alert("Hi everyone");
}

As we have learned from the past two pages;

we can define our function in the head, or
in the body.
Either way is fine to do.

And as shown above, our function is currently

very simple and acts as a container for the
message code.

In JavaScript, functions are triggered by

EVENTS.

We have many EVENT types to choose from

to activate our functions.
return, simple

<html><body>
<script>

function simple()
{
return "howdy";
}

alert(simple());

</script>

</body>

</html>
return, simple, with parameter

<html>
<body>
<script>

function simple(yourMessage)
{
return yourMessage;
}

alert(simple("Hi Everyone"));

</script>
</body>
</html>
return, simple, with parameter
<html>
<body>
<script>

function simple(yourMessage)
{
let greeting = "Hi there " +
yourMessage;

return yourMessage;
}

alert(simple("So good to see you"));

</script>

</body>
</html>
return, simple, with parameter

<html>
<body>
<script>

function simple()
{
let person = prompt("Enter your
Name?", "");
let greeting = "Howdy " + person;
return greeting;
}

alert(simple());

</script>
</body>
</html>
function in head and return

<html><head><title> write function in head

using return </title>
<script>

function ourMessage(){
return "Hi Everyone";
}

function showText(){
document.write(ourMessage());
}
</script>

</head>

<body onload="showText();">

</body></html>
 What is the onload event?

<body onload = "ourMessage();">

The onload event triggers when

everything is done loading on the page.

Thus, the function that we made, named

ourMessage()
will be activated the moment that the
page is finished loading.

The onload event, is one of many

events that we can choose from
to activate our functions.

Let's now learn to trigger our code

with a different event, such as when a
person clicks on a BUTTON.
 onclick event for our Button

<html>
<head>
<title>Button Press</title>

<script>

function ourFunction()
{
alert("Hi Everyone");
}
</script>
</head>
<body>

Push the Button <br>

<button
onclick="ourFunction();">Enter</button>
<br>

</body></html>
 Button with Counter
<html><head><title>Button Press</title>
<script>

let theText = "Clicks";

let ourCounter = 0;

function ourFunction()
{
ourCounter += 1;

document.getElementById("displayText").
value = theText + ourCounter;
}
</script></head>
<body>

Push the Button <br>

<button
onclick="ourFunction();">Enter</button>
<br>
<hr width ="200px" align="left">

Message is Displayed Here <br>

<textarea id="displayText"
rows="1"></textarea>

</body></html>
ask and say name

<html>
<head>
<title> Ask and Say Name </title>
</head>

<body>

<script>

let name = prompt("Enter your name

","");

alert("Hi " + name);

</script>

</body></html>
prompt if simple

<html><head><title> Prompt
function</title>
</head>

<body>
<script>
let name = prompt("Enter your name");
if (name == "chris")
{
document.write("Hi Chris");
}
</script>
</body>
</html>
ask and say name, if name

<html><head>
<title>Ask, Say name, if person,
else</title>
</head>
<body>

<script>
let name = prompt("Enter your name
","");

if (name == "chris") {
alert("Hi " + name);
}
else {
alert("Where is Chris?");
}
</script>
</body>
</html>
enter a number, return

<html><head>
<script>
function askNumber()
{
let question = prompt("Enter a number",
"");
return question;
}

function displayIt(where, whatFunction)

{
document.getElementById(where).innerHT
ML = whatFunction;
}

</script>
</head>

<body>
<button onclick="displayIt('div1',
askNumber());">
Enter Number
</button>

<div id="div1"></div>

</body></html>
return, absolute number
<html><body><script>
function ourFunction()
{
let question = prompt("Enter a number",
"");
let answer = Math.abs(question);
return answer;
}

function showIt(where, whatFunction)

{
document.getElementById(where).innerHT
ML
= whatFunction;
}
</script>
<button onclick="showIt('div1',
ourFunction());">
Absolute Value
</button>
<div id="div1"></div>
</body></html>
 User Input using textarea
<html><head><title>User Input</title>

<script>
function ourFunction()
{
let theText =
document.getElementById("enteredText").v
alue;

document.getElementById("displayText").
value = theText;
}
</script></head>
<body>

Enter Text Here <br>

<textarea id = "enteredText" rows =
"1"></textarea> <br>
<button onclick =
"ourFunction();">Enter</button> <br>
<hr width ="200px" align="left">

Text Displayed Here <br>

<textarea id = "displayText" rows =
"1"></textarea>

</body></html>
How to Design Applications
Do we start in code? No.

We start by saying out loud what we want to

do.

We then write down each thing that we want to

accomplish.

Let's design an interface together.

Let's talk it out first.

I want to show the date and time in many

ways.

I want to show the day by itself.

I want to show the month by itself.

I want to have date and time updating.

 date get Day

<html><head><script>

function dateGetDayName()
{
let theDate = new Date();

let theDay = theDate.getDay();

if(theDay == 0) {
return "Sunday";
}
if(theDay == 1) {
return "Monday";
}
if(theDay == 2) {
return "Tuesday";
}
if(theDay == 3) {
return "Wednesday";
}
if(theDay == 4) {
return "Thursday";
 }
if(theDay == 5) {
return "Friday";
}
if(theDay == 6) {
return "Saturday";
}
}

function showInfo()
{
document.getElementById("day").innerHT
ML = dateGetDayName();
}

</script>

</head>

<body onload = "showInfo();">

<div id = "day">Day</div>

</body></html>
<!--

As we can see above, our code is

becoming more complex very quickly.

Let's simplify this code and how we

program.

Let's define our function in an external js

file.

We can keep our code very organized in

this way.

-->
 save as dateGetDayName.js
function dateGetDayName()
{
let theDate = new Date();
let theDay = theDate.getDay();
if(theDay == 0) {
return "Sunday";
}
if(theDay == 1) {
return "Monday";
}
if(theDay == 2) {
return "Tuesday";
}
if(theDay == 3) {
return "Wednesday";
}
if(theDay == 4) {
return "Thursday";
}
if(theDay == 5) {
return "Friday";
}
 if(theDay == 6) {
return "Saturday";
}
}

//In ourProject folder, we make 3 New

Folders named it js, html, css

//We save dateGetDayName.js in the js

folder of ourProject Folder.

//The next pages html uses this script!

//The js folder of ourProject folder has

the dateGetDayName.js file inside of it.
get Day, uses dateGetDayName.js
file
<html><head>
<script src =
"../js/dateGetDayName.js"></script>

<script>

function showInfo()
{
document.getElementById("dayDiv").inner
HTML = "It is " + dateGetDayName();
}

</script>
</head>

<body onload = "showInfo();">

<div id = "dayDiv">Day</div>

</body></html>
 get Day, using a parameter
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script>

function showInfo(whichDiv)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + dateGetDayName();
}
</script></head>

<body onload = "showInfo('dayDiv');">

<div id = "dayDiv">Day</div>

</body>
</html>
<!-- We use a parameter in our function,
instead of defining it in our function.
Instead, it is defined when we use the
function. -->
 save as dateGetMonthName.js
function dateGetMonthName()
{
let theDate = new Date();
let theMonth = theDate.getMonth();
if(theMonth == 0) {
return "January";
}
if(theMonth == 1) {
return "February";
}
if(theMonth == 2) {
return "March";
}
if(theMonth == 3) {
return "April";
}
if(theMonth == 4) {
return "May";
}
if(theMonth == 5) {
return "June";
}
 if(theMonth == 6) {
return "July";
}
if(theMonth == 7) {
return "August";
}
if(theMonth == 8) {
return "September";
}
if(theMonth == 9) {
return "October";
}
if(theMonth == 10) {
return "November";
}
if(theMonth == 11) {
return "December";
}
}
 get Month, using 2 parameters
<html><head>
<script src =
"../js/dateGetMonthName.js"></script>

<script>
function showInfo(whichDiv,
functionName)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}
</script>
</head>

<body onload = "showInfo('monthDiv',

dateGetMonthName())">

<div id = "monthDiv">Month</div>

</body></html>
get Day, get Month, using 2
parameters
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script src =
"../js/dateGetMonthName.js"></script>
<script>
function showInfo(whichDiv,
functionName)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}

</script></head>
<body onload = "showInfo('monthDiv',
dateGetMonthName()); showInfo('dayDiv',
dateGetDayName())">

<div id = "monthDiv">Month</div>
<div id = "dayDiv">Day</div>
</body></html>
Position Divs Using Style for the
Month and Day
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script src =
"../js/dateGetMonthName.js"></script>

<script>

function showInfo(whichDiv,
functionName)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}

</script>
<style>
.monthStyle
{
position:absolute;
top: 100px;
 left: 100px;
}

.dayStyle
{
position:absolute;
top: 200px;
left: 100px;
}

</style>

</head>

<body onload = "showInfo('monthDiv',

dateGetMonthName()); showInfo('dayDiv',
dateGetDayName())">

<div id = "monthDiv"
class="monthStyle">Month</div>
<div id = "dayDiv"
class="dayStyle">Day</div>

</body></html>
month and day using onclick
event
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script src =
"../js/dateGetMonthName.js"></script>

<script>

function showInfo(whichDiv,
functionName)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}

</script>
<style>
.monthStyle
{
position:absolute;
top: 100px;
 left: 100px;
}

.dayStyle
{
position:absolute;
top: 150px;
left: 100px;
}

</style></head>
<body>

<div id = "monthDiv" class="monthStyle"

onclick = "showInfo('monthDiv',
dateGetMonthName())">Month</div>

<div id = "dayDiv" class="dayStyle"

onclick = "showInfo('dayDiv',
dateGetDayName())">Day</div>

</body></html>

<!-- Remember to click on the div to

activate -->
get month, get day, styled nice
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script src =
"../js/dateGetMonthName.js"></script>

<script>
function showInfo(whichDiv,
functionName)
{
document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}
</script>
<style>
.monthStyle {
position:absolute;
top: 100px;
left: 100px;
width: 80px;
border: 5px solid rgb(150,0,150);
border-radius: 5px;
}

.dayStyle {
position:absolute;
top: 150px;
left: 100px;
width: 80px;
border: 5px solid rgb(0,0,0);
border-radius: 5px;
}

</style></head>
<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName())">Month</div>

<div id = "dayDiv" class="dayStyle"

onclick = "showInfo('dayDiv',
dateGetDayName())">Day</div>
</body></html>
get month, get day, styled more
<html><head>
<script src =
"../js/dateGetDayName.js"></script>
<script src =
"../js/dateGetMonthName.js"></script>

<script>
function showInfo(whichDiv,
functionName) {

document.getElementById(whichDiv).inne
rHTML = "It is " + functionName;
}
</script>
<style>

div{
border: 5px solid rgb(0,0,0);
border-radius: 5px;
text-align: center;
}
div:hover {
 border: 5px solid rgb(17, 0, 255);
}

.monthStyle {
position:absolute;
top: 100px;
left: 100px;
width: 80px;
}
.dayStyle {
position:absolute;
top: 150px;
left: 100px;
width: 80px;
}
</style></head>
<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName())">Month</div>
<div id = "dayDiv" class="dayStyle"
onclick = "showInfo('dayDiv',
dateGetDayName())">Day</div>
</body></html>
save as ourStyle.css
div{
border: 5px solid rgb(0,0,0);
border-radius: 5px;
text-align: center;
}

body{
background-color: rgb(196, 196, 196);
}

div:hover {
border: 5px solid rgb(17, 0, 255);
}

.monthStyle {
position:absolute;
top: 100px;
left: 100px;
width: 80px;
}

.dayStyle {
position:absolute;
 top: 150px;
left: 100px;
width: 80px;
}

/*
We save this file as ourStyle.css in
our css folder.
*/
/*
We make a folder named css in
ourProject folder. We save
ourSte.css inside of the css folder.
get month, get day, css external

<html><head>
<script src =
"../js/dateGetDayName.js"></script>

<script src =
"../js/dateGetMonthName.js"></script>

<link rel="stylesheet"
href="../css/ourStyle.css">
<script>
function showInfo(whichDiv,
functionName, ourText)
{
document.getElementById(whichDiv).inne
rHTML = ourText + ' ' + functionName;
}
</script>
</head>
<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName(), 'It is
')">Month</div>

<div id = "dayDiv" class="dayStyle"

onclick = "showInfo('dayDiv',
dateGetDayName(), 'Today is
')">Day</div>

</body></html>

<!-- Remember to click on the divs

to activate the code -->
saved as showInfo.js

function showInfo(whichDiv,
functionName, ourText)
{
document.getElementById(whichDiv).inne
rHTML = ourText + ' ' + functionName;
}

// since we keep using showInfo in many

scripts, we have made it to be its own function
that we can use.

//we save this file as showInfo.js

//we save this file in our js folder that is in

ourProject folder
get month, get day, using
externals
<html><head>
<script src =
"../js/dateGetDayName.js"></script>

<script src =
"../js/dateGetMonthName.js"></script>

<script src = "../js/showInfo.js"></script>

<link rel="stylesheet"
href="../css/ourStyle.css">
</head>
<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName(), 'It is
')">Month</div>

<div id = "dayDiv" class="dayStyle"

onclick = "showInfo('dayDiv',
dateGetDayName(), 'Today is
')">Day</div>
</body></html>
saved as timeGetLocalTime.js
function timeGetLocalTime()
{
let theDate = new Date();

theDate.toLocaleString();

return theDate;
}

function timeGetLocalTimeRepeat()
{
let theDate = new Date();

theDate.toLocaleString();

document.getElementById("timeDiv").inne
rHTML = theDate;
//console.log(theDate);
}
function activateTimer()
{
 let ourTimer =
setInterval(timeGetLocalTimeRepeat,
1000);
}
get Day, get Month, get Time,
onclick
<html><head>
<script src =
"../js/dateGetDayName.js"></script>

<script src =
"../js/dateGetMonthName.js"></script>

<script src =
"../js/timeGetLocalTime.js"></script>
<script src = "showInfo.js"></script>

<link rel="stylesheet"
href="../css/ourStyle.css">
</head>

<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName(), 'It is
')">Month</div>
<div id = "dayDiv" class="dayStyle"
onclick = "showInfo('dayDiv',
dateGetDayName(), 'Today is
')">Day</div>

<div id = "timeLocalDiv" class="dayStyle"

onclick = "showInfo('timeLocalDiv',
timeGetLocalTime(), 'Time is ')"
style="top:200px;
width:275px;">Time</div>

</body></html>
get Day, get Month, get Time,
continually

<html><head>
<script src =
"../js/dateGetDayName.js"></script>

<script src =
"../js/dateGetMonthName.js"></script>

<script src =
"../js/timeGetLocalTime.js"></script>
<script src = "showInfo.js"></script>

<link rel="stylesheet"
href="../css/ourStyle.css">
</head>

<body>
<div id = "monthDiv" class="monthStyle"
onclick = "showInfo('monthDiv',
dateGetMonthName(), 'It is
');">Month</div>
<div id = "dayDiv" class="dayStyle"
onclick = "showInfo('dayDiv',
dateGetDayName(), 'Today is
');">Day</div>

<div id = "timeDiv" class="dayStyle"

onclick = "activateTimer();"
style="top:275px; width:275px;">Time
Keep Activating</div>

</body></html>
saved as dateDayMessage.js

function messageFromDay()
{
if(dateGetDayName() == "Friday")
{
return "It's Friday. Good time to learn
something new.";
}
else if(dateGetDayName() ==
"Saturday")
{
return "It's Saturday. Good time for
Scripting.";
}
else if(dateGetDayName() == "Sunday")
{
return "It's Sunday. Happy
Scripting.";
}
else if(dateGetDayName() == "Monday")
{
return "It's Monday. Time to learn.";
}
 else if(dateGetDayName() == "Tuesday")
{
return "It's Tuesday. Learning alot of
Javascript.";
}
else if(dateGetDayName() ==
"Wednesday")
{
return "It's Wednesday. JSON is fun
to learn.";
}
else if(dateGetDayName() ==
"Thursday")
{
return "It's Thursday. One more day
till Friday.";
}
}
uses dateGetName.js,
dateDayMessage.js, showInfo.js
<html>
<body style="background-color:rgb(140,
192, 192);">

<script
src="../js/dateGetDayName.js"></script>

<script
src="../js/dateDayMessage.js"></script>

<script src="../js/showInfo.js"></script>

<button
onclick="showInfo('showDayMessage',
messageFromDay(), 'hi')">Press</button>

<div id="showDayMessage" style="font-

size:100pt">Day Message</div>
</body></html>
save as dateMonthMessage.js

function messageFromMonth()
{
if(dateGetMonth() == "March")
{
return "It's March. Spring has come.";
}
else if(dateGetMonth() == "April")
{
return "It's April. Getting Warmer
out.";
}
else if(dateGetMonth() == "May")
{
return "It's May. Very nice out there
now.";
}
else if(dateGetMonth() == "June")
{
return "It's June. Summer is here.";
}
else if(dateGetMonth() == "July")
{
 return "It's July. A Nice Warm
Summer so far.";
}
else if(dateGetMonth() == "August")
{
return "It's August. Summer is almost
over.";
}
else if(dateGetMonth() == "September")
{
return "It's September. Autumn has
come.";
}
else if(dateGetMonth() == "October")
{
return "It's October. It's getting cooler
out there.";
}
else if(dateGetMonth() == "November")
{
return "It's November. Winter mis
almost here.";
}
else if(dateGetMonth() == "December")
{
 return "It's December. Winter is
here.";
}
else if(dateGetMonth() == "January")
{
return "It's January. It's not a snowy
winter.";
}
else if(dateGetMonth() == "February")
{
return "It's February. There is not
much snow out there.";
}
}
uses many external js files!

<html>
<body style="background-color:rgb(140,
192, 192);">

<script
src="../js/dateGetDayName.js"></script>

<script
src="../js/dateGetMonthName.js"></script>

<script
src="../js/dateDayMessage.js"></script>

<script
src="../js/dateMonthMessage.js"></script>

<script src="../js/showInfo.js"></script>

<button
onclick="showInfo('showDayMessage',
messageFromDay(), 'Hi')">Day
Message</button>
<hr>
<button
onclick="showInfo('showMonthMessage',
messageFromMonth(), 'Hi')">Month
Message</button>

<div id="showDayMessage" style="font-

size:30pt">Day Message</div>

<div id="showMonthMessage"
style="font-size:30pt">Day Message</div>

</body>
</html>
Planning Bigger Projects
When we are creating our library, we may want
to organize things by using an index.html file.

We create an index.html file that will reference

the html folder files to activate our JavaScript
files in our js folder.
If we had placed our .html files in only the
ourProject folder, then we would use
<script src="./js/showInfo.js"></script>
But, since we placed our .html files in the html
folder, then we must use two dots to reference
that file from the html folder.
<script src="../js/showInfo.js"></script>
On the next 2 pages, we will first make a simple
js and html file. Our index.html file will then
reference the html file we made.
save as ourSimpleFunction.js

function ourSimpleFunction()
{
alert("Hi Everyone");
}

//we save this file as

ourSimpleFunction.js in the
js folder in ourProject folder.
uses ourSimpleFunction.js

<html>
<head>
<title>Button Press</title>

<script src="../js/ourSimpleFunction.js">
</script>
</head>
<body>

Push the Button <br>

<button
onclick="ourSimpleFunction();">Enter</bu
tton>
<br>

</body></html>

<!-- We save this file as

ourSimpleFunction.html in our html folder.
-->
save as index.html

<html><head><style>
a{
color: rgb(30, 99, 211);
font-size: 20pt;
}
</style></head>
<body style="background-color:rgb(140,
192, 192);">

<div id="first" style="font-

size:30pt">Index File</div>
<hr>

<a href =
"./html/ourSimpleFunction.html">Our
Simple Function</a>

</body></html>

<!-- We save this file as index.html in

ourProject folder.
-->
File Structure of ourProject

The File Structure, showing where

we save our index.html file

When we open the index.html file we

can click on the link to open one of our
apps. We can add more links anytime.
File Structure of our js files

The js folder in ourProject folder

contains our JavaScript library!
File Structure of our html files

The html folder in ourProject

folder contains our html files that
trigger the js files of our library!
The File Structure Advantage

As we add more and more js functions to our

js library folder, we can also add more html
files in our html folder, to trigger them.
We can then create the hyperlinks in our
index.html file, to activate our html files.
It's now very easy for us to create complex
projects, because we have good structure!
save as mathNumberSquare.js

class mathFunctions
{
numberSquare(number)
{
return number * number;
}
}

let ourMath = new mathFunctions();

//We can of course put all of our math

functions in this one class!

//It is up to each programmer how they enjoy

thinking about data.

//The next page uses this script.

uses mathNumberSquare.js

<html>
<body style="background-color:rgb(140,
192, 192);">

<script
src="../js/mathNumberSquare.js"></script
>

<script src="../js/showInfo.js"></script>

<button onclick="showInfo('showResult',
ourMath.numberSquare(7), 'Result
is')">Press</button>

<div id="showResult" style="font-

size:30pt">Result</div>

</body></html>

<!-- notice that we reference the class we

made called ourMath and then use a dot. and
then the function name. -->
The class method is useful, but...
Do we need to use the class method to program?
No!
But if we enjoy using it, then we can, because the
class method is useful in many areas and the
more we use it the more familiar we are with it.

Is it good to just use the functions method?

Yes!
We use Functions, if that is all that is required!

We keep each function simple!

We make each function do ONE thing!
Later, we can place all related functions in one
file. For now, we are using separate files, because
it makes thinking about each function easier.

Because of this, let's show the example again,

using the function method as our design pattern.
save as mathNumberSquare1.js

function mathNumberSquare(number)
{
return number * number;
}
uses as mathNumberSquare1.js

<html>
<body style="background-color:rgb(140,
192, 192);">

<script
src="../js/mathNumberSquare1.js"></scrip
t>

<script src="../js/showInfo.js"></script>

<button onclick="showInfo('showResult',
mathNumberSquare(7), 'Result
is')">Press</button>

<div id="showResult" style="font-

size:30pt">Result</div>

</body>
</html>
Combine all js files into one

We open our js folder, that contains

our many js files.
We type in the address bar cmd

This open our js folder in the

Command prompt

We type in the words

copy *.js combine.js
and press enter

It will make a New file, that is named

combine.js
This new file contains all of our .js files in
ONE file. This can make deploying our
website much easier!
Foundational JavaScript
Tutorials

Here is a collection of simple JavaScript

Tutorials that teach the foundation of
JavaScript programming.

As we are going through each of the

tutorials on the next pages, we can add
them to our js library and make an html
file to activate them and we can also add
the entry to our index.html file.

By the end of the book, we will have a

pretty impressive js library folder, with a
corrosponding html folder to activate our
scripts and an index.html file to make
everything easier to find.
confirm with location.href
<html><head>
<title>confirm</title>
<script>
function goHere()
{
if (confirm("Go to google"))
{
location.href =
"http://www.google.com";
}
}

</script>
</head>
<body>
<input type = "button"
value = "Would you like google"
onclick = "goHere()">
</body>
</html>
ask and say name

<html><head><title> Ask and Say Name

</title>
</head>

<body>

<script>
function ourQuestion()
{
let name = prompt("Enter your name ","
");
alert(name);
}

ourQuestion();
</script>

</body>
</html>
date and time, simple

<html> <head><title> Current Date </title>

<script>
function ourTime()
{
let time = new Date( );
document.write(time);
}
</script>

</head>

<body>
<input type = "button"
value = "Click for Time"
onclick = "ourTime( )">
</body>
</html>
do while prompt, enter name

<html><head><title> do while Enter Name

</title>
<script>
function enterName()
{
let name;
do
{
name = prompt("Enter Name");
}
while (!name);
alert("How are you " + name);
}

</script>
</head>
<body>
<input type = "button"
value = "Enter Name"
onclick = "enterName()">
</body>
</html>
do while prompt, enter name
<html><head><title> do while locations
</title>
<script>
function pass2Go()
{
let pass;
do
{
pass = prompt("Enter Password");
} while (!pass);
if (pass == "789")
{
location.href =
"http://www.google.com";
}
else
{
location.href =
"http://www.yahoo.com";
}
}

</script>
</head>
<body>
<input type = "button"
value = "Enter Pass for Go site"
onclick = "pass2Go( )">
</body>
</html>
do while using and

<html><head><title> do while with &&

</title>
<script>
function nameAge()
{
let name;
let age;
do
{
name = prompt("Enter Name");
age = prompt("Enter Age");
}
while (!name && !age) ;
alert(name + " is " + age + " years old");
}
</script>
</head>
<body>
<input type = "button"
value = "Enter Name then age"
onclick = "nameAge()">
</body></html>
do while using Not Or And

<html><head><title> do while NOT OR

AND</title>
<script>
function namePass( )
{
let name;
let pass;
do
{
name = prompt("Enter Name");
pass = prompt("Enter Password");
} while (!name || !pass) ;
if (name == "key" && pass == "789")
{
alert("Good to See you Chris");
}
else
{
alert("Wrong Name OR Password");
}
}
</script>
</head>
<body>
<input type = "button"
value = "Enter Name and Pass"
onclick = "namePass()">
</body>
</html>
do while location.href

<html><head> <title> do while location

sending </title>
<script>
function answerMe()
{
let name;
do
{
name = prompt("Enter Name");
}
while (!name) ;
location.href =
"http://www.google.com";
}
</script>
</head>
<body>
<input type = "button"
value = "Enter Name"
onclick = "answerMe()">
</body></html>
drop down menu
<html><head><title> Drop Down Menu
</title>
<script>
function tomInfo()
{
alert("Tom teaches Physics");
}
function johnInfo()
{
alert("John teaches Math");
}
function janeInfo()
{
alert("Jane teaches Science");
}
</script>
</head>
<body>
<select name = "People">
<option value = "tom"
onclick = "tomInfo()"> Tom
</option>
<option value = "john"
 onclick = "johnInfo()"> John
</option>
<option value = "jane"
onclick = "janeInfo()">Jane
</option>
</select>
</body>
</html>
Either or nickname

<html><head><title> Either OR NickName

</title>
<script>
function nameFun()
{
let name = prompt("Enter your Name");

if (name == "chris" || name == "keys")

{
alert("Hi Chris, also known as Keys");
}
else if (name == "jim" || name ==
"jimbob")
{
alert("Hi Jim, also known as
JimBob");
}
else {
alert("Where is Chris. Where is Jim");
}
}
</script>
</head>
<body>
<input type = "button"
value = "Enter your Name"
onclick = "nameFun()">
</body>
</html>
Find this word, Cat
<html><head><title> find this word, Cat
</title>
<script>
function findWord()
{
window.find("Cat", false, false);
}
</script>

</head>
<body>

<input type = "button"

value = "Find the word Cat"
onclick = "findWord()">
<br>
Dog Bird Rooster Cat Dolphin
<br>
Shark Lion Zebra Monkey Fish
</body>
</html>
if else choose
<html><head><title> if else choose 1 or 2
</title>
<script>
function equals()
{
let number = prompt("Enter 1 or 2");
if (number == "1") {
alert("You typed one");
}
else if (number == "2") {
alert("You typed two");
}
else {
alert("You did not enter 1 or 2");
}
}
</script></head>
<body>
<input type = "button"
value = "Enter 1 or 2"
onmouseover = "equals( )">
</body></html>
if else choose

<html><head><title> if else Greater Than

</title>
<script>
function greater()
{
let number = prompt("Enter any
number");
if (number >= 10) {
alert("You Entered 10 or Higher");
}
else {
alert("You entered Less than 10");
}
}
</script>
</head>
<body>
<input type = "button"
value = "Enter any number"
oncontextmenu = "greater()">
</body></html>
<!-- right click button to activate -->
navigator for info

<html><head><title> Information Collected

</title>
<script>
function info()
{
let name = navigator.appName;
let version = navigator.appVersion +
"<br>";
let aka = navigator.appCodeName +
"<br>";
let onLine = navigator.onLine + "<br>";
let header = navigator.userAgent;
document.write(name + " " + version + "
"+
aka + " " + onLine + " " + header);
}
</script></head>
<body>
<input type = "button"
value = "Click for Info"
onclick = "info( )">
</body></html>
Length of a String

<html><head><title> Length of String

</title>
<script>
function ourLength()
{
let ourWords = "Hi Everyone";
let number = ourWords.length;
alert(number);
}
</script></head>
<body>
<input type = "button"
value = "Length of our string"
onclick = "ourLength()">
</body></html>
window, new window

<html><head><title> Custom size window

</title>
<script>
function makeWindow()
{
let newWindow = window.open
("http://www.google.com",
" ", "height = 500, width = 800");
}
</script></head>
<body>
<input type = "button"
value = "Google in new window"
onclick = "makeWindow()">
</body></html>
window, new window, same as
this

<html><head><title> Make Size of This

window </title>
<script>
function makeSizeOfThis()
{
let newWindow =
window.open("http://www.google.com","
","height = screen.height,width =
screen.width");
}
</script>
</head>
<body>
<input type = "button"
value = "Google in new window"
onclick = "makeSizeOfThis()">
</body></html>
username && password

<html><head><title> if else AND </title>

<script>
function password()
{
let name = prompt("Enter name");
let password = prompt("Enter
password");
if (name == "chris" && password ==
177)
{
alert("You may enter");
}
else {
alert("Try again");
}
}
</script></head>
<body>
<input type = "button"
value = "Name and Password"
onclick = "password()">
</body></html>
password using not equal to

<html><head><title> If else password is

789 </title>
<script>
function password()
{
let number = prompt("Enter Password");
if (number != "789") {
alert("Wrong answer");
}
else {
alert("You are right. You may enter");
}
}
</script>
</head>
<body>
<input type = "button"
value = "Enter Password"
onmouseout = "password( )">
</body>
</html>
quiz question math
<html><head><title>quiz question</title>
<script>
function myFunction()
{
let number = prompt("What is 5 times
4");
if (number == "20")
{
document.write("That is right.");
}
else
{
document.write("Wrong.");
}
}
</script></head>
<body>
<input type = "button"
value = "What is 5 times 4"
ondblclick = "myFunction()">
</body></html>
<!-- double click button to activate -->
checkboxes
<html><head><title> Checkbox </title>
<script>
function tomInfo()
{
let check =
document.getElementById("tomCheck").c
hecked;

if(check == true) {
alert("Tom teaches Physics");
}
}
function johnInfo( )
{
let check =
document.getElementById("johnCheck").c
hecked;
if(check == true) {
alert("John teaches Math ");
}
}
function janeInfo( )
{
 let check =
document.getElementById("janeCheck").c
hecked;
if(check == true) {
alert("Jane teaches Science");
}
}
</script></head>
<body>
<input type = "checkbox"
value = "Toms information"
onclick = "tomInfo()" id="tomCheck">
Click to find out what Tom teaches

<br><input type = "checkbox"

value = "Johns information"
onclick = "johnInfo()" id="johnCheck">
Click to find out what John teaches

<br><input type = "checkbox"

value = "Janes information"
onclick = "janeInfo()" id="janeCheck">
Click to find out what Jane teaches
</body></html>
array, sort
<html><head><title> Sorting our Arrary
</title>
<script>
let people = [
"John",
"Dave",
"Lois",
"Debra",
"Alfred",
"Donna"
];
</script></head>
<body>

<script>
document.write(people.sort());
</script>

</body>
</html>
if many
<html><head><title> What is your age
</title>
<script>
function howold()
{
let age = prompt("Enter your age");

if (age < 18) {

alert("Not allowed to Vote, Box, or be
President");
}
else if (age < 21) {
alert("Not allowed to Box or be
President");
}
else if (age < 35) {
alert("Not allowed to be President");
}
else {
alert("You can Vote, Box, and be
President now");
}
}
</script></head>
<body>
<input type = "button"
value = "Enter any number"
onclick = "howold()">
</body>
</html>
textbox value
<html><head><title>text box</title>
<script>
function ourText()
{
let theText =
document.getElementById("ourButton").v
alue;
document.write(theText);
}
</script></head>
<body>

<input type = "text" id

="ourButton"></input>

<input type = "button" value = "Click to

Enter" onclick = "ourText()">

</body></html>
Enter Name, toLowerCase()
<html><head><title> Lower Case the Text
</title>
<script>
function ourLower()
{
let name = prompt("Enter your Name");
let lower = name.toLowerCase();
if (lower == "chris")
{
alert("Hi Chris");
}
else {
alert("Where is Chris?");
}
}
</script></head>
<body>
<input type = "button"
value = "Enter your Name"
onclick = "ourLower()">
</body></html>
combining strings
<html><head><title> Music Questions
</title>
<script>
function music()
{
let band = prompt("Favorite Band?");
let type = prompt("Favorite Music
Type?");
document.write(band +
" is great " +
type +
" music");
}
</script></head>
<body>

<script>
music();
</script>

</body></html>
combining strings prompt

<html><head><title> Ask Full Name

</title>
<script>
function askFullName()
{
let first = prompt("Enter First Name");
let last = prompt("Enter Last Name");
alert(first + " " + last);
}
</script>
</head>
</head>

<body>
<input type = "button"
value = "Say my name"
onclick = "askFullName()">
</body></html>
while count down

<html><head><title> while counter </title>

<script>

function countDown()
{
let count = 100;
while (count != 0) {
document.write(count + "<br>");
count--;
}
}
</script>
</head>

<body>
<input type = "button"
value = "Count down from 100"
onclick = "countDown()">
</body></html>
while count up

<html><head><title> while counter </title>

<script>
function countUp()
{
let count = 1;
while (count <= 100) {
document.write(count + "<br>");
count++;
}
}
</script>
</head>

<body>
<input type = "button"
value = "Count to 100 from 1"
onclick = "countUp()">
</body></html>
quick math question

<html><head><title> while counter </title>

<script>
function question1()
{
let answer = prompt("What is 5 x 5");
if (answer == 25) {
alert("Correct");
}
else {
while (answer != 25) {
alert("Wrong answer");
answer = prompt("What is 5 x 5");
}
}
}
</script></head>
<body>
<input type = "button"
value = "What is 5 x 5"
onclick = "question1()">
</body></html>
which teams won?

<html><head><title> if else AND </title>

<script>
function teams()
{
let team1 = prompt("Did Team 1 Win
today");
let team2 = prompt("Did Team 2 Win
today");
if (team1 == "yes" && team2 == "yes")
{
alert("Team 1 and Team 2 Won
today");
}
else if (team1 == "no" && team2 ==
"no")
{
alert("Team 1 and Team 2 Lost
today");
}
else if (team1 == "yes" && team2 ==
"no") {
 alert("Team 1 won Team 2 Lost
today");
}
else if (team1 == "no" && team2 ==
"yes") {
alert("Team 1 Lost Team 2 Won
today");
}
else {
alert("Come on, tell me who won
today");
}
}
</script>
</head>
<body>
<input type = "button"
value = "Who Won Today"
onclick = "teams()">
</body></html>
show all records as JSON

<html><body>
<script>
let myRecord = [
{
name: "John",
height: "5 Feet 10 Inches",
weight: 140,
},
{
name: "Amy",
height: "6 Feet 4 Inches",
weight: 160,
} ];

function showIt()
{
let theDiv =
document.getElementById("theDisplay");
theDiv.innerHTML =
JSON.stringify(myRecord);
}
</script>
<button id = "b1" onclick="showIt()">
Show Records
</button>

<div id = "theDisplay"></div>
</body></html>
show Records for loop and filter

<html><body><script>
let myRecord = [
{
name: "Debra",
year: 1977
},
{
name: "Alison",
year: 1978
} ];

function showRecord()
{
let theDiv =
document.getElementById("theDisplay");
let output = ' ';
for(let i = 0; i < myRecord.length; i++)
{
if(myRecord[ i ].year == 1977) {
output += myRecord[ i ].name +
'<br>';
}
 }
theDiv.innerHTML = output;
}
</script>
<button id = "b1" onclick =
"showRecord( )"> Show </button>
<div id = "theDisplay"></div>
</body></html>
show Records for loop and filter

<html><body><script>
let myRecord = [
{
name: "Brandi",
year: 1980
},
{
name: "Melissa",
year: 1973
} ];

function showRecord(criteria)
{
let theDiv =
document.getElementById("theDisplay");
let output = ' ';
for(let i = 0; i < myRecord.length; i++)
{
if(myRecord[ i ].year < criteria) {
output += myRecord[ i ].name +
'<br>';
}
 }
theDiv.innerHTML = output;
}
</script>

<button id = "b1" onclick =

"showRecord(1977)"> Show </button>
<div id = "theDisplay"></div>
</body></html>
show Records from and too

<html><body><script>
let myRecord = [
{
name: "Jessica",
year: 1980
},
{
name: "Kelly",
year: 1974
} ];

function showRecord(criteria1, criteria2)

{
let theDiv =
document.getElementById("theDisplay");
let output = ' ';
for(let i = 0; i < myRecord.length; i++)
{
if(myRecord[ i ].year <= criteria1 &&
myRecord[ i ].year >= criteria2) {
output += myRecord[ i ].name +
'<br>';
 }
}
theDiv.innerHTML = output;
}
</script>
<button id = "b1" onclick =
"showRecord(1990, 1980)">Show
</button>
<div id = "theDisplay"></div>
</body></html>

<!-- Display Records for, Filter, <=, >=, &&

-->
show record

<html><body><script>
let myRecord = [
{
person: "Terry",
eyeColor: "Brown",
},
{
person: "Heidi",
eyeColor: "Blue",
}
];

function showIt()
{
let theDiv =
document.getElementById("display");
let output = '';
for(let i = 0; i < myRecord.length; i++)
{
output += myRecord[ i ].person + " has
";
 output += myRecord[ i ].eyeColor + "
color eyes";
output += '<br>';
}
theDiv.innerHTML = output;
}
</script>

<button id="b1"
onclick="showIt()">Insert</button>
<div id="display"></div>

</body>
</html>
hour and minutes
<html><head><script>
function dateTime() { //GET DATE TIME
let date = new Date();
return date;
}
function Hours() { //GET HOURS
let theHours = dateTime().getHours();
return theHours;
}

function Minutes() { //GET MINUTES

let theMinutes =
dateTime().getMinutes();
return theMinutes;
}

function displayIt(where, whichOne) {

//DISPLAY ANSWER
document.getElementById(where).innerHT
ML = whichOne;
}
</script></head><body>

<button onclick="displayIt('div1',
Hours());"> Hours </button>

<button onclick="displayIt('div2',
Minutes());"> Minutes </button>

<div id="div1"></div><div
id="div2"></div>

</body>

</html>
date month message
<html><head><script>
function months()
{
let date = new Date();
let month = date.getMonth();
// 0 to 11, 0 is jan , 11 is december
if(month == 0) { month = "January"; }
else if(month== 1) { month =
"February"; }
else if(month== 2) { month= "March"; }
else if(month== 3) { month= "April"; }
else if(month== 4) { month= "May"; }
else if(month== 5) { month= "June"; }
else if(month== 6) { month= "July"; }
else if(month== 7) { month= "August"; }
else if(month== 8) { month=
"September"; }
else if(month== 9) { month= "October";
}
else if(month== 10) { month=
"November"; }
else if(month== 11) { month=
"December"; }
 return month;
}

function messageMonth(){
let text;
if(months() == "March") { text = "March.
Spring time."; }
else if(months() == "April") { text =
"April. Getting Warm"; }
else if(months() == "May") { text = "May.
Getting nicer"; }
else if(months() == "June") { text =
"June. Summer time"; }
else if(months() == "July") { text = "July.
Warm Summer"; }
else if(months() == "August") { text =
"August. Summer"; }
else if(months() == "September") { text =
"September here"; }
else if(months() == "October") { text =
"October. Cooler"; }
else if(months() == "November") { text =
"November. "; }
else if(months() == "December") { text =
"December. time"; }
 else if(months() == "January") { text =
"January. Snowy"; }
else if(months() == "February") { text =
"February. Burrr"; }

document.getElementById("monthDisplay
").innerHTML = text;
}

</script></head>
<body onload="messageMonth();">

<div id="monthDisplay"></div>

</body></html>
hour message

<html><head><script>
function theHours()
{
let date = new Date();
let hours = date.getHours(); //0 to 23
return hours;
}
function messageHours()
{
let hoursMessage;
console.log(theHours());
if(theHours() >= 0 && theHours() < 6) {
hoursMessage = "Its Early Morning";
}
else if(theHours() >= 6 && theHours() <
12) {
hoursMessage = "Its Mid Morning"; }
else if(theHours() >= 12 && theHours() <
18) {
hoursMessage = "Its Afternoon"; }
else if(theHours() >= 18 && theHours()
<= 23) {
 hoursMessage = "Its night time";
}

document.getElementById("hoursDisplay"
).innerHTML = hoursMessage;
}
</script></head>

<body onload="messageHours();">

<div id="hoursDisplay"></div>

</body></html>
class simple
<html><body><script>
class Person
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
greet()
{
document.write("Name is " +
this.firstName + " " +
this.lastName);
}
}

let david = new

Person("David","Thompson");
david.greet();
</script>
</body></html>
class
<html><head><script>
class Person
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
greet(){
let theGreeting = "Howdy " +
this.firstName + " " + this.lastName;
return theGreeting;
}
bye(){
let theSalutation = "Bye " +
this.firstName + " " + this.lastName;
return theSalutation;
}
}

function displayIt(where, whichOne)

{
document.getElementById(where).innerHT
ML = whichOne;
}

let david = new

Person("David","Thompson");
</script><body>

<button onclick="displayIt('div1',
david.greet())">Hi</button>

<button onclick="displayIt('div2',
david.bye())">Bye</button>

<div id="div1"></div>
<div id="div2"></div>

</body></html>
class inheritance, extends

<html><head><script>
class Animal
{
constructor(kind, name, size, weight,
speed)
{
this.kind = kind;
this.name = name;
this.size = size;
this.weight = weight;
this.speed = speed + " mph";
}
eat() {
return 'eating';
}
saySpeed(){
return this.speed;
}
}
class Cat extends Animal
{
constructor(kind, name, size, weight,
speed, tailSize)
{
super(kind, name, size, weight, speed);
this.tailSize = tailSize;
}
meow(){
return 'meowing';
}
sayKind(){
return this.kind;
}
tailWag(){
return this.tailSize + ' tail wagging';
}
}

function show(where, whichOne)

{
document.getElementById(where).innerHT
ML = whichOne;
}
let felix = new Cat(
'tiger', //kind
'Felix', //name
'Medium', //size
'10.0', //weight
'80', //speed
'long'); //length

//make felix use the custom functions

felix.meow();
felix.eat();
felix.sayKind();
felix.tailWag();
felix.saySpeed();

</script>
</head>

<body>

<button onclick="show('display',
felix.meow())">Meow</button>

<button onclick="show('display',
felix.eat())">Eat </button>
<button onclick="show('display',
felix.sayKind())">Kind
</button>

<button onclick="show('display',
felix.tailWag())">Wag</button>

<button onclick="show('display',
felix.saySpeed())">Speed
</button>

<div id="display"></div>

</body></html>
class inheritance, extends person

<html><head><script>
class Person
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
greet(){
let theGreeting = "Howdy " +
this.firstName + " " + this.lastName;
return theGreeting;
}
bye() {
let theSalutation = "Bye " +
this.firstName + " " + this.lastName;
return theSalutation;
}
}
class Alien extends Person
{
constructor(firstName, lastName,
alienName)
{
super(firstName, lastName,
alienName);
this.alienName = alienName;
}
alienGreeting() {
let alienHi = "My name is not " +
this.firstName + " " +
this.lastName + ". " +
" My Real name is " +
this.alienName + ". " + " I am an alien
from another world.";
return alienHi;
}
}
function displayIt(where, whichOne)
{
document.getElementById(where).innerHT
ML = whichOne;
}
let superman = new Alien("Clark","Kent",
"Kal-El");

</script>
<body>

<button onclick="displayIt('div1',
superman.greet())">Greeting
</button>

<button onclick="displayIt('div2',
superman.bye())">Salutation
</button>

<button onclick="displayIt('div3',
superman.alienGreeting())">
Alien Greeting</button>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>
convert, f to c

<html><head><script>
function f2c(f)
{
let centigrade;
centigrade = 5/9 * (f - 32);
return centigrade;
}

function convertButton()
{
let inputCentigrade =
document.getElementById("inputDegrees"
).value;
inputCentigrade = f2c(inputCentigrade);

document.getElementById("answer").text
Content = inputCentigrade;
}
</script></head>
<body>
<input type="text" id="inputDegrees"
value = "0.0">

<input type="button" value="C to F"

onclick ="convertButton();">

<br>

<text area id="answer"></text>

</body>
</html>
class simple, and this

<html><head><title> write, class, this

</title>
<script>
class ourText
{
ourMessage(){
return "Hi Everyone";
}
showText() {
document.write(this.ourMessage());
}
}

let somethingToWrite = new ourText();

</script>
</head>

<body
onload="somethingToWrite.showText();">
</body></html>
keyboard control

<html><head>
<title>Keyboard Control</title>
<script>
function whenLoaded()
{
window.addEventListener("keydown",
whichKeyPressed, false);
}

function whichKeyPressed(event)
{
if(event.keyCode === 112)
{
alert("F1 Key pressed");
}
else if(event.keyCode === 27)
{
alert("Escape Key pressed");
}
else if(event.keyCode === 32)
{
alert("Spacebar pressed");
 }
else if(event.keyCode === 65)
{
alert("The Letter a, was pressed");
}
}
</script></head>

<body onload="whenLoaded()">

Press F1, Escape, Spacebar or the Letter

A
</body>
</html>
keyboard, move text

<html><head><body>
<script>
let textToMove;
function whenLoads()
{
textToMove =
document.getElementById("theDiv");
textToMove.style.position='relative';
textToMove.style.left='0px';
textToMove.style.top='50px';
}
function moveLeft()
{
textToMove.style.left =
parseInt(textToMove.style.left)-8 + 'px';
}
function moveRight( )
{
textToMove.style.left =
parseInt(textToMove.style.left)+8 + 'px';
}
function moveUp()
{
textToMove.style.top =
parseInt(textToMove.style.top)-8 + 'px';
}
function moveDown()
{
textToMove.style.top =
parseInt(textToMove.style.top)+8 +
'px';
}
</script></head>

<body onload="whenLoads( );">

<center><br>
<input type="button" id="leftButton"
value="Left"

onmousedown="moveLeft( );"><
/button><br>

<input type="button" id="rightButton"

value="Right"

onmousedown="moveRight( );"><
/button><br>
<input type="button" id="upButton"
value="Up"
onmousedown="moveUp( );"></button>
<br>

<input type="button" id="downButton"

value="Down"
onmousedown="moveDown( );"></button>
<br>

<div id="theDiv">THIS TEXT MOVES</div>

</center>

</body>
</html>
saved as timeGetTime.js

function theHours()
{
let date = new Date();
let hours = date.getHours();
//0 to 23

if(hours == 0)
{
hours = 12; //am
}
else if(hours == 1)
{
hours = 1; //am
}
else if(hours == 2)
{
hours = 2; //am
}
else if(hours == 3)
{
hours = 3; //am
}
else if(hours == 4)
{
hours = 4; //am
}
else if(hours == 5)
{
hours = 5; //am
}
else if(hours == 6)
{
hours = 6; //am
}
else if(hours == 7)
{
hours = 7; //am
}
else if (hours == 8)
{
hours = 8; //am
}
else if(hours == 9)
{
hours = 9; //am
}
else if(hours == 10)
{
 hours = 10; //am
}
else if(hours == 11)
{
hours = 11; //am
}
else if(hours == 12)
{
hours = 12; //pm
}
else if(hours == 13)
{
hours = 1; //pm
}
else if(hours == 14)
{
hours = 2; //pm
}
else if (hours == 15)
{
hours = 3; //pm
}
else if (hours == 16)
{
hours = 4; //pm
}
else if (hours == 17)
{
hours = 5; //pm
}
else if (hours == 18)
{
hours = 6; //pm
}
else if(hours == 19)
{
hours = 7; //pm
}
else if(hours == 20)
{
hours = 8; //pm
}
else if (hours == 21)
{
hours = 9; //pm
}
else if (hours == 22)
{
hours = 10; //pm
}
else if (hours == 23)
{
 hours = 11; //pm
}
return hours;
}
function theMinutes()
{
let date = new Date();
let minutes = date.getMinutes();
if(minutes==0)
{
return minutes = "00";
}
else if(minutes == 1)
{
return minutes = "01";
}
else if(minutes == 2)
{
return minutes = "02";
}
else if(minutes == 3)
{
return minutes = "03";
}
else if(minutes == 4)
{
return minutes = "04";
}
else if(minutes == 5)
{
return minutes = "05";
}
else if(minutes == 6)
{
return minutes = "06";
}
else if(minutes == 7)
{
return minutes = "07";
}
else if(minutes == 8)
{
return minutes = "08";
}
else if(minutes == 9)
{
return minutes = "09";
}
 return minutes;
}
function amOrpm()
{
let date = new Date();
let hours = date.getHours(); //0 to 23
let halfOfDay;
if(hours == 0)
{
halfOfDay = "am";
}
else if(hours == 1)
{
halfOfDay = "am";
}
else if(hours == 2)
{
halfOfDay = "am";
}
else if(hours == 3)
{
halfOfDay = "am";
}
else if(hours == 4)
{
 halfOfDay = "am";
}
else if(hours == 5)
{
halfOfDay = "am";
}
else if(hours == 6)
{
halfOfDay = "am";
}
else if(hours == 7)
{
halfOfDay = "am";
}
else if(hours == 8)
{
halfOfDay = "am";
}
else if(hours == 9)
{
halfOfDay = "am";
}
else if (hours == 10)
{
halfOfDay = "am";
}
else if(hours == 11)
{
halfOfDay = "am";
}
else if(hours == 12)
{
halfOfDay = "pm";
}
else if(hours == 13)
{
halfOfDay = "pm";
}
else if(hours == 14)
{
halfOfDay = "pm";
}
else if(hours == 15)
{
halfOfDay = "pm";
}
else if(hours == 16)
{
halfOfDay = "pm";
}
else if(hours == 17)
{
 halfOfDay = "pm";
}
else if(hours == 18)
{
halfOfDay = "pm";
}
else if(hours == 19)
{
halfOfDay = "pm";
}
else if(hours ==20)
{
halfOfDay = "pm";
}
else if(hours == 21)
{
halfOfDay = "pm";
}
else if (hours == 22)
{
halfOfDay = "pm";
}
else if (hours == 23)
{
halfOfDay = "pm";
}
 return halfOfDay;
}
function theSeconds()
{
let date = new Date();
let seconds = date.getSeconds();
if(seconds==0)
{
return seconds = "00";
}
else if(seconds == 1)
{
return seconds = "01";
}
else if(seconds == 2)
{
return seconds = "02";
}
else if(seconds == 3)
{
return seconds = "03";
}
else if(seconds == 4)
{
return seconds = "04";
 }
else if(seconds == 5)
{
return seconds = "05";
}
else if(seconds == 6)
{
return seconds = "06";
}
else if(seconds == 7)
{
return seconds = "07";
}
else if(seconds == 8)
{
return seconds = "08";
}
else if(seconds == 9)
{
return seconds = "09";
}
return seconds;
}
function timeKeepGettingTime()
{
 timeFunctionUpdates();
t=
setInterval('timeFunctionUpdates()',500);
}

function timeFunctionUpdates()
{
document.getElementById("showTime").in
nerHTML = theHours() + ":" + theMinutes()
+ ":" + theSeconds() + " " + amOrpm();
}

//we save this file as timeGetTime.js in our js

folder.

//The next pages uses this script.

Keep Getting Time uses
timeGetTime.js

<html>

<body style="background-color:rgb(140,
192, 192);">

<script
src="../js/timeGetTime.js"></script>

<button
onclick="timeKeepGettingTime();">Time</
button>

<div id="showTime" style="font-

size:100pt">Time</div>

</body>
</html>

<!-- save as timeGetTime.html in our html

folder of ourProject folder. -->
save as timeMessage.js
function theHours()
{
let date = new Date();
let hours = date.getHours(); //0 to 23
return hours;
}

function messageHours()
{
//console.log(theHours());
if(theHours() >= 0 && theHours() < 6) {
return "It's Early Morning.";
}
else if(theHours() >= 6 && theHours() <
12) {
return "It's Mid Morning.";
}
else if(theHours() >= 12 && theHours() <
18) {
return "It's Afternoon.";
}
else if(theHours() >= 18 && theHours()
<= 23) {
 return "It's night time.";
}
}

function displayTimeMessage()
{

document.getElementById("hoursDisplay"
).innerHTML = messageHours();
}

//we save this file as timeMessage.js in our

js folder.

//The next pages uses this script.

time of day message, uses
timeMessage.js
<html>
<body style="background-color:rgb(140,
192, 192);">
<script
src="../js/timeMessage.js"></script>

<button
onclick="displayTimeMessage();">Time
Message</button>

<div id="hoursDisplay" style="font-

size:100pt">Time Message</div>

</body>
</html>

<!-- save as timeMessage.html in our html

folder of ourProject folder. -->
 For More Tutorials:
CollegeOfScripting.weebly.com

CollegeOfScripting.wordpress.com

Youtube.com/ScriptingCollege

Github.com/ChristopherTopalian
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.
www.CollegeOfScripting.weebly.com