JavaScript Bookmarklet Advanced Programming by Christopher Topalian

ALL RIGHTS RESERVED Copyright 2020-2021
Dedicated
to
God the Father
"TECHNOLOGY BEYOND YOUR BELIEF STARK."
Javascript is an incredibly powerful language.
Mastering Javascript is an infinite superpower.
This is the key to victory Stark. Are you ready?

JavaScript
Bookmarklet
Advanced
Programming
by
Christopher Topalian
Copyright 2020-2021
All Rights Reserved
-
Hey Tony.
Tony?
They're on their way!
Table of Contents
Table of Contents
Where to Place Our Code.............................................................................................................11
Type the following Code in the Web Browser CONSOLE.................................................12
This is the Result of Our Code...................................................................................................13
Paste Code Into Web Browser Console..................................................................................14
This is the Result of Our Code...................................................................................................15
Web Browser Console or Bookmarks?...................................................................................17
Edit Our Bookmark to Add Javascript....................................................................................19
We Type Our Javascript Code in the Location field of our Bookmark.......................20
We Type this Code in the Location Field...............................................................................20
Activating Our Bookmarklet......................................................................................................21
Why do we make a Bookmark?...............................................................................................22
Paste Code Into the Bookmark.................................................................................................23
Adding Comments........................................................................................................................25
prompt, if statement, toLowerCase, alert, ==....................................................................27
if diagram.........................................................................................................................................28
if diagram with a test condition..............................................................................................29
Prompt, if else and toLowerCase ==.......................................................................................31
Prompt, if else and toLowerCase !=........................................................................................32
Prompt if else if, less than, greater than.............................................................................33
Prompt with if else if, do while loop......................................................................................35
do while loop diagram.................................................................................................................36
Prompt with if statement, while loop...................................................................................37
while loop diagram.......................................................................................................................38
Prompt, for loop............................................................................................................................39
for loop diagram...........................................................................................................................40
Prompt, for loop with break......................................................................................................41
VIDEO Pause...................................................................................................................................44
YouTube API VIDEO Pause.........................................................................................................46
VIDEO Play.......................................................................................................................................48
YouTube API VIDEO Play............................................................................................................49
VIDEO Back 2 Seconds..................................................................................................................51
VIDEO Forward 2 Seconds.........................................................................................................52
VIDEO Forward 2 Seconds – Keep Activating.....................................................................53
VIDEO currentTime.......................................................................................................................55
VIDEO currentTime with round...............................................................................................56
VIDEO currentTime with substring........................................................................................57
VIDEO currentTime to 60 seconds.........................................................................................58
VIDEO duration...............................................................................................................................59
VIDEO loop.......................................................................................................................................60
VIDEO muted....................................................................................................................................61
VIDEO unmuted.............................................................................................................................62
VIDEO currentSrc..........................................................................................................................63
VIDEO Volume – 0.0 Mute, 1.0 Full.........................................................................................64
VIDEO Volume – Get Volume Level........................................................................................65
VIDEO Speed to 0.5.......................................................................................................................66
VIDEO Speed Custom...................................................................................................................67
Object – Display Object Data with Alert...............................................................................69
Object – prompt.............................................................................................................................70
Object – prompt, if they don’t answer both..........................................................................71
Object – class constructor, method, return and createElement..................................73
Object – class inheritance..........................................................................................................75
New Window and HTML String................................................................................................79
New Window, HTML String, alert............................................................................................80
New Window, HTML String, alert,style..................................................................................81
New Window, HTML String, alert, style, js in the script tag..........................................83
New Window Tab, Go To URL, New Tab................................................................................86
New Window Go To URL in a New Window with Size......................................................87
New Window Go To URL in a New Window with Size and position............................88
New Window Go To Same URL as Current Window.........................................................89
createElement, append, Make a Paragraph........................................................................90
Youtube - GET URL, TITLE, DESCRIPTION, LIKES, DATE...................................................92
Create a Video Game Player on Any Webpage!.................................................................95
createElement, append, Make a div, style with JS..........................................................100
createElement, append, Make a div, style, url new window.......................................103
createElement, append, Make a div, style with css, url new window.....................105
createElement, append, div, css, url, window, array of objects.................................107
createElement, append, div, url, window, array of objects, show all........................110
createElement, append, make a Button...............................................................................113
createElement, append a Button with Style background, text color........................115
createElement, append, Button, Style, color, position, layer.......................................117
createElement and append, div...............................................................................................119
createElement, append, get link text, create div.............................................................120
createElement, append, get link text, button, click delete...........................................122
createElement, append, Button, Get URL of the Page you are on.............................124
createElement, append, Button, Style, color, pos, layer, VIDEO pause...................126
createElement, append, VIDEO, Play, Pause Buttons....................................................128
createElement Buttons VIDEO, play, pause, back, forward, Mute, UnMute..........130
createElement div, from object data....................................................................................137
createElement div, from object data, dot syntax of function.....................................139
createElement div, from object data, dot syntax of function......................................141
createElement div, class inheritance, dot syntax of function, pet............................143
Get Specific Button onclick value..........................................................................................147
Style All Paragraphs on Page.................................................................................................149
Number of Buttons on a Page................................................................................................150
Number of Links on a Page.......................................................................................................151
Show the InnerHTML of each Paragraph on a Page.......................................................152
Show the InnerHTML of each Paragraph with Style......................................................153
Show the href of each Link on Page.....................................................................................155
Show the href of each Link with Style.................................................................................156
Show All Image URLS.................................................................................................................157
Show the img tag with Style...................................................................................................158
Show the Buttons id’s on a Page...........................................................................................159
Show the Links id’s on a Page.................................................................................................160
Show the H1’s on a Page.............................................................................................................161
Show elements of a certain class on a Website..............................................................162
Inspecting an Element...............................................................................................................164
Timer – After 5 Seconds, Trigger function one time......................................................166
Timer – Every 5 Seconds, Trigger function........................................................................167
Timer – Every 1 Second, COUNT UP......................................................................................168
Timer – Every 1 Second, COUNT DOWN, clearInterval...................................................170
Timer – Every 1 Second, Trigger Military Time.................................................................172
Calculate DISTANCE....................................................................................................................175
Multiplied by the Time in Hours.............................................................................................175
Calculate SPEED...........................................................................................................................176
Calculate TIME..............................................................................................................................177
Calculate Storm Distance.........................................................................................................178
Calculate PERCENTAGE of MINUTES of an HOUR............................................................179
Calculate SALES TAX and TOTAL PRICE..............................................................................180
Calculate AVERAGE of 3 Numbers........................................................................................182
Calculate MEDIAN of TWO NUMBERS..................................................................................183
Calculate AREA of a SQUARE..................................................................................................184
Calculate PERIMETER of a SQUARE......................................................................................185
Convert FRACTION to DECIMAL..............................................................................................186
Convert FRACTION to PERCENT..............................................................................................187
Convert PERCENT to DECIMAL...............................................................................................188
Convert DECIMAL to PERCENT...............................................................................................189
Convert METERS to INCHES.....................................................................................................190
Convert INCHES to METERS......................................................................................................191
Convert METERS to FEET..........................................................................................................192
Convert FEET to METERS..........................................................................................................193
Convert FEET and INCHES to METERS.................................................................................194
Convert MILES to FEET..............................................................................................................195
Convert FEET to MILES..............................................................................................................196
Convert KILOMETERS to MILES..............................................................................................197
Convert MILES to KILOMETERS..............................................................................................198
Convert HOURS to MINUTES....................................................................................................199
Convert MINUTES to HOURS..................................................................................................200
Convert SECONDS to DAYS......................................................................................................201
Convert SECONDS to HOURS..................................................................................................202
Convert HOURS to SECONDS..................................................................................................203
Convert FAHRENHEIT to CELSIUS.........................................................................................204
return statement........................................................................................................................205
Console Log, Stringify All Records.......................................................................................206
Console Log, Stringify One Record......................................................................................208
Display One Record using innerHTML.................................................................................210
Display All Records, innerHTML.............................................................................................212
for loop ALL Records..................................................................................................................214
for loop ALL Records, Stringify..............................................................................................216
for loop ALL Records, Stringify, List.....................................................................................218
for loop ALL Records, Select Items, Spaces, New Line..................................................221
Filter for Year using if statement.........................................................................................224
for let in x, indexOf, Searching for Name...........................................................................227
Date and Time Simple...............................................................................................................230
Date Object - today's date and time......................................................................................231
Function Using return, show time........................................................................................233
Functions, return, Display Time to One Div......................................................................235
Get Day and Show Message....................................................................................................237
Get Month and Show Message..............................................................................................242
Get Hours and Show Message...............................................................................................247
Date and Time - Complete Time Code Script....................................................................249
We Have Only One Year Before the
Main Ship Arrives. When it does, it will
be total war on the entire planet!
We must prepare humanity. We need
an army of master programmers to
design a drone response.
Hey Tony, Nice to see you too buddy.
Where to Place Our Code
We Type our Code in the Console of the Web Browser
1. Open ANY Web Browser

2. then Press F12
This opens your Web Browser CONSOLE
This is where we will Type our Code!

Type the following Code
Type the following Code in the Web
Browser CONSOLE
javascript: alert("Hi");
We Type this code in the

Web Browser Console
then Press Enter button
A Message Box will Appear,

as shown on the next page =>
This is the Result of Our Code
Hi Everyone
OK
This is an alert message box.

As you can see above, we typed our code and
hit the enter button and it triggered
an alert box to display the message “Hi”.
We can display any message that

we want in the alert box.
We can also display variables, as
shown in the next tutorial.
Paste Code Into Web Browser Console
We can Type our Code in a Script editor, &
then PASTE the Code in the Web Browser
Console
javascript:(
function()
{
function ourFunction(name)
{
name = prompt("Enter Name");
return "Hi " + name;
}
alert(ourFunction());
})();
Select All of the Code in our Script Editor and then

press Ctrl + C to COPY.
Then Paste the Code in the Web Browser Console
using Ctrl + V to PASTE.
A Message Box will appear that says Hi and the
person's name that they entered.
This is the Result of Our Code
Enter Name
Chris Topalian
OK Cancel
name = prompt("Enter Name";

The function named prompt is assigned to a
variable we call name.
The name variable is given a value when the
person types their name in the text area of the
prompt box.
When the person hits the OK button, it will Greet
them by name using an alert message box.
Hi Chris Topalian
OK
JAVASCRIPT...LOADING...
JARVIS SYSTEMS
ONLINE...READY...
ADVANCED INTELLIGENCE
SYSTEMS ACTIVATED.
Web Browser Console or Bookmarks?
Bookmarklets VS Web Browser Console to
Activate our Code.
Activating Code in the Web Browser Console is very useful
for quickly and easily testing code by Copying and Pasting
from a Text File.
But, Activating Code in a Bookmarklet enables us to trigger

the code with the click of the left mouse button, instead of
having to copy and paste.
Either way is fine.
Either way, we have modified the Browser!
Some people may find it easier to keep all of their code in a

text file and then paste it in the Web Browser Console when
needed, but other people might enjoy activating their code
using Bookmarks.
Let’s learn how to trigger our code in the Location Field of a

Bookmark. This is called a BOOKMARKLET, and we make it
by placing our Javascript code in the location field of a
Bookmark that we create.
The next pages shows you step by step, how to put your
Javascript code in a Bookmark, but remember, you can keep
using the Web Browser Console method, if that is more
enjoyable for you. Happy Scripting!
How to Make Bookmarklets
We Start by Making a Bookmark,
which will contain our Javascript Code
in the Location Field.
Left Click the Bookmarks Menu
Bookmark This Page Ctrl + D
Choose Bookmark This Page

OR
Left Click the STAR icon
OR
Shortcut is Control + D
We should now have

a Bookmark created.
Edit Our Bookmark to Add Javascript
Right Click on
the Bookmark
we made
Properties
Left Click on
Properties
We open the Properties of our Bookmark

to Edit it.
Once the Bookmark is open, we will see
the Location Field, where will will place
our Javascript Code, as shown on the
next tutorial page =>
We Type Our Javascript Code in the
Location field of our Bookmark
Location
We Type this Code in the

Location Field
then Press Save button
Activating Our Bookmarklet
Hi
OK
We USE our Bookmarklet by

Left Clicking on ourBookmarklet
on the Browser Toolbar.
This will activate an ALERT dialog box,
with the text message, “Hi”
Why do we make a Bookmark?
Our JavaScript code will be pasted in the location field of
a Bookmark. The bookmark CONTAINS our Javascript
code and makes triggering the code easy.
Whenver we click on the boomark, it will trigger our

Javascript code!
But, we don’t do the typing of our code in the location

field, because it would be tough to use a one line
location field element.
So instead, we do our coding work in a modern text

editor, such as Visual Code, or Atom or Brackets and
then we just copy our code from the script editor and
Paste in into the location field of the Bookmark we
create.
When we want to edit our Bookmarklet, we change the

code in our Script editor and then paste it again into the
location field of our Bookmark.
It would be nice if in the future, Browsers allowed a

better way, but for now, this is what we do to modify
the browser using Bookmarklets and Javascript.
Paste Code Into the Bookmark
We can Type our Code in a Script editor, &
then PASTE the Code in the Web Browser
Console
javascript:(
function()
{
{
}
} ) ( );
Select All of the Code in our Script Editor
and then press Ctrl + C to COPY.
Then Paste the Code in the Location Field
using Ctrl + V to PASTE.
A Message Box will appear that says Hi
and the person's name that they entered.
JAVASCRIPT IS THE MOST SPOKEN
LANGUAGE IN THE UNIVERSE STARK.
Why are you doing this Thanos?
Why are you helping us now?
Gamora!
Adding Comments
Comments are added using /* */
javascript:(
function()
{
{
/* alert(name); */
}
} ) ( );
We do NOT use // to make comments!
Instead, we use /* */ to make comments.
By using /* */ any code in between will be

commented out, whilst the code before and after
will NOT be effected.
THE FOUNDATION OF THE UNIVERSE
IS LOGICAL STARK.
JAVASCRIPT CAN ACCESS AND EXPRESS
THE SOURCE OF ALL LOGIC USING MY DEVICE.
IT IS MORE POWERFUL THAN ANY WEAPON
ON EARTH OR SATURN.
THE DESIGN IS READY STARK. YOUR TEAM HAS
ONE YEAR BEFORE THEIR SHIP ARRIVES.
prompt, if statement, toLowerCase,
alert, ==
== Equal To
javascript:(
function()
{
{
name = prompt("Enter
Name").toLowerCase();
if(name == "john")
{
alert("Hi " + name);
}
}
ourFunction();
} ) ( );
This alert message will trigger if the person types the
name John John john JoHN JOHN etc.
But, if the person uses spaces, it will NOT trigger.
Jo hn, or JOH N or J O H N, it will NOT trigger.
if diagram
start
test
FALSE
TRUE
body
Exit
if diagram with a test condition
if
FALSE
name == "john"
TRUE
alert("Hi " + name);
Exit
Tony, you're asking me to teach
300 million people to become master
programmers in less than one year to
program drone armies to defeat who?
GALACTUS!
He plans on extermination!
Without the drone army, Earth Ends
in one year, when his ship arrives.
Prompt, if else and toLowerCase ==
== EQUAL TO
javascript:(
function()
{
{
if(name == "john")
{
return "Hi John";
}
else
{
return "Hi " + name + " Where is
John";
}
}
} ) ( );
Prompt, if else and toLowerCase !=
!= NOT EQUAL TO
javascript:(
function()
{
{
if(name != "john")
{
return "Hi " + name + " Where is
John";
}
else
{
return "Hi John";
}
}
} ) ( );
Prompt if else if, less than, greater than
< Less Than, > Greater Than
javascript:(
function()
{
function ourFunction(question) {
question = prompt("What is 5 x 5?");
if(question < 25)
{
return "A bit higher";
}
else if(question > 25)
{
return "A bit lower";
}
else
{
return "Correct";
}
}
} ) ( );
JJARVIS: SEARCH FOR HOW GALACTUS
LOCATED THE ANTI-LIFE EQUATION.
Jarvis simulation result:
"Darkseid"
THAT DOES NOT SOUND LIKE
A FRIENDLY FELLOW.
Prompt with if else if, do while loop
< LESS THAN > GREATER THAN != NOT EQUAL TO
javascript:(
function()
{
function ourFunction(question)
{
let message;
do
{
question = prompt("What is 5 x 5?");
if(question < 25) {
message = "A bit higher";
}
else if(question > 25) {
message = "A bit lower";
}
else {
message = "Correct";
}
alert(message);
} while(question!=25);
}
ourFunction();
} ) ( );
do while loop diagram
start
body
FALSE
Exit test
TRUE
Prompt with if statement, while
loop
< LESS THAN
javascript:(
function()
{
function ourFunction(players)
{
players = prompt("Enter Number of
Players");
let i = 0;
while(i < players)
{
document.write("Player " + i + ", ");
i++;
}
}
ourFunction();
} ) ( );
while loop diagram
start
FALSE
Exit test
TRUE
body
Prompt, for loop
We use a for loop to display how many
players the user chose
javascript:(
function()
{
{
players = prompt("Enter Number
of Players");
let i;
for(i=0; i < players; i++)
{
document.write("Player " + i +
", ");
}
}
ourFunction();
} ) ( );
for loop diagram
Start number
FALSE
Exit test
TRUE
body
increment++
Prompt, for loop with break
We use a for loop to display how many
players the user chose and use break if it is
not enough players chosen
javascript:(
function()
{
{
players = prompt("Enter Number
of Players");
let i;
for(i=0; i < players; i++)

{
if(players <= 3)
{
alert(players + " people is not
enough");
break;
}
document.write("Player " + i +", ");
}
}
ourFunction();
} ) ( );
EITHER WE WIN THIS WAR
OR HUMANITY IS FOREVER LOST.
JAVASCRIPT IS KEY TO OUR VICTORY!
300 Million master programmers will
combat swarms of billions of invading
drone bots, coming from their main ship.
Stark has to do his part perfect 100%!
There is a trillion bot army on the way!
VIDEO Pause
Pauses the Video.
javascript:(
function()
{
function ourFunction()
{
let theVideo =
document.querySelectorAll('video')
[0];
theVideo.pause();
}
ourFunction();
} ( ) );
When Activated, this Bookmarklet will

PAUSE the first video found on the page.
This Bookmarklet also works for YouTube

and other major Video Websites as well.
We start by first selecting the 0 video on
the page.
We then use the pause() function of HTML
to pause the video.
On the next page, I show you how to

accomplish this same task, but by using
the YouTube API function instead. Either
way is fine to use. I am showing you both
ways for completeness.
YouTube API VIDEO Pause
Plays ONLY YouTube Video using the
YouTube Api function.
javascript:(
function()
{
{
let theVideo =
document.getElementById("movie_pl
ayer");
theVideo.pauseVideo();
}
ourFunction();
} ( ) );
While on YouTube, when Activated, this

Bookmarklet will PAUSE the video.
Remember, that this method shown above
is from the YouTube API.
If you want to control Video from other
websites, you use the Bookmarklet prior,
which utilizes querySelectorAll instead of
getting the movie_player by id.
Remember that pauseVideo() is a function

from the YouTube API, NOT Javascript.
https://developers.google.com/youtube/
v3/docs
VIDEO Play
Plays the Video
javascript:(
function()
{
{
let theVideo =
document.querySelectorAll('vide
o')[0];
theVideo.play();
}
ourFunction();
} ( ) );
YouTube API VIDEO Play
Plays ONLY YouTube Video using the
YouTube Api function
javascript:(
function()
{
{
let theVideo =
document.getElementById("movie
_player");
theVideo.playVideo();
}
ourFunction();
} ( ) );
While on YouTube, when Activated, this

Bookmarklet will PLAY the video.
Remember, that this method shown
above is from the YouTube API.
If you want to control Video from other
websites, you use the Bookmarklet prior,
which utilizes querySelectorAll instead
of getting the movie_player by id.
Remember that pauseVideo() is a

function from the YouTube API, NOT
Javascript.
https://developers.google.com/youtube/
v3/docs
VIDEO Back 2 Seconds
Skips the Video back 2 seconds
javascript:(
function()
{
{
let theTime =
document.querySelector('video').c
urrentTime += -2;
}
ourFunction();
} ( ) );
VIDEO Forward 2 Seconds
Skips the Video forward 2 seconds
javascript:(
function()
{
{
let theTime =
document.querySelector('video').c
urrentTime += 2;
}
ourFunction();
} ( ) );
VIDEO Forward 2 Seconds – Keep
Activating
Skips the YouTube video Forward 2 seconds
repeatedly
javascript:(
function()
{
{
let theTime =
document.querySelector('video')
.currentTime += 2;
}
setInterval(ourFunction, 1000);
} ( ) );
-
THE TIME HAS COME TO DEPLOY THE

ULTIMATE WORLD PROTECTOR.
ACTIVATE JAVASCRIPT PROGRAM
#24828
Jarvis: "Are you sure Sir?
There is no recalling that program?"
Yes, Jarvis. The world needs it now.

VIDEO currentTime
Shows the currentTime of the YouTube video
javascript:(
function()
{
{
let theTime =
.currentTime;
alert(theTime);
}
ourFunction();
} ( ) );
VIDEO currentTime with round
Shows the rounded version of the
currentTime of the YouTube video
javascript:(
function()
{
{
let theTime =
.currentTime;
alert(Math.round(theTime));
}
ourFunction();
} ( ) );
VIDEO currentTime with substring
Shows the shorter version of the currentTime
of the YouTube video
javascript:(
function()
{
{
let theTime =
document.querySelector('video').curr
entTime;
let theMessage = String(theTime);

theMessage=
theMessage.substring(0,4);
alert(theMessage);
}
ourFunction();
} ( ) );
VIDEO currentTime to 60 seconds
Sets the currentTime of the YouTube video
to 60 seconds (1:00)
javascript:(
function()
{
{
.currentTime = 60;
}
ourFunction();
} ( ) );
VIDEO duration
Shows the total length in seconds of the
YouTube video
javascript:(
function()
{
{
let theDuration =
.duration;
alert(theDuration);
}
ourFunction();
} ( ) );
VIDEO loop
Sets the Loop value to true of the
YouTube video.
javascript:(
function()
{
{
document.querySelector('video').loop
= true;
}
ourFunction();
} ( ) );
VIDEO muted
Mutes the volume of the YouTube video.
To un-mute the video, we can make
muted=false;
javascript:(
function()
{
{
document.querySelector('vide
o').muted = true;
}
ourFunction();
} ( ) );
VIDEO unmuted
Mutes the volume of the YouTube video.
To un-mute the video, we can make
muted=false;
javascript:(
function()
{
{
o').muted = false;
}
ourFunction();
} ( ) );
VIDEO currentSrc
Shows the blob URL of the YouTube video
javascript:(
function()
{
{
let theSrc =
o').currentSrc;
alert(theSrc);
}
ourFunction();
} ( ) );
VIDEO Volume – 0.0 Mute, 1.0 Full
Set the Volume of the YouTube video from
0.0 to 1.0
javascript:(
function()
{
{
document.querySelector('vid
eo').volume = 1.0;
}
ourFunction();
} ( ) );
VIDEO Volume – Get Volume Level
Gets the current Volume level of the YouTube
video. Volume level ranges from 0.0 to 1.0
javascript:(
function()
{
{
let theSrc =
o').volume;
alert(theSrc);
}
ourFunction();
} ( ) );
VIDEO Speed to 0.5
Set the speed value of the YouTube video
YouTube speeds are
0.0, 0.25, 0.5, 0.75, 1.00, 1.25, 1.5, 1.75, 2.00
But we can enter 20.0 if we like or 0.01
javascript:(
function()
{
{
eo').playbackRate = 0.5;
}
ourFunction();
} ( ) );
VIDEO Speed Custom
User Enters a Speed for the YouTube
Video to Play
javascript:(
function()
{
{
eo').playbackRate=
parseFloat(prompt('Enter a
Speed','0.50'));
}
ourFunction();
} ( ) );
THERE'S ONLY ONE YEAR BEFORE THE
MOTHERSHIP ARRIVES.
WE HAVE TO HAVE THE ARMY OF

DRONES READY BEFORE THEN!
WITH JAVASCRIPT BOTS RUNNING FULL

TIME, WE MIGHT STAND A CHANCE TO
FEND OFF THE INCOMING WAVES.
Object – Display Object Data with
Alert
Display Object Data
javascript:(
function()
{
let myPet =
{
name: "Tassey",
age: "20"
};
{
alert(myPet.name + " " +
myPet.age);
}
ourFunction();
} ) ( );
Object – prompt
User Enters the Data of an Object,
which is then displayed
javascript:(
function()
{
let myPet =
{
name: "Tassey the Turtle",
age: "20"
};
{
myPet.name = prompt("Enter Name");
myPet.age = prompt("Enter Age");
alert(myPet.name + " " + myPet.age);
}
ourFunction();
})();
Object – prompt, if they don’t
answer both
User Enters the Data of an Object,
which is then displayed, but if the User
doesn’t answer BOTH, a special message is
displayed
javascript:(
function()
{
let myPet =
{
name: "Tassey",
age: "20"
};
{
myPet.name = prompt("Enter
Name");
myPet.age = prompt("Enter
Age", "");
if (myPet.name == null ||
myPet.age ==null)
{
alert('Why not answer
both?');
}
alert(myPet.name + " " +

myPet.age);
}
ourFunction();
} ) ( );
Object – class constructor, method,
return and createElement
Create a class with properties and a method
javascript:(
function()
{
class Person
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
greet()
{
return "Good to meet you " +
this.firstName + " " + this.lastName;
}
}
let david = new
Person("David","Thompson");
let ourDiv =
document.createElement("div");
ourDiv.innerHTML = david.greet() +
'<br>' + "Worker";
ourDiv.id = "theDiv";
document.body.append(ourDiv);
ourDiv.style.position = "absolute";
ourDiv.style.top = "100px";
ourDiv.style.left ="100px";
/* ourDiv.style.width = "100px"; */
/* ourDiv.style.height = "100px"; */
ourDiv.style.padding = "2px 2px 2px
2px";
ourDiv.style.background = "tan";
ourDiv.style.color = "yellow";
ourDiv.style.zIndex ="1000";
ourDiv.onclick= function(){ let
divRef =
document.getElementById("theDiv");
divRef.remove();};
} ) ( );
Object – class inheritance
Class Inheritance allows us to make
instances of our class easily from a
blueprint, which we can add to anytime.
javascript:(function()
{
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()
{
console.log('eating');
return 'eating';
}
saySpeed()
{
console.log(this.speed);
return this.speed;
}
}
class Cat extends Animal

{
constructor(kind, name, size, weight,
speed, tailSize)
{
super(kind, name, size, weight,
speed);
this.tailSize = tailSize;
}
meow()
{
console.log('meowing');
return 'meowing';
}
sayKind()
{
console.log(this.kind);
return this.kind;
}
tailWag()
{
console.log(this.tailSize + ' tail
wagging');
return this.tailSize + ' tail wagging';
}
}
let felix = new Cat(

'tiger',
'Felix',
'Medium',
'10.0',
'80',
'long');
let ourDiv =
ourDiv.innerHTML = felix.meow() +
'<br>' + felix.eat() + '<br>' + felix.say
Kind()+ '<br>' + felix.tailWag()+ '<br>' +

felix.saySpeed();
2px";
ourDiv.onclick= function(){ let divRef =
divRef.remove();};
} ) ( );
New Window and HTML String
Make a New Window that has custom
content that we display as a string variable
javascript:(
function()
{
{
let html =
'<html><body><div>hi</div></body
></html>';
let ourWindow =
window.open("about:blank", "",
"_blank");
ourWindow.document.write(html);
}
ourFunction();
} ) ( );
New Window, HTML String, alert
and that has functioning javascript
javascript:(
function()
{
{
let ourHTML = '<html><body>';
ourHTML += '<div
onclick=javascript:alert("Hi");>Click
Me</div>';
ourHTML +='</body></html>';
let ourWindow =
"_blank");
ourWindow.document.write(ourHTML);
}
ourFunction();
} ) ( );
New Window, HTML String,
alert,style
javascript:(
function()
{
{
let ourHTML =
'<html><body><style>div{backgrou
nd-color:tan;}</style>';
ourHTML += '<div
onclick=javascript:alert("Hi");>Clic
k Me</div>';
ourHTML += '</body></html>';
let ourWindow =
"_blank");
ourWindow.document.write(ourHT
ML);
}
ourFunction();
} ) ( );
New Window, HTML String, alert,
style, js in the script tag
javascript:(
function()
{
{
let ourHTML =
'<html><body><script>function
ourFunction(){alert("Howdy");}</scrip
t><style>div{background-
color:tan;}</style>';
ourHTML += '<div
onclick=ourFunction();>Click
Me</div>';
ourHTML += '</body></html>';
let ourWindow =
"_blank");
ourWindow.document.write(ourHTML)
;
}
ourFunction();
} ) ( );
New Window Tab, Go To URL, New
Tab
Opens a New Window to a specified URL
in a New Tab
javascript:(
function()
{
{
window.open('http://google.com/');
}
ourFunction();
} ) ( );
New Window Go To URL in a New
Window with Size
Opens a New Window with a specified URL,
height and width
javascript:(
function()
{
{
window.open('http://
www.google.com','targetname','height
=600,width=800');
}
ourFunction();
} ) ( );
New Window Go To URL in a New
Window with Size and position
Opens a New Window with a specified URL,
width and height and position on screen.
javascript:(
function()
{
{
window.open('http://www.goog
le.com' ,'targetname','height =
600,width = 800, left = 0px, top
= 0px');
}
ourFunction();
} ) ( );
New Window Go To Same URL as
Current Window
Opens a New Window with the URL of the
Current Page
javascript:(
function()
{
{
window.open(document.URL,'
_blank','location=yes,height=6
00,width=800,status=yes');
}
ourFunction();
} ) ( );
createElement, append, Make a
Paragraph
/* Create a New Paragraph on the page */
javascript:(
function()
{
{
let ourParagraph =
document.createElement("P");
ourParagraph.style.position =
"absolute";
ourParagraph.style.top = 100 +
'px';
ourParagraph.style.left = 100 +
'px';
ourParagraph.innerHTML = "Here
is the paragraph.";
document.body.append(ourParagr
aph);
}
ourFunction();
} ) ( );
Youtube - GET URL, TITLE,
DESCRIPTION, LIKES, DATE
javascript:(
function()
{
let nameList =
document.querySelectorAll(".style-
scope ytd-video-primary-info-
renderer");
let i;
let theNames = [ ];
for(i=0; i < nameList.length; i++)
{
theNames +=
nameList[i].textContent;
theNames += "\n";
}
//alert(theNames.toString());
let theTextArea =
document.createElement("textarea");
theTextArea.style.position="absolute"
;
theTextArea.style.left= 100 +'px';
theTextArea.style.top= 200 +'px';

theTextArea.style.color="black";
theTextArea.style.zIndex="1000";
theTextArea.style.border = "solid
2px rgba(0,0,100,1.0)";
theTextArea.style.fontFamily="exo";
theTextArea.style.fontWeight="normal
";
theTextArea.style.fontSize="medium";
theTextArea.style.width= 700 +'px';
theTextArea.style.height= 200 +'px';
theTextArea.style.background="white
";
theTextArea.style.textAlign="center";
theTextArea.setAttribute("readonly",
"true");
theTextArea.value = theNames;
document.body.append(theTextArea);
} ( ) );
Create a Video Game Player on Any
Webpage!
javascript:(
function()
{
/* i is slow, o is medium, p is fast speed
W is up, S is Down, A is Left, D is Right.
https://github.com/ChristopherTopalian/Topa
lian-Website-Game-Engine */
{
let makePlayer =
makePlayer.style.position="absolute";
makePlayer.style.left=0;
makePlayer.style.top=0;
makePlayer.style.color="white";
makePlayer.style.zIndex="15";
makePlayer.style.fontFamily="exo";
makePlayer.style.fontWeight="bold";
makePlayer.style.fontSize="xx-large";
makePlayer.style.width="50px";
makePlayer.style.height="50px";
makePlayer.style.background="rgba(76,175,
180,0.5)";
makePlayer.style.textAlign="center";
makePlayer.id="thePlayer";
document.body.append(makePlayer);
/*Keyboard Letter Codes Being Pressed */

let keyboard = { };
keyboard.UP=87;
keyboard.DOWN=83;
keyboard.LEFT=65;
keyboard.RIGHT=68;
/*Player's start position and id */

let ourPlayer = {
x:100,
y:300,
speedMultiplier:2,
playerId:document.getElementById("thePlay
er")
};
/* Key Press Detection */

document.body.onkeyup=
document.body.onkeydown=function(e){
if(e.keyCode==80)/*letter p*/
{
ourPlayer.playerId.style.background="rgba(0
, 175, 80, 0.5)";
ourPlayer.speedMultiplier=4;
}
if(e.keyCode==79)/*letter o */
{
6, 0, 80, 0.5)";
}
if(e.keyCode == 73)/* letter i */
{
6, 175, 180, 0.5)";
}
/* Find out which key was pressed */

let theKeyCode = e.keyCode || e.which;
keyboard[theKeyCode] = e.type
=='keydown';
};
/* Character Movement Updating */

let movePlayer = function(theX, theY){
ourPlayer.x += (theX||0) *
ourPlayer.speedMultiplier;
ourPlayer.y += (theY||0) *
ourPlayer.speedMultiplier;
ourPlayer.playerId.style.left = ourPlayer.x
+ 'px';
ourPlayer.playerId.style.top = ourPlayer.y
+ 'px';
};
/* Player Controls */
let sensePlayerMotion = function(){
if(keyboard[keyboard.LEFT]){
movePlayer(-1,0);
}
if(keyboard[keyboard.RIGHT]){
movePlayer(1,0);
}
if(keyboard[keyboard.UP]){
movePlayer(0,-1);
}
if(keyboard[keyboard.DOWN]){
movePlayer(0,1);
}
};
/* Update the Position of the player */
movePlayer();
function scrollIt()
{
document.getElementById("thePlayer").scrol
lIntoView({block: "center", inline: "center"});
}
let theRefresh;
function doThisLoop()
{
sensePlayerMotion();
scrollIt();
theRefresh=requestAnimationFrame(doThis
Loop);
}
doThisLoop();
}
ourFunction();
} ) ( );
createElement, append, Make a div,
style with JS
Create a New div on the page and style
with JS methods
javascript:(function(){
{
let ourDiv =
ourDiv.style.padding = "2px 2px 2px 2px";
ourDiv.style.background = "blue";
ourDiv.style.position="absolute";
ourDiv.style.left = "100px";
ourDiv.style.zIndex="1000";
ourDiv.style.padding="10px";
ourDiv.innerHTML = "Copper" + "<br>";
ourDiv.innerHTML += "29";
}
ourFunction();
} ) ( );
style, url new tab
Create a New div on the page with style
and url link
javascript:(
function() {
{
let Elements =
{
name:"copper",
number:"29",
link:
"https://en.wikipedia.org/wiki/Copper"
};
let ourDiv =
2px";
ourDiv.style.left = "100px";
ourDiv.innerHTML = Elements.name +
"<br>";
ourDiv.innerHTML +=
Elements.number + "<br>";
ourDiv.innerHTML+='<a
href=\''+Elements.link+'\'
target="_blank">Link</a>';
}
ourFunction();
} ) ( );
style, url new window
and url link
function ourFunction(){
let Elements =
{
name:"copper",
number:"29",
link:
};
alert(Elements.link);
let ourDiv =
/* ourDiv.style.height = "100px";
*/
ourDiv.style.padding = "2px 2px
2px 2px";
ourDiv.innerHTML =
Elements.name + "<br>";
ourDiv.innerHTML +=
ourDiv.innerHTML += '<a
href=\'' +Elements.link + '\'
}
ourFunction();
} ) ( );
style with css, url new window
and url link
{
let Elements =
{
name:"copper",
number:"29",
link:
};
let ourDiv =
/* ourDiv.style.height = "100px";
*/
2px 2px";
ourDiv.innerHTML =
Elements.name + "<br>";
ourDiv.innerHTML +=
href=\''+Elements.link+'\'
}
ourFunction();
} ) ( );
createElement, append, div, css, url,
window, array of objects
Create a New div on the page with style and
url link of an array of objects
{
{
let myRecord = [
{
name: "Key",
weight: 140,
link: "https://google.com/news"
},
{
name: "Donald",
weight: 160,
link: "https://google.com"
}
];
let ourDiv =
ourDiv.style.width = "100px";
2px";
ourDiv.innerHTML =
myRecord[0].name + "<br>";
ourDiv.innerHTML +=
myRecord[0].weight + "<br>";
href=\''+myRecord[0].link+'\'
}
ourFunction();
} ) ( );
We make an Array of Objects that we named
myRecord
The 0 entry of the myRecord array is Key.
The 1 entry of the myRecord array is Donald.

In the above script, we only display one
record, which is the entry that has the name
Key.
To display the first entry name we use

myRecord[0].name
To display the first entry weight we use
myRecord[0].weight
To display the second entry name we use

myRecord[1].name
To display the second entry weight we use
myRecord[1].weight
createElement, append, div, url,
window, array of objects, show all
Create a New div on the page with style & url
link of an array of objects, display all entries
{
{
let myRecord = [
{
name: "Key",
weight: 140,
link: "https://google.com/news"
},
{
name: "Donald",
weight: 160,
link: "https://google.com"
}
];
let ourDiv =
2px";
let output = '';
for(let i = 0; i < myRecord.length; i++)
{
output += myRecord[i].name + " ";
output += myRecord[i].weight + " ";
output +='<a
href=\''+myRecord[i].link+'\'
output += '<br>';
}
ourDiv.innerHTML = output;
}
ourFunction();
} )( );
We loop through the entries of the

myRecords array to display all of them at
once.
The for loop will only continue for as
many entries that are found. In this case,
there are only two entries.
We display them all of the entries on a

div that we have made using
createElement.
This div that we create is very important
technology!
A person can make RPG Games,

Periodic Tables, Pop Ups, Ads,
Additional Info Boxes, Notifications, and
so much more, using just this one script!
createElement, append, make a
Button
Create a Button on the page, which uses
an alert function
javascript:(
function()
{
function textMessage()
{
alert("hi");
}
{
let ourButton =
document.createElement("BUTTON");
ourButton.style.position="absolute";
ourButton.style.top = "100px";
ourButton.style.left ="100px";
/* ourButton.style.width = "100px"; */
/* ourButton.style.height = "100px"; */
ourButton.style.padding = "2px 2px
2px 2px";
ourButton.style.background = "tan";
ourButton.style.color = "yellow";
ourButton.style.zIndex="1000";
ourButton.innerHTML = "This is a
Button.";
document.body.append(ourButton);
ourButton.onclick = function() {
textMessage() };
}
ourFunction();
} ) ( );
createElement, append a Button
with Style background, text color
Create a Button on the page with id, and alert
javascript:(
function()
{
function textMessage()
{
alert("hi");
}
{
let ourButton =
ourButton.style.position =
"absolute";
ourButton.style.left = "100px";
ourButton.style.padding = "2px
2px 2px 2px";
ourButton.innerHTML = "This is
a Button.";
ourButton.id = "theButton";
textMessage() };
ourButton.style.background =
"tan";
ourButton.style.zIndex ="1000";
}
ourFunction();
} ) ( );
createElement, append, Button,
Style, color, position, layer
Create a Button on the page with an id,
alert, and style
javascript:(
function()
{
{
let ourButton =
"absolute";
2px 2px 2px";
alert("hi") };
"tan";
ourButton.innerHTML = "This is a
Button.";
}
ourFunction();
} ) ( );
createElement and append, div
Create a div on the page with id, and style
javascript:(
function()
{
function ourFunction() {
let ourDiv =
ourDiv.innerHTML = "This is a div.";
}
ourFunction();
} ) ( );
createElement, append, get link
text, create div
Create a div on the page with textContent of
each link found
{
{
let report;
let theLinks =
document.getElementsByTagName("a
");
let i;
for (i = 0; i < theLinks.length; i++)
{
report +=
theLinks[i].textContent;
report += "\n";
}
return report;
}
ourFunction();
let ourDiv =
ourDiv.innerHTML = ourFunction();
2px 2px";
ourDiv.onclick= function() {
document.getElementById("theDiv").i
nnerHTML=""};
} ( ) );
createElement, append, get link
text, button, click delete
Create a div on the page with id, and can be
deleted
{
{
let report;
let theLinks =
document.getElementsByTagName("a
");
let i;
for(i = 0; i < theLinks.length; i++)
{
report +=
theLinks[i].textContent;
report += "\n";
}
return report;
}
ourFunction();
let ourDiv =
document.createElement("button");
ourDiv.onclick= function(){ let
divRef=
divRef.remove()};
2px 2px";
} ( ) );
createElement, append, Button, Get
URL of the Page you are on
Create a Button on the page, that gets the
URL of the page
javascript:(
function()
{
{
let ourButton =
ourButton.innerHTML = 'Click for
URL';
ourButton.style.position = "absolute";
2px 2px 2px";
ourButton.style.background = "tan";
ourButton.style.zIndex = "1000";
ourButton.onclick = function(){
function work(){ let theVideo = "hi";
alert(window.location.href);}work()};
}
ourFunction();
} ) ( );
createElement, append, Button,
Style, color, pos, layer, VIDEO
pause
Create a Button that Pauses the Video on the
page.
javascript:(
function()
{
{
let ourButton =
"absolute";
ourButton.style.left ="100px";
2px 2px 2px";
"tan";
ourButton.innerHTML = "Pause
Button";
ourButton.onclick = function(){
function work(){ let theVideo =
document.querySelectorAll("video")
[0]; theVideo.pause();} work() };
}
ourFunction();
} ) ( );
When you have a video playing in your

browser you can pause it using this
button.
createElement, append, VIDEO,
Play, Pause Buttons
Create Buttons that Pause/Play the Video on
the page.
javascript:(
function()
{
{
let ourPauseButton =
ourPauseButton.id = "theButton";
ourPauseButton.style.position =
"absolute";
ourPauseButton.style.top = "100px";
ourPauseButton.style.left ="100px";
ourPauseButton.style.padding = "2px
2px 2px 2px";
ourPauseButton.style.background =
"tan";
ourPauseButton.style.color = "yellow";
ourPauseButton.style.zIndex ="1000";
ourPauseButton.innerHTML = "Pause
Button";
document.body.append(ourPauseButton);
ourPauseButton.onclick = function(){
function pauseNow() { let theVideo =
document.querySelectorAll("video")[0];
theVideo.pause();} pauseNow(); };
let ourPlayButton =
ourPlayButton.id = "thePlayButton";
ourPlayButton.style.position = "absolute";
ourPlayButton.style.top = "200px";
ourPlayButton.style.left ="100px";
ourPlayButton.style.padding = "2px 2px
2px 2px";
ourPlayButton.style.background = "tan";
ourPlayButton.style.color = "yellow";
ourPlayButton.style.zIndex ="1000";
ourPlayButton.innerHTML = "Play Button";
document.body.append(ourPlayButton);
ourPlayButton.onclick = function(){
function playNow(){ let theVideo =
theVideo.play();} playNow(); };
}
ourFunction();
} ) ( );
createElement Buttons VIDEO, play,
pause, back, forward, Mute,
UnMute
Create Buttons that Control the Video on the
page
{
let ourPlayButton =
ourPlayButton.innerHTML = "Play";
ourPlayButton.id = "thePlayButton";
ourPlayButton.style.position = "absolute";
ourPlayButton.style.top = "100px";
ourPlayButton.style.left ="5px";
ourPlayButton.style.padding = "2px 2px
2px 2px";
ourPlayButton.style.background = "tan";
ourPlayButton.style.color = "yellow";
ourPlayButton.style.zIndex ="1000";
ourPlayButton.innerHTML = "Play";
ourPlayButton.onclick = function(){
function playNow(){ let theVideo =
theVideo.play();} playNow(); };
document.body.append(ourPlayButton);
let ourPauseButton =
ourPauseButton.innerHTML = "Pause";
ourPauseButton.id = "theButton";
ourPauseButton.style.position =
"absolute";
ourPauseButton.style.top = "125px";
ourPauseButton.style.left ="5px";
ourPauseButton.style.padding = "2px
2px 2px 2px";
ourPauseButton.style.background = "tan";
ourPauseButton.style.color = "yellow";
ourPauseButton.style.zIndex ="1000";
ourPauseButton.innerHTML = "Pause";
ourPauseButton.onclick = function(){
function pauseNow() { let theVideo =
theVideo.pause();} pauseNow(); };
document.body.append(ourPauseButton);
let ourBackButton =
ourBackButton.innerHTML = "Back";
ourBackButton.id = "theBackButton";
ourBackButton.style.position =
"absolute";
ourBackButton.style.top = "150px";
ourBackButton.style.left ="5px";
ourBackButton.style.padding = "2px
2px 2px 2px";
ourBackButton.style.background =
"tan";
ourBackButton.style.color = "yellow";
ourBackButton.style.zIndex ="1000";
ourBackButton.innerHTML = "Back";
ourBackButton.onclick = function(){
function backNow() { let theTime =
document.querySelector("video").currentTim
e += -2; } backNow()};
document.body.append(ourBackButton);
let ourForwardButton =
ourForwardButton.innerHTML =
"Forward";
ourForwardButton.id =
"theForwardButton";
ourForwardButton.style.position =
"absolute";
ourForwardButton.style.top = "175px";
ourForwardButton.style.left ="5px";
ourForwardButton.style.padding = "2px
2px 2px 2px";
ourForwardButton.style.background =
"tan";
ourForwardButton.style.color =
"yellow";
ourForwardButton.style.zIndex ="1000";
ourForwardButton.innerHTML =
"Forward";
ourForwardButton.onclick = function(){
function backNow() { let theTime =
document.querySelector("video").currentTim
e += 2; } backNow()};
document.body.append(ourForwardButton);
let ourSpeedButton =
ourSpeedButton.id = "theSpeedButton";
ourSpeedButton.style.position =
"absolute";
ourSpeedButton.style.top = "200px";
ourSpeedButton.style.left ="5px";
ourSpeedButton.style.padding = "2px
2px 2px 2px";
ourSpeedButton.style.background =
"tan";
ourSpeedButton.style.color = "yellow";
ourSpeedButton.style.zIndex ="1000";
ourSpeedButton.innerHTML = "Speed";
ourSpeedButton.onclick = function(){
function speedNow() { let theTime =
document.querySelector("video").playbackR
ate = parseFloat(prompt("Enter speed",
"0.50")); } speedNow(); };
document.body.append(ourSpeedButton);
let ourMuteButton =
ourMuteButton.innerHTML = "MUTE";
ourMuteButton.id = "theMuteButton";
ourMuteButton.style.position =
"absolute";
ourMuteButton.style.top = "225px";
ourMuteButton.style.left ="5px";
ourMuteButton.style.padding = "2px 2px
2px 2px";
ourMuteButton.style.background =
"tan";
ourMuteButton.style.color = "yellow";
ourMuteButton.style.zIndex ="1000";
ourMuteButton.innerHTML = "Mute";
ourMuteButton.onclick= function(){
function muteNow() {
document.querySelector("video").muted=tru
e;} muteNow();};
document.body.append(ourMuteButton);
let ourUnMuteButton =
ourUnMuteButton.id =
"theUnMuteButton";
ourUnMuteButton.style.position =
"absolute";
ourUnMuteButton.style.top = "250px";
ourUnMuteButton.style.left ="5px";
ourUnMuteButton.style.padding = "2px
2px 2px 2px";
ourUnMuteButton.style.background =
"tan"
ourUnMuteButton.style.color =
"yellow";
ourUnMuteButton.style.zIndex ="1000";
ourUnMuteButton.innerHTML =
"Unmute";
ourUnMuteButton.onclick= function(){
function unMuteNow() {
document.querySelector("video").muted=fal
se;} unMuteNow();};
document.body.append(ourUnMuteButton);
}
ourFunction();
} ) ( );
createElement div, from object data
Create a div based on object data
{
{
let myPet =
{
name: "Tassey the Turtle",
age: "20"
};
return myPet.name + " " +
myPet.age;
}
ourFunction();
let ourDiv =
2px";
} ( ) );
createElement div, from object
data, dot syntax of function
Create a div based on object data using dot
syntax of function
{
{
let myPet =
{
name: "Tassey",
age: "20"
};
return myPet;
}
ourFunction();
let ourDiv =
ourDiv.innerHTML =
ourFunction().name + " " +
ourFunction().age;
ourDiv.innerHTML =
ourFunction();
ourDiv.style.position =
"absolute";
2px 2px";
} ( ) );
createElement div, from object
data, dot syntax of function
Create a div, object data, dot syntax, longer
example
{
function BikaChu()
{
let bikachu =
{
name: "Bikachu",
height: "1",
weight: "30",
speedMax:"40",
power: "Electricity",
level: "73",
color: "yellow",
friend: "Dash"
};
return bikachu;
}
BikaChu();
let ourDiv =
ourDiv.innerHTML = BikaChu().name + ", "
+
BikaChu().height + ", " +
BikaChu().weight + ", " +
BikaChu().speedMax + ", " +
BikaChu().power + ", " +
BikaChu().level + ", " +
BikaChu().color + ", " +
BikaChu().friend;
divRef.remove();};
} ( ) );
If you click on this div, it will be removed.

createElement div, class
inheritance, dot syntax of function,
pet
Create a div, object data, dot syntax, longer
example
{
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';
}
}
let felix = new Cat(
'tiger',
'Felix',
'Medium',
'10.0',
'80',
'long');
let ourDiv =
ourDiv.innerHTML += felix.meow() +
'<br>';
ourDiv.innerHTML += felix.eat() + '<br>';
ourDiv.innerHTML += felix.sayKind()+
'<br>';
ourDiv.innerHTML += felix.tailWag()+
'<br>';
ourDiv.innerHTML += felix.saySpeed();
2px";
divRef.remove();};
} ) ( );
Get Specific Button onclick value
Shows the onclick value of the first button
found
javascript:(
function()
{
let theButton =
document.getElementsByTagName
("BUTTON")[0];
let theName =
theButton.attributes.getNamedItem
("onclick").value;
alert(theName);
} ( ) );
This Script Works ONLY if the button has

the onclick event associated with it.
But, if the button instead uses an event
handler, then the Bookmarklet will not
work.
So, if you have a button on your page, with

an onclick event
<button id="insertIt"
onclick="renderHtml()">
this returns the output of renderHtml().
Meaning, it tells us in an alert, that

renderHtml() was used in the onclick event
of that very first button it found on the
page.
Style All Paragraphs on Page
Find all paragraphs on page and style them
javascript:(
function()
{
let theParagraphs =
document.getElementsByTagName("P");
let i;
for(i = 0; i < theParagraphs.length; i++)
{
theParagraphs[i].style.backgroundColor
= "aqua";
theParagraphs[i].style.fontWeight =
"bold";
theParagraphs[i].style.color = "black";
}
} ( ) );
Number of Buttons on a Page
Shows How many Buttons are on the page
javascript:(
function()
{
let theButtons =
document.getElementsByTagNa
me("Button");
alert(theButtons.length);
} ( ) );
Number of Links on a Page
Shows How many links are on a page
javascript:(
function()
{
let theLinks =
document.getElementsByTa
gName("a");
alert(theLinks.length);
} ( ) );
Show the InnerHTML of each
Paragraph on a Page
Find all paragraphs on a page
javascript:(
function()
{
let report;
let theParagraphs =
("P");
let i;
for(i=0; i<theParagraphs.length;
i++)
{
report +=
theParagraphs[i].innerHTML;
report += "\n";
}
alert(report);
} ( ) );
Show the InnerHTML of each
Paragraph with Style
Find all paragraphs on a page and style them
javascript:(
function()
{
let report;
let theParagraphs =
("P");
let i;
for(i=0; i
<theParagraphs.length; i++)
{
theParagraphs[i].style.background
Color = "aqua";
theParagraphs[i].style.fontWeight =
"bold";
theParagraphs[i].style.color =
"black";
report +=
theParagraphs[i].innerHTML;
report += "\n";
}
alert(report);
} ( ) );
Show the href of each Link on Page
Find all links on a page
javascript:(
function()
{
let report;
let theLinks =
("A");
let i;
{
report += theLinks[i].href;
report += "\n";
}
alert(report);
} ( ) );
Show the href of each Link with
Style
Find all links on a page and style them
javascript:(
function()
{
let report;
let theLinks =
document.getElementsByTagName("A");
let i;

{
theLinks[i].style.backgroundColor =
"aqua";
theLinks[i].style.fontWeight = "bold";
theLinks[i].style.color = "black";
report += theLinks[i].href;
report += "\n";
}
alert(report);
} ( ) );
Show All Image URLS
Find all images on a page
javascript:(
function()
{
let report;
let theLinks =
document.getElementsByTagName("img
");
let i;

{
report += theLinks[i].src;
report += "\n";
}
console.log(report);
alert(report);
} ( ) );
//alert shows a limited amount of characters.
Use console.log or other method to show all
image links found, when there are many.
Press F12 to see the console report.
Show the img tag with Style
Find all images on a page and style them
javascript:(
function()
{
let report;
let theLinks =
("img");
let i;

{
theLinks[i].style.border = '2em
solid blue';
report += theLinks[i].src;
report += "\n";
}
alert(report);
} ( ) );
Show the Buttons id’s on a Page
Find all paragraphs on a page & show their id
javascript:(
function()
{
let report;
let theButtons =
document.getElementsByTagNa
me("Button");
let i;
for(i = 0; i <
theButtons.length; i++)
{
report += theButtons[i].id;
report += "\n";
}
alert(report);
} ( ) );
Show the Links id’s on a Page
Find all links on a page and show their id
javascript:(
function()
{
let report;
let theLinks =
("a");
let i;
for(i =0; i < theLinks.length; i++)

{
report += theLinks[i].id;
report += "\n";
}
alert(report);
} ( ) );
Show the H1’s on a Page
Display all H1 from a Webpage
let nameList =
document.querySelectorAll("H1");
let i;
let thenames=[ ];
for(i = 0; i < nameList.length; i++)

{
thenames +=
thenames += "\n";
}
alert(thenames.toString());
} ( ) );
Show elements of a certain class on
a Website
Display elements from Weebly website of a
certain class name.
let nameList =
document.querySelectorAll(".wsite
-content-title");
let i;
let thenames=[ ];
for(i=0; i<nameList.length; i++)
{
thenames +=
thenames += "\n";
}
alert(thenames.toString());
} ( ) );
The Bookmarklet on the previous page is
designed to work ONLY on Weebly Websites.
Go to http://CollegeOfScripting.weebly.com
Right Click on the Titles, such as JavaScript
Choose Inspect Element
We see that the Element has a class called

.wsite-content-title
We use the dot syntax before the

class name.
The class name is .wsite-content-
title
Inspecting an Element
As you can see here, after Right Clicking on

the word JavaScript and choosing Inspect
Element, the Inspector Opens and allows us
to see the name of the class of that
Headline.
In this case, the H2 Titles of this Weebly
Website have a class called
wsite-content-title
Thus, we simply use that class name, when
we want to reference only elements that
use that class. This allows us to examine
any webpage and inspect any element to
find their class name, which therefore
allows us the ability to reference any
elements on the page that use that class.
Timer – After 5 Seconds, Trigger
function one time
Timer activates only once, after 5 seconds
javascript:(
function()
{
{
alert("Howdy");
}
setTimeout(ourFunction, 5000);
} ( ) );
Timer – Every 5 Seconds, Trigger
function
Timer activates every 5 seconds
javascript:(
function()
{
{
alert("Howdy");
}
setInterval(ourFunction,
5000);
} ( ) );
Timer – Every 1 Second, COUNT UP
javascript:(
function()
{
let counter = 0;
function openIt()
{
let ourDiv =
ourDiv.innerHTML = updateIt();
ourDiv.setAttribute('style','backgroun
d-
color:black;position:absolute;left:20p
x;top:150px;color:white;z-
index:1;width:100px;height:25px;font-
size:19px; padding:8px;');
}
function updateIt()
{
counter += 1;
return counter;
}
openIt();
setInterval(openIt, 1000);
} ) ( );
Timer – Every 1 Second, COUNT
DOWN, clearInterval
Timer Counts Down Starting at Number of
Seconds User Entered
javascript:(
function()
{
let counter = prompt("Enter
Count Down Start Time");
function openIt()
{
let ourDiv =
ourDiv.innerHTML =
updateIt();
ourDiv.setAttribute('style','backgro
und-
color:black;position:absolute;left:2
0px;top:150px;color:white;z-
index:1;width:100px;height:25px;fo
nt-size:19px; padding:8px;');
}
function updateIt() {
counter -= 1;
if(counter == 0)
{
clearInterval(ourTimer);
}
return counter;
}
openIt();
let ourTimer =
} ) ( );
Timer – Every 1 Second, Trigger
Military Time
javascript:(
function()
{
function openIt()
{
let ourDiv =
ourDiv.innerHTML = updateIt();
ourDiv.setAttribute('style','background-
color:black;position:absolute;left:20px;t
op:150px;color:white;z-
index:1;width:100px;height:25px;font-
size:19px; padding:8px;');
}
function dateTime()
{
let date = new Date();
return date;
}
function hours()
{
let theHours =
dateTime().getHours();
return theHours;
}
function minutes()
{
let theMinutes =
dateTime().getMinutes();
return theMinutes;
}
function seconds()
{
let theSeconds =
dateTime().getSeconds();
return theSeconds;
}
function updateIt()
{
return hours().toString() + ":" +
minutes().toString()+ ":" +
seconds().toString();
}
openIt();
} ) ( );
Calculate DISTANCE
DISTANCE = SPEED * TIME
javascript:(
function()
{
function ourFunction(mph, hours)
{
mph = prompt("Enter Mph");
hours = prompt("EnterHours");
let time = mph * hours;
return String(time) + " Miles";
}
} ) ( );
DISTANCE
SPEED * TIME
The Distance in Miles,
Equals the Speed in Miles Per Hours,
Multiplied by the Time in Hours.
Calculate SPEED
SPEED = DISTANCE / TIME
javascript:(
function()
{
function ourFunction(miles, hours)
{
miles = prompt("Enter Miles");
hours = prompt("Enter Hours");
let speed = miles / hours;
return String(speed) + " mph"

}
} ) ( );
DISTANCE
SPEED * TIME
The Speed in Miles Per Hour,
Equals the Distance in Miles,
Divided by the Time in Hours
Calculate TIME
TIME = DISTANCE / SPEED
javascript:(
function()
{
function ourFunction(miles, speed)
{
speed = prompt("Enter Mph");
let time = miles / speed;
return String(time) + " Hour";
}
} ) ( );
DISTANCE
SPEED * TIME
The Time in Hours,
Equals the Distance in Miles,
Divided by the Speed in Miles Per Hour
Calculate Storm Distance
STORMS DISTANCE = SECONDS / 4.68
javascript:(
function()
{
function ourFunction(seconds)
{
seconds = prompt("Enter Seconds");
let stormDistance = seconds / 4.68;
return String(stormDistance + "

Miles Away");
}
} ) ( );
Calculate PERCENTAGE of MINUTES
of an HOUR
PERCENTAGE OF MINUTES OF AN HOUR =
(minutes * 100) / 60
javascript:(
function()
{
function ourFunction(minutes)
{
minutes= prompt("Enter
Minutes");
let percent = (minutes * 100) / 60;
return String(minutes + " Minutes

is " + percent + "% of an Hour");
}
} ) ( );
Calculate SALES TAX and TOTAL
PRICE
TOTAL PRICE = PRICE + TAX AMOUNT
javascript:(
function()
{
function ourFunction(price,
taxRate)
{
price = prompt("Enter
Price");
taxRate = prompt("Enter Tax

Rate");
taxRate /= 100;
let taxAmount = price *

taxRate;
let totalPrice = price + taxAmount;
return String(totalPrice + "

is Total Price with Tax Included." +
"\n" + "Tax Amount was " +
taxAmount);
}
} ) ( );
Calculate AVERAGE of 3 Numbers
AVERAGE = SUM OF ALL NUMBERS / HOW
MANY
javascript:(
function()
{
let average;
function ourFunction(a,b,c)
{
a = prompt("Enter 1st number");
b = prompt("Enter 2nd number");
c = prompt("Enter 3rd number");
average = (parseInt(a) + parseInt(b)

+ parseInt(c))/3;
return String(average + " is the

average");
}
} ) ( );
Calculate MEDIAN of TWO
NUMBERS
MEDIAN = SUM OF NUMBERS / 2
javascript:(
function()
{
function ourFunction(a,b)
{
a = prompt("Enter 1st number");
b = prompt("Enter 2nd number");
let median = (parseInt(a) +

parseInt(b)) / 2;
return String(median + " is the

median");
}
} ) ( );
Calculate AREA of a SQUARE
AREA OF SQUARE = SIDE * SIDE
javascript:(
function() {
function ourFunction(side)
{
side = prompt("Enter Length in
Meters");
let area = side * side;
return String(area + " sqm");

}
} ) ( );
SIDE A 10 m
10 m
10 m x 10 m =
100 Square m
SIDE B
Calculate PERIMETER of a SQUARE
PERIMETER OF SQUARE = SIDE * 4
javascript:(
function() {
function ourFunction(side)
{
side = prompt("Enter Length in Feet");
let perimeter = side * 4;
perimeter = Math.round(perimeter);
return String(perimeter + "feet");
}
} ) ( );
SIDE A 10 feet
10 Feet
10 Feet
10 Feet x 4 =
40 Feet
SIDE B
SIDE B
Perimeter
SIDE A 10 feet
Convert FRACTION to DECIMAL
DECIMAL=NUMERATOR / DENOMINATOR
javascript:(
function()
{
function ourFunction(numerator,
denominator)
{
numerator = prompt("Enter
Numerator");
denominator = prompt("Enter
Denominator");
let decimal = numerator /

denominator;
return String(decimal);
}
} ) ( );
Convert FRACTION to PERCENT
PERCENT=(NUMERATOR / DENOMINATOR) * 100
javascript:(
function()
{
function ourFunction(numerator,
denominator)
{
numerator = prompt("Enter
Numerator");
denominator = prompt("Enter
Denominator");
let percent = (numerator /
denominator)*100;
return String(percent + "%");
}
} ) ( );
Convert PERCENT to DECIMAL
DECIMAL = PERCENT / 100
javascript:(
function()
{
function ourFunction(percent)
{
percent = prompt("Enter
Percent");
let decimal = percent/100;
return String(decimal);
}
} ) ( );
Convert DECIMAL to PERCENT
PERCENT = DECIMAL * 100
javascript:(
function()
{
function ourFunction(decimal)
{
decimal = prompt("Enter
Decimal");
let percent = decimal * 100;

return String(percent + "%");
}
} ) ( );
Convert METERS to INCHES
INCHES = METERS * 39.3701
javascript:(
function()
{
function ourFunction(meters)
{
meters = prompt("Enter Meters");
let inches = meters * 39.3701;
return String(inches + " inches");

}
} ) ( );
Here is Another way to
convert Meters to Inches
inches = meters / 0.0254;
Note: The exact value of the first way is
39.3700787
Convert INCHES to METERS
METERS = INCHES * 0.0254
javascript:(
function()
{
function ourFunction(inches)
{
inches = prompt("Enter Inches");
let meters = inches * 0.0254;
return String(meters + " meters");

}
} ) ( );

convert Inches to Meters
meters = inches * 39.3700787;
Convert METERS to FEET
FEET = METERS * 3.28084
javascript:(
function()
{
function ourFunction(meters)
{
meters = prompt("Enter Meters");
let feet = meters * 3.28084;
return String(feet + " feet");

}
} ) ( );

convert Meters to Feet
feet = meters / 3.28084;
Convert FEET to METERS
METERS = FEET * 0.3048
javascript:(
function()
{
function ourFunction(feet)
{
feet = prompt("Enter Feet");
let meters = feet * 0.3048;
return String(meters + "

meters");
}
} ) ( );

convert Feet to Meters
meters = feet / 3.2808399;
Convert FEET and INCHES to
METERS
METERS = (FEET * 0.3048) + (INCHES *
0.0254)
javascript:(
function()
{
function ourFunction(feet, inches)
{
inches = prompt("Enter Inches");
feet *= 0.3048;
inches *= 0.0254;
let total = feet + inches;

return String(total+ " meters");
}
} ) ( );
Convert MILES to FEET
MILES = MILES * 5280
javascript:(
function()
{
function ourFunction(miles)
{
let feet = miles * 5280;
return String(feet + " feet");

}
} ) ( );

convert Miles to Feet
feet = miles / 0.000189393939;
Convert FEET to MILES
MILES = FEET * 0.0001089394
javascript:(
function()
{
function ourFunction(feet)
{
let miles = feet * 0.000189394;
return String(miles + " miles");

}
} ) ( );

convert Feet to Miles
miles = feet / 5280;
Convert KILOMETERS to MILES
MILES = KILOMETERS * 0.621371
javascript:(
function()
{
function ourFunction(kilometers)
{
kilometers = prompt("Enter
Kilometers");
let miles = kilometers * 0.621371;
return String(miles + " miles");

}
} ) ( );
Here is Another way to convert

Kilometers to Miles
miles = kilometers / 1.609344;
Convert MILES to KILOMETERS
KILOMETERS = MILES * 1.609344
javascript:(
function()
{
function ourFunction(miles)
{
let kilometers = miles * 0.621371;
return String(kilometers + "

kilometers");
}
} ) ( );

Miles to Kilometers
kilometers = miles / 0.621371;
Convert HOURS to MINUTES
MINUTES = HOURS * 60
javascript:(
function()
{
function ourFunction(hours)
{
hours = prompt("Enter
Hours");
let minutes = hours * 60;
return String(minutes + "

minutes");
}
} ) ( );
Convert MINUTES to HOURS
HOURS = MINUTES * 0.0166667
javascript:(
function()
{
function ourFunction(minutes)
{
minutes = prompt("Enter Minutes");
let hours = minutes * 0.016667;
return String(hours + " hours");

}
} ) ( );

Minutes to Hours
hours = minutes / 60;
Convert SECONDS to DAYS
DAYS = SECONDS / 86400
javascript:(
function()
{
{
seconds = prompt("Enter
Seconds");
let days = seconds / 86400;
return String(days + " days");

}
} ) ( );
Convert SECONDS to HOURS
HOURS = SECONDS * 0.000277778
javascript:(
function()
{
{
seconds = prompt("Enter Seconds");
let hours = seconds * 0.000277778;
return String(hours + " hours");

}
} ) ( );

Seconds to Hours
hours = seconds / 3600;
Convert HOURS to SECONDS
SECONDS = HOURS * 60
javascript:(
function()
{
function ourFunction(hours)
{
hours = prompt("Enter Hours");
let seconds = hours * 60;
return String(seconds + "

seconds");
}
} ) ( );
Convert FAHRENHEIT to CELSIUS
CELSIUS = 5 * (FAHRENHEIT – 32) / 9
javascript:(
function()
{
function ourFunction(fahrenheit)
{
fahrenheit = prompt("Enter
Temperature in Fahrenheit");
let celsius = 5 * (fahrenheit -

32) / 9;
return String(celsius + "

Celsius");
}
} ) ( );
return statement
<html>
<body>
<script>
function simple()
{
return "howdy";
}
alert(simple());
</script>
</body>
</html>
Console Log, Stringify All Records
<html><head>
<title> Console Log, Stringify
All Records </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140
},
{
name: "Donald",
weight: 160
}
];
document.write(JSON.stringify(
myRecord));
</script>
<div
id="theJsonOutput"></div>
</body>
</html>
Console Log, Stringify One Record
<html><head>
<title> Console Log, Stringify
One Record </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140
},
{
name: "Donald",
weight: 160
}
];
myRecord));
</script>
<div
id="theJsonOutput"></div>
</body></html>
or use
console.log(JSON.stringify
(myRecord[1]));
myRecord[1]));
Display One Record using innerHTML
<html><head>
<title> Display One Record Using
innerHTML </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
height: "5 feet 9 3/4 inches",
weight: 140,
eyeColor: "Brown",
nationality: "French, Irish, Other"
},
{
name: "Donald",
height: "6 feet 4 inches",
weight: 160,
eyeColor: "Blue",
nationality: "Ukrainian, French"
}
];
function renderHtml()
{
let jsonOutputDiv =
document.getElementById("theJsonO
utput");
jsonOutputDiv.innerHTML =
myRecord[1].name;
}
</script>
onclick="renderHtml()">
Insert to page
</button>
<div id="theJsonOutput"></div>
</body>
</html>
Display All Records, innerHTML
<html><head>
<title>Display All Records using
innerHTML </title>
</head>
<body>
<script>
let myRecord = [
{
name: "John",
height: "5 Feet 10 Inches",
weight: 140,
eyeColor: "Brown",
nationality: "French, Irish"
},
{
name: "Donald",
height: "6 Feet 4 Inches",
weight: 160,
eyeColor: "Blue",
}
];
{
let jsonOutputDiv =
document.getElementById("theJsonO
utput");
JSON.stringify(myRecord);
}
</script>
onclick="renderHtml()">Insert to page
</button>
</body>
</html>
for loop ALL Records
<html><head><title> for loop through All
Records </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
nationality: "French, Irish, Other"
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
}
];
{
let jsonOutputDiv =
document.getElementById("theJsonOutp
ut");
let output = '';
for(let i = 0; i < myRecord.length; i+

+)
{
output += myRecord[i].name;
output += '<br>';
}
jsonOutputDiv.innerHTML = output;
}
</script>
onclick="renderHtml()">Insert to
page</button>
</body>
</html>
for loop ALL Records, Stringify
<html><head><title> for loop through all
records, Stringify </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
}
];
{
let jsonOutputDiv =
ut");
let output = '';
+)
{
output +=
JSON.stringify(myRecord[i]);
output += '<br>';
}
}
</script>
page</button>
</body>
</html>
for loop ALL Records, Stringify, List
<html><head>
<title> for loop through ALL Records,
Stringify, List </title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
}
];
{
let jsonOutputDiv =
ut");
let output = '';
+)
{
output += '<li>'
+myRecord[i].name+ '</li>';
}
}
</script>
page</button>
</body>
</html>

for loop ALL Records, Select Items,
Spaces, New Line
<html><head>
<title>for loop ALL Records, Select Items,
Spaces, New Line</title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
}
];
{
let jsonOutputDiv =
document.getElementById("theJsonOutput")
;
let output = '';
{
output += myRecord[i].height + " ";
output += myRecord[i].weight +
'<br>';
}
}
</script>
page</button>
</body>
</html>
or we could instead use:
JSON.stringify(output);
and we could also try:

JSON.stringify(output).toUpperCase();
Filter for Year using if statement
<html><head><title>Filter for Year using
if statement, equal to </title></head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
nationality: "French, Irish",
year: 2016
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
nationality: "Ukrainian, French",
year: 2015
}
];
{
let jsonOutputDiv =
ut");
let output = '';
+)
{
if(myRecord[i].year == 2016)
{
output += myRecord[i].weight +
'<br>';
//alert(JSON.stringify(myRecord[i]));
}
}
}
</script>
page</button>
</body>
</html>
or we might instead use

if (myRecord[i].year < 2018)
or we might instead use
if(myRecord[i].year != 2017)
for let in x, indexOf, Searching for
Name
<html><head>
<title>for in x - indexOf - Search Name
</title>
</head>
<body>
<script>
let myRecord = [
{
name: "Key",
weight: 140,
eyeColor: "Brown",
nationality: "French, Irish",
year: 2016
},
{
name: "Donald",
weight: 160,
eyeColor: "Blue",
nationality: "Ukrainian, French",
year: 2015
}
];
{
let jsonOutputDiv =
document.getElementById("theJsonOutput")
;
let output = '';
{
for(let i in myRecord)
{
if(myRecord[i].name.indexOf("Donald") != -1)
{
output += myRecord[i].name + ", ";
output += myRecord[i].height + ", ";
output += myRecord[i].weight + " "
+ "lbs, ";
output += myRecord[i].year;
output += '<br>';
}
}
}
}
</script>
page</button>
</body></html>
Date and Time Simple
<html><head>
<title>Date and Time</title>
</head>
<body>
<button type="button"
onclick="document.getElementById('
displayDateTime').innerHTML=Date()"
>
Date and Time</button>
<div id="displayDateTime"></div>
</body>
</html>
Date Object - today's date and time
<html><script>
function TodaysDate()
{
let today = new Date();
let todayCleaner = new
Date().toLocaleDateString();
document.getElementById("date
Info").innerHTML = today;
document.getElementById("dateC
leaner").innerHTML =
todayCleaner;
}
</script>
<body>
<button
onclick="TodaysDate();">
Today's Date and Time
</button>
<div id="dateInfo"></div>
<br>
<div id="dateCleaner"></div>
</body>
</html>
Thu May 28 2020 11:33:05 GMT-0400

(Eastern Daylight Time)
5/28/2020
Function Using return, show time
<html><head>
<title>Functions Using return to
Communicate Time</title>
<script>
function dateTime() //GET DATE TIME

{
return date;
}
function Hours() //GET HOURS

{
let theHours =
return theHours;
}
function Minutes() //GET MINUTES

{
let theMinutes =
return theMinutes;
}
function displayIt(where, whichOne)

//DISPLAY ANSWER
{
document.getElementById(where).innerH
TML = 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>
Functions, return, Display Time to
One Div
<html><head>
<title>Functions Using return, Display
to One Div</title>
<script>
function dateTime() //GET DATE TIME
{
return date;
}
function Hours() //GET HOURS
{
let theHours =
return theHours;
}
function Minutes() //GET MINUTES
{
let theMinutes =
return theMinutes;
}
function displayIt(whichOne) //DISPLAY
ANSWER
{
document.getElementById("displayAnsw
er").innerHTML = whichOne;
}
</script>
</head>
<body>
<button onclick="displayIt(Hours());">
Hours </button>
<button
onclick="displayIt(Minutes());"> Minutes
</button>
<div id="displayAnswer"></div>
</body>
</html>
Get Day and Show Message
<html><head><title>Function
Using return</title>
<script>
function theDayOfWeek()
{
let day = date.getDay();

// 0 to 6 0 is sunday 6 is
saturday
let dayName;
if(day == 0)
{
dayName = "Sunday";
}
else if(day == 1)
{
dayName = "Monday";
}
else if(day == 2)
{
dayName = "Tuesday";
}
else if(day == 3)
{
dayName = "Wednesday";
}
else if(day == 4)
{
dayName = "Thursday";
}
else if(day == 5)
{
dayName = "Friday";
}
else if(day == 6)
{
dayName = "Saturday";
}
return dayName;
}
function messageFromDay()
{
let dayMessage;
if(theDayOfWeek() ==
"Friday")
{
dayMessage = "It's Friday.
Do something new";
}
else if(theDayOfWeek() ==
"Saturday")
{
dayMessage = "It's
Saturday. Good time for Scripting";
}
"Sunday")
{
dayMessage = "It's Sunday.
Happy Scripting";
}
"Monday")
{
dayMessage = "It's Monday.
Time to learn";
}
"Tuesday")
{
dayMessage = "It's Tuesday.
Learning alot of Javascript";
}
"Wednesday")
{
dayMessage = "It's
Wednesday. JSON is fun to learn";
}
"Thursday")
{
dayMessage = "It's
Thursday. One more day till
Friday";
}
document.getElementById("dayMe
ssage").innerHTML = dayMessage;
}
</script>
</head>
<body onload =
"messageFromDay();">
<div id="dayMessage"></div>
</body>
</html>
Get Month and Show Message
<html><head><title>Function Using return -
Date Object getMonth</title>
<script>
function theMonth()
{
let monthName = date.getMonth();
// 0 to 11 0 is jan 11 is december
if(monthName == 0)
{
monthName = "January";
}
else if(monthName == 1)
{
monthName = "February";
}
{
monthName = "March";
}
{
monthName = "April";
}
{
monthName = "May";
}
{
monthName = "June";
}
{
monthName = "July";
}
{
monthName = "August";
}
{
monthName = "September";
}
{
monthName = "October";
}
{
monthName = "November";
}
{
monthName = "December";
}
return monthName;
}
function messageMonth()
{
let monthMessage;
if(theMonth() == "March")
{
monthMessage = "It's March. Spring
has come.";
}
else if(theMonth() == "April")
{
monthMessage = "It's April. Getting
Warmer out";
}
else if(theMonth() == "May")
{
monthMessage = "It's May. Very nice
out there now";
}
else if(theMonth() == "June")
{
monthMessage = "It's June. Summer
is here";
}
else if(theMonth() == "July")
{
monthMessage = "It's July. A Nice
Warm Summer so far";
}
else if(theMonth() == "August")
{
monthMessage = "It's August.
Summer is almost over";
}
else if(theMonth() == "September")
{
monthMessage = "It's September.
Autumn has come";
}
else if(theMonth() == "October")
{
monthMessage = "It's October. It's
getting cooler out there";
}
else if(theMonth() == "November")
{
monthMessage = "It's November.
Winter is almost here";
}
else if(theMonth() == "December")
{
monthMessage = "It's December.
Winter is here";
}
else if(theMonth() == "January")
{
monthMessage = "It's January. It's a
snowy winter";
}
else if(theMonth() == "February")
{
monthMessage = "It's February. So
much snow";
}
document.getElementById("monthDisplay").i
nnerHTML = monthMessage;
}
</script>
</head>
<body onload = "messageMonth();">

<div id="monthDisplay"></div>
</body>
</html>
Get Hours and Show Message
<html><head>
<title>Function Using return - Date Object
getHours</title>
<script>
function theHours()
{
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").i
nnerHTML = hoursMessage;
}
</script>
</head>
<body onload = "messageHours();">
<div id="hoursDisplay"></div>
</body>
</html>
Date and Time - Complete Time
Code Script
<html><head>
<title> Date and Time </title>
<style>
.myText
{
font-size: 19px;
height: 22px;
width: 480px;
resize: none;
background-color: black;
color: aqua;
text-align: center;
font-weight: bold;
padding-top:1px;
border-color:grey;
border-radius: 4px;
margin-bottom:5px;
}
div
{
color:blue;
font-weight: bold;
font-size: 22px;
}
</style>
<script>
function theFullDate()
{
}
function theDayOfWeek()
{
let day = date.getDay();
// 0 to 6 0 is sunday 6 is saturday
let dayName;
if(day == 0)
{
dayName = "Sunday";
}
else if(day == 1)
{
dayName = "Monday";
}
else if(day == 2)
{
dayName = "Tuesday";
}
else if(day == 3)
{
dayName = "Wednesday";
}
else if(day == 4)
{
dayName = "Thursday";
}
else if(day == 5)
{
dayName = "Friday";
}
else if(day == 6)
{
dayName = "Saturday";
}
return dayName;
}
function theMonth()
{
let monthName = date.getMonth();
// 0 to 11 0 is jan 11 is december
if(monthName == 0)
{
monthName = "January";
}
{
monthName = "February";
}
{
monthName = "March";
}
{
monthName = "April";
}
{
monthName = "May";
}
{
monthName = "June";
}
{
monthName = "July";
}
{
monthName = "August";
}
{
monthName = "September";
}
{
monthName = "October";
}
{
monthName = "November";
}
{
monthName = "December";
}
return monthName;
}
function theDayOfMonth()
{
let dayOfMonth = date.getDate();
//1 to 31
return dayOfMonth;
}
function theYear()
{
let year = date.getFullYear();
return year;
}
function getMilitaryHours()
{
let hours = date.getHours();
//0 to 23
return hours;
}
function theHours()
{
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
}
{
hours = 11; //am
}
{
hours = 12; //pm
}
{
hours = 1; //pm
}
{
hours = 2; //pm
}
{
hours = 3; //pm
}
{
hours = 4; //pm
}
{
hours = 5; //pm
}
{
hours = 6; //pm
}
{
hours = 7; //pm
}
{
hours = 8; //pm
}
{
hours = 9; //pm
}
{
hours = 10; //pm
}
{
hours = 11; //pm
}
return hours;
}
function theMinutes()
{
let minutes = date.getMinutes();
if(minutes==0)
{
return minutes = "00";
}
else if(minutes == 1)
{
}
{
}
{
}
{
}
{
}
{
}
{
}
{
}
{
}
return minutes;
}
function amOrpm()
{
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";
}
{
halfOfDay = "am";
}
{
halfOfDay = "am";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
else if(hours ==20)
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
{
halfOfDay = "pm";
}
return halfOfDay;
}
function theSeconds()
{
let seconds = date.getSeconds();
if(seconds==0)
{
return seconds = "00";
}
else if(seconds == 1)
{
}
{
}
{
}
{
}
{
}
{
}
{
}
{
}
{
}
return seconds;
}
function keepGettingTime()
{
timeFunctionUpdates();
t=
setInterval('timeFunctionUpdates()',500);
}
function keepGettingMilitaryTime()
{
timeFunctionUpdatesMilitary();
t=
setInterval('timeFunctionUpdatesMilitary(
)',500);
}
function timeFunction(dayName,
monthName, dayOfMonth, year, hours,
minutes, halfOfDay)
{
document.getElementById("displayTime
Function").innerHTML =
theDayOfWeek(dayName) + ", " +
theMonth(monthName) + " " +
theDayOfMonth(dayOfMonth) +", " +
theYear(year) + " at " + theHours(hours)
+ ":" + theMinutes(minutes) + "" +
amOrpm(halfOfDay);
}
function
timeFunctionStart(dayName,monthName,
dayOfMonth,
year,hours,minutes,halfOfDay)
{
FunctionStart").innerHTML=
theDayOfMonth(dayOfMonth) + ", " +
amOrpm(halfOfDay);
}
function
timeFunctionEnd(dayName,monthName,
dayOfMonth,year,
hours,minutes,halfOfDay)
{
FunctionEnd").innerHTML =
amOrpm(halfOfDay);
}
function
timeFunctionUpdates(dayName,monthNa
me,dayOfMonth,year,hours,minutes,seco
nds,halfOfDay)
{
FunctionUpdated").innerHTML =
+ ":" + theMinutes(minutes) + ":" +
theSeconds(seconds) + " " +
amOrpm(halfOfDay);
}
function
timeFunctionUpdatesMilitary(dayName,m
onthName,dayOfMonth,year,hours,minut
es,seconds,halfOfDay)
{
FunctionUpdatedMilitary").innerHTML =
theYear(year) + " at " +
getMilitaryHours(hours) + ":" +
theMinutes(minutes) + ":" +
theSeconds(seconds) + " " +
amOrpm(halfOfDay);
}
function messageFromTime()
{
let dayMessage;
if(theDayOfWeek() == "Friday")
{
dayMessage = "It's Friday. Good
time to learn something new.";
}
"Saturday")
{
dayMessage = "It's Saturday.
Good time for Scripting.";
}
"Sunday")
{
dayMessage = "It's Sunday.
Happy Scripting.";
}
"Monday")
{
dayMessage = "It's Monday. Time
to learn.";
}
"Tuesday")
{
dayMessage = "It's Tuesday.
Learning alot of Javascript.";
}
"Wednesday")
{
dayMessage = "It's Wednesday.
JSON is fun to learn.";
}
"Thursday")
{
dayMessage = "It's Thursday. One
more day till Friday.";
}
document.getElementById("dayMessage
").innerHTML = dayMessage;
}
function messageMonth()
{
let monthMessage;
if(theMonth() == "March")
{
monthMessage = "It's March.
Spring has come.";
}
else if(theMonth() == "April")
{
monthMessage = "It's April.
Getting Warmer out.";
}
else if(theMonth() == "May")
{
monthMessage = "It's May. Very
nice out there now.";
}
else if(theMonth() == "June")
{
monthMessage = "It's June.
Summer is here.";
}
else if(theMonth() == "July")
{
monthMessage = "It's July. A Nice
Warm Summer so far.";
}
else if(theMonth() == "August")
{
monthMessage = "It's August.
Summer is almost over.";
}
else if(theMonth() == "September")
{
monthMessage = "It's September.
Autumn has come.";
}
else if(theMonth() == "October")
{
monthMessage = "It's October. It's
getting cooler out there.";
}
else if(theMonth() == "November")
{
monthMessage = "It's November.
Winter mis almost here.";
}
else if(theMonth() == "December")
{
monthMessage = "It's December.
Winter is here.";
}
else if(theMonth() == "January")
{
monthMessage = "It's January. It's
not a snowy winter.";
}
else if(theMonth() == "February")
{
monthMessage = "It's February.
There is not much snow out there.";
}
document.getElementById("monthDispla
y").innerHTML = monthMessage;
}
function theSimpleHours()
{
return hours;
}
function messageHours()
{
let hoursMessage;
console.log(theSimpleHours());
if(theSimpleHours() >= 0 &&
theSimpleHours() < 6)
{
hoursMessage = "It's Early
Morning.";
}
else if(theSimpleHours() >= 6 &&
{
hoursMessage = "It's Mid
Morning.";
}
{
hoursMessage = "It's Afternoon.";
}
theSimpleHours() <= 23)
{
hoursMessage = "It's night time.";
}
document.getElementById("hoursDispla
y").innerHTML = hoursMessage;
}
</script>
</head>
<body onload = "keepGettingTime();
messageFromTime(); messageMonth();
messageHours();">
<div>
<textarea
id="displayTimeFunctionUpdated"
class="myText" rows="1"
cols="9"></textarea>
</div>
<div id="dayMessage"></div>
<div id="monthDisplay"></div>
<div id="hoursDisplay"></div>
</body>
</html>
Output of the Code
It's Thursday.
One more day till Friday.
It's May.
Very nice out there now.
It's Mid Morning.
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

JavaScript Bookmarklet Advanced Programming by Christopher Topalian

Uploaded by

JavaScript Bookmarklet Advanced Programming by Christopher Topalian

Uploaded by

ALL RIGHTS RESERVED Copyright 2020-2021

Javascript is an incredibly powerful language.

Mastering Javascript is an infinite superpower.

This is the key to victory Stark. Are you ready?

1. Open ANY Web Browser

This is where we will Type our Code!

We Type this code in the

A Message Box will Appear,

This is an alert message box.

We can display any message that

Select All of the Code in our Script Editor and then

name = prompt("Enter Name";

But, Activating Code in a Bookmarklet enables us to trigger

Some people may find it easier to keep all of their code in a

Let’s learn how to trigger our code in the Location Field of a

Left Click the Bookmarks Menu

Bookmark This Page Ctrl + D

Choose Bookmark This Page

We should now have

We open the Properties of our Bookmark

We Type this Code in the

We USE our Bookmarklet by

Whenver we click on the boomark, it will trigger our

But, we don’t do the typing of our code in the location

So instead, we do our coding work in a modern text

When we want to edit our Bookmarklet, we change the

It would be nice if in the future, Browsers allowed a

Instead, we use /* */ to make comments.

By using /* */ any code in between will be

alert("Hi " + name);

for(i=0; i < players; i++)

When Activated, this Bookmarklet will

This Bookmarklet also works for YouTube

On the next page, I show you how to

While on YouTube, when Activated, this

Remember that pauseVideo() is a function

While on YouTube, when Activated, this

Remember that pauseVideo() is a

THE TIME HAS COME TO DEPLOY THE

Yes, Jarvis. The world needs it now.

let theMessage = String(theTime);

WE HAVE TO HAVE THE ARMY OF

WITH JAVASCRIPT BOTS RUNNING FULL

alert(myPet.name + " " +

class Cat extends Animal

let felix = new Cat(

Kind()+ '<br>' + felix.tailWag()+ '<br>' +

theTextArea.style.top= 200 +'px';

/*Keyboard Letter Codes Being Pressed */

/*Player's start position and id */

/* Key Press Detection */

/* Find out which key was pressed */

/* Character Movement Updating */

The 1 entry of the myRecord array is Donald.

To display the first entry name we use

To display the second entry name we use

We loop through the entries of the

We display them all of the entries on a

A person can make RPG Games,

When you have a video playing in your

If you click on this div, it will be removed.

class Cat extends Animal

This Script Works ONLY if the button has

So, if you have a button on your page, with

this returns the output of renderHtml().

Meaning, it tells us in an alert, that

for(i = 0; i < theLinks.length; i++)

for(i = 0; i < theLinks.length; i++)

for(i = 0; i < theLinks.length; i++)

for(i =0; i < theLinks.length; i++)

for(i = 0; i < nameList.length; i++)

We see that the Element has a class called

We use the dot syntax before the

As you can see here, after Right Clicking on

let speed = miles / hours;

return String(speed) + " mph"

/Keyboard Letter Codes Being Pressed /

/Player's start position and id /