Dynamic Javascript Email Link Not Havestable by Spam-bots
Why you don't want to have your straight email on public websites? See here.
In this tutorial we are going to create a working email link. And it prints. However, spam-bots can not haverst it because that link is dynamically constructed on-the-fly using Javascript at the time of page-load. In other words, if you do a view-source on my page, you will not see the actual email address. In this tutorial, you will learn how to construct this dynamic email link.
Let's start with a plain web page like this where you want to have "Email me" be an email link to your email address. For the purpose of this tutorial, we'll use a fake email address of somebody432893@somewhere2389.com.
The typical HTML code to do this is ...
<html>
<head>
</head>
<body>
Hello, <a href='somebody432893@somewhere2389.com'>email me</a> if you have questions.
</body>
</html>
But this email address can be harvested by spam-bots. If you post this online and do a "View-Source" with your browser, you can see the straight email address.
What we do is to replace the <a> tag with the following javascript <script> tag
<script language="javascript">writeEmailLink();</script>
So that we have code that looks like this...
The contents of the tag will be javascript code. This means that the browser will call the javascript function writeEmailLink() at that point on the page. The writeEmailLink() is a function that we will code. This is the function that will construct the email link and write that email out to the page.
We code the writeEmailLink() function at the head section of our page, by ...
We construct our email address into a variable that we called realEmail. Think of a variable as a memory location that temporarily hold things for us. First we assign the text (or 'string' as we programmer call it) somebody432893 into the variable. The = is the assignment operator. The thing on the right of the assignment operator is assigned to the variable to the left of it.
All javascript statements ends in a semicolon.
Then we want to append the @ symbol to the end of that text. And we add some more text somewhere2389. We call that concatenation. += is the string concatenation operator. The string at the right of the operator is joined to the string at the left of the operator.
And finally, add the last piece of the text ".com". So by the end of the execution of these few code lines, we have our full email address of somebody432893@somewhere2389.com stored in our variable called realEmail. Because we constructed the full email by joining bits and pieces of text, spambots can not see our full email address all at once (and they don't know how to interpret javascript, so).
In a similar fashion, we construct the text ...
<a href='mailto:somebody432893@somewhere2389.com'>email me</a>
into another variable called str by concatenating piece of text together with this code ...
Note that statement
str += realEmail;
say to take the contents in the variable realEmail and append it to the end of the content of str. After the execution of this statement, the variable str will be holding the text...
<a href='mailto:somebody432893@somewhere2389.com
Execute two more concatentations
str += "email me";
str += "</a>";
and we have the full email link ...
<a href='mailto:somebody432893@somewhere2389.com'>email me</a>
The last thing we need to have our javascript function do it to write this email link out to our page. Do this by ...
Test the page and see that the email link is working.
Passing function parameters into Javascript
Note that this function will always create an email link that says "email me". What if sometimes you want to say "email me", and sometimes you want to say "contact me", and yet sometimes you want it to say "somebody432893@somewhere2389.com"? Do we have to write an different javascript function for each?
No. We would have one javascript function that takes an parameter. This parameter will contain the text that we want the link to say. So if we want our function to construct our link with the text "email me", we will call our function passing in the text "email me" as ...
<script language="javascript">writeEmailLink('email me');</script>
If we want it to say "contact me", then ...
<script language="javascript">writeEmailLink('contact me');</script>
We have to re-write our function definition to accept this parameter...
Now when you test the code, the link will say contact me or whatever text value you pass in as parameter.
But what happens if we don't pass anything into our parameter. Such as ...
<script language="javascript">writeEmailLink();</script>
What do we want to do then? Let's say that if no parameter is passed in, we want the link label to be the text of the email address. Like this...
To make this happen, we re-write our function to be ...
And that's it.
