Redlands Conservatory JavaScript Lessons

Cut And Paste Code For Querystring Lesson

Querystring: Reading Information Hidden In A URL

When you are on the web, you have no doubt seen an address (URL) that has a question mark
and a string of characters after it similar to:
mywebsite.com/?x=John&age=30
When you use an address like this, you are telling the online server to ignore
everything after the question mark, and to just display the page: mywebsite.com/
Using querystring, you can read the extra information in the URL secretly into your page!
So, this is a way of sending some information about you to the page you are visiting.
This is very useful.  For example, say you sent 10 friends emails asking them to
visit your page, and you wanted the page to address them by name when they arrived,
and keep track of who visited?
You could add a querystring to each email that allowed your web page to have that
information about them when they visited.
So here is the plan for a magic trick!
We'll write a javascript program that will ENCODE the friend's name in the
query statement in a way that they will not be able to read (by flipping it backwards).
When they visit your page, the query statement will secretly tell your page
who they are, and surprise/scare them!

So, we need to write:

(1.) A page with a fake form that can read the querystring, and decode it's meaning.
(2.) A program to generate the URL that we will send our friends (flipping their name).
(3.) Super extra credit:  Should we add a cookie so that our friends can only visit
the page once?  (To prevent them from repeating the test and maybe figuring it out?)

Let's start by writing the fake submission form!  Add as many fake questions as you like!

Fake Submition Form That Reads QueryString:

<html>
<head>
<form name="EnterName">
Type a name you've always liked:
<br>
<input type=text name="myName" size=40>
<br><br>
What is your favorite color:
<br>
<input type=text name="myName01" size=40>
<br><br>
What is your favorite type of car:
<br>
<input type=text name="myName02" size=40>
<br><br><br>
<input type=text name="Greeting" size=40>
<br>
<input type=button value="Enter" onClick=getName()>

<p>
</form>
<script>
var x = location.search;
function getName() {
   document.EnterName.Greeting.value=

//      "I predict your name is " + document.EnterName.myName.value + "! " + x
 "Your name is " + x.substr(1);


}
</script>
</body>
</html>

Note:  We can only fully test this program by uploading it to your own page.
(The online editor will return strange query results.)

Working example at: https://noonco.com/query/guess/?woleb_snoitcurtsni_kcilC

Code for our scanner that predicts their name trick!

(Instructions can be found at: https://noonco.com/query/instructions_II.htm)

<!DOCTYPE html>
<html>
<body>
<h2>System Scanner...</h2>
<p>I know a lot about you.</p>
<p> </p>
<button onclick="myFunction()">Start Scan</button>
<script>
var d = new Date();
var x = location.search;
x=x.substr(1);
//reverse text
for (var i = x.length - 1, o = ''; i >= 0; o += x[i--]) { }

// replace "_" with spaces (Up to 12 instances)
var i;
for (i = 12; i >= 0; i = i - 1) {
var o = o.replace(" ", "_");
}

function myFunction() {
alert("I see you are typing on a " + navigator.platform + "system.\n" + "Your browser is version " + navigator.appVersion + ".\n" + "Your browser name and type are: " + navigator.userAgent + "\nChecking to see if java is enabled... I read that as " + navigator.javaEnabled() + ".\n" + "The language you speak is: " + navigator.language + ".\n" + "Checking to see if cookies are enabled... I read that as " + navigator.cookieEnabled + ".\n" + "Where you live it is: " + d + ".\n" + "\n" + "And your detected personal name is: " + o)
}
</script>
</body>
</html>

Code for reversing a name and adding it to a URL

<html>
<head>
<form name="EnterName">
Enter message:
<br><br>
<input type=text name="myName" size=100>
<br>
<input type=button value="Enter" onClick=getName()>
<br><br>
Send this link to your friend:
<br>
<input type=text name="Greeting" size=100>
<p>
</form>
<script>
function getName() {
x=document.EnterName.myName.value
for (var i = x.length - 1, o = ''; i >= 0; o += x[i--]) {}
// replace the spaces with "-" (Up to 12 instances)
var i;
for (i = 12; i >= 0; i = i - 1) {
var o = o.replace(" ", "_");
}
document.EnterName.Greeting.value=
"https://noonco.com/query/guess/?" + o
}
</script>
</body>
</html>